final polish, check examples

Author: ealmloff

code-editor/assets/dioxus-code-editor.css

@@ -7,6 +7,7 @@
   min-height: 0;
   overflow: auto;
   tab-size: 4;
+  transition: box-shadow 160ms ease;
 }
 
 .dxc-editor *,

demo/Cargo.toml

@@ -21,3 +21,27 @@ desktop = ["dioxus/desktop"]
 web = ["dioxus/web", "dioxus-primitives/web"]
 fullstack = ["dioxus/fullstack"]
 server = ["dioxus/server", "dioxus/fullstack"]
+
+[[example]]
+name = "snippet-starter"
+path = "snippets/starter.rs"
+
+[[example]]
+name = "snippet-demo"
+path = "snippets/demo.rs"
+
+[[example]]
+name = "snippet-runtime"
+path = "snippets/runtime.rs"
+
+[[example]]
+name = "snippet-static-macro"
+path = "snippets/static_macro.rs"
+
+[[example]]
+name = "snippet-example"
+path = "snippets/example.rs"
+
+[[example]]
+name = "snippet-palette"
+path = "snippets/palette.rs"

demo/assets/app.css

@@ -3378,11 +3378,11 @@ a {
 
 .playground-code-editor {
   --dxc-editor-caret: var(--editor-fg);
-  --dxc-editor-focus-ring: inset 0 0 0 2px var(--accent);
+  --dxc-editor-focus-ring: inset 0 0 0 1px var(--accent);
   --dxc-editor-gutter-line-padding: 0 14px 0 18px;
   --dxc-editor-gutter-padding: 20px 0;
   --dxc-editor-gutter-width: 4ch;
-  --dxc-editor-padding: 20px 22px 20px 0;
+  --dxc-editor-padding: 20px 22px 20px 18px;
   --dxc-editor-selection: var(--editor-selection);
   background: var(--editor-bg);
   color: var(--editor-fg);
@@ -3513,11 +3513,6 @@ a {
 
 /* ============ Footer ============ */
 
-.site-footer {
-  padding-top: 48px;
-  padding-bottom: 48px;
-}
-
 .card-footer {
   background: var(--feature-bg-footer);
   border: 1px solid var(--feature-line);
@@ -3526,7 +3521,7 @@ a {
   color: var(--feature-text);
   margin: 0 auto;
   max-width: var(--max-width);
-  padding: 32px 40px;
+  padding: 48px;
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -3545,11 +3540,6 @@ a {
   gap: 12px;
 }
 
-.card-footer .brand-mark {
-  background: var(--feature-text);
-  color: var(--feature-bg-footer);
-}
-
 .footer-brand-name {
   color: var(--feature-text);
   font-family: Inter, sans-serif;
@@ -3590,6 +3580,13 @@ a {
   color: var(--feature-text);
 }
 
+.external-icon {
+  display: inline-block;
+  margin-left: 0.35em;
+  vertical-align: -0.1em;
+  opacity: 0.7;
+}
+
 .footer-meta {
   color: var(--feature-mute);
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;

demo/snippets/demo.rs

@@ -0,0 +1,12 @@
+fn main() {}
+
+pub struct Report<'a> {
+    pub title: &'a str,
+    pub rows: usize,
+}
+
+impl Report<'_> {
+    pub fn is_empty(&self) -> bool {
+        self.rows == 0
+    }
+}

demo/snippets/example.rs

@@ -0,0 +1,12 @@
+fn main() {}
+
+pub fn fib(n: u32) -> u64 {
+    let mut a: u64 = 0;
+    let mut b: u64 = 1;
+    for _ in 0..n {
+        let next = a + b;
+        a = b;
+        b = next;
+    }
+    a
+}

demo/snippets/install.toml

@@ -0,0 +1 @@
+dioxus-code = { version = "0.1", features = ["runtime"] }

demo/snippets/palette.rs

@@ -1,6 +1,10 @@
 use dioxus::prelude::*;
 use dioxus_code::{Code, Theme, code};
 
+fn main() {
+    dioxus::launch(TokenPalette);
+}
+
 #[component]
 pub fn TokenPalette() -> Element {
     rsx! {

demo/snippets/runtime.rs

@@ -0,0 +1,18 @@
+use dioxus::prelude::*;
+use dioxus_code::{Code, CodeTheme, SourceCode, Theme};
+
+fn main() {
+    dioxus::launch(App);
+}
+
+#[component]
+fn App() -> Element {
+    let source = use_signal(|| "fn main() {}".to_string());
+
+    rsx! {
+        Code {
+            src: SourceCode::new(source()).with_language("rust"),
+            theme: CodeTheme::system(Theme::GITHUB_LIGHT, Theme::GITHUB_DARK),
+        }
+    }
+}

demo/snippets/starter.rs

@@ -0,0 +1,18 @@
+use dioxus::prelude::*;
+use dioxus_code::{Code, Theme, code};
+
+fn main() {
+    dioxus::launch(App);
+}
+
+#[component]
+fn App() -> Element {
+    rsx! {
+        div { class: "app",
+            Code {
+                src: code!("/snippets/demo.rs"),
+                theme: Theme::GITHUB_DARK,
+            }
+        }
+    }
+}

demo/snippets/static_macro.rs

@@ -0,0 +1,16 @@
+use dioxus::prelude::*;
+use dioxus_code::{Code, Theme, code};
+
+fn main() {
+    dioxus::launch(App);
+}
+
+#[component]
+fn App() -> Element {
+    rsx! {
+        Code {
+            src: code!("/snippets/example.rs"),
+            theme: Theme::GITHUB_DARK,
+        }
+    }
+}