Procurement Leaders Congress Template

A starter template for Procurement Leaders Congress sites, built with Astro, React, TypeScript, and Bookshop. This project is designed to be deployed on CloudCannon, leveraging a modern development workflow and best practices.

Table of Contents

• Procurement Leaders Congress Template
  • Table of Contents
  • Features
  • Prerequisites
  • Installation
  • Recommended VS Code Extensions
  • Scripts
  • Development Workflow
  • Project Structure
  • Contributing

---

Features

• Astro for fast and flexible site generation, with partial hydration for React components.
• React components for interactive and dynamic UI.
• Bookshop integration for component-driven development and seamless design system management.
• Tailwind CSS for utility-first styling.
• TypeScript for type-safe JavaScript code.
• Markdown support for rich text content and easy authoring.
• CloudCannon ready for smooth content editing in a CMS environment.

---

Prerequisites

• Node.js (v16+ recommended)
• PNPM (preferred package manager)
• (Optional) CloudCannon account if deploying to CloudCannon.

---

Installation

1. Clone the Repository

   git clone https://github.com/your-org/procurement-leaders-congress-template.git
   cd procurement-leaders-congress-template

2. Install Dependencies

   pnpm install

---

Recommended VS Code Extensions

We use VS Code’s “Recommended Extensions” to help streamline your workflow. When you open this workspace in VS Code, you’ll see a prompt to install any missing recommended extensions (defined in .vscode/extensions.json):

• Astro (astro-build.astro-vscode)
  Provides syntax highlighting, IntelliSense, and other features for Astro files.

• YAML (redhat.vscode-yaml)
  Offers advanced YAML support, including schema validation. This is especially useful for the cloudcannon.config.yml file, where we use a local schema to help with autocomplete and error-checking.

• Prettier (esbenp.prettier-vscode)
  Automatically formats your code according to consistent style rules.

• ESLint (dbaeumer.vscode-eslint)
  Integrates ESLint into VS Code for identifying and fixing common linting errors in JavaScript and TypeScript files.

• Tailwind CSS IntelliSense (bradlc.vscode-tailwindcss)
  Provides autocomplete, syntax highlighting, and linting for Tailwind CSS classes.

• TypeScript Next (ms-vscode.vscode-typescript-next)
  Enables faster access to upcoming TypeScript features by using the latest nightly version of the TypeScript language server.

CloudCannon Configuration Schema

This project references a schema from the official CloudCannon configuration types GitHub repository. We’ve placed a local copy of that schema in:

.vscode/schemas/cloudcannon-config.schema.json

The VS Code YAML extension will automatically apply this schema whenever you open cloudcannon.config.yml—giving you validation and error messages if something doesn’t match the expected format.

---

Scripts

All essential scripts are defined in the package.json. Here are the primary ones you’ll use:

• Development:

  pnpm dev

  Starts the development server with hot-reloading on http://localhost:3000.

• Build:

  pnpm build

  Generates a production-ready build of the site.

• Preview:

  pnpm preview

  Serves the built site locally for final checks.

• Formatting (Prettier):

  pnpm fmt

  Formats your code according to Prettier and project-specific linting rules.

• Bookshop:

  pnpm bookshop

  Generates the component library for Bookshop usage and documentation.

---

Development Workflow

1. Run the Development Server

   pnpm dev

   This command starts the Astro development environment. Open your browser to http://localhost:3000 to view and interact with the site.

2. Make and Test Changes

   • Edit .astro, .tsx, or .ts files for pages and components.
   • If you’re working on Bookshop components, run pnpm bookshop to generate and update the component library.
   • Save your changes; hot reloading will refresh the browser automatically.

3. Lint and Format Code

   • Run pnpm fmt to format your code using Prettier.

4. Build for Production

   • Before deploying, run pnpm build to generate a production-ready build in the dist folder.
   • Use pnpm preview to test the production build locally.

---

Project Structure

Here is a general overview of the project’s layout:

├── public/                  # Static assets
├── schemas/                 # Schema definitions
├── src/
│   ├── assets/              # Static assets like images and icons
│   ├── bookshop/            # Bookshop configuration files
│   ├── components/          # React & Astro components
│   │   ├── layout/          # Layout components
│   │   └── sections/        # Section components
│   ├── content/             # Content configuration and markdown pages
│   ├── data/                # JSON data files
│   ├── layouts/             # Layout files for wrapping pages
│   ├── pages/               # Astro pages
│   ├── shared/              # Shared components and utilities
│   ├── styles/              # Global and component-specific styles
│   └── env.d.ts             # TypeScript environment definitions
├── README.md                # Project documentation
├── astro.config.mjs         # Astro configuration file
├── cloudcannon.config.yml   # CloudCannon configuration file
├── package.json             # Project dependencies and scripts
├── pnpm-lock.yaml           # Package lock file
├── project-structure.txt    # Generated project structure output
├── tailwind.config.mjs      # Tailwind CSS configuration
├── tsconfig.json            # TypeScript configuration

---

Contributing

1. Fork this repository.
2. Create a new feature branch:

   git checkout -b feature/my-new-feature

3. Commit your changes:

   git commit -m "Add some feature"

4. Push to the branch:

   git push origin feature/my-new-feature

5. Open a Pull Request on GitHub and provide a clear description of your changes.

---