Merge pull request 'Finished ross content, added skill matrix, li, and ul, and improved many existing components, created and refactored to unified layouts and grid, visual improvements with proper column to row collapsing' (#13) from website-content-updates into main

Reviewed-on: #13

.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 }}
+            gitea.perren.cloud/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/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 \
+	convert_video_times
-	generate_asset_imports
 
 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) \
+		-vf 'format=nv12,hwupload,scale_vaapi=-2:720,trim=start=$(start):end=$(end)' \
-		-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;

astro.config.mjs

@@ -13,7 +13,6 @@ const disabledPaths = getPaths(siteLayout, [], true);
 
 export default defineConfig({
   site: "https://caperren.com",
-  trailingSlash: "never",
   prefetch: {
     prefetchAll: true,
   },

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 =
+let finalTarget: string | undefined = target;
-  target === undefined ? (href.startsWith("/") ? undefined : "_blank") : 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 {
+const groupToShow: carouselGroup = Astro.props.carouselGroup;
-  carouselGroup: carouselGroup;
-  showBorder?: boolean;
-}
-
-const { class: className, carouselGroup, showBorder = true } = Astro.props;
 ---
 
 <custom-carousel
   class="relative flex w-full flex-col"
-  data-custom-carousel={carouselGroup.animation ?? "slide"}
+  data-custom-carousel={groupToShow.animation}
-  data-custom-carousel-interval={carouselGroup.interval}
+  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
+  <div class="relative h-56 w-full overflow-hidden md:h-120">
-    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 &&
+      groupToShow.images.map((image, index) => (
-        carouselGroup.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 &&
+          {groupToShow.images.map((_, index) => (
-            carouselGroup.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 config: videoConfig = Astro.props.videoConfig;
-
-const {
-  videoPath,
-  videoTitle,
-  width = "1920",
-  height = "1080",
-  autoPlay = false,
-} = Astro.props;
-
-const aspect = `${width} / ${height}`;
 ---
 
-<div class="mx-auto my-auto w-full" style={`aspect-ratio: ${aspect};`}>
 <iframe
-    src={videoPath}
+  class="h-128 w-full max-w-1/2"
-    title={videoTitle}
+  src={config.videoPath}
-    class="border-caperren-green-dark h-full w-full rounded-lg border"
+  title={config.videoTitle ?? ""}
-    allow={"accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; " +
+  allow="accelerometer; autoplay; 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

@@ -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.enabled ?? true) && (
-        !(entry.hidden ?? false) && (
           <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)) &&
+                    pathname.startsWith(getHrefPath(entry))
-                    !(entry.placeholderEntry ?? false)
                       ? "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={
+                  href={getHrefPath(entry)}
-                    !(entry.placeholderEntry ?? false)
+                  target={getHrefPath(entry).startsWith("/") ? "" : "_blank"}
-                      ? getHrefPath(paths, entry)
-                      : undefined
-                  }
-                  target={
-                    getHrefPath(paths, entry).startsWith("/") ? "" : "_blank"
-                  }
                   class:list={[
-                    "ring-caperren-green-dark block bg-transparent lg:p-0",
+                    "hover:text-caperren-green-light ring-caperren-green-dark block bg-transparent lg:p-0",
-                    pathname === getHrefPath(paths, entry)
+                    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) &&
+                    pathname === getHrefPath(entry) ? "page" : undefined
-                    !(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-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}`,
-  );
-}
 ---
 
 <>