Skip to content

Commit ae589df

Browse files
matteobrunimatteobruni
committed
build: init demo app
1 parent 2f6e5db commit ae589df

File tree

11 files changed

+8771
-0
lines changed

11 files changed

+8771
-0
lines changed

‎apps/astro/.gitignore‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# build output
2+
dist/
3+
.output/
4+
# generated types
5+
.astro/
6+
7+
# dependencies
8+
node_modules/
9+
10+
# logs
11+
npm-debug.log*
12+
yarn-debug.log*
13+
yarn-error.log*
14+
pnpm-debug.log*
15+
16+
17+
# environment variables
18+
.env
19+
.env.production
20+
21+
# macOS-specific files
22+
.DS_Store

‎apps/astro/README.md‎

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

‎apps/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({});

‎apps/astro/package.json‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"name": "@tsparticles/astro-demo",
3+
"type": "module",
4+
"version": "2.8.0",
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": "^2.0.1"
15+
}
16+
}

‎apps/astro/public/favicon.svg‎

Lines changed: 13 additions & 0 deletions
Loading

‎apps/astro/src/components/Card.astro‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
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+
.link-card {
24+
list-style: none;
25+
display: flex;
26+
padding: 0.15rem;
27+
background-color: white;
28+
background-image: var(--accent-gradient);
29+
background-size: 400%;
30+
border-radius: 0.5rem;
31+
background-position: 100%;
32+
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
33+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
34+
}
35+
36+
.link-card > a {
37+
width: 100%;
38+
text-decoration: none;
39+
line-height: 1.4;
40+
padding: 1rem 1.3rem;
41+
border-radius: 0.35rem;
42+
color: #111;
43+
background-color: white;
44+
opacity: 0.8;
45+
}
46+
h2 {
47+
margin: 0;
48+
font-size: 1.25rem;
49+
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
50+
}
51+
p {
52+
margin-top: 0.5rem;
53+
margin-bottom: 0;
54+
color: #444;
55+
}
56+
.link-card:is(:hover, :focus-within) {
57+
background-position: 0;
58+
}
59+
.link-card:is(:hover, :focus-within) h2 {
60+
color: rgb(var(--accent));
61+
}
62+
</style>

‎apps/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" />

‎apps/astro/src/layouts/Layout.astro‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
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 is:global>
23+
:root {
24+
--accent: 124, 58, 237;
25+
--accent-gradient: linear-gradient(45deg, rgb(var(--accent)), #da62c4 30%, white 60%);
26+
}
27+
html {
28+
font-family: system-ui, sans-serif;
29+
background-color: #F6F6F6;
30+
}
31+
code {
32+
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
33+
Bitstream Vera Sans Mono, Courier New, monospace;
34+
}
35+
</style>

‎apps/astro/src/pages/index.astro‎

Lines changed: 81 additions & 0 deletions
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+
To get started, open the directory <code>src/pages</code> in your project.<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="Community"
32+
body="Come say hi to our amazing Discord community. ❤️"
33+
/>
34+
</ul>
35+
</main>
36+
</Layout>
37+
38+
<style>
39+
main {
40+
margin: auto;
41+
padding: 1.5rem;
42+
max-width: 60ch;
43+
}
44+
h1 {
45+
font-size: 3rem;
46+
font-weight: 800;
47+
margin: 0;
48+
}
49+
.text-gradient {
50+
background-image: var(--accent-gradient);
51+
-webkit-background-clip: text;
52+
-webkit-text-fill-color: transparent;
53+
background-size: 400%;
54+
background-position: 0%;
55+
}
56+
.instructions {
57+
line-height: 1.6;
58+
margin: 1rem 0;
59+
border: 1px solid rgba(var(--accent), 25%);
60+
background-color: white;
61+
padding: 1rem;
62+
border-radius: 0.4rem;
63+
}
64+
.instructions code {
65+
font-size: 0.875em;
66+
font-weight: bold;
67+
background: rgba(var(--accent), 12%);
68+
color: rgb(var(--accent));
69+
border-radius: 4px;
70+
padding: 0.3em 0.45em;
71+
}
72+
.instructions strong {
73+
color: rgb(var(--accent));
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>

‎apps/astro/tsconfig.json‎

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

0 commit comments

Comments
 (0)