Compare commits

...

4 commits

16 changed files with 660 additions and 72 deletions

View file

@ -9,13 +9,13 @@
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,""));
</script>
<p class="sr-only">{alt}</p>
<div class=" font-mono relative" aria-hidden title={alt}>
<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>
@ -27,4 +27,3 @@
({slice ? "show" : "hide"} full)
</button>
</div>

View file

@ -0,0 +1,65 @@
<?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-from-left-to-down.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="2.0436167"
inkscape:cx="387.79288"
inkscape:cy="184.2322"
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
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 -7.073472,16.7234 -14.77889,15.435432 -8.086315,-1.351635 -9.539445,-10.597699 -6.065485,-14.788091 8.975288,-10.826254 21.354159,-4.201044 30.166085,0.64734 2.989795,1.645006 7.69663,6.452256 9.710113,10.875327 4.705176,10.335987 3.978976,18.111457 -3.884045,20.973846 C 90.59464,56.838903 81.70025,53.264158 81.69442,44.407585 81.68972,37.287142 88.552418,32.24187 95.938614,31.83997 107.58063,31.2065 115.43554,39.783947 118.1221,45.677357 c 2.40997,5.286669 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>
</svg>

After

Width:  |  Height:  |  Size: 2.9 KiB

View file

@ -0,0 +1,65 @@
<?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-from-up-to-down.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.0218084"
inkscape:cx="-239.28166"
inkscape:cy="117.92818"
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
style="fill:none;stroke:#b1e9d0;stroke-width:5.29167;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 50.793004,3.8400172 c 0.04577,8.2393038 1.789258,13.0051818 11.002986,16.1775828 8.487892,2.922487 10.530007,10.902745 9.095497,17.254543 -2.20475,9.762305 -12.026078,13.604391 -18.921467,9.932072 -7.236246,-3.853849 -5.672512,-13.081852 -1.04597,-15.94941 11.953088,-7.408596 21.581254,2.810421 28.393024,10.210195 2.311161,2.510667 5.244184,8.56553 5.745989,13.399355 1.172635,11.295848 -1.989381,18.436358 -10.354507,18.64865 -5.68235,0.144207 -12.977472,-6.074328 -10.16553,-14.472655 2.260712,-6.75203 10.371898,-9.352025 17.502237,-7.383337 11.238728,3.103015 15.956913,13.733677 16.629083,20.175576 0.60296,5.778691 -1.440166,17.644438 -4.028604,22.846059"
id="path3"
sodipodi:nodetypes="cssssssssssc" />
<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="-4.7162935"
inkscape:transform-center-y="1.5424015"
transform="rotate(-157.87918,75.76367,97.954627)" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.9 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>

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 119 KiB

View file

