addresources

EtherbitHQ · Oct 10, 2019 · ce70640 · ce70640
1 parent 7c9b694
commit ce70640
Show file tree

Hide file tree

Showing 9 changed files with 1,605 additions and 3,267 deletions.
diff --git a/data/resources.yml b/data/resources.yml
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,7 +6,9 @@
   "author": "sw-yx <[email protected]>",
   "license": "MIT",
   "dependencies": {
+    "@ssgjs/source-yaml": "^0.0.3",
     "@sveltejs/site-kit": "^1.1.4",
+    "fuse.js": "^3.4.5",
     "ssg": "^0.0.38",
     "yaml": "^1.7.1"
   },

diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
@@ -19,7 +19,7 @@
     margin: 0 auto;
     /* padding: var(--nav-h) var(--side-nav) 0 var(--side-nav); */
     padding: var(--nav-h) 0 0 0;
-    overflow-x: hidden;
+    /* overflow-x: hidden; */
   }
 </style>
 

diff --git a/src/routes/events/index.svelte b/src/routes/events/index.svelte
@@ -11,6 +11,7 @@
   import Event from "components/Event.svelte";
   import Box from "components/Box.svelte";
   export let events;
+  // $: console.log({ events });
 </script>
 
 <style>
@@ -91,12 +92,15 @@
     </p>
     <h3>Add your own event</h3>
     <p>
-      In order to add your own event to the list 
+      In order to add your own event to the list
       <a
         href="https://github.com/sveltejs/community/blob/master/data/events.yml"
         target="_blank">
         make a PR
-      </a> or use <a href="https://svelte-community.netlify.com/admin">our CMS</a> to get the data entry right.
+      </a>
+      or use
+      <a href="https://svelte-community.netlify.com/admin">our CMS</a>
+      to get the data entry right.
     </p>
   </div>
   <div class="boxes">
