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,7 +13,8 @@ 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 =
+                        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;

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

@@ -19,18 +19,19 @@ article p {
 }
 
 article h3 {
-    @apply mt-8;
-}
-
-article h3 {
-    @apply text-2xl text-orange-600;
+  @apply mt-8 text-2xl text-orange-600;
 }
 
 article a {
   @apply text-orange-300 hover:underline;
 }
 
-article ul, article ol {
+article h3 > a {
+  @apply text-orange-600;
+}
+
+article ul,
+article ol {
   @apply mt-5 list-inside;
 }
 
@@ -41,3 +42,36 @@ article ul {
 article ol {
   @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;
+}