Initialized frontend
parent
dcdb5b2b2a
commit
33768dc065
GPG Key ID:
955C0660072F691F
|
|
@ -0,0 +1,18 @@
|
||||||
|
# build output
|
||||||
|
dist
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
node_modules/
|
||||||
|
.snowpack/
|
||||||
|
|
||||||
|
# logs
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
|
||||||
|
# environment variables
|
||||||
|
.env
|
||||||
|
.env.production
|
||||||
|
|
||||||
|
# macOS-specific files
|
||||||
|
.DS_Store
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
## force pnpm to hoist
|
||||||
|
shamefully-hoist = true
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
# Welcome to [Astro](https://astro.build)
|
||||||
|
|
||||||
|
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
||||||
|
|
||||||
|
## 🚀 Project Structure
|
||||||
|
|
||||||
|
Inside of your Astro project, you'll see the following folders and files:
|
||||||
|
|
||||||
|
```
|
||||||
|
/
|
||||||
|
├── public/
|
||||||
|
│ ├── robots.txt
|
||||||
|
│ └── favicon.ico
|
||||||
|
├── src/
|
||||||
|
│ ├── components/
|
||||||
|
│ │ └── Tour.astro
|
||||||
|
│ └── pages/
|
||||||
|
│ └── index.astro
|
||||||
|
└── package.json
|
||||||
|
```
|
||||||
|
|
||||||
|
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
|
||||||
|
|
||||||
|
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
|
||||||
|
|
||||||
|
Any static assets, like images, can be placed in the `public/` directory.
|
||||||
|
|
||||||
|
## 🧞 Commands
|
||||||
|
|
||||||
|
All commands are run from the root of the project, from a terminal:
|
||||||
|
|
||||||
|
| Command | Action |
|
||||||
|
|:----------------|:--------------------------------------------|
|
||||||
|
| `npm install` | Installs dependencies |
|
||||||
|
| `npm start` | Starts local dev server at `localhost:3000` |
|
||||||
|
| `npm run build` | Build your production site to `./dist/` |
|
||||||
|
|
||||||
|
## 👀 Want to learn more?
|
||||||
|
|
||||||
|
Feel free to check [our documentation](https://github.com/snowpackjs/astro) or jump into our [Discord server](https://astro.build/chat).
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
export default {
|
||||||
|
// projectRoot: '.', // Where to resolve all URLs relative to. Useful if you have a monorepo project.
|
||||||
|
// pages: './src/pages', // Path to Astro components, pages, and data
|
||||||
|
// dist: './dist', // When running `astro build`, path to final static output
|
||||||
|
// public: './public', // A folder of static files Astro will copy to the root. Useful for favicons, images, and other files that don’t need processing.
|
||||||
|
buildOptions: {
|
||||||
|
// site: 'http://example.com', // Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs.
|
||||||
|
sitemap: true, // Generate sitemap (set to "false" to disable)
|
||||||
|
},
|
||||||
|
devOptions: {
|
||||||
|
// hostname: 'localhost', // The hostname to run the dev server on.
|
||||||
|
// port: 3000, // The port to run the dev server on.
|
||||||
|
// tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js'
|
||||||
|
},
|
||||||
|
renderers: [
|
||||||
|
"@astrojs/renderer-svelte"
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
{
|
||||||
|
"name": "@example/starter",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"start": "astro dev",
|
||||||
|
"build": "astro build"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"astro": "0.19.0-next.2",
|
||||||
|
"@astrojs/renderer-svelte": "^0.1.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
<svg width="193" height="256" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<style>
|
||||||
|
#flame { fill: #FF5D01; }
|
||||||
|
#a { fill: #000014; }
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
#a { fill: #fff; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<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)"/>
|
||||||
|
<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" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1,11 @@
|
||||||
|
<svg width="256" height="256" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<style>
|
||||||
|
#flame { fill: #FF5D01; }
|
||||||
|
#a { fill: #000014; }
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
#a { fill: #fff; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<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" />
|
||||||
|
<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" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1,2 @@
|
||||||
|
User-agent: *
|
||||||
|
Disallow: /
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
|
||||||
|
font-size: 1rem;
|
||||||
|
--user-font-scale: 1rem - 16px;
|
||||||
|
font-size: clamp(0.875rem, 0.4626rem + 1.0309vw + var(--user-font-scale), 1.125rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
padding: 4rem 2rem;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: grid;
|
||||||
|
justify-content: center;
|
||||||
|
background: #f9fafb;
|
||||||
|
color: #111827;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
body {
|
||||||
|
background: #111827;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,53 @@
|
||||||
|
:root {
|
||||||
|
--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;
|
||||||
|
--color-light: #f3f4f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--color-light: #1f2937;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
header > div {
|
||||||
|
font-size: clamp(2rem, -0.4742rem + 6.1856vw, 2.75rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
header > div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
header img {
|
||||||
|
width: 2em;
|
||||||
|
height: 2.667em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: clamp(1.5rem, 1rem + 1.25vw, 2rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.counter {
|
||||||
|
display: grid;
|
||||||
|
grid-auto-flow: column;
|
||||||
|
gap: 1em;
|
||||||
|
font-size: 2rem;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 2rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.counter > pre {
|
||||||
|
text-align: center;
|
||||||
|
min-width: 3ch;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
<script>
|
||||||
|
let count = 0;
|
||||||
|
|
||||||
|
function add() {
|
||||||
|
count += 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
function subtract() {
|
||||||
|
count -= 1;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div id="svelte" class="counter">
|
||||||
|
<button on:click={subtract}>-</button>
|
||||||
|
<pre>{ count }</pre>
|
||||||
|
<button on:click={add}>+</button>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,85 @@
|
||||||
|
---
|
||||||
|
import { Markdown } from 'astro/components';
|
||||||
|
---
|
||||||
|
<article>
|
||||||
|
<div class="banner">
|
||||||
|
<p><strong>🧑🚀 Seasoned astronaut?</strong> Delete this file. Have fun!</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<Markdown>
|
||||||
|
## 🚀 Project Structure
|
||||||
|
|
||||||
|
Inside of your Astro project, you'll see the following folders and files:
|
||||||
|
|
||||||
|
```
|
||||||
|
/
|
||||||
|
├── public/
|
||||||
|
│ ├── robots.txt
|
||||||
|
│ └── favicon.ico
|
||||||
|
├── src/
|
||||||
|
│ ├── components/
|
||||||
|
│ │ └── Tour.astro
|
||||||
|
│ └── pages/
|
||||||
|
│ └── index.astro
|
||||||
|
└── package.json
|
||||||
|
```
|
||||||
|
|
||||||
|
Astro looks for `.astro` or `.md` files in the `src/pages/` directory.
|
||||||
|
Each page is exposed as a route based on its file name.
|
||||||
|
|
||||||
|
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
|
||||||
|
|
||||||
|
Any static assets, like images, can be placed in the `public/` directory.
|
||||||
|
</Markdown>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>👀 Want to learn more?</h2>
|
||||||
|
<p>Feel free to check <a href="https://github.com/snowpackjs/astro">our documentation</a> or jump into our <a href="https://astro.build/chat">Discord server</a>.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
article {
|
||||||
|
padding-top: 2em;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
section {
|
||||||
|
margin-top: 2em;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1em;
|
||||||
|
max-width: 70ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
background: var(--color-light);
|
||||||
|
padding: 1em 1.5em;
|
||||||
|
padding-left: 0.75em;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre,
|
||||||
|
code {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
background: var(--color-light);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
padding: 1em 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree {
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
code:not(.tree) {
|
||||||
|
padding: 0.125em;
|
||||||
|
margin: 0 -0.125em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,56 @@
|
||||||
|
---
|
||||||
|
// Component Imports
|
||||||
|
import Tour from '../components/Tour.astro';
|
||||||
|
// You can import components from any supported Framework here!
|
||||||
|
import SvelteCounter from '../components/SvelteCounter.svelte';
|
||||||
|
|
||||||
|
// Component Script:
|
||||||
|
// You can write any JavaScript/TypeScript that you'd like here.
|
||||||
|
// It will run during the build, but never in the browser.
|
||||||
|
// All variables are available to use in the HTML template below.
|
||||||
|
let title = 'My Astro Site';
|
||||||
|
|
||||||
|
// Full Astro Component Syntax:
|
||||||
|
// https://docs.astro.build/core-concepts/astro-components/
|
||||||
|
---
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width">
|
||||||
|
<title>{title}</title>
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||||
|
<link rel="stylesheet" href="/style/global.css">
|
||||||
|
<link rel="stylesheet" href="/style/home.css">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
header {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1em;
|
||||||
|
max-width: min(100%, 68ch);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<header>
|
||||||
|
<div>
|
||||||
|
<img width="60" height="80" src="/assets/logo.svg" alt="Astro logo">
|
||||||
|
<h1>Welcome to <a href="https://astro.build/">Astro</a></h1>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<Tour />
|
||||||
|
|
||||||
|
<!--
|
||||||
|
- You can also use imported framework components directly in your markup!
|
||||||
|
-
|
||||||
|
- Note: by default, these components are NOT interactive on the client.
|
||||||
|
- The `:visible` directive tells Astro to make it interactive.
|
||||||
|
-
|
||||||
|
- See https://docs.astro.build/core-concepts/component-hydration/
|
||||||
|
-->
|
||||||
|
<SvelteCounter client:visible />
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"moduleResolution": "node"
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue