Merge pull request 'mars rover and embryo pick and plate content' (#19) from website-content-updates into main

Reviewed-on: #19

.gitea/workflows/build-production.yaml

@@ -57,12 +57,16 @@ jobs:
       - name: Login to Docker Registry
         uses: docker/login-action@v3
         with:
-          registry: gitea.perren.cloud
+          registry: 192.168.1.36:30008
           username: ${{ secrets.REGISTRY_USERNAME }}
           password: ${{ secrets.ACTIONS_TOKEN }}
 
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
+        with:
+          buildkitd-config-inline: |
+            [registry."192.168.1.36:30008"]
+              http = true
 
       - name: Build and Push
         uses: docker/build-push-action@v6
@@ -70,8 +74,8 @@ jobs:
           context: caperren-com
           push: true
           tags: |
-            gitea.perren.cloud/caperren/${{ needs.test.outputs.repo_name }}:${{ needs.test.outputs.repo_version_hash }}
-            gitea.perren.cloud/caperren/caperren-com:latest
+            192.168.1.36:30008/caperren/${{ needs.test.outputs.repo_name }}:${{ needs.test.outputs.repo_version_hash }}
+            192.168.1.36:30008/caperren/caperren-com:latest
           build-args: |
             REPO_VERSION_HASH=${{ needs.test.outputs.repo_version_hash }}
             BUILD_ENVIRONMENT=production

.gitea/workflows/build-staging.yaml

@@ -57,12 +57,16 @@ jobs:
       - name: Login to Docker Registry
         uses: docker/login-action@v3
         with:
-          registry: gitea.perren.cloud
+          registry: 192.168.1.36:30008
           username: ${{ secrets.REGISTRY_USERNAME }}
           password: ${{ secrets.ACTIONS_TOKEN }}
 
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
+        with:
+          buildkitd-config-inline: |
+            [registry."192.168.1.36:30008"]
+              http = true
 
       - name: Build and Push
         uses: docker/build-push-action@v6
@@ -70,7 +74,7 @@ jobs:
           context: caperren-com
           push: true
           tags: |
-            gitea.perren.cloud/caperren/caperren-com:latest-staging
+            192.168.1.36:30008/caperren/caperren-com:latest-staging
           build-args: |
             REPO_VERSION_HASH=${{ needs.test.outputs.repo_version_hash }}
             BUILD_ENVIRONMENT=staging

Makefile

@@ -15,7 +15,8 @@
 	cleanup-check \
 	cleanup-code \
 	convert_video \
-	convert_video_times
+	convert_video_times \
+	generate_asset_imports
 
 default: dev
 
@@ -83,9 +84,17 @@ convert_video_times:
 		-init_hw_device vaapi=va:/dev/dri/renderD128 \
 		-filter_hw_device va \
 		-i $(input) \
-		-vf 'format=nv12,hwupload,scale_vaapi=-2:720,trim=start=$(start):end=$(end)' \
+		-ss $(start) \
+		-to $(end) \
+		-vf 'format=nv12,hwupload,scale_vaapi=-2:720' \
 		-c:v h264_vaapi \
 		-rc_mode CQP \
 		-qp 28 \
 		-an \
 		$(output)
+
+generate_asset_imports:
+	@for assets_path in `find "src/assets/${assets_relative_path}" -maxdepth 1 -type f -printf "%f\n"`; do	\
+			without_extension=$${assets_path/%.*};																															\
+		  echo "import $${without_extension//-/_} from \"@assets/${assets_relative_path}/$$assets_path\";";		\
+	done;

project-words.txt

@@ -3,7 +3,10 @@ Altium
 ASSEM
 astrojs
 Atmel
+automations
 barebones
+beaglebone
+Bitwarden
 Candian
 caperren
 CEOAS
@@ -12,10 +15,19 @@ Concours
 CONSERV
 Corwin
 dangerousthings
+dechorionation
 Dechorionator
+dechorionators
+dockerization
+dockerizing
+drumheller
 ebox
+ELMI
 fhhs
 flowbite
+flowrate
+gcode
+gerbers
 Gitea
 HDFS
 headshot
@@ -25,36 +37,60 @@ iceops
 ITAR
 Jetson
 KFSK
+Labjack
 leconte
 Loctite
 luxon
 MGMT
+microcontroller
+microcontroller's
+Micropumps
+Millis
+modbus
 Mokai
 Multimeters
 nixos
+nvme
 offroad
 Onshape
 OSSM
 OSURC
+panelized
+Passthroughs
+pcbs
 Perren
 Perren's
 Pixhawk
+Protocase
 pubpath
 RFID
+Rito
 RSSI
 SARL
+SCARA
+showerheads
 Shuttlebox
+simplemotion
 sinnhuber
 sitemapindex
+Smartsheet
+solderable
 ssds
 Starlink
 steller
 Steller
+Tanguay
+Teamcenter
 timelapse
+touchoff
+triaging
 trivago
+Truong
+Ubiquiti
 Unstow
 uuidv
 vaapi
 vitest
+Waterjet
 Zebrafish
 zscan

src/components/H4.astro

@@ -0,0 +1,5 @@
+---
+
+---
+
+<h4 class="md:text-md text-xs sm:text-sm"><slot /></h4>

src/components/Media/CustomCarousel/CustomCarousel.astro

@@ -1,15 +1,21 @@
 ---
 import { Image } from "astro:assets";
 
+import type { ComponentPropsBase } from "@interfaces/components.ts";
 import type { carouselGroup } from "@interfaces/image-carousel.ts";
 
-const groupToShow: carouselGroup = Astro.props.carouselGroup;
+interface Props extends ComponentPropsBase {
+  carouselGroup: carouselGroup;
+  showBorder?: boolean;
+}
+
+const { class: className, carouselGroup, showBorder = true } = Astro.props;
 ---
 
 <custom-carousel
   class="relative flex w-full flex-col"
-  data-custom-carousel={groupToShow.animation}
-  data-custom-carousel-interval={groupToShow.interval}
+  data-custom-carousel={carouselGroup.animation ?? "slide"}
+  data-custom-carousel-interval={carouselGroup.interval}
 >
   <!-- Modal for fullscreen viewing -->
   <div
@@ -57,11 +63,18 @@ const groupToShow: carouselGroup = Astro.props.carouselGroup;
   </div>
 
   <!-- Carousel wrapper -->
-  <div class="relative h-56 w-full overflow-hidden md:h-120">
-    {
-      groupToShow.images.map((image, index) => (
   <div
-          class="hidden duration-1500 ease-in-out"
+    class:list={[
+      "relative h-56 w-full overflow-hidden rounded-lg md:h-120",
+      showBorder ? "border" : false,
+      className ? className : "border-caperren-green-dark",
+    ]}
+  >
+    {
+      carouselGroup.images &&
+        carouselGroup.images.map((image, index) => (
+          <div
+            class="hidden bg-black duration-1500 ease-in-out"
             data-custom-carousel-item={index}
           >
             <Image
@@ -78,13 +91,14 @@ const groupToShow: carouselGroup = Astro.props.carouselGroup;
 
   <!-- Slider indicators -->
   {
-    groupToShow.images.length > 1 && (
+    carouselGroup.images && carouselGroup.images.length > 1 && (
       <div>
         <div class="absolute bottom-2 left-1/2 z-30 flex -translate-x-1/2 space-x-3 rounded-full">
-          {groupToShow.images.map((_, index) => (
+          {carouselGroup.images &&
+            carouselGroup.images.map((_, index) => (
               <button
                 type="button"
-              class="hover:bg-caperren-green-light h-3 w-3 rounded-full bg-black"
+                class="hover:bg-caperren-green-light h-3 w-3 rounded-full"
                 aria-current={index ? "false" : "true"}
                 aria-label={index.toString()}
                 data-custom-carousel-slide-to={index}
@@ -96,15 +110,16 @@ const groupToShow: carouselGroup = Astro.props.carouselGroup;
           class="group absolute start-0 top-0 z-30 flex h-full cursor-pointer items-center justify-center px-4 focus:outline-none"
           data-custom-carousel-prev
         >
-          <span class="ring-caperren-green/25 inline-flex h-10 w-10 items-center justify-center rounded-full bg-black/25 ring-2 group-hover:bg-black/75">
+          <span class="ring-caperren-green/35 group-hover:ring-caperren-green inline-flex h-10 w-10 items-center justify-center rounded-full bg-black/35 ring-2 group-hover:bg-black/75">
             <svg
-              class="text-caperren-green group-hover:text-caperren-green-light h-4 w-4"
+              class="text-caperren-green stroke-caperren-green group-hover:text-caperren-green-light h-4 w-4"
               aria-hidden="true"
               xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 6 10"
+              viewBox="0 0 8 10"
             >
               <path
                 stroke="currentColor"
+                fill-opacity="0%"
                 stroke-linecap="round"
                 stroke-linejoin="round"
                 stroke-width="2"
@@ -119,15 +134,16 @@ const groupToShow: carouselGroup = Astro.props.carouselGroup;
           class="group absolute end-0 top-0 z-30 flex h-full cursor-pointer items-center justify-center px-4 focus:outline-none"
           data-custom-carousel-next
         >
-          <span class="ring-caperren-green/25 inline-flex h-10 w-10 items-center justify-center rounded-full bg-black/25 ring-2 group-hover:bg-black/75">
+          <span class="ring-caperren-green/25 group-hover:ring-caperren-green inline-flex h-10 w-10 items-center justify-center rounded-full bg-black/25 ring-2 group-hover:bg-black/75">
             <svg
-              class="text-caperren-green group-hover:text-caperren-green-light h-4 w-4"
+              class="text-caperren-green stroke-caperren-green group-hover:text-caperren-green-light h-4 w-4"
               aria-hidden="true"
               xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 6 10"
+              viewBox="0 0 4 10"
             >
               <path
                 stroke="currentColor"
+                fill-opacity="0%"
                 stroke-linecap="round"
                 stroke-linejoin="round"
                 stroke-width="2"

src/components/Media/Video.astro

@@ -22,7 +22,7 @@ const {
 
 <div class="mx-auto my-auto">
   <video
-    class="h-auto w-full"
+    class="border-caperren-green-dark h-auto w-full rounded-lg border"
     controls={controls}
     autoplay={autoPlay}
     loop={loop}

src/components/Media/YtVideo.astro

@@ -1,13 +1,26 @@
 ---
 import type { videoConfig } from "@interfaces/video.ts";
 
-const config: videoConfig = Astro.props.videoConfig;
+interface Props extends videoConfig {}
+
+const {
+  videoPath,
+  videoTitle,
+  width = "1920",
+  height = "1080",
+  autoPlay = false,
+} = Astro.props;
+
+const aspect = `${width} / ${height}`;
 ---
 
-<iframe
-  class="h-128 w-full max-w-1/2"
-  src={config.videoPath}
-  title={config.videoTitle ?? ""}
-  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+<div class="mx-auto my-auto w-full" style={`aspect-ratio: ${aspect};`}>
+  <iframe
+    src={videoPath}
+    title={videoTitle}
+    class="border-caperren-green-dark h-full w-full rounded-lg border"
+    allow={"accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; " +
+      (autoPlay ? "autoplay;" : "")}
     referrerpolicy="strict-origin-when-cross-origin"
     allowfullscreen></iframe>
+</div>

src/components/NestedNavbarEntries.astro

@@ -36,7 +36,8 @@ const { pathname } = Astro.url;
                   data-dropdown-offset-skidding="12"
                   class:list={[
                     "hover:text-caperren-green-light lg:hover:text-caperren-green-light flex w-full items-center justify-between lg:p-0 lg:hover:bg-transparent",
-                    pathname.startsWith(getHrefPath(paths, entry))
+                    pathname.startsWith(getHrefPath(paths, entry)) &&
+                    !(entry.placeholderEntry ?? false)
                       ? "border-caperren-green border-b-2"
                       : false,
                   ]}
@@ -71,20 +72,32 @@ const { pathname } = Astro.url;
             ) : (
               <div>
                 <a
-                  href={getHrefPath(paths, entry)}
+                  href={
+                    !(entry.placeholderEntry ?? false)
+                      ? getHrefPath(paths, entry)
+                      : undefined
+                  }
                   target={
                     getHrefPath(paths, entry).startsWith("/") ? "" : "_blank"
                   }
                   class:list={[
-                    "hover:text-caperren-green-light ring-caperren-green-dark block bg-transparent lg:p-0",
+                    "ring-caperren-green-dark block bg-transparent lg:p-0",
                     pathname === getHrefPath(paths, entry)
                       ? "border-caperren-green border-b-2"
                       : false,
+                    entry.isSubItem ? "ms-3" : false,
+                    entry.placeholderEntry
+                      ? false
+                      : "hover:text-caperren-green-light",
                   ]}
                   aria-current={
-                    pathname === getHrefPath(paths, entry) ? "page" : undefined
+                    pathname === getHrefPath(paths, entry) &&
+                    !(entry.placeholderEntry ?? false)
+                      ? "page"
+                      : undefined
                   }
                 >
+                  {entry.isSubItem && "∟ "}
                   {entry.navText}
                 </a>
               </div>

src/components/PageGroup.astro

@@ -3,7 +3,7 @@ const hasHeader = Astro.slots.has("header");
 const hasDefault = Astro.slots.has("default");
 ---
 
-<div class="grid grid-cols-1 gap-3">
+<div class="grid grid-cols-1 gap-0.5">
   {
     Astro.slots.has("header") && (
       <div>

src/components/PopoverWordDefinition.astro

@@ -11,6 +11,7 @@ const keys: { [key: string]: string } = {
   GUI: "Graphical user interface",
   NUC: "A small and low-power computer made by Intel",
   PCBs: "Printed circuit boards",
+  SCARA: "Selective Compliance Assembly Robot Arm",
   TDD: "Test driven development",
   UPS: "Uninterruptible power supply",
   VISA: "Virtual instrument software architecture",

src/components/PrintedCircuitBoard.astro

@@ -0,0 +1,58 @@
+---
+import Carousel from "@components/Media/CustomCarousel/CustomCarousel.astro";
+import Ul from "@components/Ul.astro";
+
+import H3 from "@components/H3.astro";
+import H4 from "@components/H4.astro";
+import PageGroup from "@components/PageGroup.astro";
+import type {
+  printedCircuitBoard,
+  printedCircuitBoardRevision,
+} from "@interfaces/printed-circuit-board.ts";
+
+interface Props {
+  pcb: printedCircuitBoard;
+}
+
+const { pcb } = Astro.props;
+const semanticPcbRevisionSort = (
+  a: printedCircuitBoardRevision,
+  b: printedCircuitBoardRevision,
+): number =>
+  -((a.major - b.major) * 100 + (a.minor - b.minor) * 10 + (a.patch - b.patch));
+---
+
+<PageGroup>
+  <Fragment slot="header"
+    ><H3>{pcb.name}</H3><H4>{pcb.description}</H4></Fragment
+  >
+  <div class="mt-1 grid grid-cols-1 gap-4 md:grid-cols-2">
+    {
+      pcb.revisions?.sort(semanticPcbRevisionSort).map((revision) => (
+        <div class="border-caperren-green block space-y-2 rounded-lg border bg-black py-2">
+          <div class="border-caperren-green flex flex-wrap items-center justify-between rounded-none border-b px-4 pb-2">
+            <div>
+              <span class="font-black">Revision:</span>
+              <span>
+                {revision.major}.{revision.minor}.{revision.patch}
+              </span>
+            </div>
+            <div class="text-sm italic">{revision.date.toISODate()}</div>
+          </div>
+          <div class="px-4">
+            <Carousel
+              class=""
+              carouselGroup={{ images: revision.images }}
+              showBorder={false}
+            />
+          </div>
+          {revision.notes && revision.notes.length > 0 && (
+            <div class="border-caperren-green border-t px-4 pt-4 pb-2 text-sm">
+              <Ul lineItems={revision.notes} />
+            </div>
+          )}
+        </div>
+      ))
+    }
+  </div>
+</PageGroup>

src/components/Timeline/Timeline.astro

@@ -1,7 +1,11 @@
 ---
 import type { timelineEntry } from "@interfaces/timeline.ts";
 
-const timeline: timelineEntry[] = Astro.props.timeline || [];
+interface Props {
+  timeline: timelineEntry[];
+}
+
+const { timeline = [] } = Astro.props;
 ---
 
 <custom-timeline>
@@ -11,7 +15,11 @@ const timeline: timelineEntry[] = Astro.props.timeline || [];
       data-timeline
     >
       {
-        timeline.map((entry, index) => (
+        timeline
+          .sort((a: timelineEntry, b: timelineEntry) =>
+            a.date.diff(b.date).toMillis(),
+          )
+          .map((entry, index) => (
             <div
               class="border-caperren-green min-w-s max-w-s rounded-lg border bg-black px-2 pt-1 pb-2"
               data-timeline-node-index={index}
@@ -19,7 +27,7 @@ const timeline: timelineEntry[] = Astro.props.timeline || [];
               <h3 class="text-lg font-bold">{entry.event}</h3>
               <h4 class="leading-none font-semibold">{entry.eventDetail}</h4>
               <time class="mt-1 mb-2 text-sm leading-none italic">
-              {entry.date}
+                {entry.date.toFormat("LLLL kkkk")}
               </time>
               {entry.description && (
                 <p class="text-sm font-normal">{entry.description}</p>

src/data/site-layout.ts

@@ -1,7 +1,6 @@
 import type { navLink } from "@interfaces/site-layout.ts";
 
 export const siteLayout: navLink[] = [
-  // Standard navbar entries
   { navText: "About", path: "" },
   { navText: "Education", path: "education" },
   {
@@ -13,7 +12,6 @@ export const siteLayout: navLink[] = [
         path: "spacex",
         children: [
           {
-            enabled: false,
             navText: "Hardware Test Engineer I/II",
             path: "hardware-test-engineer-i-ii",
           },
@@ -27,60 +25,65 @@ export const siteLayout: navLink[] = [
         navText: "OSU CEOAS Ocean Mixing Group",
         path: "osu-ceoas-ocean-mixing-group",
         children: [
+          {
+            navText: "Student Software/Electrical Engineer",
+            placeholderEntry: true,
+          },
           {
             navText: "Robotic Oceanographic Surface Sampler",
+            isSubItem: true,
             path: "robotic-oceanographic-surface-sampler",
           },
           {
             navText: "LeConte Glacier Deployments",
+            isSubItem: true,
             path: "leconte-glacier-deployments",
           },
         ],
       },
       {
-        enabled: false,
-        navText: "OSU SARL",
+        navText: "OSU Sinnhuber Aquatic Research Lab",
         path: "osu-sinnhuber-aquatic-research-laboratory",
         children: [
           {
-            enabled: false,
-            navText: "Team Lead",
-            path: "team-lead",
+            navText: "Student Automation Engineer",
+            placeholderEntry: true,
           },
           {
-            enabled: false,
             navText: "Zebrafish Embryo Pick and Plate",
+            isSubItem: true,
             path: "zebrafish-embryo-pick-and-plate",
           },
           {
             enabled: false,
             navText: "Shuttlebox Behavior System",
+            isSubItem: true,
             path: "shuttlebox-behavior-system",
           },
           {
-            enabled: false,
             navText: "Dechorionator",
+            isSubItem: true,
             path: "dechorionator",
           },
           {
             enabled: false,
             navText: "Denso Embryo Pick and Plate",
+            isSubItem: true,
             path: "denso-embryo-pick-and-plate",
           },
           {
             enabled: false,
             navText: "ZScan Processor",
+            isSubItem: true,
             path: "zscan-processor",
           },
         ],
       },
       {
-        enabled: false,
         navText: "OSU Robotics Club",
         path: "osu-robotics-club",
         children: [
           {
-            enabled: false,
             navText: "Mars Rover Software Team Lead",
             path: "mars-rover-software-team-lead",
           },
@@ -263,7 +266,10 @@ export const getPaths = (
       ];
     } else {
       let enabled = currentEntry.enabled ?? true;
-      if (disabledOnly ? !enabled : enabled) {
+      if (
+        (disabledOnly ? !enabled : enabled) &&
+        !currentEntry.placeholderEntry
+      ) {
         foundPaths.push("/" + [...paths, currentEntry.path || ""].join("/"));
       }
     }

src/interfaces/image-carousel.ts

@@ -1,5 +1,5 @@
 export interface carouselGroup {
-  animation: "static" | "slide";
+  animation?: "static" | "slide";
   interval?: number;
-  images: ImageMetadata[];
+  images?: ImageMetadata[];
 }

src/interfaces/printed-circuit-board.ts

@@ -0,0 +1,32 @@
+import type { ImageMetadata } from "astro";
+import { DateTime } from "luxon";
+
+import type { timelineEntry } from "@interfaces/timeline.ts";
+import type { lineItem } from "@interfaces/ul-li.ts";
+
+export interface printedCircuitBoardRevision {
+  major: number;
+  minor: number;
+  patch: number;
+
+  date: DateTime;
+
+  images?: ImageMetadata[];
+  notes?: lineItem[];
+}
+
+export interface printedCircuitBoard {
+  name: string;
+  description: string;
+
+  revisions: printedCircuitBoardRevision[];
+}
+
+export const timelineFromPrintedCircuitBoard = (
+  pcb: printedCircuitBoard,
+): timelineEntry[] =>
+  pcb.revisions?.map((revision) => ({
+    event: `PCB Released: ${pcb.name} `,
+    eventDetail: `Revision: ${revision.major}.${revision.minor}.${revision.patch}`,
+    date: revision.date,
+  }));

src/interfaces/site-layout.ts

@@ -1,8 +1,13 @@
 export interface navLink {
   enabled?: boolean;
   hidden?: boolean;
+  placeholderEntry?: boolean;
+
   navText: string;
+  isSubItem?: boolean; // For visual distinction only
+
   path?: string;
   pubpath?: string;
+
   children?: navLink[];
 }