Configuration Files

Relevant source files

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

• astro.config.ts
• tailwind.config.ts
• tsconfig.json
• src/content.config.ts
• package.json

The CyberPath project relies on a set of configuration files to manage its build process, development environment, dependencies, styling, and content structure. These files are essential for defining the project's architecture, integrating various technologies, and ensuring code quality and consistency. They orchestrate how the Astro framework builds the site, how TypeScript is compiled, how content is validated, and how the user interface is styled with Tailwind CSS.

This document provides a detailed breakdown of the key configuration files, explaining their purpose and the specific settings used within the CyberPath application.

package.json

This file is the manifest for the Node.js project. It defines project metadata, lists dependencies required for both development and production, and specifies scripts for common tasks like starting the development server, building the application, and running checks.

Sources: package.json

Scripts

The scripts section provides convenient commands for automating development and build tasks.

Script	Description
dev	Starts the Astro development server.
start	An alias for the dev script.
build	Runs a sequence of commands: astro check for type-checking, astro build to create the production site, disables the dev toolbar, installs Chrome via Puppeteer, and runs the screenshot.js script.
preview	Starts a local server to preview the production build.
astro	Provides direct access to the Astro CLI.

Sources: package.json:5-11

The build script orchestrates a multi-step process to prepare the application for deployment.

Sources: package.json:8

Dependencies

The project uses several key libraries, managed as dependencies and devDependencies.

Key Production Dependencies:

• astro: The core web framework.
• @astrojs/react: Enables the use of React components.
• @astrojs/tailwind: Integrates Tailwind CSS.
• @astrojs/sitemap: Generates a sitemap.
• @sentry/astro: Integrates Sentry for error monitoring.
• fuse.js: Used for client-side fuzzy searching.
• react: The React library.

Key Development Dependencies:

• @tailwindcss/forms: A Tailwind CSS plugin for styling form elements.
• puppeteer: Used in the build script to take screenshots.
• sharp: Used for image processing, likely with screenshots.
• typescript: Provides static typing for the project.

Sources: package.json:13-31, package.json:32-38

astro.config.ts

This is the main configuration file for the Astro framework. It defines the site URL, configures integrations with other tools, and specifies build options.

Sources: astro.config.ts

Integrations

Astro's functionality is extended through a series of integrations. The following diagram shows the integrations configured for this project.

Sources: astro.config.ts:14-27

Integration	Purpose	Configuration Notes
tailwind	Integrates Tailwind CSS for styling.	nesting: true is enabled.
sentry	Adds Sentry for error tracking.	Enabled only in development (import.meta.env.DEV).
spotlightjs	Adds Spotlight.js for debugging.	No specific configuration shown.
react	Allows rendering of React (.tsx) components.	No specific configuration shown.
sitemap	Automatically generates a sitemap.xml file.	No specific configuration shown.
mdx	Enables the use of MDX files, allowing components within Markdown.	extendMarkdownConfig: true and gfm: true are set.

Sources: astro.config.ts:14-27

Build Configuration

The build object specifies output settings for the production build.

• assets: The output directory for compiled assets is set to "assets".

Sources: astro.config.ts:28-30

src/content.config.ts

This file configures Astro's Content Collections feature. It defines schemas for different types of content, ensuring that all markdown or MDX files within a collection adhere to a specific structure and data types.

Sources: src/content.config.ts

certifications Collection

The project defines a single collection named certifications. The schema is defined using Zod, which provides validation for the frontmatter of each content file.

The schema for the certifications collection is defined as follows:

// src/content.config.ts:7-19
const certifications = defineCollection({
    loader: glob({ pattern: '**/*.{md,mdx}', base: "./src/content/certifications" }),
    schema: ({image}) =>
                z.object({
                    title:           z.string(),
                    acronym:         z.string(),
                    last_updated_at: z.date(),
                    image:           image(),
                    reference:       z.string(),
                    aliases:         z.array(z.string()).optional(),
                    draft:           z.boolean().default(false),
                    career_paths:    z.array(z.enum(CareerPathsList)),
                    price:           z.string(),
                    currency:        z.string(),
                }),
});

The following diagram represents the entity relationship for the certifications schema.

Sources: src/content.config.ts:8-19

tailwind.config.ts

This file configures Tailwind CSS, a utility-first CSS framework. It specifies which files to scan for class names, extends the default theme with custom values, and adds plugins.

Sources: tailwind.config.ts

Content Sources

Tailwind is configured to scan all relevant files within the src/ directory to tree-shake unused styles.

// tailwind.config.ts:6
content:  [ "./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}" ],

Theme Extensions

The default Tailwind theme is extended with custom fonts and animations.

• Font Family: The sans font stack is updated to use "Nunito Variable" as the primary font.
• Animation: A custom animation named bounce-horizontal is added.

Sources: tailwind.config.ts:10-16, tailwind.config.ts:17-28

The bounce-horizontal animation is defined with the following keyframes:

// tailwind.config.ts:20-28
"bounce-horizontal": {
    "0%, 100%": {
        transform:               "translateX(-25%)",
        animationTimingFunction: "cubic-bezier(0.8, 0, 1, 1)",
    },
    "50%":      {
        transform:               "none",
        animationTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
    },
},

This animation is used, for example, on the ChevronRight icon to indicate interactivity.
Sources: src/components/astro/database/records-table/col-more-details.tsx:13

Plugins

The configuration includes several official Tailwind CSS plugins:

• @tailwindcss/forms: Provides base styles for form elements.
• @tailwindcss/typography: Adds the prose classes for styling blocks of text.
• @tailwindcss/aspect-ratio: Adds utilities for aspect ratio.

Sources: tailwind.config.ts:32-36

tsconfig.json

This file configures the TypeScript compiler (tsc). It specifies the root files and the compiler options required to compile the project. The configuration extends Astro's strict base configuration.

Sources: tsconfig.json

Compiler Options

Key options include:

• baseUrl: Set to . to allow for absolute paths relative to the project root.
• verbatimModuleSyntax: Enabled for stricter module resolution.
• paths: Defines aliases for module imports, making it easier to reference common directories.
• jsxImportSource: Set to react to specify the JSX factory.

Sources: tsconfig.json:3-17

Path Aliases

The following path aliases are configured to simplify import statements:

Alias	Path
@components/*	src/components/*
@layouts/*	src/layouts/*
@assets/*	src/assets/*

Sources: tsconfig.json:6-14