the-distro/floral.systems
1
1
Fork 1
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity

feat(root page): prettify and add new home page content #7

Open
jakehamilton wants to merge 6 commits from jakehamilton/feat/home-content into main
pull from: jakehamilton/feat/home-content
merge into: the-distro:main
Conversation 0 Commits 6 Files changed 11 +467 -96
11 changed files with 467 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
bun.lockb
View file

Binary file not shown.

103
package.json
View file

@ -1,53 +1,54 @@
{
"name": "floral.systems",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
"lint": "prettier --check .",
"format": "prettier --write .",
"prepare": "husky"
},
"devDependencies": {
"@sveltejs/adapter-node": "^5.2.9",
"@sveltejs/enhanced-img": "^0.3.9",
"@sveltejs/kit": "^2.5.27",
"@sveltejs/vite-plugin-svelte": "^4.0.0",
"@types/node": "^22.8.1",
"autoprefixer": "^10.4.20",
"husky": "^9.1.6",
"lint-staged": "^15.2.10",
"postcss": "^8.4.47",
"prettier": "^3.1.1",
"prettier-plugin-svelte": "^3.2.6",
"svelte": "^5.0.0",
"svelte-check": "^4.0.0",
"tailwindcss": "^3.4.11",
"typescript": "^5.5.0",
"vite": "^5.4.4"
},
"type": "module",
"dependencies": {
"clsx": "^2.1.1",
"mdast": "^3.0.0",
"moderndash": "^3.12.0",
"rehype-autolink-headings": "^7.1.0",
"rehype-sanitize": "^6.0.0",
"rehype-slug-custom-id": "^2.0.0",
"rehype-stringify": "^10.0.1",
"remark": "^15.0.1",
"remark-parse": "^11.0.0",
"remark-rehype": "^11.1.1",
"svelte-highlight": "^7.7.0",
"to-vfile": "^8.0.0",
"unified": "^11.0.5",
"unist-util-flatmap": "^1.0.0"
},
"lint-staged": {
"{package.json,*.js,src/**.{svelte,ts,js,css}}": "prettier --write --ignore-unknown"
}
"name": "floral.systems",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
"lint": "prettier --check .",
"format": "prettier --write .",
"prepare": "husky"
},
"devDependencies": {
"@sveltejs/adapter-node": "^5.2.9",
"@sveltejs/enhanced-img": "^0.3.9",
"@sveltejs/kit": "^2.5.27",
"@sveltejs/vite-plugin-svelte": "^4.0.0",
"@types/node": "^22.8.1",
"autoprefixer": "^10.4.20",
"husky": "^9.1.6",
"lint-staged": "^15.2.10",
"postcss": "^8.4.47",
"prettier": "^3.1.1",
"prettier-plugin-svelte": "^3.2.6",
"svelte": "^5.0.0",
"svelte-check": "^4.0.0",
"tailwindcss": "^3.4.11",
"typescript": "^5.5.0",
"vite": "^5.4.4"
},
"type": "module",
"dependencies": {
"@tailwindcss/container-queries": "^0.1.1",
"clsx": "^2.1.1",
"mdast": "^3.0.0",
"moderndash": "^3.12.0",
"rehype-autolink-headings": "^7.1.0",
"rehype-sanitize": "^6.0.0",
"rehype-slug-custom-id": "^2.0.0",
"rehype-stringify": "^10.0.1",
"remark": "^15.0.1",
"remark-parse": "^11.0.0",
"remark-rehype": "^11.1.1",
"svelte-highlight": "^7.7.0",
"to-vfile": "^8.0.0",
"unified": "^11.0.5",
"unist-util-flatmap": "^1.0.0"
},
"lint-staged": {
"{package.json,*.js,src/**.{svelte,ts,js,css}}": "prettier --write --ignore-unknown"
}
}

14
src/lib/Highlight.svelte
View file

@ -9,16 +9,19 @@
alt
} = $props();
let renderedCode = $derived(slice ? code.replace(/#<hidden>[^]*?#<\/hidden>/, "")
: code.replace(/#(<hidden>|<\/hidden>)/g,""));
let renderedCode = $derived(slice ? code.replace(/\/\*<hidden>[^]*?<\/hidden>\*\//, "")
: code.replace(/\/\*(<hidden>|<\/hidden>)\*\//g,""));
$effect(() => {
console.log(slice)
});
</script>
<p class="sr-only">{alt}</p>
<div class=" font-mono relative" aria-hidden="true" title={alt}>
<div class="font-mono relative @container" aria-hidden="true" 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>
<div class="*:whitespace-pre-wrap pt-6 @xs:pt-0"><Highlight {language} code={renderedCode} /></div>
<button
class="top-0 right-0 absolute font-sans text-xs font-bold"
class:text-blue-500={slice}
@ -27,4 +30,3 @@
({slice ? "show" : "hide"} full)
</button>
</div>

69
src/lib/assets/arrow-north-to-east.svg Normal file
View file

@ -0,0 +1,69 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="512"
height="512"
viewBox="0 0 135.46666 135.46667"
version="1.1"
id="svg1"
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
sodipodi:docname="arrow-north-to-east.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#505050"
bordercolor="#eeeeee"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
inkscape:zoom="1.4450552"
inkscape:cx="32.870716"
inkscape:cy="379.91628"
inkscape:window-width="2560"
inkscape:window-height="1359"
inkscape:window-x="30"
inkscape:window-y="26"
inkscape:window-maximized="0"
inkscape:current-layer="layer1" />
<defs
id="defs1" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<g
id="g1"
transform="matrix(0,1,1,0,-0.9026756,3.8322078)">
<path
style="fill:none;stroke:#b1e9d0;stroke-width:5.29167;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 7.7680906,7.5091541 c 0,0 38.4917724,-4.5181708 58.9080194,0.7768092 6.293471,1.6322199 13.239679,7.0217937 14.112031,13.4646907 1.34283,9.91768 -5.931657,17.716645 -13.743145,17.830593 -8.086315,0.117958 -15.236044,-7.360994 -9.884796,-16.665379 7.01113,-12.190473 24.655835,-5.559951 32.949651,0.129467 6.55017,4.493306 12.917869,12.153856 13.982559,16.895597 1.27427,5.675133 -1.26448,12.60906 -8.156491,14.953576 C 90.554583,56.725125 81.70025,53.264158 81.69442,44.407585 81.68972,37.287142 88.552418,32.24187 95.938614,31.83997 107.58063,31.2065 114.85557,40.084531 118.1221,45.677357 c 4.67566,8.005501 4.24774,17.185947 3.44851,22.940777 -1.69551,12.208548 -16.05405,30.036616 -16.05405,30.036616"
id="path3"
sodipodi:nodetypes="csssssssssssc" />
<path
sodipodi:type="star"
style="fill:#b1e9d0;fill-opacity:1;stroke:#b1e9d0;stroke-width:5.29167;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke"
id="path2"
inkscape:flatsided="false"
sodipodi:sides="3"
sodipodi:cx="57.973808"
sodipodi:cy="96.324318"
sodipodi:r1="24.403963"
sodipodi:r2="12.201981"
sodipodi:arg1="0.53437152"
sodipodi:arg2="1.5815691"
inkscape:rounded="0"
inkscape:randomized="0"
d="M 78.975588,108.75326 57.842362,108.52559 36.709136,108.29792 47.47292,90.109846 58.236701,71.921771 68.606144,90.337518 Z"
inkscape:transform-center-x="-5.9930106"
inkscape:transform-center-y="0.12432086"
transform="rotate(-151.201,79.803925,98.585649)" />
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.1 KiB

69
src/lib/assets/arrow-north-to-south.svg Normal file
View file

@ -0,0 +1,69 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="512"
height="512"
viewBox="0 0 135.46666 135.46667"
version="1.1"
id="svg1"
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
sodipodi:docname="arrow-north-to-south.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#505050"
bordercolor="#eeeeee"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
inkscape:zoom="1.4450552"
inkscape:cx="129.06081"
inkscape:cy="269.19386"
inkscape:window-width="2560"
inkscape:window-height="1359"
inkscape:window-x="30"
inkscape:window-y="26"
inkscape:window-maximized="0"
inkscape:current-layer="layer1" />
<defs
id="defs1" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<g
id="g1"
transform="translate(13.236126,-0.54928696)">
<path
style="fill:none;stroke:#b1e9d0;stroke-width:5.29167;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 57.122655,99.016667 c 0,0 -12.0052,-8.957795 -12.818511,-18.982533 C 43.224775,66.730003 54.300471,61.132091 62.04062,64.713936 69.620979,68.221835 69.669406,78.89371 62.259766,82.749152 53.610058,87.249835 43.618742,81.854841 40.970734,63.925307 39.21652,52.047608 48.79738,34.956558 60.765072,35.921617 c 5.554347,0.447897 9.871607,8.520089 6.630034,14.198806 -2.50231,4.383646 -9.764417,5.901086 -15.18291,1.210552 C 44.181237,44.378951 42.889541,34.72258 47.043823,24.946647 51.639152,14.132834 65.869935,5.6799693 65.869935,5.6799693"
id="path1"
sodipodi:nodetypes="cssssssssc" />
<path
sodipodi:type="star"
style="fill:#b1e9d0;fill-opacity:1;stroke:#b1e9d0;stroke-width:5.29167;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke"
id="path2"
inkscape:flatsided="false"
sodipodi:sides="3"
sodipodi:cx="57.973808"
sodipodi:cy="96.324318"
sodipodi:r1="24.403963"
sodipodi:r2="12.201981"
sodipodi:arg1="0.53437152"
sodipodi:arg2="1.5815691"
inkscape:rounded="0"
inkscape:randomized="0"
d="M 78.975588,108.75326 57.842362,108.52559 36.709136,108.29792 47.47292,90.109846 58.236701,71.921771 68.606144,90.337518 Z"
inkscape:transform-center-x="5.4467283"
inkscape:transform-center-y="0.48035022"
transform="matrix(0.89910672,-0.43772951,-0.43772951,-0.89910672,49.995486,221.7563)" />
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.9 KiB

69
src/lib/assets/arrow-west-to-north.svg Normal file
View file

@ -0,0 +1,69 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="512"
height="512"
viewBox="0 0 135.46666 135.46667"
version="1.1"
id="svg1"
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
sodipodi:docname="arrow-west-to-north.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#505050"
bordercolor="#eeeeee"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
inkscape:zoom="1.4450552"
inkscape:cx="32.870716"
inkscape:cy="379.91628"
inkscape:window-width="2560"
inkscape:window-height="1359"
inkscape:window-x="30"
inkscape:window-y="26"
inkscape:window-maximized="0"
inkscape:current-layer="layer1" />
<defs
id="defs1" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<g
id="g1"
transform="matrix(1,0,0,-1,2.1971496,136.58098)">
<path
style="fill:none;stroke:#b1e9d0;stroke-width:5.29167;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 7.7680906,7.5091541 c 0,0 38.4917724,-4.5181708 58.9080194,0.7768092 6.293471,1.6322199 13.239679,7.0217937 14.112031,13.4646907 1.34283,9.91768 -5.931657,17.716645 -13.743145,17.830593 -8.086315,0.117958 -15.236044,-7.360994 -9.884796,-16.665379 7.01113,-12.190473 24.655835,-5.559951 32.949651,0.129467 6.55017,4.493306 12.917869,12.153856 13.982559,16.895597 1.27427,5.675133 -1.26448,12.60906 -8.156491,14.953576 C 90.554583,56.725125 81.70025,53.264158 81.69442,44.407585 81.68972,37.287142 88.552418,32.24187 95.938614,31.83997 107.58063,31.2065 114.85557,40.084531 118.1221,45.677357 c 4.67566,8.005501 4.24774,17.185947 3.44851,22.940777 -1.69551,12.208548 -16.05405,30.036616 -16.05405,30.036616"
id="path3"
sodipodi:nodetypes="csssssssssssc" />
<path
sodipodi:type="star"
style="fill:#b1e9d0;fill-opacity:1;stroke:#b1e9d0;stroke-width:5.29167;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke"
id="path2"
inkscape:flatsided="false"
sodipodi:sides="3"
sodipodi:cx="57.973808"
sodipodi:cy="96.324318"
sodipodi:r1="24.403963"
sodipodi:r2="12.201981"
sodipodi:arg1="0.53437152"
sodipodi:arg2="1.5815691"
inkscape:rounded="0"
inkscape:randomized="0"
d="M 78.975588,108.75326 57.842362,108.52559 36.709136,108.29792 47.47292,90.109846 58.236701,71.921771 68.606144,90.337518 Z"
inkscape:transform-center-x="-5.9930106"
inkscape:transform-center-y="0.12432086"
transform="rotate(-151.201,79.803925,98.585649)" />
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.1 KiB

45
src/lib/assets/box.svg Normal file
View file

@ -0,0 +1,45 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
viewBox="0 0 135.46666 135.46667"
version="1.1"
id="svg1"
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
sodipodi:docname="box.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#505050"
bordercolor="#eeeeee"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
showguides="true"
inkscape:zoom="2"
inkscape:cx="144.75"
inkscape:cy="288.25"
inkscape:window-width="2560"
inkscape:window-height="1360"
inkscape:window-x="30"
inkscape:window-y="26"
inkscape:window-maximized="0"
inkscape:current-layer="layer1" />
<defs
id="defs1" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<path
id="path1-2"
style="fill:none;stroke:currentColor;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 67.733331,5.8132883 12.707612,35.665484 V 99.801825 L 67.733331,129.65338 122.75906,99.801825 V 35.665484 Z m 0,123.8400917 V 65.64932 Z M 12.707604,35.665484 67.733331,65.51703 122.75906,35.665484 M 40.220467,20.739056 95.246189,50.591263 Z" />
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

7
src/routes/+layout.svelte
View file

@ -7,8 +7,9 @@
import clsx from "clsx";
let { children } = $props();
globalThis.PKGS = "petalpkgs";
globalThis.PKGS = "Petalpkgs";
globalThis.DISTRO = "FleurixOS";
globalThis.PKGS_COUNT = "67,589";
</script>
<svelte:head>
@ -16,12 +17,12 @@
<meta property="og:title" content="floral.systems" />
<meta property="og:type" content="website" />
<meta property="og:url" content={$page.url?.toString()} />
<meta name="theme-color" content="#136951">
<meta name="theme-color" content="#27a27b">
</svelte:head>
<div class="flex flex-col underline-offset-[4px]">
<nav class="min-h-16 h-16 bg-zinc-50 mb-2">
<div class="mx-auto container flex h-full justify-between">
<div class="mx-auto container flex h-full justify-between px-2">
<a class="group flex h-full items-center justify-center font-aladin text-3xl/10
text-coral-970 transition-colors duration-75 no-link-style gap-x-2
hover:bg-clip-text hover:bg-gradient-to-r hover:from-coral-500 hover:from-15% hover:to-coral-400 hover:text-transparent"

172
src/routes/+page.svelte
View file

@ -3,18 +3,38 @@
import LinkChip from "$lib/components/LinkChip.svelte";
import FlowerDivider from "$lib/components/FlowerDivider.svelte";
import leaf from "$lib/assets/leaf.svg";
import petal from "$lib/assets/petal.svg";
import box from "$lib/assets/box.svg?raw";
import arrowNorthToEast from "$lib/assets/arrow-north-to-east.svg";
import arrowWestToNorth from "$lib/assets/arrow-west-to-north.svg";
import nix from "svelte-highlight/languages/nix";
import demo1 from "./demo1/vm.nix?raw";
import forkGraph from "./fork.svg?raw";
let fleurixExampleSlice = $state(true);
let pkgsCount = "67,589";
</script>
<div class="flex flex-col gap-y-24">
<div class="mt-16">
<h1 class="text-6xl text-balance">A declarative, comprehensive <span class="text-teal-500 font-aladin font-bold">package&nbsp;ecosystem</span></h1>
<p class="mt-4 text-xl lg:text-2xl max-w-4xl text-balance">
{#snippet packageExample(name)}
<div class="flex pr-4 shadow w-60 rounded-full whitespace-nowrap bg-zinc-100 font-bold overflow-hidden">
<span class="w-11 h-10 bg-teal-500 py-2 pl-3 pr-2 text-white">
{@html box}
</span>
<span class="flex py-2 pl-2">{name}</span>
</div>
{/snippet}
<div class="flex flex-col gap-y-16 px-2">
<div class="mt-4 sm:mt-16">
<h1 class="text-5xl sm:text-6xl text-balance">A declarative, comprehensive <span class="text-teal-500 font-aladin font-bold">package&nbsp;ecosystem</span></h1>
<p class="mt-4 text-xl lg:text-2xl max-w-3xl text-balance">
Declaratively own your Linux systems with<wbr>
full end-to-end&nbsp;customizability of <b class="text-teal-500">67,589</b> packages.
full end-to-end&nbsp;customizability of <b class="text-teal-500">{pkgsCount}</b> packages.
</p>
<div class="flex pt-4 gap-x-2">
<LinkChip
@ -48,35 +68,129 @@
<div class="">
<h2 class="w-fit text-4xl pb-4">
<span class="text-teal-500">{DISTRO}</span> — our linux distribution
<span class="font-aladin font-bold text-teal-500">{DISTRO}</span> — our Linux distribution
</h2>
<div class="grid lg:grid-cols-[1.15fr,calc(theme(gap.12)),1fr] items-end">
<div class="clear-left text-xl flex flex-col h-full">
Gain certainty in your deployed system configuration by
replacing your opaque state with code.
<div class="grow"></div>
<div class="text-sm bg-blue-50 p-2 rounded-md drop-shadow mt-2">
<div class="text-xl flex flex-col h-full max-w-3xl">
Gain certainty in your deployed system configuration by
replacing your opaque state with code.
</div>
<div class="pt-4">
<LinkChip
href="https://fleurixos.org"
target="_blank"
class="hover:border-teal-200"
>
<!-- NOTE: enhanced:img breaks when creating multiple elements with the same src -->
<img src={leaf} width="24" height="24" />
<span>Try FleurixOS</span>
</LinkChip>
</div>
<div class="grid grid-cols[1fr] md:grid-cols-[1fr,1fr] gap-4 mt-4 align-top place-items-start">
<div class="flex flex-col relative w-full items-end">
<div class="text-sm bg-blue-50 p-2 rounded-md drop-shadow max-w-3xl max-sm:max-w-full h-fit w-full">
<Highlight
language={nix} code={demo1}
alt="Definition of a simple {DISTRO} system running MediaWiki with the HTTP port opened."
bind:slice={fleurixExampleSlice}
/>
</div>
</div>
<div class="text-4xl flex justify-center items-center h-full">
⇒
</div>
<div class="float-right drop-shadow flex flex-col rounded overflow-hidden">
<div class="p-2 bg-gradient-to-b from-zinc-100 from-40% to-white w-full flex justify-between grow bg-teal-500">
<div class="p-1 px-3 bg-zinc-200 w-full rounded-sm">
<span class="text-zinc-700">http://</span><b>localhost</b>:80
</div>
<span class="text-zinc-700 font-black text-lg select-none pl-2">⨯</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.'"
{#if fleurixExampleSlice}
<enhanced:img
src="$lib/assets/arrow-north-to-east.svg"
class="pt-2 hidden lg:block"
width="48"
height="48"
/>
{/if}
<enhanced:img
src="$lib/assets/arrow-north-to-south.svg"
class="md:hidden mx-auto pt-4"
width="48"
height="48"
/>
</div>
<div class="w-full flex flex-col">
<div class="drop-shadow flex flex-col mx-auto rounded overflow-hidden w-full max-w-3xl">
<div class="p-2 bg-zinc-100 w-full flex justify-between grow">
<div class="p-1 px-3 bg-zinc-200 w-full rounded-sm">
<span class="text-zinc-500">http://</span><b>localhost</b><span class="text-zinc-500">:80</span>
</div>
<div class="flex items-center pl-4 pr-2 gap-x-2">
<div class="w-3 h-3 rounded-full bg-[#facc15]" />
<div class="w-3 h-3 rounded-full bg-teal-400" />
<div class="w-3 h-3 rounded-full bg-coral-400" />
</div>
</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.'"
class="w-full"
/>
</div>
<!-- NOTE: enhanced:img breaks when creating multiple elements with the same src -->
<img
src={arrowWestToNorth}
class="pt-4 hidden md:block lg:hidden"
width="48"
height="48"
/>
{#if !fleurixExampleSlice}
<enhanced:img
src="$lib/assets/arrow-west-to-north.svg"
class="pt-4 hidden lg:block"
width="48"
height="48"
/>
{/if}
</div>
</div>
</div>
<FlowerDivider />
<div>
<h2 class="text-4xl w-fit pb-4">
<span class="font-aladin font-bold text-teal-500">{PKGS}</span> — our package set
</h2>
<div class="text-xl h-full max-w-3xl">
A complete package set with <b class="text-teal-500">{pkgsCount}</b> packages, built on top of 21 years of volunteer labor to reproducibly package software.
</div>
<div class="pt-4">
<LinkChip
href="https://fleurixos.org"
target="_blank"
class="hover:border-coral-200"
>
<!-- NOTE: enhanced:img breaks when creating multiple elements with the same src -->
<img src={petal} width="24" height="24" />
<span>Use Petalpkgs</span>
</LinkChip>
</div>
<div class="grid grid-cols-2 lg:grid-cols-4 place-items-center grid-flow-dense gap-4 max-w-5xl mx-auto mt-6">
{@render packageExample("LLVM")}
{@render packageExample("GCC")}
{@render packageExample("NodeJS")}
{@render packageExample("Rust")}
{@render packageExample("Firefox")}
{@render packageExample("Aseprite")}
{@render packageExample("Discord")}
{@render packageExample("KDE")}
{@render packageExample("Python")}
{@render packageExample("Inkscape")}
{@render packageExample("Pipewire")}
{@render packageExample("Kitty")}
{@render packageExample("Element")}
{@render packageExample("Blender")}
{@render packageExample("Ruby")}
{@render packageExample("Chromium")}
{@render packageExample("Steam")}
{@render packageExample("Thunderbird")}
{@render packageExample("VS Code")}
{@render packageExample("Vim")}
{@render packageExample("GNOME Desktop")}
{@render packageExample("Emacs")}
{@render packageExample("Lutris")}
{@render packageExample("Lix")}
</div>
</div>
@ -84,7 +198,7 @@
<div class="pb-60">
<h2 class="text-4xl w-fit pb-4">
A <span class="text-teal-500">reimagining</span> of the NixOS community
Our vision
</h2>
<div class="grid lg:grid-cols-[1.15fr,1fr] gap-12">
<div class="text-xl flex flex-col gap-4">
@ -116,7 +230,7 @@
<div>
<h2 class="text-4xl w-fit pb-4">
And much <span class="text-teal-500">more</span>!
And much more!
</h2>
<div class="grid lg:grid-cols-[1.15fr,1fr]">
<div class="clear-left text-xl">
@ -140,8 +254,6 @@
</div>
</div>
</div>
</div>
<!-- https://pad.lix.systems/v0Bew569R_2IB0abRSy4kA?view=#Pretty-much-final-draft-About-us -->

10
src/routes/demo1/vm.nix
View file

@ -8,7 +8,7 @@ with import <nixpkgs> { }; nixos
pkgs.writeText "password" "correcthorsebatterystaple";
};
networking.firewall.allowedTCPPorts = [ 80 ];#<hidden>
networking.firewall.allowedTCPPorts = [ 80 ];/*<hidden>*/
users.users.root.openssh.authorizedKeys.keys = [
"…your key here…"
@ -18,8 +18,8 @@ with import <nixpkgs> { }; nixos
settings.PermitRootLogin = "yes";
};
# run with:
# nix-build vm.nix -A vm && (rm nixos.qcow2 ; QEMU_NET_OPTS='hostfwd=tcp::3000-:80' ./result/bin/run-nixos-vm)
# xdg-open http://localhost:3000
#</hidden>
# nix-build vm.nix -A vm && \
# (rm nixos.qcow2 ; QEMU_NET_OPTS='hostfwd=tcp::3000-:80' ./result/bin/run-nixos-vm)
#
# xdg-open http://localhost:3000/*</hidden>*/
}

5
tailwind.config.js
View file

@ -1,4 +1,5 @@
import colors from "tailwindcss/colors";
import containerQueries from "@tailwindcss/container-queries";
/** @type {import("tailwindcss").Config} */
export default {
@ -77,7 +78,9 @@ export default {
// that dense https://tailwindcss.com/docs/screens
}
},
plugins: [],
plugins: [
containerQueries
],
safelist: [
// this is pretty sensible, and depended on in src/routes/colors/Color.svelte
{ pattern: /bg-.+/ }