/betty-alagwu/heyme

Wiki directory

Browse AI-generated documentation for any repository.

Layout and Navigation

Relevant source files

The following files were used as context for generating this wiki page:

The layout and navigation system in Heyme provides the foundational structure and user interface shell for the entire application. Built using Next.js, React, and styled with Tailwind CSS, it ensures a consistent look and feel across all pages. The system is composed of several key components that work together to render the page structure, including the header, main content area, and footer, along with a configurable navigation menu.

This system is designed to be modular, with distinct components for the overall page layout, the site header, and the main navigation links. Configuration for navigation items and site metadata is centralized, making it easy to update links and branding. The application also supports both light and dark themes, which are applied at the root level and cascade through all layout and UI components.

Core Application Structure

The base HTML and application shell are defined in _document.tsx and _app.tsx, which are special files in Next.js that control the rendering of every page.

`_document.tsx`

This file customizes the server-rendered <html> and <body> tags. It is used to set global attributes and include static assets in the <head>.

Sets the document language to en.
Initializes the dark mode class (className="dark") and color scheme on the <html> element.
Links favicons and the web manifest file in the <head>.
Applies base background and text colors for both light and dark themes to the <body> tag.

Sources: pages/_document.tsx

`_app.tsx`

This component is the primary entry point for the application and wraps every page. It is used to inject global providers, styles, and scripts.

Themeing: Wraps the application in ThemeProvider from next-themes to enable light/dark mode switching. The theme is applied via a class on the <html> element.
Fonts: Imports and applies the "Inter" font as a CSS variable (--font-sans).
Global Styles: Imports styles/globals.css, which includes Tailwind CSS base, components, and utilities.
Analytics: Integrates Vercel Analytics and Highlight.run for monitoring.

The following diagram illustrates the component hierarchy from the document root down to the individual page content.

Generating architecture diagram...

This diagram shows the nesting of core Next.js files and application-specific layout components.

Sources: pages/_app.tsx, pages/_document.tsx, components/layout.tsx, pages/index.tsx:18

Main Layout and Components

The visual structure of the application is managed by a set of reusable React components.

`Layout` Component

The Layout component is a simple but crucial wrapper that enforces a consistent structure on pages that use it. It renders the SiteHeader at the top, followed by the page-specific content passed as children.

File: components/layout.tsx

import { SiteHeader } from "@/components/site-header"

interface LayoutProps {
  children: React.ReactNode
}

export function Layout({ children }: LayoutProps) {
  return (
    <>
      <SiteHeader />
      <main className="px-6 md:px-4">{children}</main>
    </>
  )
}

This component is used in pages like index.tsx to wrap the main page content, ensuring the header is always present.

Sources: components/layout.tsx, pages/index.tsx:18

`SiteHeader` Component

The SiteHeader component creates a sticky header bar at the top of the viewport. It contains the main navigation and links to external social profiles.

Structure: Uses a <header> element with a sticky position and a bottom border.
Content:
- Renders the MainNav component, passing navigation items from siteConfig.
- Includes links to GitHub and Twitter, also configured in siteConfig.
- Integrates the ThemeToggle component for switching between light and dark modes.

Sources: components/site-header.tsx

`MainNav` Component

The MainNav component is responsible for rendering the primary navigation links and the site branding.

Branding: Displays the site logo (hello.png) and name (Heyme from siteConfig.name), which links to the homepage.
Navigation Links: It receives an items prop (an array of NavItem) and maps over it to render a Link for each item. The navigation data is sourced from siteConfig.mainNav.
Responsiveness: It has different layouts for mobile and desktop screens, using Tailwind's responsive prefixes (md:).

Sources: components/main-nav.tsx

`Footer` Component

A simple Footer component is included at the bottom of the main page, displaying a "Built with ❤️" message and a link to the author's Twitter profile.

Sources: components/footer.tsx, pages/index.tsx:94

Navigation Configuration

The application's navigation structure and related metadata are centralized in config/site.ts for easy management.

The siteConfig object defines the site's name, description, navigation links, and social media URLs.

File: config/site.ts

