From 476c3b54762d6f3e2e9aabf9fd091566e0bb8e3b Mon Sep 17 00:00:00 2001
From: Michael Kinder <me@mwk.email>
Date: Mon, 12 Feb 2024 19:24:12 -0500
Subject: [PATCH 01/14] Add UI components for label, input, popover, and form

---
 components/ui/form.tsx    | 181 +++++++++++++++++++++++++++++++++
 components/ui/input.tsx   |  25 +++++
 components/ui/label.tsx   |  26 +++++
 components/ui/popover.tsx |  33 ++++++
 package-lock.json         | 205 +++++++++++++++++++++++++++++++++++++-
 package.json              |   7 +-
 6 files changed, 475 insertions(+), 2 deletions(-)
 create mode 100644 components/ui/form.tsx
 create mode 100644 components/ui/input.tsx
 create mode 100644 components/ui/label.tsx
 create mode 100644 components/ui/popover.tsx

diff --git a/components/ui/form.tsx b/components/ui/form.tsx
new file mode 100644
index 00000000..b1a5c1ed
--- /dev/null
+++ b/components/ui/form.tsx
@@ -0,0 +1,181 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from "react-hook-form";
+
+import { cn } from "@/lib/utils";
+import { Label } from "@/components/ui/label";
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+);
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        ref={ref}
+        className={cn("space-y-2", className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  );
+});
+FormItem.displayName = "FormItem";
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+});
+FormLabel.displayName = "FormLabel";
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+});
+FormControl.displayName = "FormControl";
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-[0.8rem] text-muted-foreground", className)}
+      {...props}
+    />
+  );
+});
+FormDescription.displayName = "FormDescription";
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-[0.8rem] font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+});
+FormMessage.displayName = "FormMessage";
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+};
diff --git a/components/ui/input.tsx b/components/ui/input.tsx
new file mode 100644
index 00000000..f6b24530
--- /dev/null
+++ b/components/ui/input.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = "Input";
+
+export { Input };
diff --git a/components/ui/label.tsx b/components/ui/label.tsx
new file mode 100644
index 00000000..40378d43
--- /dev/null
+++ b/components/ui/label.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };
diff --git a/components/ui/popover.tsx b/components/ui/popover.tsx
new file mode 100644
index 00000000..b7a19e9d
--- /dev/null
+++ b/components/ui/popover.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+import { cn } from "@/lib/utils";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
diff --git a/package-lock.json b/package-lock.json
index e1ea0f3b..8c4f43f5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,11 +10,14 @@
       "dependencies": {
         "@headlessui/react": "^1.7.18",
         "@heroicons/react": "^2.1.1",
+        "@hookform/resolvers": "^3.3.4",
         "@radix-ui/react-accordion": "^1.1.2",
         "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-dropdown-menu": "^2.0.6",
         "@radix-ui/react-icons": "^1.3.0",
+        "@radix-ui/react-label": "^2.0.2",
         "@radix-ui/react-navigation-menu": "^1.1.4",
+        "@radix-ui/react-popover": "^1.0.7",
         "@radix-ui/react-slot": "^1.0.2",
         "@types/node": "20.11.16",
         "@types/react": "18.2.55",
@@ -34,6 +37,7 @@
         "next-themes": "^0.2.1",
         "react": "18.2.0",
         "react-dom": "18.2.0",
+        "react-hook-form": "^7.50.1",
         "react-icons": "^5.0.1",
         "rehype-raw": "^7.0.0",
         "rehype-stringify": "^10.0.0",
@@ -44,7 +48,8 @@
         "tailwind-merge": "^2.2.1",
         "tailwindcss-animate": "^1.0.7",
         "typescript": "5.3.3",
-        "unified": "^11.0.4"
+        "unified": "^11.0.4",
+        "zod": "^3.22.4"
       },
       "devDependencies": {
         "@storybook/addon-a11y": "^7.6.13",
@@ -3005,6 +3010,14 @@
         "react": ">= 16"
       }
     },
