moree content

src/lib/Highlight.svelte

@@ -12,8 +12,10 @@
 </script>
 
 <p class="sr-only">{alt}</p>
-<div class="whitespace-pre-wrap font-mono relative" aria-hidden title={alt}>
-	<Highlight {language} code={renderedCode} />
+<div class=" font-mono relative" aria-hidden title={alt}>
+	<!-- HACK: apply the pre-wrap style to the child to avoid
+		 HTML formatting whitespace issues down the line. -->
+	<div class="*:whitespace-pre-wrap"><Highlight {language} code={renderedCode} /></div>
 	<button
 		class="top-0 right-0 absolute font-sans text-xs font-bold"
 		class:text-blue-500={slice}

src/routes/+page.svelte

@@ -19,19 +19,19 @@
 	}
 </style>
 
-<div class="max-md:text-center">
-	<div class="my-4">
+<div class="max-md:text-center flex flex-col gap-8">
+	<div>
 		<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>
+			Declaratively own your Linux systems with<wbr>
+			full end-to-end&nbsp;customizability of <b>{PKGS}</b>'s <b>67589</b> packages
 			using the <a href="https://lix.systems">Lix</a> package manager.
 		</p>
 	</div>
 
-	<div class="my-4">
+	<div>
 		<h2 class="border-t-2 border-teal-800 w-fit">
 			{DISTRO} — our linux distribution
 		</h2>
@@ -51,9 +51,10 @@
 			</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>
+					<div><span class="text-zinc-700">http://</span><b>localhost</b>:80</div>
 					<span class="text-blue-700 font-black text-lg select-none -mt-[2px]">⨯</span>
 				</div>
+				<!-- screenshot taken as Responsive (3660x2121), DPR=1 in Firefox DevTools (@the phone/tablet icon) -->
 				<enhanced:img src="./demo1/mediawiki.png?format=png"
 					alt="The main page of a brand-new MediaWiki instance hosted on the VM. It starts: 'MediaWiki has been installed.'"
 				/>
@@ -61,6 +62,57 @@
 		</div>
 	</div>
 
+	<div>
+		<h2 class="border-t-2 border-teal-800 w-fit ms-auto">
+			a reimagining of the NixOS community
+		</h2>
+		<div class="grid grid-cols-[1.1fr,1fr] gap-4">
+			<div class="float-right drop-shadow flex flex-col rounded">
+				<!-- screenshot taken as Responsive (1500x800), DPR=1, Zoom=150% in Firefox  -->
+				<enhanced:img src="./gerrit.png?format=png"
+					alt="Gerrit change list page"
+				/>
+			</div>
+			<div class="text-xl flex flex-col gap-4">
+				<p>
+					<b>{PKGS}</b> is a fork of nixpkgs, an immense
+					{new Date().getYear() - new Date("Mar 14, 2003").getYear()} year old effort
+					to package software reproducibly.
+				</p>
+				<p>
+					we pride ourselves on creating clear, intuitive tooling
+					allowing everyone to participate.
+				</p>
+			</div>
+		</div>
+	</div>
+
+	<div>
+		<h2 class="border-t-2 border-teal-800 w-fit">
+			…and much more!
+		</h2>
+		<div class="grid grid-cols-[1fr,1fr] gap-4">
+			<div class="clear-left text-xl">
+				You can:
+				<ul class="ms-2 list-disc list-inside text-lg">
+					<li>configure your desktop systems to be setup <i>just</i>-right out of the box with
+						<a href="https://github.com/nix-community/home-manager/" target="_blank">home-manager</a>.</li>
+					<li>deploy clusters of systems with <a href="https://github.com/zhaofengli/colmena" target="_blank">colmena</a>,</li>
+					<li>provision your cloud resources with <a href="https://terranix.org/index.html" target="_blank">terranix</a></li>
+					<li>develop software in repeatable shell environments with <code>nix-shell</code>,
+						<wbr>to ensure it builds on <i>everyone</i>'s computer.</li>
+				</ul>
+			</div>
+			<div class="float-right drop-shadow flex flex-col rounded">
+				<!-- screenshot taken as Responsive (3660x2121), DPR=1 in Firefox DevTools (@the phone/tablet icon) -->
+				<!-- <enhanced:img src="./demo1/mediawiki.png?format=png"
+					 alt="The main page of a brand-new MediaWiki instance hosted on the VM. It starts: 'MediaWiki has been installed.'"
+					 /> -->
+			</div>
+		</div>
+	</div>
+
+
 </div>
 
 <!-- https://pad.lix.systems/v0Bew569R_2IB0abRSy4kA?view=#Pretty-much-final-draft-About-us -->