├── public
    ├── robots.txt
    ├── style
    │   ├── global.css
    │   └── home.css
    ├── favicon.svg
    └── assets
    │   └── logo.svg
├── .npmrc
├── netlify.toml
├── src
    ├── components
    │   ├── Counter.module.css
    │   ├── Counter.jsx
    │   └── Tour.astro
    └── pages
    │   └── index.astro
├── .gitignore
├── package.json
└── README.md


/public/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *
2 | Disallow: /
3 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | ## force pnpm to hoist 
2 | shamefully-hoist = true


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 |   command = "npm run build"
3 |   publish = "dist"


--------------------------------------------------------------------------------
/src/components/Counter.module.css:
--------------------------------------------------------------------------------
1 | .counter {
2 |   margin: 20px 0;
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # build output
 2 | dist
 3 | 
 4 | # dependencies
 5 | node_modules/
 6 | .snowpack/
 7 | 
 8 | # logs
 9 | npm-debug.log*
10 | yarn-debug.log*
11 | yarn-error.log*
12 | 
13 | # environment variables
14 | .env
15 | .env.production
16 | 
17 | # macOS-specific files
18 | .DS_Store
19 | 
20 | # Local Netlify folder
21 | .netlify


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "astro-netlify-starter",
 3 |   "version": "0.3.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "astro dev",
 7 |     "start": "astro dev",
 8 |     "build": "astro build",
 9 |     "preview": "astro preview"
10 |   },
11 |   "devDependencies": {
12 |     "astro": "^0.21.6"
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/src/components/Counter.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react'
 2 | import styles from './Counter.module.css'
 3 | 
 4 | export default function Counter() {
 5 |   const [count, setCount] = useState(0)
 6 | 
 7 |   return (
 8 |     <div className={styles.counter}>
 9 |       <h1>Simple React Counter</h1>
10 |       <p>Count: {count}</p>
11 |       <button onClick={() => setCount(count + 1)}>+</button>
12 |       <button onClick={() => setCount(count - 1)}>-</button>
13 |     </div>
14 |   )
15 | }
16 | 


--------------------------------------------------------------------------------
/public/style/global.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   box-sizing: border-box;
 3 |   margin: 0;
 4 | }
 5 | 
 6 | :root {
 7 |   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
 8 |   font-size: 1rem;
 9 |   --user-font-scale: 1rem - 16px;
10 |   font-size: clamp(0.875rem, 0.4626rem + 1.0309vw + var(--user-font-scale), 1.125rem);
11 | }
12 | 
13 | body {
14 |   padding: 4rem 2rem;
15 |   width: 100%;
16 |   min-height: 100vh;
17 |   display: grid;
18 |   justify-content: center;
19 |   background: #f9fafb;
20 |   color: #111827;
21 | }
22 | 
23 | @media (prefers-color-scheme: dark) {
24 |   body {
25 |     background: #111827;
26 |     color: #fff;
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/src/pages/index.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import Tour from '../components/Tour.astro';
 3 | 
 4 | let title = 'My New Astro Site!';
 5 | 
 6 | ---
 7 | 
 8 | <html lang="en">
 9 | <head>
10 |   <meta charset="UTF-8">
11 |   <meta name="viewport" content="width=device-width, initial-scale=1">
12 | 
13 |   <title>{title}</title>
14 |   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
15 |   <link rel="stylesheet" href="/style/global.css">
16 |   <link rel="stylesheet" href="/style/home.css">
17 | </head>
18 | 
19 | <body>
20 |   <main>
21 |     <header>
22 |       <div>
23 |         <img width="60" height="80" src="/assets/logo.svg" alt="Astro logo">
24 |         <h1>Welcome to <a href="https://astro.build/">Astro</a></h1>
25 |       </div>
26 |     </header>
27 | 
28 |     <Tour />
29 |   </main>
30 | </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/public/style/home.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |     --font-mono: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
 3 |     --color-light: #F3F4F6;
 4 | }
 5 | 
 6 | @media (prefers-color-scheme: dark) {
 7 |     :root {
 8 |         --color-light: #1F2937;
 9 |     }
10 | }
11 | 
12 | a {
13 |     color: inherit;
14 | }
15 | 
16 | header > div {
17 |     font-size: clamp(2rem, -0.4742rem + 6.1856vw, 2.75rem);
18 | }
19 | 
20 | header > div {
21 |     display: flex;
22 |     flex-direction: column;
23 |     align-items: center;
24 | }
25 | 
26 | header h1 {
27 |     font-size: 1em;
28 |     font-weight: 500;
29 | }
30 | header img {
31 |     width: 2em;
32 |     height: 2.667em;
33 | }
34 | 
35 | h2 {
36 |     font-weight: 500;
37 |     font-size: clamp(1.5rem, 1rem + 1.25vw, 2rem);
38 | }
39 | 


--------------------------------------------------------------------------------
/public/favicon.svg:
--------------------------------------------------------------------------------
 1 | <svg width="256" height="256" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 |     <style>
 3 |         #flame { fill: #FF5D01; }
 4 |         #a { fill: #000014; }
 5 |         @media (prefers-color-scheme: dark) {
 6 |             #a { fill: #fff; }
 7 |         }
 8 |     </style>
 9 |     <path id="a" fill-rule="evenodd" clip-rule="evenodd" d="M163.008 18.929c1.944 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53l-28.198-95.29a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.225 180.225 0 00-52.01 17.557l43.52-142.281c1.99-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.086 1.157a16.004 16.004 0 016.487 4.806z" />
10 |     <path id="flame" fill-rule="evenodd" clip-rule="evenodd" d="M168.19 180.151c-7.139 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.961 10.367-1.961 13.902 0 0-1.056 17.355 11.015 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.974-19.87 5.976-3.79 12.616-8.001 17.192-16.449a31.024 31.024 0 003.743-14.82c0-3.299-.513-6.479-1.463-9.463z" />
11 | </svg>
12 | 


--------------------------------------------------------------------------------
/public/assets/logo.svg:
--------------------------------------------------------------------------------
 1 | <svg width="193" height="256" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 |     <style>
 3 |         #flame { fill: #FF5D01; }
 4 |         #a { fill: #000014; }
 5 |         @media (prefers-color-scheme: dark) {
 6 |             #a { fill: #fff; }
 7 |         }
 8 |     </style>
 9 |     
10 |     <path id="a" fill-rule="evenodd" clip-rule="evenodd" d="M131.496 18.929c1.943 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53L99.746 60.56a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.224 180.224 0 00-52.01 17.557l43.52-142.281c1.989-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.085 1.157a16 16 0 016.488 4.806z" fill="url(#paint0_linear)"/>
11 |     <path id="flame" fill-rule="evenodd" clip-rule="evenodd" d="M136.678 180.151c-7.14 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.962 10.367-1.962 13.902 0 0-1.055 17.355 11.016 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.973-19.87 5.977-3.79 12.616-8.001 17.192-16.449a31.013 31.013 0 003.744-14.82c0-3.299-.513-6.479-1.463-9.463z" />
12 | </svg>
13 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Astro + Netlify Starter
 2 | 
 3 | [![Netlify Status](https://api.netlify.com/api/v1/badges/9e561573-ed5f-4ef9-86d1-e098fa22429f/deploy-status)](https://app.netlify.com/sites/astro-netlify/deploys)
 4 | 
 5 | This is an Astro (v0.21.6) starter project based on the [Astro Starter Kit](https://github.com/withastro/astro/tree/main/examples/starter), with a `netlify.toml` configuration included, and an example React component + CSS Module.
 6 | 
 7 | If you'd like to learn more about how Astro works, [here's an introductory blog post](https://dev.to/cassidoo/build-wicked-fast-sites-with-astro-an-introduction-173j)!
 8 | 
 9 | ## Clone and Deploy
10 | 
11 | You can instantly clone this to your GitHub and deploy it by clicking this button here:
12 | 
13 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/cassidoo/astro-netlify-starter)
14 | 
15 | Or, if you'd like to just use the CLI and not deploy just yet, you can use `create-astro` with this as a template:
16 | 
17 | ```bash
18 | npm init astro my-new-project --template cassidoo/astro-netlify-starter
19 | ```
20 | 
21 | ## Commands
22 | 
23 | All commands are run from the root of the project, from a terminal:
24 | 
25 | | Command         | Action                                      |
26 | | :-------------- | :------------------------------------------ |
27 | | `npm install`   | Installs dependencies                       |
28 | | `npm run start` | Starts local dev server at `localhost:3000` |
29 | | `npm run build` | Build your production site to `./dist/`     |
30 | 
31 | ## Want to learn more?
32 | 
33 | Feel free to check [the Astro documentation](https://docs.astro.build/getting-started/)!
34 | 


--------------------------------------------------------------------------------
/src/components/Tour.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import { Markdown } from 'astro/components';
 3 | import Counter from './Counter.jsx';
 4 | ---
 5 | <article>
 6 |   <section>
 7 |     <Markdown>
 8 |       ## 🚀 Project Structure
 9 | 
10 |       In this project, you'll see the following folders and files:
11 | 
12 |       ```
13 |       /
14 |       ├── public/
15 |       │   ├── robots.txt
16 |       │   └── favicon.ico
17 |       ├── src/
18 |       │   ├── components/
19 |       │   │   └── Counter.jsx
20 |       │   │   └── Counter.module.css
21 |       │   │   └── Tour.astro
22 |       │   └── pages/
23 |       │       └── index.astro
24 |       ├── netlify.toml
25 |       └── package.json
26 |       ```
27 | 
28 |       Static assets can be placed in the `public/` directory.
29 |     </Markdown>
30 |   </section>
31 | 
32 |   <!-- This Counter will only load the client side JS when it is visible on the page -->
33 |   <Counter client:visible />
34 | 
35 |   <section>
36 |     <p>
37 |     Feel free to check out the <a href="https://docs.astro.build/getting-started/">Astro documentation</a> to learn more,
38 |     or see the code for this site <a href="https://github.com/cassidoo/astro-netlify-starter">here</a>.
39 |     </p>
40 |   </section>
41 |     
42 | </article>
43 | 
44 | <style>
45 |     article {
46 |         padding-top: 2em;
47 |         line-height: 1.5;
48 |     }
49 |     
50 |     section {
51 |         display: flex;
52 |         flex-direction: column;
53 |         gap: 1em;
54 |         max-width: 70ch;
55 |     }
56 | 
57 |     pre,
58 |     code {
59 |         font-family: var(--font-mono);
60 |         background: var(--color-light);
61 |         border-radius: 4px;
62 |     }
63 | 
64 |     pre {
65 |         padding: 1em 1.5em;
66 |     }
67 | 
68 |     .tree {
69 |         line-height: 1.2;
70 |     }
71 | 
72 |     code:not(.tree) {
73 |         padding: 0.125em;
74 |         margin: 0 -0.125em;
75 |     }
76 | </style>
77 | 


--------------------------------------------------------------------------------