summaryrefslogtreecommitdiff
path: root/examples/blog/src/components
diff options
context:
space:
mode:
authorGravatar Nate Moore <natemoo-re@users.noreply.github.com> 2021-04-26 16:54:20 -0500
committerGravatar GitHub <noreply@github.com> 2021-04-26 15:54:20 -0600
commitdea1a6dfc9dec54034d2b872b4cd36c0174814c6 (patch)
tree49569a511201b4defc23b6654b475e458452596a /examples/blog/src/components
parent0ea4a986e207238bf0ac1db841b2a5d5b567d84d (diff)
downloadastro-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.astro31
-rw-r--r--examples/blog/src/components/Counter.jsx15
-rw-r--r--examples/blog/src/components/MainHead.astro32
-rw-r--r--examples/blog/src/components/Nav.astro44
-rw-r--r--examples/blog/src/components/Pagination.astro34
-rw-r--r--examples/blog/src/components/PostPreview.astro58
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>