+    "node_modules/@hookform/resolvers": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.3.4.tgz",
+      "integrity": "sha512-o5cgpGOuJYrd+iMKvkttOclgwRW86EsWJZZRC23prf0uU2i48Htq4PuT73AVb9ionFyZrwYEITuOFGF+BydEtQ==",
+      "peerDependencies": {
+        "react-hook-form": "^7.0.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -4456,6 +4469,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-label": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.0.2.tgz",
+      "integrity": "sha512-N5ehvlM7qoTLx7nWPodsPYPgMzA5WM8zZChQg8nyFJKnDO5WHdba1vv5/H6IO5LtJMfD2Q3wh1qHFGNtK0w3bQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-menu": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.0.6.tgz",
@@ -4666,6 +4702,150 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-popover": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.0.7.tgz",
+      "integrity": "sha512-shtvVnlsxT6faMnK/a7n0wptwBD23xc1Z5mdrtKLwVEfsEMXodS0r5s0/g5P0hX//EKYZS2sxUjqfzlg52ZSnQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-focus-guards": "1.0.1",
+        "@radix-ui/react-focus-scope": "1.0.4",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-popper": "1.1.3",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz",
+      "integrity": "sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-escape-keydown": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.4.tgz",
+      "integrity": "sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-popper": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.3.tgz",
+      "integrity": "sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1",
+        "@radix-ui/react-use-rect": "1.0.1",
+        "@radix-ui/react-use-size": "1.0.1",
+        "@radix-ui/rect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-portal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.4.tgz",
+      "integrity": "sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popper": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.2.tgz",
@@ -23900,6 +24080,21 @@
       "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
       "dev": true
     },
+    "node_modules/react-hook-form": {
+      "version": "7.50.1",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.50.1.tgz",
+      "integrity": "sha512-3PCY82oE0WgeOgUtIr3nYNNtNvqtJ7BZjsbxh6TnYNbXButaD5WpjOmTjdxZfheuHKR68qfeFnEDVYoSSFPMTQ==",
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-icons": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz",
@@ -28016,6 +28211,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/zod": {
+      "version": "3.22.4",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.22.4.tgz",
+      "integrity": "sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
     "node_modules/zwitch": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
diff --git a/package.json b/package.json
index f0cb4259..72c7adf2 100644
--- a/package.json
+++ b/package.json
@@ -20,11 +20,14 @@
   "dependencies": {
     "@headlessui/react": "^1.7.18",
     "@heroicons/react": "^2.1.1",
+    "@hookform/resolvers": "^3.3.4",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-navigation-menu": "^1.1.4",
+    "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-slot": "^1.0.2",
     "@types/node": "20.11.16",
     "@types/react": "18.2.55",
@@ -44,6 +47,7 @@
     "next-themes": "^0.2.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-hook-form": "^7.50.1",
     "react-icons": "^5.0.1",
     "rehype-raw": "^7.0.0",
     "rehype-stringify": "^10.0.0",
@@ -54,7 +58,8 @@
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "5.3.3",
-    "unified": "^11.0.4"
+    "unified": "^11.0.4",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^7.6.13",

From cdd3ea2090d1fccecb4070c42ea41e5ee9326a9b Mon Sep 17 00:00:00 2001
From: Michael Kinder <me@mwk.email>
Date: Mon, 12 Feb 2024 19:24:32 -0500
Subject: [PATCH 02/14] make not-found consistent with news styling

---
 app/[locale]/news/[slug]/not-found.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/[locale]/news/[slug]/not-found.tsx b/app/[locale]/news/[slug]/not-found.tsx
index 92d0cc14..ee83448a 100644
--- a/app/[locale]/news/[slug]/not-found.tsx
+++ b/app/[locale]/news/[slug]/not-found.tsx
@@ -5,7 +5,7 @@ export default function SlugNotFound() {
   const t = useTranslations("news.notFound");
 
   return (
-    <div className="pt-10 pb-24 sm:pt-12 sm:pb-32">
+    <div className="py-24 sm:py-32">
       <div className="mx-auto max-w-3xl text-base leading-7">
         <h1 className="mt-2 text-3xl font-bold tracking-tight sm:text-4xl mb-12 text-center font-display">
           {t("title")}

From 0e952ceb8f6b2397ece882c9f343e21a7604d9a4 Mon Sep 17 00:00:00 2001
From: Michael Kinder <me@mwk.email>
Date: Mon, 12 Feb 2024 19:24:54 -0500
Subject: [PATCH 03/14] Add MastodonDialog and ShareButtons components

---
 components/shareButtons/MastodonDialog.tsx | 93 ++++++++++++++++++++++
 components/shareButtons/ShareButtons.tsx   | 76 ++++++++++++++++++
 2 files changed, 169 insertions(+)
 create mode 100644 components/shareButtons/MastodonDialog.tsx
 create mode 100644 components/shareButtons/ShareButtons.tsx

diff --git a/components/shareButtons/MastodonDialog.tsx b/components/shareButtons/MastodonDialog.tsx
new file mode 100644
index 00000000..3096cd6d
--- /dev/null
+++ b/components/shareButtons/MastodonDialog.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import * as React from "react";
+import * as z from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Input } from "@/components/ui/input";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Button } from "@/components/ui/button";
+
+const mastodonShareSchema = z.object({
+  instanceUrl: z
+    .string()
+    .regex(
+      /^(?:[a-zA-Z0-9\-_]+\.)+[a-zA-Z]{2,}$/,
+      "Please enter a valid Mastodon instance URL (without https://)"
+    ),
+});
+
+const MastodonDialog = () => {
+  const form = useForm<z.infer<typeof mastodonShareSchema>>({
+    resolver: zodResolver(mastodonShareSchema),
+    defaultValues: {
+      instanceUrl: "",
+    },
+  });
+
+  function onSubmit(values: z.infer<typeof mastodonShareSchema>) {
+    const shareUrl = `https://${values.instanceUrl}/share?text=${encodeURIComponent(window.location.href)}`;
+
+    window.open(shareUrl, "_blank");
+  }
+  return (
+    <>
+      <Popover>
+        <PopoverTrigger>
+          <span className="sr-only">X</span>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            className="h-5"
+            viewBox="0 0 16 16"
+          >
+            <path d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z" />
+          </svg>
+        </PopoverTrigger>
+        <PopoverContent>
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)}>
+              <FormField
+                control={form.control}
+                name="instanceUrl"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Mastodon Instance URL</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="mastodon.social"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <Button
+                type="submit"
+                className="mt-4"
+              >
+                Share
+              </Button>
+            </form>
+          </Form>
+        </PopoverContent>
+      </Popover>
+    </>
+  );
+};
+
+export default MastodonDialog;
diff --git a/components/shareButtons/ShareButtons.tsx b/components/shareButtons/ShareButtons.tsx
new file mode 100644
index 00000000..699cd60d
--- /dev/null
+++ b/components/shareButtons/ShareButtons.tsx
@@ -0,0 +1,76 @@
+import Link from "next/link";
+import MastodonDialog from "./MastodonDialog";
+
+interface ShareButtonsProps {
+  slug: string;
+}
+
+const ShareButtons = ({ slug }: ShareButtonsProps) => {
+  const facebookLink =
+    "https://www.facebook.com/sharer/sharer.php?u=rockylinux.org/news/" + slug;
+  const xLink =
+    "https://twitter.com/intent/tweet?text=rockylinux.org/news/" + slug;
+  const linkedInLink =
+    "https://www.linkedin.com/sharing/share-offsite/?url=rockylinux.org/news/" +
+    slug;
+
+  return (
+    <>
+      <h3 className="text-sm text-center mb-2">Share:</h3>
+      <div className="flex space-x-6 justify-center mb-12">
+        <MastodonDialog />
+        <Link
+          href={facebookLink}
+          className="hover:text-primary"
+          target="_blank"
+        >
+          <span className="sr-only">Facebook</span>
+          <svg
+            fill="currentColor"
+            viewBox="0 0 24 24"
+            className="h-6 w-6"
+            aria-hidden="true"
+          >
+            <path
+              fillRule="evenodd"
+              d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
+              clipRule="evenodd"
+            />
+          </svg>
+        </Link>
+        <Link
+          href={linkedInLink}
+          className="hover:text-primary"
+          target="_blank"
+        >
+          <span className="sr-only">LinkedIn</span>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            className="h-6 w-6"
+            aria-hidden="true"
+          >
+            <path d="M0 0v24h24v-24h-24zm8 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.397-2.586 7-2.777 7 2.476v6.759z" />
+          </svg>
+        </Link>
+        <Link
+          href={xLink}
+          className="hover:text-primary"
+          target="_blank"
+        >
+          <span className="sr-only">X</span>
+          <svg
+            fill="currentColor"
+            viewBox="0 0 24 24"
+            className="h-6 w-6"
+            aria-hidden="true"
+          >
+            <path d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" />
+          </svg>
+        </Link>
+      </div>
+    </>
+  );
+};
+
+export default ShareButtons;

From dd258a343021f5af86ed175c6b8a74fc7e0747f2 Mon Sep 17 00:00:00 2001
From: Michael Kinder <me@mwk.email>
Date: Mon, 12 Feb 2024 19:25:03 -0500
Subject: [PATCH 04/14] Add ShareButtons component to news page

---
 app/[locale]/news/[slug]/page.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/[locale]/news/[slug]/page.tsx b/app/[locale]/news/[slug]/page.tsx
index c2370d9d..1c777c75 100644
--- a/app/[locale]/news/[slug]/page.tsx
+++ b/app/[locale]/news/[slug]/page.tsx
@@ -1,4 +1,5 @@
 import Date from "@/components/Date";
+import ShareButtons from "@/components/shareButtons/ShareButtons";
 
 import { checkIfSlugIsValid, getPostData } from "@/lib/news";
 import { notFound } from "next/navigation";
@@ -55,6 +56,7 @@ export default async function Post({ params }: Props) {
           className="prose dark:prose-invert prose-headings:font-display prose-a:text-primary prose-pre:bg-muted prose-pre:py-3 prose-pre:px-4 prose-pre:rounded prose-img:rounded-md max-w-none"
           dangerouslySetInnerHTML={{ __html: postData.contentHtml }}
         />
+        <ShareButtons slug={params.slug} />
       </div>
     </div>
   );

From 1b670238c02937d7d97e575f9b0463e628cc2bd8 Mon Sep 17 00:00:00 2001
From: Michael Kinder <me@mwk.email>
Date: Mon, 12 Feb 2024 19:27:53 -0500
Subject: [PATCH 05/14] Add margin-bottom to page content

---
 app/[locale]/news/[slug]/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/[locale]/news/[slug]/page.tsx b/app/[locale]/news/[slug]/page.tsx
index 1c777c75..3d8b14a1 100644
--- a/app/[locale]/news/[slug]/page.tsx
+++ b/app/[locale]/news/[slug]/page.tsx
@@ -53,7 +53,7 @@ export default async function Post({ params }: Props) {
           {postData.title}
         </h1>
         <div
-          className="prose dark:prose-invert prose-headings:font-display prose-a:text-primary prose-pre:bg-muted prose-pre:py-3 prose-pre:px-4 prose-pre:rounded prose-img:rounded-md max-w-none"
+          className="prose dark:prose-invert prose-headings:font-display prose-a:text-primary prose-pre:bg-muted prose-pre:py-3 prose-pre:px-4 prose-pre:rounded prose-img:rounded-md max-w-none mb-12"
           dangerouslySetInnerHTML={{ __html: postData.contentHtml }}
         />
         <ShareButtons slug={params.slug} />

From 0ddf2da46d1dde7ec90a43324878b97ab5107025 Mon Sep 17 00:00:00 2001
From: Michael Kinder <me@mwk.email>
Date: Mon, 12 Feb 2024 20:04:15 -0500
Subject: [PATCH 06/14] Refactor MastodonDialog component and add translations
 for share buttons

---
 components/shareButtons/MastodonDialog.tsx | 29 ++++++++++++++--------
 components/shareButtons/ShareButtons.tsx   | 28 ++++++++++++---------
 messages/en.json                           | 11 ++++++++
 3 files changed, 45 insertions(+), 23 deletions(-)

diff --git a/components/shareButtons/MastodonDialog.tsx b/components/shareButtons/MastodonDialog.tsx
index 3096cd6d..dbbc605b 100644
--- a/components/shareButtons/MastodonDialog.tsx
+++ b/components/shareButtons/MastodonDialog.tsx
@@ -21,16 +21,23 @@ import {
 } from "@/components/ui/form";
 import { Button } from "@/components/ui/button";
 
-const mastodonShareSchema = z.object({
-  instanceUrl: z
-    .string()
-    .regex(
-      /^(?:[a-zA-Z0-9\-_]+\.)+[a-zA-Z]{2,}$/,
-      "Please enter a valid Mastodon instance URL (without https://)"
-    ),
-});
+export interface MastodonDialogProps {
+  invalidUrlMsg: string;
+  urlMsg: string;
+  shareMsg: string;
+}
+
+const MastodonDialog: React.FC<MastodonDialogProps> = ({
+  invalidUrlMsg,
+  urlMsg,
+  shareMsg,
+}) => {
+  const mastodonShareSchema = z.object({
+    instanceUrl: z
+      .string()
+      .regex(/^(?:[a-zA-Z0-9\-_]+\.)+[a-zA-Z]{2,}$/, invalidUrlMsg),
+  });
 
-const MastodonDialog = () => {
   const form = useForm<z.infer<typeof mastodonShareSchema>>({
     resolver: zodResolver(mastodonShareSchema),
     defaultValues: {
@@ -65,7 +72,7 @@ const MastodonDialog = () => {
                 name="instanceUrl"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Mastodon Instance URL</FormLabel>
+                    <FormLabel>{urlMsg}</FormLabel>
                     <FormControl>
                       <Input
                         placeholder="mastodon.social"
@@ -80,7 +87,7 @@ const MastodonDialog = () => {
                 type="submit"
                 className="mt-4"
               >
-                Share
+                {shareMsg}
               </Button>
             </form>
           </Form>
diff --git a/components/shareButtons/ShareButtons.tsx b/components/shareButtons/ShareButtons.tsx
index 699cd60d..3e98cc36 100644
--- a/components/shareButtons/ShareButtons.tsx
+++ b/components/shareButtons/ShareButtons.tsx
@@ -1,4 +1,6 @@
+import { useTranslations } from "next-intl";
 import Link from "next/link";
+
 import MastodonDialog from "./MastodonDialog";
 
 interface ShareButtonsProps {
@@ -6,25 +8,27 @@ interface ShareButtonsProps {
 }
 
 const ShareButtons = ({ slug }: ShareButtonsProps) => {
-  const facebookLink =
-    "https://www.facebook.com/sharer/sharer.php?u=rockylinux.org/news/" + slug;
-  const xLink =
-    "https://twitter.com/intent/tweet?text=rockylinux.org/news/" + slug;
-  const linkedInLink =
-    "https://www.linkedin.com/sharing/share-offsite/?url=rockylinux.org/news/" +
-    slug;
+  const t = useTranslations("share");
+
+  const facebookLink = `https://www.facebook.com/sharer/sharer.php?u=rockylinux.org/news/${slug}`;
+  const xLink = `https://twitter.com/intent/tweet?text=rockylinux.org/news/${slug}`;
+  const linkedInLink = `https://www.linkedin.com/sharing/share-offsite/?url=rockylinux.org/news/${slug}`;
 
   return (
     <>
-      <h3 className="text-sm text-center mb-2">Share:</h3>
+      <h3 className="text-sm text-center mb-2">{t("shareName")}</h3>
       <div className="flex space-x-6 justify-center mb-12">
-        <MastodonDialog />
+        <MastodonDialog
+          invalidUrlMsg={t("mastodon.url-valid")}
+          urlMsg={t("mastodon.url")}
+          shareMsg={t("shareName")}
+        />
         <Link
           href={facebookLink}
           className="hover:text-primary"
           target="_blank"
         >
-          <span className="sr-only">Facebook</span>
+          <span className="sr-only">{t("facebook")}</span>
           <svg
             fill="currentColor"
             viewBox="0 0 24 24"
@@ -43,7 +47,7 @@ const ShareButtons = ({ slug }: ShareButtonsProps) => {
           className="hover:text-primary"
           target="_blank"
         >
-          <span className="sr-only">LinkedIn</span>
+          <span className="sr-only">{t("linkedin")}</span>
           <svg
             xmlns="http://www.w3.org/2000/svg"
             fill="currentColor"
@@ -58,7 +62,7 @@ const ShareButtons = ({ slug }: ShareButtonsProps) => {
           className="hover:text-primary"
           target="_blank"
         >
-          <span className="sr-only">X</span>
+          <span className="sr-only">{t("x")}</span>
           <svg
             fill="currentColor"
             viewBox="0 0 24 24"
diff --git a/messages/en.json b/messages/en.json
index 257932c8..cc3f2337 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -72,5 +72,16 @@
       "title": "Not Found",
       "description": "The news post you are looking for does not exist. You can find all our news posts on the <newsLink>news page</newsLink>."
     }
+  },
+  "share": {
+    "shareName": "Share",
+    "mastodon": {
+      "name": "Mastodon",
+      "url-valid": "Please enter a valid Mastodon instance URL (without https://).",
+      "url": "Mastodon Instance URL"
+    },
+    "facebook": "Facebook",
+    "linkedin": "LinkedIn",
+    "x": "X"
   }
 }

From 9be57a02fb62a9181aeaafcc426dd4626134c02a Mon Sep 17 00:00:00 2001
From: Michael Kinder <me@mwk.email>
Date: Mon, 12 Feb 2024 20:13:18 -0500
Subject: [PATCH 07/14] Update MastodonDialog component with mastodonSrMsg prop

---
 components/shareButtons/MastodonDialog.tsx | 4 +++-
 components/shareButtons/ShareButtons.tsx   | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/components/shareButtons/MastodonDialog.tsx b/components/shareButtons/MastodonDialog.tsx
index dbbc605b..e4945219 100644
--- a/components/shareButtons/MastodonDialog.tsx
+++ b/components/shareButtons/MastodonDialog.tsx
@@ -25,12 +25,14 @@ export interface MastodonDialogProps {
   invalidUrlMsg: string;
   urlMsg: string;
   shareMsg: string;
+  mastodonSrMsg: string;
 }
 
 const MastodonDialog: React.FC<MastodonDialogProps> = ({
   invalidUrlMsg,
   urlMsg,
   shareMsg,
+  mastodonSrMsg,
 }) => {
   const mastodonShareSchema = z.object({
     instanceUrl: z
@@ -54,7 +56,7 @@ const MastodonDialog: React.FC<MastodonDialogProps> = ({
     <>
       <Popover>
         <PopoverTrigger>
-          <span className="sr-only">X</span>
+          <span className="sr-only">{mastodonSrMsg}</span>
           <svg
             xmlns="http://www.w3.org/2000/svg"
             fill="currentColor"
diff --git a/components/shareButtons/ShareButtons.tsx b/components/shareButtons/ShareButtons.tsx
index 3e98cc36..f34934d0 100644
--- a/components/shareButtons/ShareButtons.tsx
+++ b/components/shareButtons/ShareButtons.tsx
@@ -22,6 +22,7 @@ const ShareButtons = ({ slug }: ShareButtonsProps) => {
           invalidUrlMsg={t("mastodon.url-valid")}
           urlMsg={t("mastodon.url")}
           shareMsg={t("shareName")}
+          mastodonSrMsg={t("mastodon.name")}
         />
         <Link
           href={facebookLink}

From f451b23e953c496e7640add909a9b681fb9cd04c Mon Sep 17 00:00:00 2001
From: Michael Kinder <me@mwk.email>
Date: Sun, 18 Feb 2024 14:13:45 -0500
Subject: [PATCH 08/14] Add Card component and related sub-components

---
 components/ui/card.tsx | 87 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 87 insertions(+)
 create mode 100644 components/ui/card.tsx

diff --git a/components/ui/card.tsx b/components/ui/card.tsx
new file mode 100644
index 00000000..07f51513
--- /dev/null
+++ b/components/ui/card.tsx
@@ -0,0 +1,87 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("p-6 pt-0", className)}
+    {...props}
+  />
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};

From f7935e9bf2b3b3f82a95ccd9d2b412b5336a3779 Mon Sep 17 00:00:00 2001
From: Michael Kinder <me@mwk.email>
Date: Sun, 18 Feb 2024 14:13:58 -0500
Subject: [PATCH 09/14] Add excerpt to post data

---
 lib/news.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/lib/news.ts b/lib/news.ts
index 36b23775..33d42574 100644
--- a/lib/news.ts
+++ b/lib/news.ts
@@ -38,8 +38,14 @@ export async function getSortedPostsData() {
 
       const matterResult = matter(fileContents);
 
+      const contentHtml = await processMarkdownAsHTML(matterResult.content);
+
+      const plainText = contentHtml.replace(/<[^>]*>/g, "");
+      const excerpt = plainText.substring(0, 200) + "...";
+
       return {
         slug,
+        excerpt,
         ...(matterResult.data as { date: string; title: string }),
       };
     })
@@ -79,9 +85,13 @@ export async function getPostData(slug: string) {
 
   const contentHtml = await processMarkdownAsHTML(matterResult.content);
 
+  const plainText = contentHtml.replace(/<[^>]*>/g, "");
+  const excerpt = plainText.substring(0, 200) + "...";
+
   return {
     slug,
     contentHtml,
+    excerpt,
     ...(matterResult.data as { date: string; title: string }),
   };
 }

From 9a5d8997c0ce7b13c69db627f8eeec17ec686999 Mon Sep 17 00:00:00 2001
From: Michael Kinder <me@mwk.email>
Date: Sun, 18 Feb 2024 14:14:11 -0500
Subject: [PATCH 10/14] Add news page and update translations

---
 app/[locale]/news/page.tsx | 58 ++++++++++++++++++++++++++++++++++++++
 messages/en.json           |  2 ++
 2 files changed, 60 insertions(+)
 create mode 100644 app/[locale]/news/page.tsx

diff --git a/app/[locale]/news/page.tsx b/app/[locale]/news/page.tsx
new file mode 100644
index 00000000..1653b54f
--- /dev/null
+++ b/app/[locale]/news/page.tsx
@@ -0,0 +1,58 @@
+import type { NextPage } from "next";
+import Link from "next/link";
+import { format } from "date-fns"; // Assuming you have a date formatting library
+import { getSortedPostsData } from "@/lib/news";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { getTranslations } from "next-intl/server";
+
+const NewsPage: NextPage = async () => {
+  const posts = await getSortedPostsData();
+  const t = await getTranslations("news");
+
+  return (
+    <div className="py-24 sm:py-32">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="text-center">
+          <h2 className="text-3xl font-bold font-display tracking-tight sm:text-4xl">
+            {t("title")}
+          </h2>
+          <p className="mt-2 text-lg leading-8">{t("description")}</p>
+        </div>
+        <div className="mx-auto mt-10 grid max-w-2xl grid-cols-1 gap-8 border-t pt-10 sm:mt-16 sm:pt-16 lg:mx-0 lg:max-w-none lg:grid-cols-3">
+          {posts.map((post) => (
+            <Link
+              key={post.slug}
+              href={`/news/${post.slug}`}
+            >
+              <Card key={post.slug}>
+                <CardHeader>
+                  <CardTitle className="font-display font-bold truncate">
+                    {post.title}
+                  </CardTitle>
+                  <CardDescription>
+                    {format(new Date(post.date), "MMMM d, yyyy")}
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="group relative">
+                    <p className="line-clamp-3 text-sm leading-6">
+                      {post.excerpt}
+                    </p>
+                  </div>
+                </CardContent>
+              </Card>
+            </Link>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NewsPage;
diff --git a/messages/en.json b/messages/en.json
index cc3f2337..d6a4db98 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -68,6 +68,8 @@
     }
   },
   "news": {
+    "title": "News",
+    "description": "Stay up to date with the latest news and updates from the Rocky Linux community.",
     "notFound": {
       "title": "Not Found",
       "description": "The news post you are looking for does not exist. You can find all our news posts on the <newsLink>news page</newsLink>."

From e9a31f381c0363043a731f06a1749b6a96ba8444 Mon Sep 17 00:00:00 2001
From: Michael Kinder <me@mwk.email>
Date: Sun, 18 Feb 2024 14:28:26 -0500
Subject: [PATCH 11/14] Refactor newsLib.getSortedPostsData to include post
 excerpts

---
 lib/__tests__/news.test.ts | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/lib/__tests__/news.test.ts b/lib/__tests__/news.test.ts
index f8212a6f..b329c7e9 100644
--- a/lib/__tests__/news.test.ts
+++ b/lib/__tests__/news.test.ts
@@ -74,8 +74,18 @@ describe("News Library", () => {
     it("should return an array of sorted post data", async () => {
       const sortedPosts = await newsLib.getSortedPostsData();
       expect(sortedPosts).toStrictEqual([
-        { slug: "post2", date: "2022-01-02", title: "Post 2" },
-        { slug: "post1", date: "2022-01-01", title: "Post 1" },
+        {
+          slug: "post2",
+          excerpt: "Mocked HTML content...",
+          date: "2022-01-02",
+          title: "Post 2",
+        },
+        {
+          slug: "post1",
+          excerpt: "Mocked HTML content...",
+          date: "2022-01-01",
+          title: "Post 1",
+        },
       ]);
     });
   });

From 5f341983d73f33372d1f8c8de96db2ffff05ce31 Mon Sep 17 00:00:00 2001
From: Michael Kinder <me@mwk.email>
Date: Sun, 18 Feb 2024 20:31:44 -0500
Subject: [PATCH 12/14] Remove unnecessary comment

---
 app/[locale]/news/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/[locale]/news/page.tsx b/app/[locale]/news/page.tsx
index 1653b54f..6a71f06d 100644
--- a/app/[locale]/news/page.tsx
+++ b/app/[locale]/news/page.tsx
@@ -1,6 +1,6 @@
 import type { NextPage } from "next";
 import Link from "next/link";
-import { format } from "date-fns"; // Assuming you have a date formatting library
+import { format } from "date-fns";
 import { getSortedPostsData } from "@/lib/news";
 import {
   Card,

From 2eb98eef38f969c2de4fec7dbdfe7332cc57a8db Mon Sep 17 00:00:00 2001
From: Michael Kinder <me@mwk.email>
Date: Sun, 18 Feb 2024 20:42:51 -0500
Subject: [PATCH 13/14] Update ShareButtons to use dynamic URL via prop

---
 app/[locale]/news/[slug]/page.tsx          |  2 +-
 components/shareButtons/MastodonDialog.tsx |  4 +++-
 components/shareButtons/ShareButtons.tsx   | 11 ++++++-----
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/app/[locale]/news/[slug]/page.tsx b/app/[locale]/news/[slug]/page.tsx
index 3d8b14a1..62f3ddd3 100644
--- a/app/[locale]/news/[slug]/page.tsx
+++ b/app/[locale]/news/[slug]/page.tsx
@@ -56,7 +56,7 @@ export default async function Post({ params }: Props) {
           className="prose dark:prose-invert prose-headings:font-display prose-a:text-primary prose-pre:bg-muted prose-pre:py-3 prose-pre:px-4 prose-pre:rounded prose-img:rounded-md max-w-none mb-12"
           dangerouslySetInnerHTML={{ __html: postData.contentHtml }}
         />
-        <ShareButtons slug={params.slug} />
+        <ShareButtons url={`https://rockylinux.org/news/${params.slug}`} />
       </div>
     </div>
   );
diff --git a/components/shareButtons/MastodonDialog.tsx b/components/shareButtons/MastodonDialog.tsx
index e4945219..9bfc580e 100644
--- a/components/shareButtons/MastodonDialog.tsx
+++ b/components/shareButtons/MastodonDialog.tsx
@@ -26,6 +26,7 @@ export interface MastodonDialogProps {
   urlMsg: string;
   shareMsg: string;
   mastodonSrMsg: string;
+  url: string;
 }
 
 const MastodonDialog: React.FC<MastodonDialogProps> = ({
@@ -33,6 +34,7 @@ const MastodonDialog: React.FC<MastodonDialogProps> = ({
   urlMsg,
   shareMsg,
   mastodonSrMsg,
+  url,
 }) => {
   const mastodonShareSchema = z.object({
     instanceUrl: z
@@ -48,7 +50,7 @@ const MastodonDialog: React.FC<MastodonDialogProps> = ({
   });
 
   function onSubmit(values: z.infer<typeof mastodonShareSchema>) {
-    const shareUrl = `https://${values.instanceUrl}/share?text=${encodeURIComponent(window.location.href)}`;
+    const shareUrl = `https://${values.instanceUrl}/share?text=${url}`;
 
     window.open(shareUrl, "_blank");
   }
diff --git a/components/shareButtons/ShareButtons.tsx b/components/shareButtons/ShareButtons.tsx
index f34934d0..4c9759c1 100644
--- a/components/shareButtons/ShareButtons.tsx
+++ b/components/shareButtons/ShareButtons.tsx
@@ -4,15 +4,15 @@ import Link from "next/link";
 import MastodonDialog from "./MastodonDialog";
 
 interface ShareButtonsProps {
-  slug: string;
+  url: string;
 }
 
-const ShareButtons = ({ slug }: ShareButtonsProps) => {
+const ShareButtons = ({ url }: ShareButtonsProps) => {
   const t = useTranslations("share");
 
-  const facebookLink = `https://www.facebook.com/sharer/sharer.php?u=rockylinux.org/news/${slug}`;
-  const xLink = `https://twitter.com/intent/tweet?text=rockylinux.org/news/${slug}`;
-  const linkedInLink = `https://www.linkedin.com/sharing/share-offsite/?url=rockylinux.org/news/${slug}`;
+  const facebookLink = `https://www.facebook.com/sharer/sharer.php?u=${url}`;
+  const xLink = `https://twitter.com/intent/tweet?text=${url}`;
+  const linkedInLink = `https://www.linkedin.com/sharing/share-offsite/?url=${url}`;
 
   return (
     <>
@@ -23,6 +23,7 @@ const ShareButtons = ({ slug }: ShareButtonsProps) => {
           urlMsg={t("mastodon.url")}
           shareMsg={t("shareName")}
           mastodonSrMsg={t("mastodon.name")}
+          url={url}
         />
         <Link
           href={facebookLink}

From 9a86b6e7d10bc946fd8fcbb81bc1931619b1301e Mon Sep 17 00:00:00 2001
From: Michael Kinder <me@mwk.email>
Date: Sun, 18 Feb 2024 21:22:14 -0500
Subject: [PATCH 14/14] Update page titles and metadata for news pages

---
 app/[locale]/news/[slug]/page.tsx |  2 +-
 app/[locale]/news/page.tsx        | 14 +++++++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/app/[locale]/news/[slug]/page.tsx b/app/[locale]/news/[slug]/page.tsx
index 62f3ddd3..10b196a9 100644
--- a/app/[locale]/news/[slug]/page.tsx
+++ b/app/[locale]/news/[slug]/page.tsx
@@ -30,7 +30,7 @@ export async function generateMetadata({ params }: Props) {
   const postData: PostData = await getPostData(slug);
 
   return {
-    title: postData.title,
+    title: `${postData.title} - Rocky Linux`,
   };
 }
 
diff --git a/app/[locale]/news/page.tsx b/app/[locale]/news/page.tsx
index 6a71f06d..0847476a 100644
--- a/app/[locale]/news/page.tsx
+++ b/app/[locale]/news/page.tsx
@@ -1,7 +1,11 @@
 import type { NextPage } from "next";
+
+import { getTranslations } from "next-intl/server";
 import Link from "next/link";
 import { format } from "date-fns";
+
 import { getSortedPostsData } from "@/lib/news";
+
 import {
   Card,
   CardContent,
@@ -9,7 +13,15 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import { getTranslations } from "next-intl/server";
+
+export async function generateMetadata() {
+  const t = await getTranslations("news");
+
+  return {
+    title: `${t("title")} - Rocky Linux`,
+    description: `${t("description")}`,
+  };
+}
 
 const NewsPage: NextPage = async () => {
   const posts = await getSortedPostsData();