diff options
| author |  Tony Sullivan <tony.f.sullivan@outlook.com>
| 2022-11-01 16:20:04 +0000 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2022-11-01 16:20:04 +0000 |
| commit | 4e2bd173932c231697a17a3098dc22ef3e481525 (patch) | |
| tree | 0cf7877436a1463d78dad231ef28ebd8116225fc /examples/hackernews/src/pages/stories | |
| parent | bb6e8800094dc59841eb3b345fcb8baca9e17ce9 (diff) | |
| download | astro-4e2bd173932c231697a17a3098dc22ef3e481525.tar.gz astro-4e2bd173932c231697a17a3098dc22ef3e481525.tar.zst astro-4e2bd173932c231697a17a3098dc22ef3e481525.zip | |
Adds a Hackernews example site (#5213)
* adds the hackernews example - TODO add readme content
* refactor: moving styles from root.css into components
* chore: add README content
* chore: lint fixes + prettier-plugin-astro@0.4.0
* Update examples/hackernews/README.md
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
* lint: remove unused variable
* nit: adding check command to example
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
Diffstat (limited to 'examples/hackernews/src/pages/stories')
| -rw-r--r-- | examples/hackernews/src/pages/stories/[id].astro | 96 |
1 files changed, 96 insertions, 0 deletions
diff --git a/examples/hackernews/src/pages/stories/[id].astro b/examples/hackernews/src/pages/stories/[id].astro new file mode 100644 index 000000000..6cd17ea45 --- /dev/null +++ b/examples/hackernews/src/pages/stories/[id].astro @@ -0,0 +1,96 @@ +--- +import Comment from '../../components/Comment.astro'; +import For from '../../components/For.astro'; +import Show from '../../components/Show.astro'; +import Layout from '../../layouts/Layout.astro'; +import fetchAPI from '../../lib/api'; +import type { IComment, IStory } from '../../types.js'; + +const { id } = Astro.params as { id: string }; + +const story = (await fetchAPI(`item/${id}`)) as IStory; +--- + +<Layout> + <div> + <header> + <a href={story.url} target="_blank"> + <h1>{story.title}</h1> + </a> + <Show when={story.domain}> + <span class="host">({story.domain})</span> + </Show> + <p class="meta"> + {story.points} points | by + <a href={`/users/${story.user}`}> + {story.user} + </a> + {story.time_ago} ago + </p> + </header> + <main> + <p> + {story.comments_count ? story.comments_count + ' comments' : 'No comments yet.'} + </p> + <ul class="comment-children"> + <For each={story.comments}> + {(comment: IComment) => <Comment comment={comment} />} + </For> + </ul> + </main> + </div> +</Layout> + +<style> + header { + background-color: rgb(248 250 252); + padding: 1.8em 2em 1em; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); + } + + h1 { + display: inline; + font-size: 1.5em; + margin: 0; + margin-right: 0.5em; + } + + .host, + .meta, + .host a { + color: rgb(51 65 85); + } + + .meta a { + text-decoration: underline; + } + + main { + background-color: rgb(248 250 252); + margin-top: 10px; + padding: 0 2em 0.5em; + } + + main p { + margin: 0; + font-size: 1.1em; + padding: 1em 0; + position: relative; + } + + main :global(ul) { + list-style-type: none; + padding: 0; + margin: 0; + } + + @media (max-width: 600px) { + h1 { + font-size: 1.25em; + } + } + + ul :global(ul) { + margin-left: 1.5em; + } +</style> |