@ -0,0 +1,79 @@
<?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"
xml:space="preserve"
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
sodipodi:docname="flower-gray.svg"
inkscape:export-filename="flower-v4.png"
inkscape:export-xdpi="192"
inkscape:export-ydpi="192"
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.0218084"
inkscape:cx="137.99064"
inkscape:cy="194.26343"
inkscape:window-width="2420"
inkscape:window-height="1360"
inkscape:window-x="30"
inkscape:window-y="26"
inkscape:window-maximized="0"
inkscape:current-layer="layer2" /><defs
id="defs1" /><g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1" /><g
inkscape:groupmode="layer"
id="layer2"
inkscape:label="flower"><path
style="display:inline;opacity:1;fill:#d4d4d8;fill-opacity:1;stroke:none;stroke-width:0.788603px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 71.736436,68.603652 c 44.954114,-1.02324 46.182024,-19.850787 47.205234,-26.467722 0.20483,-2.455764 0.40928,-5.25259 -0.40929,-8.595155 -3.13791,-5.320815 -7.43552,-9.277345 -9.00447,-10.368791 -1.70537,-0.682158 -4.2976,0.750382 -5.59368,0 -0.61395,-0.818579 0.40929,-2.728604 -0.68216,-3.9565 -11.050947,-6.54871 -20.191844,-4.706881 -27.149847,3.137921 -14.939222,20.874002 -4.365787,46.250247 -4.365787,46.250247 z"
id="path1-30"
sodipodi:nodetypes="cccccccc" /><path
style="display:inline;opacity:1;fill:#e4e4e7;fill-opacity:1;stroke:none;stroke-width:0.788603px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 71.453362,68.801004 C 91.440551,32.169169 74.396844,10.006396 63.823409,7.891696 47.315213,5.2312884 37.765024,13.690025 34.490671,19.488354 c -6.139412,11.187368 -2.66041,16.712829 -2.114685,18.895722 6.957997,16.508212 25.70711,28.234039 39.077376,30.416928 z"
id="path2"
sodipodi:nodetypes="ccccc" /><path
style="display:inline;opacity:1;fill:#d4d4d8;fill-opacity:1;stroke:none;stroke-width:0.788603px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 71.723213,69.236517 C 51.308471,40.763158 13.818464,31.766268 6.1685152,49.08503 5.6590776,50.598312 7.4177571,52.495453 5.576126,54.939534 3.6660874,57.258875 3.0019185,60.474745 3.0701322,61.839042 2.9803593,77.516957 10.941832,81.990947 21.447045,86.766043 33.543136,92.615566 71.382149,74.148046 71.723213,69.236517 Z"
id="path3"
sodipodi:nodetypes="cccccc" /><path
style="display:inline;opacity:1;fill:#e4e4e7;fill-opacity:1;stroke:none;stroke-width:0.788603px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 71.341717,68.805242 c -43.521593,7.230872 -56.360728,26.266054 -52.540648,38.681318 4.161154,9.61841 12.688112,16.23536 18.691092,18.96396 12.756332,5.52549 26.740535,-7.09442 29.878457,-16.09891 3.888304,-12.824539 6.153992,-42.092119 3.971099,-41.546368 z"
id="path4-9"
sodipodi:nodetypes="ccccc" /><path
style="display:inline;opacity:1;fill:#d4d4d8;fill-opacity:1;stroke:none;stroke-width:0.788603px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 71.30173,68.961066 c -14.598139,26.740553 -12.66272,42.209164 4.800493,54.487974 17.12214,9.75484 25.921977,5.93474 34.107847,-4.50223 7.09442,-9.68663 9.48198,-20.532954 8.32231,-26.058403 C 117.03165,74.538397 74.439652,63.16273 71.30173,68.961066 Z"
id="path5-2"
sodipodi:nodetypes="ccccc" /><path
style="display:inline;opacity:1;fill:#e4e4e7;fill-opacity:1;stroke:none;stroke-width:0.788603px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 71.474534,68.791043 C 80.069719,47.303109 123.51212,26.787417 130.94764,60.554165 133.13053,71.94619 130.26546,91.728758 118.19128,92.615566 112.87047,92.547216 68.336612,86.663541 71.474534,68.791043 Z"
id="path6-5"
sodipodi:nodetypes="cccc" /><path
id="path1-30-5"
style="display:inline;fill:#d4d4d8;fill-opacity:1;stroke:none;stroke-width:0.788603px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 108.11691,22.989811 c -1.05689,0.05598 -2.20173,0.388556 -3.13055,0.395841 l -30.431,39.130131 c -0.616191,0.993514 -3.130416,6.281983 -3.130416,6.281983 44.954066,-1.023239 46.493426,-20.044909 47.516636,-26.661837 0.20483,-2.455762 0.40929,-5.252779 -0.40928,-8.595341 -3.13791,-5.32081 -7.43567,-9.276914 -9.00462,-10.368359 -0.42634,-0.17054 -0.90768,-0.209065 -1.41077,-0.182418 z"
sodipodi:nodetypes="sccccccs" /></g><g
inkscape:groupmode="layer"
id="layer4"
inkscape:label="stamen_base" /><g
inkscape:groupmode="layer"
id="layer3"
inkscape:label="stamen"
transform="translate(48.016835,0.13732173)" /></svg>

After

Width:  |  Height:  |  Size: 5.3 KiB

57
src/lib/assets/leaf.svg Normal file
View file

@ -0,0 +1,57 @@
<?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"
xml:space="preserve"
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
sodipodi:docname="leaf.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="177.15586"
inkscape:cy="260.54367"
inkscape:window-width="1831"
inkscape:window-height="1238"
inkscape:window-x="30"
inkscape:window-y="26"
inkscape:window-maximized="0"
inkscape:current-layer="svg1" /><defs
id="defs1" /><g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"><g
inkscape:label="Layer 1"
id="layer1-9"
transform="translate(0.39145833,-0.50256824)" /><g
id="layer4"
inkscape:label="stamen_base"
transform="translate(0.39145833,-0.50256824)" /><g
id="layer3"
inkscape:label="stamen"
transform="translate(48.408293,-0.36524651)" /></g><g
id="g2"
transform="translate(0,4.9535631)"><path
style="fill:#49be95;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 5.9447564,86.621179 c 0,0 28.4566516,-26.328381 41.6259236,-33.834967 C 63.137118,43.913224 74.262563,38.776995 129.98604,35.60375 120.5338,64.353283 120.9163,85.225333 87.438519,94.896362 37.828146,109.22776 5.9447564,86.621179 5.9447564,86.621179 Z"
id="path1"
sodipodi:nodetypes="cscsc" /><path
style="fill:#27a27b;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 5.9447564,86.62118 C 85.116628,78.856181 85.974262,63.282749 129.98604,35.603751 c 0,0 -40.446902,-2.684616 -74.20599,12.768723 C 33.239912,58.6903 5.9447564,86.62118 5.9447564,86.62118 Z"
id="path2"
sodipodi:nodetypes="ccsc" /></g></svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

91
src/lib/assets/lix.svg Normal file
View file

