update: Centralized defaultTheme in siteConfig.ts

src/components/SocialFooter.tsx

@@ -2,7 +2,7 @@ import siteConfig from "../config/siteConfig";
 import type { SocialLink } from "../config/siteConfig";
 import {
   GithubLogo,
-  TwitterLogo,
+  XLogo,
   LinkedinLogo,
   InstagramLogo,
   YoutubeLogo,
@@ -16,7 +16,7 @@ import {
 // Exported for reuse in header social icons
 export const platformIcons: Record<SocialLink["platform"], Icon> = {
   github: GithubLogo,
-  twitter: TwitterLogo,
+  twitter: XLogo,
   linkedin: LinkedinLogo,
   instagram: InstagramLogo,
   youtube: YoutubeLogo,

src/config/siteConfig.ts

@@ -80,6 +80,11 @@ export interface GitHubRepoConfig {
 // default font family options: "serif" (New York), "sans" (system fonts), "monospace" (IBM Plex Mono)
 export type FontFamily = "serif" | "sans" | "monospace";
 
+// Theme configuration
+// Controls the default color theme for the site
+// Options: "dark", "light", "tan", "cloud"
+export type Theme = "dark" | "light" | "tan" | "cloud";
+
 // Right sidebar configuration
 // Shows CopyPageDropdown in a right sidebar on posts/pages at 1135px+ viewport width
 export interface RightSidebarConfig {
@@ -274,6 +279,9 @@ export interface SiteConfig {
   // Font family configuration
   fontFamily: FontFamily;
 
+  // Default theme configuration
+  defaultTheme?: Theme;
+
   // Featured section configuration
   featuredViewMode: "cards" | "list";
   featuredTitle: string; // Featured section title (e.g., "Get started:", "Featured", "Popular")
@@ -374,6 +382,10 @@ export const siteConfig: SiteConfig = {
   // Options: "serif" (New York), "sans" (system fonts), "monospace" (IBM Plex Mono)
   fontFamily: "sans",
 
+  // Default theme configuration
+  // Options: "dark", "light", "tan", "cloud"
+  defaultTheme: "tan",
+
   // Featured section configuration
   // viewMode: 'list' shows bullet list, 'cards' shows card grid with excerpts
   featuredViewMode: "cards",

src/context/ThemeContext.tsx

@@ -1,10 +1,8 @@
 import { createContext, useContext, useState, useEffect, ReactNode } from "react";
+import { siteConfig, Theme } from "../config/siteConfig";
 
-// Available theme options
-type Theme = "dark" | "light" | "tan" | "cloud";
-
-// Default theme for new users (tan matches warm aesthetic)
-const DEFAULT_THEME: Theme = "tan";
+// Default theme for new users (reads from siteConfig, falls back to "tan")
+const DEFAULT_THEME: Theme = siteConfig.defaultTheme || "tan";
 
 interface ThemeContextType {
   theme: Theme;

src/pages/Post.tsx

@@ -13,7 +13,8 @@ import ContactForm from "../components/ContactForm";
 import { extractHeadings } from "../utils/extractHeadings";
 import { useSidebar } from "../context/SidebarContext";
 import { format, parseISO } from "date-fns";
-import { ArrowLeft, Link as LinkIcon, Twitter, Rss, Tag } from "lucide-react";
+import { ArrowLeft, Link as LinkIcon, Rss, Tag } from "lucide-react";
+import { XLogo, LinkedinLogo } from "@phosphor-icons/react";
 import { useState, useEffect } from "react";
 import siteConfig from "../config/siteConfig";
 
@@ -452,6 +453,14 @@ export default function Post({
     );
   };
 
+  const handleShareLinkedIn = () => {
+    const url = encodeURIComponent(window.location.href);
+    window.open(
+      `https://www.linkedin.com/sharing/share-offsite/?url=${url}`,
+      "_blank",
+    );
+  };
+
   // Check if this post should use docs layout
   if (post.docsSection && siteConfig.docsSection?.enabled) {
     const docsHeadings = extractHeadings(post.content);
@@ -639,10 +648,18 @@ export default function Post({
               <button
                 onClick={handleShareTwitter}
                 className="share-button"
-                aria-label="Share on Twitter"
+                aria-label="Share on X"
               >
-                <Twitter size={16} />
-                <span>Tweet</span>
+                <XLogo size={16} weight="bold" />
+                <span>Post</span>
+              </button>
+              <button
+                onClick={handleShareLinkedIn}
+                className="share-button"
+                aria-label="Share on LinkedIn"
+              >
+                <LinkedinLogo size={16} weight="bold" />
+                <span>LinkedIn</span>
               </button>
               <a
                 href="/rss.xml"