added correct link in the sidebar + added lists to onboarding

MacBudkowski · Jan 12, 2024 · aa8fc13 · aa8fc13
1 parent 550c720
commit aa8fc13
Show file tree

Hide file tree

Showing 5 changed files with 123 additions and 3 deletions.
diff --git a/src/http.mjs b/src/http.mjs
@@ -29,6 +29,7 @@ import memecoin from "./views/memecoin.mjs";
 import onboardingReader from "./views/onboarding-reader.mjs";
 import onboardingCurator from "./views/onboarding-curator.mjs";
 import onboardingSubmitter from "./views/onboarding-submitter.mjs";
+import lists from "./views/lists.mjs";
 import shortcut from "./views/shortcut.mjs";
 import nfts from "./views/nfts.mjs";
 import subscribe from "./views/subscribe.mjs";
@@ -527,6 +528,11 @@ export async function launch(trie, libp2p) {
       );
   });
 
+  app.get("/lists", async (request, reply) => {
+    const content = await lists(trie, reply.locals.theme);
+    return reply.status(200).type("text/html").send(content);
+  });
+
   app.get("/welcome", async (request, reply) => {
     reply.header("Cache-Control", "public, max-age=3600, must-revalidate");
     return reply

diff --git a/src/public/Kiwi_lists.png b/src/public/Kiwi_lists.png
diff --git a/src/views/components/sidebar.mjs b/src/views/components/sidebar.mjs
@@ -376,12 +376,12 @@ const sidebar = (path) => html`
     </a>
     <a
       title="Explore"
-      href="/onboarding"
+      href="/onboarding-reader"
       style="color: black; text-decoration: none; display: block;"
     >
       <div style="display: flex; align-items: center;">
         <div class="svg-container">
-          ${path === "/onboarding" ? onboardingfull : onboarding}
+          ${path === "/onboarding-reader" ? onboardingfull : onboarding}
         </div>
         <span>Explore</span>
       </div>

diff --git a/src/views/lists.mjs b/src/views/lists.mjs
@@ -0,0 +1,88 @@
+import htm from "htm";
+import vhtml from "vhtml";
+import * as curation from "./curation.mjs";
+import * as moderation from "./moderation.mjs";
+import Header from "./components/header.mjs";
+import Sidebar from "./components/sidebar.mjs";
+import Footer from "./components/footer.mjs";
+import Head from "./components/head.mjs";
+
+const html = htm.bind(vhtml);
+
+function CanonRow(sheets) {
+  sheets = sheets.sort((a, b) => 0.5 - Math.random()).slice(0, 9); // Get 9 sheets
+  const rows = [];
+  for (let i = 0; i < sheets.length; i += 3) {
+    const rowSheets = sheets.slice(i, i + 3);
+    rows.push(
+      html`
+        <tr>
+          <td>
+            <div
+              style="justify-content: space-evenly; scroll-snap-type: x mandatory; border-radius: 5px; margin-bottom: -10px; padding: 20px 0; gap: 15px; display: flex; overflow-x: auto; width: 100%;"
+            >
+              ${rowSheets.map(
+                ({ preview, name }) => html`
+                  <div style="flex: 0 0 30%; scroll-snap-align: center;">
+                    <a href="/canons?name=${name}" target="_blank">
+                      <img
+                        src="${preview}"
+                        style="width: 100%; height: auto;"
+                      />
+                    </a>
+                  </div>
+                `,
+              )}
+            </div>
+          </td>
+        </tr>
+      `,
+    );
+  }
+  return rows;
+}
+
+export default async function displayCanonRow(theme, identity) {
+  const path = "/canonrow";
+  let sheets;
+  try {
+    const activeSheets = await moderation.getActiveCanons();
+    sheets = await curation.getSheets(activeSheets);
+  } catch (err) {
+    console.error(err);
+    return;
+  }
+
+  return html`
+    <html lang="en" op="news">
+      <head>
+        ${Head}
+      </head>
+      <body>
+        <div class="container">
+          ${Sidebar(path)}
+          <div id="hnmain">
+            <table border="0" cellpadding="0" cellspacing="0" bgcolor="#f6f6ef">
+              <tr>
+                ${await Header(theme, identity)}
+              </tr>
+              <tr>
+                <td style="padding: 10px; font-size: 16px;">
+                  <h2>Kiwi Lists</h2>
+                  <p>
+                    Lists let you dive into specific subjects. Kiwi curators -
+                    like Spotify DJs - collect the top content from one genre
+                    and lead you into an educational journey. Click one of the
+                    lists below to check what we prepared for you.
+                  </p>
+                </td>
+              </tr>
+              ${sheets ? CanonRow(sheets) : ""}
+            </table>
+          </div>
+        </div>
+        ${Footer(theme)}
+      </body>
+    </html>
+  `;
+}
diff --git a/src/views/onboarding-reader.mjs b/src/views/onboarding-reader.mjs
@@ -139,7 +139,7 @@ export default async function (theme, identity) {
                         Share and discuss content with fellow crypto builders
                       </h2>
                       <p>
-                        Discuss the project, content and anything you’d like to
+                        Discuss the content, project and anything you’d like to
                         chat about on our Telegram Channel. Join us and say gm!
                       </p>
                       <p>
@@ -198,6 +198,32 @@ export default async function (theme, identity) {
                   <br />
                   <br />
                   <br />
+                  <div class="flex-container flex-image-left">
+                    <div class="image-left">
+                      <img src="Kiwi_lists.png" />
+                    </div>
+                    <div class="text-right">
+                      <h2>Dive deeper into one subject</h2>
+                      <p>
+                        If you want to learn more about a specific subject, Kiwi
+                        Canons are here to help. Kiwi curators - like Spotify
+                        DJs - collect the top materials about one subject and
+                        compose them into a list.
+                      </p>
+
+                      <a href="/lists" target="_blank">
+                        <button
+                          id="button-onboarding"
+                          style="margin-left: 0; width: 40%;"
+                        >
+                          Check Kiwi Canons
+                        </button>
+                      </a>
+                    </div>
+                  </div>
+                  <br />
+                  <br />
+                  <br />
                   <h1>Ready to explore Kiwi Level II?</h1>
                   <a href="/onboarding-curator">
                     <button id="button-onboarding" style="margin-left: 0;">