7240f0d677
This adds astro/components/ and moves the Prism.astro component into there. So to use in a project you can do:
```html
---
import Prism from 'astro/components/Prism.astro';
---
<Prism lang="html" code={`<html> ... </html>`}
```
115 lines
No EOL
4.1 KiB
HTML
115 lines
No EOL
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> |