mirror of
https://github.com/withastro/astro.git
synced 2024-12-16 21:46:22 -05:00
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>
This commit is contained in:
Tony Sullivan
GitHub
parent
bb6e880009
commit
4e2bd17393
24 changed files with 858 additions and 5 deletions
20
examples/hackernews/.gitignore
vendored
Normal file
20
examples/hackernews/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
# build output
|
||||||
|
dist/
|
||||||
|
.output/
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
node_modules/
|
||||||
|
|
||||||
|
# logs
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
|
|
||||||
|
# environment variables
|
||||||
|
.env
|
||||||
|
.env.production
|
||||||
|
|
||||||
|
# macOS-specific files
|
||||||
|
.DS_Store
|
||||||
4
examples/hackernews/.vscode/extensions.json
vendored
Normal file
4
examples/hackernews/.vscode/extensions.json
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"recommendations": ["astro-build.astro-vscode"],
|
||||||
|
"unwantedRecommendations": []
|
||||||
|
}
|
||||||
11
examples/hackernews/.vscode/launch.json
vendored
Normal file
11
examples/hackernews/.vscode/launch.json
vendored
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
{
|
||||||
|
"version": "0.2.0",
|
||||||
|
"configurations": [
|
||||||
|
{
|
||||||
|
"command": "./node_modules/.bin/astro dev",
|
||||||
|
"name": "Development server",
|
||||||
|
"request": "launch",
|
||||||
|
"type": "node-terminal"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
57
examples/hackernews/README.md
Normal file
57
examples/hackernews/README.md
Normal file
|
|
@ -0,0 +1,57 @@
|
||||||
|
# Astro Starter Kit: Hackernews
|
||||||
|
|
||||||
|
```
|
||||||
|
npm create astro@latest -- --template hackernews
|
||||||
|
```
|
||||||
|
|
||||||
|
[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/hackernews)
|
||||||
|
|
||||||
|
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
||||||
|
|
||||||
|
## 🚀 Project Structure
|
||||||
|
|
||||||
|
Inside of your Astro project, you'll see the following folders and files:
|
||||||
|
|
||||||
|
```
|
||||||
|
/
|
||||||
|
├── public/
|
||||||
|
│ └── favicon.svg
|
||||||
|
├── src/
|
||||||
|
│ ├── components/
|
||||||
|
│ ├── layouts/
|
||||||
|
│ │ └── Layout.astro
|
||||||
|
│ └── pages/
|
||||||
|
└── stories/
|
||||||
|
└── [id].astro
|
||||||
|
└── users/
|
||||||
|
└── [id].astro
|
||||||
|
│ └── [...stories].astro
|
||||||
|
└── package.json
|
||||||
|
```
|
||||||
|
|
||||||
|
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name. Because the list of stories and users is always changing, dynamic routes like `[id].astro` are used to build pages when a specific page is requested.
|
||||||
|
|
||||||
|
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
|
||||||
|
|
||||||
|
Any static assets, like images, can be placed in the `public/` directory.
|
||||||
|
|
||||||
|
## Server-side rendering (SSR)
|
||||||
|
|
||||||
|
This project uses the [`@astrojs/node`](https://docs.astro.build/en/guides/integrations-guide/node/) adapter to deploy the SSR site to Node targets. Check out Astro's [deployment docs](https://docs.astro.build/en/guides/deploy/) for details on other adapters and hosting environments.
|
||||||
|
|
||||||
|
## 🧞 Commands
|
||||||
|
|
||||||
|
All commands are run from the root of the project, from a terminal:
|
||||||
|
|
||||||
|
| Command | Action |
|
||||||
|
| :--------------------- | :----------------------------------------------- |
|
||||||
|
| `npm install` | Installs dependencies |
|
||||||
|
| `npm run dev` | Starts local dev server at `localhost:3000` |
|
||||||
|
| `npm run build` | Build your production site to `./dist/` |
|
||||||
|
| `npm run preview` | Preview your build locally, before deploying |
|
||||||
|
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
|
||||||
|
| `npm run astro --help` | Get help using the Astro CLI |
|
||||||
|
|
||||||
|
## 👀 Want to learn more?
|
||||||
|
|
||||||
|
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
|
||||||
10
examples/hackernews/astro.config.mjs
Normal file
10
examples/hackernews/astro.config.mjs
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
import { defineConfig } from 'astro/config';
|
||||||
|
import node from '@astrojs/node';
|
||||||
|
|
||||||
|
// https://astro.build/config
|
||||||
|
export default defineConfig({
|
||||||
|
output: 'server',
|
||||||
|
adapter: node({
|
||||||
|
mode: 'standalone',
|
||||||
|
}),
|
||||||
|
});
|
||||||
18
examples/hackernews/package.json
Normal file
18
examples/hackernews/package.json
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
{
|
||||||
|
"name": "@example/hackernews",
|
||||||
|
"type": "module",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "astro dev",
|
||||||
|
"start": "astro dev",
|
||||||
|
"check": "astro check && tsc",
|
||||||
|
"build": "astro build",
|
||||||
|
"preview": "astro preview",
|
||||||
|
"astro": "astro"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@astrojs/node": "^2.0.1",
|
||||||
|
"astro": "^1.5.2"
|
||||||
|
}
|
||||||
|
}
|
||||||
13
examples/hackernews/public/favicon.svg
Normal file
13
examples/hackernews/public/favicon.svg
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 36 36">
|
||||||
|
<path fill="#000" d="M22.25 4h-8.5a1 1 0 0 0-.96.73l-5.54 19.4a.5.5 0 0 0 .62.62l5.05-1.44a2 2 0 0 0 1.38-1.4l3.22-11.66a.5.5 0 0 1 .96 0l3.22 11.67a2 2 0 0 0 1.38 1.39l5.05 1.44a.5.5 0 0 0 .62-.62l-5.54-19.4a1 1 0 0 0-.96-.73Z"/>
|
||||||
|
<path fill="url(#gradient)" d="M18 28a7.63 7.63 0 0 1-5-2c-1.4 2.1-.35 4.35.6 5.55.14.17.41.07.47-.15.44-1.8 2.93-1.22 2.93.6 0 2.28.87 3.4 1.72 3.81.34.16.59-.2.49-.56-.31-1.05-.29-2.46 1.29-3.25 3-1.5 3.17-4.83 2.5-6-.67.67-2.6 2-5 2Z"/>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="gradient" x1="16" x2="16" y1="32" y2="24" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#000"/>
|
||||||
|
<stop offset="1" stop-color="#000" stop-opacity="0"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<style>
|
||||||
|
@media (prefers-color-scheme:dark){:root{filter:invert(100%)}}
|
||||||
|
</style>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 873 B |
11
examples/hackernews/sandbox.config.json
Normal file
11
examples/hackernews/sandbox.config.json
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
{
|
||||||
|
"infiniteLoopProtection": true,
|
||||||
|
"hardReloadOnChange": false,
|
||||||
|
"view": "browser",
|
||||||
|
"template": "node",
|
||||||
|
"container": {
|
||||||
|
"port": 3000,
|
||||||
|
"startScript": "start",
|
||||||
|
"node": "14"
|
||||||
|
}
|
||||||
|
}
|
||||||
59
examples/hackernews/src/components/Comment.astro
Normal file
59
examples/hackernews/src/components/Comment.astro
Normal file
|
|
@ -0,0 +1,59 @@
|
||||||
|
---
|
||||||
|
import For from './For.astro';
|
||||||
|
import Show from './Show.astro';
|
||||||
|
import Toggle from './Toggle.astro';
|
||||||
|
import type { IComment } from '../types.js';
|
||||||
|
|
||||||
|
export interface Props {
|
||||||
|
comment: IComment;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { comment } = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<div class="by">
|
||||||
|
<a href={`/users/${comment.user}`}>{comment.user}</a>{' '}
|
||||||
|
{comment.time_ago} ago
|
||||||
|
</div>
|
||||||
|
<div class="text" set:html={comment.content}></div>
|
||||||
|
<Show when={comment.comments.length}>
|
||||||
|
<Toggle open>
|
||||||
|
<For each={comment.comments}>{(comment: IComment) => <Astro.self comment={comment} />}</For>
|
||||||
|
</Toggle>
|
||||||
|
</Show>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
li {
|
||||||
|
border-top: 1px solid #eee;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.by,
|
||||||
|
.text {
|
||||||
|
font-size: 0.9em;
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.by {
|
||||||
|
color: rgb(51 65 85);
|
||||||
|
}
|
||||||
|
|
||||||
|
.by a {
|
||||||
|
color: rgb(51 65 85);
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text :global(a:hover) {
|
||||||
|
color: #335d92;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text :global(pre) {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
21
examples/hackernews/src/components/For.astro
Normal file
21
examples/hackernews/src/components/For.astro
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
---
|
||||||
|
import Show from './Show.astro';
|
||||||
|
|
||||||
|
export interface Props<T> {
|
||||||
|
each: Iterable<T>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { each } = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
{(async function* () {
|
||||||
|
for await (const value of each) {
|
||||||
|
let html = await Astro.slots.render('default', [value]);
|
||||||
|
yield <Fragment set:html={html} />;
|
||||||
|
yield '\n';
|
||||||
|
}
|
||||||
|
})()}
|
||||||
|
|
||||||
|
<Show when={!each.length}>
|
||||||
|
<slot name="fallback" />
|
||||||
|
</Show>
|
||||||
97
examples/hackernews/src/components/Nav.astro
Normal file
97
examples/hackernews/src/components/Nav.astro
Normal file
|
|
@ -0,0 +1,97 @@
|
||||||
|
---
|
||||||
|
interface Link {
|
||||||
|
href: string;
|
||||||
|
text: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const links: Link[] = [
|
||||||
|
{ href: '/', text: 'HN' },
|
||||||
|
{ href: '/new', text: 'New' },
|
||||||
|
{ href: '/show', text: 'Show' },
|
||||||
|
{ href: '/ask', text: 'Ask' },
|
||||||
|
{ href: '/job', text: 'Jobs' },
|
||||||
|
];
|
||||||
|
---
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<nav aria-label="Main menu">
|
||||||
|
{links.map(({ href, text }) => (
|
||||||
|
<a href={href} aria-current={href === Astro.url.pathname ? 'page' : undefined}>
|
||||||
|
<strong>{text}</strong>
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
<a class="github" href="http://github.com/withastro/astro" target="_blank" rel="noreferrer">
|
||||||
|
Built with Astro
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
header {
|
||||||
|
background-color: rgb(107 33 168);
|
||||||
|
position: fixed;
|
||||||
|
z-index: 999;
|
||||||
|
height: 55px;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
max-width: 800px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 15px 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a {
|
||||||
|
color: rgba(248, 250, 252, 0.8);
|
||||||
|
line-height: 24px;
|
||||||
|
transition: color 0.15s ease;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
font-weight: 300;
|
||||||
|
letter-spacing: 0.075em;
|
||||||
|
margin-right: 1.8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a:hover {
|
||||||
|
color: rgb(248 250 252);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav [aria-current='page'] {
|
||||||
|
color: rgb(248 250 252);
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a:last-of-type {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.github {
|
||||||
|
color: rgb(248 250 252);
|
||||||
|
font-size: 0.9em;
|
||||||
|
margin: 0;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 860px) {
|
||||||
|
nav {
|
||||||
|
padding: 15px 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
nav {
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
margin-right: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.github {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
9
examples/hackernews/src/components/Show.astro
Normal file
9
examples/hackernews/src/components/Show.astro
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
---
|
||||||
|
export interface Props<T> {
|
||||||
|
when: T | number | boolean | undefined | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { when } = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
{!!when ? <slot /> : <slot name="fallback" />}
|
||||||
77
examples/hackernews/src/components/Story.astro
Normal file
77
examples/hackernews/src/components/Story.astro
Normal file
|
|
@ -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>
|
||||||
78
examples/hackernews/src/components/Toggle.astro
Normal file
78
examples/hackernews/src/components/Toggle.astro
Normal file
|
|
@ -0,0 +1,78 @@
|
||||||
|
---
|
||||||
|
export interface Props {
|
||||||
|
open?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { open = false } = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<hn-toggle open={open ? '' : undefined}>
|
||||||
|
<div class="toggle">
|
||||||
|
<a>{open ? '[-]' : '[+] comments collapsed'}</a>
|
||||||
|
</div>
|
||||||
|
<ul class="comment-children">
|
||||||
|
<slot />
|
||||||
|
</ul>
|
||||||
|
</hn-toggle>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
hn-toggle[open] > .toggle {
|
||||||
|
padding: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
margin-bottom: -0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
hn-toggle:not([open]) > .toggle {
|
||||||
|
background-color: rgb(255 247 237);
|
||||||
|
}
|
||||||
|
hn-toggle:not([open]) ul {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle {
|
||||||
|
font-size: 0.9em;
|
||||||
|
margin: 1em 0;
|
||||||
|
padding: 0.3em 0.5em;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: rgb(51 65 85);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
class HnToggle extends HTMLElement {
|
||||||
|
#btn = this.querySelector<HTMLAnchorElement>('a')!;
|
||||||
|
#toggleOpen = this.toggleOpen.bind(this);
|
||||||
|
|
||||||
|
connectedCallback() {
|
||||||
|
this.#btn.addEventListener('click', this.#toggleOpen, false);
|
||||||
|
}
|
||||||
|
|
||||||
|
disconnectedCallback() {
|
||||||
|
this.#btn.addEventListener('click', this.#toggleOpen);
|
||||||
|
}
|
||||||
|
|
||||||
|
get open() {
|
||||||
|
return this.hasAttribute('open');
|
||||||
|
}
|
||||||
|
|
||||||
|
set open(value: boolean) {
|
||||||
|
if (value) {
|
||||||
|
this.setAttribute('open', '');
|
||||||
|
this.#btn.textContent = '[-]';
|
||||||
|
} else {
|
||||||
|
this.removeAttribute('open');
|
||||||
|
this.#btn.textContent = '[+] comments collapsed';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleOpen() {
|
||||||
|
this.open = !this.open;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define('hn-toggle', HnToggle);
|
||||||
|
</script>
|
||||||
1
examples/hackernews/src/env.d.ts
vendored
Normal file
1
examples/hackernews/src/env.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
/// <reference types="astro/client" />
|
||||||
35
examples/hackernews/src/layouts/Layout.astro
Normal file
35
examples/hackernews/src/layouts/Layout.astro
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
---
|
||||||
|
import Nav from '../components/Nav.astro';
|
||||||
|
---
|
||||||
|
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<meta name="generator" content={Astro.generator} />
|
||||||
|
<title>Astro - Hacker News</title>
|
||||||
|
<meta name="description" content="Hacker News Clone built with Astro" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<Nav />
|
||||||
|
<slot />
|
||||||
|
<style is:global>
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
|
||||||
|
Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||||
|
font-size: 15px;
|
||||||
|
background-color: rgb(226 232 240);
|
||||||
|
margin: 0;
|
||||||
|
padding-top: 55px;
|
||||||
|
color: rgb(15 23 42);
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: rgb(15 23 42);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
24
examples/hackernews/src/lib/api.ts
Normal file
24
examples/hackernews/src/lib/api.ts
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
const story = (path: string) => `https://node-hnapi.herokuapp.com/${path}`;
|
||||||
|
const user = (path: string) => `https://hacker-news.firebaseio.com/v0/${path}.json`;
|
||||||
|
|
||||||
|
export default async function fetchAPI(path: string) {
|
||||||
|
const url = path.startsWith('user') ? user(path) : story(path);
|
||||||
|
const headers = { 'User-Agent': 'chrome' };
|
||||||
|
|
||||||
|
try {
|
||||||
|
let response = await fetch(url, { headers });
|
||||||
|
let text = await response.text();
|
||||||
|
try {
|
||||||
|
if (text === null) {
|
||||||
|
return { error: 'Not found' };
|
||||||
|
}
|
||||||
|
return JSON.parse(text);
|
||||||
|
} catch (e) {
|
||||||
|
console.error(`Recevied from API: ${text}`);
|
||||||
|
console.error(e);
|
||||||
|
return { error: e };
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
return { error };
|
||||||
|
}
|
||||||
|
}
|
||||||
105
examples/hackernews/src/pages/[...stories].astro
Normal file
105
examples/hackernews/src/pages/[...stories].astro
Normal file
|
|
@ -0,0 +1,105 @@
|
||||||
|
---
|
||||||
|
import For from '../components/For.astro';
|
||||||
|
import Show from '../components/Show.astro';
|
||||||
|
import Story from '../components/Story.astro';
|
||||||
|
import Layout from '../layouts/Layout.astro';
|
||||||
|
import fetchAPI from '../lib/api';
|
||||||
|
import type { IStory } from '../types.js';
|
||||||
|
|
||||||
|
const mapStories = {
|
||||||
|
top: 'news',
|
||||||
|
new: 'newest',
|
||||||
|
show: 'show',
|
||||||
|
ask: 'ask',
|
||||||
|
job: 'jobs',
|
||||||
|
};
|
||||||
|
|
||||||
|
function safeParseInt(value: any, fallback: number) {
|
||||||
|
try {
|
||||||
|
return parseInt(value) || fallback;
|
||||||
|
} catch {
|
||||||
|
return fallback;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const page = safeParseInt(Astro.url.searchParams.get('page'), 1);
|
||||||
|
const type =
|
||||||
|
Astro.params.stories && Astro.params.stories in mapStories
|
||||||
|
? (Astro.params.stories.toString() as keyof typeof mapStories)
|
||||||
|
: 'top';
|
||||||
|
|
||||||
|
const stories = (await fetchAPI(`${mapStories[type]}?page=${page}`)) as IStory[];
|
||||||
|
---
|
||||||
|
|
||||||
|
<Layout>
|
||||||
|
<section>
|
||||||
|
<nav aria-labelledby="current-page">
|
||||||
|
<Show when={page > 1}>
|
||||||
|
<a href={`/${type}?page=${page - 1}`} aria-label="Previous Page"> < prev</a>
|
||||||
|
<span slot="fallback" aria-disabled="true"> < prev</span>
|
||||||
|
</Show>
|
||||||
|
<span id="current-page">page {page}</span>
|
||||||
|
<Show when={stories?.length >= 29}>
|
||||||
|
<a href={`/${type}?page=${page + 1}`} aria-label="Next Page">more ></a>
|
||||||
|
<span slot="fallback" aria-disabled="true"> more ></span>
|
||||||
|
</Show>
|
||||||
|
</nav>
|
||||||
|
<main>
|
||||||
|
<Show when={stories}>
|
||||||
|
<ul>
|
||||||
|
<For each={stories}>{(story: IStory) => <Story story={story} />}</For>
|
||||||
|
</ul>
|
||||||
|
</Show>
|
||||||
|
</main>
|
||||||
|
</section>
|
||||||
|
</Layout>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
section {
|
||||||
|
padding-top: 45px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav,
|
||||||
|
main {
|
||||||
|
background-color: rgb(248 250 252);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
padding: 15px 30px;
|
||||||
|
position: fixed;
|
||||||
|
text-align: center;
|
||||||
|
top: 55px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 998;
|
||||||
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a {
|
||||||
|
margin: 0 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
[aria-disabled='true'] {
|
||||||
|
color: rgb(71 85 105);
|
||||||
|
margin: 0 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
position: absolute;
|
||||||
|
margin: 30px 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
main {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
96
examples/hackernews/src/pages/stories/[id].astro
Normal file
96
examples/hackernews/src/pages/stories/[id].astro
Normal file
|
|
@ -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>
|
||||||
69
examples/hackernews/src/pages/users/[id].astro
Normal file
69
examples/hackernews/src/pages/users/[id].astro
Normal file
|
|
@ -0,0 +1,69 @@
|
||||||
|
---
|
||||||
|
import Show from '../../components/Show.astro';
|
||||||
|
import Layout from '../../layouts/Layout.astro';
|
||||||
|
import fetchAPI from '../../lib/api';
|
||||||
|
import type { IUser } from '../../types.js';
|
||||||
|
|
||||||
|
const { id } = Astro.params as { id: string };
|
||||||
|
|
||||||
|
const user = (await fetchAPI(`user/${id}`)) as IUser;
|
||||||
|
---
|
||||||
|
|
||||||
|
<Layout>
|
||||||
|
<main>
|
||||||
|
<Show when={user}>
|
||||||
|
<Show when={!user.error}>
|
||||||
|
<h1 slot="fallback">User not found.</h1>
|
||||||
|
<h1>User : {user.id}</h1>
|
||||||
|
<ul class="meta">
|
||||||
|
<li>
|
||||||
|
<span class="label">Created:</span>
|
||||||
|
{user.created}
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span class="label">Karma:</span>
|
||||||
|
{user.karma}
|
||||||
|
</li>
|
||||||
|
<Show when={user.about}>
|
||||||
|
<li set:html={user.about} class="about"></li>{' '}
|
||||||
|
</Show>
|
||||||
|
</ul>
|
||||||
|
<p>
|
||||||
|
<a href={`https://news.ycombinator.com/submitted?id=${user.id}`}>submissions</a> |{' '}
|
||||||
|
<a href={`https://news.ycombinator.com/threads?id=${user.id}`}>comments</a>
|
||||||
|
</p>
|
||||||
|
</Show>
|
||||||
|
</Show>
|
||||||
|
</main>
|
||||||
|
</Layout>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
main {
|
||||||
|
background-color: rgb(248 250 252);
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 2em 3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta {
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
display: inline-block;
|
||||||
|
min-width: 4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about {
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
p a {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
27
examples/hackernews/src/types.ts
Normal file
27
examples/hackernews/src/types.ts
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
export interface IComment {
|
||||||
|
user: string;
|
||||||
|
time_ago: string;
|
||||||
|
content: string;
|
||||||
|
comments: IComment[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IStory {
|
||||||
|
id: string;
|
||||||
|
points: string;
|
||||||
|
url: string;
|
||||||
|
title: string;
|
||||||
|
domain: string;
|
||||||
|
type: string;
|
||||||
|
time_ago: string;
|
||||||
|
user: string;
|
||||||
|
comments_count: number;
|
||||||
|
comments: IComment[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IUser {
|
||||||
|
error: string;
|
||||||
|
id: string;
|
||||||
|
created: string;
|
||||||
|
karma: number;
|
||||||
|
about: string;
|
||||||
|
}
|
||||||
3
examples/hackernews/tsconfig.json
Normal file
3
examples/hackernews/tsconfig.json
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"extends": "astro/tsconfigs/base"
|
||||||
|
}
|
||||||
|
|
@ -91,7 +91,7 @@
|
||||||
"execa": "^6.1.0",
|
"execa": "^6.1.0",
|
||||||
"organize-imports-cli": "^0.10.0",
|
"organize-imports-cli": "^0.10.0",
|
||||||
"prettier": "^2.7.0",
|
"prettier": "^2.7.0",
|
||||||
"prettier-plugin-astro": "^0.3.0",
|
"prettier-plugin-astro": "^0.4.0",
|
||||||
"pretty-bytes": "^6.0.0",
|
"pretty-bytes": "^6.0.0",
|
||||||
"tiny-glob": "^0.2.9",
|
"tiny-glob": "^0.2.9",
|
||||||
"turbo": "1.2.5",
|
"turbo": "1.2.5",
|
||||||
|
|
|
||||||
|
|
@ -30,7 +30,7 @@ importers:
|
||||||
execa: ^6.1.0
|
execa: ^6.1.0
|
||||||
organize-imports-cli: ^0.10.0
|
organize-imports-cli: ^0.10.0
|
||||||
prettier: ^2.7.0
|
prettier: ^2.7.0
|
||||||
prettier-plugin-astro: ^0.3.0
|
prettier-plugin-astro: ^0.4.0
|
||||||
pretty-bytes: ^6.0.0
|
pretty-bytes: ^6.0.0
|
||||||
tiny-glob: ^0.2.9
|
tiny-glob: ^0.2.9
|
||||||
turbo: 1.2.5
|
turbo: 1.2.5
|
||||||
|
|
@ -53,7 +53,7 @@ importers:
|
||||||
execa: 6.1.0
|
execa: 6.1.0
|
||||||
organize-imports-cli: 0.10.0
|
organize-imports-cli: 0.10.0
|
||||||
prettier: 2.7.1
|
prettier: 2.7.1
|
||||||
prettier-plugin-astro: 0.3.0
|
prettier-plugin-astro: 0.4.1
|
||||||
pretty-bytes: 6.0.0
|
pretty-bytes: 6.0.0
|
||||||
tiny-glob: 0.2.9
|
tiny-glob: 0.2.9
|
||||||
turbo: 1.2.5
|
turbo: 1.2.5
|
||||||
|
|
@ -230,6 +230,14 @@ importers:
|
||||||
astro: link:../../packages/astro
|
astro: link:../../packages/astro
|
||||||
vue: 3.2.41
|
vue: 3.2.41
|
||||||
|
|
||||||
|
examples/hackernews:
|
||||||
|
specifiers:
|
||||||
|
'@astrojs/node': ^2.0.1
|
||||||
|
astro: ^1.5.2
|
||||||
|
dependencies:
|
||||||
|
'@astrojs/node': link:../../packages/integrations/node
|
||||||
|
astro: link:../../packages/astro
|
||||||
|
|
||||||
examples/integration:
|
examples/integration:
|
||||||
specifiers:
|
specifiers:
|
||||||
astro: ^1.6.2
|
astro: ^1.6.2
|
||||||
|
|
@ -15850,8 +15858,8 @@ packages:
|
||||||
fast-diff: 1.2.0
|
fast-diff: 1.2.0
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/prettier-plugin-astro/0.3.0:
|
/prettier-plugin-astro/0.4.1:
|
||||||
resolution: {integrity: sha512-ApEy5U3FPdylBa72L8k7W/h/zgegAyuHppDu9geVwFHzaaEQpaRCrT3Wt0nc6tNcbDaOgotBfcaUzMr0Cw6a8w==}
|
resolution: {integrity: sha512-AvYyg4WDnhmqH5S85EFgJAMU20p1lLypVt4sn4tuGW+lnPfWr70SaHZD9gevx20o3FnALgZxDu1enFSkN/MSwQ==}
|
||||||
engines: {node: ^14.15.0 || >=16.0.0, npm: '>=6.14.0'}
|
engines: {node: ^14.15.0 || >=16.0.0, npm: '>=6.14.0'}
|
||||||
dependencies:
|
dependencies:
|
||||||
'@astrojs/compiler': 0.19.0
|
'@astrojs/compiler': 0.19.0
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue