More showcase updates

README.md

@@ -67,6 +67,10 @@ Otherwise if you're looking to change how the generated keyboards look, the thre
 
 Rendering in Cosmos is split into two parts: geometrical calculations (which determines where parts go), and modeling operations (building the 3d model in OpenCascade). The files `geometry.ts` and `cachedGeometry.ts` perform those geometrical calculations (with the latter acting as a higher-level wrapper over functions in the former), and `model.ts` is responsible for all 3d modeling operations.
 
+### License
+
+All code is licensed under the [AGPL-3.0 license](https://github.com/rianadon/Cosmos-Keyboards/blob/main/LICENSE). All STEP models under the `src/assets` folder are licensed under the [CC0](https://creativecommons.org/public-domain/cc0/) License. All other assets and images are copyrighted and may not be reused without permission.
+
 ## Hand Scanning
 
 The code is at [`src/routes/scan`](https://github.com/rianadon/Cosmos-Keyboards/tree/main/src/routes/scan). Most of the processing happens in [`lib/hand.ts`](https://github.com/rianadon/Cosmos-Keyboards/tree/main/src/routes/scan/lib/hand.ts).

src/routes/+page.svelte

@@ -75,8 +75,8 @@
   </a>
 </section>
 <section class="mt-6 mb-24 px-8">
-  <div class="w-full carousel-container max-w-525 mx-auto overflow-hidden">
-    <div class="flex w-600 md:w-1050 carousel py-2">
+  <div class="w-full carousel-container max-w-612.6 mx-auto overflow-hidden">
+    <div class="flex w-700 md:w-1225 carousel py-2">
       {#each keyboards.concat(keyboards) as kbd}
         <a
           class="block bg-[#2e272d]/50 w-full rounded-2 overflow-hidden mx-2 transition-transform hover:scale-105 citem"

src/routes/showcase/+page.server.ts

@@ -0,0 +1 @@
+export const trailingSlash = 'always'

src/routes/showcase/[slug]/+page.server.ts

@@ -1,6 +1,16 @@
+import { KEY_NAMES } from '$lib/geometry/keycaps.js'
+import { PART_INFO } from '$lib/geometry/socketsParts.js'
+import { type CosmosKeyboard, fromCosmosConfig } from '$lib/worker/config.cosmos.js'
+import { sum } from '$lib/worker/util.js'
+import type { CuttleKey } from '$target/cosmosStructs.js'
 import { error } from '@sveltejs/kit'
+import { deserialize } from '../../beta/lib/serialize.js'
 import { keyboards } from '../showcase.js'
 
+function isTrulyKey(k: CuttleKey) {
+  return PART_INFO[k.type].keycap && k.type != 'blank'
+}
+
 export const load = ({ params }) => {
   const keyboard = keyboards.find(k => k.key == params.slug)
 
@@ -10,5 +20,27 @@ export const load = ({ params }) => {
     })
   }
 
-  return { keyboard }
+  const deserialized = keyboard.config ? deserialize(keyboard.config.substring(1), () => undefined as any).options as CosmosKeyboard : undefined
+  const cuttleConf = deserialized ? fromCosmosConfig(deserialized) : undefined
+
+  let name = ''
+  if (cuttleConf) {
+    if (keyboard.type == 'left') name += cuttleConf.left!.keys.filter(isTrulyKey).length + '-Key '
+    if (keyboard.type == 'right') name += cuttleConf.right!.keys.filter(isTrulyKey).length + '-Key '
+    else name += sum(Object.values(cuttleConf).map(c => c.keys.filter(isTrulyKey).length)) + '-Key '
+  }
+  name += {
+    split: 'Split Keyboard',
+    left: "Keyboard (yes, that's all!)",
+    right: "Keyboard (yes, that's all!)",
+    unibody: 'Unibody Keyboard',
+  }[keyboard.type]
+
+  const keycaps = deserialized ? KEY_NAMES[deserialized.profile] : undefined
+
+  return {
+    keyboard,
+    name,
+    keycaps,
+  }
 }

src/routes/showcase/[slug]/+page.svelte

@@ -2,10 +2,17 @@
   import { base } from '$app/paths'
   import Header from '$lib/Header.svelte'
   import Icon from '$lib/presentation/Icon.svelte'
-  import { mdiChevronRight } from '@mdi/js'
-  import type { keyboards } from '../showcase'
+  import {
+    mdiBookOpenVariantOutline,
+    mdiChevronRight,
+    mdiKeyboardOutline,
+    mdiPencilOutline,
+    mdiWrench,
+    mdiWrenchOutline,
+  } from '@mdi/js'
+  import type { PageData } from './$types'
 
-  export let data: { keyboard: (typeof keyboards)[number] }
+  export let data: PageData
   $: kbd = data.keyboard
 </script>
 
@@ -19,28 +26,43 @@
 
 <Header />
 
-<div class="mx-auto container max-w-[calc(190vh-21rem)]">
+<div class="mx-auto container max-w-[calc(190vh-22rem)]">
   <div class="w-full aspect-[1.9/1]">
     <img
       src={kbd.largeImage}
       alt="Image of {kbd.author}'s keyboard"
       class="w-full h-full object-cover"
     />
   </div>
-  <div class="flex mt-2 mx-2">
-    <div class="w-full">
-      <h1 class="uppercase text-xl sm:text-3xl text-[#68e4a9] font-medium">
+  <div class="sm:flex mt-2 mx-2 gap-4 md:gap-12 justify-center mx-8">
+    <div class="w-full mb-2 mt-3 max-w-prose">
+      <h1 class="uppercase text-2xl sm:text-3xl text-[#68e4a9] font-medium">
         {kbd.name}
       </h1>
       <div class="flex gap-4 mx-0.5 my-2 items-center">
         <img src={kbd.authorImage} alt="Profile icon for {kbd.author}" class="h-6 w-6 rounded-full" />
         {kbd.author}
       </div>
+      {#if kbd.projectLink}
+        <div class="mt-2 mb-4 flex mx-0.5 items-center gap-4">
+          <div class="w-6 flex justify-center opacity-80"><Icon path={mdiBookOpenVariantOutline} /></div>
+          <a class="text-brand-green hover:underline" href={kbd.projectLink}>{kbd.projectLink}</a>
+        </div>
+      {/if}
       {#if kbd.details}
-        <p class="mt-2 mb-4">{kbd.details}</p>
+        <p class="mt-2 mb-4 showcasedetails">{@html kbd.details}</p>
       {/if}
+      <div class="opacity-80 grid grid-cols-[4.8rem_1fr] line-height-tight gap-row-1 mt-4">
+        {#if kbd.resin}
+          <span>Resin:</span> <span>{kbd.resin || 'Unknown'}</span>
+        {:else}
+          <span>Filament:</span> <span>{kbd.filament || 'Unknown'}</span>
+        {/if}
+        <span>Switches:</span> <span>{kbd.switches || 'Unknown'}</span>
+        <span>Keycaps:</span> <span>{kbd.keycaps || 'Unknown'}</span>
+      </div>
     </div>
-    <div class="flex-none">
+    <div class="flex-none opacity-80 mb-4 <sm:mt-10">
       {#if kbd.config}
         <a
           href="{base}/beta{kbd.config}"
@@ -50,9 +72,30 @@
           <Icon path={mdiChevronRight} size="100%" class="w-[28px] sm:w-[32px]" />
         </a>
       {/if}
+      <div class="flex items-center gap-2 mb-1">
+        <Icon path={mdiKeyboardOutline} size="16" />{data.name}
+      </div>
+      {#if kbd.modifiedInCAD}
+        <div class="flex items-center gap-2 mb-1">
+          <Icon path={mdiWrenchOutline} size="16" />Modified In CAD
+        </div>
+      {/if}
+      <a
+        href="https://github.com/rianadon/Cosmos-Keyboards/blob/v3/src/routes/showcase/showcase.ts"
+        class="flex items-center gap-2 mb-1 mt-4 opacity-50"
+      >
+        <Icon path={mdiPencilOutline} size="16" />Edit this Page
+      </a>
     </div>
   </div>
 </div>
 
 <style>
+  :global(.showcasedetails p) {
+    --at-apply: 'mb-2';
+  }
+
+  :global(.showcasedetails a) {
+    --at-apply: 'hover:underline text-brand-green';
+  }
 </style>