|
| 1 | +# Simple Astro Website |
| 2 | + |
| 3 | +This project is a simple website built with [Astro](https://astro.build/), generated by Gemini Code Assist. It demonstrates several best practices for structuring and building modern web applications. |
| 4 | + |
| 5 | +## How to Run This Project |
| 6 | + |
| 7 | +1. **Install Dependencies**: |
| 8 | + ```bash |
| 9 | + npm install |
| 10 | + ``` |
| 11 | + |
| 12 | +2. **Run the Development Server**: |
| 13 | + ```bash |
| 14 | + npm run dev |
| 15 | + ``` |
| 16 | + This will start a local development server. You can view your site in the browser at the URL provided in your terminal (usually `http://localhost:4321`). |
| 17 | + |
| 18 | +3. **Build for Production**: |
| 19 | + ```bash |
| 20 | + npm run build |
| 21 | + ``` |
| 22 | + This command builds your site into the `dist/` directory, ready for deployment. |
| 23 | + |
| 24 | +## Best Practices Implemented |
| 25 | + |
| 26 | +Here are some of the best practices used in this project's structure and code: |
| 27 | +
|
| 28 | +### 1. Project Structure |
| 29 | +
|
| 30 | +The project follows a standard Astro directory structure, which helps keep the code organized and maintainable. |
| 31 | +
|
| 32 | +- `src/`: Contains all of your source code that will be processed by Astro. |
| 33 | +- `src/pages/`: **File-based Routing**. Every `.astro`, `.md`, or `.js`/`.ts` file in this directory becomes a page on your website. For example, `src/pages/index.astro` is the homepage. |
| 34 | +- `src/layouts/`: Contains layout components. Layouts are special `.astro` components that wrap page content, providing a consistent structure (like headers, footers, and navigation). |
| 35 | +- `src/styles/`: A dedicated directory for CSS files. This project uses a `global.css` for site-wide styles. |
| 36 | +- `public/`: For static assets that don't need to be processed, like `favicon.svg`, images, or fonts. Files here are copied directly to the build output. |
| 37 | + |
| 38 | +### 2. Component-Based Architecture |
| 39 | + |
| 40 | +Astro is a component-based framework. This project uses: |
| 41 | + |
| 42 | +- **Page Components** (`src/pages/index.astro`): These are responsible for the content of a specific page. |
| 43 | +- **Layout Components** (`src/layouts/Layout.astro`): These define the reusable HTML shell for pages. The `<slot />` element is a placeholder where the content from the page component is injected. This promotes code reuse and separation of concerns. |
| 44 | + |
| 45 | +### 3. Zero JavaScript by Default |
| 46 | + |
| 47 | +One of Astro's core principles is to ship as little JavaScript as possible. The generated HTML is fully static and interactive elements can be opted into using Astro Islands. This project, being simple, ships 0 KB of client-side JavaScript, making it extremely fast to load. |
| 48 | +
|
| 49 | +### 4. Styling |
| 50 | +
|
| 51 | +- **Global Stylesheet**: A `global.css` file is used for base styles, CSS variables (custom properties), and resets. This ensures a consistent look and feel across the entire site. |
| 52 | +- **Scoped Styles**: While not used in this simple example, Astro supports scoped styling by default. A `<style>` tag inside an `.astro` component will only apply to the HTML elements within that component, preventing CSS conflicts. |
| 53 | +
|
| 54 | +### 5. TypeScript Integration |
| 55 | +
|
| 56 | +The project is set up with a `tsconfig.json` that extends Astro's base configuration. This provides type safety and improved developer experience with autocompletion and error checking, even within `.astro` files. The `Layout.astro` component uses a TypeScript `interface` to define its expected props. |
0 commit comments