a tool for shared writing and social publishing
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

added icons

celine 0bdfafb2 438e6bee

+47 -12
+19 -2
app/lish/[handle]/[publication]/dashboard/PublicationDashboard.tsx
··· 1 1 "use client"; 2 + import { BlobRef } from "@atproto/lexicon"; 2 3 import { useState } from "react"; 3 4 4 5 type Tabs = { [tabName: string]: React.ReactNode }; ··· 6 7 name: string; 7 8 tabs: T; 8 9 defaultTab: keyof T; 10 + icon: BlobRef | null; 11 + did: string; 9 12 }) { 10 13 let [tab, setTab] = useState(props.defaultTab); 11 14 let content = props.tabs[tab]; 15 + 12 16 return ( 13 17 <div className="pubDashWrapper w-full flex flex-col items-stretch px-3"> 14 - <div className="pubDashTabWrapper flex flex-row w-full justify-between border-b border-border text-secondary items-center"> 15 - <div className="font-bold text-tertiary">{props.name}</div> 18 + <div className="pubDashTabWrapper flex flex-row gap-2 w-full justify-between border-b border-border text-secondary items-center"> 19 + {props.icon && ( 20 + <div 21 + className="shrink-0 w-5 h-5 rounded-full" 22 + style={{ 23 + backgroundImage: `url(https://bsky.social/xrpc/com.atproto.sync.getBlob?did=${props.did}&cid=${(props.icon.ref as unknown as { $link: string })["$link"]})`, 24 + backgroundRepeat: "no-repeat", 25 + backgroundPosition: "center", 26 + backgroundSize: "cover", 27 + }} 28 + /> 29 + )}{" "} 30 + <div className="font-bold grow text-tertiary max-w-full truncate pr-2"> 31 + {props.name} 32 + </div> 16 33 <div className="pubDashTabs flex flex-row gap-2"> 17 34 {Object.keys(props.tabs).map((t) => ( 18 35 <Tab
+6 -1
app/lish/[handle]/[publication]/dashboard/page.tsx
··· 15 15 import { get_publication_data } from "app/api/rpc/[command]/get_publication_data"; 16 16 import { PublicationSWRDataProvider } from "./PublicationSWRProvider"; 17 17 import { PublishedPostsList } from "./PublishedPostsLists"; 18 + import { PubLeafletPublication } from "lexicons/api"; 18 19 19 20 const idResolver = new IdResolver(); 20 21 ··· 51 52 }, 52 53 { supabase: supabaseServerClient }, 53 54 ); 55 + 56 + let record = publication?.record as PubLeafletPublication.Record; 54 57 if (!publication || identity.atp_did !== publication.identity_did) 55 58 return <PubNotFound />; 56 59 ··· 70 73 </Sidebar> 71 74 </div> 72 75 <div 73 - className={`h-full overflow-y-scroll pt-4 sm:pl-5 sm:pt-9 w-full`} 76 + className={`h-full overflow-y-scroll pt-4 sm:pl-5 sm:pt-8 w-full`} 74 77 > 75 78 <PublicationDashboard 79 + did={did} 80 + icon={record.icon ? record.icon : null} 76 81 name={publication.name} 77 82 tabs={{ 78 83 Drafts: <DraftList />,
+22 -9
app/lish/[handle]/[publication]/page.tsx
··· 6 6 import React from "react"; 7 7 import { get_publication_data } from "app/api/rpc/[command]/get_publication_data"; 8 8 import { AtUri } from "@atproto/syntax"; 9 - import { PubLeafletDocument } from "lexicons/api"; 9 + import { PubLeafletDocument, PubLeafletPublication } from "lexicons/api"; 10 10 import Link from "next/link"; 11 11 12 12 const idResolver = new IdResolver(); ··· 28 28 return { title: decodeURIComponent((await props.params).publication) }; 29 29 } 30 30 31 - //This is the admin dashboard of the publication 32 31 export default async function Publication(props: { 33 32 params: Promise<{ publication: string; handle: string }>; 34 33 }) { ··· 45 44 .eq("identity_did", did) 46 45 .eq("name", decodeURIComponent((await props.params).publication)) 47 46 .single(); 48 - if (!publication) return <PubNotFound />; 49 47 48 + let record = publication?.record as PubLeafletPublication.Record; 49 + 50 + if (!publication) return <PubNotFound />; 51 + console.log(record.icon); 50 52 try { 51 53 return ( 52 54 <ThemeProvider entityID={null}> 53 55 <div className="publicationWrapper w-screen h-screen flex place-items-center bg-[#FDFCFA]"> 54 - <div className="publication max-w-prose w-full mx-auto h-full pt-9"> 56 + <div className="publication max-w-prose w-full mx-auto h-full pt-8 px-2 pb-12 sm:pb-8"> 55 57 <div className="flex flex-col pb-6 w-full text-center justify-center "> 56 - <h2 className="text-accent-contrast">{publication.name}</h2> 57 - <p className="text-lg text-tertiary"> 58 - Here is a placeholder description 59 - </p> 58 + <div className="flex flex-row gap-3 justify-center"> 59 + {record.icon && ( 60 + <div 61 + className="shrink-0 w-8 h-8 rounded-full mt-1" 62 + style={{ 63 + backgroundImage: `url(https://bsky.social/xrpc/com.atproto.sync.getBlob?did=${did}&cid=${(record.icon.ref as unknown as { $link: string })["$link"]})`, 64 + backgroundRepeat: "no-repeat", 65 + backgroundPosition: "center", 66 + backgroundSize: "cover", 67 + }} 68 + /> 69 + )} 70 + <h2 className="text-accent-contrast">{publication.name}</h2> 71 + </div> 72 + <p className="text-lg text-tertiary">{record.description} </p> 60 73 </div> 61 74 <div className="publicationPostList w-full flex flex-col gap-4 pb-6"> 62 75 {publication.documents_in_publications ··· 85 98 > 86 99 <h3 className="text-primary">{record.title}</h3> 87 100 <p className="italic text-secondary"> 88 - {record.description}{" "} 101 + {record.description} 89 102 </p> 90 103 <p className="text-sm text-tertiary pt-2"> 91 104 {record.publishedAt &&