Somewhat sensible design (WIP)
This commit is contained in:
parent
164571ec19
commit
dcca38a994
SSH key fingerprint:
SHA256:jQDNS75/33T59Ey4yAzrUPP/5YQaXEetsW8hwUae+ag
5 changed files with 162 additions and 75 deletions
|
|
@ -7,11 +7,13 @@
|
|||
</script>
|
||||
|
||||
<main>
|
||||
<h1>Welcome to the Feed</h1>
|
||||
<div id="Content">
|
||||
{#await accountsPromise}
|
||||
<p>Loading...</p>
|
||||
{:then accountsData}
|
||||
<div id="Account">
|
||||
<h1 id="Header">ATProto PDS</h1>
|
||||
<p>Home to {accountsData.length} accounts</p>
|
||||
{#each accountsData as accountObject}
|
||||
<AccountComponent account={accountObject} />
|
||||
{/each}
|
||||
|
|
@ -29,7 +31,39 @@
|
|||
{/each}
|
||||
</div>
|
||||
{/await}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
#Content {
|
||||
display: flex;
|
||||
/* split the screen in half, left for accounts, right for posts */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #12082b;
|
||||
color: #ffffff;
|
||||
}
|
||||
#Feed {
|
||||
width: 65%;
|
||||
height: 80vh;
|
||||
overflow-y: scroll;
|
||||
padding: 20px;
|
||||
}
|
||||
#Account {
|
||||
width: 35%;
|
||||
height: 80vh;
|
||||
overflow-y: scroll;
|
||||
padding: 20px;
|
||||
background-color: #070311;
|
||||
|
||||
border-radius: 10px;
|
||||
}
|
||||
#Header {
|
||||
text-align: center;
|
||||
font-size: 2em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
66
src/app.css
66
src/app.css
|
|
@ -1,16 +1,19 @@
|
|||
:root {
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
@font-face {
|
||||
font-family: 'ProggyClean';
|
||||
src: url(https://witchcraft.systems/ProggyCleanNerdFont-Regular.ttf);
|
||||
}
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: transparent transparent;
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
-webkit-overflow-scrolling: touch;
|
||||
-webkit-scrollbar: none; /* Safari */
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -28,6 +31,11 @@ body {
|
|||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
background-color: #12082b;
|
||||
font-family: 'ProggyClean', monospace;
|
||||
font-size: 24px;
|
||||
color: white;
|
||||
border-color: #8054f0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
@ -35,45 +43,11 @@ h1 {
|
|||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,39 @@
|
|||
<script lang="ts">
|
||||
import type { AccountMetadata } from "./pdsfetch";
|
||||
const { account }: { account: AccountMetadata } = $props();
|
||||
import { Config } from "../../config";
|
||||
</script>
|
||||
<div id="accountContainer">
|
||||
{#if account.avatarCid}
|
||||
<img
|
||||
id="avatar"
|
||||
alt="avatar of {account.displayName}"
|
||||
src="https://pds.witchcraft.systems/xrpc/com.atproto.sync.getBlob?did={account.did}&cid={account.avatarCid}"
|
||||
src="{Config.PDS_URL}/xrpc/com.atproto.sync.getBlob?did={account.did}&cid={account.avatarCid}"
|
||||
/>
|
||||
{/if}
|
||||
<p>{account.displayName}</p>
|
||||
<div id="accountName">{account.displayName || account.did}</div>
|
||||
</div>
|
||||
<style>
|
||||
#accountContainer {
|
||||
display: column;
|
||||
display: flex;
|
||||
text-align: start;
|
||||
border: 2px solid black;
|
||||
align-items: center;
|
||||
background-color: #0d0620;
|
||||
padding: 4%;
|
||||
margin: 10px;
|
||||
|
||||
/* round corners */
|
||||
border-radius: 10px;
|
||||
}
|
||||
#accountName {
|
||||
margin-left: 10px;
|
||||
font-size: 0.9em;
|
||||
|
||||
/* replace overflow with ellipsis */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 80%;
|
||||
}
|
||||
#avatar {
|
||||
width: 50px;
|
||||
|
|
|
|||
|
|
@ -13,13 +13,13 @@
|
|||
alt="avatar of {post.displayName}"
|
||||
/>
|
||||
{/if}
|
||||
<p>{post.displayName} | {post.timenotstamp}</p>
|
||||
<div id="headerText">{post.displayName} | {post.timenotstamp}</div>
|
||||
</div>
|
||||
<div id="postContent">
|
||||
<p>{post.text}</p>
|
||||
{#if post.replyingDid}
|
||||
<p>Replying to: {post.replyingDid}</p>
|
||||
{/if}
|
||||
<p id="replyingText">replying to: {post.replyingDid}</p>
|
||||
{/if}
|
||||
<p id="postText">{post.text}</p>
|
||||
{#if post.imagesCid}
|
||||
<div id="imagesContainer">
|
||||
{#each post.imagesCid as imageLink}
|
||||
|
|
@ -42,21 +42,62 @@
|
|||
|
||||
<style>
|
||||
#postContainer {
|
||||
display: column;
|
||||
text-align: start;
|
||||
border: 2px solid black;
|
||||
padding: 4%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid #8054f0;
|
||||
background-color: black;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
#postHeader {
|
||||
text-decoration: underline;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
background-color: #1f1145;
|
||||
padding: 0px 0px;
|
||||
height: fit-content;
|
||||
border-bottom: 1px solid #8054f0;
|
||||
font-weight: bold;
|
||||
}
|
||||
#postContent {
|
||||
display: flex;
|
||||
text-align: start;
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
background-color: #0d0620;
|
||||
color: white;
|
||||
}
|
||||
#replyingText {
|
||||
font-size: 0.7em;
|
||||
color: white;
|
||||
margin: 0;
|
||||
margin-bottom: 10px;
|
||||
padding: 0;
|
||||
}
|
||||
#postText {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#headerText {
|
||||
margin-left: 10px;
|
||||
font-size: 0.9em;
|
||||
text-align: start;
|
||||
}
|
||||
#avatar {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
margin: 0px;
|
||||
margin-left: 0px;
|
||||
border-right: #8054f0 1px solid;
|
||||
}
|
||||
#embedImages {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
margin-top: 0px;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
#embedVideo {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import type {
|
|||
AppBskyFeedPost,
|
||||
ComAtprotoRepoListRecords,
|
||||
} from "@atcute/client/lexicons";
|
||||
import { Config } from "../../config";
|
||||
// import { ComAtprotoRepoListRecords.Record } from "@atcute/client/lexicons";
|
||||
// import { AppBskyFeedPost } from "@atcute/client/lexicons";
|
||||
// import { AppBskyActorDefs } from "@atcute/client/lexicons";
|
||||
|
|
@ -87,7 +88,7 @@ const didFromATuri = (aturi: string) => {
|
|||
|
||||
const rpc = new XRPC({
|
||||
handler: simpleFetchHandler({
|
||||
service: "https://pds.witchcraft.systems",
|
||||
service: Config.PDS_URL,
|
||||
}),
|
||||
});
|
||||
|
||||
|
|
@ -99,6 +100,7 @@ const getDidsFromPDS = async () => {
|
|||
};
|
||||
const getAccountMetadata = async (did: `did:${string}:${string}`) => {
|
||||
// gonna assume self exists in the app.bsky.actor.profile
|
||||
try {
|
||||
const { data } = await rpc.get("com.atproto.repo.getRecord", {
|
||||
params: {
|
||||
repo: did,
|
||||
|
|
@ -116,6 +118,15 @@ const getAccountMetadata = async (did: `did:${string}:${string}`) => {
|
|||
account.avatarCid = value.avatar.ref["$link"];
|
||||
}
|
||||
return account;
|
||||
}
|
||||
catch (e) {
|
||||
console.error(`Error fetching metadata for ${did}:`, e);
|
||||
return {
|
||||
did: "error",
|
||||
displayName: "",
|
||||
avatarCid: null,
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const getAllMetadataFromPds = async () => {
|
||||
|
|
@ -125,21 +136,31 @@ const getAllMetadataFromPds = async () => {
|
|||
return await getAccountMetadata(repo);
|
||||
}),
|
||||
);
|
||||
return metadata;
|
||||
return metadata.filter(account => account.did !== "error");
|
||||
};
|
||||
|
||||
const fetchPosts = async (did: string) => {
|
||||
const { data } = await rpc.get("com.atproto.repo.listRecords", {
|
||||
params: {
|
||||
repo: did,
|
||||
collection: "app.bsky.feed.post",
|
||||
limit: 5,
|
||||
},
|
||||
});
|
||||
return {
|
||||
records: data.records as ComAtprotoRepoListRecords.Record[],
|
||||
did: did,
|
||||
};
|
||||
try {
|
||||
const { data } = await rpc.get("com.atproto.repo.listRecords", {
|
||||
params: {
|
||||
repo: did,
|
||||
collection: "app.bsky.feed.post",
|
||||
limit: 5,
|
||||
},
|
||||
});
|
||||
return {
|
||||
records: data.records as ComAtprotoRepoListRecords.Record[],
|
||||
did: did,
|
||||
error: false
|
||||
};
|
||||
} catch (e) {
|
||||
console.error(`Error fetching posts for ${did}:`, e);
|
||||
return {
|
||||
records: [],
|
||||
did: did,
|
||||
error: true
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const fetchAllPosts = async () => {
|
||||
|
|
@ -149,7 +170,8 @@ const fetchAllPosts = async () => {
|
|||
await fetchPosts(metadata.did)
|
||||
),
|
||||
);
|
||||
const posts: Post[] = postRecords.flatMap((userFetch) =>
|
||||
const validPostRecords = postRecords.filter(record => !record.error);
|
||||
const posts: Post[] = validPostRecords.flatMap((userFetch) =>
|
||||
userFetch.records.map((record) => {
|
||||
const user = users.find((user: AccountMetadata) =>
|
||||
user.did == userFetch.did
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue