From 3ef7a9bf0643fcd01e06d02fb30a2d09eedf5b8f Mon Sep 17 00:00:00 2001
From: Misko Hevery <misko@hevery.com>
Date: Thu, 26 May 2022 13:27:46 -0700
Subject: [PATCH] docs: add hackernews demo

---
 package.json                                  |   2 +-
 .../docs/pages/docs/concepts/reactivity.mdx   |   5 +
 .../docs/pages/examples/examples-menu.json    |  12 +
 .../examples/partial/hackernews-index/app.tsx | 155 +++++++++++
 .../partial/hackernews-index/entry.server.tsx |   6 +
 .../partial/hackernews-index/hacker-news.css  | 262 ++++++++++++++++++
 .../partial/hackernews-index/root.tsx         |  14 +
 7 files changed, 455 insertions(+), 1 deletion(-)
 create mode 100644 packages/docs/pages/examples/partial/hackernews-index/app.tsx
 create mode 100644 packages/docs/pages/examples/partial/hackernews-index/entry.server.tsx
 create mode 100644 packages/docs/pages/examples/partial/hackernews-index/hacker-news.css
 create mode 100644 packages/docs/pages/examples/partial/hackernews-index/root.tsx

diff --git a/package.json b/package.json
index ddfe6525af2..d380aae87fd 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "qwik-monorepo",
-  "version": "0.0.21",
+  "version": "0.0.21-0",
   "scripts": {
     "build": "yarn node scripts --tsc --build --api --platform-binding-wasm-copy",
     "build.full": "yarn node scripts --tsc --build --api --eslint --platform-binding --wasm",
diff --git a/packages/docs/pages/docs/concepts/reactivity.mdx b/packages/docs/pages/docs/concepts/reactivity.mdx
index e814a020ec1..f7b26e10d00 100644
--- a/packages/docs/pages/docs/concepts/reactivity.mdx
+++ b/packages/docs/pages/docs/concepts/reactivity.mdx
@@ -1,3 +1,8 @@
+---
+title: Overview
+fetch: https://hackmd.io/@mhevery/SyYrShReq
+---
+
 # Reactivity
 
 Reactivity is a key component of Qwik. Reactivity allows Qwik to track which components are subscribed to which state. This information enables Qwik to invalidate only the relevant component on state change, which minimizes the number of components that need to be rerendered. Without reactivity, a state change would require rerendering from the root component, which would force the whole component tree to be eagerly downloaded.
diff --git a/packages/docs/pages/examples/examples-menu.json b/packages/docs/pages/examples/examples-menu.json
index 6c3b00cbc55..a4f17431614 100644
--- a/packages/docs/pages/examples/examples-menu.json
+++ b/packages/docs/pages/examples/examples-menu.json
@@ -40,5 +40,17 @@
         "icon": "⏰"
       }
     ]
+  },
+  {
+    "id": "partial",
+    "title": "Partial",
+    "apps": [
+      {
+        "id": "hackernews-index",
+        "title": "HackerNews",
+        "description": "HackerNews landing page",
+        "icon": "📰"
+      }
+    ]
   }
 ]
