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>
|
||||
<h3>A: PGP:</h3>
|
||||
<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>.
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -172,3 +172,12 @@ so I've had to resort to stealing (copying and pasting from their docs)
|
|||
font-size: 0.875rem; /* 14px */
|
||||
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 Link from "next/link";
|
||||
import styles from './page.module.css';
|
||||
|
||||
// Image imports
|
||||
|
|
@ -42,9 +41,10 @@ const _88x31s = {
|
|||
"restartb": restartb,
|
||||
"tom1212": tom1212
|
||||
};
|
||||
import FediPosts from "@/components/fediPosts";
|
||||
|
||||
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>
|
||||
<br/>
|
||||
<h2>Recent fediverse Posts</h2>
|
||||
<FediPosts/>
|
||||
<br/>
|
||||
<div>
|
||||
{
|
||||
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 (
|
||||
<nav className={styles.nav}>
|
||||
<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 className={styles.links}>
|
||||
<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="/matrix"><Icon className="icon" path={mdiMessageOutline} size={1} title={"Matrix Clients (mirror list)"}/></Link></div>
|
||||
<div>
|
||||
<Link href="https://matrix.to/#/@nex:nexy7574.co.uk" class="icon">
|
||||
<Image src={matrix} wdith={32} height={32} alt="Chat" title="Chat" class="icon"/>
|
||||
<Link href="https://matrix.to/#/@nex:nexy7574.co.uk" className="icon">
|
||||
<Image src={matrix} wdith={32} height={32} alt="Chat" title="Chat" className="icon"/>
|
||||
</Link>
|
||||
</div>
|
||||
<div>
|
||||
<Link href="https://github.com/nexy7574" rel="noopener noreferrer" target="_blank" class="icon">
|
||||
<Image src={github} alt="GitHub" title="GitHub" wdith={32} height={32} 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} className="icon"/>
|
||||
</Link>
|
||||
</div>
|
||||
<div>
|
||||
<Link href="https://git.i-am.nexus/nex/nexy7574.co.uk-b" rel="noopener" target="_blank" class="icon">
|
||||
<Image src={forgejo} alt="Forgejo" title="Forgejo (git) & source code" wdith={32} height={32} 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} className="icon"/>
|
||||
</Link>
|
||||
</div>
|
||||
<div>
|
||||
<Link href="https://fedi.transgender.ing/@nex" rel="noopener noreferrer" target="_blank" class="icon">
|
||||
<Image src={fediverse} alt="Sharkey (Fediverse)" title="Sharkey (Fediverse)" wdith={32} height={32} 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} className="icon"/>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue