Unify SEO configuration and overhaul sitemap

Author: kurisu-dotto-komu

TODO.md

@@ -1,36 +1,26 @@
-# CHRIS FINAL MEGA SPRINT CRUNCH DAILY GRIND SCHEDULE
+- Use color dropper for logo rgb
+- Manual visual checks on Safari iOS, and fix any issues.
+- Smaller font on mobile list view
 
-TARGET SOFT LAUNCH AUG 09.
+## vNext
 
-## Schedule
+- Pinch to zoom in gallery
+- Prettier touches like asanhoa / squares
+- Check content is caching right (added 1 event happening always?)
 
-### 9 SOFT RELEASE DAY (oktech.jp/chris-wireframe)
+## Public Codebase Release
 
-- Update logo
-- OG Image Styling
-- Manual checks on multiple browsers and devices.
-
-- Standardize importing of markdown to fix that css import.
-- Clean up codebase, removing AI stuff.
-
-- Test automated builds
-- Resume github pages workflow with sync script trigger
-- Work with Martin or whoever controls domains to do manual release
-
-### THEN
-
-- Pinch to zoom
-- Prettier touches like asanhoa
+- Standardize importing of markdown to fix that stray css module.
 - Feedback integration
+- Clean up codebase, removing AI stuff.
 
-# Post Release Features
+## Later
 
-- SEO test page / Keyword Stuffing
+- Replace extractMarkdownDescription with import step / LLM
+- Streamline logo style/props logic
+- Preprocess images on import, rotate, etc.?
 - Carousel for upcoming events
 - Tagging with LLMs and shit.
 - How to find us photos for hankyu etc.
-- Feed modal, instead of direct link
 - Members: with hasPage: true.
 - Scripts for LLM decoration ?
-- https://docs.astro.build/en/guides/view-transitions/
-- Create an issue for font loadiong strategy

src/components/Common/OKTechLogo.tsx

@@ -5,6 +5,7 @@ import { themeColorsHex } from "@/utils/og/theme-colors";
 interface OKTechLogoProps {
   className?: string;
   active?: boolean;
+  noStyle?: boolean;
 }
 
 // TODO use colors picked from wintle's image
@@ -20,7 +21,7 @@ type OKTechLogoItemProps = OKTechLogoProps & {
   style?: React.CSSProperties;
 };
 
-export function OKTechLogoIcon({ className, style, active }: OKTechLogoItemProps) {
+export function OKTechLogoIcon({ noStyle, className, style, active }: OKTechLogoItemProps) {
   return (
     <>
       <svg
@@ -36,21 +37,23 @@ export function OKTechLogoIcon({ className, style, active }: OKTechLogoItemProps
         fill="currentColor"
       >
         <defs>
-          <style>
-            {`
+          {!noStyle && (
+            <style>
+              {`
               .base-responsive { fill: ${colors.BASE_LIGHT}; }
               
               @media (prefers-color-scheme: dark) {
                 .base-responsive { fill: ${colors.BASE_DARK}; }
-              }
-              @media (prefers-color-scheme: light) {
-                .base-responsive { fill: ${colors.BASE_LIGHT}; }
-              }
-              
-              [data-theme="light"] .base-responsive { fill: currentColor !important; }
-              [data-theme="dark"] .base-responsive { fill: currentColor !important; }
-            `}
-          </style>
+                }
+                @media (prefers-color-scheme: light) {
+                  .base-responsive { fill: ${colors.BASE_LIGHT}; }
+                  }
+                  
+                  [data-theme="light"] .base-responsive { fill: currentColor !important; }
+                  [data-theme="dark"] .base-responsive { fill: currentColor !important; }
+                  `}
+            </style>
+          )}
         </defs>
         <path
           className="base-responsive"

src/components/Common/SiteMapTree.tsx

@@ -1,5 +1,5 @@
 import { FaDiscord } from "react-icons/fa6";
-import { LuCalendar, LuFileText } from "react-icons/lu";
+import { LuCalendarPlus, LuMessageCircleCode } from "react-icons/lu";
 
 import BlobIconGrid, { type BlobIconGridItem } from "@/components/Common/BlobIconGrid";
 
@@ -19,14 +19,14 @@ export default function GetInvolved() {
       type: "calendar",
       title: "Subscribe to Calendar",
       description: "Never miss an event",
-      icon: LuCalendar,
+      icon: LuCalendarPlus,
     },
     {
       type: "a",
-      title: "Submit a Proposal",
-      description: "Share your ideas",
-      icon: LuFileText,
-      href: "https://github.com/owddm/owddm.com/discussions/new?category=events",
+      title: "Make a Presnetation",
+      description: "Submit your talk proposal and share your ideas",
+      icon: LuMessageCircleCode,
+      href: "https://discord.com/channels/1034792577293094972/1034862103653257306",
       target: "_blank",
       rel: "noopener noreferrer",
       testId: "proposal-cta",

src/components/Landing/GetInvolved.tsx

@@ -0,0 +1,33 @@
+import { twj } from "tw-to-css";
+
+import { themeColorsHex } from "@/utils/og/theme-colors";
+
+import OGLayout from "./OGLayout";
+
+interface OGEventsViewProps {
+  title: string;
+  subtitle?: string;
+  description?: string;
+}
+
+export default function OGEventsView({ title, subtitle, description }: OGEventsViewProps) {
+  const colors = themeColorsHex.light;
+
+  return (
+    <OGLayout title={title} subtitle={subtitle}>
+      <div style={twj("flex flex-col gap-4")}>
+        {description && (
+          <p
+            style={{
+              ...twj("text-xl leading-relaxed"),
+              color: colors.baseContent,
+              opacity: 0.7,
+            }}
+          >
+            {description}
+          </p>
+        )}
+      </div>
+    </OGLayout>
+  );
+}

src/components/OG/OGEventsView.tsx

@@ -0,0 +1,53 @@
+import Link from "@/components/Common/LinkReact";
+import type { Entry } from "@/utils/sitemap";
+
+interface SitemapCardProps {
+  entry: Entry;
+}
+
+export default function SitemapCard({ entry }: SitemapCardProps) {
+  const { href, ogImage, description, keywords, fullUrl, title } = entry;
+
+  if (!href) return null;
+
+  return (
+    <Link
+      href={href}
+      className="glass-border rounded-box bg-base-100/60 hover:bg-base-100/100 block w-full overflow-hidden transition-all duration-200"
+      data-testid={`sitemap-card-${href}`}
+    >
+      <div className="flex flex-col">
+        <div className="rounded-box-inner relative overflow-hidden">
+          <figure className="bg-base-300 aspect-video h-full w-full">
+            {ogImage ? (
+              <img
+                src={ogImage}
+                alt={`OG image for ${title}`}
+                className="h-full w-full object-cover"
+                loading="lazy"
+              />
+            ) : (
+              <div className="flex h-full w-full items-center justify-center">
+                <span className="text-base-content/50 text-lg font-semibold">{title}</span>
+              </div>
+            )}
+          </figure>
+        </div>
+        <div className="m-5 mt-2 flex flex-col gap-3">
+          <div className="text-base-content/50 truncate text-xs">{fullUrl}</div>
+          <h3>{title}</h3>
+          {description && <div className="text-base-content/70 text-sm">{description}</div>}
+          {keywords && keywords.length > 0 && (
+            <div className="-mx-2 mt-2 -mb-2 flex flex-wrap gap-1">
+              {keywords.map((keyword) => (
+                <span key={keyword} className="badge badge-sm">
+                  {keyword}
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </Link>
+  );
+}

src/components/Sitemap/SitemapCard.tsx

@@ -0,0 +1,23 @@
+import SimpleSection from "@/components/Common/SimpleSection";
+import type { Entry } from "@/utils/sitemap";
+
+import SitemapCard from "./SitemapCard";
+
+interface SitemapSectionProps {
+  title: string;
+  entries: Entry[];
+}
+
+export default function SitemapSection({ title, entries }: SitemapSectionProps) {
+  if (!entries || entries.length === 0) return null;
+
+  return (
+    <SimpleSection title={title} wide grid>
+      {entries.map((entry) => (
+        <div key={`${entry.href || entry.title}-${entry.title}`} className="w-full">
+          <SitemapCard entry={entry} />
+        </div>
+      ))}
+    </SimpleSection>
+  );
+}