Move all content to page components.

Removes data and data-types folder. Instead, each page just initializes variables and passes them to the components.

Brand config is shared via file _brandConfig. The underscore acts as a ignore for routing.

Moves the content pages to the pages directory as well for an easier mental model.

Author: georg-schwarz

src/data-models/brand.ts …ndations/BrandTokens/BrandToken.types.tssrc/data-models/brand.ts renamed to src/components/foundations/BrandTokens/BrandToken.types.ts src/data-models/brand.ts renamed to src/components/foundations/BrandTokens/BrandToken.types.ts

@@ -1,4 +1,4 @@
-import type { SocialPlatform } from "@/data-models/social";
+export type SocialPlatform = "github" | "twitter" | "linkedin";
 
 export interface BrandColorScale {
   "50": string;

src/components/foundations/BrandTokens/BrandTokens.stories.tsx

@@ -1,13 +1,111 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import type { BrandConfig } from "./BrandToken.types";
+import { BrandTokens } from "./BrandTokens";
+
+export const brandConfig: BrandConfig = {
+  identity: {
+    siteName: "Idol or Bust!",
+    tagline: "Simple website software for research projects",
+    siteUrl: "https://riehlegroup.github.io",
+    language: "en",
+    locale: "en_US",
+    logoPath: "/apple-touch-icon.png",
+    faviconPath: "/favicon.svg",
+    appleTouchIconPath: "/apple-touch-icon.png",
+    manifestPath: "/site.webmanifest",
+    defaultOgImagePath: "/og-image.png",
+  },
+  organization: {
+    name: "Idol or Bust",
+    legalName: "Idol or Bust Research Project",
+    socialProfiles: ["https://github.com/riehlegroup/idolbust"],
+  },
+  theme: {
+    primary: {
+      "50": "239 246 255",
+      "100": "219 234 254",
+      "200": "191 219 254",
+      "300": "147 197 253",
+      "400": "96 165 250",
+      "500": "59 130 246",
+      "600": "37 99 235",
+      "700": "29 78 216",
+      "800": "30 64 175",
+      "900": "30 58 138",
+      "950": "23 37 84",
+    },
+    secondary: {
+      "50": "248 250 252",
+      "100": "241 245 249",
+      "200": "226 232 240",
+      "300": "203 213 225",
+      "400": "148 163 184",
+      "500": "100 116 139",
+      "600": "71 85 105",
+      "700": "51 65 85",
+      "800": "30 41 59",
+      "900": "15 23 42",
+      "950": "2 6 23",
+    },
+    themeColor: "#2563eb",
+    fonts: {
+      sans: ["Inter", "system-ui", "sans-serif"],
+      mono: ["JetBrains Mono", "monospace"],
+    },
+  },
+  designTokens: {
+    colors: {
+      story:
+        "Use primary for calls to action and links, secondary for typography and surface contrast. Keep primary usage focused to preserve emphasis.",
+      roles: [
+        { name: "primary", description: "CTAs, links, active states." },
+        {
+          name: "secondary",
+          description: "Text, borders, neutral backgrounds.",
+        },
+      ],
+    },
+    typeScale: {
+      story:
+        "Rely on Tailwind's default type scale for now; adjust later if brand voice changes.",
+      source: "tailwind-default",
+    },
+    spacing: {
+      story:
+        "Use Tailwind's default spacing scale to keep layout consistent and predictable.",
+      source: "tailwind-default",
+    },
+  },
+  links: {
+    primaryCtas: [
+      { label: "Learn More", href: "/about" },
+      { label: "Read Blog", href: "/blog" },
+    ],
+    appLinks: [],
+    social: [
+      { platform: "github", url: "https://github.com/riehlegroup/idolbust" },
+    ],
+  },
+  seo: {
+    titleTemplate: "%s | {siteName}",
+    defaultDescription:
+      "Simple website software for research projects that want to understand their user needs",
+    robots: "index,follow",
+    twitterCard: "summary_large_image",
+  },
+  blog: {
+    title: "Idol or Bust Blog",
+    description:
+      "Latest updates and insights from the Idol or Bust research project.",
+  },
+};
 
-import { BRAND_CONFIG } from "@/data/brand";
-import { BrandTokens } from "@/components";
 
 const meta = {
   title: "Foundations/Brand Tokens",
   component: BrandTokens,
   args: {
-    brand: BRAND_CONFIG,
+    brand: brandConfig,
   },
   parameters: {
     layout: "padded",

src/components/foundations/BrandTokens/BrandTokens.tsx

@@ -1,6 +1,6 @@
 import type { CSSProperties, ReactElement } from "react";
 
-import type { BrandColorScale, BrandConfig } from "@/data-models/brand";
+import type { BrandColorScale, BrandConfig } from "./BrandToken.types";
 
 export interface BrandTokensProps {
   brand: BrandConfig;

src/components/foundations/BrandTokens/index.ts

@@ -1,2 +1,3 @@
 export { BrandTokens } from "./BrandTokens";
 export type { BrandTokensProps } from "./BrandTokens";
+export * from "./BrandToken.types";

src/components/templates/AboutTemplate/AboutTemplate.types.ts

@@ -1,4 +1,3 @@
-import type { AboutSection, TeamMember } from "@/data-models/about";
 import type { SocialLink } from "@/components/organisms/SocialLinks";
 
 export interface AboutTemplateProps {
@@ -13,3 +12,15 @@ export interface AboutTemplateProps {
   socialLabel: string;
   socialLinks: readonly SocialLink[];
 }
+
+export interface AboutSection {
+  title: string;
+  body: string;
+}
+
+export interface TeamMember {
+  name: string;
+  role: string;
+  image?: string;
+  bio?: string;
+}

src/content.config.ts

@@ -2,7 +2,7 @@ import { defineCollection, z } from "astro:content";
 import { glob } from "astro/loaders";
 
 const blog = defineCollection({
-  loader: glob({ pattern: "**/*.{md,mdx}", base: "./src/content/blog" }),
+  loader: glob({ pattern: "**/*.{md,mdx}", base: "./src/pages/blog/_articles" }),
   schema: z.object({
     title: z.string(),
     description: z
@@ -23,7 +23,7 @@ const blog = defineCollection({
 });
 
 const resources = defineCollection({
-  loader: glob({ pattern: "**/*.{md,mdx}", base: "./src/content/resources" }),
+  loader: glob({ pattern: "**/*.{md,mdx}", base: "./src/pages/resources/_articles" }),
   schema: z.object({
     title: z.string(),
     description: z