Skip to content

GEMINI.md

Latest commit

 

History

History
98 lines (76 loc) · 3.76 KB

GEMINI.md

File metadata and controls

98 lines (76 loc) · 3.76 KB

Project Overview

This project is a SvelteKit-based interactive web application, likely designed for data-driven storytelling or a visual presentation related to "Formula Code" and wine analysis. It leverages the "Svelte Starter" template from The Pudding, incorporating features for scrollytelling, data visualization, and content management via Google Docs.

Key Technologies:

  • Framework: SvelteKit (using @sveltejs/adapter-static for static site generation).
  • Bundler: Vite.
  • Visualization: D3.js and LayerCake for charts and graphics.
  • Content Management: ArchieML for integrating content from Google Docs and Sheets.
  • Styling: PostCSS with Autoprefixer, and Style Dictionary for design token management.
  • Icons: Lucide.

Architecture:

  • Entry Point: src/routes/+page.svelte serves as the main entry, setting up context and rendering src/components/Index.svelte.
  • Main Component: src/components/Index.svelte orchestrates the primary sections: Header, Intro, ChartScroll (Scrollytelling), Agent Cards, and Leaderboard.
  • Data Pipeline: content is defined in Google Docs/Sheets, configured in google.config.js, and fetched into src/data/ using npm run gdoc.
  • State Management: Svelte stores in src/stores/ handle app-wide state like scroll position (scrollY), viewport dimensions (viewport), and custom logic (misc.js).

Building and Running

Prerequisites:

  • Node.js (v18.12.0 or higher recommended).
  • npm or pnpm.

Key Commands:

  • Install Dependencies:

    npm install
# or
pnpm install

  • Start Development Server:

    npm run dev

    Runs the app locally (usually at http://localhost:5173).

  • Build for Production:

    npm run build

    Generates a static build in the build/ directory.

  • Preview Production Build:

    npm run preview

  • Fetch Content (Google Docs/Sheets):

    npm run gdoc

    Updates data files in src/data/ based on google.config.js.

  • Sync Styles:

    npm run style

    Regenerates style definitions from properties/ into src/styles/ and src/data/ using Style Dictionary.

  • Format/Lint:

    npm run format
npm run lint

Additional Tasks: The tasks/ directory contains specialized scripts for data processing (e.g., wine-analysis.js, imgDownload.js). These can be run via npm run <script-name> as defined in package.json.

Development Conventions

  • Directory Structure:

    • src/routes/: Application pages.
    • src/components/: Reusable Svelte components.
    • src/components/helpers/: Utility components (Slider, Toggle, etc.).
    • src/components/layercake/: Chart components.
    • src/data/: Data files (JSON, CSV).
    • src/stores/: Svelte stores.
    • src/utils/: JavaScript utility functions.
    • src/styles/: Global CSS and font definitions.

  • Styling:

    • Global styles are in src/styles/app.css.
    • Design tokens (colors, fonts) should be managed in properties/ and synced via npm run style.
    • Component-scoped styles are preferred within .svelte files.

  • Data Integration:

    • Use src/data/copy.json for text content (managed via Google Docs).
    • Use getContext("data") or imports from $data/ to access data in components.

  • Code Style:

    • Prettier is used for formatting.
    • Svelte components typically follow the script -> markup -> style order.