summaryrefslogtreecommitdiff
path: root/examples/snowpack/src/pages/news.astro
blob: 92ab3c6effc7275614fe6bf12e57bbf73821b892 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
---
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 = 'Community & News';
const description = 'Snowpack community news and companies that use Snowpack.';
---

<!doctype html>
<html lang="en">

<head>
  <BaseHead title={title} description={description} permalink="TODO" />
</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 client: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>