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
• src/pages/database/fuse.config.ts
• package.json

The CertDb project relies on a set of configuration files to manage its build process, styling, content structure, TypeScript compilation, and search functionality. These files are crucial for defining the project's architecture, ensuring consistency, and enabling features like static site generation, responsive design, and fuzzy search. They provide a declarative way to control the behavior of the Astro framework and its various integrations.

This document provides a detailed breakdown of the key configuration files and their roles within the CertDb application.

Astro Framework Configuration (astro.config.ts)

This is the main configuration file for the Astro project. It defines site-wide settings, build options, and integrations with other tools and frameworks.

Sources: astro.config.ts

Site Metadata and Build Options

The configuration specifies essential site metadata and build parameters.

Option	Value	Description
site	https://certdb.cyberpath-hq.com	The base URL for the production site, used for generating sitemaps and canonical URLs.
base	/	The base path for the deployed site.
trailingSlash	ignore	How to handle trailing slashes in URLs.
output	static	Specifies that the project will be built as a fully static site.
build.assets	assets	The directory name for bundled assets in the build output.

Sources: astro.config.ts:11-26

Integrations

Astro's functionality is extended through a series of integrations. The following diagram illustrates the configured integrations and their purpose.

This diagram shows the integrations defined in astro.config.ts.

• @astrojs/tailwind: Integrates Tailwind CSS for utility-first styling. Nesting is enabled.
• @astrojs/react: Enables the use of React components within the Astro project.
• @astrojs/sitemap: Automatically generates a sitemap-index.xml file for better SEO.
• @astrojs/mdx: Allows the use of MDX (Markdown with JSX) for content, with GitHub-Flavored Markdown (GFM) enabled.

Sources: astro.config.ts:13-23

Styling Configuration (tailwind.config.ts)

This file configures the Tailwind CSS framework, defining the theme, custom styles, and plugins.

Sources: tailwind.config.ts

Core Configuration

• content: Specifies the files that Tailwind should scan to find class names and generate the necessary CSS. It includes all files within the src directory.
• darkMode: Set to class, enabling dark mode to be toggled by adding a dark class to an ancestor element (typically <html>).

Sources: tailwind.config.ts:8-9

Theme Extensions

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

• Font Family: The sans font stack is prepended with "Nunito Variable".
• Animations: A custom bounce-horizontal animation is defined.
  • Keyframes: The animation translates an element translateX(-25%) at 0% and 100% and none at 50%, creating a horizontal bouncing effect.

Sources: tailwind.config.ts:12-29

Plugins

The project uses several official Tailwind CSS plugins to enhance styling capabilities:

• @tailwindcss/forms: Provides a basic reset for form elements.
• @tailwindcss/typography: Adds the prose classes for beautiful typographic defaults.
• @tailwindcss/aspect-ratio: Adds utilities for maintaining element aspect ratios.

Sources: tailwind.config.ts:31-35

TypeScript Configuration (tsconfig.json)

This file configures the TypeScript compiler (tsc) and defines how it should handle the project's .ts and .tsx files.

Sources: tsconfig.json

Base Configuration and Path Aliases

The configuration extends Astro's strict preset (astro/tsconfigs/strict) and sets up path aliases for cleaner import statements.

This diagram illustrates how path aliases in tsconfig.json map to directories in the src folder.

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

This allows for imports like import MyComponent from '@components/my-component.tsx' instead of using relative paths.

Other key settings include:

• baseUrl: ".": Sets the base directory for resolving non-absolute module names.
• jsxImportSource: "react": Specifies the JSX factory to use, which is necessary for React.

Sources: tsconfig.json:3-16

Content Schema Configuration (src/content.config.ts)

Astro's Content Collections feature is configured in this file. It uses Zod to define a strict schema for the certifications content, ensuring data integrity for all Markdown/MDX files in src/content/certifications.

Sources: src/content.config.ts

certifications Collection Schema

The following ER diagram and table describe the data structure for each certification entry.

Field	Type	Description
title	z.string()	The full title of the certification.
acronym	z.string()	The acronym for the certification.
last_updated_at	z.date()	The date the certification content was last updated.
image	image()	An optimized image for the certification, handled by Astro.
reference	z.string()	A URL to the official certification page.
aliases	z.array(z.string()).optional()	An optional array of alternative names or acronyms.
draft	z.boolean().default(false)	A flag to mark the content as a draft, hiding it from production builds.
career_paths	z.array(z.enum(CareerPathsList))	An array of associated career paths, validated against an enum.
price	z.string()	The price of the certification.
currency	z.string()	The currency for the price (e.g., USD).

Sources: src/content.config.ts:7-21, src/lib/career-paths.ts:13-25

Search Configuration (src/pages/database/fuse.config.ts)

This file configures Fuse.js, the library used for client-side fuzzy searching of the certification database.

Sources: src/pages/database/fuse.config.ts

Fuse.js Options

The FuseConfig object defines how searches are performed. The most important part is the keys array, which specifies which fields to search and their relative importance (weight).

The following flowchart shows how a search query is processed using the weights from fuse.config.ts.

Key	Weight	Description
title	0.7	Highest priority, matches in the title are most relevant.
acronym	0.6	High priority for matches in the acronym.
aliases	0.5	Medium priority for alternative names.
provider	0.4	Lower priority for the certification provider.
career_paths	0.3	Lowest priority for associated career paths.

Other options:

• isCaseSensitive: false: Searches are case-insensitive.
• useExtendedSearch: true: Enables more advanced search patterns.

This weighted configuration ensures that searches for a certification's title or acronym are prioritized over matches in less specific fields like the provider name.

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