/note->/notes

sehyunchung · Dec 18, 2023 · b1f6694 · b1f6694
1 parent d89f315
commit b1f6694
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 35 deletions.
diff --git a/fresh.gen.ts b/fresh.gen.ts
@@ -8,9 +8,9 @@ import * as $_layout from "./routes/_layout.tsx";
 import * as $_middleware from "./routes/_middleware.ts";
 import * as $api_joke from "./routes/api/joke.ts";
 import * as $index from "./routes/index.tsx";
-import * as $note_slug_ from "./routes/note/[slug].tsx";
-import * as $note_layout from "./routes/note/_layout.tsx";
-import * as $note_index from "./routes/note/index.tsx";
+import * as $notes_slug_ from "./routes/notes/[slug].tsx";
+import * as $notes_layout from "./routes/notes/_layout.tsx";
+import * as $notes_index from "./routes/notes/index.tsx";
 import * as $Counter from "./islands/Counter.tsx";
 import { type Manifest } from "$fresh/server.ts";
 
@@ -22,9 +22,9 @@ const manifest = {
     "./routes/_middleware.ts": $_middleware,
     "./routes/api/joke.ts": $api_joke,
     "./routes/index.tsx": $index,
-    "./routes/note/[slug].tsx": $note_slug_,
-    "./routes/note/_layout.tsx": $note_layout,
-    "./routes/note/index.tsx": $note_index,
+    "./routes/notes/[slug].tsx": $notes_slug_,
+    "./routes/notes/_layout.tsx": $notes_layout,
+    "./routes/notes/index.tsx": $notes_index,
   },
   islands: {
     "./islands/Counter.tsx": $Counter,

diff --git a/routes/index.tsx b/routes/index.tsx
@@ -2,10 +2,8 @@ import { useSignal } from "@preact/signals";
 import Counter from "../islands/Counter.tsx";
 
 export default function Home() {
-  const count = useSignal(3);
   return (
-    <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
-      <Counter count={count} />
+    <div>
     </div>
   );
 }
diff --git a/routes/note/[slug].tsx → routes/notes/[slug].tsx b/routes/note/[slug].tsx → routes/notes/[slug].tsx
@@ -5,6 +5,7 @@ import { extract } from "https://deno.land/[email protected]/encoding/front_matter.ts"
 import { join } from "$std/path/mod.ts";
 
 import { Handlers, PageProps } from "$fresh/server.ts";
+import he120 from "https://esm.sh/[email protected]";
 
 export interface Note {
   title: string;
@@ -55,17 +56,14 @@ export const handler: Handlers<Note> = {
 
 export default function PostPage(props: PageProps<Note>) {
   const post = props.data;
+  const __html = render(post.content);
   return (
     <>
-      <Head>
-        <style dangerouslySetInnerHTML={{ __html: CSS }} />
-      </Head>
-      <div>
-        <h1>{post.title}</h1>
-        <div
-          dangerouslySetInnerHTML={{ __html: render(post.content) }}
-        />
-      </div>
+      <h1 className="font-bold">{post.title}</h1>
+      <div
+        class="gfm"
+        dangerouslySetInnerHTML={{ __html }}
+      />
     </>
   );
 }
diff --git a/routes/note/_layout.tsx → routes/notes/_layout.tsx b/routes/note/_layout.tsx → routes/notes/_layout.tsx
@@ -7,7 +7,14 @@ export default function NoteRouteLayout({ Component }: PageProps) {
       <Head>
         <title>Notes</title>
       </Head>
-      <Component />
+      <section>
+        <a class="no-underline" href="/notes">
+          <h1 class="font-bold">
+            Notes
+          </h1>
+        </a>
+        <Component />
+      </section>
     </>
   );
 }
diff --git a/routes/note/index.tsx → routes/notes/index.tsx b/routes/note/index.tsx → routes/notes/index.tsx
@@ -1,4 +1,4 @@
-import { CSS, render } from "https://deno.land/x/[email protected]/mod.ts";
+import { render } from "https://deno.land/x/[email protected]/mod.ts";
 import { Handlers, PageProps } from "$fresh/server.ts";
 import { getAllNote, Note } from "./[slug].tsx";
 
@@ -9,35 +9,35 @@ export const handler: Handlers<Note[]> = {
   },
 };
 
-function PostCard(props: { post: Note }) {
+function NoteCard(props: { post: Note }) {
   const { post } = props;
   return (
-    <div>
-      <a className="no-underline" href={`/note/${post.slug}`}>
-        <h3>
+    <>
+      <a class="no-underline" href={`/notes/${post.slug}`}>
+        <h1 class="font-bold">
           {post.title}
-        </h3>
+        </h1>
         <time>
-          {new Date(post.createdAt).toLocaleDateString("en-us", {
+          {new Date(post.createdAt).toLocaleDateString("ko-kr", {
             year: "numeric",
             month: "long",
             day: "numeric",
           })}
         </time>
-        <div dangerouslySetInnerHTML={{ __html: render(post.content) }} />
+        <div
+          class="gfm"
+          dangerouslySetInnerHTML={{ __html: render(post.content) }}
+        />
       </a>
-    </div>
+    </>
   );
 }
 
 export default function BlogIndexPage(props: PageProps<Note[]>) {
   const posts = props.data;
   return (
-    <main>
-      <h1>Notes</h1>
-      <div className="break-words border-b border-b-gray-200 pb-6">
-        {posts.map((post) => <PostCard post={post} />)}
-      </div>
-    </main>
+    <section class="break-words border-b border-b-gray-200 pb-6">
+      {posts.map((post) => <NoteCard post={post} />)}
+    </section>
   );
 }
diff --git a/static/styles.css b/static/styles.css
@@ -1,3 +1,17 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+.gfm {
+   h1, h2, h3, h4 {
+      font-weight: bold;
+      position: relative;
+      .anchor {
+         display: none;
+         svg {
+            position: absolute;
+            transform: translate(calc(-100% - 6px), 50%);
+         }
+      }
+   }
+}