create-audora-next 0.1.7 → 2.0.0

package/templates/blog/src/lib/seo.ts

@@ -0,0 +1,190 @@
+import type {
+  WebSite,
+  Organization,
+  BreadcrumbList,
+  WithContext,
+} from "schema-dts";
+import type { Metadata, Viewport } from "next";
+import { SITE_CONFIG, META_THEME_COLORS } from "@/config/site";
+
+// Page-Specific Metadata
+interface PageMetadataProps {
+  title: string;
+  description?: string;
+  image?: string;
+  path?: string;
+}
+
+export function getPageMetadata({
+  title,
+  description,
+  image,
+  path = "",
+}: PageMetadataProps): Metadata {
+  const metaTitle = `${title} - ${SITE_CONFIG.name}`;
+  const metaDescription = description ?? SITE_CONFIG.description;
+  const metaImage = image ?? SITE_CONFIG.ogImage;
+  const sitePath = path
+    ? `${SITE_CONFIG.url.replace(/\/$/, "")}/${path.replace(/^\//, "")}`
+    : SITE_CONFIG.url;
+
+  return {
+    metadataBase: new URL(SITE_CONFIG.url),
+    title,
+    description: metaDescription,
+    alternates: {
+      canonical: sitePath,
+    },
+    openGraph: {
+      title: metaTitle,
+      description: metaDescription,
+      url: sitePath,
+      siteName: SITE_CONFIG.name,
+      images: [
+        {
+          url: metaImage,
+          width: 1200,
+          height: 630,
+          alt: title,
+        },
+      ],
+      locale: "en_US",
+      type: "website",
+    },
+    twitter: {
+      title: metaTitle,
+      description: metaDescription,
+      card: "summary_large_image",
+      images: [metaImage],
+    },
+  };
+}
+
+// Default Site Metadata
+export function getMetadata(): Metadata {
+  return {
+    metadataBase: new URL(SITE_CONFIG.url),
+    alternates: {
+      canonical: "/",
+    },
+
+    title: {
+      template: `%s - ${SITE_CONFIG.name}`,
+      default: `${SITE_CONFIG.name} - ${SITE_CONFIG.tagline}`,
+    },
+
+    description: SITE_CONFIG.description,
+    keywords: SITE_CONFIG.keywords,
+    authors: [
+      {
+        name: SITE_CONFIG.name,
+        url: SITE_CONFIG.url,
+      },
+    ],
+
+    creator: SITE_CONFIG.name,
+    openGraph: {
+      siteName: SITE_CONFIG.name,
+      url: SITE_CONFIG.url,
+      type: "website",
+      locale: "en_US",
+      title: `${SITE_CONFIG.name} - ${SITE_CONFIG.tagline}`,
+      description: SITE_CONFIG.shortDescription,
+      images: [
+        {
+          url: SITE_CONFIG.ogImage,
+          width: 1200,
+          height: 630,
+          alt: SITE_CONFIG.name,
+        },
+      ],
+    },
+
+    twitter: {
+      card: "summary_large_image",
+      site: SITE_CONFIG.twitterHandle,
+      creator: SITE_CONFIG.twitterHandle,
+      title: `${SITE_CONFIG.name} - ${SITE_CONFIG.tagline}`,
+      description: SITE_CONFIG.shortDescription,
+      images: [SITE_CONFIG.ogImage],
+    },
+
+    icons: {
+      icon: [
+        { url: "/favicon/favicon.ico", sizes: "any" },
+        { url: "/favicon/favicon.svg", type: "image/svg+xml" },
+      ],
+      apple: {
+        url: "/favicon/apple-touch-icon.png",
+        type: "image/png",
+        sizes: "180x180",
+      },
+    },
+
+    robots: {
+      index: true,
+      follow: true,
+    },
+  };
+}
+
+// Viewport with Theme Colors
+export function getViewport(): Viewport {
+  return {
+    width: "device-width",
+    initialScale: 1,
+    maximumScale: 5,
+    themeColor: [
+      {
+        media: "(prefers-color-scheme: light)",
+        color: META_THEME_COLORS.light,
+      },
+      { media: "(prefers-color-scheme: dark)", color: META_THEME_COLORS.dark },
+    ],
+  };
+}
+
+// Structured Data (JSON-LD)
+export function getWebSiteJsonLd(): WithContext<WebSite> {
+  return {
+    "@context": "https://schema.org",
+    "@type": "WebSite",
+    name: SITE_CONFIG.name,
+    url: SITE_CONFIG.url,
+    alternateName: SITE_CONFIG.alternateNames,
+  };
+}
+
+export function getOrganizationJsonLd(): WithContext<Organization> {
+  return {
+    "@context": "https://schema.org",
+    "@type": "Organization",
+    name: SITE_CONFIG.name,
+    url: SITE_CONFIG.url,
+    logo: `${SITE_CONFIG.url}/favicon/favicon.svg`,
+    sameAs: [
+      `https://twitter.com/${SITE_CONFIG.twitterHandle.replace("@", "")}`,
+      "https://github.com/AudoraLabs",
+    ],
+  };
+}
+
+interface BreadcrumbItem {
+  name: string;
+  url: string;
+}
+
+export function getBreadcrumbJsonLd(
+  items: BreadcrumbItem[],
+): WithContext<BreadcrumbList> {
+  return {
+    "@context": "https://schema.org",
+    "@type": "BreadcrumbList",
+    itemListElement: items.map((item, index) => ({
+      "@type": "ListItem",
+      position: index + 1,
+      name: item.name,
+      item: item.url,
+    })),
+  };
+}

