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/components/Story.astro | |
| 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/components/Story.astro')
| -rw-r--r-- | examples/hackernews/src/components/Story.astro | 77 |
1 files changed, 77 insertions, 0 deletions
diff --git a/examples/hackernews/src/components/Story.astro b/examples/hackernews/src/components/Story.astro new file mode 100644 index 000000000..ee43bab17 --- /dev/null +++ b/examples/hackernews/src/components/Story.astro @@ -0,0 +1,77 @@ +--- +import Show from './Show.astro'; +import type { IStory } from '../types.js'; + +export interface Props { + story: IStory; +} + +const { story } = Astro.props; +--- + +<li> + <span class="score">{story.points}</span> + <span class="title"> + <Show when={story.url}> + <a href={story.url} target="_blank" rel="noreferrer"> + {story.title} + </a> + <span class="host"> ({story.domain})</span> + <a slot="fallback" href={`/item/${story.id}`}>{story.title}</a> + </Show> + </span> + <br /> + <span class="meta"> + <Show when={story.type !== 'job'}> + by <a href={`/users/${story.user}`}>{story.user}</a>{' '} + {story.time_ago}{' '}|{' '} + <a href={`/stories/${story.id}`}> + {story.comments_count ? `${story.comments_count} comments` : 'discuss'} + </a> + <a slot="fallback" href={`/stories/${story.id}`}>{story.time_ago}</a> + </Show> + </span> + <Show when={story.type !== 'link'}> + + <span class="label">{story.type}</span> + </Show> +</li> + +<style> + li { + background-color: rgb(248 250 252); + padding: 20px 30px 20px 80px; + border-bottom: 1px solid #eee; + position: relative; + line-height: 20px; + } + + .score { + color: rgb(88 28 135); + font-size: 1.1em; + font-weight: 700; + position: absolute; + top: 50%; + left: 0; + width: 80px; + text-align: center; + margin-top: -10px; + } + + .host, + .meta { + font-size: 0.85em; + color: rgb(51 65 85); + } + + .host a, + .meta a { + color: rgb(51 65 85); + text-decoration: underline; + } + + .host a:hover, + .meta a:hover { + color: #335d92; + } +</style> |