Split tags off into their own component, move tags to above author, r…

…estyle tags
EthanThatOneKid · Jun 4, 2022 · bab7088 · bab7088
1 parent 0d059f9
commit bab7088
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 7 deletions.
diff --git a/src/routes/blog/[id].svelte b/src/routes/blog/[id].svelte
@@ -18,6 +18,7 @@
   import Spacing from '$lib/components/sections/spacing.svelte';
   import { readingTime } from '$lib/blog/utils';
   import { Temporal } from '@js-temporal/polyfill';
+  import Tags from './tags.svelte';
 
   export let post: Newsletter;
 </script>
@@ -60,12 +61,7 @@
     <div class="markdown-body">
       {@html post.html}
     </div>
-
-    {#if post.labels.length > 0}
-      <small class="ita">Tags: {post.labels.join(', ')}</small>
-      <br />
-    {/if}
-
+    <Tags labels={post.labels} />
     <small class="ita">Read as TXT: <a href={`${post.url}.txt`}>{post.url}.txt</a></small>
   </div>
 

diff --git a/src/routes/blog/index.svelte b/src/routes/blog/index.svelte
@@ -12,6 +12,7 @@
   import Spacing from '$lib/components/sections/spacing.svelte';
   import { Temporal } from '@js-temporal/polyfill';
   import { readingTime } from '$lib/blog/utils';
+  import Tags from './tags.svelte';
 
   export let posts: Newsletter[] = [];
 </script>
@@ -50,6 +51,7 @@
           <div class="markdown-body">
             {@html post.html}
           </div>
+          <Tags labels={post.labels} />
           <div id="author">
             <a href={post.author.url}>
               <img src={post.author.picture} alt="" />
@@ -67,7 +69,6 @@
               </p>
             </div>
           </div>
-          <small class="ita">{post.labels.join(', ')}</small>
         </a>
       </li>
     {/each}

diff --git a/src/routes/blog/tags.svelte b/src/routes/blog/tags.svelte
@@ -0,0 +1,26 @@
+<script>
+  export let labels;
+</script>
+
+{#if labels.length > 0}
+  <div class="labels">
+    {#each labels as label}
+      <small class="label">#{label}</small>
+    {/each}
+  </div>
+{/if}
+
+<style lang="scss">
+  .labels {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 0.2em;
+    padding-bottom: 0.5em;
+    small {
+      background-color: var(--acm-light);
+      border-radius: 5px;
+      padding: 0.3em;
+    }
+  }
+</style>