new pages, style, dark/light mode toggle, etc...

2025-10-22 22:09:17 +02:00 · 2023-09-16 23:30:08 +02:00 · 2023-09-16 23:30:08 +02:00 · 57ab995f83
commit 57ab995f83
parent 09c002f1ae
29 changed files with 342 additions and 111 deletions
--- a/src/lib/components/DarkModeSwitcher.svelte
+++ b/src/lib/components/DarkModeSwitcher.svelte
@ -0,0 +1,42 @@
+<!-- DarkModeSwitcher.svelte -->
+<script>
+  import { isDarkMode } from '$lib/stores/darkModeStore.js';
+
+  function toggleDarkMode() {
+    $isDarkMode = !$isDarkMode;
+    document.body.classList.toggle("dark-mode", $isDarkMode);
+  }
+</script>
+
+<button on:click={toggleDarkMode}>
+  <img src={$isDarkMode ? "/dark.svg" : "/light.svg"} alt="Dark Mode">
+</button>
+
+<div class:invert={$isDarkMode} class="content">
+  <!-- Your content here -->
+</div>
+
+<style>
+  body {
+    transition: background-color 0.5s, color 0.5s;
+  }
+
+  button {
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+  }
+
+  button.dark {
+    color: #fff; /* Dark mode text color */
+    background-color: #333; /* Dark mode background color */
+  }
+
+  .content {
+    /* Your default content styles here */
+  }
+
+  .invert {
+    filter: invert(1); /* Apply the invert filter for dark mode */
+  }
+</style>
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@ -1,7 +1,9 @@
 <!-- Footer.svelte -->
 <footer>
 	<a href="/">Home</a>
-
+	<div class="footer">
+		<p>Website by Jonas_Jones 2021 - 2023</p>
+	</div>
 	<nav>
 		<ul>
 			<li>
@ -17,10 +19,14 @@
 <style>
 	footer {
 		padding: 1rem;
-		background: lightskyblue;
+		margin: 2rem;
+		margin-bottom: 0;
+		margin-top: 0;
+		background: #16181c;
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: space-between;
+		border-radius: 0.5rem;
 	}

 	ul {
@ -34,4 +40,11 @@
 		text-decoration: none;
 		color: inherit;
 	}
+
+	.footer {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		font-size: 20px;
+	}
 </style>
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@ -1,6 +1,9 @@
 <!-- Header.svelte -->
+<body style="background-color: {$isDarkMode ? '#fff' : '#16181c'};padding:0">
 	<header>
-	<a href="/"><img src="/favicon.png" alt="logo" width="50" height="50" /></a>
+		<div class="header-title">
+			<a href="/"><img src="/favicon.png" alt="logo" width="50" height="50"><h1 style="">wiki.jonasjones.dev</h1></a>
+		</div>
 		<nav>
 			<ul>
 				<li>
@ -9,17 +12,25 @@
 				<li>
 					<a href="/contact">Contact</a>
 				</li>
+				<li>
+					<DarkModeSwitcher />
+				</li>
 			</ul>
 		</nav>
 	</header>
+</body>

 <style>
 	header {
 		padding: 1rem;
-		background: lightskyblue;
+		margin: 2rem;
+		margin-top: 0;
+		margin-bottom: 0;
+		background: rgb(0, 255, 0);
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: space-between;
+		border-radius: 0.5rem;
 	}

 	ul {
@ -31,6 +42,49 @@

 	a {
 		text-decoration: none;
-		color: inherit;
+		color: black;
+	}
+
+	a:hover {
+		color: #26292f;
+	}
+
+	h1 {
+		font-size:35px;
+		padding:0;
+		margin:0;
+		margin-left:20px;
+		float: left;
+	}
+
+	img {
+		float: left;
+	}
+	.header-title {
+		display: flex;
+		align-items: center;
+		float: left;
+		clear: both;
+	}
+
+	button#dark-mode-toggle {
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+	}
+
+	button#dark-mode-toggle img {
+		width: 30px;
+		height: 30px;
 	}
 </style>
+<script>
+	import DarkModeSwitcher from '$lib/components/DarkModeSwitcher.svelte';
+	import { isDarkMode } from '$lib/stores/darkModeStore.js';
+
+	function toggleDarkMode() {
+	$isDarkMode = !$isDarkMode;
+	document.body.classList.toggle("dark-mode", $isDarkMode);
+	}
+
+</script>
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@ -39,10 +39,10 @@
  const renderedList = `<ul>${renderNestedList(nestedFolders)}</ul>`;
 </script>