package/templates/blog/src/lib/utils.ts

@@ -0,0 +1,83 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+const MONTH_NAMES = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec",
+] as const;
+
+/**
+ * Formats employment period date strings for display.
+ * - "MM.YYYY" → "Aug 2025"
+ * - "YYYY" → "2022"
+ * - "Present" → "Present"
+ */
+export function formatEmploymentDate(value: string): string {
+  if (value === "Present") return value;
+  const mmYyyy = /^(\d{1,2})\.(\d{4})$/.exec(value);
+  if (mmYyyy) {
+    const monthIndex = parseInt(mmYyyy[1], 10) - 1;
+    const year = mmYyyy[2];
+    if (monthIndex >= 0 && monthIndex <= 11) {
+      return `${MONTH_NAMES[monthIndex]} ${year}`;
+    }
+  }
+  if (/^\d{4}$/.test(value)) return value;
+  return value;
+}
+
+/**
+ * Formats an ISO or date-only string for display as "Jan 03, 2026".
+ */
+export function formatDateDisplay(date: string): string {
+  if (!date.includes("T")) {
+    date = `${date}T00:00:00`;
+  }
+  return new Date(date).toLocaleDateString("en-US", {
+    month: "short",
+    day: "2-digit",
+    year: "numeric",
+  });
+}
+
+export function formatDate(date: string) {
+  const currentDate = new Date().getTime();
+  if (!date.includes("T")) {
+    date = `${date}T00:00:00`;
+  }
+  const targetDate = new Date(date).getTime();
+  const timeDifference = Math.abs(currentDate - targetDate);
+  const daysAgo = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
+
+  const fullDate = new Date(date).toLocaleString("en-us", {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  });
+
+  if (daysAgo < 1) {
+    return "Today";
+  } else if (daysAgo < 7) {
+    return `${fullDate} (${daysAgo}d ago)`;
+  } else if (daysAgo < 30) {
+    return `${fullDate} (${Math.floor(daysAgo / 7)}w ago)`;
+  } else if (daysAgo < 365) {
+    return `${fullDate} (${Math.floor(daysAgo / 30)}mo ago)`;
+  } else {
+    return `${fullDate} (${Math.floor(daysAgo / 365)}y ago)`;
+  }
+}

package/templates/blog/src/styles/globals.css

@@ -0,0 +1,99 @@
+@import "tailwindcss";
+
+/* Custom dark variant for Tailwind CSS v4 */
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* Root color variables using oklch for a muted, premium look */
+:root {
+  /* Muted Slate/Zinc Tone */
+  --background: oklch(0.985 0.002 260); /* Very softened white */
+  --foreground: oklch(0.21 0.015 260); /* Muted slate black */
+  
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.21 0.015 260);
+  
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.21 0.015 260);
+  
+  --primary: oklch(0.21 0.02 260); /* Deep slate primary */
+  --primary-foreground: oklch(0.985 0 0);
+  
+  --secondary: oklch(0.96 0.005 260);
+  --secondary-foreground: oklch(0.21 0.015 260);
+  
+  --muted: oklch(0.96 0.005 260);
+  --muted-foreground: oklch(0.55 0.015 260); /* Softer muted text */
+  
+  --accent: oklch(0.96 0.005 260);
+  --accent-foreground: oklch(0.21 0.015 260);
+  
+  --destructive: oklch(0.65 0.2 23);
+  --destructive-foreground: oklch(0.985 0 0);
+  
+  --border: oklch(0.92 0.005 260);
+  --input: oklch(0.92 0.005 260);
+  --ring: oklch(0.21 0.015 260);
+  
+  --radius: 0.625rem;
+  
+  /** Content max width – change here to update hero, header, and blog layout */
+  --content-max-width: 64rem; /* 1024px = 5xl */
+}
+
+.dark {
+  --background: #0b0d0e; /* Deep dark bg */
+  --foreground: oklch(0.92 0.005 260); /* Softened white */
+  
+  --card: oklch(0.12 0.01 260);
+  --card-foreground: oklch(0.92 0.005 260);
+  
+  --popover: oklch(0.12 0.01 260);
+  --popover-foreground: oklch(0.92 0.005 260);
+  
+  --primary: oklch(0.92 0.005 260);
+  --primary-foreground: oklch(0.12 0.01 260);
+  
+  --secondary: oklch(0.2 0.01 260);
+  --secondary-foreground: oklch(0.92 0.005 260);
+  
+  --muted: oklch(0.2 0.01 260);
+  --muted-foreground: oklch(0.65 0.01 260);
+  
+  --accent: oklch(0.2 0.01 260);
+  --accent-foreground: oklch(0.92 0.005 260);
+  
+  --destructive: oklch(0.5 0.2 23);
+  --destructive-foreground: oklch(0.92 0.005 260);
+  
+  --border: oklch(0.22 0.01 260);
+  --input: oklch(0.22 0.01 260);
+  --ring: oklch(0.8 0 0);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-border: var(--border);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-card: var(--card);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --radius-radius: var(--radius);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
+}

package/templates/blog/src/utils/cn.ts

@@ -0,0 +1,7 @@
+import type { ClassValue } from "clsx";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export const cn = (...inputs: ClassValue[]) => {
+  return twMerge(clsx(inputs));
+};

package/templates/blog/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}