@ -0,0 +1,91 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="301.83499"
height="512"
viewBox="0 0 79.860506 135.46667"
version="1.1"
id="svg1"
xml:space="preserve"
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
sodipodi:docname="lix.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"
inkscape:cx="-263.5"
inkscape:cy="186.5"
inkscape:window-width="2560"
inkscape:window-height="1360"
inkscape:window-x="30"
inkscape:window-y="26"
inkscape:window-maximized="0"
inkscape:current-layer="layer2" /><defs
id="defs1" /><g
inkscape:groupmode="layer"
id="layer2"
inkscape:label="background"
style="display:inline"><path
style="display:inline;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 48.519872,0.18579056 C 45.47737,0.16960704 43.262295,3.6409654 42.873891,5.0812989 37.301335,8.3773176 33.977117,15.376214 22.10767,24.911935 16.715232,28.86324 14.206469,29.587312 9.498087,35.177251 6.2939131,40.07506 7.0949563,45.888349 7.0262955,48.085497 1.705078,55.317775 0.18775395,57.171616 0.15342352,60.696207 c 0,3.244226 1.78052438,5.115237 2.03800268,5.492872 -1.81951308,6.408348 -3.4044347,10.894191 6.0707653,14.395895 -5.9963826,6.866087 -1.2479558,10.298736 1.7960095,11.374423 11.649461,35.634993 7.564755,40.098343 15.34632,43.188083 3.021079,0.50351 14.647652,0.0229 30.073461,0.13732 8.216417,0.22884 10.138921,-14.25857 21.216208,-57.469149 3.17197,-8.059394 0.986604,-11.967529 -0.01677,-16.563649 0,0 2.768536,-7.00252 3.027472,-12.634385 C 79.568639,45.335649 77.266367,43.39367 74.222402,40.23527 73.866365,35.736251 76.448642,30.188732 65.443847,26.013383 65.970246,21.82507 66.956013,16.615931 61.577578,11.077287 60.525649,8.6335751 53.245461,0.31525874 48.519872,0.18579056 Z"
id="path1"
sodipodi:nodetypes="cccccccccccccccccc" /></g><g
inkscape:groupmode="layer"
id="layer3"
inkscape:label="cone"
style="display:inline"><path
style="opacity:1;fill:#ef7627;fill-opacity:1;stroke:none;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
d="M 70.878136,76.931361 C 60.107697,126.91523 60.755327,133.05574 53.117859,132.95864 h -23.84821 c -7.781565,0.0457 -5.273199,-1.37322 -16.213165,-46.048566 z"
id="path2"
sodipodi:nodetypes="ccccc" /><path
id="path2-3"
style="opacity:1;fill:#ff9a56;fill-opacity:1;stroke:none;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
d="m 70.878361,76.931221 -19.956405,3.444235 2.973979,52.565784 c 6.825298,-0.37765 6.593169,-7.79515 16.982426,-56.010019 z" /></g><g
inkscape:groupmode="layer"
id="layer4"
inkscape:label="icecream"
style="display:inline"><path
id="path23"
style="display:inline;fill:#b55690;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 48.566545,3.5232991 C 47.608988,3.676761 45.70212,6.3705551 45.70212,7.2502034 41.010663,9.6941255 37.313485,15.47089 37.313485,15.47089 l -3.47059,3.226677 4.510319,9.178768 L 54.904659,7.9250976 C 52.826127,5.8978984 50.423286,4.1224036 48.744828,3.52795 48.690278,3.514312 48.630382,3.513068 48.566545,3.5232991 Z" /><path
id="path22"
style="display:inline;fill:#a30262;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 53.118013,6.3123303 38.095866,24.789185 27.202474,24.870315 24.286373,27.58126 c -1.541315,1.114365 -2.907946,2.075725 -4.132048,2.938839 l 43.081608,8.815482 7.553028,-2.620511 C 70.341668,29.739881 66.923634,31.641829 61.767806,28.09234 60.579728,26.456804 65.525628,19.732626 58.875476,13.20591 58.098215,11.155549 55.627394,8.3965908 53.118013,6.3123283 Z"
sodipodi:nodetypes="cccccccccc" /><path
id="path21"
style="display:inline;fill:#d162a4;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 37.498933,15.192224 c -0.04009,0.06061 -0.185448,0.278666 -0.185448,0.278666 l -11.827702,10.995712 1.688786,4.379577 -5.981032,-1.05898 c -7.728675,5.455246 -10.105154,6.951177 -10.688235,13.588965 l 28.385864,3.091801 10.032463,-3.063379 -1.917713,-8.933305 -2.431893,-0.374137 z"
sodipodi:nodetypes="ccccccccccc" /><path
id="path20"
style="display:inline;fill:#b55690;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 59.490892,13.846204 -4.884406,0.933772 -10.196277,25.116814 -13.03538,1.881022 -9.134843,1.954402 -11.602337,-1.551647 c -0.273667,1.830079 -0.321169,4.057525 -0.316315,7.003511 -0.08822,0.405821 -4.4379697,5.936757 -6.1985882,9.300207 l 67.6258462,-7.40885 0.09974,-8.318355 c -0.358917,-0.325866 -0.715117,-0.650094 -1.126547,-1.003556 0.179609,-2.653165 0.155464,-4.590108 -0.0282,-6.070071 l -8.860665,1.313255 2.90617,-7.272141 c -0.909661,-0.421805 -1.884293,-0.883896 -2.971282,-1.632225 -1.138728,-1.5676 3.403689,-7.857839 -2.134596,-14.086407 z"
sodipodi:nodetypes="ccccccccccccccccc" /><path
id="path19"
style="display:inline;fill:#a30262;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 23.035286,31.547945 -4.866888,0.377194 c -4.138484,2.973958 -6.196051,4.835121 -7.106206,8.13777 L 22.684403,54.747046 5.0094344,56.941775 c -0.4573505,0.740799 -0.8556463,1.43289 -1.1414534,2.035504 l 3.8493774,4.118611 37.4178706,2.128036 28.507304,2.759521 0.65009,-2.650484 c -0.30341,-1.243849 -0.721898,-2.624371 -1.30483,-4.191475 1.733222,-6.597429 3.802994,-9.483708 3.207556,-12.434384 l -35.620565,4.355807 z"
sodipodi:nodetypes="cccccccccccccc" /><path
id="path18"
style="display:inline;fill:#d162a4;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 65.003784,41.175781 46.565633,65.24408 45.099056,65.168632 7.4367554,63.048865 21.936129,74.367554 39.288558,76.145223 63.925814,56.067895 76.298702,50.065161 c 0.122074,-2.438919 -1.194915,-4.547028 -5.576921,-8.311637 0.01202,-0.177512 0.02074,-0.312905 0.03106,-0.484299 z"
sodipodi:nodetypes="ccccccccccc" /><path
id="path17"
style="display:inline;fill:#b55690;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 76.298702,50.065161 29.023035,72.781604 4.3452825,58.058485 c -0.5521421,0.989853 -0.9502233,1.851937 -0.9847641,2.384854 0.1309249,1.723838 2.6183946,5.062424 2.5311116,5.411556 -0.4364145,0.872829 -2.0949613,7.920865 -1.418518,8.422742 4.4732495,4.145938 8.30743,2.821415 8.292,5.405871 -0.0444,2.699866 -5.7280554,5.62209 -3.5284665,7.886857 L 42.647526,84.121997 61.379199,72.735095 74.547904,66.494132 c -0.300116,-1.524918 -0.788455,-3.278191 -1.560111,-5.352644 1.467972,-5.587766 3.179701,-8.51904 3.310909,-11.076327 z"
sodipodi:nodetypes="ccccccccccccc" /><path
id="path16"
style="display:inline;fill:#d162a4;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 74.538086,66.445557 -10.181291,4.792989 -10.503235,6.479707 5.672006,5.517493 c 6.493037,-2.731431 9.319025,-5.994183 9.837125,-5.846155 2.880338,5.106052 -5.467805,9.864436 -0.841809,11.522811 1.876583,0.480057 2.660136,-1.132284 5.179012,-12.558406 0.640769,-2.327003 1.862135,-4.75982 0.838192,-9.908439 z" /><path
id="path15"
style="display:inline;fill:#a30262;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 63.940283,56.102002 -8.856824,0.956531 -12.250931,24.224361 -32.38407,2.170927 c -1.8278499,2.093028 -3.3221982,4.078946 1.689302,5.555733 0.987387,2.651216 1.465275,8.224707 4.078304,10.324951 l -1.229899,-5.890596 c -0.229116,-1.603823 0.325578,-2.461779 0.129191,-2.816366 -0.08728,-0.201842 -0.183763,-1.642563 0.84181,-2.362646 0,0 7.733411,1.982644 21.458638,-1.465027 16.556176,0.536104 25.360933,-4.739781 29.332576,-7.61659 l -5.986714,0.526066 8.270296,-17.065108 z" /></g></svg>

