Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-16 21:46:22 -05:00
Code Issues Activity

Sync from a44cfb874a

Browse source
This commit is contained in:
github-actions[bot] 2024-12-16 19:52:14 +00:00
commit 5c567f6ae0
21 changed files with 841 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.codesandbox/Dockerfile Normal file
View file

@ -0,0 +1 @@
FROM node:18-bullseye

24
.gitignore vendored Normal file
View file

@ -0,0 +1,24 @@
# build output
dist/
# generated types
.astro/
# 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
# jetbrains setting folder
.idea/

4
.vscode/extensions.json vendored Normal file
View file

@ -0,0 +1,4 @@
{
"recommendations": ["astro-build.astro-vscode"],
"unwantedRecommendations": []
}

11
.vscode/launch.json vendored Normal file
View file

@ -0,0 +1,11 @@
{
"version": "0.2.0",
"configurations": [
{
"command": "./node_modules/.bin/astro dev",
"name": "Development server",
"request": "launch",
"type": "node-terminal"
}
]
}

59
README.md Normal file
View file

@ -0,0 +1,59 @@
# Astro Starter Kit: Hackernews
```sh
npm create astro@latest -- --template hackernews
```
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/hackernews)
[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/hackernews)
[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/hackernews/devcontainer.json)
> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
## 🚀 Project Structure
Inside of your Astro project, you'll see the following folders and files:
```text
/
├── 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:4321` |
| `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).

11
astro.config.mjs Normal file
View file

@ -0,0 +1,11 @@
// @ts-check
import { defineConfig } from 'astro/config';
import node from '@astrojs/node';
// https://astro.build/config
export default defineConfig({
output: 'server',
adapter: node({
mode: 'standalone',
}),
});

16
package.json Normal file
View file

@ -0,0 +1,16 @@
{
"name": "@example/hackernews",
"type": "module",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "astro dev",
"build": "astro build",
"preview": "astro preview",
"astro": "astro"
},
"dependencies": {
"@astrojs/node": "^9.0.0",
"astro": "^5.0.8"
}
}

9
public/favicon.svg Normal file
View file

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
<style>
path { fill: #000; }
@media (prefers-color-scheme: dark) {
path { fill: #FFF; }
}
</style>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 749 B

59
src/components/Comment.astro Normal file
View file

@ -0,0 +1,59 @@
---
import type { IComment } from '../types.js';
import For from './For.astro';
import Show from './Show.astro';
import Toggle from './Toggle.astro';
interface Props {
comment: IComment;
}
const { comment } = Astro.props;
---
<li>
<div class="by">
<a href={`/users/${comment.user}`}>{comment.user}</a>{' '}
{comment.time_ago}
</div>
<div class="text" set:html={comment.content} />
<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>

23
src/components/For.astro Normal file
View file

@ -0,0 +1,23 @@
---
import Show from './Show.astro';
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>

99
src/components/Nav.astro Normal file
View file

@ -0,0 +1,99 @@
---
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
src/components/Show.astro Normal file
View file

@ -0,0 +1,9 @@
---
interface Props<T> {
when: T | number | boolean | undefined | null;
}
const { when } = Astro.props;
---
{!!when ? <slot /> : <slot name="fallback" />}

77
src/components/Story.astro Normal file
View file

@ -0,0 +1,77 @@
---
import type { IStory } from '../types.js';
import Show from './Show.astro';
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'}>
&nbsp;
<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
src/components/Toggle.astro Normal file
View file

@ -0,0 +1,78 @@
---
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>

35
src/layouts/Layout.astro Normal file
View 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
src/lib/api.ts Normal file
View 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(`Received from API: ${text}`);
console.error(e);
return { error: e };
}
} catch (error) {
return { error };
}
}

105
src/pages/[...stories].astro Normal file
View 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"> &lt; prev</a>
<span slot="fallback" aria-disabled="true"> &lt; 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 &gt;</a>
<span slot="fallback" aria-disabled="true"> more &gt;</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
src/pages/stories/[id].astro Normal file
View 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>
&nbsp;{story.time_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
src/pages/users/[id].astro Normal file
View 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" />{' '}
</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
src/types.ts Normal file
View 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;
}

5
tsconfig.json Normal file
View file

@ -0,0 +1,5 @@
{
"extends": "astro/tsconfigs/strict",
"include": [".astro/types.d.ts", "**/*"],
"exclude": ["dist"]
}