resolved flicker issue on markdown pages

Author: benev0

content/blogs/blog1.md

@@ -3,12 +3,6 @@ title = "The First blog"
 url = "blog_1"
 ---
 
-``` =html
-<link href="https://cdn.jsdelivr.net/npm/@catppuccin/palette/css/catppuccin.css" rel="stylesheet">
-<link href="../assets/styles.css" rel="stylesheet">
-<script src="../assets/startup.js"></script>
-```
-
 # Hello There
 
 this is a test edit

content/blogs/blog2.md

@@ -3,10 +3,4 @@ title = "The Second blog"
 url = "blog_2"
 ---
 
-``` =html
-<link href="https://cdn.jsdelivr.net/npm/@catppuccin/palette/css/catppuccin.css" rel="stylesheet">
-<link href="../assets/styles.css" rel="stylesheet">
-<script src="../assets/startup.js"></script>
-```
-
 # General Kenobi

content/index.md

@@ -4,12 +4,6 @@ url = "test_url"
 ---
 # Hello
 
-``` =html
-<link href="https://cdn.jsdelivr.net/npm/@catppuccin/palette/css/catppuccin.css" rel="stylesheet">
-<link href="assets/styles.css" rel="stylesheet">
-<script src="assets/startup.js"></script>
-```
-
 This is static content generated by lustre_ssg.
 
 To build use `gleam run -m build`.

src/blog/render.gleam

@@ -5,21 +5,45 @@ import gleam/result
 import lustre/attribute.{attribute}
 import lustre/element/html.{a, body, div, head, html, link, p, script, text}
 import lustre/ssg/djot
+import lustre/vdom/vnode
 import tom
 
-pub fn render_md_path(path: String) {
+fn include_styles_and_scripts(page: List(vnode.Element(a))) -> vnode.Element(_) {
+  html([], [
+    head([], [
+      link([
+        attribute("rel", "stylesheet"),
+        attribute(
+          "href",
+          "https://cdn.jsdelivr.net/npm/@catppuccin/palette/css/catppuccin.css",
+        ),
+      ]),
+      link([
+        attribute("rel", "stylesheet"),
+        attribute("href", "assets/styles.css"),
+      ]),
+      script([attribute.src("assets/startup.js")], ""),
+    ]),
+    body([], page),
+  ])
+}
+
+pub fn render_md_path(path: String) -> vnode.Element(_) {
   let assert Ok(posts.FileSource(_, md)) = posts.from_file(path)
 
   djot.render(md, djot.default_renderer())
-  |> div([], _)
+  |> include_styles_and_scripts
 }
 
-pub fn render_md(md: String) {
+pub fn render_md(md: String) -> vnode.Element(_) {
   djot.render(md, djot.default_renderer())
-  |> div([], _)
+  |> include_styles_and_scripts
 }
 
-pub fn render_matter(base: String, matter: #(String, String)) {
+pub fn render_matter(
+  base: String,
+  matter: #(String, String),
+) -> vnode.Element(_) {
   div([attribute.class("blog")], [
     p([], [text(matter.0)]),
     p([], [a([attribute.href(base <> "/" <> matter.1)], [text(matter.1)])]),
@@ -37,22 +61,7 @@ pub fn render_links(base: String, sources: List(posts.PostSource)) {
 
   let assert Ok(matters) = result.all(matters)
 
-  // <link rel="stylesheet" href="mystyle.css">
-  html([], [
-    head([], [
-      link([
-        attribute("rel", "stylesheet"),
-        attribute(
-          "href",
-          "https://cdn.jsdelivr.net/npm/@catppuccin/palette/css/catppuccin.css",
-        ),
-      ]),
-      link([
-        attribute("rel", "stylesheet"),
-        attribute("href", "assets/styles.css"),
-      ]),
-      script([attribute.src("assets/startup.js")], ""),
-    ]),
-    body([], [div([], list.map(matters, render_matter(base, _)))]),
-  ])
+  matters
+  |> list.map(render_matter(base, _))
+  |> include_styles_and_scripts
 }