Skip to content

Commit b6cfd2b

Browse files
pomberpomber
authored
Merge pull request #282 from JohnDaly/add/astro-example
add/astro-example
2 parents 9d46d1b + fe93bd5 commit b6cfd2b

File tree

13 files changed

+2011
-20
lines changed

13 files changed

+2011
-20
lines changed

‎examples/astro/.gitignore

+20
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

+2
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

+49
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

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { defineConfig } from "astro/config"
2+
import react from "@astrojs/react"
3+
import mdx from "@astrojs/mdx"
4+
import { remarkCodeHike } from "@code-hike/mdx"
5+
import theme from "shiki/themes/github-dark.json"
6+
7+
// https://astro.build/config
8+
export default defineConfig({
9+
markdown: {
10+
syntaxHighlight: false,
11+
},
12+
integrations: [
13+
react(),
14+
mdx({ remarkPlugins: [[remarkCodeHike, { autoImport: false, theme }]] }),
15+
],
16+
})

‎examples/astro/package.json

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
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+
"@astrojs/mdx": "^0.11.1",
15+
"@astrojs/react": "^1.1.3",
16+
"@code-hike/mdx": "^0.7.4",
17+
"astro": "^1.2.6",
18+
"react": "^18.0.0",
19+
"react-dom": "^18.0.0"
20+
}
21+
}

‎examples/astro/public/favicon.svg

+13
Loading

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

+76
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

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="astro/client" />

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

+60
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/codehike.mdx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import "@code-hike/mdx/styles.css"
2+
import { CH } from "@code-hike/mdx/components"
3+
4+
# Hello
5+
6+
Lorem ipsum dolor sit amet.
7+
8+
<CH.Code client:load>
9+
```python hello.py mark=1[22:30]
10+
print("Rendered with Code Hike")
11+
```
12+
</CH.Code>
13+
14+
Lorem ipsum dolor sit amet.

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

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
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="/codehike"
16+
title="Codehike"
17+
body="See the Codehike sample by clicking here"
18+
/>
19+
</ul>
20+
</main>
21+
</Layout>
22+
23+
<style>
24+
:root {
25+
--astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4);
26+
}
27+
28+
h1 {
29+
margin: 2rem 0;
30+
}
31+
32+
main {
33+
margin: auto;
34+
padding: 1em;
35+
max-width: 60ch;
36+
}
37+
38+
.text-gradient {
39+
font-weight: 900;
40+
background-image: var(--astro-gradient);
41+
-webkit-background-clip: text;
42+
-webkit-text-fill-color: transparent;
43+
background-size: 100% 200%;
44+
background-position-y: 100%;
45+
border-radius: 0.4rem;
46+
animation: pulse 4s ease-in-out infinite;
47+
}
48+
49+
@keyframes pulse {
50+
0%,
51+
100% {
52+
background-position-y: 0%;
53+
}
54+
50% {
55+
background-position-y: 80%;
56+
}
57+
}
58+
59+
.instructions {
60+
line-height: 1.6;
61+
margin: 1rem 0;
62+
background: #4f39fa;
63+
padding: 1rem;
64+
border-radius: 0.4rem;
65+
color: var(--color-bg);
66+
}
67+
68+
.instructions code {
69+
font-size: 0.875em;
70+
border: 0.1em solid var(--color-border);
71+
border-radius: 4px;
72+
padding: 0.15em 0.25em;
73+
}
74+
75+
.link-card-grid {
76+
display: grid;
77+
grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
78+
gap: 1rem;
79+
padding: 0;
80+
}
81+
</style>

‎examples/astro/tsconfig.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "astro/tsconfigs/strict"
3+
}

0 commit comments

Comments
 (0)