add footer slot, styles

josefaidt · Mar 31, 2021 · 6c2d591 · 6c2d591
1 parent 7b00298
commit 6c2d591
Show file tree

Hide file tree

Showing 5 changed files with 132 additions and 94 deletions.
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
@@ -6,72 +6,83 @@
 </script>
 
 <footer>
-  <p>&copy; {new Date().getFullYear()}, Built with <a href="https://svelte.dev">Svelte</a></p>
-  <div>
-    <a
-      href="https://twitter.com/josefaidt"
-      aria-label="Twitter"
-      target="_blank"
-      rel="noreferrer noorigin"
-    >
-      <TwitterIcon />
-    </a>
-    <a
-      href="https://linkedin.com/in/josefaidt"
-      aria-label="LinkedIn"
-      target="_blank"
-      rel="noreferrer noorigin"
-    >
-      <LinkedInIcon />
-    </a>
-    <a
-      href="https://open.spotify.com/user/1215285465?si=oxVZ8WelTQyZBdr97Tz4fQ"
-      target="_blank"
-      rel="noreferrer noorigin"
-      aria-label="Spotify"
-    >
-      <SpotifyIcon />
-    </a>
-    <a
-      href="https://github.com/josefaidt"
-      target="_blank"
-      rel="noreferrer noorigin"
-      data-icon="github"
-      aria-label="Github"
-    >
-      <GitHubIcon />
-    </a>
-    <!-- twitch -->
-    <!-- twitter -->
-    <!-- linkedin -->
+  <slot />
+  <div class="links-container">
+    <p>&copy; {new Date().getFullYear()}, Built with <a href="https://svelte.dev">Svelte</a></p>
+    <div class="socials">
+      <a
+        href="https://twitter.com/josefaidt"
+        aria-label="Twitter"
+        target="_blank"
+        rel="noreferrer noorigin"
+      >
+        <TwitterIcon />
+      </a>
+      <a
+        href="https://linkedin.com/in/josefaidt"
+        aria-label="LinkedIn"
+        target="_blank"
+        rel="noreferrer noorigin"
+      >
+        <LinkedInIcon />
+      </a>
+      <a
+        href="https://open.spotify.com/user/1215285465?si=oxVZ8WelTQyZBdr97Tz4fQ"
+        target="_blank"
+        rel="noreferrer noorigin"
+        aria-label="Spotify"
+      >
+        <SpotifyIcon />
+      </a>
+      <a
+        href="https://github.com/josefaidt"
+        target="_blank"
+        rel="noreferrer noorigin"
+        data-icon="github"
+        aria-label="Github"
+      >
+        <GitHubIcon />
+      </a>
+      <!-- twitch -->
+      <!-- twitter -->
+      <!-- linkedin -->
+    </div>
   </div>
 </footer>
 
 <style>
   footer {
+    width: 80%;
+    margin-left: auto;
+    margin-right: auto;
+    display: grid;
+    grid-auto-flow: row;
+    grid-auto-rows: max-content;
+    row-gap: 1rem;
     grid-area: footer;
+  }
+
+  .links-container {
     padding-bottom: 2rem;
-    margin: 0 auto;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    width: 80%;
     font-size: 90%;
   }
 
   footer p {
     margin: 0;
   }
 
