Skip to content

Commit 976bed3

Browse files
JohnDalyJohnDaly
committed
yarn astro create
1 parent 9d46d1b commit 976bed3

File tree

12 files changed

+1921
-17
lines changed

12 files changed

+1921
-17
lines changed

‎examples/astro/.gitignore‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
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

‎examples/astro/.npmrc‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Expose Astro dependencies for `pnpm` users
2+
shamefully-hoist=true

‎examples/astro/README.md‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
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+
![basics](https://user-images.githubusercontent.com/4677417/186188965-73453154-fdec-4d6b-9c34-cb35c248ae5b.png)
8+
9+
10+
## 🚀 Project Structure
11+
12+
Inside of your Astro project, you'll see the following folders and files:
13+
14+
```
15+
/
16+
├── public/
17+
│ └── favicon.svg
18+
├── src/
19+
│ ├── components/
20+
│ │ └── Card.astro
21+
│ ├── layouts/
22+
│ │ └── Layout.astro
23+
│ └── pages/
24+
│ └── index.astro
25+
└── package.json
26+
```
27+
28+
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
29+
30+
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
31+
32+
Any static assets, like images, can be placed in the `public/` directory.
33+
34+
## 🧞 Commands
35+
36+
All commands are run from the root of the project, from a terminal:
37+
38+
| Command | Action |
39+
| :--------------------- | :------------------------------------------------- |
40+
| `npm install` | Installs dependencies |
41+
| `npm run dev` | Starts local dev server at `localhost:3000` |
42+
| `npm run build` | Build your production site to `./dist/` |
43+
| `npm run preview` | Preview your build locally, before deploying |
44+
| `npm run astro ...` | Run CLI commands like `astro add`, `astro preview` |
45+
| `npm run astro --help` | Get help using the Astro CLI |
46+
47+
## 👀 Want to learn more?
48+
49+
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

‎examples/astro/astro.config.mjs‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { defineConfig } from 'astro/config';
2+
3+
// https://astro.build/config
4+
export default defineConfig({});

‎examples/astro/package.json‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"name": "codehike-astro",
3+
"type": "module",
4+
"version": "0.0.1",
5+
"private": true,
6+
"scripts": {
7+
"dev": "astro dev",
8+
"start": "astro dev",
9+
"build": "astro build",
10+
"preview": "astro preview",
11+
"astro": "astro"
12+
},
13+
"dependencies": {
14+
"astro": "^1.2.6"
15+
}
16+
}

‎examples/astro/public/favicon.svg‎

Lines changed: 13 additions & 0 deletions
Loading

