a tool for shared writing and social publishing
0
fork

Configure Feed

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

update the homeempty layout

celine d75b640a b3548102

+71 -155
+55 -75
app/(home-pages)/home/HomeEmpty/HomeEmpty.tsx
··· 1 1 "use client"; 2 - 3 2 import { PubListEmptyIllo } from "components/ActionBar/Publications"; 4 - import { ButtonPrimary } from "components/Buttons"; 5 - import { AddSmall } from "components/Icons/AddSmall"; 6 - import { Link } from "react-aria-components"; 7 - import { DiscoverIllo } from "./DiscoverIllo"; 3 + import { ButtonPrimary, ButtonSecondary } from "components/Buttons"; 8 4 import { WelcomeToLeafletIllo } from "./WelcomeToLeafletIllo"; 9 - import { DiscoverSmall } from "components/Icons/DiscoverSmall"; 10 - import { PublishSmall } from "components/Icons/PublishSmall"; 11 5 import { createNewLeaflet } from "actions/createNewLeaflet"; 12 6 import { useIsMobile } from "src/hooks/isMobile"; 7 + import { SpeedyLink } from "components/SpeedyLink"; 13 8 14 9 export function HomeEmptyState() { 15 - let isMobile = useIsMobile(); 16 10 return ( 17 - <div className="flex flex-col gap-4 font-bold"> 18 - <div className="container p-2 flex gap-4"> 19 - <div className="w-[72px]"> 20 - <WelcomeToLeafletIllo /> 21 - </div> 22 - <div className="flex flex-col grow"> 23 - <h3 className="text-xl font-semibold pt-2">Leaflet</h3> 24 - {/*<h3>A platform for social publishing.</h3>*/} 25 - <div className="font-normal text-tertiary italic"> 26 - Write and share delightful documents! 27 - </div> 28 - <ButtonPrimary 29 - className="!text-lg my-3" 30 - onClick={async () => { 31 - let openNewLeaflet = (id: string) => { 32 - if (isMobile) { 33 - window.location.href = `/${id}?focusFirstBlock`; 34 - } else { 35 - window.open(`/${id}?focusFirstBlock`, "_blank"); 36 - } 37 - }; 38 - 39 - let id = await createNewLeaflet({ 40 - pageType: "doc", 41 - redirectUser: false, 42 - }); 43 - openNewLeaflet(id); 44 - }} 45 - > 46 - <AddSmall /> Write a Doc! 47 - </ButtonPrimary> 48 - </div> 49 - </div> 50 - <div className="flex gap-2 w-full items-center text-tertiary font-normal italic"> 51 - <hr className="border-border w-full" /> 11 + <div className="flex flex-col gap-4 sm:flex-row"> 12 + <PublicationBanner /> 13 + <div className="flex sm:flex-col flex-row gap-2 sm:w-fit w-full items-center text-tertiary font-normal italic"> 14 + <hr className="border-border grow w-full sm:w-px h-px sm:h-full border-l" /> 52 15 <div>or</div> 53 - <hr className="border-border w-full" /> 16 + <hr className="border-border grow w-full sm:w-px h-px sm:h-full border-l" /> 54 17 </div> 55 - 56 - <PublicationBanner /> 57 - <DiscoverBanner /> 18 + <DocBanner /> 58 19 </div> 59 20 ); 60 21 } 61 22 62 - export const PublicationBanner = (props: { small?: boolean }) => { 23 + let bannerStyles = 24 + "flex flex-row sm:flex-col py-4 px-4 sm:items-center items-start gap-4"; 25 + 26 + const PublicationBanner = () => { 63 27 return ( 64 - <div 65 - className={`accent-container flex sm:py-2 items-center ${props.small ? "items-start gap-2 p-2 text-sm font-normal" : "items-center p-4 gap-4"}`} 66 - > 67 - {props.small ? ( 68 - <PublishSmall className="shrink-0 text-accent-contrast" /> 69 - ) : ( 28 + <div className={`accent-container sm:basis-2/3 ${bannerStyles}`}> 29 + <div className="my-auto flex flex-row sm:flex-col gap-4"> 70 30 <div className="w-[64px] mx-auto"> 71 31 <PubListEmptyIllo /> 72 32 </div> 73 - )} 74 - <div className={`${props.small ? "pt-[2px]" : ""} grow`}> 75 - <Link href={"/lish/createPub"} className="font-bold"> 76 - Start a Publication 77 - </Link>{" "} 78 - and blog in the Atmosphere 33 + <div className={`flex flex-col sm:text-center text-left w-full`}> 34 + <h3>Create a Publication!</h3> 35 + <div className="mb-2 text-tertiary"> 36 + You can decide to share or publish it later. 37 + </div> 38 + <SpeedyLink href="/lish/createPub" className="sm:mx-auto mx-0 "> 39 + <ButtonPrimary>Create a Publication</ButtonPrimary> 40 + </SpeedyLink> 41 + </div> 79 42 </div> 80 43 </div> 81 44 ); 82 45 }; 83 46 84 - export const DiscoverBanner = (props: { small?: boolean }) => { 47 + const DocBanner = () => { 48 + let isMobile = useIsMobile(); 49 + 85 50 return ( 86 - <div 87 - className={`accent-container flex sm:py-2 items-center ${props.small ? "items-start gap-2 p-2 text-sm font-normal" : "items-center p-4 gap-4"}`} 88 - > 89 - {props.small ? ( 90 - <DiscoverSmall className="shrink-0 text-accent-contrast" /> 91 - ) : ( 92 - <div className="w-[64px] mx-auto"> 93 - <DiscoverIllo /> 51 + <div className={`text-sm sm:basis-1/3 py-0! sm:py-4! ${bannerStyles}`}> 52 + <div className="w-[48px] mx-auto"> 53 + <WelcomeToLeafletIllo /> 54 + </div> 55 + 56 + <div className={`grow flex flex-col sm:text-center text-left w-full`}> 57 + <h4>Just write something</h4> 58 + <div className="mb-2 text-tertiary"> 59 + You can decide to share or publish it later. 94 60 </div> 95 - )} 96 - <div className={`${props.small ? "pt-[2px]" : ""} grow`}> 97 - <Link href={"/discover"} className="font-bold"> 98 - Explore Publications 99 - </Link>{" "} 100 - on art, tech, games, music & more! 61 + <ButtonSecondary 62 + className="sm:mx-auto mx-0" 63 + onClick={async () => { 64 + let openNewLeaflet = (id: string) => { 65 + if (isMobile) { 66 + window.location.href = `/${id}?focusFirstBlock`; 67 + } else { 68 + window.open(`/${id}?focusFirstBlock`, "_blank"); 69 + } 70 + }; 71 + 72 + let id = await createNewLeaflet({ 73 + pageType: "doc", 74 + redirectUser: false, 75 + }); 76 + openNewLeaflet(id); 77 + }} 78 + > 79 + New Doc! 80 + </ButtonSecondary> 101 81 </div> 102 82 </div> 103 83 );
+2 -2
app/(home-pages)/home/HomeEmpty/WelcomeToLeafletIllo.tsx
··· 3 3 export const WelcomeToLeafletIllo = () => { 4 4 return ( 5 5 <svg 6 - width="73" 7 - height="68" 6 + width="48" 7 + height="44" 8 8 viewBox="0 0 73 68" 9 9 fill="none" 10 10 xmlns="http://www.w3.org/2000/svg"
+2 -10
app/(home-pages)/home/HomeLayout.tsx
··· 23 23 import { GetLeafletDataReturnType } from "app/api/rpc/[command]/get_leaflet_data"; 24 24 import { useState } from "react"; 25 25 import { useDebouncedEffect } from "src/hooks/useDebouncedEffect"; 26 - import { 27 - DiscoverBanner, 28 - HomeEmptyState, 29 - PublicationBanner, 30 - } from "./HomeEmpty/HomeEmpty"; 26 + import { HomeEmptyState } from "./HomeEmpty/HomeEmpty"; 31 27 32 28 export type Leaflet = { 33 29 added_at: string; ··· 103 99 ), 104 100 }, 105 101 }} 106 - pageTitle="Home" 102 + pageTitle={"Home"} 107 103 /> 108 104 ); 109 105 }; ··· 171 167 showPreview 172 168 /> 173 169 <div className="spacer h-4 w-full bg-transparent shrink-0 " /> 174 - 175 - {leaflets.filter((l) => !!l.token.leaflets_in_publications).length === 176 - 0 && <PublicationBanner small />} 177 - <DiscoverBanner small /> 178 170 </> 179 171 ); 180 172 }
+5 -65
components/ActionBar/MobileNavigation.tsx
··· 1 1 import { useIdentityData } from "components/IdentityProvider"; 2 - import { Popover } from "components/Popover"; 3 2 import { Separator } from "components/Layout"; 4 3 import { 5 - HomeButton, 6 4 navPages, 7 5 NotificationButton, 8 6 ReaderButton, 9 7 WriterButton, 10 8 } from "./NavigationButtons"; 11 - import { PubIcon, PublicationButtons } from "./Publications"; 12 - import { LooseLeafSmall } from "components/Icons/LooseleafSmall"; 13 - import { normalizePublicationRecord } from "src/utils/normalizeRecords"; 9 + import { PublicationNavigation } from "./Publications"; 14 10 import { LoginActionButton } from "components/LoginButton"; 15 - import { ButtonPrimary } from "components/Buttons"; 16 11 17 12 export const MobileNavigation = (props: { 18 13 currentPage: navPages; ··· 26 21 props.currentPage === "looseleafs" || 27 22 props.currentPage === "pub"; 28 23 29 - let hasLooseleafs = !!identity?.permission_token_on_homepage.find( 30 - (f) => 31 - f.permission_tokens.leaflets_to_documents && 32 - f.permission_tokens.leaflets_to_documents[0]?.document, 33 - ); 34 - 35 - let hasPubs = identity?.publications || hasLooseleafs; 36 - 37 - function getPubIcons() { 38 - if (identity && identity.publications.length >= 1) { 39 - return ( 40 - <div className="pubNav flex gap-2 font-bold"> 41 - <div className="flex"> 42 - {identity.publications.map((pub, index) => { 43 - if (index <= 3) 44 - return ( 45 - <PubIcon 46 - key={pub.uri} 47 - record={normalizePublicationRecord(pub.record)} 48 - uri={pub.uri} 49 - className="-ml-4 first:ml-0" 50 - /> 51 - ); 52 - })} 53 - </div> 54 - Pubs 55 - </div> 56 - ); 57 - } 58 - if (identity && hasLooseleafs) { 59 - return ( 60 - <div className="bg-bg-leaflet rounded-full "> 61 - <LooseLeafSmall className="scale-[75%]" /> 62 - </div> 63 - ); 64 - } 65 - if (identity) { 66 - return <ButtonPrimary>Create a Pub!</ButtonPrimary>; 67 - } else return; 68 - } 69 - 70 24 return ( 71 25 <div 72 26 className={`mobileFooter flex gap-2 px-1 text-secondary grow items-center justify-between`} ··· 87 41 /> 88 42 89 43 {compactOnMobile && ( 90 - <Popover 91 - trigger={ 92 - <> 93 - {hasPubs && <Separator classname="h-6!" />} 94 - {getPubIcons()} 95 - </> 96 - } 97 - className="pt-1 px-2!" 98 - > 99 - <HomeButton 100 - current={props.currentPage === "home"} 101 - className="flex-row-reverse! justify-end!" 102 - /> 103 - <hr className="my-1 border-border-light" /> 104 - <PublicationButtons 44 + <> 45 + {identity && <Separator classname="h-6!" />} 46 + <PublicationNavigation 105 47 currentPage={props.currentPage} 106 48 currentPubUri={props.currentPublicationUri} 107 - className="justify-end!" 108 - optionClassName=" flex-row-reverse!" 109 49 /> 110 - </Popover> 50 + </> 111 51 )} 112 52 </div> 113 53 {identity?.atp_did ? (
+7 -3
components/ActionBar/Publications.tsx
··· 245 245 }) => { 246 246 let { identity } = useIdentityData(); 247 247 248 + if (!identity) return; 249 + 248 250 let hasLooseleafs = !!identity?.permission_token_on_homepage.find( 249 251 (f) => 250 252 f.permission_tokens.leaflets_to_documents && ··· 280 282 ); 281 283 } else 282 284 return ( 283 - <ButtonPrimary compact className="text-sm!"> 284 - Create a Publication! 285 - </ButtonPrimary> 285 + <SpeedyLink href="/lish/createPub"> 286 + <ButtonPrimary compact className="text-sm!"> 287 + Create a Publication! 288 + </ButtonPrimary> 289 + </SpeedyLink> 286 290 ); 287 291 } 288 292