add initial showcase work

EtherbitHQ · Nov 28, 2019 · 7dcfa6a · 7dcfa6a
1 parent 8934a5a
commit 7dcfa6a
Show file tree

Hide file tree

Showing 4 changed files with 254 additions and 100 deletions.
diff --git a/data/showcase.yml b/data/showcase.yml
@@ -0,0 +1,108 @@
+sites:
+  - name: Svelte TodoMVC
+    source: 'https://github.com/sveltejs/svelte-todomvc'
+    url: 'http://svelte-todomvc.surge.sh/'
+    imageUrl: 'https://user-images.githubusercontent.com/6764957/69814450-2c226280-11c2-11ea-9d5e-d3f7665ac95c.png'
+    description: 'TodoMVC implemented in Svelte'
+    tags:
+      - example app showcase
+    stars: 83
+    last_updated: '2019-09-24T04:43:30Z'
+  - name: RealWorld Svelte
+    source: 'https://github.com/sveltejs/realworld'
+    url: 'https://realworld.svelte.dev/'
+    imageUrl: 'https://user-images.githubusercontent.com/6764957/69814542-6986f000-11c2-11ea-8147-5342e21210fc.png'
+    description: >-
+      Svelte/Sapper implementation of the RealWorld app
+    tags:
+      - example app showcase
+    stars: 356
+    last_updated: '2019-10-10T21:28:51Z'
+  - name: Svelte REPL
+    source: 'https://github.com/sveltejs/svelte-repl'
+    url: 'https://svelte.dev/repl'
+    imageUrl: 'https://user-images.githubusercontent.com/6764957/69814592-87eceb80-11c2-11ea-9f87-1536c5ce99ae.png'
+    description: >-
+      The `<Repl>` component used on the Svelte website
+    tags:
+      - example app showcase
+    stars: 62
+    last_updated: '2019-10-10T19:59:46Z'
+  - name: Svelte DBMonster
+    source: 'https://github.com/sveltejs/svelte-dbmonster'
+    url: 'http://svelte-dbmonster.surge.sh'
+    imageUrl: 'https://user-images.githubusercontent.com/6764957/69814632-a0f59c80-11c2-11ea-92b0-93cc5b56bc0c.png'
+    description: >-
+      Svelte implementation of DBMonster
+    tags:
+      - example app showcase
+    stars: 11
+    last_updated: '2019-06-30T20:24:44Z'
+  - name: hn.svelte.dev
+    source: 'https://github.com/sveltejs/hn.svelte.dev'
+    url: 'https://hn.svelte.dev'
+    imageUrl: 'https://user-images.githubusercontent.com/6764957/69814687-bb2f7a80-11c2-11ea-925a-0d6324670896.png'
+    description: 'Hacker News clone built with Svelte and Sapper'
+    tags:
+      - example app showcase
+    stars: 46
+    last_updated: '2019-10-10T00:20:42Z'
+  - name: svelte-travel-transitions
+    source: 'https://github.com/pngwn/svelte-travel-transitions'
+    url: 'https://svelte-travel.netlify.com/'
+    imageUrl: 'https://user-images.githubusercontent.com/6764957/69814727-d26e6800-11c2-11ea-95d3-e4ac4c719fe7.png'
+    description: 'Native-like Page Transitions with Svelte and Sapper, A Travel App'
+    tags:
+      - example app showcase
+    stars: 62
+    last_updated: '2019-10-11T06:38:28Z'
+  - name: New Tab
+    source: 'https://github.com/MaxMilton/new-tab'
+    url: 'https://chrome.google.com/webstore/detail/new-tab/cpcibnbdmpmcmnkhoiilpnlaepkepknb'
+    description: >-
+      ⚡ A high performance Google Chrome new tab page that gets you where you
+      need to go faster
+    tags:
+      - example app showcase
+    stars: 22
+    last_updated: '2019-10-05T08:45:00Z'
+  - name: NAU Tab
+    source: 'https://github.com/trongthanh/nau-chrome-tab'
+    url: 'https://int3ractive.com/nau-tab'
+    imageUrl: 'https://int3ractive.com/img/nau-tab-bg.jpg'
+    description: >-
+      Beautiful New Tab extension for Chrome, Firefox and browsers support web
+      extension
+    tags:
+      - example app showcase
+    stars: 18
+    last_updated: '2019-09-29T21:49:08Z'
+  - name: Perfect Home
+    source: 'https://github.com/tborychowski/perfect-home'
+    url: 'https://addons.mozilla.org/en-US/firefox/addon/perfect-home/'
+    imageUrl: 'https://github.com/tborychowski/perfect-home/raw/master/_stuff/screen-main.png'
+    description: Firefox newtab/home replacement
+    tags:
+      - example app showcase
+    stars: 4
+    last_updated: '2019-10-09T15:50:52Z'
+  - name: Nomie
+    source: 'https://github.com/open-nomie/nomie'
+    url: 'https://nomie.app/'
+    imageUrl: 'https://camo.githubusercontent.com/36e7c0606e4fb812569d78d8efc36d7bed388c9c/68747470733a2f2f73686172656b696e672e73332e616d617a6f6e6177732e636f6d2f6e6f6d69652d6865616465722e706e673f32'
+    description: Mood and Life Tracker built with Svelte
+    tags:
+      - example app showcase
+    stars: 117
+    last_updated: '2019-10-10T02:56:09Z'
+  - name: Palettes
+    source: 'https://github.com/gka/palettes'
+    url: 'https://vis4.net/palettes'
+    imageUrl: 'https://user-images.githubusercontent.com/6764957/69814877-26794c80-11c3-11ea-999d-eeccf03f565c.png'
+    description: >-
+      A tool for creating nice, percerptually correct and colorblind-safe color
+      palettes
+    tags:
+      - example app showcase
+    stars: 82
+    last_updated: '2019-10-10T06:26:30Z'
diff --git a/src/routes/showcase.svelte b/src/routes/showcase.svelte
@@ -0,0 +1,144 @@
+<script context="module">
+  export async function preload() {
+    const data = await this.ssgData({ key: 'showcase' });
+    return { sites: data.sites };
+  }
+</script>
+
+<script>
+  import { Hero, Blurb } from '@sveltejs/site-kit';
+  import Event from 'components/Event.svelte';
+  import Box from 'components/Box.svelte';
+  import Resource from 'components/Resource.svelte';
+  import Tag from 'components/Tag.svelte';
+  import { transformResourceData } from 'resources/transformResourceData.js';
+  import { filterResourcesByTags } from 'resources/helpers.js';
+
+  export let sites;
+  // $: console.log({ sites });
+</script>
+
+<style>
+  .container {
+    /* display: flex;
+    align-items: start; */
+    max-width: 120rem;
+    margin: 10rem auto;
+    padding: 0 var(--side-nav);
+  }
+  .SiteCardList {
+    display: grid;
+    grid-template-columns: 25vw 25vw 25vw;
+    gap: 1rem;
+  }
+  .SiteCard {
+    flex-direction: column;
+    margin: 1.5rem;
+    position: relative;
+    display: flex;
+    flex: 1 0 0;
+  }
+  .SiteCard-Image {
+    width: 100%;
+  }
+  .SiteCard-Image img {
+    width: 25vw;
+    height: 16vw;
+    object-fit: cover;
+  }
+  .SiteCard-Image .Placeholder {
+    width: 25vw;
+    height: 16vw;
+    background-color: gray;
+  }
+  .SiteCard-Metadata-Labels span {
+    background-color: lightgray;
+    border-radius: 5px;
+    padding: 2px;
+  }
+</style>
+
+<svelte:head>
+  <title>Resources • Site Showcase</title>
+</svelte:head>
+
+<Hero
+  title="Site Showcase"
+  tagline="Showcase"
+  outline="svelte-logo-outline.svg"
+  logotype="community-logotype.svg"
+>
+</Hero>
+
+<div class="container">
+  <p>
+    This is a placeholder for the upcoming Site Showcase. Right now we just need
+    to accumulate a list of high quality sites and categories we'd like to
+    showcase.
+  </p>
+
+  <div class="SiteCardList">
+    {#each sites as site}
+    <div class="SiteCard">
+      <div class="SiteCard-Image">
+        {#if site.imageUrl}
+        <a href="{site.source || site.url}">
+          <img alt="Screenshot of {site.name}" src="{site.imageUrl}" />
+        </a>
+        {:else}
+        <div class="Placeholder">No screenshot available</div>
+        {/if}
+      </div>
+      <a href="{site.source || site.url}">
+        <strong class="title">{site.name}</strong>
+      </a>
+
+      <div class="SiteCard-Metadata">
+        <div class="SiteCard-Metadata-Desc">
+          {site.description}
+        </div>
+        <div class="SiteCard-Metadata-Labels">
+          {#each site.tags as tag}
+          <span>{tag}</span>
+          {/each}
+        </div>
+        <div class="SiteCard-Metadata-Links">
+          {#if site.source}
+          <a href="{site.source}" target="_blank" rel="noopener noreferrer">
+            <svg
+              fill="currentColor"
+              preserveAspectRatio="xMidYMid meet"
+              height="1em"
+              width="1em"
+              viewBox="0 0 40 40"
+              style="vertical-align:text-top"
+            >
+              <g>
+                <path
+                  d="m20 0c-11 0-20 9-20 20 0 8.8 5.7 16.3 13.7 19 1 0.2 1.3-0.5 1.3-1 0-0.5 0-2 0-3.7-5.5 1.2-6.7-2.4-6.7-2.4-0.9-2.3-2.2-2.9-2.2-2.9-1.9-1.2 0.1-1.2 0.1-1.2 2 0.1 3.1 2.1 3.1 2.1 1.7 3 4.6 2.1 5.8 1.6 0.2-1.3 0.7-2.2 1.3-2.7-4.5-0.5-9.2-2.2-9.2-9.8 0-2.2 0.8-4 2.1-5.4-0.2-0.5-0.9-2.6 0.2-5.3 0 0 1.7-0.5 5.5 2 1.6-0.4 3.3-0.6 5-0.6 1.7 0 3.4 0.2 5 0.7 3.8-2.6 5.5-2.1 5.5-2.1 1.1 2.8 0.4 4.8 0.2 5.3 1.3 1.4 2.1 3.2 2.1 5.4 0 7.6-4.7 9.3-9.2 9.8 0.7 0.6 1.4 1.9 1.4 3.7 0 2.7 0 4.9 0 5.5 0 0.6 0.3 1.2 1.3 1 8-2.7 13.7-10.2 13.7-19 0-11-9-20-20-20z"
+                ></path>
+              </g></svg
+          ></a>
+          {/if} {#if site.url}
+          <a href="{site.url}" target="_blank" rel="noopener noreferrer"
+            ><svg
+              fill="currentColor"
+              preserveAspectRatio="xMidYMid meet"
+              height="1em"
+              width="1em"
+              viewBox="0 0 40 40"
+              style="vertical-align:text-top"
+            >
+              <g>
+                <path
+                  d="m23.4 5h11.6v11.6h-3.4v-5.9l-16.3 16.3-2.3-2.3 16.3-16.3h-5.9v-3.4z m8.2 26.6v-11.6h3.4v11.6q0 1.4-1 2.4t-2.4 1h-23.2q-1.4 0-2.4-1t-1-2.4v-23.2q0-1.4 1-2.4t2.4-1h11.6v3.4h-11.6v23.2h23.2z"
+                ></path>
+              </g></svg
+          ></a>
+          {/if}
+        </div>
+      </div>
+    </div>
+    {/each}
+  </div>
+</div>
diff --git a/src/routes/showcase.svexy b/src/routes/showcase.svexy
diff --git a/ssg.config.js b/ssg.config.js
@@ -11,10 +11,10 @@ let eventsData = null;
 exports.createIndex = async (mainIndex = {}) => {
   // do expensive initial fetches and cache them in .ssg/data.json
   // console.log({ mainIndex: Object.keys(mainIndex.data) })
-  eventsData = mainIndex.yamlFiles['data-events-yml'].data.EventsList;
-  mainIndex.events = eventsData;
+  mainIndex.events = mainIndex.yamlFiles['data-events-yml'].data.EventsList;
   mainIndex.resources = mainIndex.yamlFiles['data-resources-yml'].data;
   mainIndex.code = mainIndex.yamlFiles['data-code-yml'].data;
+  mainIndex.showcase = mainIndex.yamlFiles['data-showcase-yml'].data;
   return mainIndex;
 };