diff options
| author |  Nate Moore <natemoo-re@users.noreply.github.com>
| 2021-04-26 16:54:20 -0500 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2021-04-26 15:54:20 -0600 |
| commit | dea1a6dfc9dec54034d2b872b4cd36c0174814c6 (patch) | |
| tree | 49569a511201b4defc23b6654b475e458452596a /examples/blog/src/components/PostPreview.astro | |
| 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/PostPreview.astro')
| -rw-r--r-- | examples/blog/src/components/PostPreview.astro | 58 |
1 files changed, 58 insertions, 0 deletions
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> |