-48

app/(home-pages)/home/Actions/CreateNewButton.tsx

··· 1 1 "use client"; 2 2 3 3 import { createNewLeaflet } from "actions/createNewLeaflet"; 4 4 - import { createNewLeafletFromTemplate } from "actions/createNewLeafletFromTemplate"; 5 4 import { ActionButton } from "components/ActionBar/ActionButton"; 6 5 import { AddTiny } from "components/Icons/AddTiny"; 7 6 import { BlockCanvasPageSmall } from "components/Icons/BlockCanvasPageSmall"; 8 7 import { BlockDocPageSmall } from "components/Icons/BlockDocPageSmall"; 9 9 - import { TemplateSmall } from "components/Icons/TemplateSmall"; 10 8 import { Menu, MenuItem } from "components/Layout"; 11 9 import { useIsMobile } from "src/hooks/isMobile"; 12 12 - import { create } from "zustand"; 13 13 - import { combine, createJSONStorage, persist } from "zustand/middleware"; 14 10 15 15 - export const useTemplateState = create( 16 16 - persist( 17 17 - combine( 18 18 - { 19 19 - templates: [] as { id: string; name: string }[], 20 20 - }, 21 21 - (set) => ({ 22 22 - removeTemplate: (template: { id: string }) => 23 23 - set((state) => { 24 24 - return { 25 25 - templates: state.templates.filter((t) => t.id !== template.id), 26 26 - }; 27 27 - }), 28 28 - addTemplate: (template: { id: string; name: string }) => 29 29 - set((state) => { 30 30 - if (state.templates.find((t) => t.id === template.id)) return state; 31 31 - return { templates: [...state.templates, template] }; 32 32 - }), 33 33 - }), 34 34 - ), 35 35 - { 36 36 - name: "home-templates", 37 37 - storage: createJSONStorage(() => localStorage), 38 38 - }, 39 39 - ), 40 40 - ); 41 11 export const CreateNewLeafletButton = (props: {}) => { 42 12 let isMobile = useIsMobile(); 43 43 - let templates = useTemplateState((s) => s.templates); 44 13 let openNewLeaflet = (id: string) => { 45 14 if (isMobile) { 46 15 window.location.href = `/${id}?focusFirstBlock`; ··· 96 65 </div> 97 66 </div> 98 67 </MenuItem> 99 99 - {templates.length > 0 && ( 100 100 - <hr className="border-border-light mx-2 mb-0.5" /> 101 101 - )} 102 102 - {templates.map((t) => { 103 103 - return ( 104 104 - <MenuItem 105 105 - key={t.id} 106 106 - onSelect={async () => { 107 107 - let id = await createNewLeafletFromTemplate(t.id, false); 108 108 - if (!id.error) openNewLeaflet(id.id); 109 109 - }} 110 110 - > 111 111 - <TemplateSmall /> 112 112 - New {t.name} 113 113 - </MenuItem> 114 114 - ); 115 115 - })} 116 68 </Menu> 117 69 ); 118 70 };

-8

app/(home-pages)/home/HomeLayout.tsx

··· 21 21 } from "components/PageLayouts/DashboardLayout"; 22 22 import { Actions } from "./Actions/Actions"; 23 23 import { useCardBorderHidden } from "components/Pages/useCardBorderHidden"; 24 24 - import { useTemplateState } from "./Actions/CreateNewButton"; 25 24 import { GetLeafletDataReturnType } from "app/api/rpc/[command]/get_leaflet_data"; 26 25 import { useState } from "react"; 27 26 import { useDebouncedEffect } from "src/hooks/useDebouncedEffect"; ··· 69 68 let { identity } = useIdentityData(); 70 69 71 70 let hasPubs = !identity || identity.publications.length === 0 ? false : true; 72 72 - let hasTemplates = 73 73 - useTemplateState((s) => s.templates).length === 0 ? false : true; 74 71 let hasArchived = 75 72 identity && 76 73 identity.permission_token_on_homepage.filter( ··· 93 90 setSearchValueAction={setSearchValue} 94 91 hasBackgroundImage={hasBackgroundImage} 95 92 hasPubs={hasPubs} 96 96 - hasTemplates={hasTemplates} 97 93 hasArchived={!!hasArchived} 98 94 /> 99 95 ), ··· 294 290 } 295 291 }); 296 292 297 297 - let allTemplates = useTemplateState((s) => s.templates); 298 293 let filteredLeaflets = sortedLeaflets.filter( 299 294 ({ token: leaflet, archived: archived }) => { 300 295 let published = !!leaflet.leaflets_in_publications?.find((l) => l.doc); 301 296 let drafts = !!leaflet.leaflets_in_publications?.length && !published; 302 297 let docs = !leaflet.leaflets_in_publications?.length && !archived; 303 303 - let templates = !!allTemplates.find((t) => t.id === leaflet.id); 304 298 // If no filters are active, show all 305 299 if ( 306 300 !filter.drafts && 307 301 !filter.published && 308 302 !filter.docs && 309 309 - !filter.templates && 310 303 !filter.archived 311 304 ) 312 305 return archived === false || archived === null || archived == undefined; ··· 315 308 (filter.drafts && drafts) || 316 309 (filter.published && published) || 317 310 (filter.docs && docs) || 318 318 - (filter.templates && templates) || 319 311 (filter.archived && archived) 320 312 ); 321 313 },

-18

app/(home-pages)/home/LeafletList/LeafletInfo.tsx

··· 3 3 import { LeafletOptions } from "./LeafletOptions"; 4 4 import Link from "next/link"; 5 5 import { use, useState } from "react"; 6 6 - import { theme } from "tailwind.config"; 7 7 - import { TemplateSmall } from "components/Icons/TemplateSmall"; 8 6 import { timeAgo } from "src/utils/timeAgo"; 9 7 import { usePublishLink } from "components/ShareOptions"; 10 8 import { Separator } from "components/Layout"; ··· 17 15 token: PermissionToken; 18 16 leaflet_id: string; 19 17 loggedIn: boolean; 20 20 - isTemplate: boolean; 21 18 className?: string; 22 19 display: "grid" | "list"; 23 20 added_at: string; ··· 45 42 {title} 46 43 </h3> 47 44 <div className="flex gap-1 shrink-0"> 48 48 - {props.isTemplate && props.display === "list" ? ( 49 49 - <TemplateSmall 50 50 - fill={theme.colors["bg-page"]} 51 51 - className="text-tertiary" 52 52 - /> 53 53 - ) : null} 54 45 <LeafletOptions 55 46 leaflet={props.token} 56 56 - isTemplate={props.isTemplate} 57 47 draftInPublication={props.draftInPublication} 58 48 document_uri={props.document_uri} 59 49 shareLink={`/${props.token.id}`} ··· 79 69 </div> 80 70 )} 81 71 </div> 82 82 - {props.isTemplate && props.display === "grid" ? ( 83 83 - <div className="absolute -top-2 right-1"> 84 84 - <TemplateSmall 85 85 - className="text-tertiary" 86 86 - fill={theme.colors["bg-page"]} 87 87 - /> 88 88 - </div> 89 89 - ) : null} 90 72 </div> 91 73 ); 92 74 };

+1 -7

app/(home-pages)/home/LeafletList/LeafletListItem.tsx

