Skip to content

README.md

Latest commit

 

History

History
123 lines (89 loc) · 4.16 KB

README.md

File metadata and controls

123 lines (89 loc) · 4.16 KB

Blog & Presentations Platform

A modern static site for hosting blog posts and presentation content, built with Astro and SolidJS.

Tech Stack

  • Astro - Static site framework for content-focused websites
  • SolidJS - Reactive UI library for client-side interactivity
  • TypeScript - Type safety across the codebase
  • CSS Modules - Scoped styling for components
  • Playwright - End-to-end testing with browser automation

Project Structure

blogs/
├── src/ - Frontend source code
│   ├── components/ - UI components
│   │   ├── static/ - Astro components for server rendering
│   │   ├── dynamic/ - SolidJS components for client interactivity
│   │   └── foundation/ - Base UI building blocks
│   ├── layouts/ - Page layouts and templates
│   ├── pages/ - Route definitions and page components
│   └── store/ - State management and data access
│       ├── repository/ - External system interfaces
│       ├── service/ - Business logic and store integration
│       └── utilities/ - Shared helper functions
├── public/ - Static assets
├── tests/ - Playwright end-to-end tests

Development

Setup

  1. Install dependencies:
pnpm install
  1. Start the development server:
pnpm dev

The site will be available at http://localhost:4321.

Commands

  • pnpm dev - Start development server
  • pnpm build - Build for production
  • pnpm preview - Preview production build locally
  • pnpm lint - Run ESLint code checks
  • pnpm format - Format code with Prettier
  • pnpm test - Run Playwright tests
  • pnpm test:ui - Run Playwright tests with UI

Deployment

The site is configured for GitHub Pages deployment using GitHub Actions. To deploy:

  1. Push changes to the main branch
  2. GitHub Action workflow will build and deploy automatically
  3. The site will be available at your configured GitHub Pages URL

Testing

End-to-end tests are written with Playwright. Run the tests with:

pnpm test

Tests validate navigation, accessibility, and responsive design.

pnpm create astro@latest -- --template basics

Open in StackBlitz Open with CodeSandbox Open in GitHub Codespaces

🧑‍🚀 Seasoned astronaut? Delete this file. Have fun!

just-the-basics

🚀 Project Structure

Inside of your Astro project, you'll see the following folders and files:

/
├── public/
│   └── favicon.svg
├── src/
│   ├── layouts/
│   │   └── Layout.astro
│   └── pages/
│       └── index.astro
└── package.json

To learn more about the folder structure of an Astro project, refer to our guide on project structure.

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command Action
pnpm install Installs dependencies
pnpm dev Starts local dev server at localhost:4321
pnpm build Build your production site to ./dist/
pnpm preview Preview your build locally, before deploying
pnpm astro ... Run CLI commands like astro add, astro check
pnpm astro -- --help Get help using the Astro CLI

👀 Want to learn more?

Feel free to check our documentation or jump into our Discord server.