cute demo

package.json

@@ -25,5 +25,9 @@
 		"typescript": "^5.0.0",
 		"vite": "^5.0.3"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"@sveltejs/enhanced-img": "^0.3.8",
+		"prismjs": "^1.29.0"
+	}
 }

src/routes/+page.svelte

@@ -1,7 +1,59 @@
-<div class="max-md:text-center ">
-	<h1 class="text-4xl lg:text-5xl my-4">An all-encompassing, declarative<br> <span class="text-blue-800">package ecosystem</span>.</h1>
-	<p class="text-xl lg:text-2xl">Build your *nix programs with <b>{PKGS}</b>'s extensive collection of <b>68368</b> packages<wbr>
-		and configure your machines with <b>{DISTRO}</b> using the <a href="https://nix.dev/manual/nix/latest/language/">Nix</a> language.</p>
+<script>
+	import Prism from "prismjs";
+	import demo1 from "./demo1/vm.nix?raw";
+</script>
+
+<!-- tmp!!! -->
+<svelte:head>
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/themes/prism.min.css" rel="stylesheet" />
+</svelte:head>
+
+<style>
+	h1 {
+		@apply text-4xl lg:text-5xl my-4;
+	}
+	h2 {
+		@apply text-teal-600 text-2xl font-semibold my-1;
+	}
+</style>
+
+<div class="max-md:text-center">
+	<div class="my-4">
+		<h1>An all-encompassing, declarative<br> <span class="text-blue-800">package ecosystem</span>.</h1>
+		<!-- <p class="text-xl lg:text-2xl">Build your *nix programs with <b>{PKGS}</b>'s extensive collection of <b>68368</b> packages<wbr>
+			then manage your systems with <b>{DISTRO}</b> using the <a href="https://nix.dev/manual/nix/latest/language/">Nix</a> language.</p> -->
+		<p class="text-xl lg:text-2xl">
+			Declaratively define your Linux systems with<wbr>
+			full end-to-end&nbsp;customizability of <b>{PKGS}</b>'s <b>67589</b> packages<wbr>
+			using the <a href="https://lix.systems">Lix</a> package manager.
+		</p>
+	</div>
+
+	<div class="my-4">
+		<h2 class="border-t-2 border-teal-800 w-fit">
+			{DISTRO} — our linux distribution
+		</h2>
+		<div class="grid grid-cols-[1fr,auto,1fr] gap-2">
+			<div class="clear-left text-xl">
+				Gain certainty in your deployed system configuration by
+				replacing your opaque state with code.
+				<div class="whitespace-pre-wrap font-mono text-sm bg-blue-50 p-2 rounded-md drop-shadow">
+					{@html Prism.highlight(demo1.replace(/#<slice>[^]*?#<\/slice>/,""), Prism.languages["javascript"], "nix")}
+				</div>
+			</div>
+			<div class="text-4xl flex justify-center items-center">
+				⇒
+			</div>
+			<div class="float-right drop-shadow flex flex-col rounded">
+				<div class="p-2 pb-4 bg-gradient-to-b from-zinc-100 from-40% to-white w-full flex justify-between">
+					<div><span class="text-zinc-700">http://</span><b>localhost</b>:3000</div>
+					<span class="text-blue-700 font-black text-lg select-none -mt-[2px]">⨯</span>
+				</div>
+				<enhanced:img src="./demo1/mediawiki.png?format=png"  />
+			</div>
+		</div>
+	</div>
+
 </div>
 
 <!-- https://pad.lix.systems/v0Bew569R_2IB0abRSy4kA?view=#Pretty-much-final-draft-About-us -->

src/routes/demo1/.gitignore

@@ -0,0 +1,2 @@
+result
+nixos.qcow2

src/routes/demo1/vm.nix

@@ -0,0 +1,20 @@
+with import <nixpkgs> { }; nixos
+{
+  services.mediawiki = {
+    enable = true;
+    httpd.virtualHost.hostName = "localhost:3000";
+    httpd.virtualHost.adminAddr = "root@example.com";
+    passwordFile = pkgs.writeText "password" "correcthorsebatterystaple";
+  };
+
+  networking.firewall.allowedTCPPorts = [ 80 ];#<slice>
+
+  users.users.root.openssh.authorizedKeys.keys = [
+    "ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIH3uTwzSSMAPg84fwbNp2cq9+BdLFeA1VzDGth4zCAbz https://ckie.dev"
+  ];
+  services.openssh = {
+    enable = true;
+    settings.PermitRootLogin = "yes";
+  };
+#</slice>
+}

tailwind.config.js

@@ -53,6 +53,19 @@ export default {
 				'900': '#104437',
 				'950': '#08261f',
 			},
+			zinc: {
+				50: '#fafafa',
+				100: '#f4f4f5',
+				200: '#e4e4e7',
+				300: '#d4d4d8',
+				400: '#a1a1aa',
+				500: '#71717a',
+				600: '#52525b',
+				700: '#3f3f46',
+				800: '#27272a',
+				900: '#18181b',
+				950: '#09090b',
+			},
 		},
 		screens: {
 			sm: "640px",

vite.config.js

@@ -1,8 +1,9 @@
+import { enhancedImages } from "@sveltejs/enhanced-img";
 import { sveltekit } from "@sveltejs/kit/vite";
 import { defineConfig } from "vite";
 
 export default defineConfig({
-	plugins: [sveltekit()],
+	plugins: [sveltekit(), enhancedImages()],
     server: {
         fs: {
             allow: ["./tailwind.config.js"]