import { NavItem } from "@/types/nav"

interface SiteConfig {
  name: string
  description: string
  mainNav: NavItem[]
  links: {
    twitter: string
    github: string
  }
}

export const siteConfig: SiteConfig = {
  name: "Heyme",
  description:
    "This project  allows users to create a video message and schedule it to be sent to their future self at a specified date and time.",
  mainNav: [
    {
      title: "",
      href: "/",
    },
  ],
  links: {
    twitter: "https://twitter.com/bettyalagwu",
    github: "https://github.com/betty-alagwu/heyme",
  },
}

The mainNav array, although currently containing only a single link to the homepage, is designed to be extensible. The MainNav component consumes this array to dynamically generate the navigation menu.

Navigation Data Flow

The following diagram shows how navigation data flows from the configuration file to the rendered UI components.

Generating architecture diagram...

This diagram illustrates the flow of configuration data to the UI components.

Sources: config/site.ts, components/site-header.tsx:15, components/main-nav.tsx:25

Configuration Details

Key	Type	Description	Source File
`name`	`string`	The name of the site, used in the header.	`config/site.ts:13`
`mainNav`	`NavItem[]`	An array of navigation items to be displayed in the `MainNav` component.	`config/site.ts:16`
`links`	`object`	An object containing URLs for external links like Twitter and GitHub.	`config/site.ts:21`

Styling and Theming

Styling is managed primarily by Tailwind CSS, with a class-based dark mode strategy.

Tailwind CSS: The configuration in tailwind.config.js specifies the content paths to scan for utility classes. It also defines custom fonts and keyframe animations.
Dark Mode: Enabled by darkMode: ["class"] in the Tailwind config and controlled by ThemeProvider in _app.tsx. Styles for dark mode are applied using the dark: variant in class names (e.g., dark:bg-slate-900).
UI Primitives: The project uses headless UI components from Radix UI (e.g., @radix-ui/react-navigation-menu), which are then styled with Tailwind CSS, as seen in the components/ui directory.

Sources: tailwind.config.js, pages/_app.tsx:27, styles/globals.css, components/ui/navigation-menu.tsx

Layout and Navigation

Relevant source files

The following files were used as context for generating this wiki page:

Core Application Structure

The base HTML and application shell are defined in _document.tsx and _app.tsx, which are special files in Next.js that control the rendering of every page.

`_document.tsx`

This file customizes the server-rendered <html> and <body> tags. It is used to set global attributes and include static assets in the <head>.

Sets the document language to en.
Initializes the dark mode class (className="dark") and color scheme on the <html> element.
Links favicons and the web manifest file in the <head>.
Applies base background and text colors for both light and dark themes to the <body> tag.

Sources: pages/_document.tsx

`_app.tsx`

This component is the primary entry point for the application and wraps every page. It is used to inject global providers, styles, and scripts.

Themeing: Wraps the application in ThemeProvider from next-themes to enable light/dark mode switching. The theme is applied via a class on the <html> element.
Fonts: Imports and applies the "Inter" font as a CSS variable (--font-sans).
Global Styles: Imports styles/globals.css, which includes Tailwind CSS base, components, and utilities.
Analytics: Integrates Vercel Analytics and Highlight.run for monitoring.

The following diagram illustrates the component hierarchy from the document root down to the individual page content.

Generating architecture diagram...

This diagram shows the nesting of core Next.js files and application-specific layout components.

Sources: pages/_app.tsx, pages/_document.tsx, components/layout.tsx, pages/index.tsx:18

Main Layout and Components

The visual structure of the application is managed by a set of reusable React components.

`Layout` Component

File: components/layout.tsx

import { SiteHeader } from "@/components/site-header"

interface LayoutProps {
  children: React.ReactNode
}

export function Layout({ children }: LayoutProps) {
  return (
    <>
      <SiteHeader />
      <main className="px-6 md:px-4">{children}</main>
    </>
  )
}

This component is used in pages like index.tsx to wrap the main page content, ensuring the header is always present.

Sources: components/layout.tsx, pages/index.tsx:18

`SiteHeader` Component

The SiteHeader component creates a sticky header bar at the top of the viewport. It contains the main navigation and links to external social profiles.

Structure: Uses a <header> element with a sticky position and a bottom border.
Content:
- Renders the MainNav component, passing navigation items from siteConfig.
- Includes links to GitHub and Twitter, also configured in siteConfig.
- Integrates the ThemeToggle component for switching between light and dark modes.

Sources: components/site-header.tsx

`MainNav` Component

The MainNav component is responsible for rendering the primary navigation links and the site branding.

Branding: Displays the site logo (hello.png) and name (Heyme from siteConfig.name), which links to the homepage.
Navigation Links: It receives an items prop (an array of NavItem) and maps over it to render a Link for each item. The navigation data is sourced from siteConfig.mainNav.
Responsiveness: It has different layouts for mobile and desktop screens, using Tailwind's responsive prefixes (md:).

Sources: components/main-nav.tsx

`Footer` Component

A simple Footer component is included at the bottom of the main page, displaying a "Built with ❤️" message and a link to the author's Twitter profile.

Sources: components/footer.tsx, pages/index.tsx:94

Navigation Configuration

The application's navigation structure and related metadata are centralized in config/site.ts for easy management.

The siteConfig object defines the site's name, description, navigation links, and social media URLs.

File: config/site.ts

import { NavItem } from "@/types/nav"

interface SiteConfig {
  name: string
  description: string
  mainNav: NavItem[]
  links: {
    twitter: string
    github: string
  }
}

export const siteConfig: SiteConfig = {
  name: "Heyme",
  description:
    "This project  allows users to create a video message and schedule it to be sent to their future self at a specified date and time.",
  mainNav: [
    {
      title: "",
      href: "/",
    },
  ],
  links: {
    twitter: "https://twitter.com/bettyalagwu",
    github: "https://github.com/betty-alagwu/heyme",
  },
}

Navigation Data Flow

The following diagram shows how navigation data flows from the configuration file to the rendered UI components.

Generating architecture diagram...

This diagram illustrates the flow of configuration data to the UI components.

Sources: config/site.ts, components/site-header.tsx:15, components/main-nav.tsx:25

Configuration Details

Key	Type	Description	Source File
`name`	`string`	The name of the site, used in the header.	`config/site.ts:13`
`mainNav`	`NavItem[]`	An array of navigation items to be displayed in the `MainNav` component.	`config/site.ts:16`
`links`	`object`	An object containing URLs for external links like Twitter and GitHub.	`config/site.ts:21`

Styling and Theming

Styling is managed primarily by Tailwind CSS, with a class-based dark mode strategy.

Tailwind CSS: The configuration in tailwind.config.js specifies the content paths to scan for utility classes. It also defines custom fonts and keyframe animations.
Dark Mode: Enabled by darkMode: ["class"] in the Tailwind config and controlled by ThemeProvider in _app.tsx. Styles for dark mode are applied using the dark: variant in class names (e.g., dark:bg-slate-900).
UI Primitives: The project uses headless UI components from Radix UI (e.g., @radix-ui/react-navigation-menu), which are then styled with Tailwind CSS, as seen in the components/ui directory.

Sources: tailwind.config.js, pages/_app.tsx:27, styles/globals.css, components/ui/navigation-menu.tsx

Layout and Navigation

Core Application Structure

_document.tsx

_app.tsx

Main Layout and Components

Layout Component

SiteHeader Component

MainNav Component

Footer Component

Navigation Configuration

Navigation Data Flow

Configuration Details

Styling and Theming

Layout and Navigation

Core Application Structure

_document.tsx

_app.tsx

Main Layout and Components

Layout Component

SiteHeader Component

MainNav Component

Footer Component

Navigation Configuration

Navigation Data Flow

Configuration Details

Styling and Theming

`_document.tsx`

`_app.tsx`

`Layout` Component

`SiteHeader` Component

`MainNav` Component

`Footer` Component

`_document.tsx`

`_app.tsx`

`Layout` Component

`SiteHeader` Component

`MainNav` Component

`Footer` Component