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
1
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
2
import Image from "next/image";
13
-
import { AddTiny } from "components/Icons";
14
3
import Link from "next/link";
4
+
import { NewFromTemplateButton } from "./NewFromTemplateButton";
15
5
16
6
export function LeafletTemplate(props: {
17
7
title: string;
18
8
description?: string;
19
9
image: string;
20
10
alt: string;
21
-
idPreview: string;
22
-
idTemplate: string;
11
+
templateID: string; // readonly id for the leaflet that will be duplicated
23
12
}) {
24
13
return (
25
14
<div className="flex flex-col gap-2">
26
15
<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
16
<div className="max-w-[274px] h-[154px] relative">
30
-
{/* TEMPLATE PLACEHOLDER - PREVIEW WILL GO HERE! */}
31
17
<Image
32
18
className="absolute top-0 left-0 rounded-md w-full h-full object-cover"
33
19
src={props.image}
···
37
23
/>
38
24
<div className="absolute w-full max-w-[274px] h-full max-h-[154px] flex flex-col gap-2 items-center place-content-center">
39
25
<Link
40
-
href={`https://leaflet.pub/` + props.idPreview}
26
+
href={`https://leaflet.pub/` + props.templateID}
41
27
target="_blank"
42
28
className="no-underline hover:no-underline"
43
29
>
···
45
31
View Preview
46
32
</ButtonPrimary>
47
33
</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>
34
+
<NewFromTemplateButton templateID={props.templateID} />
61
35
</div>
62
36
</div>
63
37
</div>
···
94
68
<>
95
69
<TemplateList
96
70
name="Themes"
97
-
description="A small sampling of infinite theme possibilities"
71
+
description="A small sampling of Leaflet's infinite theme possibilities!"
98
72
>
99
73
<LeafletTemplate
100
74
title="Foliage"
101
75
image="/templates/template-foliage-548x308.jpg"
102
76
alt="preview image of Foliage theme, with lots of green and leafy bg"
103
-
idPreview="e4323c1d-15c1-407d-afaf-e5d772a35f0e"
104
-
idTemplate=""
77
+
templateID="e4323c1d-15c1-407d-afaf-e5d772a35f0e"
105
78
/>
106
79
<LeafletTemplate
107
80
title="Lunar"
108
81
image="/templates/template-lunar-548x308.jpg"
109
82
alt="preview image of Lunar theme, with dark grey, red, and moon bg"
110
-
idPreview="219d14ab-096c-4b48-83ee-36446e335c3e"
111
-
idTemplate=""
83
+
templateID="219d14ab-096c-4b48-83ee-36446e335c3e"
112
84
/>
113
85
<LeafletTemplate
114
86
title="Paper"
115
87
image="/templates/template-paper-548x308.jpg"
116
88
alt="preview image of Paper theme, with red, gold, green and marbled paper bg"
117
-
idPreview="9b28ceea-0220-42ac-87e6-3976d156f653"
118
-
idTemplate=""
89
+
templateID="9b28ceea-0220-42ac-87e6-3976d156f653"
119
90
/>
120
91
<LeafletTemplate
121
92
title="Oceanic"
122
93
image="/templates/template-oceanic-548x308.jpg"
123
94
alt="preview image of Oceanic theme, with dark and light blue and ocean bg"
124
-
idPreview="a65a56d7-713d-437e-9c42-f18bdc6fe2a7"
125
-
idTemplate=""
95
+
templateID="a65a56d7-713d-437e-9c42-f18bdc6fe2a7"
126
96
/>
127
97
</TemplateList>
128
98
</>
···
133
103
return (
134
104
<TemplateList
135
105
name="Examples"
136
-
description="Creative documents to make and share with Leaflet"
106
+
description="Creative documents you can make and share with Leaflet"
137
107
>
138
108
<LeafletTemplate
139
109
title="Reading List"
140
110
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=""
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"
145
114
/>
146
115
<LeafletTemplate
147
116
title="Travel Planning"
148
117
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=""
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"
153
121
/>
154
122
<LeafletTemplate
155
123
title="Gift Guide"
156
124
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=""
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"
161
128
/>
162
129
<LeafletTemplate
163
130
title="Event Page"
164
131
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=""
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"
169
135
/>
170
136
</TemplateList>
171
137
);
-2
app/templates/page.tsx
-2
app/templates/page.tsx
···
1
1
import Link from "next/link";
2
-
import TemplateHomeButton from "./TemplateHomeButton";
3
2
import { TemplateListExamples, TemplateListThemes } from "./TemplateList";
4
-
import { HomeButton } from "components/HomeButton";
5
3
import { HoverButton } from "components/Buttons";
6
4
import { HomeSmall } from "components/Icons";
7
5
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.