leaflet.pub
a tool for shared writing and social publishing
move out NewFromTemplateButton and add images for example section
schlage.town
+23
app/templates/NewFromTemplateButton.tsx
+23
app/templates/NewFromTemplateButton.tsx
···
···
1
+
"use client";
2
+
3
+
import { createNewLeafletFromTemplate } from "actions/createNewLeafletFromTemplate";
4
+
import { ButtonPrimary } from "components/Buttons";
5
+
import { AddTiny } from "components/Icons";
6
+
7
+
export function NewFromTemplateButton(props: { templateID: string }) {
8
+
return (
9
+
<ButtonPrimary
10
+
className="!w-fit mx-4 !border-2 !border-white hover:!outline-none hover:scale-105 hover:-rotate-2 transition-all"
11
+
// TODO: make client component for the onClick to work?
12
+
// NB: do we need the edit link or will the readonly one work?
13
+
14
+
onClick={async () => {
15
+
let id = await createNewLeafletFromTemplate(props.templateID, false);
16
+
window.open(`/${id}`, "_blank");
17
+
}}
18
+
>
19
+
New from Template
20
+
<AddTiny />
21
+
</ButtonPrimary>
22
+
);
23
+
}
+22
-56
app/templates/TemplateList.tsx
+22
-56
app/templates/TemplateList.tsx
···
1
-
import { useEffect, useState, version } from "react";
2
-
import { getHomeDocs, HomeDoc } from "app/home/storage";
3
-
import useSWR from "swr";
4
-
import { ReplicacheProvider } from "src/replicache";
5
-
import { LeafletPreview } from "app/home/LeafletPreview";
6
-
import { PermissionToken } from "src/replicache";
7
import { ButtonPrimary } from "components/Buttons";
8
-
import { createNewLeafletFromTemplate } from "actions/createNewLeafletFromTemplate";
9
-
10
-
import { Database } from "../../supabase/database.types";
11
-
import { createServerClient } from "@supabase/ssr";
12
import Image from "next/image";
13
-
import { AddTiny } from "components/Icons";
14
import Link from "next/link";
15
16
export function LeafletTemplate(props: {
17
title: string;
18
description?: string;
19
image: string;
20
alt: string;
21
-
idPreview: string;
22
-
idTemplate: string;
23
}) {
24
return (
25
<div className="flex flex-col gap-2">
26
<div className="flex flex-col gap-2">
27
-
{/* TODO: add preview with LeafletPreview */}
28
-
{/* OR could just use a static image with text overlay maybe */}
29
<div className="max-w-[274px] h-[154px] relative">
30
-
{/* TEMPLATE PLACEHOLDER - PREVIEW WILL GO HERE! */}
31
<Image
32
className="absolute top-0 left-0 rounded-md w-full h-full object-cover"
33
src={props.image}
···
37
/>
38
<div className="absolute w-full max-w-[274px] h-full max-h-[154px] flex flex-col gap-2 items-center place-content-center">
39
<Link
40
-
href={`https://leaflet.pub/` + props.idPreview}
41
target="_blank"
42
className="no-underline hover:no-underline"
43
>
···
45
View Preview
46
</ButtonPrimary>
47
</Link>
48
-
<ButtonPrimary
49
-
className="!w-fit mx-4 !border-2 !border-white hover:!outline-none hover:scale-105 hover:-rotate-2 transition-all"
50
-
// TODO: make client component for the onClick to work?
51
-
// NB: do we need the edit link or will the readonly one work?
52
-
53
-
// onClick={async () => {
54
-
// let id = await createNewLeafletFromTemplate(props.idTemplate, false);
55
-
// window.open(`/${props.idTemplate}`, "_blank");
56
-
// }}
57
-
>
58
-
New from Template
59
-
<AddTiny />
60
-
</ButtonPrimary>
61
</div>
62
</div>
63
</div>
···
94
<>
95
<TemplateList
96
name="Themes"
97
-
description="A small sampling of infinite theme possibilities"
98
>
99
<LeafletTemplate
100
title="Foliage"
101
image="/templates/template-foliage-548x308.jpg"
102
alt="preview image of Foliage theme, with lots of green and leafy bg"
103
-
idPreview="e4323c1d-15c1-407d-afaf-e5d772a35f0e"
104
-
idTemplate=""
105
/>
106
<LeafletTemplate
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
/>
113
<LeafletTemplate
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=""
119
/>
120
<LeafletTemplate
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=""
126
/>
127
</TemplateList>
128
</>
···
133
return (
134
<TemplateList
135
name="Examples"
136
-
description="Creative documents to make and share with Leaflet"
137
>
138
<LeafletTemplate
139
title="Reading List"
140
description="Make a topical list to track your own reading, or share recs with friends!"
141
-
image="/templates/template-foliage-548x308.jpg"
142
-
alt="TK"
143
-
idPreview=""
144
-
idTemplate=""
145
/>
146
<LeafletTemplate
147
title="Travel Planning"
148
description="Organize a trip — notes, logistics, itinerary, even a shared journal or scrapbook."
149
-
image="/templates/template-foliage-548x308.jpg"
150
-
alt="TK"
151
-
idPreview=""
152
-
idTemplate=""
153
/>
154
<LeafletTemplate
155
title="Gift Guide"
156
description="Share favorite things with friends or loved ones — products, movies, restaurants…"
157
-
image="/templates/template-foliage-548x308.jpg"
158
-
alt="TK"
159
-
idPreview=""
160
-
idTemplate=""
161
/>
162
<LeafletTemplate
163
title="Event Page"
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=""
169
/>
170
</TemplateList>
171
);
···
1
import { ButtonPrimary } from "components/Buttons";
2
import Image from "next/image";
3
import Link from "next/link";
4
+
import { NewFromTemplateButton } from "./NewFromTemplateButton";
5
6
export function LeafletTemplate(props: {
7
title: string;
8
description?: string;
9
image: string;
10
alt: string;
11
+
templateID: string; // readonly id for the leaflet that will be duplicated
12
}) {
13
return (
14
<div className="flex flex-col gap-2">
15
<div className="flex flex-col gap-2">
16
<div className="max-w-[274px] h-[154px] relative">
17
<Image
18
className="absolute top-0 left-0 rounded-md w-full h-full object-cover"
19
src={props.image}
···
23
/>
24
<div className="absolute w-full max-w-[274px] h-full max-h-[154px] flex flex-col gap-2 items-center place-content-center">
25
<Link
26
+
href={`https://leaflet.pub/` + props.templateID}
27
target="_blank"
28
className="no-underline hover:no-underline"
29
>
···
31
View Preview
32
</ButtonPrimary>
33
</Link>
34
+
<NewFromTemplateButton templateID={props.templateID} />
35
</div>
36
</div>
37
</div>
···
68
<>
69
<TemplateList
70
name="Themes"
71
+
description="A small sampling of Leaflet's infinite theme possibilities!"
72
>
73
<LeafletTemplate
74
title="Foliage"
75
image="/templates/template-foliage-548x308.jpg"
76
alt="preview image of Foliage theme, with lots of green and leafy bg"
77
+
templateID="e4323c1d-15c1-407d-afaf-e5d772a35f0e"
78
/>
79
<LeafletTemplate
80
title="Lunar"
81
image="/templates/template-lunar-548x308.jpg"
82
alt="preview image of Lunar theme, with dark grey, red, and moon bg"
83
+
templateID="219d14ab-096c-4b48-83ee-36446e335c3e"
84
/>
85
<LeafletTemplate
86
title="Paper"
87
image="/templates/template-paper-548x308.jpg"
88
alt="preview image of Paper theme, with red, gold, green and marbled paper bg"
89
+
templateID="9b28ceea-0220-42ac-87e6-3976d156f653"
90
/>
91
<LeafletTemplate
92
title="Oceanic"
93
image="/templates/template-oceanic-548x308.jpg"
94
alt="preview image of Oceanic theme, with dark and light blue and ocean bg"
95
+
templateID="a65a56d7-713d-437e-9c42-f18bdc6fe2a7"
96
/>
97
</TemplateList>
98
</>
···
103
return (
104
<TemplateList
105
name="Examples"
106
+
description="Creative documents you can make and share with Leaflet"
107
>
108
<LeafletTemplate
109
title="Reading List"
110
description="Make a topical list to track your own reading, or share recs with friends!"
111
+
image="/templates/template-reading-548x308.jpg"
112
+
alt="preview image of Reading List template, with a few sections and example books as sub-pages"
113
+
templateID="a5655b68-fe7a-4494-bda6-c9847523b2f6"
114
/>
115
<LeafletTemplate
116
title="Travel Planning"
117
description="Organize a trip — notes, logistics, itinerary, even a shared journal or scrapbook."
118
+
image="/templates/template-travel-548x308.jpg"
119
+
alt="preview image of a Travel Planning template, with pages for itinerary, logistics, research, and a travel diary canvas"
120
+
templateID="4d6f1392-dfd3-4015-925d-df55b7da5566"
121
/>
122
<LeafletTemplate
123
title="Gift Guide"
124
description="Share favorite things with friends or loved ones — products, movies, restaurants…"
125
+
image="/templates/template-gift-548x308.jpg"
126
+
alt="preview image for a Gift Guide template, with three blank canvases for different categories"
127
+
templateID="de73df29-35d9-4a43-a441-7ce45ad3b498"
128
/>
129
<LeafletTemplate
130
title="Event Page"
131
description="Host an event — from a single party or meetup, to a whole conference or symposium!"
132
+
image="/templates/template-event-548x308.jpg"
133
+
alt="preview image for an Event Page template, with an event info section and linked pages / canvases for more info"
134
+
templateID="23d8a4ec-b2f6-438a-933d-726d2188974d"
135
/>
136
</TemplateList>
137
);
-2
app/templates/page.tsx
-2
app/templates/page.tsx
···
1
import Link from "next/link";
2
-
import TemplateHomeButton from "./TemplateHomeButton";
3
import { TemplateListExamples, TemplateListThemes } from "./TemplateList";
4
-
import { HomeButton } from "components/HomeButton";
5
import { HoverButton } from "components/Buttons";
6
import { HomeSmall } from "components/Icons";
7
public/templates/template-event-548x308.jpg
public/templates/template-event-548x308.jpg
This is a binary file and will not be displayed.
public/templates/template-gift-548x308.jpg
public/templates/template-gift-548x308.jpg
This is a binary file and will not be displayed.
public/templates/template-reading-548x308.jpg
public/templates/template-reading-548x308.jpg
This is a binary file and will not be displayed.
public/templates/template-travel-548x308.jpg
public/templates/template-travel-548x308.jpg
This is a binary file and will not be displayed.