feat(front): introduces the all categories page, tags, api, and inter…

…action adds a redirect for /posts/category/ without slug -> all page closes #742
dgrebb · Oct 7, 2023 · 03be2f8 · 03be2f8
1 parent fd9a81a
commit 03be2f8
Show file tree

Hide file tree

Showing 10 changed files with 137 additions and 24 deletions.
diff --git a/front/src/lib/components/PageNav.svelte b/front/src/lib/components/PageNav.svelte
@@ -12,6 +12,7 @@
   export let mini = false;
   export let top = false;
   export let setActiveLink = null;
+  export let category = null;
 
   function activeLink(node) {
     const link = node.attributes.href.value;
@@ -56,6 +57,20 @@
     {#if categories && categories.length}
       <h2>Categories</h2>
       <ul class="page-navigation-list">
+        <li class="page-navigation-category-all">
+          <a
+            on:click={(e) => {
+              categoryClick(pathname, name);
+              setActiveLink(e);
+              if (mini) pageFenceClickHandler();
+            }}
+            href="/posts/category/all/"
+            class="transition-link"
+            use:activeLink
+          >
+            All
+          </a>
+        </li>
         {#each categories as { attributes: { name, slug } }, i}
           <li>
             <a
@@ -66,6 +81,7 @@
               }}
               href="/posts/category/{slug}/"
               class="transition-link"
+              class:active={category === slug}
               use:activeLink
             >
               {name}

diff --git a/front/src/lib/components/icons/Tag.svelte b/front/src/lib/components/icons/Tag.svelte
@@ -0,0 +1,11 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="11"
+  height="11"
+  viewBox="0 0 16 16"
+  class="category-tag-icon"
+  ><path
+    fill="currentColor"
+    d="M2.587 7.314a1.988 1.988 0 0 0 0 2.822l3.296 3.28a2.013 2.013 0 0 0 2.836 0l4.67-4.647a1.99 1.99 0 0 0 .587-1.397L14 4.01A2 2 0 0 0 11.987 2l-3.25.014a2.01 2.01 0 0 0-1.41.584l-4.74 4.716ZM11 6a1 1 0 1 1 0-2a1 1 0 0 1 0 2Z"
+  /></svg
+>
diff --git a/front/src/lib/styles/base/colors-light.css b/front/src/lib/styles/base/colors-light.css
@@ -11,8 +11,10 @@
   --lemon-50-a30: #fdfdee4c;
   --lemon-50-a75: #fdfdeebf;
   --jasper: #cd533bff;
+  --jasper-a50: #cd533b7f;
   --darkred: #8c1c13ff;
   --sand: #fc9f5bff;
+  --sand-a50: #fc9f5b7f;
   --green: #5aff15ff;
   --darkgreen: #5e6319ff;
   --blue: #4062bbff;

diff --git a/front/src/lib/styles/base/theme.css b/front/src/lib/styles/base/theme.css
@@ -89,6 +89,8 @@
     --link-clr: var(--violet-a75);
     --link-clr--hover: var(--jasper);
     --highlight-clr: var(--jasper);
+    --tag-clr: var(--sand-a50);
+    --tag-border-clr: var(--jasper-a50);
 
     --rim-light-bg: linear-gradient(
       10deg,
@@ -438,13 +440,13 @@
         p {
           color: var(--violet-a75);
         }
-        &:hover,
-        &:focus,
-        &:focus-within {
+        a:hover,
+        a:focus,
+        a:focus-within {
           .post-item-image {
             opacity: 1;
           }
-          a .post-title {
+          .post-title {
             color: var(--jasper);
           }
         }
@@ -524,6 +526,8 @@
     --link-clr: var(--celestial-a75);
     --link-clr--hover: var(--celestial);
     --highlight-clr: var(--orange);
+    --tag-clr: var(--grape);
+    --tag-border-clr: var(--celestial-a30);
 
     --rim-light-bg: linear-gradient(
       10deg,
@@ -838,13 +842,13 @@
         p {
           color: var(--fg-clr);
         }
-        &:hover,
-        &:focus,
-        &:focus-within {
+        a:hover,
+        a:focus,
+        a:focus-within {
           .post-item-image {
             opacity: 1;
           }
-          a .post-title {
+          .post-title {
             color: var(--orange);
           }
         }

diff --git a/front/src/lib/styles/components/page-nav.css b/front/src/lib/styles/components/page-nav.css
@@ -32,7 +32,7 @@
     cursor: default;
     padding-right: 1rem;
     &:after {
-      top: calc(50% - 0.75rem);
+      top: calc(50% - 0.7rem);
       right: 0;
       padding-left: 0.5rem;
       content: '•';

diff --git a/front/src/lib/styles/pages/category.css b/front/src/lib/styles/pages/category.css
@@ -33,9 +33,6 @@
     @screen md {
       padding-top: 0;
     }
-    li {
-      list-style-type: none;
-    }
   }
   .category-posts-list {
     width: 100%;
@@ -49,9 +46,17 @@
     .transition-elastic-fly-container {
       border-radius: 0.75rem;
       overflow: visible;
-      ul,
+      ul {
+        padding: 1.5rem;
+        @media screen and (min-width: 480px) {
+          padding: 1.5rem;
+        }
+        @media screen and (min-width: 640px) {
+          padding: 2rem;
+        }
+      }
       p.summary {
-        padding: 2rem;
+        padding: 2rem 0;
       }
       &::before {
         position: absolute;
@@ -77,8 +82,9 @@
         display: flex;
         flex-grow: 1;
         flex-direction: column;
+        margin-bottom: 0.5rem;
         .post-title {
-          margin-bottom: 0.5rem;
+          margin-bottom: 0;
           font-size: 1.5rem;
           line-height: 1.75rem;
           @media screen and (min-width: 480px) {
@@ -87,7 +93,10 @@
           }
         }
         .post-date {
-          font-size: 1rem;
+          font-size: 0.875rem;
+          @media screen and (min-width: 480px) {
+            font-size: 1rem;
+          }
         }
       }
       .post-item-image {
@@ -100,11 +109,61 @@
         transition-duration: var(--transition-duration);
         transition-property: opacity;
         transition-timing-function: var(--transition-timing-function);
-        margin-left: 1.75rem;
+        margin-left: 0.75rem;
         border-radius: 100%;
+        width: 20%;
         width: 77px;
         height: 77px;
       }
+      ul.category-tags {
+        margin: 0;
+        padding: 0;
+      }
+      li.category-tag {
+        display: inline-block;
+        opacity: 0.7;
+        transition-duration: var(--transition-duration);
+        transition-property: opacity, background-color, color;
+        margin: 0 0.33rem 0 0;
+        color: var(--fg-clr);
+        font-size: 0.75rem;
+        font-family: var(--font-ps);
+        @media screen and (min-width: 480px) {
+          margin-right: 0.5rem;
+          box-shadow: var(--shadow-elevation-low);
+          border: thin solid var(--tag-border-clr);
+          border-radius: 1.5rem;
+          background-color: var(--tag-clr);
+          padding: 0.175rem 0.75rem 0.175rem 0.5rem;
+        }
+        &:hover,
+        &:focus,
+        &:focus-visible {
+          opacity: 1;
+        }
+        &:last-of-type {
+          margin-right: 0;
+        }
+        &.active {
+          opacity: 1;
+          a {
+            cursor: default;
+          }
+        }
+        a {
+          align-items: center;
+        }
+        .category-tag-icon {
+          display: inline;
+          vertical-align: middle;
+          margin-right: 3px;
+          height: 100%;
+          color: var(--highlight-clr);
+          @media screen and (min-width: 480px) {
+            margin-right: 0.5rem;
+          }
+        }
+      }
       .post-item-summary {
         transition: opacity 0.5s;
       }

diff --git a/front/src/lib/styles/pages/post.css b/front/src/lib/styles/pages/post.css
@@ -110,8 +110,6 @@
   .aside-toggle {
     position: relative;
     z-index: 8;
-    @screen sm {
-    }
     @screen md {
       top: -4rem;
     }
@@ -155,6 +153,9 @@
       list-style-type: none;
       @apply dg--font-lb;
     }
+    .page-navigation-category-all {
+      display: none;
+    }
     /* &.show {
       display: block;
       width: 25%;

diff --git a/front/src/routes/posts/category/+page.svelte b/front/src/routes/posts/category/+page.svelte
@@ -0,0 +1,5 @@
+<script>
+  import { browser } from '$app/environment';
+  import { goto } from '$app/navigation';
+  if (browser) goto('/posts/category/all');
+</script>
diff --git a/front/src/routes/posts/category/[category]/+page.server.js b/front/src/routes/posts/category/[category]/+page.server.js
@@ -3,17 +3,20 @@ import api, { categoryAPI } from '@api';
 import {
   PUBLIC_API_URL as URL,
   PUBLIC_API_PATH_POSTS as POSTS,
+  PUBLIC_POSTS_PREVIEW_PARAMS as POSTS_PARAMS,
   PUBLIC_API_PATH_CATEGORY as CAT,
-  PUBLIC_CATEGORY_PAGE_PARAMS as PARAMS,
+  PUBLIC_CATEGORY_PAGE_PARAMS as CAT_PARAMS,
 } from '$env/static/public';
 
 export async function load({ params }) {
   const { category } = params;
   const categoriesSingletonEndpoint =
     URL + '/categories-page?populate[0]=seo.metaImage';
-  const categoryCollectionEndpoint = URL + '/categories';
+  const categoryCollectionEndpoint =
+    URL + '/categories?sort[0]=name&filters[slug][$not]=all';
   const categoryEndpoint = URL + CAT + category + '?populate[0]=seo.metaImage';
-  const postsEndpoint = URL + POSTS + PARAMS + category;
+  const postsEndpoint =
+    URL + POSTS + (category !== 'all' ? CAT_PARAMS + category : POSTS_PARAMS);
   const [
     categoriesSingletonContent,
     categoryCollectionContent,
@@ -65,6 +68,7 @@ export async function load({ params }) {
   };
 
   return {
+    category,
     categoriesSingletonContent,
     categoryCollectionContent,
     categoryContent,

diff --git a/front/src/routes/posts/category/[category]/+page.svelte b/front/src/routes/posts/category/[category]/+page.svelte
@@ -6,12 +6,14 @@
   import TransitionElasticFly from '@components/TransitionElasticFly.svelte';
   import Link from '@components/content/renderers/Link.svelte';
   import Flourish from '@layout/Flourish.svelte';
+  import Tag from '@components/icons/Tag.svelte';
   import SvelteMarkdown from 'svelte-markdown';
   import PageNav from '../../../../lib/components/PageNav.svelte';
 
   export let data;
   const route = $page.route.id;
   $: ({
+    category,
     categoriesSingletonContent: { headline },
     categoryCollectionContent: categories,
     categoryContent: { name },
@@ -50,7 +52,7 @@
       >
         {#if posts && posts.length}
           <ul>
-            {#each posts as { attributes: { title, publishedAt, slug, summary, position, hero: { data: { attributes: { formats: { thumbnail } } } } } }, i}
+            {#each posts as { attributes: { title, publishedAt, slug, summary, categories, position, hero: { data: { attributes: { formats: { thumbnail } } } } } }, i}
               {@const date = new Date(publishedAt).toDateString()}
               <li class="post-item">
                 <a href="/post/{slug}">
@@ -64,6 +66,15 @@
                       `background-position: ${position};`}"
                   />
                 </a>
+                <ul class="category-tags">
+                  {#each categories.data as { attributes: { name, slug } }}
+                    <li class="category-tag" class:active={category === slug}>
+                      <a href="/posts/category/{slug}">
+                        <Tag />{name}
+                      </a>
+                    </li>
+                  {/each}
+                </ul>
                 {#if summary && summary.length}
                   <div class="post-item-summary">
                     <SvelteMarkdown
@@ -82,7 +93,7 @@
     </div>
 
     <aside class="aside">
-      <PageNav {categories} {pathname} {setActiveLink} />
+      <PageNav {categories} {pathname} {setActiveLink} {category} />
     </aside>
   </section>
 </PageTransition>