├── src
    ├── env.d.ts
    ├── components
    │   ├── ode.mdx
    │   └── wow-button.tsx
    ├── pages
    │   └── index.astro
    └── layouts
    │   └── Layout.astro
├── .npmrc
├── public
    └── favicon.ico
├── .netlify
    └── edge-functions-import-map.json
├── .vscode
    ├── extensions.json
    └── launch.json
├── astro.config.mjs
├── .gitignore
├── package.json
├── tsconfig.json
└── README.md


/src/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="astro/client" />
2 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | # Expose Astro dependencies for `pnpm` users
2 | shamefully-hoist=true
3 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learnwithjason/astro-v1/main/public/favicon.ico


--------------------------------------------------------------------------------
/.netlify/edge-functions-import-map.json:
--------------------------------------------------------------------------------
1 | {"imports":{"netlify:edge":"https://edge.netlify.com/v1/index.ts"}}


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["astro-build.astro-vscode"],
3 |   "unwantedRecommendations": []
4 | }
5 | 


--------------------------------------------------------------------------------
/src/components/ode.mdx:
--------------------------------------------------------------------------------
1 | There is _no greater contribution_ to the cinematic arts than [Owen Wilson’s "wow"](https://owen-wilson-wow-api.herokuapp.com/). We are all blessed to be born in an era where we can experience this excellence.
2 | 


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": "0.2.0",
 3 |   "configurations": [
 4 |     {
 5 |       "command": "./node_modules/.bin/astro dev",
 6 |       "name": "Development server",
 7 |       "request": "launch",
 8 |       "type": "node-terminal"
 9 |     }
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/astro.config.mjs:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'astro/config';
 2 | import image from "@astrojs/image";
 3 | import mdx from "@astrojs/mdx";
 4 | 
 5 | import react from "@astrojs/react";
 6 | 
 7 | // https://astro.build/config
 8 | export default defineConfig({
 9 |   integrations: [image(), mdx(), react()]
10 | });


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


--------------------------------------------------------------------------------
/src/components/wow-button.tsx:
--------------------------------------------------------------------------------
 1 | type Props = {
 2 |   audioUrl: string;
 3 | };
 4 | 
 5 | export function WowButton({ audioUrl }: Props) {
 6 |   console.log({ audioUrl });
 7 |   return (
 8 |     <button
 9 |       type="button"
10 |       onClick={(event) => {
11 |         event.preventDefault();
12 |         console.log('hello');
13 | 
14 |         const audio = new Audio();
15 |         audio.src = audioUrl;
16 | 
17 |         audio.play();
18 |       }}
19 |     >
20 |       WOW
21 |     </button>
22 |   );
23 | }
24 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@example/basics",
 3 |   "version": "0.0.1",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "astro dev",
 7 |     "start": "astro dev",
 8 |     "build": "astro build",
 9 |     "preview": "astro preview",
10 |     "astro": "astro"
11 |   },
12 |   "devDependencies": {
13 |     "@astrojs/image": "^0.3.2",
14 |     "@astrojs/mdx": "^0.8.1",
15 |     "@astrojs/react": "^1.0.0",
16 |     "@types/react": "^18.0.17",
17 |     "astro": "^1.0.0",
18 |     "react": "^18.2.0",
19 |     "react-dom": "^18.2.0"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     // Enable top-level await, and other modern ESM features.
 4 |     "target": "ESNext",
 5 |     "module": "ESNext",
 6 |     // Enable node-style module resolution, for things like npm package imports.
 7 |     "moduleResolution": "node",
 8 |     // Enable JSON imports.
 9 |     "resolveJsonModule": true,
10 |     // Enable stricter transpilation for better output.
11 |     "isolatedModules": true,
12 |     // Astro will directly run your TypeScript code, no transpilation needed.
13 |     "noEmit": true,
14 |     // Enable strict type checking.
15 |     "strict": true,
16 |     // Error when a value import is only used as a type.
17 |     "importsNotUsedAsValues": "error"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/src/pages/index.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import { Image } from '@astrojs/image/components';
 3 | import Layout from '../layouts/Layout.astro';
 4 | import Ode from '../components/ode.mdx';
 5 | import { WowButton } from '../components/wow-button';
 6 | 
 7 | const res = await fetch('https://owen-wilson-wow-api.herokuapp.com/wows/random');
 8 | 
 9 | if (!res.ok) {
10 | 	console.error('unwow')
11 | }
12 | 
13 | const [wow] = await res.json();
14 | 
15 | ---
16 | 
17 | <Layout title="Welcome to Astro.">
18 | 	<main>
19 | 		<h1>Ode To Wow</h1>
20 | 
21 | 		<section>
22 | 			<Image src={wow.poster} alt={`Owen Wilson as ${wow.character} in ${wow.movie}`} width={280} aspectRatio={.67} />
23 | 
24 | 			<div class="oden-wilson">
25 | 				<Ode audioUrl={wow.audio} />
26 | 				<WowButton client:load audioUrl={wow.audio} />
27 | 			</div>
28 | 		</section>
29 | 	</main>
30 | </Layout>
31 | 
32 | <style>
33 | 	:root {
34 | 		--astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4);
35 | 	}
36 | 
37 | 	h1 {
38 | 		margin: 2rem 0;
39 | 	}
40 | 
41 | 	main {
42 | 		margin: auto;
43 | 		padding: 1em;
44 | 		max-width: 60ch;
45 | 	}
46 | 
47 | 	section {
48 | 		display: grid;
49 | 		grid-template-columns: 250px 1fr;
50 | 		gap: 2rem;
51 | 	}
52 | </style>


--------------------------------------------------------------------------------
/src/layouts/Layout.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | export interface Props {
 3 | 	title: string;
 4 | }
 5 | 
 6 | const { title } = Astro.props as Props;
 7 | ---
 8 | 
 9 | <!DOCTYPE html>
10 | <html lang="en">
11 | 	<head>
12 | 		<meta charset="UTF-8" />
13 | 		<meta name="viewport" content="width=device-width" />
14 | 		<link rel="icon" type="image/x-icon" href="/favicon.ico" />
15 | 		<meta name="generator" content={Astro.generator} />
16 | 		<title>{title}</title>
17 | 	</head>
18 | 	<body>
19 | 		<slot />
20 | 	</body>
21 | </html>
22 | <style>
23 | 	:root {
24 | 		--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
25 | 		--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
26 | 		--font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
27 | 
28 | 		--color-text: hsl(12, 5%, 4%);
29 | 		--color-bg: hsl(10, 21%, 95%);
30 | 		--color-border: hsl(17, 24%, 90%);
31 | 	}
32 | 
33 | 	html {
34 | 		font-family: system-ui, sans-serif;
35 | 		font-size: var(--font-size-base);
36 | 		color: var(--color-text);
37 | 		background-color: var(--color-bg);
38 | 	}
39 | 
40 | 	body {
41 | 		margin: 0;
42 | 	}
43 | 
44 | 	:global(h1) {
45 | 		font-size: var(--font-size-xl);
46 | 	}
47 | 
48 | 	:global(h2) {
49 | 		font-size: var(--font-size-lg);
50 | 	}
51 | 
52 | 	:global(code) {
53 | 		font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
54 | 			Bitstream Vera Sans Mono, Courier New, monospace;
55 | 	}
56 | </style>
57 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Welcome to [Astro](https://astro.build)
 2 | 
 3 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
 4 | 
 5 | > 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
 6 | 
 7 | ## 🚀 Project Structure
 8 | 
 9 | Inside of your Astro project, you'll see the following folders and files:
10 | 
11 | ```
12 | /
13 | ├── public/
14 | │   └── favicon.ico
15 | ├── src/
16 | │   ├── components/
17 | │   │   └── Layout.astro
18 | │   └── pages/
19 | │       └── index.astro
20 | └── package.json
21 | ```
22 | 
23 | Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
24 | 
25 | There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components or layouts.
26 | 
27 | Any static assets, like images, can be placed in the `public/` directory.
28 | 
29 | ## 🧞 Commands
30 | 
31 | All commands are run from the root of the project, from a terminal:
32 | 
33 | | Command                | Action                                             |
34 | | :--------------------- | :------------------------------------------------- |
35 | | `npm install`          | Installs dependencies                              |
36 | | `npm run dev`          | Starts local dev server at `localhost:3000`        |
37 | | `npm run build`        | Build your production site to `./dist/`            |
38 | | `npm run preview`      | Preview your build locally, before deploying       |
39 | | `npm run astro ...`    | Run CLI commands like `astro add`, `astro preview` |
40 | | `npm run astro --help` | Get help using the Astro CLI                       |
41 | 
42 | ## 👀 Want to learn more?
43 | 
44 | Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
45 | 


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