After

Width:  |  Height:  |  Size: 8.8 KiB

57
src/lib/assets/petal.svg Normal file
View file

@ -0,0 +1,57 @@
<?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"
xml:space="preserve"
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
sodipodi:docname="petal.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="0.72252765"
inkscape:cx="231.82504"
inkscape:cy="226.28892"
inkscape:window-width="1482"
inkscape:window-height="988"
inkscape:window-x="30"
inkscape:window-y="26"
inkscape:window-maximized="0"
inkscape:current-layer="svg1" /><defs
id="defs1" /><g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"><g
inkscape:label="Layer 1"
id="layer1-9"
transform="translate(0.39145833,-0.50256824)" /><g
id="layer4"
inkscape:label="stamen_base"
transform="translate(0.39145833,-0.50256824)" /><g
id="layer3"
inkscape:label="stamen"
transform="translate(48.408293,-0.36524651)" /></g><g
id="g1"
transform="matrix(0.83206019,0.33412272,-0.33412272,0.83206019,38.961186,-9.777432)"><path
style="display:inline;opacity:1;fill:#ff6665;fill-opacity:1;stroke:none;stroke-width:1.70806px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 19.039792,124.95005 C 97.553068,126.5082 118.40125,97.230897 124.44237,72.62228 125.89647,66.698993 127.46153,60.966004 124.839,53.988905 120.13159,41.465054 110.15502,32.834282 106.92754,30.242053 103.89655,28.03009 99.255779,32.060252 96.459255,30.41665 94.206806,29.092826 93.317901,17.661166 89.384863,15.814783 71.972911,6.0185455 56.038876,10.210319 38.471929,23.876745 13.475765,43.322827 9.3107292,82.426994 19.039792,124.95005 Z"
id="path1-30"
sodipodi:nodetypes="csscscsc" /><path
style="fill:#ff9e9d;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 19.039792,124.95005 c 0,0 109.231808,-27.438225 87.887748,-94.707998 0,0 19.4742,15.213687 19.31236,32.206385 C 120.28436,135.20955 19.039792,124.95005 19.039792,124.95005 Z"
id="path1"
sodipodi:nodetypes="cccc" /></g></svg>

