feat(app): render posts (#4)

* fix(cli): livereload in watcher * fix(serve): websocket implementation * feat(post): serialize title and date * feat(app): render the toc of posts * feat(app): render posts
clearloop · Dec 31, 2023 · ab83da0 · ab83da0
1 parent 8c5fa75
commit ab83da0
Show file tree

Hide file tree

Showing 15 changed files with 366 additions and 113 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -8,7 +8,7 @@ edition = "2021"
 
 [dependencies]
 anyhow = "1.0.77"
-chrono = "0.4.31"
+chrono = { version = "0.4.31", features = [ "serde" ] }
 colored = "2.1.0"
 etc = { version = "0.1.18", features = [ "serde" ] }
 handlebars = { version = "4.5.0", features = [ "dir_source" ] }
@@ -25,6 +25,7 @@ notify = { version = "6.1.1", optional = true }
 tokio = { version = "1.35.1", features = [ "rt-multi-thread" ], optional = true }
 warp = { version = "0.3.6", optional = true }
 futures = { version = "0.3.30", optional = true }
+async-lock = "3.2.0"
 
 [features]
 default = [ "cli" ]

diff --git a/blog/posts/2023-12-29-hello-world.md b/blog/posts/2023-12-29-hello-world.md
@@ -1,6 +1,5 @@
 ---
 author: cl
-date: 2023-12-29
 description: The example post of cydonia.
 labels: [cydonia]
 title: Hello, World!

diff --git a/blog/posts/2023-12-30-file-watcher.md b/blog/posts/2023-12-30-file-watcher.md
@@ -0,0 +1,17 @@
+---
+author: cl
+description: The example post of cydonia.
+labels: [cydonia]
+title: The file watcher implementation in cydonia.
+---
+
+# hello
+
+```rust
+// function block.
+
+/// main function
+fn main() {
+  println!("hello, world");
+}
+```
diff --git a/blog/templates/index.hbs b/blog/templates/index.hbs
@@ -1,6 +1,12 @@
 {{#*inline "page"}}
-<main>
+<main class="prose p-8">
     <h1>{{ title }}</h1>
+
+    <section class="posts">
+    {{#each posts}}
+        <div><a href="{{{ link }}}">{{{ index }}} {{{ title }}}</a></div>
+    {{/each}}
+    </section>
 </main>
 {{/inline}}
 

diff --git a/blog/templates/layout.hbs b/blog/templates/layout.hbs
@@ -4,12 +4,24 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <meta name="description" content="Empowering everyone to build reliable and efficient site.">
+    <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>
     {{#if index}}
       <link rel="stylesheet" href="/index.css">
     {{/if}}
     {{#if post}}
       <link rel="stylesheet" href="/post.css">
     {{/if}}
+    {{#if livereload}}
+      <script>
+       const socket = new WebSocket(`ws://${location.host}` + "/" + "{{{ livereload }}}");
+       socket.onmessage = function (event) {
+         if (event.data === "reload") {
+           socket.close();
+           location.reload();
+         }
+       };
+      </script>
+    {{/if}}
   </head>
   <body>
      {{> page }}

diff --git a/blog/templates/post.hbs b/blog/templates/post.hbs
@@ -0,0 +1,8 @@
+{{#*inline "page"}}
+<main class="prose p-8">
+    <h1>{{ post.title }}</h1>
+    {{{ post.content }}}
+</main>
+{{/inline}}
+
+{{> layout }}
diff --git a/blog/theme.css b/blog/theme.css
@@ -1,6 +1,85 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 10% 3.9%;
+
+    --radius: 0.5rem;
+
+    --bar-height: 2rem;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
 html,
-body {
+body,
+main {
   min-height: 100%;
-  background-color: #000;
-  color: #fefefe;
+  min-width: 100%;
 }