diff options
author | 2021-04-26 16:54:20 -0500 | |
---|---|---|
committer | 2021-04-26 15:54:20 -0600 | |
commit | dea1a6dfc9dec54034d2b872b4cd36c0174814c6 (patch) | |
tree | 49569a511201b4defc23b6654b475e458452596a /examples/blog/src/components | |
parent | 0ea4a986e207238bf0ac1db841b2a5d5b567d84d (diff) | |
download | astro-dea1a6dfc9dec54034d2b872b4cd36c0174814c6.tar.gz astro-dea1a6dfc9dec54034d2b872b4cd36c0174814c6.tar.zst astro-dea1a6dfc9dec54034d2b872b4cd36c0174814c6.zip |
Update defaults directory structure to `src` and `dist` (#132)
* chore: update defaults in docs
* chore: update config defaults
* test: update tests to config defaults
* chore: update gitignore to new defaults
* docs: update readme to new defaults
* chore: update examples to new defaults
* chore: update default exclude in lang server
* chore: update tests
* test: fix failing tests
* chore: update www defaults
Diffstat (limited to 'examples/blog/src/components')
-rw-r--r-- | examples/blog/src/components/AuthorCard.astro | 31 | ||||
-rw-r--r-- | examples/blog/src/components/Counter.jsx | 15 | ||||
-rw-r--r-- | examples/blog/src/components/MainHead.astro | 32 | ||||
-rw-r--r-- | examples/blog/src/components/Nav.astro | 44 | ||||
-rw-r--r-- | examples/blog/src/components/Pagination.astro | 34 | ||||
-rw-r--r-- | examples/blog/src/components/PostPreview.astro | 58 |
6 files changed, 214 insertions, 0 deletions
diff --git a/examples/blog/src/components/AuthorCard.astro b/examples/blog/src/components/AuthorCard.astro new file mode 100644 index 000000000..46ff504f7 --- /dev/null +++ b/examples/blog/src/components/AuthorCard.astro @@ -0,0 +1,31 @@ +--- +export let author; +--- + +<style lang="scss"> +.card { + display: flex; + align-items: center; +} + +.avatar { + width: 1.5rem; + height: 1.5rem; + margin-right: 0.5rem; + object-fit: cover; + border-radius: 50%; + overflow: hidden; + + img { + width: 100%; + height: 100%; + } +} +</style> + +<div class="card"> + <div class="avatar"> + <img class="avatar" src={author.img} alt={author.name} /> + </div> + {author.name} +</div> diff --git a/examples/blog/src/components/Counter.jsx b/examples/blog/src/components/Counter.jsx new file mode 100644 index 000000000..c9b27e1a7 --- /dev/null +++ b/examples/blog/src/components/Counter.jsx @@ -0,0 +1,15 @@ +import React, { useState } from 'react'; +// import confetti from 'canvas-confetti'; + +export default function Counter() { + // Declare a new state variable, which we'll call "count" + const [count, setCount] = useState(0); + // console.log(confetti()); + + return ( + <div> + <p>You clicked {count} times</p> + <button onClick={() => setCount(count + 1)}>Click me</button> + </div> + ); +} diff --git a/examples/blog/src/components/MainHead.astro b/examples/blog/src/components/MainHead.astro new file mode 100644 index 000000000..bff812b0c --- /dev/null +++ b/examples/blog/src/components/MainHead.astro @@ -0,0 +1,32 @@ +--- +// props +export let title: string; +export let description: string; +export let image: string | undefined; +export let type: string | undefined; + +// internal data +const OG_TYPES = { + 'movie': 'video.movie', + 'television': 'video.tv_show' +} +--- + +<!-- Common --> +<meta charset="UTF-8" /> +<title>{title}</title> +<meta name="description" content={description} /> +<link rel="stylesheet" href="/global.css" /> + +<!-- OpenGraph --> +<meta property="og:title" content={title} /> +<meta property="og:description" content={description} /> +{image && (<meta property="og:image" content={image} />)} +{OG_TYPES[type] && (<meta property="og:type" content={OG_TYPES[type]} />)} + +<!-- Twitter --> +<meta name="twitter:card" content={image ? 'summary_large_image' : 'summary'} /> +<meta name="twitter:site" content="@astro" /> +<meta name="twitter:title" content={title} /> +<meta name="twitter:description" content={description} /> +{image && (<meta name="twitter:image" content={image} />)} diff --git a/examples/blog/src/components/Nav.astro b/examples/blog/src/components/Nav.astro new file mode 100644 index 000000000..f1ac28c98 --- /dev/null +++ b/examples/blog/src/components/Nav.astro @@ -0,0 +1,44 @@ +<style lang="scss"> +.header { + display: flex; + align-items: center; + padding: 2rem; +} + +.title { + margin: 0; + font-size: 1em; + margin-right: 2rem; +} + +.nav { + display: flex; +} + +ul { + display: flex; + list-style: none; + margin: 0; + padding: 0; +} + +li { + margin: 0; +} + +a { + display: block; + margin-left: 1rem; + margin-right: 1rem; +} +</style> + +<nav class="header"> + <h1 class="title">Muppet Blog</h1> + <ul class="nav"> + <li><a href="/">All Posts</a></li> + <li><a href="/tag/movie/1">Movies</a></li> + <li><a href="/tag/television/1">Television</a></li> + <li><a href="/about">About</a></li> + </ul> +</nav> diff --git a/examples/blog/src/components/Pagination.astro b/examples/blog/src/components/Pagination.astro new file mode 100644 index 000000000..8e033c668 --- /dev/null +++ b/examples/blog/src/components/Pagination.astro @@ -0,0 +1,34 @@ +--- +export let prevUrl: string; +export let nextUrl: string; +--- + +<style lang="scss"> +.nav { + display: flex; + max-width: 600px; + width: 100%; + margin-left: auto; + margin-right: auto; + padding-left: 2rem; + padding-right: 2rem; +} + +.prev, +.next { + display: block; +} + +.prev { + margin-right: auto; +} + +.next { + margin-left: auto; +} +</style> + +<nav class="nav"> + <a class="prev" href={prevUrl || '#'}>Prev</a> + <a class="next" href={nextUrl || '#'}>Next</a> +</nav> diff --git a/examples/blog/src/components/PostPreview.astro b/examples/blog/src/components/PostPreview.astro new file mode 100644 index 000000000..e4e39143a --- /dev/null +++ b/examples/blog/src/components/PostPreview.astro @@ -0,0 +1,58 @@ +--- +export let post; +export let author; + +import AuthorCard from './AuthorCard.astro'; + +function formatDate(date) { + return new Date(date).toUTCString(); +} +--- + +<style lang="scss"> +.post { + display: grid; + grid-template-columns: 8rem auto; + grid-gap: 1.5rem; + margin-top: 1.5rem; + margin-bottom: 1.5rem; +} + +.thumb { + width: 8rem; + height: 8rem; + object-fit: cover; + border-radius: 0.25rem; + overflow: hidden; + + img { + width: 100%; + height: 100%; + } +} + +h1 { + font-weight: 700; + font-size: 1em; + margin-bottom: 0; +} + +time { + display: block; + margin-top: 0.5em; + margin-bottom: 0.5em; +} +</style> + +<article class="post"> + <div class="thumb"> + <img src={post.image} alt={post.title} /> + </div> + <div class="data"> + <h1>{post.title}</h1> + <AuthorCard author={author} /> + <time>{formatDate(post.date)}</time> + <p>{post.description}</p> + <a href={post.url}>Read</a> + </div> +</article> |