refresh ui

MercuryWorkshop · Apr 28, 2024 · c807ffe · c807ffe
1 parent b598b07
commit c807ffe
Show file tree

Hide file tree

Showing 18 changed files with 292 additions and 77 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -5,6 +5,7 @@ import { browserslistToTargets } from "lightningcss";
 import browserslist from "browserslist";
 
 import icon from "astro-icon";
+import mdx from '@astrojs/mdx';
 
 // https://astro.build/config
 export default defineConfig({
@@ -17,7 +18,13 @@ export default defineConfig({
       test: ({
         tagName
       }) => tagName !== "h1"
-    }]]
+    }]],
+    shikiConfig: {
+      theme: "min-dark",
+      wrap: false,
+      langs: []
+    },
+    integrations: [mdx()]
   },
   build: {
     format: "preserve"
@@ -36,4 +43,4 @@ export default defineConfig({
       cssMinify: "lightningcss"
     }
   }
-});
+});
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@astrojs/check": "0.5.7",
     "@astrojs/markdown-remark": "^4.3.0",
+    "@astrojs/mdx": "^2.3.1",
     "@iconify-icons/mdi": "^1.2.48",
     "astro": "4.5.0",
     "astro-icon": "^1.1.0",

diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
@@ -1,11 +1,8 @@
 ---
-import "styles/style.css";
-import Sidebar from "components/Sidebar.astro";
-const { headings } = Astro.props;
 import { ViewTransitions } from "astro:transitions";
 import { Icon } from 'astro-icon/components'
 
-const title =  headings ? headings[0].text + " | dreamland.js" : "404 | dreamland.js";
+const {title} = Astro.props;
 ---
 
 <html lang="en" transition:animate="none">
@@ -34,15 +31,40 @@ const title =  headings ? headings[0].text + " | dreamland.js" : "404 | dreamlan
 				<Icon size={30} name="mdi:discord" />
 			</a>
 		</div>
-		<Sidebar />
-		<main>
-			<slot />
-		</main>
+
+		<slot />
+
+
+		<style is:global>
+
+  .astro-code {
+    background-color: #201d20 !important;
+  }
+		</style>
+
 		<style>
+		body, html {
+			margin: 0;
+		}
+		* {
+			box-sizing: border-box;
+		}
 			:root {
 				min-height: 100%;
-				width: 100vw;
+			width: 100vw;
+			height: 100vh;
 				overflow-x: hidden;
+
+	background-color: var(--bg);
+	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+	font-size: 18px;
+	color: white;
+	scrollbar-color: #fff2 transparent;
+	--bg: #0B0A0B;
+	--acc: #CA3EED;
+	--bd: #555;
+	--bd2: #333;
+
 			}
 			#header {
 				position:absolute;
@@ -61,21 +83,8 @@ const title =  headings ? headings[0].text + " | dreamland.js" : "404 | dreamlan
 			}
 			#header a {
 				color: var(--color-white);
-
-			}
-			body {
-				display: flex;
-				height: 100%;
-				margin: 0;
-				width: 100%;
-				max-width: 90rem;
-				margin: 0 auto;
-			}
-			main {
-				padding: 2.5rem;
-				overflow-x: hidden;
-				width: 100%;
 			}
+
 		</style>
 	</body>
 </html>
diff --git a/src/layouts/Document.astro b/src/layouts/Document.astro
@@ -0,0 +1,34 @@
+---
+import Base from "./Base.astro";
+
+import "styles/style.css";
+import Sidebar from "components/Sidebar.astro";
+const { headings, frontmatter } = Astro.props;
+
+const title =  headings ? headings[0].text + " | dreamland.js" : "404 | dreamland.js";
+---
+
+<Base title={title}>
+
+		<Sidebar />
+  <main>
+    <slot/>
+  </main>
+
+
+
+  <style>
+			body {
+				display: flex;
+				height: 100%;
+				margin: 0;
+				width: 100%;
+				max-width: 90rem;
+			}
+			main {
+				padding: 2.5rem;
+				overflow-x: hidden;
+				width: 100%;
+			}
+</style>
+</Base>
diff --git a/src/pages/arrays.md b/src/pages/arrays.md
@@ -1,5 +1,5 @@
 ---
-layout: layouts/Base.astro
+layout: layouts/Document.astro
 order: 7
 ---
 

diff --git a/src/pages/basic-html.md b/src/pages/basic-html.md
@@ -1,5 +1,5 @@
 ---
-layout: layouts/Base.astro
+layout: layouts/Document.astro
 order: 1
 ---
 

diff --git a/src/pages/bind-this.md b/src/pages/bind-this.md
@@ -1,5 +1,5 @@
 ---
-layout: layouts/Base.astro
+layout: layouts/Document.astro
 order: 6
 ---
 

diff --git a/src/pages/bind-value-and-bind-checked.md b/src/pages/bind-value-and-bind-checked.md
@@ -1,5 +1,5 @@
 ---
-layout: layouts/Base.astro
+layout: layouts/Document.astro
 order: 4
 ---
 

diff --git a/src/pages/component-bind.md b/src/pages/component-bind.md
@@ -1,5 +1,5 @@
 ---
-layout: layouts/Base.astro
+layout: layouts/Document.astro
 order: 9
 ---
 
@@ -58,4 +58,4 @@ const SignUp: Component<{},{
 ```
 Notice how when the user types in the password field, the changes ripple outwards from there into the component's `this.text`, then to the SignUp component's `this.password`. And similarly, if `this.password` is set from within the SignUp component, it will automatically update the value of `this.text` in the other component, updating the text visible in the input field and triggering the "too short" hint.
 
-This allows us to easily start composing multiple components together and and reuse components in multiple places.
+This allows us to easily start composing multiple components together and and reuse components in multiple places.
diff --git a/src/pages/components.md b/src/pages/components.md
@@ -1,5 +1,5 @@
 ---
-layout: layouts/Base.astro
+layout: layouts/Document.astro
 order: 2
 ---
 
@@ -58,4 +58,4 @@ function UselessComponent(){
         </div>
     )
 }
-```
+```
diff --git a/src/pages/conditional-rendering.md b/src/pages/conditional-rendering.md
@@ -1,5 +1,5 @@
 ---
-layout: layouts/Base.astro
+layout: layouts/Document.astro
 order: 5
 ---
 
@@ -37,4 +37,4 @@ function App(){
        </div>
     )
 }
-```
+```
diff --git a/src/pages/css.md b/src/pages/css.md
@@ -1,5 +1,5 @@
 ---
-layout: layouts/Base.astro
+layout: layouts/Document.astro
 order: 10
 ---
 # CSS

diff --git a/src/pages/custom-handlers.md b/src/pages/custom-handlers.md
@@ -1,5 +1,5 @@
 ---
-layout: layouts/Base.astro
+layout: layouts/Document.astro
 order: 8
 ---