After

Width:  |  Height:  |  Size: 2.7 KiB

View file

@ -0,0 +1,16 @@
<script>
import flower from "$lib/assets/flower.svg";
import flowerGray from "$lib/assets/flower-gray.svg";
</script>
<div class="flex w-full justify-center gap-x-12 flex-nowrap">
<!--
NOTE: enhanced:img seems to break when trying to have more than one element, so we are
using the normal img element instead...
-->
<img src={flower} width="24" height="24" alt="flower" />
<img src={flowerGray} width="24" height="24" alt="flower" />
<img src={flower} width="24" height="24" alt="flower" />
<img src={flowerGray} width="24" height="24" alt="flower" />
<img src={flower} width="24" height="24" alt="flower" />
</div>

View file

@ -0,0 +1,9 @@
<script lang="ts">
import clsx from "clsx";
let props = $props();
</script>
<a {...props} class={clsx(props.class, "no-link-style flex gap-x-2 px-2 pr-4 py-1 rounded-full border-2 border-zinc-200 w-fit transform translate-y-0 transition-all hover:translate-y-[-2px] active:translate-y-[2px] active:bg-zinc-100")}>
{@render props.children?.()}
</a>

View file

@ -0,0 +1,12 @@
<script lang="ts">
import box from "$lib/assets/box.svg?raw";
let props = $props();
</script>
<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">{@render props.children?.()}</span>
</div>

View file