@@ -106,17 +110,20 @@
         {#each events as event, i}
           <li>
             <details>
-            <summary>
-              {event.city}, {event.country}
-            </summary>
-            <a href={event.url} target="_blank" class="event-name">{event.eventName}</a>
+              <summary>{event.city}, {event.country}</summary>
+              <a href={event.url} target="_blank" class="event-name">
+                {event.eventName}
+              </a>
 
-            <!-- <span class="date">, November 4th</span> -->
+              <!-- <span class="date">, November 4th</span> -->
             </details>
           </li>
         {/each}
         <li>
-        ➕<a href="https://svelte-community.netlify.com/admin">Add/Request your event here!</a>
+          ➕
+          <a href="https://svelte-community.netlify.com/admin">
+            Add/Request your event here!
+          </a>
         </li>
       </ul>
     </Box>

diff --git a/src/routes/resources.svelte b/src/routes/resources.svelte
@@ -1,25 +1,106 @@
+<script context="module">
+  export async function preload() {
+    const res = await this.fetch(`data/resources___ssg___index.json`);
+    const data = await res.json();
+    return { data };
+  }
+</script>
+
 <script>
   import { Hero, Blurb } from "@sveltejs/site-kit";
+  import Event from "components/Event.svelte";
+  import Box from "components/Box.svelte";
+  export let data;
+  let resources = data.resources;
+  let results = resources;
+  // $: console.log({ data });
+  import Fuse from "fuse.js";
+  let searchterm = "";
+  $: {
+    if (searchterm) {
+      var options = {
+        keys: ["name", "url", "tags", "description"]
+      };
+      window.scrollTo({
+        top: 466, // top of Resources
+        left: 0,
+        behavior: "smooth"
+      });
+      var fuse = new Fuse(resources, options);
+      results = fuse.search(searchterm);
+    }
+  }
 </script>
 
 <style>
+  .container {
+    display: flex;
 
+    align-items: start;
+    max-width: 120rem;
+    margin: 10rem auto;
+    padding: 0 var(--side-nav);
+  }
+  .resourcetags {
+    background-color: antiquewhite;
+  }
+  :global(.resourcetags + .resourcetags):before {
+    content: ", ";
+  }
+  input {
+    font-family: inherit;
+    font-size: inherit;
+    padding: 0.4em;
+    margin: 0 0 0.5em 0;
+    box-sizing: border-box;
+    border: 1px solid #ccc;
+    border-radius: 2px;
+  }
+  .search {
+    position: sticky;
+    top: 40px;
+  }
 </style>
 
 <svelte:head>
   <title>Resources • Sapper Community</title>
 </svelte:head>
 
 <Hero
-  title="Svelte Community"
+  title="Community Resources"
   tagline="Resources"
-  outline="sapper-logo-outline.svg"
-  logotype="sapper-logotype.svg" />
-
-<!-- <Blurb>
-
-</Blurb> -->
+  outline="svelte-logo-outline.svg"
+  logotype="community-logotype.svg" />
 
-<div class="description">
-  <p>TODO: do Resources page</p>
+<div class="container">
+  <div class="text">
+    <h2>Resources</h2>
+    <ul>
+      {#each results as resource, i}
+        <li>
+          {#each resource.tags as tag}
+            <code class="resourcetags">{tag}</code>
+          {/each}
+          <a href={resource.url} target="_blank">{resource.name}</a>
+          {#if resource.description}
+            <div>{resource.description}</div>
+          {/if}
+        </li>
+      {/each}
+      <!-- <li>
+          ➕
+          <a href="https://svelte-community.netlify.com/admin">
+            Add/Request your event here!
+          </a>
+        </li> -->
+    </ul>
+  </div>
+  <div class="boxes search">
+    <Box color="#ededed">
+      <label>
+        <h2>Search resources</h2>
+        <input bind:value={searchterm} placeholder="search for your thing" />
+      </label>
+    </Box>
+  </div>
 </div>
diff --git a/ssg.config.js b/ssg.config.js
@@ -1,23 +1,30 @@
 const fs = require('fs')
 const path = require('path')
-const YAML = require('yaml')
-const eventsData = YAML.parse(fs.readFileSync(path.resolve('data/events.yml'), 'utf8'))
+const yaml = require('@ssgjs/source-yaml').default
 
+exports.plugins = {
+  yamlFiles: yaml({ dirPath: 'data' }),
+}
+
+let eventsData = null
 // optional. called repeatedly, can be expensive
 exports.getDataSlice = async (key, uid) => {
   console.log('optional getDataSlice action')
   // we dont really use the key here
   if (key === 'events') {
     // uid == the event's ID
-    return eventsData.EventsList[uid]
+    return eventsData[uid]
   } else {
     throw new Error('invalid key ' + key)
   }
 }
 
 exports.createIndex = async (mainIndex = {}) => {
   // do expensive initial fetches and cache them in .ssg/data.json
-  mainIndex.events = eventsData.EventsList
+  // console.log({ mainIndex: Object.keys(mainIndex.data) })
+  eventsData = mainIndex.yamlFiles['data-events-yml'].data.EventsList
+  mainIndex.events = eventsData
+  mainIndex.resources = mainIndex.yamlFiles['data-resources-yml'].data
   return mainIndex
 }
 

diff --git a/yarn-error.log b/yarn-error.log
@@ -0,0 +1,52 @@
+Arguments: 
+  /Users/swyx/.nvm/versions/node/v10.13.0/bin/node /usr/local/Cellar/yarn/1.17.0/libexec/bin/yarn.js add @ssgjs/plugin-yaml
+
+PATH: 
+  /Users/swyx/.wasmer/bin:/Users/swyx/.wasmer/globals/wapm_packages/.bin:/Users/swyx/.netlify/helper/bin:/Users/swyx/bin:/usr/local/bin:/Users/swyx/Library/Python/2.7/bin:/Users/swyx/ANT_HOME/bin:/Users/swyx/jython2.7.0/bin:/Users/swyx/.wasmer/bin:/Users/swyx/.wasmer/globals/wapm_packages/.bin:/Users/swyx/.netlify/helper/bin:/Users/swyx/.nvm/versions/node/v10.13.0/bin:/Users/swyx/bin:/usr/local/bin:/Users/swyx/Library/Python/2.7/bin:/Users/swyx/ANT_HOME/bin:/Users/swyx/jython2.7.0/bin:/Library/Frameworks/Python.framework/Versions/3.7/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
+
+Yarn version: 
+  1.17.0
+
+Node version: 
+  10.13.0
+
+Platform: 
+  darwin x64
+
+Trace: 
+  Error: https://registry.yarnpkg.com/@ssgjs%2fplugin-yaml: Not found
+      at Request.params.callback [as _callback] (/usr/local/Cellar/yarn/1.17.0/libexec/lib/cli.js:66823:18)
+      at Request.self.callback (/usr/local/Cellar/yarn/1.17.0/libexec/lib/cli.js:140439:22)
+      at Request.emit (events.js:182:13)
+      at Request.<anonymous> (/usr/local/Cellar/yarn/1.17.0/libexec/lib/cli.js:141411:10)
+      at Request.emit (events.js:182:13)
+      at IncomingMessage.<anonymous> (/usr/local/Cellar/yarn/1.17.0/libexec/lib/cli.js:141333:12)
+      at Object.onceWrapper (events.js:273:13)
+      at IncomingMessage.emit (events.js:187:15)
+      at endReadableNT (_stream_readable.js:1094:12)
+      at process._tickCallback (internal/process/next_tick.js:63:19)
+
+npm manifest: 
+  {
+    "name": "community",
+    "version": "1.0.0",
+    "main": "index.js",
+    "repository": "https://github.com/sveltejs/community.git",
+    "author": "sw-yx <[email protected]>",
+    "license": "MIT",
+    "dependencies": {
+      "@sveltejs/site-kit": "^1.1.4",
+      "ssg": "^0.0.38",
+      "yaml": "^1.7.1"
+    },
+    "scripts": {
+      "start": "ssg dev",
+      "build": "ssg export"
+    }
+  }
+
+yarn manifest: 
+  No manifest
+
+Lockfile: 
+  No lockfile