Add fediverse posting
This commit is contained in:
parent
f37b744df3
commit
7ad1eaf1b8
6 changed files with 182 additions and 12 deletions
|
@ -11,7 +11,7 @@ export default function FaqPage() {
|
||||||
<div>
|
<div>
|
||||||
<h3>A: PGP:</h3>
|
<h3>A: PGP:</h3>
|
||||||
<p>
|
<p>
|
||||||
<code class="inline">0FA334385D0B689F</code> - available via WKD (<code class="inline">gpg --locate-keys gpg@nexy7574.co.uk</code>), or the full (armoured) key is available
|
<code className="inline">0FA334385D0B689F</code> - available via WKD (<code className="inline">gpg --locate-keys gpg@nexy7574.co.uk</code>), or the full (armoured) key is available
|
||||||
<Link href="/assets/pgp-2024-05-13.txt" passHref legacyBehavior><a download>here</a></Link>.
|
<Link href="/assets/pgp-2024-05-13.txt" passHref legacyBehavior><a download>here</a></Link>.
|
||||||
The key is also available on several keyservers, however
|
The key is also available on several keyservers, however
|
||||||
<a href="https://keyserver.ubuntu.com/pks/lookup?search=0FA334385D0B689F&fingerprint=on&op=index" target="_blank" rel="noopener noreferrer">Ubuntu's keyserver</a>
|
<a href="https://keyserver.ubuntu.com/pks/lookup?search=0FA334385D0B689F&fingerprint=on&op=index" target="_blank" rel="noopener noreferrer">Ubuntu's keyserver</a>
|
||||||
|
|
|
@ -172,3 +172,12 @@ so I've had to resort to stealing (copying and pasting from their docs)
|
||||||
font-size: 0.875rem; /* 14px */
|
font-size: 0.875rem; /* 14px */
|
||||||
line-height: 1.25rem; /* 20px */
|
line-height: 1.25rem; /* 20px */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.icon-48 {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
.icon-64 {
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
}
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import Link from "next/link";
|
|
||||||
import styles from './page.module.css';
|
import styles from './page.module.css';
|
||||||
|
|
||||||
// Image imports
|
// Image imports
|
||||||
|
@ -42,9 +41,10 @@ const _88x31s = {
|
||||||
"restartb": restartb,
|
"restartb": restartb,
|
||||||
"tom1212": tom1212
|
"tom1212": tom1212
|
||||||
};
|
};
|
||||||
|
import FediPosts from "@/components/fediPosts";
|
||||||
|
|
||||||
function CustomIcon({src, name}) {
|
function CustomIcon({src, name}) {
|
||||||
return <Image src={src} alt={name} title={name} width={32} height={32} className="icon"/>
|
return <Image src={src} alt={name} title={name} width={32} height={32} className="icon icon-48"/>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -293,6 +293,9 @@ export default function Index() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<br/>
|
<br/>
|
||||||
|
<h2>Recent fediverse Posts</h2>
|
||||||
|
<FediPosts/>
|
||||||
|
<br/>
|
||||||
<div>
|
<div>
|
||||||
{
|
{
|
||||||
Object.keys(_88x31s).map(
|
Object.keys(_88x31s).map(
|
||||||
|
|
45
src/components/fediPosts.css
Normal file
45
src/components/fediPosts.css
Normal file
|
@ -0,0 +1,45 @@
|
||||||
|
.note {
|
||||||
|
background-color: var(--background-secondary);
|
||||||
|
border: 1px solid var(--text-muted);
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: .4em;
|
||||||
|
display: block
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: grid;
|
||||||
|
grid-auto-columns: 1fr;
|
||||||
|
grid-auto-rows: 3fr;
|
||||||
|
border-radius: 5px;
|
||||||
|
overflow-y: auto;
|
||||||
|
max-height: 50vh;
|
||||||
|
grid-gap: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container a {
|
||||||
|
color: var(--text-primary);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.author {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.author img {
|
||||||
|
border-radius: 20%;
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reactions, .reaction {
|
||||||
|
list-style: none;
|
||||||
|
text-align: left;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
113
src/components/fediPosts.jsx
Normal file
113
src/components/fediPosts.jsx
Normal file
|
@ -0,0 +1,113 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import Image from "next/image";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import styles from "./fediPosts.css"
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
|
||||||
|
function FediPost({data}) {
|
||||||
|
if(data.reply) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
console.debug(data.reactionEmojis);
|
||||||
|
return (
|
||||||
|
<Link href={`https://fedi.transgender.ing/notes/${data.id}`}>
|
||||||
|
<div className={"note"}>
|
||||||
|
<div className={"author"}>
|
||||||
|
<div>
|
||||||
|
<Image src={data.user.avatarUrl} alt={data.user.username} height={48} width={48}/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div>{data.user.username}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={"content"}>{data.text}</div>
|
||||||
|
<div className="reactions" hidden={!data.reactions}>
|
||||||
|
<ul>
|
||||||
|
{
|
||||||
|
Object.keys(data.reactions).map(reaction => {
|
||||||
|
let customEmoji = (data.reactionEmojis || {})[reaction.slice(1, -1)];
|
||||||
|
if(customEmoji) {
|
||||||
|
return (
|
||||||
|
<li key={reaction} className="reaction">
|
||||||
|
<Image src={customEmoji} alt={reaction} height={24} width={24}/>x{data.reactions[reaction]}
|
||||||
|
</li>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<li key={reaction} className="reaction">
|
||||||
|
{reaction}x{data.reactions[reaction]}
|
||||||
|
</li>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default function FediPosts() {
|
||||||
|
const [notes, setNotes] = useState([]);
|
||||||
|
|
||||||
|
const getNotes = (_notes) => {
|
||||||
|
let payload = {
|
||||||
|
userId: "9w3ylp0gudtr0001",
|
||||||
|
limit: 100,
|
||||||
|
withReplies: false,
|
||||||
|
withRenotes: false,
|
||||||
|
};
|
||||||
|
let lastNote = _notes[_notes.length - 1] || null;
|
||||||
|
if(lastNote) {
|
||||||
|
payload.untilId = lastNote.id;
|
||||||
|
}
|
||||||
|
fetch(
|
||||||
|
"https://fedi.transgender.ing/api/users/notes",
|
||||||
|
{
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify(payload),
|
||||||
|
headers: {"Content-Type": "application/json"}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.then(res => res.json()).catch(console.error);
|
||||||
|
}
|
||||||
|
useEffect(
|
||||||
|
() => {
|
||||||
|
let payload = {
|
||||||
|
userId: "9w3ylp0gudtr0001",
|
||||||
|
limit: 100,
|
||||||
|
withReplies: false,
|
||||||
|
withRenotes: false,
|
||||||
|
withFiles: false,
|
||||||
|
};
|
||||||
|
let lastNote = notes[notes.length - 1] || null;
|
||||||
|
if(lastNote) {
|
||||||
|
payload.untilId = lastNote.id;
|
||||||
|
}
|
||||||
|
fetch(
|
||||||
|
"https://fedi.transgender.ing/api/users/notes",
|
||||||
|
{
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify(payload),
|
||||||
|
headers: {"Content-Type": "application/json"}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.then(res => res.json())
|
||||||
|
.then((newNotes) => {setNotes([...notes, ...newNotes]);})
|
||||||
|
},
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
|
if(!notes.length) {
|
||||||
|
return <div className="container">Loading notes...</div>
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div className={"container"}>
|
||||||
|
<div>{notes.map(note => <FediPost key={note.id} data={note} />)}</div>
|
||||||
|
<button type="button" onClick={() => {getNotes(notes).then((newNotes) => {setNotes([...notes, ...newNotes])});}}>More</button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
|
@ -13,30 +13,30 @@ export default function Nav() {
|
||||||
return (
|
return (
|
||||||
<nav className={styles.nav}>
|
<nav className={styles.nav}>
|
||||||
<div className={styles.identifier}>
|
<div className={styles.identifier}>
|
||||||
<span><Image src={twemojiTrans} wdith={32} height={32} alt="🏳️⚧️" class="icon"/></span> <i id="__name">Nexus</i>
|
<span><Image src={twemojiTrans} wdith={32} height={32} alt="🏳️⚧️" className="icon"/></span> <i id="__name">Nexus</i>
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.links}>
|
<div className={styles.links}>
|
||||||
<div><Link href="/"><Icon className="icon" path={mdiHomeOutline} size={1} /></Link></div>
|
<div><Link href="/"><Icon className="icon" path={mdiHomeOutline} size={1} /></Link></div>
|
||||||
<div><Link href="/faq"><Icon className="icon" path={mdiFrequentlyAskedQuestions} size={1} title={"FAQ"} /></Link></div>
|
<div><Link href="/faq"><Icon className="icon" path={mdiFrequentlyAskedQuestions} size={1} title={"FAQ"} /></Link></div>
|
||||||
<div><Link href="/matrix"><Icon className="icon" path={mdiMessageOutline} size={1} title={"Matrix Clients (mirror list)"}/></Link></div>
|
<div><Link href="/matrix"><Icon className="icon" path={mdiMessageOutline} size={1} title={"Matrix Clients (mirror list)"}/></Link></div>
|
||||||
<div>
|
<div>
|
||||||
<Link href="https://matrix.to/#/@nex:nexy7574.co.uk" class="icon">
|
<Link href="https://matrix.to/#/@nex:nexy7574.co.uk" className="icon">
|
||||||
<Image src={matrix} wdith={32} height={32} alt="Chat" title="Chat" class="icon"/>
|
<Image src={matrix} wdith={32} height={32} alt="Chat" title="Chat" className="icon"/>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<Link href="https://github.com/nexy7574" rel="noopener noreferrer" target="_blank" class="icon">
|
<Link href="https://github.com/nexy7574" rel="noopener noreferrer" target="_blank" className="icon">
|
||||||
<Image src={github} alt="GitHub" title="GitHub" wdith={32} height={32} class="icon"/>
|
<Image src={github} alt="GitHub" title="GitHub" wdith={32} height={32} className="icon"/>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<Link href="https://git.i-am.nexus/nex/nexy7574.co.uk-b" rel="noopener" target="_blank" class="icon">
|
<Link href="https://git.i-am.nexus/nex/nexy7574.co.uk-b" rel="noopener" target="_blank" className="icon">
|
||||||
<Image src={forgejo} alt="Forgejo" title="Forgejo (git) & source code" wdith={32} height={32} class="icon"/>
|
<Image src={forgejo} alt="Forgejo" title="Forgejo (git) & source code" wdith={32} height={32} className="icon"/>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<Link href="https://fedi.transgender.ing/@nex" rel="noopener noreferrer" target="_blank" class="icon">
|
<Link href="https://fedi.transgender.ing/@nex" rel="noopener noreferrer" target="_blank" className="icon">
|
||||||
<Image src={fediverse} alt="Sharkey (Fediverse)" title="Sharkey (Fediverse)" wdith={32} height={32} class="icon"/>
|
<Image src={fediverse} alt="Sharkey (Fediverse)" title="Sharkey (Fediverse)" wdith={32} height={32} className="icon"/>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue