style code blocks

doordesk/Cargo.toml

@@ -49,7 +49,7 @@ site-root = "target/site"
 site-pkg-dir = "pkg"
 
 # [Optional] The source CSS file. If it ends with .sass or .scss then it will be compiled by dart-sass into CSS. The CSS is optimized by Lightning CSS before being written to <site-root>/<site-pkg>/app.css
-# style-file = "style/main.scss"
+style-file = "style/tailwind.css"
 
 # The tailwind input file.
 #

doordesk/app/src/components/slingshot.rs

@@ -13,8 +13,9 @@ pub async fn slingshot(path: String) -> Result<Vec<ArticleData>, ServerFnError>
             if let Some(filetype) = filepath.extension() {
                 if filetype == "md" {
                     let file = std::fs::read_to_string(filepath)?;
-                    let html_from_md = femark::process_markdown_to_html(&file.to_string())
+                    let html_from_md =
-                        .expect("Problem processing markdown");
+                        femark::process_markdown_to_html_with_frontmatter(&file.to_string(), true)
+                            .expect("Problem processing markdown");
                     let content = html_from_md.content;
                     let _toc = html_from_md.toc;
                     let _frontmatter = html_from_md.frontmatter;

doordesk/app/src/error_template.rs

@@ -1,13 +1,7 @@
-use std::any::type_name;
-
-use cfg_if::cfg_if;
 use http::status::StatusCode;
 use leptos::*;
 use thiserror::Error;
 
-#[cfg(feature = "ssr")]
-use leptos_axum::ResponseOptions;
-
 #[derive(Clone, Debug, Error)]
 pub enum AppError {
     #[error("Not Found")]

doordesk/style/tailwind.css

@@ -3,41 +3,75 @@
 @tailwind utilities;
 
 body {
-    @apply bg-gradient-to-br from-zinc-900 to-zinc-950 bg-fixed;
+  @apply bg-gradient-to-br from-zinc-900 to-zinc-950 bg-fixed;
-    @apply w-screen h-screen;
+  @apply w-screen h-screen;
-    @apply text-orange-50 antialiased font-mono tracking-tighter;
+  @apply text-orange-50 antialiased font-mono tracking-tighter;
 }
 
 a[aria-current="page"] {
-    border-bottom: 2px solid #de0002;
+  border-bottom: 2px solid #de0002;
-    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
 }
 
-/* for innerHTML articles */ 
+/* for innerHTML articles */
 article p {
-    @apply mt-5 indent-4;
+  @apply mt-5 indent-4;
 }
 
 article h3 {
-    @apply mt-8;
+  @apply mt-8 text-2xl text-orange-600;
-}
-
-article h3 {
-    @apply text-2xl text-orange-600;
 }
 
 article a {
-    @apply text-orange-300 hover:underline;
+  @apply text-orange-300 hover:underline;
 }
 
-article ul, article ol {
+article h3 > a {
-    @apply mt-5 list-inside;
+  @apply text-orange-600;
+}
+
+article ul,
+article ol {
+  @apply mt-5 list-inside;
 }
 
 article ul {
-    @apply list-disc;
+  @apply list-disc;
 }
 
 article ol {
-    @apply list-decimal;
+  @apply list-decimal;
+}
+
+.hh4 {
+  @apply text-orange-600;
+}
+
+.hh3 {
+  @apply text-blue-500;
+}
+
+.hh13 {
+  @apply text-orange-800;
+}
+
+.hh10 {
+  @apply text-slate-500;
+}
+
+.hh5 {
+  @apply text-orange-300;
+}
+
+/* dunno what this is yet */
+.hh18 {
+  color: red;
+}
+
+.code-block {
+  @apply bg-black bg-opacity-40 p-3 rounded-lg shadow-lg shadow-black;
+}
+
+.code-block-inner {
+  @apply p-2;
 }