Merge pull request #136 from starboardcoop/0.1.0

0.1.0 🚀
starboardcoop · Mar 26, 2021 · f142a3b · f142a3b
2 parents 2221969 + 876f58f
commit f142a3b
Show file tree

Hide file tree

Showing 22 changed files with 2,283 additions and 1,081 deletions.
diff --git a/LICENSE b/LICENSE
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "things-app",
   "description": "The gateway to your Library of Things.",
-  "version": "1.0.0-alpha",
+  "version": "0.1.0",
   "scripts": {
     "dev": "cross-env NODE_ENV=dev npm-run-all --parallel dev:app dev:server",
     "dev:app": "sapper dev",
@@ -18,34 +18,34 @@
     "cross-env": "^7.0.3",
     "encoding": "^0.1.13",
     "express": "^4.17.1",
-    "libphonenumber-js": "^1.9.6",
-    "netlify-lambda": "^2.0.1",
+    "libphonenumber-js": "^1.9.12",
+    "netlify-lambda": "^2.0.3",
     "node-fetch": "^2.6.1",
     "polka": "next",
-    "sirv": "^1.0.0"
+    "sirv": "^1.0.11"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0",
+    "@babel/core": "^7.13.8",
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
-    "@babel/plugin-transform-runtime": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
-    "@babel/runtime": "^7.0.0",
-    "@rollup/plugin-babel": "^5.0.0",
+    "@babel/plugin-transform-runtime": "^7.13.9",
+    "@babel/preset-env": "^7.13.9",
+    "@babel/runtime": "^7.13.9",
+    "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^14.0.0",
     "@rollup/plugin-node-resolve": "^8.0.0",
-    "@rollup/plugin-replace": "^2.2.0",
+    "@rollup/plugin-replace": "^2.4.1",
     "autoprefixer": "^9.8.6",
     "http-proxy-middleware": "^1.0.6",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.1.1",
+    "postcss": "^8.2.7",
     "postcss-nesting": "^7.0.1",
-    "rollup": "^2.3.4",
-    "rollup-plugin-svelte": "^6.0.0",
+    "rollup": "^2.40.0",
+    "rollup-plugin-svelte": "^6.1.1",
     "rollup-plugin-terser": "^7.0.0",
     "sapper": "^0.28.0",
-    "svelte": "^3.17.3",
-    "svelte-preprocess": "^4.5.2",
-    "svelte-typewriter": "^2.3.1",
-    "tailwindcss": "^2.0.1"
+    "svelte": "^3.35.0",
+    "svelte-preprocess": "^4.6.9",
+    "svelte-typewriter": "^2.4.5",
+    "tailwindcss": "^2.0.3"
   }
 }
