benjaminramey/forgetmenot-serverless
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Start on styling and component cleanup

Browse Source
This commit is contained in:
Benjamin Ramey
2021-10-05 09:38:48 -05:00
parent d4e76486fc
commit 53ca2e063d
9 changed files with 38 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
site/src/components/ReactCounter.jsx
View File

@@ -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>
);
}

85
site/src/components/Tour.astro
View File

@@ -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
View 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>

64
site/src/pages/index.astro
View File

@@ -1,63 +1,7 @@
---
// Component Imports
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/
import BaseLayout from '../layouts/BaseLayout.astro';
---
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>{title}</title>
<BaseLayout title="Forget Me Not">
<p>Index page</p>
</BaseLayout>
<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
View File

0
site/src/styles/_tokens.scss Normal file
View File

0
site/src/styles/_typography.scss Normal file
View File

0
site/src/styles/_utils.scss Normal file
View File

9
site/src/styles/global.scss Normal file
View File

@@ -0,0 +1,9 @@
@use "base";
@use "tokens";
@use "typography";
@use "utils";
body {
background-color: black;
color: white;
}