create layout and pages
This commit is contained in:
+20
@@ -0,0 +1,20 @@
|
||||
# build output
|
||||
dist/
|
||||
.output/
|
||||
|
||||
# dependencies
|
||||
node_modules/
|
||||
|
||||
# logs
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
|
||||
# environment variables
|
||||
.env
|
||||
.env.production
|
||||
|
||||
# macOS-specific files
|
||||
.DS_Store
|
||||
@@ -0,0 +1,50 @@
|
||||
# Welcome to [Astro](https://astro.build)
|
||||
|
||||
[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
|
||||
[](https://codesandbox.io/s/github/withastro/astro/tree/latest/examples/basics)
|
||||
|
||||
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
||||
|
||||
|
||||
|
||||
|
||||
## 🚀 Project Structure
|
||||
|
||||
Inside of your Astro project, you'll see the following folders and files:
|
||||
|
||||
```
|
||||
/
|
||||
├── public/
|
||||
│ └── favicon.svg
|
||||
├── src/
|
||||
│ ├── components/
|
||||
│ │ └── Card.astro
|
||||
│ ├── layouts/
|
||||
│ │ └── Layout.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 run dev` | Starts local dev server at `localhost:3000` |
|
||||
| `npm run build` | Build your production site to `./dist/` |
|
||||
| `npm run preview` | Preview your build locally, before deploying |
|
||||
| `npm run astro ...` | Run CLI commands like `astro add`, `astro preview` |
|
||||
| `npm run astro --help` | Get help using the Astro CLI |
|
||||
|
||||
## 👀 Want to learn more?
|
||||
|
||||
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
|
||||
@@ -0,0 +1,4 @@
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({});
|
||||
Generated
+9444
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "@example/basics",
|
||||
"type": "module",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview",
|
||||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"@picocss/pico": "^1.5.6",
|
||||
"astro": "^1.6.13",
|
||||
"astro-remote": "^0.2.3",
|
||||
"date-fns": "^2.29.3"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 36 36">
|
||||
<path fill="#000" d="M22.25 4h-8.5a1 1 0 0 0-.96.73l-5.54 19.4a.5.5 0 0 0 .62.62l5.05-1.44a2 2 0 0 0 1.38-1.4l3.22-11.66a.5.5 0 0 1 .96 0l3.22 11.67a2 2 0 0 0 1.38 1.39l5.05 1.44a.5.5 0 0 0 .62-.62l-5.54-19.4a1 1 0 0 0-.96-.73Z"/>
|
||||
<path fill="url(#gradient)" d="M18 28a7.63 7.63 0 0 1-5-2c-1.4 2.1-.35 4.35.6 5.55.14.17.41.07.47-.15.44-1.8 2.93-1.22 2.93.6 0 2.28.87 3.4 1.72 3.81.34.16.59-.2.49-.56-.31-1.05-.29-2.46 1.29-3.25 3-1.5 3.17-4.83 2.5-6-.67.67-2.6 2-5 2Z"/>
|
||||
<defs>
|
||||
<linearGradient id="gradient" x1="16" x2="16" y1="32" y2="24" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#000"/>
|
||||
<stop offset="1" stop-color="#000" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<style>
|
||||
@media (prefers-color-scheme:dark){:root{filter:invert(100%)}}
|
||||
</style>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 873 B |
@@ -0,0 +1,12 @@
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
<footer>
|
||||
<p>
|
||||
Copyright 2022 - <a href="https://ghall.dev">Graham Hall</a>
|
||||
</p>
|
||||
<p>
|
||||
Built with <a href="https://astro.build">Astro</a> and <a href="https://picocss.com">Pico.css</a>
|
||||
</p>
|
||||
</footer>
|
||||
@@ -0,0 +1,21 @@
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
<div>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<span style={{ fontSize: '1.6rem' }}>Graham Hall</span>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/">📝 Blog</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/about">👨💻 About</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
/// <reference types="astro/client" />
|
||||
@@ -0,0 +1,29 @@
|
||||
---
|
||||
import '@picocss/pico'
|
||||
|
||||
import Header from '../components/Header.astro'
|
||||
import Footer from '../components/Footer.astro'
|
||||
|
||||
export interface Props {
|
||||
title: string;
|
||||
}
|
||||
|
||||
const { title } = Astro.props;
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
<body class="container">
|
||||
<Header />
|
||||
<slot />
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
---
|
||||
layout: '../layouts/Layout.astro'
|
||||
title: 'About'
|
||||
---
|
||||
|
||||
## Hello World!
|
||||
|
||||
My name is Graham Hall, a web developer from Rhode Island.
|
||||
|
||||
When I'm not writing code, I'm usually enjoying one of my other hobbies; video games, music, hiking, photography, art, the list goes on...
|
||||
|
||||
I write about web development on [my other blog](https://ghall.dev/blog), but I wanted an outlet to write about some of my other interests. So, I put together this site to share whatever's on my mind about the world of tech, gaming, life, whatever strikes my fancy.
|
||||
|
||||
If you want to get in touch, I'm on [Mastodon](https://home.social/@ghalldev).
|
||||
@@ -0,0 +1,23 @@
|
||||
---
|
||||
import { format } from 'date-fns';
|
||||
import { Markup } from 'astro-remote';
|
||||
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
|
||||
const response = await fetch(`https://api.cosmicjs.com/v2/buckets/${import.meta.env.BUCKET_SLUG}/objects?pretty=true&query=%7B%22type%22%3A%22blog-posts%22%7D&read_key=${import.meta.env.BUCKET_READ_KEY}&limit=20&props=slug,title,content`)
|
||||
const posts = await response.json();
|
||||
|
||||
---
|
||||
|
||||
<Layout title="Blog">
|
||||
<div>
|
||||
{posts.objects.map(post => (
|
||||
<article >
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<h4>{post.title}</h4>
|
||||
</div>
|
||||
<Markup content={post.content} />
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</Layout>
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"extends": "astro/tsconfigs/base"
|
||||
}
|
||||
Reference in New Issue
Block a user