Scripts and Tooling

Relevant source files

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

• package.json
• scripts/screenshot.js
• astro.config.ts
• tsconfig.json
• tailwind.config.ts
• src/pages/database/fuse.config.ts
• README.md

The CertDb project utilizes a combination of npm scripts and configuration files to automate tasks, manage dependencies, and configure the development and build environments. This tooling is crucial for maintaining code quality, streamlining the build process, and ensuring a consistent developer experience. The primary tools involved are Astro, TypeScript, Tailwind CSS, Puppeteer, and Sharp.

Sources: package.json, astro.config.ts, scripts/screenshot.js

Package Management and Scripts

The project's dependencies and development scripts are managed through pnpm and defined in package.json.

Sources: package.json, README.md:31-33

Dependencies

The project relies on several key libraries for its functionality and appearance.

Type	Key Dependencies	Description
Dependencies	astro, react, @astrojs/tailwind, fuse.js, radash	Core framework, UI library, styling, client-side search, and utility functions.
Dev Dependencies	puppeteer, sharp, tailwindcss, @types/react	Headless browser for scripting, image processing, CSS framework, and TypeScript type definitions.

Sources: package.json:9-27, package.json:28-34

NPM Scripts

Several scripts are defined in package.json to facilitate development and building the project.

Script	Command	Description
dev	astro dev	Starts the Astro development server.
start	astro dev	An alias for the dev script.
build	astro check && astro build && ... && node ./scripts/screenshot.js	Type-checks, builds the static site, and runs the screenshot generation script.
preview	astro preview	Serves the built static site locally for previewing.
astro	astro	Provides access to the Astro CLI for various commands.

Sources: package.json:5-8

Build Process

The build script orchestrates a multi-step process to create the production-ready static site. It ensures code quality through type-checking before proceeding with the build and asset generation.

Sources: package.json:7

The following diagram illustrates the flow of the build script.

This diagram shows the sequential execution of commands within the build script, including type checking, the Astro build, Puppeteer browser installation, and the final screenshot script.

Sources: package.json:7

Screenshot Generation Script

The project includes a custom script, scripts/screenshot.js, which automates the process of taking a screenshot of the application's database page. This script uses Puppeteer for headless browser control and Sharp for image optimization.

Sources: scripts/screenshot.js

Purpose

The script's main goal is to generate an optimized WebP screenshot of the /database/ page. This is executed as the final step of the build process.

Sources: scripts/screenshot.js:1-6, package.json:7

Execution Flow

The script follows a specific sequence of operations to generate the screenshot.

1. Start Dev Server: It programmatically starts the Astro development server using npm run dev.
2. Initialize Puppeteer: A headless Chrome browser instance is launched.
3. Navigate and Prepare: The browser navigates to http://localhost:4321/database/. It then executes client-side JavaScript to remove the cookie banner and scroll the page down to hide the header.
4. Capture Screenshot: Puppeteer takes a screenshot of the viewport.
5. Process Image: The captured screenshot buffer is processed by Sharp. It is cropped to remove 300px from the left and right sides and then converted to WebP format with 80% quality.
6. Save Image: The final image is saved into the ./dist/assets directory with a dynamically determined filename.
7. Shutdown: The browser is closed, and the Astro development server process is killed.

The sequence diagram below details the interactions between the script, the Astro server, and the headless browser.

Project Configuration

The project's behavior is heavily defined by a set of configuration files for Astro, TypeScript, and Tailwind CSS.

Astro Configuration

astro.config.ts is the central configuration file for the Astro framework.

Configuration	Value	Description
site	https://certdb.cyberpath-hq.com	The production URL of the site.
output	static	Specifies that the project builds to static HTML, CSS, and JS.
build.assets	assets	Defines the directory name for assets within the build output.
integrations	tailwind, react, sitemap, mdx	Enables integrations for styling, UI components, sitemap generation, and MDX support.

Sources: astro.config.ts:11-28

TypeScript Configuration

tsconfig.json configures the TypeScript compiler. It extends Astro's strict configuration and defines path aliases for cleaner module imports.

• extends: astro/tsconfigs/strict
• jsxImportSource: react
• Path Aliases:
  • @components/*: src/components/*
  • @layouts/*: src/layouts/*
  • @assets/*: src/assets/*

Sources: tsconfig.json:2-16

Tailwind CSS Configuration

tailwind.config.ts configures the Tailwind CSS framework. It defines content paths, theme extensions, and plugins.

• content: Specifies files to scan for Tailwind classes (./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}).
• darkMode: class
• Theme Extensions:
  • Font Family: Adds "Nunito Variable" as the primary sans-serif font.
  • Animations: Defines a custom bounce-horizontal animation.
• Plugins: Uses @tailwindcss/forms, @tailwindcss/typography, and @tailwindcss/aspect-ratio.

Sources: tailwind.config.ts:6-33

Search Configuration

The client-side search functionality, powered by Fuse.js, is configured in src/pages/database/fuse.config.ts. This file defines which fields of the certification data are searchable and their relative importance (weight).

Field Name	Weight
title	0.7
acronym	0.6
aliases	0.5
provider	0.4
career_paths	0.3

A higher weight means matches in that field will have a greater impact on the search result's score. The search is case-insensitive.

Sources: src/pages/database/fuse.config.ts:4-23