diff --git a/packages/docs/pages/examples/partial/hackernews-index/app.tsx b/packages/docs/pages/examples/partial/hackernews-index/app.tsx
new file mode 100644
index 00000000000..8043fdd90ea
--- /dev/null
+++ b/packages/docs/pages/examples/partial/hackernews-index/app.tsx
@@ -0,0 +1,155 @@
+import { component$, useServerMount$, useStore, useStyles$ } from '@builder.io/qwik';
+import HackerNewsCSS from './hacker-news.css';
+
+export const HackerNews = component$(() => {
+  useStyles$(HackerNewsCSS);
+  const store = useStore({ data: null });
+
+  useServerMount$(async () => {
+    const response = await fetch('https://node-hnapi.herokuapp.com/news?page=0');
+    store.data = await response.json();
+  });
+
+  return (
+    <>
+      <Nav />
+      <Stories data={store.data} />;
+    </>
+  );
+});
+
+export const Nav = component$(
+  () => {
+    return (
+      <header class="header">
+        <nav class="inner">
+          <a href="/">
+            <strong>HN</strong>
+          </a>
+          <a href="/?type=new">
+            <strong>New</strong>
+          </a>
+          <a href="/?type=show">
+            <strong>Show</strong>
+          </a>
+          <a href="/?type=ask">
+            <strong>Ask</strong>
+          </a>
+          <a href="/?type=job">
+            <strong>Jobs</strong>
+          </a>
+          <a
+            class="github"
+            href="http://github.com/builderio/qwikdev"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Built with Qwik
+          </a>
+        </nav>
+      </header>
+    );
+  },
+  { tagName: 'nav' }
+);
+
+export const Stories = component$((props: { data: any }) => {
+  const page = 1;
+  const type = 'list';
+  const stories = props.data;
+  return (
+    <div class="news-view">
+      <div class="news-list-nav">
+        {page > 1 ? (
+          <a class="page-link" href={`/?type=${type}&page=${page - 1}`} aria-label="Previous Page">
+            {'<'} prev
+          </a>
+        ) : (
+          <span class="page-link disabled" aria-disabled="true">
+            {'<'} prev
+          </span>
+        )}
+        <span>page {page}</span>
+        {stories && stories.length >= 29 ? (
+          <a class="page-link" href={`/?type=${type}&page=${page + 1}`} aria-label="Next Page">
+            more {'>'}
+          </a>
+        ) : (
+          <span class="page-link disabled" aria-disabled="true">
+            more {'>'}
+          </span>
+        )}
+      </div>
+      <main class="news-list">
+        {stories && (
+          <ul>
+            {stories.map((story: IStory) => (
+              <StoryPreview story={story} />
+            ))}
+          </ul>
+        )}
+      </main>
+    </div>
+  );
+});
+
+export const StoryPreview = component$((props: { story: IStory }) => {
+  return (
+    <li class="news-item">
+      <span class="score">{props.story.points}</span>
+      <span class="title">
+        {props.story.url && !props.story.url.startsWith('item?id=') ? (
+          <>
+            <a href={props.story.url} target="_blank" rel="noreferrer">
+              {props.story.title}
+            </a>
+            <span class="host"> ({props.story.domain})</span>
+          </>
+        ) : (
+          <a href={`/item/${props.story.id}`}>{props.story.title}</a>
+        )}
+      </span>
+      <br />
+      <span class="meta">
+        {props.story.type !== 'job' ? (
+          <>
+            by <a href={`/users/${props.story.user}`}>{props.story.user}</a> {props.story.time_ago}{' '}
+            |{' '}
+            <a href={`/stories/${props.story.id}`}>
+              {props.story.comments_count ? `${props.story.comments_count} comments` : 'discuss'}
+            </a>
+          </>
+        ) : (
+          <a href={`/stories/${props.story.id}`}>{props.story.time_ago}</a>
+        )}
+      </span>
+      {props.story.type !== 'link' && (
+        <>
+          {' '}
+          <span class="label">{props.story.type}</span>
+        </>
+      )}
+    </li>
+  );
+});
+
+export interface IComment {
+  id: string;
+  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[];
+}
diff --git a/packages/docs/pages/examples/partial/hackernews-index/entry.server.tsx b/packages/docs/pages/examples/partial/hackernews-index/entry.server.tsx
new file mode 100644
index 00000000000..c7fcf6bf8e6
--- /dev/null
+++ b/packages/docs/pages/examples/partial/hackernews-index/entry.server.tsx
@@ -0,0 +1,6 @@
+import { renderToString, RenderToStringOptions } from '@builder.io/qwik/server';
+import { Root } from './root';
+
+export function render(opts: RenderToStringOptions) {
+  return renderToString(<Root />, opts);
+}
diff --git a/packages/docs/pages/examples/partial/hackernews-index/hacker-news.css b/packages/docs/pages/examples/partial/hackernews-index/hacker-news.css
new file mode 100644
index 00000000000..03a5c554b63
--- /dev/null
+++ b/packages/docs/pages/examples/partial/hackernews-index/hacker-news.css
@@ -0,0 +1,262 @@
+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: #f2f3f5;
+  margin: 0;
+  padding-top: 55px;
+  color: #34495e;
+  overflow-y: scroll;
+}
+a {
+  color: #34495e;
+  text-decoration: none;
+}
+.header {
+  background-color: #335d92;
+  position: fixed;
+  z-index: 999;
+  height: 55px;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+.header .inner {
+  max-width: 800px;
+  box-sizing: border-box;
+  margin: 0 auto;
+  padding: 15px 5px;
+}
+.header a {
+  color: rgba(255, 255, 255, 0.8);
+  line-height: 24px;
+  display: inline-block;
+  vertical-align: middle;
+  font-weight: 300;
+  letter-spacing: 0.075em;
+  margin-right: 1.8em;
+}
+.header a:hover {
+  color: #fff;
+}
+.header a.active {
+  color: #fff;
+  font-weight: 400;
+}
+.header a:nth-child(6) {
+  margin-right: 0;
+}
+.header .github {
+  color: #fff;
+  font-size: 0.9em;
+  margin: 0;
+  float: right;
+}
+.logo {
+  width: 24px;
+  margin-right: 10px;
+  display: inline-block;
+  vertical-align: middle;
+}
+.view {
+  max-width: 800px;
+  margin: 0 auto;
+  position: relative;
+}
+@media (max-width: 860px) {
+  .header .inner {
+    padding: 15px 30px;
+  }
+}
+@media (max-width: 600px) {
+  .header .inner {
+    padding: 15px;
+  }
+  .header a {
+    margin-right: 1em;
+  }
+  .header .github {
+    display: none;
+  }
+}
+.news-view {
+  padding-top: 45px;
+}
+.news-list,
+.news-list-nav {
+  background-color: #fff;
+  border-radius: 2px;
+}
+.news-list-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);
+}
+.news-list-nav .page-link {
+  margin: 0 1em;
+}
+.news-list-nav .disabled {
+  color: #aaa;
+}
+.news-list {
+  position: absolute;
+  margin: 30px 0;
+  width: 100%;
+}
+.news-list ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+@media (max-width: 600px) {
+  .news-list {
+    margin: 10px 0;
+  }
+}
+.news-item {
+  background-color: #fff;
+  padding: 20px 30px 20px 80px;
+  border-bottom: 1px solid #eee;
+  position: relative;
+  line-height: 20px;
+}
+.news-item .score {
+  color: #335d92;
+  font-size: 1.1em;
+  font-weight: 700;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 80px;
+  text-align: center;
+  margin-top: -10px;
+}
+.news-item .host,
+.news-item .meta {
+  font-size: 0.85em;
+  color: #626262;
+}
+.news-item .host a,
+.news-item .meta a {
+  color: #626262;
+  text-decoration: underline;
+}
+.news-item .host a:hover,
+.news-item .meta a:hover {
+  color: #335d92;
+}
+.item-view-header {
+  background-color: #fff;
+  padding: 1.8em 2em 1em;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.item-view-header h1 {
+  display: inline;
+  font-size: 1.5em;
+  margin: 0;
+  margin-right: 0.5em;
+}
+.item-view-header .host,
+.item-view-header .meta,
+.item-view-header .meta a {
+  color: #626262;
+}
+.item-view-header .meta a {
+  text-decoration: underline;
+}
+.item-view-comments {
+  background-color: #fff;
+  margin-top: 10px;
+  padding: 0 2em 0.5em;
+}
+.item-view-comments-header {
+  margin: 0;
+  font-size: 1.1em;
+  padding: 1em 0;
+  position: relative;
+}
+.item-view-comments-header .spinner {
+  display: inline-block;
+  margin: -15px 0;
+}
+.comment-children {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+@media (max-width: 600px) {
+  .item-view-header h1 {
+    font-size: 1.25em;
+  }
+}
+.comment-children .comment-children {
+  margin-left: 1.5em;
+}
+.comment {
+  border-top: 1px solid #eee;
+  position: relative;
+}
+.comment .by,
+.comment .text,
+.comment .toggle {
+  font-size: 0.9em;
+  margin: 1em 0;
+}
+.comment .by {
+  color: #626262;
+}
+.comment .by a {
+  color: #626262;
+  text-decoration: underline;
+}
+.comment .text {
+  overflow-wrap: break-word;
+}
+.comment .text a:hover {
+  color: #335d92;
+}
+.comment .text pre {
+  white-space: pre-wrap;
+}
+.comment .toggle {
+  background-color: #fffbf2;
+  padding: 0.3em 0.5em;
+  border-radius: 4px;
+}
+.comment .toggle a {
+  color: #626262;
+  cursor: pointer;
+}
+.comment .toggle.open {
+  padding: 0;
+  background-color: transparent;
+  margin-bottom: -0.5em;
+}
+.user-view {
+  background-color: #fff;
+  box-sizing: border-box;
+  padding: 2em 3em;
+}
+.user-view h1 {
+  margin: 0;
+  font-size: 1.5em;
+}
+.user-view .meta {
+  list-style-type: none;
+  padding: 0;
+}
+.user-view .label {
+  display: inline-block;
+  min-width: 4em;
+}
+.user-view .about {
+  margin: 1em 0;
+}
+.user-view .links a {
+  text-decoration: underline;
+}
diff --git a/packages/docs/pages/examples/partial/hackernews-index/root.tsx b/packages/docs/pages/examples/partial/hackernews-index/root.tsx
new file mode 100644
index 00000000000..7c4d093a5d9
--- /dev/null
+++ b/packages/docs/pages/examples/partial/hackernews-index/root.tsx
@@ -0,0 +1,14 @@
+import { HackerNews } from './app';
+
+export const Root = () => {
+  return (
+    <html>
+      <head>
+        <title>Counter</title>
+      </head>
+      <body>
+        <HackerNews />
+      </body>
+    </html>
+  );
+};