Pages Directory

This directory contains all the page templates and routes for the CodeJoi website. The pages are built using Astro’s file-based routing system, where each .astro file corresponds to a route on the site.

Directory Structure

• index.astro: Root page with language detection and redirection
• 404.astro: Custom 404 error page
• join-our-team.astro: Redirect page for the careers section
• [lang]/: Language-specific pages
  • index.astro: Localized home page
  • join-our-team.astro: Careers/recruitment page
  • privacy-policy.astro: Privacy policy page
  • site-notice.astro: Legal notice/imprint page

Routing System

The site uses a combination of static and dynamic routes:

• Static Routes: Fixed paths like /404 or /join-our-team
• Dynamic Routes: Routes with parameters like /[lang]/ which capture the language code

Internationalization

The site supports both English (en) and German (de) languages through the [lang] parameter in routes. The root page (index.astro) detects the user’s preferred language and redirects to the appropriate language version.

Page Structure

Most pages follow this general structure:

---
// Imports and frontmatter
import Layout from '../../components/Layout.astro';
import { content } from '../../contents/page-name';
import { getCurrentLang, getStaticLangPaths } from '../../utils/lang';

// Generate static paths for all supported languages
export const getStaticPaths = getStaticLangPaths;

// Get current language and content
const lang = getCurrentLang(Astro);
const { title, sections } = content[lang];
---

<Layout title={title}>
  <!-- Page content -->
  <Section1 />
  <Section2 />
  <!-- ... -->
</Layout>

<style lang="scss">
  /* Page-specific styles */
</style>

Special Pages

Root Index (index.astro)

The root index page detects the user’s preferred language from their browser settings and redirects them to the appropriate language version of the site.

404 Page (404.astro)

The custom 404 error page is displayed when a user navigates to a URL that doesn’t exist. It provides a friendly error message and maintains the site’s navigation.

Redirect Pages

Some pages (like join-our-team.astro) serve as redirects to their language-specific versions, following the same pattern as the root index page.

Adding New Pages

When adding new pages:

1. For language-specific pages, add them to the [lang] directory
2. Use the getStaticLangPaths function to generate routes for all supported languages
3. Get the current language using getCurrentLang(Astro)
4. Import content from the corresponding content file
5. Use the appropriate layout and components
6. Add page-specific styles as needed