Merge pull request 'Fix trailing slashes breaking pathname in prod, keep flex for main page div so footer sits properly, misspelling fix' (#14) from website-content-updates into main

Reviewed-on: #14

.gitea/workflows/build-production.yaml

@@ -57,16 +57,12 @@ jobs:
       - name: Login to Docker Registry
         uses: docker/login-action@v3
         with:
-          registry: 192.168.1.36:30008
+          registry: gitea.perren.cloud
           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
@@ -74,8 +70,8 @@ jobs:
           context: caperren-com
           push: true
           tags: |
-            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
+            gitea.perren.cloud/caperren/${{ needs.test.outputs.repo_name }}:${{ needs.test.outputs.repo_version_hash }}
+            gitea.perren.cloud/caperren/caperren-com:latest
           build-args: |
             REPO_VERSION_HASH=${{ needs.test.outputs.repo_version_hash }}
             BUILD_ENVIRONMENT=production

.gitea/workflows/build-staging.yaml

@@ -57,16 +57,12 @@ jobs:
       - name: Login to Docker Registry
         uses: docker/login-action@v3
         with:
-          registry: 192.168.1.36:30008
+          registry: gitea.perren.cloud
           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
@@ -74,7 +70,7 @@ jobs:
           context: caperren-com
           push: true
           tags: |
-            192.168.1.36:30008/caperren/caperren-com:latest-staging
+            gitea.perren.cloud/caperren/caperren-com:latest-staging
           build-args: |
             REPO_VERSION_HASH=${{ needs.test.outputs.repo_version_hash }}
             BUILD_ENVIRONMENT=staging

Makefile

@@ -15,8 +15,7 @@
 	cleanup-check \
 	cleanup-code \
 	convert_video \
-	convert_video_times \
-	generate_asset_imports
+	convert_video_times
 
 default: dev
 
@@ -84,17 +83,9 @@ convert_video_times:
 		-init_hw_device vaapi=va:/dev/dri/renderD128 \
 		-filter_hw_device va \
 		-i $(input) \
-		-ss $(start) \
-		-to $(end) \
-		-vf 'format=nv12,hwupload,scale_vaapi=-2:720' \
+		-vf 'format=nv12,hwupload,scale_vaapi=-2:720,trim=start=$(start):end=$(end)' \
 		-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,10 +3,7 @@ Altium
 ASSEM
 astrojs
 Atmel
-automations
 barebones
-beaglebone
-Bitwarden
 Candian
 caperren
 CEOAS
@@ -15,20 +12,10 @@ Concours
 CONSERV
 Corwin
 dangerousthings
-dechorionation
 Dechorionator
-dechorionators
-dockerization
-dockerizing
-drumheller
 ebox
-ELMI
 fhhs
 flowbite
-flowrate
-gcode
-gerbers
-Gitea
 HDFS
 headshot
 Homelab
@@ -37,60 +24,36 @@ 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/Footer.astro

@@ -1,23 +1,10 @@
 ---
-import InlineLink from "@components/InlineLink.astro";
 
-const { pathname } = Astro.url;
 ---
 
 <footer
   class="border-t-caperren-green-dark text-caperren-green-dark z-50 flex w-full max-w-full items-center justify-between border-t bg-black px-6 py-2 text-sm"
 >
   <span>{import.meta.env.PUBLIC_BUILD_ENVIRONMENT || "development"}</span>
-  <div>
-    <InlineLink
-      class:list={[
-        "text-caperren-green-dark hover:text-caperren-green",
-        pathname === "/hobby/this-website"
-          ? "border-caperren-green-dark hover:border-caperren-green border-b-2"
-          : false,
-      ]}
-      href="/hobby/this-website">About This Website</InlineLink
-    >
-  </div>
   <span>{import.meta.env.PUBLIC_REPO_VERSION_HASH || "invalid"}</span>
 </footer>

src/components/H4.astro

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

src/components/InlineLink.astro

@@ -7,10 +7,16 @@ interface Props extends ComponentPropsBase {
 }
 
 const { class: className, href, target } = Astro.props;
-const { pathname } = Astro.url;
 
-const finalTarget =
-  target === undefined ? (href.startsWith("/") ? undefined : "_blank") : target;
+let finalTarget: string | undefined = target;
+
+if (target === undefined) {
+  if (href.startsWith("/")) {
+    finalTarget = "";
+  } else {
+    finalTarget = "_blank";
+  }
+}
 ---
 
 <>
@@ -18,7 +24,6 @@ const finalTarget =
     class:list={["text-blue-500", "hover:text-blue-300", className]}
     href={href}
     target={finalTarget}
-    aria-current={pathname === href ? "page" : undefined}
   >
     <slot />
   </a>

src/components/Media/CustomCarousel/CustomCarousel.astro

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

src/components/Media/YtVideo.astro

@@ -1,26 +1,13 @@
 ---
 import type { videoConfig } from "@interfaces/video.ts";
 
-interface Props extends videoConfig {}
-
-const {
-  videoPath,
-  videoTitle,
-  width = "1920",
-  height = "1080",
-  autoPlay = false,
-} = Astro.props;
-
-const aspect = `${width} / ${height}`;
+const config: videoConfig = Astro.props.videoConfig;
 ---
 
-<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;" : "")}
+  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"
   referrerpolicy="strict-origin-when-cross-origin"
   allowfullscreen></iframe>
-</div>

src/components/NestedNavbarEntries.astro

@@ -1,18 +1,26 @@
 ---
 import type { navLink } from "@interfaces/site-layout.ts";
 
-import { getHrefPath, getNavLinkSuffix } from "@data/site-layout.ts";
-
 const items: navLink[] = Astro.props.items;
 const depth: number = Astro.props.depth ?? 0;
 const paths: string[] = Astro.props.paths ?? [];
 
+const getNavLinkSuffix = (entry: navLink): string => {
+  return "-" + [...paths, entry.path].join("-");
+};
+const getHrefPath = (entry: navLink): string => {
+  return entry.pubpath
+    ? entry.pubpath
+    : "/" +
+        (paths && paths.length ? [...paths, entry.path].join("/") : entry.path);
+};
+
 const { pathname } = Astro.url;
 ---
 
 <ul
   class:list={[
-    "border-caperren-green flex flex-col space-y-4 bg-black",
+    "border-caperren-green flex flex-col space-y-4 space-x-8 bg-black",
     depth
       ? "space-y-4 py-4"
       : "items-start lg:mt-0 lg:flex-row lg:space-y-0 lg:space-x-8",
@@ -21,23 +29,21 @@ const { pathname } = Astro.url;
   {
     items.map(
       (entry) =>
-        (entry.enabled ?? true) &&
-        !(entry.hidden ?? false) && (
+        (entry.enabled ?? true) && (
           <li class="">
             {Array.isArray(entry.children) && entry.children.length ? (
               <div>
                 <button
-                  id={"dropdownNavbarLink" + getNavLinkSuffix(paths, entry)}
+                  id={"dropdownNavbarLink" + getNavLinkSuffix(entry)}
                   data-dropdown-toggle={
-                    "dropdownNavbar" + getNavLinkSuffix(paths, entry)
+                    "dropdownNavbar" + getNavLinkSuffix(entry)
                   }
                   data-dropdown-placement="bottom-start"
                   data-dropdown-offset-distance="5"
                   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)) &&
-                    !(entry.placeholderEntry ?? false)
+                    pathname.startsWith(getHrefPath(entry))
                       ? "border-caperren-green border-b-2"
                       : false,
                   ]}
@@ -59,7 +65,7 @@ const { pathname } = Astro.url;
                   </svg>
                 </button>
                 <div
-                  id={"dropdownNavbar" + getNavLinkSuffix(paths, entry)}
+                  id={"dropdownNavbar" + getNavLinkSuffix(entry)}
                   class="border-caperren-green z-10 hidden w-max max-w-screen border bg-black px-6 shadow-sm"
                 >
                   <Astro.self
@@ -72,32 +78,18 @@ const { pathname } = Astro.url;
             ) : (
               <div>
                 <a
-                  href={
-                    !(entry.placeholderEntry ?? false)
-                      ? getHrefPath(paths, entry)
-                      : undefined
-                  }
-                  target={
-                    getHrefPath(paths, entry).startsWith("/") ? "" : "_blank"
-                  }
+                  href={getHrefPath(entry)}
+                  target={getHrefPath(entry).startsWith("/") ? "" : "_blank"}
                   class:list={[
-                    "ring-caperren-green-dark block bg-transparent lg:p-0",
-                    pathname === getHrefPath(paths, entry)
+                    "hover:text-caperren-green-light ring-caperren-green-dark block bg-transparent lg:p-0",
+                    pathname === getHrefPath(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) &&
-                    !(entry.placeholderEntry ?? false)
-                      ? "page"
-                      : undefined
+                    pathname === getHrefPath(entry) ? "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-0.5">
+<div class="grid grid-cols-1 gap-3">
   {
     Astro.slots.has("header") && (
       <div>

src/components/PopoverWordDefinition.astro

@@ -7,15 +7,10 @@ const keys: { [key: string]: string } = {
   ADCP: "Acoustic doppler current profiler",
   COTS: "Consumer off-the-shelf",
   CTD: "Conductivity, temperature, and depth sensor",
-  DUTs: "Devices under test",
   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",
-  VPS: "Virtual private server",
 };
 
 const key: string | undefined = Astro.props.key;
@@ -26,12 +21,6 @@ if (key && keys.hasOwnProperty(key)) {
   word = key;
   definition = keys[key];
 }
-
-if (!word || !definition) {
-  throw new Error(
-    `Popover definition is missing! Inputs were\nkey: ${key}\nword: ${word}\ndefinition: ${definition}`,
-  );
-}
 ---
 
 <>

src/components/PrintedCircuitBoard.astro

@@ -1,58 +0,0 @@
----
-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>