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>

1 files changed, 59 insertions, 0 deletions

diff --git a/examples/hackernews/src/components/Comment.astro b/examples/hackernews/src/components/Comment.astro
new file mode 100644
index 000000000..50fa3e9e4
--- /dev/null
+++ b/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>