-  footer div {
+  .links-container .socials {
     height: 100%;
     display: grid;
     grid-auto-flow: column;
     align-items: center;
     grid-gap: 1.7rem;
   }
 
-  footer div a {
+  .links-container .socials a {
     display: flex;
   }
 

diff --git a/src/pages/$layout.svelte b/src/pages/$layout.svelte
@@ -3,13 +3,41 @@
 </script>
 
 <script>
+  import { onMount } from 'svelte'
   import { ThemeWrapper } from 'svelte-themer'
   import { themes } from '$components/theme'
   // PRIMARY LAYOUT
   import Nav from '$components/Nav.svelte'
   import ThemeToggle from '$components/ThemeToggle.svelte'
   import Logo from '$components/Logo.svelte'
   import Footer from '$components/Footer.svelte'
+
+  export let currentlyPlaying = {}
+
+  $: isPlaying = currentlyPlaying.isPlaying
+  $: album = currentlyPlaying.album
+  $: albumImageUrl = currentlyPlaying.albumImageUrl
+  $: artist = currentlyPlaying.artist
+  $: songUrl = currentlyPlaying.songUrl
+  $: title = currentlyPlaying.title
+
+  async function getSpotifyCurrentlyPlaying() {
+    const res = await fetch(`/api/spotify/currently-playing`)
+    if (res.ok) {
+      return await res.json()
+    } else {
+      throw new Error('Unable to fetch')
+    }
+  }
+
+  onMount(async () => {
+    currentlyPlaying = await getSpotifyCurrentlyPlaying()
+  })
+
+  import '$styles/normalize.css'
+  import '$styles/global.css'
+  import '$styles/style.css'
+  import '$styles/prism.css'
 </script>
 
 <ThemeWrapper key="{STORAGE_KEY}" themes="{themes}">
@@ -24,15 +52,39 @@
     <main>
       <slot />
     </main>
-    <Footer />
+    <Footer>
+      <div class="spotify">
+        <p>
+          <b>{isPlaying ? `Now playing ` : 'Not playing'}</b>
+          {isPlaying ? `${title} by ${artist}` : ''}
+          <span>&ndash; Spotify</span>
+        </p>
+      </div>
+    </Footer>
   </div>
 </ThemeWrapper>
 
 <style>
-  @import '$styles/normalize.css';
-  @import '$styles/global.css';
-  @import '$styles/style.css';
-  @import '$styles/prism.css';
+  .spotify {
+    /* border: 1px solid green; */
+  }
+
+  .spotify p {
+    margin: 0;
+  }
+
+  .spotify p span {
+    color: var(--theme-text);
+    filter: invert(0.4);
+  }
+
+  :global(html) {
+    height: 100%;
+  }
+
+  :global(body) {
+    min-height: 100%;
+  }
 
   :global(html, body) {
     color: var(--theme-text);

diff --git a/src/pages/dashboard.svelte b/src/pages/dashboard.svelte
@@ -2,59 +2,19 @@
   /**
    * @type {import('@sveltejs/kit').Load}
    */
-  export async function load({ page, fetch, session, context }) {
-    return {
-      props: {
-        isPlaying: false,
-      },
-    }
-  }
+  // export async function load({ page, fetch, session, context }) {
+  //   return {
+  //     props: {
+  //       isPlaying: false,
+  //     },
+  //   }
+  // }
 </script>
 
 <script>
-  import { onMount } from 'svelte'
-  export let isPlaying
-  export let currentlyPlaying = {}
-
-  $: isPlaying = currentlyPlaying.isPlaying
-  $: album = currentlyPlaying.album
-  $: albumImageUrl = currentlyPlaying.albumImageUrl
-  $: artist = currentlyPlaying.artist
-  $: songUrl = currentlyPlaying.songUrl
-  $: title = currentlyPlaying.title
-
-  async function getSpotifyCurrentlyPlaying() {
-    const res = await fetch(`/api/spotify/currently-playing`)
-    if (res.ok) {
-      return await res.json()
-    } else {
-      throw new Error('Unable to fetch')
-    }
-  }
-
-  onMount(async () => {
-    currentlyPlaying = await getSpotifyCurrentlyPlaying()
-  })
-
-  $: console.log(title)
 </script>
 
 <h1>Dashboard</h1>
-<!-- {#await getSpotifyCurrentlyPlaying()}
-  <p>loading..</p>
-{:then current}
-  <pre><code>{JSON.stringify(current, null, 2)}</code></pre>
-{:catch error}
-  <pre>error</pre>
-  <pre><code>{error}</code></pre>
-{/await} -->
-<div class="spotify">
-  <p>{isPlaying ? `Now playing ${title}` : 'Not playing'}</p>
-</div>
 
 <style>
-  .spotify {
-    padding: 1rem 2rem;
-    border: 1px solid green;
-  }
 </style>
diff --git a/src/pages/index.svelte b/src/pages/index.svelte
@@ -3,3 +3,17 @@
 </script>
 
 <h1>Hello</h1>
+<div><q>The power of imagination makes us infinite — John Muir</q></div>
+
+<style>
+  div {
+    margin: 3rem auto;
+
+    text-align: center;
+    font-style: italic;
+  }
+
+  q {
+    color: var(--theme-text);
+  }
+</style>
diff --git a/support/src/db/store.js b/support/src/db/store.js
@@ -1,5 +1,6 @@
 const { join } = require('path')
 const Datastore = require('nedb')
+// todo: use a store for caching, store last updated date and check against current for updating records
 // const filename = join(__dirname, 'store.db')
 // const store = new Datastore({ filename, autoload: true })
 const store = new Datastore()