Skip to content

Commit d80afcc

Browse files
JonnyBurgerJonnyBurger
committed
template page
1 parent 399db19 commit d80afcc

24 files changed

+432
-326
lines changed

‎packages/docs/render-cards.mjs

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ const serveUrl = await bundle({
88
});
99
const compositions = await getCompositions(serveUrl);
1010

11-
for (const composition of compositions.filter((c) =>
12-
c.id.startsWith("expert")
11+
for (const composition of compositions.filter(
12+
(c) => c.id.startsWith("expert") || c.id.startsWith("template")
1313
)) {
1414
await renderStill({
1515
composition,

‎packages/docs/route-plugin/index.js

+36-4
Original file line numberDiff line numberDiff line change
@@ -9,23 +9,55 @@ module.exports = function () {
99
path.join(__dirname, "../src/data/experts.tsx"),
1010
"utf-8"
1111
);
12-
const slugs = experts
12+
const templates = fs.readFileSync(
13+
path.join(
14+
__dirname,
15+
"../../../packages/create-video/src/templates.tsx"
16+
),
17+
"utf-8"
18+
);
19+
const expertSlugs = experts
1320
.split("\n")
1421
.map((a) => {
1522
return a.match(/slug:\s"(.*)"/)?.[1];
1623
})
1724
.filter(Boolean);
18-
return slugs;
25+
26+
const templateSlugs = templates
27+
.split("\n")
28+
.map((a) => {
29+
return a.match(/cliId:\s'(.*)'/)?.[1];
30+
})
31+
.filter(Boolean);
32+
33+
if (templateSlugs.length === 0) {
34+
throw new Error("expected templates");
35+
}
36+
37+
if (expertSlugs.length === 0) {
38+
throw new Error("expected experts");
39+
}
40+
41+
return { expertSlugs, templateSlugs };
1942
},
20-
contentLoaded({ content, actions }) {
21-
content.forEach((c) => {
43+
contentLoaded({ content: { expertSlugs, templateSlugs }, actions }) {
44+
expertSlugs.forEach((c) => {
2245
actions.addRoute({
2346
path: "/experts/" + c,
2447
component: "@site/src/components/ExpertPage.tsx",
2548
modules: {},
2649
exact: true,
2750
});
2851
});
52+
console.log(templateSlugs);
53+
templateSlugs.forEach((c) => {
54+
actions.addRoute({
55+
path: "/templates/" + c,
56+
component: "@site/src/components/TemplatePage.tsx",
57+
modules: {},
58+
exact: true,
59+
});
60+
});
2961
},
3062
};
3163
};

‎packages/docs/src/components/BackButton.tsx

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from "react";
2+
3+
export const BackButton: React.FC<{
4+
color: string;
5+
text: string;
6+
link: string;
7+
}> = ({ color, text, link }) => {
8+
const backLink: React.CSSProperties = {
9+
color,
10+
fontFamily: "GTPlanar",
11+
fontWeight: 500,
12+
display: "inline-flex",
13+
justifyContent: "center",
14+
alignItems: "center",
15+
};
16+
17+
const backIcon: React.CSSProperties = {
18+
height: 20,
19+
color,
20+
marginRight: 15,
21+
display: "inline-block",
22+
};
23+
return (
24+
<a style={backLink} href={link}>
25+
<svg
26+
style={backIcon}
27+
xmlns="http://www.w3.org/2000/svg"
28+
viewBox="0 0 448 512"
29+
>
30+
<path
31+
fill="currentcolor"
32+
d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"
33+
/>
34+
</svg>{" "}
35+
{text}
36+
</a>
37+
);
38+
};

‎packages/docs/src/components/ChooseTemplate.tsx

+8-20
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,15 @@
1-
import type { Template } from "create-video";
1+
import Link from "@docusaurus/Link";
22
import { CreateVideoInternals } from "create-video";
33
import React, { useCallback, useEffect, useRef, useState } from "react";
4+
45
import { chunk } from "../helpers/chunk";
56
import { NavigateLeft, NavigateRight } from "./ArrowRight";
67
import { IconForTemplate } from "./IconForTemplate";
78
import { TemplateIcon } from "./TemplateIcon";
8-
import { TemplateModal } from "./TemplateModal";
99

1010
export const ChooseTemplate: React.FC = () => {
11-
const [modal, setModal] = useState<Template | null>(null);
12-
1311
const mobileLayout = true;
1412

15-
const onClick = useCallback((template: Template) => {
16-
setModal(template);
17-
}, []);
18-
19-
const onDismiss = useCallback(() => {
20-
setModal(null);
21-
}, []);
22-
2313
const [rightVisible, setRightVisible] = useState(true);
2414
const [leftVisible, setLeftVisible] = useState(false);
2515

@@ -66,9 +56,6 @@ export const ChooseTemplate: React.FC = () => {
6656
flexDirection: "column",
6757
}}
6858
>
69-
{modal ? (
70-
<TemplateModal selectedTemplate={modal} onDismiss={onDismiss} />
71-
) : null}
7259
<div
7360
style={{
7461
position: "relative",
@@ -100,13 +87,14 @@ export const ChooseTemplate: React.FC = () => {
10087
>
10188
{c.map((template) => {
10289
return (
103-
<TemplateIcon
90+
<Link
10491
key={template.cliId}
105-
onClick={() => onClick(template)}
106-
label={template.homePageLabel}
92+
to={`/templates/${template.cliId}`}
10793
>
108-
<IconForTemplate template={template} />
109-
</TemplateIcon>
94+
<TemplateIcon label={template.homePageLabel}>
95+
<IconForTemplate scale={1} template={template} />
96+
</TemplateIcon>
97+
</Link>
11098
);
11199
})}
112100
</div>

‎packages/docs/src/components/ExpertPage.tsx

+2-29
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { Spacer } from "../../components/layout/Spacer";
88
import { experts } from "../data/experts";
99

1010
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
11+
import { BackButton } from "./BackButton";
1112
import { Seo } from "./Seo";
1213

1314
const layout: React.CSSProperties = {
@@ -46,22 +47,6 @@ const title: React.CSSProperties = {
4647
marginBottom: 16,
4748
};
4849

49-
const backLink: React.CSSProperties = {
50-
color: "white",
51-
fontFamily: "GTPlanar",
52-
fontWeight: 500,
53-
display: "inline-flex",
54-
justifyContent: "center",
55-
alignItems: "center",
56-
};
57-
58-
const backIcon: React.CSSProperties = {
59-
height: 20,
60-
color: "white",
61-
marginRight: 15,
62-
display: "inline-block",
63-
};
64-
6550
const emailButton: React.CSSProperties = {
6651
marginBottom: 16,
6752
marginRight: 16,
@@ -138,19 +123,7 @@ export default () => {
138123
</Head>
139124
<div style={header}>
140125
<div style={layout}>
141-
<a style={backLink} href="/experts">
142-
<svg
143-
style={backIcon}
144-
xmlns="http://www.w3.org/2000/svg"
145-
viewBox="0 0 448 512"
146-
>
147-
<path
148-
fill="currentcolor"
149-
d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"
150-
/>
151-
</svg>{" "}
152-
Back to Experts
153-
</a>
126+
<BackButton link="/experts" color="white" text="Back to Experts" />
154127
<div style={headerRow}>
155128
<img style={img} src={expert.image} />
156129
<h2 className="big-title-on-desktop" style={title}>

‎packages/docs/src/components/TemplateIcon.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,9 @@ const labelStyle: React.CSSProperties = {
2727
export const TemplateIcon: React.FC<{
2828
label: string;
2929
children: React.ReactNode;
30-
onClick: () => void;
31-
}> = ({ children, label, onClick }) => {
30+
}> = ({ children, label }) => {
3231
return (
33-
<a style={outer} onClick={onClick}>
32+
<a style={outer}>
3433
<div style={icon}>{children}</div>
3534
<div style={labelStyle}>{label}</div>
3635
</a>

‎packages/docs/src/components/TemplateModal.tsx

-63
This file was deleted.

0 commit comments

Comments
 (0)