Working on responsive layout

Author: shawn-mcgee

idea/also_test.md

@@ -1,4 +1,7 @@
 ---
 title: "This is a Markdown Document"
 pubDate: 2025-03-19
----
+---
+
+# Hello World
+I am a markdown document

idea/test.mdx

@@ -12,7 +12,7 @@ tags: [
 
 import HelloWorld from "@fun/HelloWorld";
 
-I am MDX
+abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
 
 
 

src/components/Tag.astro

@@ -5,8 +5,6 @@ export type Props = {
 
 const { tag } = Astro.props
 ---
-<a href={`/idea/tag/#${tag}/`} class="">
-  <span class="btn btn-ghost rounded-full text-lg text-primary">
-    #{tag}
-  </span>
+<a href={`/idea/tag/#${tag}/`} class="px-2 rounded-full border-1 border-primary text-primary hover:bg-primary hover:bg-text-primary-content">
+  # {tag}
 </a>

src/components/Tags.astro

@@ -3,11 +3,12 @@ import Tag from "@components/Tag.astro"
 
 export type Props = {
   tags: Array<string> | undefined
+  class: string
 }
 
-const { tags } = Astro.props
+const { tags, class: className } = Astro.props
 ---
 
-<div class="flex flex-row justify-center">
+<div class:list={[className, "flex flex-row w-full justify-center gap-1"]}>
   {tags?.map(tag => <Tag {tag}/>)}
 </div>

src/layouts/Drawer.astro

@@ -10,8 +10,8 @@ import { BookMarked, CircleHelp, House, LibraryBig, Moon, Sun } from 'lucide-ast
     <!-- Page content here -->
     <slot />
 
-    <label for="my-drawer" class="btn btn-xl btn-ghost btn-circle absolute top-4 left-4">
-      <BookMarked class="w-10 h-10"/>
+    <label for="my-drawer" class="btn btn-xl btn-ghost btn-circle absolute top-4 left-4 sm:btn-xl">
+      <BookMarked class="w-10 h-10" />
     </label>
 
     <button class="btn btn-xl btn-ghost btn-circle absolute top-4 right-4" data-toggle-theme="valentine,dracula" data-act-class="ACTIVECLASS">
@@ -27,7 +27,7 @@ import { BookMarked, CircleHelp, House, LibraryBig, Moon, Sun } from 'lucide-ast
     <ul class="menu bg-base-200 text-base-content min-h-full w-80 p-4">
       <!-- Sidebar content here -->
 
-      <span class="p-1 text-3xl font-bold font-[Fragment_Mono] dark:text-primary">
+      <span class="p-1 text-2xl font-bold font-[Fragment_Mono] dark:text-primary">
         /goto
       </span>
 
@@ -38,7 +38,7 @@ import { BookMarked, CircleHelp, House, LibraryBig, Moon, Sun } from 'lucide-ast
       </a></li>
 
       <!-- Blog -->
-      <li><a class="flex flex-row gap-1 text-2xl" href="/blog">
+      <li><a class="flex flex-row gap-1 text-2xl" href="/idea">
         <span class="flex-1">Blog</span>
         <LibraryBig/>
       </a></li>

src/pages/404.astro

@@ -16,4 +16,4 @@ import { House } from "lucide-astro";
       </span>
     </div>
   </Drawer>
-</Layout>
+</Layout>

src/pages/500.astro

@@ -0,0 +1,19 @@
+---
+import Layout from "@layouts/Layout.astro";
+import Drawer from "@layouts/Drawer.astro";
+import { House } from "lucide-astro";
+---
+
+<Layout>
+  <Drawer>
+    <div class="flex flex-col w-full h-full justify-center items-center">
+      <span class="text-6xl font-bold text-center sm:text-8xl dark:text-primary">500</span>
+      <span class="text-xl text-center">Internal Server Error</span>
+      <span class="tooltip tooltip-bottom" data-tip="Home">
+        <a class="btn btn-xl btn-ghost btn-circle" href="/">
+          <House class="w-10 h-10"/>
+        </a>
+      </span>
+    </div>
+  </Drawer>
+</Layout>

src/pages/idea/[...slug].astro

@@ -7,6 +7,7 @@ import Tags from "@components/Tags.astro";
 
 export async function getStaticPaths() {
   const ideas = await getCollection("ideas");
+  
   return ideas.map(idea => {
     let slug = idea.filePath
     slug = slug?.replace(/^idea\//, "");
@@ -24,20 +25,32 @@ const { Content } = await render(idea);
 
 <Layout>
   <Drawer>
-    <div class="flex flex-col w-full items-center">
-      <div class="flex flex-col w-[960px] min-h-dvh items-center">
-        <div class="flex flex-col w-full items-center p-4">
-          <span class="text-4xl font-bold text-center">{idea.data.title}</span>
-          <div class="flex flex-row w-full justify-center gap-2 text-xl">
-            <span>{idea.data.author                 }</span>
-            { (idea.data.author && idea.data.pubDate) ? "|" : "" }
-            <span>{idea.data.pubDate?.toDateString()}</span>
-          </div>
-          <Tags tags={idea.data.tags}/>
-        </div>
-        <div class="flex flex-col w-full p-8 prose shadow-lg flex-1">
-          <Content/>
+    <!-- Container -->
+    <div class="flex flex-col w-full min-h-dvh items-center">
+      <!-- Spacing -->
+      <div class="h-4"></div>
+
+      <!-- Header -->
+      <div class="flex flex-col w-3xs items-center sm:w-lg">
+        <!-- Author | Date -->
+        <div class="hidden sm:flex flex-row w-full justify-center gap-2 text-lg">
+          <span>{idea.data.author                 }</span>
+          { (idea.data.author && idea.data.pubDate) ? "|" : "" }
+          <span>{idea.data.pubDate?.toDateString()}</span>
         </div>
+
+        <!-- Title -->
+        <span class="text-2xl text-center font-bold sm:text-4xl">
+          {idea.data.title}
+        </span>
+
+        <!-- Tags -->
+        <Tags tags={idea.data.tags} class="text-sm sm:text-lg"/>
+      </div>
+
+      <!-- Article -->
+      <div class="flex flex-col w-full flex-1 sm:max-w-2xl sm:shadow-lg prose prose-sm sm:prose-lg break-words sm:break-normal p-8">
+        <Content/>
       </div>
     </div>
   </Drawer>

src/pages/idea/index.astro

@@ -0,0 +1,10 @@
+---
+import Layout from "@layouts/Layout.astro";
+import Drawer from "@layouts/Drawer.astro";
+---
+
+<Layout>
+  <Drawer>
+    This is the idea page
+  </Drawer>
+</Layout>