diff --git a/rollup.config.js b/rollup.config.js
@@ -35,8 +35,11 @@ export default {
 		output: config.client.output(),
 		plugins: [
 			replace({
-				'process.browser': true,
-				'process.env.NODE_ENV': JSON.stringify(mode)
+				preventAssignment: true,
+				values:{
+					'process.browser': true,
+					'process.env.NODE_ENV': JSON.stringify(mode)
+				},
 			}),
 			svelte({
 				preprocess,
@@ -81,8 +84,11 @@ export default {
 		output: config.server.output(),
 		plugins: [
 			replace({
-				'process.browser': false,
-				'process.env.NODE_ENV': JSON.stringify(mode)
+				preventAssignment: true,
+				values:{
+					'process.browser': true,
+					'process.env.NODE_ENV': JSON.stringify(mode)
+				},
 			}),
 			svelte({
 				preprocess,
@@ -107,8 +113,11 @@ export default {
 		plugins: [
 			resolve(),
 			replace({
-				'process.browser': true,
-				'process.env.NODE_ENV': JSON.stringify(mode)
+				preventAssignment: true,
+				values:{
+					'process.browser': true,
+					'process.env.NODE_ENV': JSON.stringify(mode)
+				},
 			}),
 			commonjs(),
 			!dev && terser()

diff --git a/src/components/Card.svelte b/src/components/Card.svelte
@@ -2,29 +2,10 @@
     export let height = "auto";
     export let width = "auto";
     export let hovers = true;
-
-    let showModal = false;
-    const toggleModal = () => showModal = !showModal;
 </script>
 
-<div on:click={toggleModal} class={`h-${height} w-${width}`}>
+<div class={`h-${height} w-${width}`}>
     <div class:hovers class="h-full bg-white brutal overflow-hidden">
         <slot />
     </div>
-    <div class="fixed z-10 inset-0 p-8 h-screen w-screen bg-black bg-opacity-50 justify-center align-middle hidden" class:visible={showModal}>
-        <div class="bg-gray-300 p-16 rounded md:max-w-md m-auto border-2 border-black thicc">
-            <slot name="modal" />
-        </div>
-    </div>
-</div>
-
-<style>
-    div.visible {
-        @apply flex;
-    }
-
-    div.thicc {
-        box-shadow: 4px 4px 0 #000000;
-    }
-</style>
-
+</div>
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
@@ -5,7 +5,7 @@
     import Link from "./Link.svelte";
 </script>
 
-<footer class="bg-bg py-10">
+<footer class="bg-bg py-10 relative z-50">
     <Column>
         <Row center>
             <a href="https://www.instagram.com/pvdthings" target="_blank">

diff --git a/src/components/Header.svelte b/src/components/Header.svelte
@@ -0,0 +1,20 @@
+<script>
+    import Row from "./Row.svelte";
+    import Title from "./Title.svelte";
+    
+    export let title = null;
+</script>
+
+<header class="w-full p-4 flex flex-col space-y-8 justify-center bg-long-city bg-cover border-b-2 border-gray-200">
+    <Row center>
+        <a href="/">
+            <img src="/PVD_Things_Logo_White.png" alt="PVD Things" class="h-14 md:h-20 lg:h-24"/>
+        </a>
+    </Row>
+    <Row center><slot /></Row>
+    {#if title}
+        <Row center><Title bold caps>{title}</Title></Row>
+    {:else}
+        <h1 hidden>PVD Things</h1>
+    {/if}
+</header>
diff --git a/src/components/Layout.svelte b/src/components/Layout.svelte
@@ -1,3 +1,3 @@
-<main class="bg-indigo-300 min-h-screen w-screen">
+<main class="bg-indigo-300 flex flex-col min-h-screen w-screen">
     <slot />
 </main>
diff --git a/src/components/Menu.svelte b/src/components/Menu.svelte
@@ -3,28 +3,51 @@
         {
             label: "home",
             url: "/"
-        }, 
+        },
         {
             label: "donations",
             url: "/donations"
+        }, 
+        {
+            label: "browse",
+            url: "/browse"
         }
     ];
 
+    let menuButton;
+    let menu;
+
     let visible = false;
+
+    let toggle = () => {
+        visible = !visible
+    }
+    // Close the menu on any click event,
+    // unless the user clicks the menu button or menu itself
+    let closeIfOpen = (event) => {
+        if ([menuButton, menu].includes(event.target)) return
+        visible = false
+    }
+    let closeOnEsc = (event) => {
+        if(event.key !== 'Escape') return
+        visible = false
+    }
 </script>
 
-<div class="z-50 flex flex-col-reverse md:flex-col md:space-y-4 fixed bottom-4 md:top-4 right-4 items-end">
-    <div on:click={() => visible = !visible} class="h-16 w-16 rounded-full cursor-pointer bg-indigo-300 shadow-lg hover:shadow text-center p-4">
-        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-menu-2" viewBox="0 0 24 24" stroke-width="1.7" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
+<svelte:window on:click={closeIfOpen} on:keydown={closeOnEsc} />
+<div class="z-40 flex flex-col-reverse md:flex-col md:space-y-4 fixed bottom-4 md:top-4 right-4 items-end">
+    <button on:click={toggle} class:selected={visible} class="h-16 w-16 rounded-full cursor-pointer appearance-none focus:outline-none focus:ring focus:ring-white focus:bg-indigo-100 box-border border-2 border-indigo-200 bg-indigo-200 shadow-lg hover:shadow text-center p-4" bind:this={menuButton} id="menubutton" aria-haspopup="true" aria-controls="main-menu">
+        <span class="sr-only">Menu</span>
+        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-menu-2 pointer-events-none" viewBox="0 0 24 24" stroke-width="1.7" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
             <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
             <line x1="4" y1="6" x2="20" y2="6" />
             <line x1="4" y1="12" x2="20" y2="12" />
             <line x1="4" y1="18" x2="20" y2="18" />
         </svg>
-    </div>
-    <nav class:visible class="bg-white shadow w-max overflow-hidden p-4 rounded-lg hidden flex-col space-y-2 mb-4">
+    </button>
+    <nav class:visible class="bg-white shadow w-max text-lg overflow-hidden p-4 rounded-lg hidden flex-col space-y-2 mb-4">
         {#each pages as page}
-            <a href={page.url} class="hover:underline">{page.label}</a>
+            <a href={page.url} class="hover:underline focus:underline capitalize" role="menuitem">{page.label}</a>
         {/each}
     </nav>
 </div>
@@ -33,4 +56,9 @@
     .visible {
         @apply flex;
     }
-</style>
+
+    .selected {
+        @apply ring;
+        @apply ring-white;
+    }
+</style>
diff --git a/src/components/Scroller.svelte b/src/components/Scroller.svelte
@@ -1,19 +1,14 @@
 <script>
-    import { goto } from '@sapper/app';
     import Card from "./Card.svelte";
     import Image from "./Image.svelte";
     import Text from "./Text.svelte";
 
     export let things = [];
-
-    function showDetails(thingId) {
-        goto(`/home/thing?id=${thingId}`);
-    }
 </script>
 
-<div class="flex flex-row gap-3 overflow-auto px-8 py-7">
+<div class="flex flex-row space-x-3 overflow-auto px-8 py-7">
     {#each things as thing}
-        <div on:click={showDetails(thing.id)}>
+        <div>
             <Card height="24" width="24">
                 <Image height="full" src={thing.img} alt={thing.name} />
             </Card>

diff --git a/src/components/Spanner.svelte b/src/components/Spanner.svelte
@@ -1,3 +1,14 @@
-<div class="grid gap-4 grid-flow-row md:grid-flow-col">
+<script>
+    export let gap = "4";
+    export let center = false;
+</script>
+
+<div class:center class="grid gap-{gap} grid-flow-row md:grid-flow-col">
     <slot />
-</div>
+</div>
+
+<style>
+    .center {
+        @apply text-center;
+    }
+</style>
diff --git a/src/components/Subheading.svelte b/src/components/Subheading.svelte
@@ -1,11 +1,13 @@
 <script>
     export let caps = false;
-    export let bold = false;
     export let center = false;
+    export let oversized = false;
     export let color = "inherit";
+
+    let size = oversized ? "text-6xl" : "text-xl";
 </script>
 
-<h3 class:caps class:bold class:center class={`text-xl font-bold text-${color}`}>
+<h3 class:caps class:center class="{size} font-bold text-{color}">
     <slot />
 </h3>
 
@@ -14,10 +16,6 @@
         @apply uppercase;
     }
 
-    .bold {
-        @apply font-bold;
-    }
-
     h3.center {
         @apply text-center;
     }

diff --git a/src/components/Terminal.svelte b/src/components/Terminal.svelte
@@ -0,0 +1,14 @@
+<script>
+    import Typewriter from "svelte-typewriter";
+    import Row from "./Row.svelte";
+    import Heading from "./Heading.svelte";
+</script>
+
+<Row>
+    <Heading bold>&gt;</Heading>
+    <Heading italic bold>
+        <Typewriter interval={50} loop>
+            <slot />
+        </Typewriter>
+    </Heading>
+</Row>
diff --git a/src/components/Title.svelte b/src/components/Title.svelte
@@ -1,3 +1,19 @@
-<h1 class="text-5xl md:text-6x text-white text-center">
+<script>
+    export let color = "white";
+    export let bold = false;
+    export let caps = false;
+</script>
+
+<h1 class:bold class:caps class="text-3xl md:text-4xl text-{color} text-center max-w-max px-2 py-1 brutal bg-indigo-500 bg-opacity-75">
     <slot />
-</h1>
+</h1>
+
+<style>
+    .bold {
+        @apply font-bold;
+    }
+
+    .caps {
+        @apply uppercase;
+    }
+</style>
diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
@@ -6,7 +6,9 @@
 
 <Layout>
 	<Menu />
-	<slot />
+	<div class="flex-grow">
+		<slot />
+	</div>
 	<Footer />
 </Layout>
 
@@ -22,12 +24,14 @@
 
 		.hovers {
 			box-shadow: 2px 2px 0 #000000;
+			-webkit-box-shadow: 2px 2px 0px 0px #000000;
 			@apply transform duration-200;
 		}
 
 		.hovers:focus,
 		.hovers:hover {
 			box-shadow: 4px 4px 0 #000000;
+			-webkit-box-shadow: 4px 4px 0px 0px #000000;
 			@apply scale-105;
 		}
 	}