··· 1 1 "use client"; 2 2 import { PermissionToken } from "src/replicache"; 3 3 - import { useTemplateState } from "../Actions/CreateNewButton"; 4 3 import { LeafletListPreview, LeafletGridPreview } from "./LeafletPreview"; 5 4 import { LeafletInfo } from "./LeafletInfo"; 6 5 import { useState, useRef, useEffect } from "react"; ··· 23 22 isHidden: boolean; 24 23 showPreview?: boolean; 25 24 }) => { 26 26 - let isTemplate = useTemplateState( 27 27 - (s) => !!s.templates.find((t) => t.id === props.token.id), 28 28 - ); 29 29 - 30 25 let [isOnScreen, setIsOnScreen] = useState(props.index < 16 ? true : false); 31 26 let previewRef = useRef<HTMLDivElement | null>(null); 32 27 ··· 69 64 {props.showPreview && ( 70 65 <LeafletListPreview isVisible={isOnScreen} {...props} /> 71 66 )} 72 72 - <LeafletInfo isTemplate={isTemplate} {...props} /> 67 67 + <LeafletInfo {...props} /> 73 68 </div> 74 69 {props.cardBorderHidden && ( 75 70 <hr ··· 104 99 <LeafletGridPreview {...props} isVisible={isOnScreen} /> 105 100 </div> 106 101 <LeafletInfo 107 107 - isTemplate={isTemplate} 108 102 className="px-1 pb-0.5 shrink-0" 109 103 {...props} 110 104 />

+4 -111

app/(home-pages)/home/LeafletList/LeafletOptions.tsx

··· 3 3 import { Menu, MenuItem } from "components/Layout"; 4 4 import { useState } from "react"; 5 5 import { ButtonPrimary, ButtonTertiary } from "components/Buttons"; 6 6 - import { useTemplateState } from "../Actions/CreateNewButton"; 7 7 - import { useSmoker, useToaster } from "components/Toast"; 8 8 - import { TemplateRemoveSmall } from "components/Icons/TemplateRemoveSmall"; 9 9 - import { TemplateSmall } from "components/Icons/TemplateSmall"; 6 6 + import { useToaster } from "components/Toast"; 10 7 import { MoreOptionsVerticalTiny } from "components/Icons/MoreOptionsVerticalTiny"; 11 8 import { DeleteSmall } from "components/Icons/DeleteSmall"; 12 9 import { ··· 37 34 38 35 export const LeafletOptions = (props: { 39 36 leaflet: PermissionToken; 40 40 - isTemplate?: boolean; 41 37 draftInPublication?: string; 42 38 document_uri?: string; 43 39 shareLink: string; 44 40 archived?: boolean | null; 45 41 loggedIn?: boolean; 46 42 }) => { 47 47 - let [state, setState] = useState<"normal" | "template" | "areYouSure">( 43 43 + let [state, setState] = useState<"normal" | "areYouSure">( 48 44 "normal", 49 45 ); 50 46 let [open, setOpen] = useState(false); ··· 76 72 !props.loggedIn ? ( 77 73 <LoggedOutOptions 78 74 leaflet={props.leaflet} 79 79 - isTemplate={props.isTemplate} 80 75 setState={setState} 81 76 shareLink={props.shareLink} 82 77 /> ··· 88 83 /> 89 84 ) : ( 90 85 <DefaultOptions 91 91 - isTemplate={props.isTemplate} 92 86 setState={setState} 93 87 {...props} 94 88 /> 95 89 ) 96 96 - ) : state === "template" ? ( 97 97 - <AddTemplateForm 98 98 - leaflet={props.leaflet} 99 99 - close={() => setOpen(false)} 100 100 - /> 101 90 ) : state === "areYouSure" ? ( 102 91 <DeleteAreYouSureForm 103 92 backToMenu={() => setState("normal")} ··· 112 101 }; 113 102 114 103 const DefaultOptions = (props: { 115 115 - setState: (s: "areYouSure" | "template") => void; 104 104 + setState: (s: "areYouSure") => void; 116 105 draftInPublication?: string; 117 106 leaflet: PermissionToken; 118 118 - isTemplate: boolean | undefined; 119 107 shareLink: string; 120 108 archived?: boolean | null; 121 109 }) => { ··· 136 124 id="get-link" 137 125 link={`/${props.shareLink}`} 138 126 /> 139 139 - <TemplateOptions 140 140 - leaflet={props.leaflet} 141 141 - setState={props.setState} 142 142 - isTemplate={props.isTemplate} 143 143 - /> 144 144 - 145 127 <hr className="border-border-light" /> 146 128 <MenuItem 147 129 onSelect={async () => { ··· 236 218 237 219 const LoggedOutOptions = (props: { 238 220 leaflet: PermissionToken; 239 239 - isTemplate?: boolean; 240 240 - setState: (s: "template" | "areYouSure") => void; 221 221 + setState: (s: "areYouSure") => void; 241 222 shareLink: string; 242 223 }) => { 243 224 let toaster = useToaster(); ··· 255 236 id="get-link" 256 237 link={`/${props.shareLink}`} 257 238 /> 258 258 - <TemplateOptions 259 259 - leaflet={props.leaflet} 260 260 - setState={props.setState} 261 261 - isTemplate={props.isTemplate} 262 262 - /> 263 239 <hr className="border-border-light" /> 264 240 <MenuItem 265 241 onSelect={() => { ··· 407 383 ); 408 384 }; 409 385 410 410 - const AddTemplateForm = (props: { 411 411 - leaflet: PermissionToken; 412 412 - close: () => void; 413 413 - }) => { 414 414 - let [name, setName] = useState(""); 415 415 - let smoker = useSmoker(); 416 416 - return ( 417 417 - <div className="flex flex-col gap-2 px-3 py-1"> 418 418 - <label className="font-bold flex flex-col gap-1 text-secondary"> 419 419 - Template Name 420 420 - <input 421 421 - value={name} 422 422 - onChange={(e) => setName(e.target.value)} 423 423 - type="text" 424 424 - className=" text-primary font-normal border border-border rounded-md outline-hidden px-2 py-1 w-64" 425 425 - /> 426 426 - </label> 427 427 - 428 428 - <ButtonPrimary 429 429 - onClick={() => { 430 430 - useTemplateState.getState().addTemplate({ 431 431 - name, 432 432 - id: props.leaflet.id, 433 433 - }); 434 434 - let newLeafletButton = document.getElementById("new-leaflet-button"); 435 435 - if (!newLeafletButton) return; 436 436 - let rect = newLeafletButton.getBoundingClientRect(); 437 437 - smoker({ 438 438 - static: true, 439 439 - text: <strong>Added {name}!</strong>, 440 440 - position: { 441 441 - y: rect.top, 442 442 - x: rect.right + 5, 443 443 - }, 444 444 - }); 445 445 - props.close(); 446 446 - }} 447 447 - className="place-self-end" 448 448 - > 449 449 - Add Template 450 450 - </ButtonPrimary> 451 451 - </div> 452 452 - ); 453 453 - }; 454 454 - 455 455 - const TemplateOptions = (props: { 456 456 - leaflet: PermissionToken; 457 457 - isTemplate: boolean | undefined; 458 458 - setState: (s: "template") => void; 459 459 - }) => { 460 460 - let smoker = useSmoker(); 461 461 - if (props.isTemplate) 462 462 - return ( 463 463 - <MenuItem 464 464 - onSelect={(e) => { 465 465 - useTemplateState.getState().removeTemplate(props.leaflet); 466 466 - let newLeafletButton = document.getElementById("new-leaflet-button"); 467 467 - if (!newLeafletButton) return; 468 468 - let rect = newLeafletButton.getBoundingClientRect(); 469 469 - smoker({ 470 470 - static: true, 471 471 - text: <strong>Removed template!</strong>, 472 472 - position: { 473 473 - y: rect.top, 474 474 - x: rect.right + 5, 475 475 - }, 476 476 - }); 477 477 - }} 478 478 - > 479 479 - <TemplateRemoveSmall /> Remove from Templates 480 480 - </MenuItem> 481 481 - ); 482 482 - return ( 483 483 - <MenuItem 484 484 - onSelect={(e) => { 485 485 - e.preventDefault(); 486 486 - props.setState("template"); 487 487 - }} 488 488 - > 489 489 - <TemplateSmall /> Use as Template 490 490 - </MenuItem> 491 491 - ); 492 492 - };

-159

app/templates/TemplateList.tsx

··· 1 1 - "use client"; 2 2 - 3 3 - import { ButtonPrimary } from "components/Buttons"; 4 4 - import Image from "next/image"; 5 5 - import Link from "next/link"; 6 6 - import { createNewLeafletFromTemplate } from "actions/createNewLeafletFromTemplate"; 7 7 - import { AddTiny } from "components/Icons/AddTiny"; 8 8 - 9 9 - export function LeafletTemplate(props: { 10 10 - title: string; 11 11 - description?: string; 12 12 - image: string; 13 13 - alt: string; 14 14 - templateID: string; // readonly id for the leaflet that will be duplicated 15 15 - }) { 16 16 - return ( 17 17 - <div className="flex flex-col gap-4"> 18 18 - <div className="flex flex-col gap-2"> 19 19 - <div className="max-w-[274px] h-[154px] relative"> 20 20 - <Image 21 21 - className="absolute top-0 left-0 rounded-md w-full h-full object-cover" 22 22 - src={props.image} 23 23 - alt={props.alt} 24 24 - width={274} 25 25 - height={154} 26 26 - /> 27 27 - </div> 28 28 - </div> 29 29 - <div className={`flex flex-col ${props.description ? "gap-4" : "gap-2"}`}> 30 30 - <div className="gap-0"> 31 31 - <h3 className="font-bold text-center text-secondary"> 32 32 - {props.title} 33 33 - </h3> 34 34 - {props.description && ( 35 35 - <div className="text-tertiary text-sm font-normal text-center"> 36 36 - {props.description} 37 37 - </div> 38 38 - )} 39 39 - </div> 40 40 - <div className="flex sm:flex-row flex-col gap-2 justify-center items-center bottom-4"> 41 41 - <Link 42 42 - href={`https://leaflet.pub/` + props.templateID} 43 43 - target="_blank" 44 44 - className="no-underline hover:no-underline" 45 45 - > 46 46 - <ButtonPrimary className="bg-primary hover:outline-hidden! hover:scale-105 hover:rotate-3 transition-all"> 47 47 - Preview 48 48 - </ButtonPrimary> 49 49 - </Link> 50 50 - <ButtonPrimary 51 51 - className=" hover:outline-hidden! hover:scale-105 hover:-rotate-2 transition-all" 52 52 - onClick={async () => { 53 53 - let id = await createNewLeafletFromTemplate( 54 54 - props.templateID, 55 55 - false, 56 56 - ); 57 57 - window.open(`/${id}`, "_blank"); 58 58 - }} 59 59 - > 60 60 - Create 61 61 - <AddTiny /> 62 62 - </ButtonPrimary> 63 63 - </div> 64 64 - </div> 65 65 - </div> 66 66 - ); 67 67 - } 68 68 - 69 69 - export function TemplateList(props: { 70 70 - name: string; 71 71 - description?: string; 72 72 - children: React.ReactNode; 73 73 - }) { 74 74 - return ( 75 75 - <div className="templateLeafletGrid flex flex-col gap-6"> 76 76 - <div className="flex flex-col gap-0 text-center"> 77 77 - <h3 className="text-[24px]">{props.name}</h3> 78 78 - <p className="text-secondary">{props.description}</p> 79 79 - </div> 80 80 - <div className="grid auto-rows-max md:grid-cols-4 sm:grid-cols-3 grid-cols-2 gap-y-8 gap-x-6 sm:gap-6 grow pb-8"> 81 81 - {props.children} 82 82 - </div> 83 83 - </div> 84 84 - ); 85 85 - } 86 86 - 87 87 - export function TemplateListThemes() { 88 88 - return ( 89 89 - <> 90 90 - <TemplateList 91 91 - name="Themes" 92 92 - description="A small sampling of Leaflet's infinite theme possibilities!" 93 93 - > 94 94 - <LeafletTemplate 95 95 - title="Foliage" 96 96 - image="/templates/template-foliage-548x308.jpg" 97 97 - alt="preview image of Foliage theme, with lots of green and leafy bg" 98 98 - templateID="e4323c1d-15c1-407d-afaf-e5d772a35f0e" 99 99 - /> 100 100 - <LeafletTemplate 101 101 - title="Lunar" 102 102 - image="/templates/template-lunar-548x308.jpg" 103 103 - alt="preview image of Lunar theme, with dark grey, red, and moon bg" 104 104 - templateID="219d14ab-096c-4b48-83ee-36446e335c3e" 105 105 - /> 106 106 - <LeafletTemplate 107 107 - title="Paper" 108 108 - image="/templates/template-paper-548x308.jpg" 109 109 - alt="preview image of Paper theme, with red, gold, green and marbled paper bg" 110 110 - templateID="9b28ceea-0220-42ac-87e6-3976d156f653" 111 111 - /> 112 112 - <LeafletTemplate 113 113 - title="Oceanic" 114 114 - image="/templates/template-oceanic-548x308.jpg" 115 115 - alt="preview image of Oceanic theme, with dark and light blue and ocean bg" 116 116 - templateID="a65a56d7-713d-437e-9c42-f18bdc6fe2a7" 117 117 - /> 118 118 - </TemplateList> 119 119 - </> 120 120 - ); 121 121 - } 122 122 - 123 123 - export function TemplateListExamples() { 124 124 - return ( 125 125 - <TemplateList 126 126 - name="Examples" 127 127 - description="Creative documents you can make and share with Leaflet" 128 128 - > 129 129 - <LeafletTemplate 130 130 - title="Reading List" 131 131 - description="Make a list for your own reading, or share recs with friends!" 132 132 - image="/templates/template-reading-548x308.jpg" 133 133 - alt="preview image of Reading List template, with a few sections and example books as sub-pages" 134 134 - templateID="a5655b68-fe7a-4494-bda6-c9847523b2f6" 135 135 - /> 136 136 - <LeafletTemplate 137 137 - title="Travel Plan" 138 138 - description="Organize a trip — notes, logistics, itinerary, even a shared scrapbook" 139 139 - image="/templates/template-travel-548x308.jpg" 140 140 - alt="preview image of a Travel Plan template, with pages for itinerary, logistics, research, and a travel diary canvas" 141 141 - templateID="4d6f1392-dfd3-4015-925d-df55b7da5566" 142 142 - /> 143 143 - <LeafletTemplate 144 144 - title="Gift Guide" 145 145 - description="Share your favorite things — products, restaurants, movies…" 146 146 - image="/templates/template-gift-548x308.jpg" 147 147 - alt="preview image for a Gift Guide template, with three blank canvases for different categories" 148 148 - templateID="de73df29-35d9-4a43-a441-7ce45ad3b498" 149 149 - /> 150 150 - <LeafletTemplate 151 151 - title="Event Page" 152 152 - description="Host an event — from a single meetup, to a whole conference!" 153 153 - image="/templates/template-event-548x308.jpg" 154 154 - alt="preview image for an Event Page template, with an event info section and linked pages / canvases for more info" 155 155 - templateID="23d8a4ec-b2f6-438a-933d-726d2188974d" 156 156 - /> 157 157 - </TemplateList> 158 158 - ); 159 159 - }

-108

app/templates/icon.tsx

··· 1 1 - // NOTE: duplicated from home/icon.tsx 2 2 - // we could make it different so it's clear it's not your personal colors? 3 3 - 4 4 - import { ImageResponse } from "next/og"; 5 5 - import type { Fact } from "src/replicache"; 6 6 - import type { Attribute } from "src/replicache/attributes"; 7 7 - import { Database } from "../../supabase/database.types"; 8 8 - import { createServerClient } from "@supabase/ssr"; 9 9 - import { parseHSBToRGB } from "src/utils/parseHSB"; 10 10 - import { cookies } from "next/headers"; 11 11 - 12 12 - // Route segment config 13 13 - export const revalidate = 0; 14 14 - export const preferredRegion = ["sfo1"]; 15 15 - export const dynamic = "force-dynamic"; 16 16 - export const fetchCache = "force-no-store"; 17 17 - 18 18 - // Image metadata 19 19 - export const size = { 20 20 - width: 32, 21 21 - height: 32, 22 22 - }; 23 23 - export const contentType = "image/png"; 24 24 - 25 25 - // Image generation 26 26 - let supabase = createServerClient<Database>( 27 27 - process.env.NEXT_PUBLIC_SUPABASE_API_URL as string, 28 28 - process.env.SUPABASE_SERVICE_ROLE_KEY as string, 29 29 - { cookies: {} }, 30 30 - ); 31 31 - export default async function Icon() { 32 32 - let cookieStore = await cookies(); 33 33 - let identity = cookieStore.get("identity"); 34 34 - let rootEntity: string | null = null; 35 35 - if (identity) { 36 36 - let res = await supabase 37 37 - .from("identities") 38 38 - .select( 39 39 - `*, 40 40 - permission_tokens!identities_home_page_fkey(*, permission_token_rights(*)), 41 41 - permission_token_on_homepage( 42 42 - *, permission_tokens(*, permission_token_rights(*)) 43 43 - ) 44 44 - `, 45 45 - ) 46 46 - .eq("id", identity?.value) 47 47 - .single(); 48 48 - rootEntity = res.data?.permission_tokens?.root_entity || null; 49 49 - } 50 50 - let outlineColor, fillColor; 51 51 - if (rootEntity) { 52 52 - let { data } = await supabase.rpc("get_facts", { 53 53 - root: rootEntity, 54 54 - }); 55 55 - let initialFacts = (data as unknown as Fact<Attribute>[]) || []; 56 56 - let themePageBG = initialFacts.find( 57 57 - (f) => f.attribute === "theme/card-background", 58 58 - ) as Fact<"theme/card-background"> | undefined; 59 59 - 60 60 - let themePrimary = initialFacts.find( 61 61 - (f) => f.attribute === "theme/primary", 62 62 - ) as Fact<"theme/primary"> | undefined; 63 63 - 64 64 - outlineColor = parseHSBToRGB(`hsba(${themePageBG?.data.value})`); 65 65 - 66 66 - fillColor = parseHSBToRGB(`hsba(${themePrimary?.data.value})`); 67 67 - } 68 68 - 69 69 - return new ImageResponse( 70 70 - ( 71 71 - // ImageResponse JSX element 72 72 - <div style={{ display: "flex" }}> 73 73 - <svg 74 74 - width="32" 75 75 - height="32" 76 76 - viewBox="0 0 32 32" 77 77 - fill="none" 78 78 - xmlns="http://www.w3.org/2000/svg" 79 79 - > 80 80 - {/* outline */} 81 81 - <path 82 82 - fillRule="evenodd" 83 83 - clipRule="evenodd" 84 84 - d="M3.09628 21.8809C2.1044 23.5376 1.19806 25.3395 0.412496 27.2953C-0.200813 28.8223 0.539843 30.5573 2.06678 31.1706C3.59372 31.7839 5.32873 31.0433 5.94204 29.5163C6.09732 29.1297 6.24696 28.7489 6.39151 28.3811L6.39286 28.3777C6.94334 26.9769 7.41811 25.7783 7.99246 24.6987C8.63933 24.6636 9.37895 24.6582 10.2129 24.6535L10.3177 24.653C11.8387 24.6446 13.6711 24.6345 15.2513 24.3147C16.8324 23.9947 18.789 23.2382 19.654 21.2118C19.8881 20.6633 20.1256 19.8536 19.9176 19.0311C19.98 19.0311 20.044 19.031 20.1096 19.031C20.1447 19.031 20.1805 19.0311 20.2169 19.0311C21.0513 19.0316 22.2255 19.0324 23.2752 18.7469C24.5 18.4137 25.7878 17.6248 26.3528 15.9629C26.557 15.3624 26.5948 14.7318 26.4186 14.1358C26.4726 14.1262 26.528 14.1165 26.5848 14.1065C26.6121 14.1018 26.6398 14.0969 26.6679 14.092C27.3851 13.9667 28.3451 13.7989 29.1653 13.4921C29.963 13.1936 31.274 12.5268 31.6667 10.9987C31.8906 10.1277 31.8672 9.20568 31.3642 8.37294C31.1551 8.02669 30.889 7.75407 30.653 7.55302C30.8728 7.27791 31.1524 6.89517 31.345 6.47292C31.6791 5.74032 31.8513 4.66394 31.1679 3.61078C30.3923 2.4155 29.0623 2.2067 28.4044 2.1526C27.7203 2.09635 26.9849 2.15644 26.4564 2.2042C26.3846 2.02839 26.2858 1.84351 26.1492 1.66106C25.4155 0.681263 24.2775 0.598914 23.6369 0.61614C22.3428 0.650943 21.3306 1.22518 20.5989 1.82076C20.2149 2.13334 19.8688 2.48545 19.5698 2.81786C18.977 2.20421 18.1625 1.90193 17.3552 1.77751C15.7877 1.53594 14.5082 2.58853 13.6056 3.74374C12.4805 5.18375 11.7295 6.8566 10.7361 8.38059C10.3814 8.14984 9.83685 7.89945 9.16529 7.93065C8.05881 7.98204 7.26987 8.73225 6.79424 9.24551C5.96656 10.1387 5.46273 11.5208 5.10424 12.7289C4.71615 14.0368 4.38077 15.5845 4.06569 17.1171C3.87054 18.0664 3.82742 18.5183 4.01638 20.2489C3.43705 21.1826 3.54993 21.0505 3.09628 21.8809Z" 85 85 - fill={outlineColor ? outlineColor : "#FFFFFF"} 86 86 - /> 87 87 - 88 88 - {/* fill */} 89 89 - <path 90 90 - fillRule="evenodd" 91 91 - clipRule="evenodd" 92 92 - d="M9.86889 10.2435C10.1927 10.528 10.5723 10.8615 11.3911 10.5766C11.9265 10.3903 12.6184 9.17682 13.3904 7.82283C14.5188 5.84367 15.8184 3.56431 17.0505 3.7542C18.5368 3.98325 18.4453 4.80602 18.3749 5.43886C18.3255 5.88274 18.2866 6.23317 18.8098 6.21972C19.3427 6.20601 19.8613 5.57971 20.4632 4.8529C21.2945 3.84896 22.2847 2.65325 23.6906 2.61544C24.6819 2.58879 24.6663 3.01595 24.6504 3.44913C24.6403 3.72602 24.63 4.00537 24.8826 4.17024C25.1314 4.33266 25.7571 4.2759 26.4763 4.21065C27.6294 4.10605 29.023 3.97963 29.4902 4.6995C29.9008 5.33235 29.3776 5.96135 28.8762 6.56423C28.4514 7.07488 28.0422 7.56679 28.2293 8.02646C28.3819 8.40149 28.6952 8.61278 29.0024 8.81991C29.5047 9.15866 29.9905 9.48627 29.7297 10.5009C29.4539 11.5737 27.7949 11.8642 26.2398 12.1366C24.937 12.3647 23.7072 12.5801 23.4247 13.2319C23.2475 13.6407 23.5414 13.8311 23.8707 14.0444C24.2642 14.2992 24.7082 14.5869 24.4592 15.3191C23.8772 17.031 21.9336 17.031 20.1095 17.0311C18.5438 17.0311 17.0661 17.0311 16.6131 18.1137C16.3515 18.7387 16.7474 18.849 17.1818 18.9701C17.7135 19.1183 18.3029 19.2826 17.8145 20.4267C16.8799 22.6161 13.3934 22.6357 10.2017 22.6536C9.03136 22.6602 7.90071 22.6665 6.95003 22.7795C6.84152 22.7924 6.74527 22.8547 6.6884 22.948C5.81361 24.3834 5.19318 25.9622 4.53139 27.6462C4.38601 28.0162 4.23862 28.3912 4.08611 28.7709C3.88449 29.2729 3.31413 29.5163 2.81217 29.3147C2.31021 29.1131 2.06673 28.5427 2.26834 28.0408C3.01927 26.1712 3.88558 24.452 4.83285 22.8739C6.37878 20.027 9.42621 16.5342 12.6488 13.9103C15.5162 11.523 18.2544 9.73614 21.4413 8.38026C21.8402 8.21054 21.7218 7.74402 21.3053 7.86437C18.4789 8.68119 15.9802 10.3013 13.3904 11.9341C10.5735 13.71 8.21288 16.1115 6.76027 17.8575C6.50414 18.1653 5.94404 17.9122 6.02468 17.5199C6.65556 14.4512 7.30668 11.6349 8.26116 10.605C9.16734 9.62708 9.47742 9.8995 9.86889 10.2435Z" 93 93 - fill={fillColor ? fillColor : "#272727"} 94 94 - /> 95 95 - </svg> 96 96 - </div> 97 97 - ), 98 98 - // ImageResponse options 99 99 - { 100 100 - // For convenience, we can re-use the exported icons size metadata 101 101 - // config to also set the ImageResponse's width and height. 102 102 - ...size, 103 103 - headers: { 104 104 - "Cache-Control": "no-cache", 105 105 - }, 106 106 - }, 107 107 - ); 108 108 - }

-29

app/templates/page.tsx

··· 1 1 - import Link from "next/link"; 2 2 - import { TemplateListExamples, TemplateListThemes } from "./TemplateList"; 3 3 - import { ActionButton } from "components/ActionBar/ActionButton"; 4 4 - import { HomeSmall } from "components/Icons/HomeSmall"; 5 5 - 6 6 - export const metadata = { 7 7 - title: "Leaflet Templates", 8 8 - description: "example themes and documents you can use!", 9 9 - }; 10 10 - 11 11 - export default function Templates() { 12 12 - return ( 13 13 - <div className="flex h-full bg-bg-leaflet"> 14 14 - <div className="home relative max-w-(--breakpoint-lg) w-full h-full mx-auto flex sm:flex-row flex-col-reverse px-4 sm:px-6 "> 15 15 - <div className="homeOptions z-10 shrink-0 sm:static absolute bottom-0 place-self-end sm:place-self-start flex sm:flex-col flex-row-reverse gap-2 sm:w-fit w-full items-center pb-2 pt-1 sm:pt-7"> 16 16 - {/* NOT using <HomeButton /> b/c it does a permission check we don't need */} 17 17 - <Link href="/home"> 18 18 - <ActionButton icon={<HomeSmall />} label="Go Home" /> 19 19 - </Link> 20 20 - </div> 21 21 - <div className="flex flex-col gap-10 py-6 pt-3 sm:pt-6 sm:pb-12 sm:pl-6 grow w-full h-full overflow-y-scroll no-scrollbar"> 22 22 - <h1 className="text-center">Template Library</h1> 23 23 - <TemplateListThemes /> 24 24 - <TemplateListExamples /> 25 25 - </div> 26 26 - </div> 27 27 - </div> 28 28 - ); 29 29 - }

-21

components/Icons/TemplateRemoveSmall.tsx

··· 1 1 - import { Props } from "./Props"; 2 2 - 3 3 - export const TemplateRemoveSmall = (props: Props) => { 4 4 - return ( 5 5 - <svg 6 6 - width="24" 7 7 - height="24" 8 8 - viewBox="0 0 24 24" 9 9 - fill="none" 10 10 - xmlns="http://www.w3.org/2000/svg" 11 11 - {...props} 12 12 - > 13 13 - <path 14 14 - fillRule="evenodd" 15 15 - clipRule="evenodd" 16 16 - d="M21.6598 1.22969C22.0503 0.839167 22.6835 0.839167 23.074 1.22969C23.4646 1.62021 23.4646 2.25338 23.074 2.6439L21.9991 3.71887C22 3.72121 22.001 3.72355 22.002 3.7259L21.0348 4.69374C21.0347 4.69033 21.0345 4.68693 21.0344 4.68353L17.2882 8.42972L17.2977 8.43313L16.3813 9.35011L16.3714 9.34656L15.5955 10.1224L15.6058 10.1261L14.6894 11.0431L14.6787 11.0393L14.3959 11.3221L14.4067 11.326L13.4903 12.2429L13.479 12.2389L12.8919 12.8261L12.9034 12.8302L10.2156 15.5198L10.2028 15.5152L9.35969 16.3583C9.36255 16.3614 9.36541 16.3645 9.36826 16.3676L7.20585 18.5314C7.19871 18.5321 7.19159 18.5328 7.18448 18.5335L6.26611 19.4519C6.27069 19.4539 6.27528 19.4559 6.27989 19.4579L5.40679 20.3316C5.40244 20.3291 5.39809 20.3267 5.39376 20.3242L2.54817 23.1698C2.15765 23.5603 1.52448 23.5603 1.13396 23.1698C0.743434 22.7793 0.743433 22.1461 1.13396 21.7556L4.57518 18.3144C4.5862 18.296 4.59778 18.2779 4.6099 18.2599C4.72342 18.0917 4.86961 17.964 5.02393 17.8656L6.39488 16.4947C6.25376 16.4822 6.10989 16.4734 5.96441 16.4685C5.20904 16.4433 4.461 16.5264 3.88183 16.7201C3.2818 16.9207 2.99485 17.1912 2.91069 17.4452C2.80892 17.7525 2.47737 17.919 2.17013 17.8173C1.8629 17.7155 1.69634 17.3839 1.79811 17.0767C2.05627 16.2973 2.78206 15.852 3.51019 15.6085C4.2592 15.3581 5.15477 15.2689 6.00346 15.2972C6.48903 15.3133 6.97583 15.3686 7.42782 15.4617L8.11942 14.7701L7.89431 14.6896C7.7838 14.6501 7.69213 14.5705 7.63742 14.4667L5.91365 11.1952C5.86162 11.0964 5.84836 10.9944 5.86434 10.9002L5.85245 10.9196L5.11563 9.4308C4.96523 9.11293 5.04515 8.78343 5.24544 8.56361L5.25054 8.55806C5.25749 8.55058 5.26457 8.54323 5.2718 8.53601L6.43022 7.3457C6.6445 7.11834 6.97346 7.03892 7.26837 7.14439L9.80363 8.05107L12.9624 7.10485C13.1067 7.02062 13.2859 6.99834 13.4555 7.05901L14.4322 7.40831C14.7942 6.69891 14.93 5.89897 15.0777 5.02873L15.0777 5.02872L15.0958 4.9222C15.2586 3.96572 15.4529 2.86736 16.1798 2.04515C17.0056 1.11114 18.7307 0.837125 20.2663 1.83615C20.4285 1.94168 20.5821 2.05061 20.7266 2.16294L21.6598 1.22969ZM19.8899 2.99965C19.8075 2.93935 19.72 2.87895 19.6271 2.81856C18.4897 2.07854 17.4326 2.39759 17.0579 2.82147C16.5869 3.3541 16.4234 4.10723 16.2512 5.11887L16.2231 5.28522L16.2231 5.28523C16.1304 5.83581 16.0274 6.44661 15.8342 7.05527L19.8899 2.99965ZM14.288 8.60148L13.2682 8.23675L11.6654 8.71688L13.5122 9.37736L14.288 8.60148ZM12.5953 10.2942L9.59692 9.22187L9.58424 9.21734L7.10654 8.33124L6.82935 8.61605L12.3125 10.577L12.5953 10.2942ZM11.3957 11.4938L6.56005 9.76447L6.04788 10.6006C6.16458 10.5123 6.32269 10.4767 6.48628 10.5352L10.8085 12.081L11.3957 11.4938ZM17.0099 12.2569L16.2294 11.9778L15.313 12.8948L16.8798 13.4551L18.7426 16.9905L18.0747 17.8398L19.1912 18.2615C19.6607 18.4294 20.1033 18.1358 20.2179 17.728L20.7391 16.3648C20.824 16.1511 20.8112 15.9108 20.7039 15.7071L19.124 12.7086L18.8949 11.321L18.8931 11.3104L18.8904 11.2969C18.8874 11.234 18.8742 11.1705 18.8497 11.1087L18.3522 9.8537L16.5121 11.6949L16.5482 11.7078L16.5582 11.7115L17.1419 11.9202L17.0099 12.2569ZM12.0382 16.1716L14.7261 13.482L16.0553 13.9574C16.1658 13.9969 16.2575 14.0764 16.3122 14.1803L18.0359 17.4518C18.2352 17.83 17.8658 18.2557 17.4633 18.1118L12.0382 16.1716ZM8.44038 19.7717L7.26492 20.9479C7.80247 21.0274 8.35468 21.0252 8.82243 20.8811C9.24804 20.7499 9.52382 20.5096 9.73008 20.285C9.79978 20.2091 9.87046 20.1246 9.92979 20.0536L9.92981 20.0536L9.92999 20.0534L9.9306 20.0527C9.95072 20.0286 9.96953 20.0061 9.98653 19.9861C10.0618 19.8973 10.1248 19.8281 10.1905 19.7694C10.307 19.6651 10.4472 19.579 10.6908 19.5395C10.9182 19.5027 11.2529 19.5041 11.7567 19.6004C11.6943 19.6815 11.6359 19.764 11.5823 19.8476C11.3276 20.2439 11.1352 20.7322 11.2038 21.2293C11.3097 21.9955 11.8139 22.4463 12.3522 22.6544C12.8626 22.8518 13.4377 22.8513 13.8631 22.731C14.7279 22.4863 15.6213 21.724 15.4107 20.664C15.3105 20.1591 14.9656 19.7211 14.4516 19.3701C14.3677 19.3128 14.2783 19.2571 14.1833 19.203C14.5987 19.0436 14.9889 19.0051 15.2828 19.1025C15.59 19.2042 15.9215 19.0377 16.0233 18.7304C16.1251 18.4232 15.9585 18.0916 15.6513 17.9899C14.6724 17.6656 13.5751 18.0821 12.7766 18.6397C12.6141 18.5938 12.4436 18.5504 12.265 18.5097C11.5394 18.3444 10.9698 18.307 10.5035 18.3825C10.018 18.4612 9.67586 18.657 9.40877 18.8961C9.28262 19.009 9.17853 19.1268 9.09296 19.2277C9.06342 19.2625 9.03731 19.2937 9.0131 19.3227L9.01295 19.3228C8.9605 19.3856 8.91697 19.4377 8.86686 19.4922C8.73917 19.6313 8.63185 19.7134 8.47726 19.761C8.46519 19.7648 8.45289 19.7683 8.44038 19.7717ZM12.5683 20.4811C12.3863 20.7644 12.3505 20.965 12.3648 21.0689C12.4003 21.3259 12.5445 21.4722 12.7749 21.5613C13.0331 21.6611 13.3469 21.659 13.544 21.6032C14.1554 21.4302 14.2952 21.0637 14.2612 20.8923C14.2391 20.7814 14.1422 20.578 13.7907 20.338C13.6005 20.2082 13.347 20.076 13.0173 19.9508C12.8341 20.1242 12.681 20.3057 12.5683 20.4811Z" 17 17 - fill="currentColor" 18 18 - /> 19 19 - </svg> 20 20 - ); 21 21 - };

-25

components/Icons/TemplateSmall.tsx

··· 1 1 - import { Props } from "./Props"; 2 2 - 3 3 - export const TemplateSmall = (props: Props & { fill?: string }) => { 4 4 - return ( 5 5 - <svg 6 6 - width="24" 7 7 - height="24" 8 8 - viewBox="0 0 24 24" 9 9 - fill="none" 10 10 - xmlns="http://www.w3.org/2000/svg" 11 11 - {...props} 12 12 - > 13 13 - <path 14 14 - d="M14.1876 3.5073C14.3657 2.68428 14.8409 1.80449 15.1974 1.39941L15.2085 1.38682C15.5258 1.02605 16.1664 0.297788 17.7348 0.0551971C19.7272 -0.252968 22.338 1.22339 23.1781 3.53026C23.9464 5.63998 22.4863 7.65134 21.1778 8.49107C20.443 8.96256 19.8776 9.29865 19.5389 9.6655C19.6381 9.88024 19.8755 10.4623 19.9945 10.8588C20.1304 11.312 20.1356 11.8263 20.2444 12.3342C20.6412 13.1008 21.4615 14.6122 21.6483 14.9894C21.9441 15.5868 22.0637 16.0554 21.901 16.59C21.7793 16.99 21.3809 18.0037 21.2098 18.4064C21.1134 18.6333 20.6741 19.1794 20.165 19.3516C19.5207 19.5694 19.2 19.533 18.2867 19.1682C17.9231 19.3768 17.3068 19.3194 17.0874 19.2128C16.9902 19.5392 16.6234 19.8695 16.4353 20.0055C16.5008 20.1749 16.6684 20.619 16.5759 21.4191C16.4257 22.7176 14.6119 24.4819 12.2763 23.8544C10.5744 23.3971 10.2099 22.1002 10.0744 21.5462C8.16651 22.8209 5.74592 21.9772 4.43632 21.1133C3.44653 20.4603 3.16063 19.4467 3.2199 18.7888C2.57837 19.147 1.33433 19.2159 0.756062 17.9729C0.320217 17.036 0.838862 15.6535 2.49397 14.7706C3.56898 14.1971 5.01017 14.061 6.14456 14.136C5.47545 12.9417 4.17774 10.4051 3.97777 9.74456C3.72779 8.91889 3.94746 8.3129 4.30348 7.88113C4.6595 7.44936 5.21244 6.90396 5.75026 6.38129C6.28808 5.85862 7.06074 5.85862 7.7349 6.07072C8.27424 6.2404 9.36352 6.65146 9.84074 6.83578C10.5069 6.63086 11.9689 6.18102 12.4877 6.02101C13.0065 5.861 13.184 5.78543 13.7188 5.90996C13.8302 5.37643 14.0045 4.35336 14.1876 3.5073Z" 15 15 - fill={props.fill || "transparent"} 16 16 - /> 17 17 - <path 18 18 - fillRule="evenodd" 19 19 - clipRule="evenodd" 20 20 - d="M19.6271 2.81856C18.4896 2.07854 17.4326 2.39759 17.0578 2.82147C16.5869 3.3541 16.4234 4.10723 16.2512 5.11887L16.2231 5.28522L16.2231 5.28523C16.0919 6.06363 15.9405 6.96241 15.5423 7.80533L17.4557 8.48962C18.0778 7.71969 18.7304 7.28473 19.2974 6.92363L19.3687 6.87829C20.0258 6.46022 20.473 6.17579 20.7913 5.5972C21.0667 5.09643 21.0978 4.64884 20.9415 4.23092C20.7767 3.79045 20.3738 3.3044 19.6271 2.81856ZM15.0777 5.02873C14.9299 5.89897 14.7941 6.69891 14.4321 7.4083L13.4555 7.05901C13.2858 6.99834 13.1067 7.02061 12.9624 7.10485L9.80359 8.05107L7.26833 7.14438C6.97342 7.03892 6.64447 7.11834 6.43018 7.3457L5.27176 8.53601C5.26453 8.54323 5.25745 8.55058 5.2505 8.55806L5.2454 8.56361C5.04511 8.78343 4.9652 9.11292 5.1156 9.43079L5.85241 10.9196L5.8643 10.9002C5.84832 10.9944 5.86158 11.0964 5.91361 11.1952L7.63738 14.4667C7.6921 14.5705 7.78376 14.6501 7.89428 14.6896L17.4633 18.1118C17.8658 18.2557 18.2352 17.83 18.0359 17.4518L16.3121 14.1803C16.2574 14.0764 16.1657 13.9969 16.0552 13.9574L6.48624 10.5352C6.32266 10.4767 6.16454 10.5123 6.04784 10.6006L6.56002 9.76447L16.8798 13.4551L18.7426 16.9905L18.0747 17.8398L19.1912 18.2615C19.6606 18.4294 20.1033 18.1358 20.2179 17.728L20.7391 16.3648C20.8239 16.1511 20.8112 15.9108 20.7039 15.7071L19.124 12.7086L18.8949 11.321C18.8935 11.3129 18.892 11.3049 18.8904 11.2969C18.8874 11.234 18.8741 11.1705 18.8496 11.1087L18.1936 9.45372C18.7455 8.68856 19.3357 8.28878 19.927 7.9122C19.9681 7.88603 20.0096 7.85977 20.0514 7.83331C20.6663 7.44436 21.3511 7.01112 21.8182 6.16211C22.2345 5.40522 22.3314 4.60167 22.0392 3.82037C21.7555 3.06161 21.1334 2.40034 20.2662 1.83615C18.7307 0.837123 17.0056 1.11114 16.1798 2.04515C15.4528 2.86736 15.2586 3.96572 15.0958 4.92219L15.0777 5.02872L15.0777 5.02873ZM13.2681 8.23675L11.6653 8.71688L16.3567 10.3947L16.6254 9.4374L13.2681 8.23675ZM16.5481 11.7078L16.5582 11.7114L17.1419 11.9202L17.0098 12.2569L6.82932 8.61605L7.1065 8.33124L9.5842 9.21734L9.59688 9.22187L16.5481 11.7078ZM12.5683 20.4811C12.3863 20.7644 12.3505 20.965 12.3648 21.0689C12.4003 21.3259 12.5444 21.4722 12.7748 21.5613C13.0331 21.6611 13.3469 21.659 13.544 21.6032C14.1553 21.4302 14.2952 21.0637 14.2611 20.8923C14.2391 20.7814 14.1421 20.578 13.7906 20.338C13.6004 20.2082 13.3469 20.076 13.0173 19.9508C12.834 20.1242 12.681 20.3057 12.5683 20.4811ZM11.7567 19.6004C11.6942 19.6815 11.6359 19.764 11.5822 19.8476C11.3276 20.2439 11.1351 20.7322 11.2038 21.2293C11.3096 21.9955 11.8139 22.4463 12.3521 22.6544C12.8626 22.8518 13.4377 22.8513 13.863 22.731C14.7279 22.4863 15.6213 21.724 15.4107 20.664C15.3104 20.1591 14.9656 19.7211 14.4515 19.3701C14.3677 19.3128 14.2783 19.2571 14.1833 19.203C14.5987 19.0436 14.9889 19.0051 15.2827 19.1025C15.59 19.2042 15.9215 19.0377 16.0233 18.7304C16.125 18.4232 15.9585 18.0916 15.6513 17.9899C14.6724 17.6656 13.5751 18.0821 12.7766 18.6397C12.6141 18.5938 12.4436 18.5504 12.265 18.5097C11.5393 18.3444 10.9698 18.307 10.5034 18.3825C10.018 18.4612 9.67582 18.657 9.40873 18.8961C9.28258 19.009 9.17849 19.1268 9.09292 19.2277C9.06338 19.2625 9.03727 19.2937 9.01306 19.3227L9.01291 19.3228C8.96046 19.3856 8.91693 19.4377 8.86682 19.4922C8.73913 19.6313 8.63181 19.7134 8.47722 19.761C8.03942 19.896 7.30137 19.8237 6.60705 19.5851C6.27195 19.4699 5.98787 19.3293 5.79222 19.1916C5.64379 19.0871 5.59428 19.019 5.58047 19L5.58045 19C5.57827 18.997 5.57698 18.9952 5.57634 18.9947C5.57144 18.9579 5.57397 18.938 5.57539 18.9305C5.57674 18.9233 5.57829 18.9201 5.58128 18.9156C5.59031 18.9023 5.63142 18.8546 5.76375 18.7965C6.04383 18.6735 6.48291 18.6061 7.03421 18.5487C7.12534 18.5392 7.22003 18.5299 7.31675 18.5205L7.31734 18.5205L7.31774 18.5204C7.75337 18.478 8.22986 18.4315 8.60602 18.3399C8.83695 18.2837 9.10046 18.1956 9.31444 18.0333C9.55604 17.8501 9.73703 17.5659 9.72457 17.1949C9.71117 16.7955 9.50249 16.4807 9.2559 16.2553C9.01235 16.0327 8.69774 15.863 8.36729 15.7333C7.70363 15.4729 6.85166 15.3254 6.00343 15.2972C5.15473 15.2689 4.25916 15.3581 3.51015 15.6085C2.78202 15.852 2.05623 16.2973 1.79807 17.0767C1.6963 17.3839 1.86287 17.7155 2.1701 17.8173C2.47733 17.919 2.80889 17.7525 2.91065 17.4452C2.99481 17.1912 3.28176 16.9207 3.8818 16.7201C4.46096 16.5264 5.209 16.4433 5.96437 16.4685C6.7202 16.4937 7.43275 16.6256 7.93908 16.8243C8.19363 16.9243 8.36538 17.0292 8.46519 17.1204C8.4773 17.1315 8.4878 17.1419 8.49689 17.1515C8.45501 17.1668 8.39992 17.1838 8.3287 17.2012C8.04154 17.2711 7.67478 17.3072 7.24492 17.3496L7.24413 17.3497L7.24246 17.3498C7.13635 17.3603 7.02639 17.3711 6.91284 17.3829C6.38763 17.4376 5.76632 17.5153 5.29238 17.7234C5.0477 17.8309 4.78839 17.9954 4.60986 18.2599C4.42009 18.541 4.36482 18.8707 4.42432 19.213C4.49899 19.6426 4.83826 19.9534 5.11763 20.15C5.42736 20.368 5.81812 20.5533 6.22607 20.6935C7.01783 20.9656 8.03865 21.1226 8.82239 20.8811C9.248 20.7499 9.52379 20.5096 9.73004 20.285C9.79974 20.2091 9.87042 20.1246 9.92975 20.0536L9.92977 20.0536L9.92995 20.0534C9.9503 20.0291 9.96932 20.0063 9.98649 19.9861C10.0618 19.8973 10.1248 19.8281 10.1905 19.7694C10.3069 19.6651 10.4472 19.579 10.6908 19.5395C10.9181 19.5027 11.2529 19.5041 11.7567 19.6004Z" 21 21 - fill="currentColor" 22 22 - /> 23 23 - </svg> 24 24 - ); 25 25 - };

+1 -25

components/PageLayouts/DashboardLayout.tsx

··· 33 33 drafts: boolean; 34 34 published: boolean; 35 35 docs: boolean; 36 36 - templates: boolean; 37 36 archived: boolean; 38 37 }; 39 38 }; ··· 50 49 drafts: false, 51 50 published: false, 52 51 docs: false, 53 53 - templates: false, 54 52 archived: false, 55 53 }, 56 54 }; ··· 262 260 hasBackgroundImage: boolean; 263 261 defaultDisplay: Exclude<DashboardState["display"], undefined>; 264 262 hasPubs: boolean; 265 265 - hasTemplates: boolean; 266 263 hasArchived: boolean; 267 264 }) => { 268 265 let { display, sort } = useDashboardState(); ··· 284 281 <DisplayToggle setState={setState} display={display} /> 285 282 <Separator classname="h-4 min-h-4!" /> 286 283 287 287 - {props.hasPubs || props.hasTemplates ? ( 284 284 + {props.hasPubs ? ( 288 285 <> 289 289 - {props.hasPubs} 290 290 - {props.hasTemplates} 291 286 <FilterOptions 292 287 hasPubs={props.hasPubs} 293 293 - hasTemplates={props.hasTemplates} 294 288 hasArchived={props.hasArchived} 295 289 /> 296 290 <Separator classname="h-4 min-h-4!" />{" "} ··· 380 374 381 375 const FilterOptions = (props: { 382 376 hasPubs: boolean; 383 383 - hasTemplates: boolean; 384 377 hasArchived: boolean; 385 378 }) => { 386 379 let { filter } = useDashboardState(); ··· 419 412 </> 420 413 )} 421 414 422 422 - {props.hasTemplates && ( 423 423 - <> 424 424 - <Checkbox 425 425 - small 426 426 - checked={filter.templates} 427 427 - onChange={(e) => 428 428 - setState({ 429 429 - filter: { ...filter, templates: !!e.target.checked }, 430 430 - }) 431 431 - } 432 432 - > 433 433 - Templates 434 434 - </Checkbox> 435 435 - </> 436 436 - )} 437 437 - 438 415 {props.hasArchived && ( 439 416 <Checkbox 440 417 small ··· 468 445 docs: false, 469 446 published: false, 470 447 drafts: false, 471 471 - templates: false, 472 448 archived: false, 473 449 }, 474 450 });

-18

components/ShareOptions/index.tsx

··· 6 6 import { Menu, MenuItem } from "components/Layout"; 7 7 import { ActionButton } from "components/ActionBar/ActionButton"; 8 8 import useSWR from "swr"; 9 9 - import { useTemplateState } from "app/(home-pages)/home/Actions/CreateNewButton"; 10 9 import LoginForm from "app/login/LoginForm"; 11 10 import { CustomDomainMenu } from "./DomainOptions"; 12 11 import { useIdentityData } from "components/IdentityProvider"; ··· 106 105 }, []); 107 106 let { data: domains } = useLeafletDomains(); 108 107 109 109 - let isTemplate = useTemplateState( 110 110 - (s) => !!s.templates.find((t) => t.id === permission_token.id), 111 111 - ); 112 112 - 113 108 return ( 114 109 <> 115 115 - {isTemplate && ( 116 116 - <> 117 117 - <ShareButton 118 118 - text="Share Template" 119 119 - subtext="Let others make new Leaflets as copies of this template" 120 120 - smokerText="Template link copied!" 121 121 - id="get-template-link" 122 122 - link={`template/${publishLink}` || ""} 123 123 - /> 124 124 - <hr className="border-border my-1" /> 125 125 - </> 126 126 - )} 127 127 - 128 110 <ShareButton 129 111 text={`Share ${postLink ? "Draft" : ""} Edit Link`} 130 112 subtext=""

+1 -1

next-env.d.ts

··· 1 1 /// <reference types="next" /> 2 2 /// <reference types="next/image-types/global" /> 3 3 - import "./.next/dev/types/routes.d.ts"; 3 3 + /// <reference path="./.next/types/routes.d.ts" /> 4 4 5 5 // NOTE: This file should not be edited 6 6 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

+1 -1

tsconfig.json

··· 21 21 "moduleResolution": "node", 22 22 "resolveJsonModule": true, 23 23 "isolatedModules": true, 24 24 - "jsx": "react-jsx", 24 24 + "jsx": "preserve", 25 25 "plugins": [ 26 26 { 27 27 "name": "next"