Performance improvements

pages/posts/first-post/content.md

@@ -32,4 +32,4 @@ print("Hello World from Kotlin :D")
 
 <br/>
 
-![Catto](/pages/posts/first-post/catto.webp "Catto")
+<img class="animated-gif" src="/pages/posts/first-post/giphy.gif"></img>

src/commonMain/kotlin/app/model/MdFileMetadata.kt → src/commonMain/kotlin/app/model/MdMetadata.kt

@@ -7,7 +7,7 @@ import kotlinx.datetime.todayIn
 import kotlinx.serialization.Serializable
 
 @Serializable
-data class MdFileMetadata(
+data class MdMetadata(
     val id: String = "ID",
     val title: String = "TITLE_MISSING",
     val date: LocalDate = Clock.System.todayIn(TimeZone.UTC),

src/jsMain/kotlin/app/NavBar.kt

@@ -17,7 +17,7 @@ val NavBar = FC {
                 asNavItem()
                 NavLink {
                     withClasses("nav-link")
-                    to = "/about"
+                    to = "/"
                     +"About"
                 }
             }

src/jsMain/kotlin/app/Router.kt

@@ -19,22 +19,22 @@ val Router = createBrowserRouter(
                     index = true,
                     Component = About,
                 ),
+                RouteObject(
+                    path = "*",
+                    Component = About,
+                ),
                 RouteObject(
                     path = "posts",
-                    children = state.posts.map { entry ->
-                        RouteObject(
-                            path = entry.mdFileMetadata.id,
-                            element = InnerHtml.create {
-                                data = entry
-                            },
-                        )
-                    }.toTypedArray() + RouteObject(index = true, Component = Posts)
+                    Component = Posts,
                 ),
+            ) + state.posts.map { entry ->
                 RouteObject(
-                    path = "*",
-                    Component = About,
+                    path = "posts/" + entry.id,
+                    element = InnerHtml.create {
+                        data = entry
+                    },
                 )
-            )
+            }.toTypedArray()
         )
     )
 )

src/jsMain/kotlin/app/pages/InnerHtml.kt

@@ -1,19 +1,30 @@
 package app.pages
 
-import app.model.HtmlData
+import app.model.MdMetadata
+import js.import.importAsync
 import js.objects.jso
 import react.FC
 import react.Props
 import react.dom.html.ReactHTML.div
+import react.useEffect
+import react.useState
 
 external interface InnerHtmlProps : Props {
-    var data: HtmlData
+    var data: MdMetadata
 }
 
 val InnerHtml = FC<InnerHtmlProps> { props ->
+    var content: String? by useState()
+
+    useEffect {
+        importAsync<dynamic>(props.data.path + "?raw")
+            .then { content = it.default.unsafeCast<String>() }
+            .await()
+    }
+
     div {
         dangerouslySetInnerHTML = jso {
-            __html = props.data.content
+            __html = content.orEmpty()
         }
     }
 }

src/jsMain/kotlin/app/pages/Posts.kt

@@ -8,24 +8,22 @@ import app.utils.withClasses
 import kotlinx.datetime.LocalDate
 import kotlinx.datetime.format
 import react.FC
-import react.dom.aria.AriaRole
-import react.dom.html.ReactHTML.a
 import react.dom.html.ReactHTML.div
+import react.router.dom.Link
 
 val Posts = FC {
-    state.posts.sortedByDescending { it.mdFileMetadata.date }.forEach { entry ->
+    state.posts.sortedByDescending { it.date }.forEach { entry ->
         div {
             asRow()
             div {
                 asCol()
-                +entry.mdFileMetadata.date.format(LocalDate.Formats.ISO)
+                +entry.date.format(LocalDate.Formats.ISO)
             }
-            a {
+            Link {
                 asCol()
-                withClasses("btn btn-outline-light btn-lg px-4")
-                href = "/posts/" + entry.mdFileMetadata.id
-                role = AriaRole.button
-                +entry.mdFileMetadata.title
+                withClasses("btn btn-outline-light btn-lg")
+                to = "/posts/" + entry.id
+                +entry.title
             }
         }
     }

src/jsMain/kotlin/app/state/State.kt

@@ -1,40 +1,31 @@
 package app.state
 
-import app.model.HtmlData
-import app.model.MdFileMetadata
+import app.model.MdMetadata
 import js.import.importAsync
 import js.promise.toResult
 import kotlinx.serialization.ExperimentalSerializationApi
 import kotlinx.serialization.json.Json
 import kotlinx.serialization.json.decodeFromDynamic
 
-data class State(val metadata: MutableList<HtmlData>) {
-    fun filterByPath(path: String): List<HtmlData> {
-        return metadata.filter { it.mdFileMetadata.path.startsWith(path) }
+data class State(val metadata: MutableList<MdMetadata>) {
+    fun filterByPath(path: String): List<MdMetadata> {
+        return metadata.filter { it.path.startsWith(path) }
     }
 }
 
 val state = State(mutableListOf())
 
-val State.about: HtmlData
+val State.about: MdMetadata
     get() {
         return filterByPath("./pages/about/").first()
     }
 
-val State.posts: List<HtmlData>
+val State.posts: List<MdMetadata>
     get() = filterByPath("./pages/posts/")
 
 
 @OptIn(ExperimentalSerializationApi::class)
 suspend fun initState() = importAsync<dynamic>("./pages/markdown-metadata.yaml")
-    .then { Json.decodeFromDynamic<List<MdFileMetadata>>(it.default) }
+    .then { Json.decodeFromDynamic<List<MdMetadata>>(it.default) }
     .toResult()
-    .map { metadataList ->
-        metadataList.map { metadata ->
-            importAsync<dynamic>(metadata.path + "?raw")
-                .then { it.default }
-                .then { HtmlData(metadata, it) }
-                .then { state.metadata.add(it) }
-                .await()
-        }
-    }
+    .onSuccess { state.metadata.addAll(it) }

src/jsMain/resources/404.html

@@ -22,7 +22,7 @@
         // https://username.github.io/repo-name/one/two?a=b&c=d#qwe becomes
         // https://username.github.io/repo-name/?/one/two&a=b~and~c=d#qwe
         // Otherwise, leave pathSegmentsToKeep as 0.
-        var pathSegmentsToKeep = 0;
+        var pathSegmentsToKeep = 1;
 
         var l = window.location;
         l.replace(

src/jsMain/resources/index.html

@@ -1,62 +1,26 @@
 <!doctype html>
 <html lang="en" data-bs-theme="dark">
+
 <head>
     <base href="/"/>
     <link rel="icon" type="image/x-icon" href="/img/favicon.ico">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <!-- Start Single Page Apps for GitHub Pages -->
-    <script type="text/javascript">
-        // Single Page Apps for GitHub Pages
-        // MIT License
-        // https://github.com/rafgraph/spa-github-pages
-        // This script checks to see if a redirect is present in the query string,
-        // converts it back into the correct url and adds it to the
-        // browser's history using window.history.replaceState(...),
-        // which won't cause the browser to attempt to load the new url.
-        // When the single page app is loaded further down in this file,
-        // the correct url will be waiting in the browser's history for
-        // the single page app to route accordingly.
-        (function(l) {
-          if (l.search[1] === '/' ) {
-            var decoded = l.search.slice(1).split('&').map(function(s) {
-              return s.replace(/~and~/g, '&')
-            }).join('?');
-            window.history.replaceState(null, null,
-                l.pathname.slice(0, -1) + decoded + l.hash
-            );
-          }
-        }(window.location))
-    </script>
-    <!-- End Single Page Apps for GitHub Pages -->
-    <style>
-        .loader {
-  border: 16px solid #f3f3f3; /* Light grey */
-  border-top: 16px solid #3498db; /* Blue */
-  border-radius: 50%;
-  width: 120px;
-  height: 120px;
-  animation: spin 2s linear infinite;
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-    </style>
+    <script type="text/javascript" src="spa_script.js"></script>
 </head>
+
 <body id="target">
 <div id="root">
-    <div class="loader"></div>
+    Loading...
 </div>
 <script src="pswidersk-page.js"></script>
 <script>
-    (async function() {
-        if (CSS['paintWorklet'] === undefined) {
-            await import('https://unpkg.com/css-paint-polyfill');
-        }
+    (async function () {
+      if (CSS['paintWorklet'] === undefined) {
+        await import('https://unpkg.com/css-paint-polyfill');
+      }
 
-        CSS.paintWorklet.addModule('https://unpkg.com/css-houdini-voronoi/dist/worklet.js');
+      CSS.paintWorklet.addModule('https://unpkg.com/css-houdini-voronoi/dist/worklet.js');
     })()
 </script>
 </body>

src/jsMain/resources/scss/custom_styles.scss

@@ -1,15 +1,5 @@
 #root {
     @include font-size(1.7rem);
-    --voronoi-number-of-cells: 50;
-    --voronoi-margin: 1%;
-    --voronoi-line-color: #{$secondary};
-    --voronoi-line-width: 1;
-    --voronoi-dot-size: 0;
-    --voronoi-cell-colors: #{$primary};
-    --voronoi-seed: 643421;
-    min-height: 100vh;
-    background-image: paint(voronoi);
-    background-size: cover;
 }
 
 .blurred-bg {
@@ -35,3 +25,9 @@ blockquote {
     @extend .blockquote;
     text-align: center;
 }
+
+.animated-gif{
+    max-width: 100%;
+    height: auto;
+    display: block;
+}

src/jsMain/resources/scss/styles.scss

@@ -1,21 +1,15 @@
-//
-// Bring in Bootstrap
-//
-
-// Option 1
-//
-// Import all of Bootstrap's CSS
-
-// @import "bootstrap/scss/bootstrap";
-
-// Option 2
-//
 // Place variable overrides first, then import just the styles you need. Note that some stylesheets are required no matter what.
 
 $enable-dark-mode: true;
 $primary: #051b11;
 $secondary: #0f5132;
 
+@import "./voronoi.scss";
+
+//
+// Bring in Bootstrap
+//
+
 // Include functions first
 @import "bootstrap/scss/functions";
 

src/jsMain/resources/scss/voronoi.scss

@@ -0,0 +1,12 @@
+#root {
+    --voronoi-number-of-cells: 50;
+    --voronoi-margin: 1%;
+    --voronoi-line-color: #{$secondary};
+    --voronoi-line-width: 1;
+    --voronoi-dot-size: 0;
+    --voronoi-cell-colors: #{$primary};
+    --voronoi-seed: 643421;
+    min-height: 100vh;
+    background-image: paint(voronoi);
+    background-size: cover;
+}

src/jsMain/resources/spa_script.js

@@ -0,0 +1,20 @@
+// Single Page Apps for GitHub Pages
+// MIT License
+// https://github.com/rafgraph/spa-github-pages
+// This script checks to see if a redirect is present in the query string,
+// converts it back into the correct url and adds it to the
+// browser's history using window.history.replaceState(...),
+// which won't cause the browser to attempt to load the new url.
+// When the single page app is loaded further down in this file,
+// the correct url will be waiting in the browser's history for
+// the single page app to route accordingly.
+(function (l) {
+  if (l.search[1] === '/') {
+    var decoded = l.search.slice(1).split('&').map(function (s) {
+      return s.replace(/~and~/g, '&')
+    }).join('?');
+    window.history.replaceState(null, null,
+      l.pathname.slice(0, -1) + decoded + l.hash
+    );
+  }
+}(window.location))

src/jvmMain/kotlin/app/MdToHtmlConverter.kt

@@ -1,6 +1,6 @@
 package app
 
-import app.model.MdFileMetadata
+import app.model.MdMetadata
 import com.charleskorn.kaml.Yaml
 import kotlinx.serialization.decodeFromString
 import kotlinx.serialization.encodeToString
@@ -43,7 +43,7 @@ private fun saveHtml(file: File, outputDir: File) {
 private fun extractMetadataPart(fileTxt: String) =
     fileTxt.substringAfter(METADATA_SEPARATOR).substringBefore(METADATA_SEPARATOR, "")
 
-private fun addMetadata(file: File, metadataList: MutableList<MdFileMetadata>) {
+private fun addMetadata(file: File, metadataList: MutableList<MdMetadata>) {
     val parent = file.parentFile
     val fileTxt = file.readText()
     val yamlString = extractMetadataPart(fileTxt)
@@ -57,16 +57,16 @@ private fun addMetadata(file: File, metadataList: MutableList<MdFileMetadata>) {
     )
 }
 
-private fun tryToParse(yamlString: String): MdFileMetadata {
+private fun tryToParse(yamlString: String): MdMetadata {
     try {
-        return Yaml.default.decodeFromString<MdFileMetadata>(yamlString)
+        return Yaml.default.decodeFromString<MdMetadata>(yamlString)
     } catch (ex: Exception) {
         println("Exception during YAML parsing: ${ex.message}")
-        return MdFileMetadata()
+        return MdMetadata()
     }
 }
 
-private fun saveMetadata(metadataList: MutableList<MdFileMetadata>, outputDir: File) {
+private fun saveMetadata(metadataList: MutableList<MdMetadata>, outputDir: File) {
     println("Metadata: $metadataList")
     val ymlTxt = Yaml.default.encodeToString(metadataList)
     outputDir.resolve(INPUT_DIR).resolve("markdown-metadata.yaml").writeText(ymlTxt)
@@ -75,7 +75,7 @@ private fun saveMetadata(metadataList: MutableList<MdFileMetadata>, outputDir: F
 fun main() {
     val inputDir = File(INPUT_DIR)
     val outputDir = File(OUTPUT_DIR)
-    val metadataList = mutableListOf<MdFileMetadata>()
+    val metadataList = mutableListOf<MdMetadata>()
 
     inputDir.walk().forEach { file ->
         println("current file: $file")