@ -17,37 +17,30 @@
html {
@apply h-full;
}
body {
@apply min-h-[100%] flex bg-zinc-50;
> div {
>div {
line-height: inherit;
> * {
>* {
/* The layout's root node */
flex: 1 1 0;
}
}
}
b {
@apply text-coral-700;
}
a:not(.no-link-style), button.link-style {
a:not(.no-link-style),
button.link-style {
@apply link-style-u;
}
h1:not(.no-heading-style) {
@apply text-4xl lg:text-5xl my-4;
}
h2:not(.no-heading-style) {
@apply text-teal-600 text-2xl font-semibold my-1;
}
@layer utilities {
.link-style-u {
@apply text-coral-700 hover:text-coral-800 active:text-coral-950 visited:text-teal-500 visited:hover:text-teal-700 active:text-teal-950 underline;
@apply text-teal-500 hover:text-teal-400 active:text-teal-600 underline;
}
.container {
/* container like the builtin one, but limited to lg */
/* lg diverges from the canonical lg size defined in tailwind.config */

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"

View file

@ -1,68 +1,158 @@
<script>
import Highlight from "$lib/Highlight.svelte";
import LinkChip from "$lib/components/LinkChip.svelte";
import PackageTile from "$lib/components/PackageTile.svelte";
import FlowerDivider from "$lib/components/FlowerDivider.svelte";
import leaf from "$lib/assets/leaf.svg";
import petal from "$lib/assets/petal.svg";
import nix from "svelte-highlight/languages/nix";
import demo1 from "./demo1/vm.nix?raw";
import forkGraph from "./fork.svg?raw";
</script>
<div class="flex flex-col gap-12">
<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">
<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>{PKGS}</b>'s <b>67589</b> packages
using the <a href="https://lix.systems">Lix</a> package manager.
full end-to-end&nbsp;customizability of <b class="text-teal-500">{PKGS_COUNT}</b> packages.
</p>
<div class="flex pt-4 gap-x-2">
<LinkChip
href="https://fleurixos.org"
target="_blank"
class="hover:border-teal-200"
>
<enhanced:img src="$lib/assets/leaf.svg" width="24" height="24" />
<span>FleurixOS</span>
</LinkChip>
<LinkChip
href="https://petalpkgs.org"
target="_blank"
class="hover:border-coral-200"
>
<enhanced:img src="$lib/assets/petal.svg" width="24" height="24" />
<span>Petalpkgs</span>
</LinkChip>
<LinkChip
href="https://lix.systems"
target="_blank"
class="hover:border-[#df92c0]"
>
<enhanced:img src="$lib/assets/lix.svg" width="12" height="24" />
<span>Lix</span>
</LinkChip>
</div>
</div>
<div>
<h2 class="border-t-2 border-teal-800 w-fit">
{DISTRO} — our linux distribution
<FlowerDivider />
<div class="">
<h2 class="w-fit text-4xl pb-4">
<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">
<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 class="grow"></div>
<div class="text-sm bg-blue-50 p-2 rounded-md drop-shadow mt-2">
</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,1fr] gap-4 mt-4 align-top place-items-start">
<div class="flex relative w-full">
<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."
/>
</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="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-700">http://</span><b>localhost</b>:80
<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>
<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.'"
class="w-full"
/>
</div>
</div>
</div>
<FlowerDivider />
<div>
<h2 class="border-t-2 border-teal-800 w-fit ms-auto">
a reimagining of the NixOS community
<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">{PKGS_COUNT}</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">
<PackageTile>LLVM</PackageTile>
<PackageTile>GCC</PackageTile>
<PackageTile>NodeJS</PackageTile>
<PackageTile>Rust</PackageTile>
<PackageTile>Firefox</PackageTile>
<PackageTile>Aseprite</PackageTile>
<PackageTile>Discord</PackageTile>
<PackageTile>KDE</PackageTile>
<PackageTile>Python</PackageTile>
<PackageTile>Inkscape</PackageTile>
<PackageTile>Pipewire</PackageTile>
<PackageTile>Kitty</PackageTile>
<PackageTile>Element</PackageTile>
<PackageTile>Blender</PackageTile>
<PackageTile>Ruby</PackageTile>
<PackageTile>Chromium</PackageTile>
<PackageTile>Steam</PackageTile>
<PackageTile>Thunderbird</PackageTile>
<PackageTile>VS Code</PackageTile>
<PackageTile>Vim</PackageTile>
<PackageTile>GNOME Desktop</PackageTile>
<PackageTile>Emacs</PackageTile>
<PackageTile>Lutris</PackageTile>
<PackageTile>Lix</PackageTile>
</div>
</div>
<FlowerDivider />
<div class="pb-60">
<h2 class="text-4xl w-fit pb-4">
Our <span class="font-aladin font-bold text-teal-500">vision</span> for <span class="font-aladin fontold text-coral-970">floral.systems</span>
</h2>
<div class="grid lg:grid-cols-[1.15fr,1fr] gap-12">
<div class="float-right drop-shadow flex flex-col rounded overflow-hidden">
<!-- 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>Floral</b> was created to oversee <b>{PKGS}</b> — our nixpkgs fork,
@ -75,15 +165,24 @@
</p>
<div class="lg:h-0 mt-4">
<enhanced:img src="./fork.svg" class="lg:w-[75%] max-w-[400px] mx-auto">
<enhanced:img src="./fork.svg" class="lg:w-[75%] max-w-[400px] mx-auto" alt="a visual representation of the progression from Nixpkgs to Petalpkgs, NixOS to FleurixOS, and CppNix to Lix">
</div>
</div>
<div class="drop-shadow flex flex-col rounded overflow-hidden">
<!-- 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>
</div>
<FlowerDivider />
<div>
<h2 class="border-t-2 border-teal-800 w-fit">
…and much more!
<h2 class="text-4xl w-fit pb-4">
And much <span class="text-teal-500">more</span>!
</h2>
<div class="grid lg:grid-cols-[1.15fr,1fr]">
<div class="clear-left text-xl">

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>*/
}