-<div class="container">
+<div class="container navbar">
 	<div class="row">
 		<div class="col-md-12">
-			<h1>Pages</h1>
+			<h2>Pages</h2>
 			{@html renderedList}
 		</div>
 	</div>
--- a/src/lib/stores/darkModeStore.js
+++ b/src/lib/stores/darkModeStore.js
@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export let isDarkMode = writable(false);
--- a/src/lib/styles/style.css
+++ b/src/lib/styles/style.css
@ -1,30 +1,69 @@
 /* style.css */
+
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css');
+
+@font-face {
+  font-family: 'sary_soft_semiboldregular';
+  src: url('/font/sary-soft.soft-semibold-webfont.woff2') format('woff2'),
+       url('/font/sary-soft.soft-semibold-webfont.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+
+}
+
+@font-face {
+	font-family: 'inter-semibold';
+	src: url('/font/Inter-SemiBold.woff2');
+}
+
+html {
+	/*font-family: 'sary_soft_semiboldregular';*/
+	font-family: 'inter-semibold';
+}
+
 body {
 	margin: 0;
+	padding: 0;
 	background: #eee;
-	color: #333;
-	font-family: sans-serif;
+	color: #fff;
+	background-color: #16181c;
 }

 main {
-	padding: 1rem;
-	margin: 2rem auto;
-	max-width: 40rem;
+	padding: 2rem;
+	margin: 2rem;
+	background-color: #26292f;
+	border-radius: 0.5rem;
+	float: left;
+	overflow: hidden;
 }

 .column {
-	float: left;
-	padding: 10px;
 	height: auto;
-	display: table-cell;
+	padding: 0;
+	flex-grow: 0;
+	height: auto;
+	margin: 2rem;
+	background-color: #26292f;
+	border-radius: 0.5rem;
+	overflow:visible;
+  }
+
+  .flex_grow {
+	flex-grow: 1;
  }

  .navbar {
-	border-right: black solid 1px;
+	float: left;
+	padding: 2rem;
+  }
+
+  ul {
+	padding-left: 10px;
  }

  .container {
-	display: table;
+	display: flex;
  }
  
  .row:after {
@ -32,3 +71,25 @@ main {
 	display: table;
 	clear: both;
  }
+
+  .not-selectable {
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+  }
+
+  a {
+	color: #afb9c4;
+	text-decoration: none;
+  }
+
+  a:hover {
+	color: #fff;
+  }
+
+  .invert {
+	filter: invert(1);
+  }
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -2,21 +2,32 @@
 	import Header from '$lib/components/Header.svelte';
    import Footer from '$lib/components/Footer.svelte';
    import Navbar from '$lib/components/Navbar.svelte';
+    import { isDarkMode } from '$lib/stores/darkModeStore';
    import '$lib/styles/style.css';
+
+    //change background color based on dark mode
+    //$: document.body.style.backgroundColor = $isDarkMode ? '#fff' : '#16181c';
+
 </script>
-
+<body style="background-color: {$isDarkMode ? '#fff' : '#16181c'};padding:0">
+    <div style="height:2rem"></div>
    <Header />
-
-<div class="container">
-    <div class="column navbar"><Navbar /></div>
-    <div class="column content">
+    <div class="container" class:invert={$isDarkMode}>
+        <div class="column"><Navbar /></div>
+        <div class="column content flex_grow" style="margin-left: 0;">
            <main>
                <slot />
+                <!-- Please god forgive me -->
+                <h1 style="color: #26292f;margin:0;padding:0" class="unselectable">YOU CANT SEE THIS YOU CANT SEE THIS YOU CANT SEE THIS YOU CANT SEE THIS</h1>
            </main>
        </div>
    </div>



-
+    <div class:invert={$isDarkMode}>
        <Footer />
+    </div>
+    <div style="height:2rem"></div>
+</body>
+
--- a/src/routes/+page.md
+++ b/src/routes/+page.md
@ -1,65 +1,10 @@
-# Welcome to the Svelte Markdown Wiki!
+# Welcome to my humble Wiki!

-Every page here is a Markdown file. Svelte does the rest!
-
---
-## Different headers
-### Even smaller header
-
-You can use **bold**, *italic*, and ~~strikethrough~~ text.
-
-You can also use [links](/).
-
-You can use `code` blocks.
-
-You can use tables:
-
-| Header 1 | Header 2 |
-| -------- | -------- |
-| Cell 1   | Cell 2   |
-
-You can use blockquotes:
-
-> This is a blockquote.
-> It can span multiple lines.
-> > You can even nest blockquotes.
-> > > And nest them deeper.
-> > > > And deeper.
-> > > > > And deeper.
-
-You can use horizontal rules:
+Every project of mine that requires a wiki will be hosted here.

 ---

-You can use ordered lists:
-
-1. Item 1
-2. Item 2
-3. Item 3
-   1. Item 3.1
-   2. Item 3.2
-4. Item 4
-5. Item 5
-
-You can use unordered lists:
-
- Item 1
- Item 2
- Item 3
-  - Item 3.1
-  - Item 3.2
- Item 4
- Item 5
-
-
-You can use codeblocks:
-    
-```js
-const foo = 'bar';
-```
-
-
-
-You can use images:
-
-![Svelte logo](/favicon.png)
+<script>
+  import Navbar from '$lib/components/Navbar.svelte';
+</script>
+<Navbar />
--- a/src/routes/Exampletopic/+page.md
+++ b/src/routes/Exampletopic/+page.md
@ -1,2 +0,0 @@
-# Exampletopic
-This is an example topic.
--- a/src/routes/Exampletopic/Introduction/+page.md
+++ b/src/routes/Exampletopic/Introduction/+page.md
@ -1,2 +0,0 @@
-# Introduction
-This is the introduction.
--- a/src/routes/Exampletopic/Introduction/Q&A/+page.md
+++ b/src/routes/Exampletopic/Introduction/Q&A/+page.md
@ -1,2 +0,0 @@
-# Q & A
-This is an example Q&A page
--- a/src/routes/Microcraft/+page.md
+++ b/src/routes/Microcraft/+page.md
@ -0,0 +1,8 @@
+# Microcraft
+---
+
+A mod that aims to provide tools to connect Microcontrollers to Minecraft.
+
+This is still in the making but a wiki page will be made soon.
+
+As of right now, only the GitHub wiki has been copied over.
--- a/src/routes/Microcraft/BoardProgramEditors/+page.md
+++ b/src/routes/Microcraft/BoardProgramEditors/+page.md
@ -0,0 +1,16 @@
+# > Board Program Editors
+---
+
+A Board Program Editor is an editor that will be used to edit the Program that will be uploaded to the Microcontroller. This mod offers a sample program for each board that will manually be updated as pi-map entries are added by the user.
+### Available Editors
+The available editors and their ID for the config file are:
+
+| Editor        | config ID           | Default  |
+| ------------- |:-------------:| -----:|
+| The ingame editor provided by the mod itself | `igname` | YES |
+| Arduino IDE | `arduinoide` | - |
+| Notepad++ | `notepadpp` | - |
+| Visual Studio Code | `code` | - |
+| Sublime Text | `sublime` | - |
+| Custom editor | `custom` | - |
+| Open in file explorer | `filepath` | - |
--- a/src/routes/Microcraft/MicrocontrollerBoards/+page.md
+++ b/src/routes/Microcraft/MicrocontrollerBoards/+page.md
@ -0,0 +1,24 @@
+# > Microcontroller Boards
+---
+
+### Supported Boards
+As of the latest version the following boards are supported (and their's ID's for the config file):
+- Arduino Nano [tested]: `A-nano`
+- Arduino Pro Mini: `A-pro_mini`
+- Arduino Uno: `A-uno`
+
+| Board Name | config ID | Default |
+| ------------- |:-------------:| -----:|
+| Arduino Nano | `A-nano` | YES |
+| Arduino Pro Mini | `A-pro_mini` | - |
+| Arduino Uno | `A-uno` | - |
+
+### Planned Boards
+The following boards are planned to be added to the mod but are not yet implemented:
+- Raspberry PI Pico
+- Arduino Micro
+- Arduino Zero
+
+### What to do if my Microcontroller is not (yet) supported?
+The mod offers a way for you to manually map functions to pins. Just select the `Custom` Board and add a pin entry.
+You can also write an issue and **mark it as a board-request**
--- a/src/routes/Microcraft/PinmapEntries/+page.md
+++ b/src/routes/Microcraft/PinmapEntries/+page.md
@ -0,0 +1,10 @@
+# > Pin Map Entries
+---
+
+A Pin-Map-Entry is an entry that can be mapped to a pin of a Microcontroller.
+### List of all Entries
+All currently supported entries are:
+- no entries //TODO for later me: add entries (shout at me if I forget to add them when the first official version of the mod get's released and this is still not updated)
+
+### Not supported Entries
+If an entry is not supported by the mod it cannot be used natively. There are plans for a library that can be implemented into any mod to make any entry possible. This would open the doors to the implementation of any (even mod-specific) feature. BUT: Don't get too excited yet, it's only a plan.
--- a/src/routes/Minecraft-Server-Status/+page.md
+++ b/src/routes/Minecraft-Server-Status/+page.md
@ -0,0 +1,16 @@
+# Minecraft-server-Status
+---
+
+This small python script allows you to view any Minecraft server's status Information
+##### Usage
+Download the file, install python (if not already installed), install `mcstatus` (`pip install mcstatus`) and `time` (`pip install time`) and launch the program by executing it with `python cmd.py` on windows and `python3 cmd.py` on MacOS and Linux (replace 'cmd.py' with correct filename). Make sure that you first locate your download location with the command `cd Downloads` (replace 'Downloads' with your custom location if needed).
+
+##### Status Infos
+1. Minecraft Version
+2. MOTD (message of the day)
+3. host (IP address of the server and port)
+4. Software (Minecraft version and Mod/Plugin Loader if any installed on the server)
+5. Plugins (if any installed)
+6. Ping (number of miliseconds it took for the script to reach the server)
+7. Players (`online Players`/`Max Players`)
+8. Players Online (list of online Players)
--- a/src/routes/about/+page.md
+++ b/src/routes/about/+page.md
@ -1,5 +1,11 @@
 # About

+This is the wiki for all my projects that require a wiki.
+
+View them at [my projects page](https://jonasjones.dev/projects).
+
+---
+
 A Wiki Template by Jonas_Jones

-[GitHub Repository](https://github.com/J-onasJones/SvelteMarkdownWiki)
+[Svelte-Markdown-Wiki](https://github.com/J-onasJones/SvelteMarkdownWiki)
--- a/src/routes/contact/+page.md
+++ b/src/routes/contact/+page.md
@ -1,3 +1,3 @@
 # Contact

-This is the contact page.
+The ways to contact me are on my [website](https://jonasjones.dev) right below my logo!
--- a/static/dark.svg
+++ b/static/dark.svg
@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px"><path d="m 0.917969 8.003906 c 0 3.914063 3.164062 7.078125 7.078125 7.078125 c 3.605468 -0.007812 6.617187 -2.703125 7.023437 -6.285156 c 0.042969 -0.378906 -0.136719 -0.75 -0.457031 -0.957031 c -0.324219 -0.203125 -0.738281 -0.207032 -1.0625 -0.003906 c -0.609375 0.375 -1.316406 0.578124 -2.03125 0.578124 c -2.140625 0 -3.882812 -1.742187 -3.882812 -3.882812 c 0 -0.714844 0.203124 -1.421875 0.578124 -2.03125 c 0.203126 -0.324219 0.199219 -0.738281 -0.003906 -1.0625 c -0.207031 -0.320312 -0.578125 -0.5 -0.957031 -0.457031 c -3.582031 0.40625 -6.277344 3.417969 -6.285156 7.023437 z m 4.667969 -3.472656 c 0 3.253906 2.628906 5.882812 5.886718 5.882812 c 1.085938 0 2.152344 -0.304687 3.078125 -0.878906 l -1.519531 -0.960937 c -0.289062 2.554687 -2.464844 4.503906 -5.035156 4.507812 c -2.796875 0 -5.078125 -2.28125 -5.078125 -5.078125 c 0.003906 -2.570312 1.953125 -4.746094 4.507812 -5.035156 l -0.960937 -1.519531 c -0.574219 0.925781 -0.875 1.992187 -0.878906 3.082031 z m 0 0"/></svg>
--- a/static/favicon-white.png
+++ b/static/favicon-white.png
--- a/static/favicon.png
+++ b/static/favicon.png
--- a/static/font/Inter-SemiBold.woff2
+++ b/static/font/Inter-SemiBold.woff2
--- a/static/font/sary-soft.soft-regular-webfont.css
+++ b/static/font/sary-soft.soft-regular-webfont.css
@ -0,0 +1,12 @@
+/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on November 9, 2022 */
+
+
+
+@font-face {
+    font-family: 'sary_softregular';
+    src: url('sary-soft.soft-regular-webfont.woff2') format('woff2'),
+         url('sary-soft.soft-regular-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
--- a/static/font/sary-soft.soft-regular-webfont.woff
+++ b/static/font/sary-soft.soft-regular-webfont.woff
--- a/static/font/sary-soft.soft-regular-webfont.woff2
+++ b/static/font/sary-soft.soft-regular-webfont.woff2
--- a/static/font/sary-soft.soft-semibold-webfont.css
+++ b/static/font/sary-soft.soft-semibold-webfont.css
@ -0,0 +1,12 @@
+/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on November 9, 2022 */
+
+
+
+@font-face {
+    font-family: 'sary_soft_semiboldregular';
+    src: url('sary-soft.soft-semibold-webfont.woff2') format('woff2'),
+         url('sary-soft.soft-semibold-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
--- a/static/font/sary-soft.soft-semibold-webfont.woff
+++ b/static/font/sary-soft.soft-semibold-webfont.woff
--- a/static/font/sary-soft.soft-semibold-webfont.woff2
+++ b/static/font/sary-soft.soft-semibold-webfont.woff2
--- a/static/light.svg
+++ b/static/light.svg
@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px"><path d="m 8 0 c -0.554688 0 -1 0.445312 -1 1 v 1 c 0 0.554688 0.445312 1 1 1 s 1 -0.445312 1 -1 v -1 c 0 -0.554688 -0.445312 -1 -1 -1 z m -4.996094 2.003906 c -0.253906 0 -0.507812 0.097656 -0.707031 0.296875 c -0.390625 0.390625 -0.390625 1.019531 0 1.414063 l 0.707031 0.707031 c 0.394532 0.390625 1.023438 0.390625 1.414063 0 c 0.394531 -0.394531 0.394531 -1.023437 0 -1.414063 l -0.707031 -0.707031 c -0.195313 -0.199219 -0.449219 -0.296875 -0.707032 -0.296875 z m 9.988282 0 c -0.253907 0 -0.507813 0.097656 -0.707032 0.296875 l -0.707031 0.707031 c -0.390625 0.390626 -0.390625 1.019532 0 1.414063 c 0.394531 0.390625 1.023437 0.390625 1.414063 0 l 0.707031 -0.707031 c 0.394531 -0.394532 0.394531 -1.023438 0 -1.414063 c -0.195313 -0.199219 -0.449219 -0.296875 -0.707031 -0.296875 z m -4.992188 1.996094 c -2.210938 0 -4 1.789062 -4 4 s 1.789062 4 4 4 s 4 -1.789062 4 -4 s -1.789062 -4 -4 -4 z m 0 2 c 1.105469 0 2 0.894531 2 2 s -0.894531 2 -2 2 s -2 -0.894531 -2 -2 s 0.894531 -2 2 -2 z m -7 1 c -0.554688 0 -1 0.445312 -1 1 s 0.445312 1 1 1 h 1 c 0.554688 0 1 -0.445312 1 -1 s -0.445312 -1 -1 -1 z m 13 0 c -0.554688 0 -1 0.445312 -1 1 s 0.445312 1 1 1 h 1 c 0.554688 0 1 -0.445312 1 -1 s -0.445312 -1 -1 -1 z m -10.335938 4.289062 c -0.238281 0.007813 -0.472656 0.105469 -0.660156 0.292969 l -0.707031 0.707031 c -0.390625 0.390626 -0.390625 1.019532 0 1.414063 c 0.394531 0.390625 1.023437 0.390625 1.414063 0 l 0.707031 -0.707031 c 0.394531 -0.394532 0.394531 -1.023438 0 -1.414063 c -0.207031 -0.210937 -0.484375 -0.308593 -0.753907 -0.292969 z m 8.574219 0 c -0.238281 0.007813 -0.472656 0.105469 -0.660156 0.292969 c -0.390625 0.390625 -0.390625 1.019531 0 1.414063 l 0.707031 0.707031 c 0.394532 0.390625 1.023438 0.390625 1.414063 0 c 0.394531 -0.394531 0.394531 -1.023437 0 -1.414063 l -0.707031 -0.707031 c -0.207032 -0.210937 -0.484376 -0.308593 -0.753907 -0.292969 z m -4.292969 1.710938 c -0.527343 0.027344 -0.945312 0.464844 -0.945312 1 v 1 c 0 0.554688 0.445312 1 1 1 s 1 -0.445312 1 -1 v -1 c 0 -0.554688 -0.445312 -1 -1 -1 c -0.015625 0 -0.035156 0 -0.050781 0 z m 0 0"/></svg>