115 lines
4.1 KiB
HTML
115 lines
4.1 KiB
HTML
|
<!doctype html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<title>prism-astro demo</title>
|
|||
|
|
<link rel="stylesheet" href="https://cdn.skypack.dev/prismjs/themes/prism-tomorrow.css">
|
|||
|
|
|
|||
|
|
<pre class="language-astro"><code class="language-astro">---
|
|||
|
|
import Card from '../components/Card.jsx';
|
|||
|
|
import PokemonLookup from '../components/PokemonLookup.astro';
|
|||
|
|
import CompanyLogo from '../components/CompanyLogo.jsx';
|
|||
|
|
import NewsAssets from '../components/NewsAssets.svelte';
|
|||
|
|
import NewsTitle from '../components/NewsTitle.vue';
|
|||
|
|
import BaseHead from '../components/BaseHead.astro';
|
|||
|
|
import MainLayout from '../components/MainLayout.astro';
|
|||
|
|
|
|||
|
|
// Using Snowpack? Want to be featured on snowpack.dev?
|
|||
|
|
// Add your project, organization, or company to the end of this list!
|
|||
|
|
import news from '../data/news.json';
|
|||
|
|
import users from '../data/users.json';
|
|||
|
|
|
|||
|
|
const title: string = 'Community & News';
|
|||
|
|
const description = 'Snowpack community news and companies that use Snowpack.';
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
<!doctype html>
|
|||
|
|
<html>
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<BaseHead title={title} description={description} permalink="TODO" />
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.intro {
|
|||
|
|
margin-top: 1rem;
|
|||
|
|
margin-bottom: 1rem;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
text-align: left;
|
|||
|
|
|
|||
|
|
a {
|
|||
|
|
color: #2e5e82;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<MainLayout>
|
|||
|
|
<NewsTitle title={title} />
|
|||
|
|
<p>
|
|||
|
|
Get the latest news, blog posts, and tutorials on Snowpack. <a href="/feed.xml">Also available via RSS.</a>
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<p>
|
|||
|
|
Got something that you think we should feature?
|
|||
|
|
<a href="https://github.com/snowpackjs/snowpack/edit/main/www/_data/news.js">Submit it!</a>
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<PokemonLookup number={1} />
|
|||
|
|
<PokemonLookup number={2} />
|
|||
|
|
<PokemonLookup number={3} />
|
|||
|
|
|
|||
|
|
<div class="card-grid card-grid-3">
|
|||
|
|
<article class="discord-banner">
|
|||
|
|
<a href="https://discord.gg/snowpack" style="flex-shrink: 0; height: 48px;"><img alt="Join us on Discord!"
|
|||
|
|
src="https://img.shields.io/discord/712696926406967308.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2"
|
|||
|
|
style="height: 48px; border: none; margin-right: 1rem; filter: brightness(1.2) contrast(1.5);" /></a>
|
|||
|
|
<div>Join us on Discord to discuss Snowpack, meet other developers in our community, and show off what you’re
|
|||
|
|
working on!</div>
|
|||
|
|
</article>
|
|||
|
|
|
|||
|
|
{news.reverse().map((item: any) => <Card:idle item={item} />)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="content">
|
|||
|
|
|
|||
|
|
<h3>Who's Using Snowpack?</h3>
|
|||
|
|
|
|||
|
|
<div class="company-logos">
|
|||
|
|
|
|||
|
|
{users.map((user) =>
|
|||
|
|
<CompanyLogo user={user} />)}
|
|||
|
|
|
|||
|
|
<a href="https://github.com/snowpackjs/snowpack/edit/main/www/_template/news.md" target="_blank"
|
|||
|
|
title="Add Your Project/Company!" class="add-company-button">
|
|||
|
|
<svg style="height: 22px; margin-right: 8px;" aria-hidden="true" focusable="false" data-prefix="fas"
|
|||
|
|
data-icon="plus" class="company-logo" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
|
|||
|
|
<path fill="currentColor"
|
|||
|
|
d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z">
|
|||
|
|
</path>
|
|||
|
|
</svg>
|
|||
|
|
Add your logo
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<NewsAssets />
|
|||
|
|
</div>
|
|||
|
|
</MainLayout>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html></code></pre>
|
|||
|
|
<script type="module">
|
|||
|
|
import Prism from 'https://cdn.skypack.dev/prismjs';
|
|||
|
|
import { addAstro } from '../index.mjs';
|
|||
|
|
Prism.manual = true;
|
|||
|
|
|
|||
|
|
async function go() {
|
|||
|
|
await import('https://cdn.skypack.dev/prismjs/components/prism-typescript.js');
|
|||
|
|
|
|||
|
|
addAstro(Prism);
|
|||
|
|
|
|||
|
|
for(const el of document.querySelectorAll('code')) {
|
|||
|
|
Prism.highlightElement(el);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
go();
|
|||
|
|
</script>
|