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>

examples/hackernews/.gitignore

@@ -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

examples/hackernews/.vscode/extensions.json

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

examples/hackernews/.vscode/launch.json

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

examples/hackernews/README.md

@@ -0,0 +1,57 @@
+# Astro Starter Kit: Hackernews
+
+```
+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)
+
+> 🧑‍🚀 **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).

examples/hackernews/astro.config.mjs

@@ -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',
+	}),
+});

examples/hackernews/package.json

@@ -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"
+  }
+}

examples/hackernews/sandbox.config.json

@@ -0,0 +1,11 @@
+{
+  "infiniteLoopProtection": true,
+  "hardReloadOnChange": false,
+  "view": "browser",
+  "template": "node",
+  "container": {
+    "port": 3000,
+    "startScript": "start",
+    "node": "14"
+  }
+}

examples/hackernews/src/components/Comment.astro

@@ -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>

examples/hackernews/src/components/For.astro

@@ -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>

examples/hackernews/src/components/Nav.astro

@@ -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>

examples/hackernews/src/components/Show.astro

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