named codeblocks and better coloring

.vscode/settings.json

@@ -3,10 +3,10 @@
         // so it doesn't break code blocks
         "editor.formatOnSave": false
     },
-    "rust-analyzer.cargo.features": [
-        "web",
-        "doc_test"
-    ]
+    // "rust-analyzer.cargo.features": [
+    //     "web",
+    //     "doc_test"
+    // ]
     // "editor.formatOnSave": false
     // "files.autoSaveDelay": 10
 }

assets/githubmarkdown.css

@@ -948,7 +948,7 @@
     overflow: auto;
     font-size: 85%;
     line-height: 1.45;
-    border-radius: 6px;
+    /* border-radius: 6px; */
     /* background-color: var(--color-canvas-subtle); */
 }
 

assets/tailwind.css

@@ -811,6 +811,10 @@ video {
   display: block;
 }
 
+.inline-block {
+  display: inline-block;
+}
+
 .inline {
   display: inline;
 }
@@ -991,6 +995,10 @@ video {
   width: 100%;
 }
 
+.w-2 {
+  width: 0.5rem;
+}
+
 .min-w-6 {
   min-width: 1.5rem;
 }
@@ -1149,6 +1157,10 @@ video {
   align-items: flex-start;
 }
 
+.items-end {
+  align-items: flex-end;
+}
+
 .items-center {
   align-items: center;
 }
@@ -1410,6 +1422,11 @@ video {
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 
+.border-gray-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(107 114 128 / var(--tw-border-opacity));
+}
+
 .bg-\[\#EDEDED\] {
   --tw-bg-opacity: 1;
   background-color: rgb(237 237 237 / var(--tw-bg-opacity));
@@ -1493,6 +1510,16 @@ video {
   background-color: rgb(202 138 4 / var(--tw-bg-opacity));
 }
 
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+}
+
+.bg-gray-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-70 {
   --tw-bg-opacity: 0.7;
 }
@@ -1976,6 +2003,11 @@ video {
   color: rgb(133 77 14 / var(--tw-text-opacity));
 }
 
+.text-green-600 {
+  --tw-text-opacity: 1;
+  color: rgb(22 163 74 / var(--tw-text-opacity));
+}
+
 .placeholder-gray-200::-moz-placeholder {
   --tw-placeholder-opacity: 1;
   color: rgb(229 231 235 / var(--tw-placeholder-opacity));
@@ -1994,6 +2026,10 @@ video {
   opacity: 0.8;
 }
 
+.bg-blend-darken {
+  background-blend-mode: darken;
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -2096,6 +2132,10 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+.last\:hidden:last-child {
+  display: none;
+}
+
 .hover\:-translate-y-2:hover {
   --tw-translate-y: -0.5rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2131,6 +2171,11 @@ video {
   color: rgb(14 165 233 / var(--tw-text-opacity));
 }
 
+.hover\:text-blue-600:hover {
+  --tw-text-opacity: 1;
+  color: rgb(37 99 235 / var(--tw-text-opacity));
+}
+
 .hover\:opacity-100:hover {
   opacity: 1;
 }
@@ -2540,6 +2585,16 @@ video {
     border-color: rgb(68 64 60 / var(--tw-border-opacity));
   }
 
+  .dark\:border-gray-500 {
+    --tw-border-opacity: 1;
+    border-color: rgb(107 114 128 / var(--tw-border-opacity));
+  }
+
+  .dark\:border-gray-300 {
+    --tw-border-opacity: 1;
+    border-color: rgb(209 213 219 / var(--tw-border-opacity));
+  }
+
   .dark\:bg-\[\#111111\] {
     --tw-bg-opacity: 1;
     background-color: rgb(17 17 17 / var(--tw-bg-opacity));
@@ -2594,6 +2649,29 @@ video {
     background-color: rgb(30 41 59 / var(--tw-bg-opacity));
   }
 
+  .dark\:bg-gray-400 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(156 163 175 / var(--tw-bg-opacity));
+  }
+
+  .dark\:bg-gray-500 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(107 114 128 / var(--tw-bg-opacity));
+  }
+
+  .dark\:bg-gray-600 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(75 85 99 / var(--tw-bg-opacity));
+  }
+
+  .dark\:bg-current {
+    background-color: currentColor;
+  }
+
+  .dark\:bg-inherit {
+    background-color: inherit;
+  }
+
   .dark\:bg-opacity-70 {
     --tw-bg-opacity: 0.7;
   }
@@ -2655,6 +2733,11 @@ video {
     color: rgb(255 255 255 / var(--tw-text-opacity));
   }
 
+  .dark\:text-gray-800 {
+    --tw-text-opacity: 1;
+    color: rgb(31 41 55 / var(--tw-text-opacity));
+  }
+
   .dark\:opacity-75 {
     opacity: 0.75;
   }

build.rs

@@ -3,7 +3,7 @@ use std::{env::current_dir, path::PathBuf};
 
 fn main() {
     // re-run only if the "example-book" directory changes
-    println!("cargo:rerun-if-changed=docs-src");
+    // println!("cargo:rerun-if-changed=docs-src");
 
     make_docs("blog");
     make_docs("0.3");

src/components/learn.rs

@@ -105,7 +105,7 @@ fn VersionSwitch() -> Element {
             onclick: move |_| show_versions.set(true),
             div { class: "hover:bg-gray-100 dark:hover:bg-ghdarkmetal rounded w-full py-1",
                 div { class: "grid grid-cols-[auto,1fr,auto] items-center gap-2 px-1",
-                    div { class: "w-8 h-8 rounded-md border flex items-center justify-center bg-gray-50 border-gray-200 text-gray-900 dark:invert",
+                    div { class: "w-8 h-8 rounded-md border flex items-center justify-center bg-gray-50 border-gray-200 text-gray-900 dark:bg-inherit dark:text-gray-500 dark:border-gray-700 ",
                         icons::VersionTagIcon {}
                     }
                     div { class: "leading-snug text-xs text-left",

src/docs.rs

@@ -256,16 +256,28 @@ pub enum Route {{\n\t"
 }
 
 #[component]
-fn CodeBlock(contents: String) -> Element {
+fn CodeBlock(contents: String, name: Option<String>) -> Element {
+    let mut copied = use_signal(|| false);
     rsx! {
-        div { style: "position: relative;",
-            // button {
-            //     style: "position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.15); color: white; border: 1px solid white; padding: 0.25em;",
-            //     background_color: "red",
-            //     "onclick": "navigator.clipboard.writeText(this.previousElementSibling.innerText)",
-            //     "Copy"
-            // }
-            div { dangerous_inner_html: contents }
+        div { class: "border overflow-hidden rounded-md border-gray-300 dark:border-gray-500",
+            div { class: "w-full bg-red flex flex-row justify-between border-b border-gray-300 dark:border-gray-500 py-1 px-2 text-xs items-center bg-gray-100 dark:bg-gray-800",
+                div { class: "font-mono",
+                    if let Some(path) = name {
+                        "src/{path}"
+                    }
+                }
+                button {
+                    class: "hover:text-blue-600 flex flex-row items-center gap-1",
+                    class: if copied() { "text-green-600" },
+                    "onclick": "navigator.clipboard.writeText(this.parentNode.parentNode.lastChild.innerText);",
+                    onclick: move |_| copied.set(true),
+                    if copied() {
+                        "Copied!"
+                    }
+                    span { crate::icons::Copy {} }
+                }
+            }
+            div { class: "codeblock", dangerous_inner_html: contents }
         }
     }
 }

src/docs/.gitignore

@@ -1 +0,0 @@
-*router*.rs