Add superfluid widget

attestate · Oct 9, 2024 · 70d53a3 · 70d53a3
1 parent 5cf2bd7
commit 70d53a3
Show file tree

Hide file tree

Showing 7 changed files with 509 additions and 294 deletions.
diff --git a/src/views/components/invite-row.mjs b/src/views/components/invite-row.mjs
@@ -6,96 +6,7 @@ const html = htm.bind(vhtml);
 import farcastericon from "./farcastericon.mjs";
 import theme from "../../theme.mjs";
 
-const copySVG = html`<svg
- style="height: 1rem;"
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 256 256"
->
- <rect width="256" height="256" fill="none" />
- <polyline
- points="168 168 216 168 216 40 88 40 88 88"
- fill="none"
- stroke="currentColor"
- stroke-linecap="round"
- stroke-linejoin="round"
- stroke-width="16"
- />
- <rect
- x="40"
- y="88"
- width="128"
- height="128"
- fill="none"
- stroke="currentColor"
- stroke-linecap="round"
- stroke-linejoin="round"
- stroke-width="16"
- />
-</svg>`;
-
-const questionMarkSVG = html`<svg
- style="height: 1rem;"
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 256 256"
->
- <rect width="256" height="256" fill="none" />
- <circle cx="128" cy="180" r="12" />
- <path
- d="M128,144v-8c17.67,0,32-12.54,32-28s-14.33-28-32-28S96,92.54,96,108v4"
- fill="none"
- stroke="currentColor"
- stroke-linecap="round"
- stroke-linejoin="round"
- stroke-width="16"
- />
- <circle
- cx="128"
- cy="128"
- r="96"
- fill="none"
- stroke="currentColor"
- stroke-linecap="round"
- stroke-linejoin="round"
- stroke-width="16"
- />
-</svg>`;
-
-const frameSVG = html`<svg
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 256 256"
->
- <rect width="256" height="256" fill="none" />
- <polyline
- points="160 80 192 80 192 112"
- fill="none"
- stroke="currentColor"
- stroke-linecap="round"
- stroke-linejoin="round"
- stroke-width="16"
- />
- <polyline
- points="96 176 64 176 64 144"
- fill="none"
- stroke="currentColor"
- stroke-linecap="round"
- stroke-linejoin="round"
- stroke-width="16"
- />
- <rect
- x="32"
- y="48"
- width="192"
- height="160"
- rx="8"
- fill="none"
- stroke="currentColor"
- stroke-linecap="round"
- stroke-linejoin="round"
- stroke-width="16"
- />
-</svg>`;
-
-function row(reward, percentageOff) {
+function row() {
  return html`
  <tr>
  <td>
@@ -104,50 +15,19 @@ function row(reward, percentageOff) {
  >
  <div style="margin-bottom: 0.5rem;">
  <span style="color: black; font-weight: bold; font-size: 14pt;"
- >Send a discount, get rewarded! </span
- ><a
- href="/referral"
- class="meta-link"
- style="display: inline-flex; gap: 5px;"
- >Learn more ${questionMarkSVG}</a
- >
+ >Donate to Kiwi News
+ </span>
+ <p>
+ Kiwi News is currently underfunded. Please consider subscribing,
+ it's <b>25 USDC/month for 3 months.</b>
+ </p>
  </div>
- <div
- id="invitelink-container"
- style="display: flex; align-items: center; width: 100%;"
- >
- <input
- id="invitelink"
- type="text"
- value="https://news.kiwistand.com/?referral=0xloading..."
- readonly
- style="height: 40px; width: 60%; padding: 10px 15px; border: 1px solid #ccc; border-radius: 2px; margin-right: 10px;"
- />
- <button
- style="width: 15%; margin-right: 10px; height: 40px;"
- id="button-onboarding"
- >
- ${copySVG}
- </button>
- <button
- style="background-color: #472a91; width: 15%; height: 40px;"
- id="button-onboarding"
- >
- ${farcastericon("height: 1rem")}
+ <div class="donation-button">
+ <button style="width: auto; height: 40px;" id="button-onboarding">
+ Donate
  </button>
  </div>
  </div>
- <p style="margin: 0 0 1rem 1rem;">
- <span
- style="margin-right: 10px; color: white; padding: 3px 5px; background-color: ${theme.color}; border-radius: 2px;"
- >New!</span
- >
- <span style="line-height: 20px;"
- >Send a friend an invite! They'll get
-
- <b> ${percentageOff}% off</b>, and you'll get ${reward} ETH!</span
- >
- </p>
  </td>
  </tr>
  `;

diff --git a/src/views/feed.mjs b/src/views/feed.mjs
@@ -14,6 +14,7 @@ import {
 } from "date-fns";
 import DOMPurify from "isomorphic-dompurify";
 
+import InviteRow from "./components/invite-row.mjs";
 import * as ens from "../ens.mjs";
 import Header from "./components/header.mjs";
 import SecondHeader from "./components/secondheader.mjs";
@@ -468,7 +469,13 @@ export default async function (trie, theme, page, domain) {
  )}
  ${Row(start, "/", "", null, null, null, recentJoiners)(ad)}
  ${stories
- .slice(3)
+ .slice(3, 8)
+ .map(
+ Row(start, "/", undefined, null, null, null, recentJoiners),
+ )}
+ ${InviteRow()}
+ ${stories
+ .slice(8)
  .map(
  Row(start, "/", undefined, null, null, null, recentJoiners),
  )}

diff --git a/src/views/new.mjs b/src/views/new.mjs
@@ -17,6 +17,7 @@ import * as moderation from "./moderation.mjs";
 import * as registry from "../chainstate/registry.mjs";
 import { getLastComment, listNewest } from "../cache.mjs";
 import Row, { extractDomain } from "./components/row.mjs";
+import InviteRow from "./components/invite-row.mjs";
 import * as feeds from "../feeds.mjs";
 
 const html = htm.bind(vhtml);
@@ -133,9 +134,17 @@ export default async function (trie, theme) {
  <tr>
  ${SecondHeader(theme, "new")}
  </tr>
- ${items.map(
- Row(null, "/new", undefined, null, null, null, recentJoiners),
- )}
+ ${items
+ .slice(0, 8)
+ .map(
+ Row(null, "/new", undefined, null, null, null, recentJoiners),
+ )}
+ ${InviteRow()}
+ ${items
+ .slice(8)
+ .map(
+ Row(null, "/new", undefined, null, null, null, recentJoiners),
+ )}
  </table>
  ${Footer(theme, "/new")}
  </div>