Merge pull request #290 from jermspeaks/bug/mobile-layout-curation

Updated curation for mobile layout of curation
jermspeaks · Jan 25, 2024 · 81ed5f9 · 81ed5f9
2 parents f654286 + ef03dfb
commit 81ed5f9
Show file tree

Hide file tree

Showing 17 changed files with 92 additions and 20 deletions.
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -121,7 +121,6 @@ const today = new Date();
         <HeaderLink href="/blog">Writing</HeaderLink>
         <HeaderLink href="/project">Projects</HeaderLink>
         <HeaderLink href="/curation">Curation</HeaderLink>
-        <HeaderLink href="/log">Logs</HeaderLink>
         <HeaderLink href="/about">About</HeaderLink>
       </ul>
     </div>

diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -12,12 +12,9 @@ import HeaderLink from "./HeaderLink.astro";
   </h2>
   <nav class="hidden md:flex md:gap-3 md:items-center md:mb-8 dark:text-white">
     <AlgoliaSearch />
-    <!-- <HeaderLink href="/">Home</HeaderLink> -->
     <HeaderLink href="/blog">Writing</HeaderLink>
     <HeaderLink href="/project">Projects</HeaderLink>
-    <!-- <HeaderLink href="/library">Library</HeaderLink> -->
     <HeaderLink href="/curation">Curation</HeaderLink>
-    <HeaderLink href="/log">Logs</HeaderLink>
     <HeaderLink href="/about">About</HeaderLink>
   </nav>
   <div class="md:hidden">
@@ -56,12 +53,11 @@ import HeaderLink from "./HeaderLink.astro";
         >
       </button>
       <nav
-        class="flex flex-col gap-8 items-center w-full mt-8 text-2xl dark:bg-slate-800 dark:text-white"
+        class="flex flex-col gap-8 items-center w-full mt-8 text-2xl dark:bg-slate-900 dark:text-white"
       >
         <HeaderLink href="/blog">Writing</HeaderLink>
         <HeaderLink href="/project">Projects</HeaderLink>
-        <HeaderLink href="/library">Library</HeaderLink>
-        <HeaderLink href="/log">Logs</HeaderLink>
+        <HeaderLink href="/curation">Curation</HeaderLink>
         <HeaderLink href="/about">About</HeaderLink>
       </nav>
     </div>

diff --git a/src/content/blog/2024-01-21-year-of-intention-33.md b/src/content/blog/2024-01-21-year-of-intention-33.md
@@ -45,7 +45,7 @@ While the family emergencies occupied my mind for a good portion of the year, ma
 - We checked out our first antiquarian fair
 - I got to catch up with old friends who I haven't talked to in years
 - We checked out the Dandelion Chocolate Factory tour
-- We got to go to 2 musicals and an opera (see more in my [logs](/log/2023))
+- We got to go to 2 musicals and an opera (see more in my [logs](/curation/log/2023))
 - We locked in our wedding venue
 - I attended [Nervous System Mastery (NSM)](https://nsmastery.com/) (highly recommend)
 - I got to visit my in-laws twice this year in Florida

diff --git a/src/content/curation/log.md b/src/content/curation/log.md
@@ -0,0 +1,10 @@
+---
+title: "Logs"
+link: "/curation/log"
+heroImage:
+  "https://images.unsplash.com/photo-1623265300797-4a3541e29a60?q=80&w=2370&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+heroImageAlt: "Written list on a legal pad, photographed by Torbjørn Helgesen"
+tags: ["log", "lists"]
+---
+
+A curated journey through my Media Log – a meticulous record of everything I watch, play, read, and attend. Each entry captures a moment in time, creating a rich tapestry of experiences.
diff --git a/src/content/log/2010-2015.md b/src/content/log/2010-2015.md
@@ -2,7 +2,7 @@
 title: "2010 - 2015"
 date: 2016-01-01
 pubDate: "2016-01-01"
-permalink: /log/:year.html
+permalink: /curation/log/:year.html
 draft: false
 description: ""
 heroImage: ""

diff --git a/src/content/log/2016.md b/src/content/log/2016.md
@@ -2,7 +2,7 @@
 title: "2016"
 date: 2017-01-01
 pubDate: "2017-01-01"
-permalink: /log/:year.html
+permalink: /curation/log/:year.html
 draft: false
 description: ""
 heroImage: ""

diff --git a/src/content/log/2017.md b/src/content/log/2017.md
@@ -2,7 +2,7 @@
 title: "2017"
 date: 2018-01-01
 pubDate: "2018-01-01"
-permalink: /log/:year.html
+permalink: /curation/log/:year.html
 draft: false
 description: ""
 heroImage: ""

diff --git a/src/content/log/2018.md b/src/content/log/2018.md
@@ -2,7 +2,7 @@
 title: "2018"
 date: 2019-01-01
 pubDate: "2019-01-01"
-permalink: /log/:year.html
+permalink: /curation/log/:year.html
 draft: false
 description: ""
 heroImage: ""

diff --git a/src/content/log/2019.md b/src/content/log/2019.md
@@ -2,7 +2,7 @@
 title: "2019"
 date: 2020-01-01
 pubDate: "2020-01-01"
-permalink: /log/:year.html
+permalink: /curation/log/:year.html
 draft: false
 description: ""
 heroImage: ""

diff --git a/src/content/log/2020.md b/src/content/log/2020.md
@@ -2,7 +2,7 @@
 title: "2020"
 date: 2021-01-01
 pubDate: "2021-01-01"
-permalink: /log/:year.html
+permalink: /curation/log/:year.html
 draft: false
 description: ""
 heroImage: ""

diff --git a/src/content/log/2021.md b/src/content/log/2021.md
@@ -2,7 +2,7 @@
 title: "2021"
 date: 2022-01-01
 pubDate: "2022-01-01"
-permalink: /log/:year.html
+permalink: /curation/log/:year.html
 draft: false
 description: ""
 heroImage: ""

diff --git a/src/content/log/2022.md b/src/content/log/2022.md
@@ -2,7 +2,7 @@
 title: "2022"
 date: 2023-01-01
 pubDate: "2023-01-01"
-permalink: /log/:year.html
+permalink: /curation/log/:year.html
 draft: false
 description: ""
 heroImage: ""

diff --git a/src/content/log/2023.md b/src/content/log/2023.md
@@ -2,7 +2,7 @@
 title: "2023"
 date: 2023-12-31
 pubDate: "2023-12-31"
-permalink: /log/:year.html
+permalink: /curation/log/:year.html
 draft: false
 description: "All media consumed in 2023"
 heroImage: ""

diff --git a/src/content/log/2024.md b/src/content/log/2024.md
@@ -2,7 +2,7 @@
 title: "2024"
 date: 2024-01-09
 pubDate: "2024-01-09"
-permalink: /log/:year.html
+permalink: /curation/log/:year.html
 draft: false
 description: "All media consumed in 2024"
 heroImage: ""

diff --git a/src/pages/curation/index.astro b/src/pages/curation/index.astro
@@ -70,7 +70,7 @@ const curations = (await getCollection("curation")).sort((a, b) =>
     <ul class="grid grid-cols-1 lg:grid-cols-2 gap-4 list-none p-0">
       {
         combination.map((item) => (
-          <li class="flex flex-shrink-0 flex-grow-0 flex-row flex-[100%] md:flex-[48%] rounded-sm box-border dark:text-white">
+          <li class="flex flex-shrink-0 flex-grow-0 flex-row flex-wrap flex-[100%] md:flex-[48%] mb-6 md:mb-0 rounded-sm box-border dark:text-white">
             <a
               class="flex-shrink-0 flex-grow-0 flex-[200px] visited:text-[#f25042]"
               href={`/curation/${item.data.type}/${item.slug}`}
@@ -81,7 +81,7 @@ const curations = (await getCollection("curation")).sort((a, b) =>
                 alt={item.data.heroImageAlt}
               />
             </a>
-            <div class="py-0 px-4 mt-0">
+            <div class="md:py-0 md:px-4 mt-2 md:mt-0">
               <div class="font-bold mb-2">
                 <a
                   class="hover:text-purple-500 visited:text-[#f25042]"

diff --git a/src/pages/curation/log/[...slug].astro b/src/pages/curation/log/[...slug].astro
@@ -0,0 +1,21 @@
+---
+import { CollectionEntry, getCollection } from 'astro:content';
+import LogPost from '../../../layouts/LogPost.astro';
+
+export async function getStaticPaths() {
+	const posts = await getCollection('log');
+	return posts.map((post) => ({
+		params: { slug: post.slug },
+		props: post,
+	}));
+}
+type Props = CollectionEntry<'log'>;
+
+const post = Astro.props;
+const { Content } = await post.render();
+---
+
+<LogPost {...post.data}>
+	<h1>{post.data.title}</h1>
+	<Content />
+</LogPost>
diff --git a/src/pages/curation/log/index.astro b/src/pages/curation/log/index.astro
@@ -0,0 +1,46 @@
+---
+import { getCollection } from "astro:content";
+import { SITE_TITLE, SITE_DESCRIPTION } from "../../../consts";
+import BaseBody from "../../../components/BaseBody.astro";
+import BaseHead from "../../../components/BaseHead.astro";
+import Footer from "../../../components/Footer.astro";
+import Header from "../../../components/Header.astro";
+import ProseArticle from "../../../components/ProseArticle.astro";
+import TitleHeading from "../../../components/TitleHeading.astro";
+
+const logs = (await getCollection("log")).sort(
+  (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
+);
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
+  </head>
+  <BaseBody>
+    <Header />
+    <main class="max-w-[65ch] mx-auto">
+      <TitleHeading>Logs by Year</TitleHeading>
+      <ProseArticle>
+        <p>
+          These are logs of consumed media from the past few years. (Updates in
+          Progress).
+        </p>
+        <p>I've been logging media consumption since 2010.</p>
+        <ul>
+          {
+            logs.map((log) => (
+              <li>
+                <a href={`/curation/log/${log.slug}/`} title={log.data.title}>
+                  {log.data.title}
+                </a>
+              </li>
+            ))
+          }
+        </ul>
+      </ProseArticle>
+    </main>
+    <Footer />
+  </BaseBody>
+</html>