Start on styling and component cleanup
This commit is contained in:
@@ -1,15 +0,0 @@
|
|||||||
import { useState } from "react";
|
|
||||||
|
|
||||||
export default function ReactCounter() {
|
|
||||||
const [count, setCount] = useState(0);
|
|
||||||
const add = () => setCount((i) => i + 1);
|
|
||||||
const subtract = () => setCount((i) => i - 1);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div id="react" className="counter">
|
|
||||||
<button onClick={subtract}>-</button>
|
|
||||||
<pre>{count}</pre>
|
|
||||||
<button onClick={add}>+</button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,85 +0,0 @@
|
|||||||
---
|
|
||||||
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>
|
|
||||||
25
site/src/layouts/BaseLayout.astro
Normal file
25
site/src/layouts/BaseLayout.astro
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
---
|
||||||
|
import AuthTest from '../components/AuthTest.jsx';
|
||||||
|
|
||||||
|
let { title } = Astro.props;
|
||||||
|
---
|
||||||
|
<style lang="scss">
|
||||||
|
@use "../styles/global";
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width">
|
||||||
|
<title>{title}</title>
|
||||||
|
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<AuthTest client:only />
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<slot/>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -1,63 +1,7 @@
|
|||||||
---
|
---
|
||||||
// Component Imports
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||||
import Tour from '../components/Tour.astro';
|
|
||||||
// You can import components from any supported Framework here!
|
|
||||||
import ReactCounter from '../components/ReactCounter.jsx';
|
|
||||||
|
|
||||||
import AuthTest from '../components/AuthTest.jsx';
|
|
||||||
|
|
||||||
// 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">
|
<BaseLayout title="Forget Me Not">
|
||||||
<head>
|
<p>Index page</p>
|
||||||
<meta charset="UTF-8">
|
</BaseLayout>
|
||||||
<meta name="viewport" content="width=device-width">
|
|
||||||
<title>{title}</title>
|
|
||||||
|
|
||||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<AuthTest client:only />
|
|
||||||
|
|
||||||
<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/
|
|
||||||
-->
|
|
||||||
<ReactCounter client:visible />
|
|
||||||
</main>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
0
site/src/styles/_base.scss
Normal file
0
site/src/styles/_base.scss
Normal file
0
site/src/styles/_tokens.scss
Normal file
0
site/src/styles/_tokens.scss
Normal file
0
site/src/styles/_typography.scss
Normal file
0
site/src/styles/_typography.scss
Normal file
0
site/src/styles/_utils.scss
Normal file
0
site/src/styles/_utils.scss
Normal file
9
site/src/styles/global.scss
Normal file
9
site/src/styles/global.scss
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
@use "base";
|
||||||
|
@use "tokens";
|
||||||
|
@use "typography";
|
||||||
|
@use "utils";
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: black;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user