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

jakehamilton · 2024-10-26T21:15:49Z

jakehamilton commented

2024-10-26 21:15:49 +00:00

This one is a bit harder to show off in single screenshots, I recommend opening the site locally to see all of these changes on the page!

However, here are a few screenshots of the updated design/content for parts that I have changed:

Note that the "Our vision for floral.systems" bit hasn't really been worked on aside from some experimentation on the title itself.

This one is a bit harder to show off in single screenshots, I recommend opening the site locally to see all of these changes on the page! However, here are a few screenshots of the updated design/content for parts that I have changed: ![image](/attachments/5973e710-8dde-49ae-98d3-2d7b23a05b29) ![image](/attachments/6d119e36-5201-4125-966e-e52b3c5b37c4) Note that the "Our vision for floral.systems" bit hasn't really been worked on aside from some experimentation on the title itself.

image.png

189 KiB

image.png

267 KiB

jakehamilton added 1 commit 2024-10-26 21:15:53 +00:00

feat(root page): prettify and add new home page content 920862b82f

jakehamilton added 1 commit 2024-10-26 21:41:17 +00:00

refactor(root page): make fleurixos example side-by-side aaaa251282

ckie requested changes 2024-10-26 22:14:47 +00:00

src/routes/+layout.svelte

					
				@ -10,2 +10,3 @@

					globalThis.PKGS = "petalpkgs";

					globalThis.PKGS = "Petalpkgs";

					globalThis.DISTRO = "FleurixOS";

					globalThis.PKGS_COUNT = "67,589";

ckie commented

2024-10-26 21:58:50 +00:00

Let's avoiding adding more things to the global scope and start removing all of these defs soon. They were a hack for the name, and at this point an actual $lib/consts.ts is warranted if we decide we really need this, which I think we don't.

Let's avoiding adding more things to the global scope and start removing all of these defs soon. They were a hack for the name, and at this point an actual `$lib/consts.ts` is warranted if we decide we really need this, which I think we don't.

src/routes/+layout.svelte

					
				@ -17,3 +18,3 @@

				    <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">

ckie commented

2024-10-26 21:59:08 +00:00

Nice catch!

src/routes/+page.svelte

					
				@ -62,4 +78,3 @@

									/>

								</div>

							</div>

							<div class="text-4xl flex justify-center items-center h-full">

ckie commented

2024-10-26 21:59:58 +00:00

Maybe an arrow, ref: https://matrix.to/#/!jElecDkufeieslnxJz:matrix.org/$bHWQyEFUpU_emyv9oQtfaG44Jvc7Pdm6fP4fsuzEz3o?via=lix.systems&via=matrix.org&via=ckie.dev

src/routes/+page.svelte

					
				@ -59,0 +64,4 @@

								target="_blank"

								class="hover:border-teal-200"

							>

								<!-- NOTE: enhanced:img breaks when creating multiple elements with the same src -->

ckie commented

2024-10-26 22:07:48 +00:00

huhh. that's pretty absurd of it. you could workaround with {#each} and a {#snippet}

{#snippet flower()}
  <enhanced:img …/>
{/snippet}

{#each range(1, 5) as i}
  {@render flower()}
{/each}

huhh. that's pretty absurd of it. you could workaround with {#each} and a {#snippet} ```svelte {#snippet flower()} <enhanced:img …/> {/snippet} {#each range(1, 5) as i} {@render flower()} {/each} ```

ckie commented

2024-10-26 22:30:03 +00:00

doing for you in #5, #6 for the flower one

src/routes/+page.svelte

					
				@ -85,0 +119,4 @@

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

ckie commented

2024-10-26 21:57:44 +00:00

Nit/general: I find it unlikely we'll have PackageTiles on many pages, so a {#snippet} would be more appropriate to not pollute the $lib/components scope, which should be when you're expecting usage from multiple components.

Nit/general: I find it unlikely we'll have `PackageTile`s on many pages, so a [`{#snippet}`](https://svelte.dev/docs/svelte/snippet) would be more appropriate to not pollute the `$lib/components` scope, which should be when you're expecting usage from multiple components.

src/routes/+page.svelte

					
				@ -85,0 +120,4 @@

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

ckie commented

2024-10-26 22:10:12 +00:00

But we'll want to take this vague idea into docs for some featured usecases we write about, a bit like the "Learn by example." bit on bun's website. But probably more colorful.

But we'll want to take this vague idea into docs for some featured usecases we write about, a bit like the "Learn by example." bit on [bun's website](https://bun.sh/). But probably more colorful.

src/routes/+page.svelte

					
				@ -85,3 +151,3 @@

					<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 <span class="font-aladin font-bold text-teal-500">vision</span> for <span class="font-aladin fontold text-coral-970">floral.systems</span>

ckie commented

2024-10-26 22:13:46 +00:00

the font-aladin & text-coral-970 here foul skimmers.

a different off-black hue looks bad / inconsistent / out of the text flow.
aladin should be used very sparingly as its our ~'brand font'~

the `font-aladin` & `text-coral-970` here foul skimmers. - a different off-black hue looks bad / inconsistent / out of the text flow. - aladin should be used very sparingly as its our ~'brand font'~

src/routes/demo1/vm.nix

					
				@ -9,3 +9,3 @@

				  };

				  networking.firewall.allowedTCPPorts = [ 80 ];#<hidden>

				  networking.firewall.allowedTCPPorts = [ 80 ];/*<hidden>*/

ckie commented

2024-10-26 22:14:36 +00:00

I don't mind this but, I'm curious what your reasoning is?

This pull request has changes conflicting with the target branch.

src/lib/components/FlowerDivider.svelte
src/routes/+page.svelte

View command line instructions

Checkout

From your project repository, check out a new branch and test the changes.

git fetch -u origin jakehamilton/feat/home-content:jakehamilton/feat/home-content

git checkout jakehamilton/feat/home-content