‎examples/astro/src/components/Card.astro‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
---
2+
export interface Props {
3+
title: string;
4+
body: string;
5+
href: string;
6+
}
7+
8+
const { href, title, body } = Astro.props;
9+
---
10+
11+
<li class="link-card">
12+
<a href={href}>
13+
<h2>
14+
{title}
15+
<span>&rarr;</span>
16+
</h2>
17+
<p>
18+
{body}
19+
</p>
20+
</a>
21+
</li>
22+
<style>
23+
:root {
24+
--link-gradient: linear-gradient(45deg, #4f39fa, #da62c4 30%, var(--color-border) 60%);
25+
}
26+
27+
.link-card {
28+
list-style: none;
29+
display: flex;
30+
padding: 0.15rem;
31+
background-image: var(--link-gradient);
32+
background-size: 400%;
33+
border-radius: 0.5rem;
34+
background-position: 100%;
35+
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
36+
}
37+
38+
.link-card > a {
39+
width: 100%;
40+
text-decoration: none;
41+
line-height: 1.4;
42+
padding: 1em 1.3em;
43+
border-radius: 0.35rem;
44+
color: var(--text-color);
45+
background-color: white;
46+
opacity: 0.8;
47+
}
48+
49+
h2 {
50+
margin: 0;
51+
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
52+
}
53+
54+
p {
55+
margin-top: 0.75rem;
56+
margin-bottom: 0;
57+
}
58+
59+
h2 span {
60+
display: inline-block;
61+
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
62+
}
63+
64+
.link-card:is(:hover, :focus-within) {
65+
background-position: 0;
66+
}
67+
68+
.link-card:is(:hover, :focus-within) h2 {
69+
color: #4f39fa;
70+
}
71+
72+
.link-card:is(:hover, :focus-within) h2 span {
73+
will-change: transform;
74+
transform: translateX(2px);
75+
}
76+
</style>

‎examples/astro/src/env.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="astro/client" />

‎examples/astro/src/layouts/Layout.astro‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
---
2+
export interface Props {
3+
title: string;
4+
}
5+
6+
const { title } = Astro.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/svg+xml" href="/favicon.svg" />
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+
45+
</style>
46+
47+
<style is:global>
48+
h1 {
49+
font-size: var(--font-size-xl);
50+
}
51+
52+
h2 {
53+
font-size: var(--font-size-lg);
54+
}
55+
56+
code {
57+
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
58+
Bitstream Vera Sans Mono, Courier New, monospace;
59+
}
60+
</style>

‎examples/astro/src/pages/index.astro‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
---
2+
import Layout from '../layouts/Layout.astro';
3+
import Card from '../components/Card.astro';
4+
---
5+
6+
<Layout title="Welcome to Astro.">
7+
<main>
8+
<h1>Welcome to <span class="text-gradient">Astro</span></h1>
9+
<p class="instructions">
10+
Check out the <code>src/pages</code> directory to get started.<br />
11+
<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
12+
</p>
13+
<ul role="list" class="link-card-grid">
14+
<Card
15+
href="https://docs.astro.build/"
16+
title="Documentation"
17+
body="Learn how Astro works and explore the official API docs."
18+
/>
19+
<Card
20+
href="https://astro.build/integrations/"
21+
title="Integrations"
22+
body="Supercharge your project with new frameworks and libraries."
23+
/>
24+
<Card
25+
href="https://astro.build/themes/"
26+
title="Themes"
27+
body="Explore a galaxy of community-built starter themes."
28+
/>
29+
<Card
30+
href="https://astro.build/chat/"
31+
title="Chat"
32+
body="Come say hi to our amazing Discord community. ❤️"
33+
/>
34+
</ul>
35+
</main>
36+
</Layout>
37+
38+
<style>
39+
:root {
40+
--astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4);
41+
}
42+
43+
h1 {
44+
margin: 2rem 0;
45+
}
46+
47+
main {
48+
margin: auto;
49+
padding: 1em;
50+
max-width: 60ch;
51+
}
52+
53+
.text-gradient {
54+
font-weight: 900;
55+
background-image: var(--astro-gradient);
56+
-webkit-background-clip: text;
57+
-webkit-text-fill-color: transparent;
58+
background-size: 100% 200%;
59+
background-position-y: 100%;
60+
border-radius: 0.4rem;
61+
animation: pulse 4s ease-in-out infinite;
62+
}
63+
64+
@keyframes pulse {
65+
0%,
66+
100% {
67+
background-position-y: 0%;
68+
}
69+
50% {
70+
background-position-y: 80%;
71+
}
72+
}
73+
74+
.instructions {
75+
line-height: 1.6;
76+
margin: 1rem 0;
77+
background: #4f39fa;
78+
padding: 1rem;
79+
border-radius: 0.4rem;
80+
color: var(--color-bg);
81+
}
82+
83+
.instructions code {
84+
font-size: 0.875em;
85+
border: 0.1em solid var(--color-border);
86+
border-radius: 4px;
87+
padding: 0.15em 0.25em;
88+
}
89+
90+
.link-card-grid {
91+
display: grid;
92+
grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
93+
gap: 1rem;
94+
padding: 0;
95+
}
96+
</style>

0 commit comments

Comments
 (0)