Skip to content

Commit

Permalink
Make upvoting truly optimistic interaction
Browse files Browse the repository at this point in the history
  • Loading branch information
@TimDaub
TimDaub committed Jul 31, 2023
1 parent d8fde90 commit 17e31f9
Show file tree
Hide file tree
Showing 6 changed files with 67 additions and 236 deletions.
2 changes: 1 addition & 1 deletion src/public/news.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ pre:hover { overflow:auto }

.votearrow {
color: #828282;
font-size: 1.4rem;
font-size: 1.25rem;
}

table.padtab td { padding:0px 10px }
Expand Down
5 changes: 4 additions & 1 deletion src/views/components/header.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,10 @@ import htm from "htm";
import vhtml from "vhtml";

const html = htm.bind(vhtml);
const header = (theme) => html` <td bgcolor="${theme.color}">
const header = (theme) => html` <td
style="min-height: 63px;"
bgcolor="${theme.color}"
>
<nav-onboarding-modal />
<nav-nft-modal />
<table
Expand Down
123 changes: 16 additions & 107 deletions src/views/feed.mjs
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
//@format
import { env } from "process";
import url from "url";
import { URL } from "url";

import htm from "htm";
import vhtml from "vhtml";
import normalizeUrl from "normalize-url";
import { sub, formatDistanceToNowStrict, differenceInMinutes } from "date-fns";
import { sub, differenceInMinutes } from "date-fns";
import { fetchBuilder, MemoryCache } from "node-fetch-cache";

import * as ens from "../ens.mjs";
Expand All @@ -20,7 +20,7 @@ import * as moderation from "./moderation.mjs";
import * as registry from "../chainstate/registry.mjs";
import log from "../logger.mjs";
import { EIP712_MESSAGE } from "../constants.mjs";
import FCIcon from "./components/farcastericon.mjs";
import Row from "./components/row.mjs";

const html = htm.bind(vhtml);
const fetch = fetchBuilder.withCache(
Expand All @@ -30,7 +30,7 @@ const fetch = fetchBuilder.withCache(
);

function extractDomain(link) {
const parsedUrl = new url.URL(link);
const parsedUrl = new URL(link);
return parsedUrl.hostname;
}

Expand Down Expand Up @@ -208,7 +208,6 @@ export default async function index(trie, theme, page) {
avatars: avatars,
});
}
const size = 12;

return html`
<html lang="en" op="news">
Expand Down Expand Up @@ -262,33 +261,34 @@ export default async function index(trie, theme, page) {
<tr style="background-color: #e6e6df;">
<td>
<div style="padding: 10px 5px 0 10px;">
<div style="display: flex; align-items: flex-start;">
<div style="display: flex; align-items: stretch;">
<div
style="font-size: 13pt; display: flex; align-items: center; min-width: 35px;"
style="display: flex; align-items: center; justify-content: center; min-width: 40px;"
>
<span>${start + i + 1}.</span>
</div>
<div
style="display: flex; align-items: center; min-width: 30px;"
>
<a href="#">
<a
href="#"
style="display: flex; align-items: center; min-height: 30px;"
>
<div
class="votearrowcontainer"
data-title="${story.title}"
data-href="${story.href}"
data-upvoters="${JSON.stringify(story.upvoters)}"
data-editorpicks="true"
></div>
</a>
</div>
<div style="flex-grow: 1;">
<div
style="display:flex; align-items: center; flex-grow: 1;"
>
<span>
<a
href="${story.href}"
target="_blank"
class="story-link"
style="line-height: 13pt; font-size: 13pt;"
>
${story.title}
${start + i + 1}. ${story.title}
</a>
<span
style="padding-left: 5px; word-break: break-all;"
Expand Down Expand Up @@ -319,98 +319,7 @@ export default async function index(trie, theme, page) {
</p>
</td>
</tr>
${stories.map(
(story, i) => html`
<tr>
<td>
<div style="padding: 10px 5px 0 10px;">
<div style="display: flex; align-items: flex-start;">
<div
style="display: flex; align-items: center; justify-content: center; min-width: 40px; margin-right: 6px;"
>
<a href="#">
<div
class="votearrowcontainer"
data-title="${story.title}"
data-href="${story.href}"
data-upvoters="${JSON.stringify(story.upvoters)}"
></div>
</a>
</div>
<div style="flex-grow: 1;">
<span>
<span style="line-height: 13pt; font-size: 13pt;">
${start + i + 1}.
</span>
<span> </span>
<a
href="${story.href}"
target="_blank"
class="story-link"
style="line-height: 13pt; font-size: 13pt;"
>
${story.title}
</a>
<span
style="padding-left: 5px; word-break: break-all;"
>(${extractDomain(story.href)})</span
>
</span>
<div style="margin-top: 2px; font-size: 10pt;">
<span>
<span>▲</span>
${story.upvotes}
<span> </span>
${story.avatars.length > 1 &&
html`<div
style="margin-left: ${size /
2}; top: 2px; display: inline-block; position:relative;"
>
${story.avatars.slice(0, 5).map(
(avatar, index) => html`
<img
src="${avatar}"
alt="avatar"
style="z-index: ${index}; width: ${size}px; height:
${size}px; border: 1px solid #828282; border-radius: 50%; margin-left: -${size /
2}px;"
/>
`
)}
</div>`}
<span> • </span>
${formatDistanceToNowStrict(
new Date(story.timestamp * 1000)
)}
<span> ago by </span>
<a
href="/upvotes?address=${story.identity}"
class="meta-link"
>
${story.displayName}
</a>
<span> • </span>
<a
target="_blank"
href="https://warpcast.com/~/compose?embeds[]=${story.href}&text=${encodeURIComponent(
`Found on Kiwi News: "${story.title}"`
)}&embeds[]=https://news.kiwistand.com"
class="caster-link"
>
${FCIcon("height: 10px; width: 10px;")}
<span> </span>
Cast
</a>
</span>
</div>
</div>
</div>
</div>
</td>
</tr>
`
)}
${stories.map(Row(start))}
<tr>
<td>
<table
Expand Down
103 changes: 3 additions & 100 deletions src/views/new.mjs
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
//@format
import { env } from "process";
import url from "url";

import htm from "htm";
import vhtml from "vhtml";
import normalizeUrl from "normalize-url";
import { formatDistanceToNowStrict, sub } from "date-fns";
import { sub } from "date-fns";

import * as ens from "../ens.mjs";
import Header from "./components/header.mjs";
Expand All @@ -17,15 +16,10 @@ import * as store from "../store.mjs";
import * as moderation from "./moderation.mjs";
import * as registry from "../chainstate/registry.mjs";
import { count } from "./feed.mjs";
import FCIcon from "./components/farcastericon.mjs";
import Row from "./components/row.mjs";

const html = htm.bind(vhtml);

function extractDomain(link) {
const parsedUrl = new url.URL(link);
return parsedUrl.hostname;
}

export default async function (trie, theme) {
const config = await moderation.getLists();

Expand Down Expand Up @@ -73,7 +67,6 @@ export default async function (trie, theme) {
avatars: avatars,
});
}
const size = 12;

return html`
<html lang="en" op="news">
Expand Down Expand Up @@ -102,97 +95,7 @@ export default async function (trie, theme) {
${SecondHeader(theme, "new")}
</tr>
<tr class="spacer" style="height:15px"></tr>
${stories.map(
(story, i) => html`
<tr>
<td>
<div style="padding: 10px 5px 0 10px;">
<div style="display: flex; align-items: flex-start;">
<div
style="display: flex; align-items: center; justify-content: center; min-width: 40px; margin-right: 6px;"
>
<a href="#">
<div
class="votearrowcontainer"
data-title="${story.title}"
data-href="${story.href}"
data-upvoters="${JSON.stringify(story.upvoters)}"
></div>
</a>
</div>
<div style="flex-grow: 1;">
<span>
<span style="line-height: 13pt; font-size: 13pt;">
${i + 1}.
</span>
<span> </span>
<a
href="${story.href}"
target="_blank"
class="story-link"
style="line-height: 13pt; font-size: 13pt;"
>
${story.title}
</a>
<span
style="padding-left: 5px; word-break: break-all;"
>(${extractDomain(story.href)})</span
>
</span>
<div style="margin-top: 2px; font-size: 10pt;">
<span>
<span>▲</span>
${story.upvotes}
<span> </span>
${story.avatars.length > 1 &&
html`<div
style="margin-left: ${size /
2}; top: 2px; display: inline-block; position:relative;"
>
${story.avatars.slice(0, 5).map(
(avatar, index) => html`
<img
src="${avatar}"
alt="avatar"
style="z-index: ${index}; width: ${size}px; height:
${size}px; border: 1px solid #828282; border-radius: 50%; margin-left: -${size /
2}px;"
/>
`
)}
</div>`}
<span> • </span>
${formatDistanceToNowStrict(
new Date(story.timestamp * 1000)
)}
<span> ago by </span>
<a
href="/upvotes?address=${story.identity}"
class="meta-link"
>
${story.displayName}
</a>
<span> • </span>
<a
target="_blank"
href="https://warpcast.com/~/compose?embeds[]=${story.href}&text=${encodeURIComponent(
`Found on Kiwi News: "${story.title}"`
)}&embeds[]=https://news.kiwistand.com"
class="caster-link"
>
${FCIcon("height: 10px; width: 10px;")}
<span> </span>
Cast
</a>
</span>
</div>
</div>
</div>
</div>
</td>
</tr>
`
)}
${stories.map(Row())}
</table>
${Footer(theme, "/new")}
</center>
Expand Down
Loading

0 comments on commit 17e31f9

Please sign in to comment.