a tool for shared writing and social publishing
0
fork

Configure Feed

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

add more theme images and home button

+50 -36
+36 -30
app/templates/TemplateList.tsx
··· 14 14 import Link from "next/link"; 15 15 16 16 export function LeafletTemplate(props: { 17 - id: string; 17 + title: string; 18 + description?: string; 18 19 image: string; 19 20 alt: string; 20 - title: string; 21 - description?: string; 22 21 idPreview: string; 23 22 idTemplate: string; 24 23 }) { ··· 40 39 <Link 41 40 href={`https://leaflet.pub/` + props.idPreview} 42 41 target="_blank" 42 + className="no-underline hover:no-underline" 43 43 > 44 44 <ButtonPrimary className="bg-primary !border-2 !border-white hover:!outline-none hover:scale-105 hover:rotate-3 transition-all"> 45 45 View Preview ··· 94 94 <> 95 95 <TemplateList 96 96 name="Themes" 97 - description="Just a few of infinite theme possibilities — a nice starting point for further customization" 97 + description="A small sampling of infinite theme possibilities" 98 98 > 99 99 <LeafletTemplate 100 - id="TK" 100 + title="Foliage" 101 101 image="/templates/template-foliage-548x308.jpg" 102 - alt="TK" 103 - title="Foliage" 102 + alt="preview image of Foliage theme, with lots of green and leafy bg" 104 103 idPreview="e4323c1d-15c1-407d-afaf-e5d772a35f0e" 105 - idTemplate="TK" 104 + idTemplate="" 106 105 /> 107 106 <LeafletTemplate 108 - id="TK" 109 - image="/templates/template-foliage-548x308.jpg" 110 - alt="TK" 111 107 title="Lunar" 108 + image="/templates/template-lunar-548x308.jpg" 109 + alt="preview image of Lunar theme, with dark grey, red, and moon bg" 110 + idPreview="219d14ab-096c-4b48-83ee-36446e335c3e" 111 + idTemplate="" 112 112 /> 113 113 <LeafletTemplate 114 - id="TK" 115 - image="/templates/template-foliage-548x308.jpg" 116 - alt="TK" 117 114 title="Paper" 115 + image="/templates/template-paper-548x308.jpg" 116 + alt="preview image of Paper theme, with red, gold, green and marbled paper bg" 117 + idPreview="9b28ceea-0220-42ac-87e6-3976d156f653" 118 + idTemplate="" 118 119 /> 119 120 <LeafletTemplate 120 - id="TK" 121 - image="/templates/template-foliage-548x308.jpg" 122 - alt="TK" 123 121 title="Oceanic" 122 + image="/templates/template-oceanic-548x308.jpg" 123 + alt="preview image of Oceanic theme, with dark and light blue and ocean bg" 124 + idPreview="a65a56d7-713d-437e-9c42-f18bdc6fe2a7" 125 + idTemplate="" 124 126 /> 125 127 </TemplateList> 126 128 </> ··· 131 133 return ( 132 134 <TemplateList 133 135 name="Examples" 134 - description="Useful ways to use Leaflet for creative shared documents" 136 + description="Creative documents to make and share with Leaflet" 135 137 > 136 138 <LeafletTemplate 137 - id="TK" 139 + title="Reading List" 140 + description="Make a topical list to track your own reading, or share recs with friends!" 138 141 image="/templates/template-foliage-548x308.jpg" 139 142 alt="TK" 140 - title="Reading List" 141 - description="Make a topical list to track your own reading, or share recs with friends!" 143 + idPreview="" 144 + idTemplate="" 142 145 /> 143 146 <LeafletTemplate 144 - id="TK" 147 + title="Travel Planning" 148 + description="Organize a trip — notes, logistics, itinerary, even a shared journal or scrapbook." 145 149 image="/templates/template-foliage-548x308.jpg" 146 150 alt="TK" 147 - title="Travel Planning" 148 - description="Organize a trip — notes, logistics, itinerary, even a shared journal or scrapbook." 151 + idPreview="" 152 + idTemplate="" 149 153 /> 150 154 <LeafletTemplate 151 - id="TK" 152 - image="/templates/template-foliage-548x308.jpg" 153 - alt="TK" 154 155 title="Gift Guide" 155 156 description="Share favorite things with friends or loved ones — products, movies, restaurants…" 156 - /> 157 - <LeafletTemplate 158 - id="TK" 159 157 image="/templates/template-foliage-548x308.jpg" 160 158 alt="TK" 159 + idPreview="" 160 + idTemplate="" 161 + /> 162 + <LeafletTemplate 161 163 title="Event Page" 162 164 description="Host an event — from a single party or meetup, to a whole conference or symposium!" 165 + image="/templates/template-foliage-548x308.jpg" 166 + alt="TK" 167 + idPreview="" 168 + idTemplate="" 163 169 /> 164 170 </TemplateList> 165 171 );
+14 -6
app/templates/page.tsx
··· 1 - // "use client"; 2 - 1 + import Link from "next/link"; 2 + import TemplateHomeButton from "./TemplateHomeButton"; 3 3 import { TemplateListExamples, TemplateListThemes } from "./TemplateList"; 4 4 import { HomeButton } from "components/HomeButton"; 5 + import { HoverButton } from "components/Buttons"; 6 + import { HomeSmall } from "components/Icons"; 5 7 6 8 export const metadata = { 7 9 title: "Leaflet Templates", ··· 13 15 <div className="flex h-full bg-bg-leaflet"> 14 16 <div className="home relative max-w-screen-lg w-full h-full mx-auto flex sm:flex-row flex-col-reverse px-2 sm:px-6 "> 15 17 <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 - {/* TODO: return to home button */} 17 - {/* only works with "use client"; - ??? */} 18 - {/* <HomeButton /> */} 19 - home! 18 + {/* NOT using <HomeButton /> b/c it does a permission check we don't need */} 19 + <Link href="/home"> 20 + <HoverButton 21 + noLabelOnMobile 22 + icon={<HomeSmall />} 23 + label="Go Home" 24 + background="bg-accent-1" 25 + text="text-accent-2" 26 + /> 27 + </Link> 20 28 </div> 21 29 <div className="flex flex-col gap-4 py-6 pt-3 sm:pt-6 sm:pb-12 sm:pl-6 grow w-full h-full overflow-y-scroll no-scrollbar"> 22 30 <h1 className="text-center">Template Library</h1>
public/templates/template-foliage-548x308.jpg

This is a binary file and will not be displayed.

public/templates/template-lunar-548x308.jpg

This is a binary file and will not be displayed.

public/templates/template-oceanic-548x308.jpg

This is a binary file and will not be displayed.

public/templates/template-paper-548x308.jpg

This is a binary file and will not be displayed.