From 383abce65d6750d404d5a3a49c24e4033983b4e7 Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Thu, 20 Feb 2025 20:15:56 +0500 Subject: [PATCH] feat/generator: start working in the web page. Add data caching --- generate/build.tsx | 67 ++++++++++++++++-------- generate/data/items.json | 1 + generate/data/tags.json | 1 + generate/static/css/tailwind.css | 88 ++++++++++++++++++++++++++++++++ generate/static_dev/input.css | 7 +++ generate/templates/Base.tsx | 16 ++++-- generate/templates/Header.tsx | 10 ++++ 7 files changed, 165 insertions(+), 25 deletions(-) create mode 100644 generate/data/items.json create mode 100644 generate/data/tags.json create mode 100644 generate/templates/Header.tsx diff --git a/generate/build.tsx b/generate/build.tsx index 2b8ccb1..0a85bad 100644 --- a/generate/build.tsx +++ b/generate/build.tsx @@ -6,6 +6,7 @@ import { renderToString } from "react-dom/server"; import fs from "fs"; import exec from "child_process"; import Base from "./templates/Base"; +import Header from "./templates/Header"; const log = new Log(); @@ -40,8 +41,10 @@ interface Image { date: number; } -const tags: string[] = []; -const items: Image[] = []; +type Years = Record; + +let tags: string[] = []; +let items: Years = {}; function addTag(tag: string) { if (tags.includes(tag)) { @@ -50,31 +53,51 @@ function addTag(tag: string) { tags.push(tag); } -await db - .collection(process.env.FIREBASE_COLLECTION as string) - .get() - .then((snapshot) => { - snapshot.forEach((doc) => { - const data = doc.data(); - data.tags.forEach((tag: string) => { - addTag(tag); - }); - items.push({ - id: doc.id, - alt: data.alt, - tags: data.tags, - urls: data.urls, - mimetype: data.mimetype, - width: data.width, - height: data.height, - date: data.date, +if ( + !fs.existsSync("data") || + !fs.existsSync("data/tags.json") || + !fs.existsSync("data/items.json") +) { + log.warn("data/tags.json or data/items.json does not exist"); + await db + .collection(process.env.FIREBASE_COLLECTION as string) + .get() + .then((snapshot) => { + snapshot.forEach((doc) => { + const data = doc.data(); + data.tags.forEach((tag: string) => { + addTag(tag); + }); + + const year: string = new Date(data.date).getFullYear().toString(); + if (!(year in items)) { + items[year] = []; + } + + items[year].push({ + id: doc.id, + alt: data.alt, + tags: data.tags, + urls: data.urls, + mimetype: data.mimetype, + width: data.width, + height: data.height, + date: data.date, + }); }); }); - }); + if (!fs.existsSync("data")) fs.mkdirSync("data"); + fs.writeFileSync("data/tags.json", JSON.stringify(tags)); + fs.writeFileSync("data/items.json", JSON.stringify(items)); +} else { + log.warn("using cached data"); + tags = JSON.parse(fs.readFileSync("data/tags.json", "utf-8")); + items = JSON.parse(fs.readFileSync("data/items.json", "utf-8")); +} const html = renderToString( -

Paragraph.

+
); diff --git a/generate/data/items.json b/generate/data/items.json new file mode 100644 index 0000000..dbbbcea --- /dev/null +++ b/generate/data/items.json @@ -0,0 +1 @@ +{"2021":[{"id":"IMG_20210324_205508.jpg","alt":"Sleeping kitten kat","tags":["cat","night","phone","weeee","tag"],"urls":[{"name":"example","value":"https://example.com"}],"mimetype":"image/jpeg","width":2160,"height":3840,"date":1612897200000}],"2025":[{"id":"83_7d3519266ea930d5.jpg","alt":"Protogens are in the park","tags":["protogen","tag"],"urls":[{"name":"example","value":"https://example.com"}],"mimetype":"image/jpeg","width":1632,"height":987,"date":1739818800000},{"id":"mohamed-elsayed-DWpR-BpKlw0-unsplash.jpg","alt":"Grumpy red panda in the snow","tags":["red_panda","testimage","snow","winter"],"urls":[],"mimetype":"image/jpeg","width":3386,"height":4233,"date":1739991600000}]} \ No newline at end of file diff --git a/generate/data/tags.json b/generate/data/tags.json new file mode 100644 index 0000000..f3539e6 --- /dev/null +++ b/generate/data/tags.json @@ -0,0 +1 @@ +["protogen","tag","cat","night","phone","weeee","red_panda","testimage","snow","winter"] \ No newline at end of file diff --git a/generate/static/css/tailwind.css b/generate/static/css/tailwind.css index 9b452a7..8f42d25 100644 --- a/generate/static/css/tailwind.css +++ b/generate/static/css/tailwind.css @@ -527,9 +527,33 @@ .static { position: static; } + .container { + width: 100%; + @media (width >= 40rem) { + max-width: 40rem; + } + @media (width >= 48rem) { + max-width: 48rem; + } + @media (width >= 64rem) { + max-width: 64rem; + } + @media (width >= 80rem) { + max-width: 80rem; + } + @media (width >= 96rem) { + max-width: 96rem; + } + } + .mx-auto { + margin-inline: auto; + } .block { display: block; } + .flex { + display: flex; + } .inline-flex { display: inline-flex; } @@ -539,6 +563,15 @@ .table { display: table; } + .h-16 { + height: calc(var(--spacing) * 16); + } + .w-16 { + width: calc(var(--spacing) * 16); + } + .w-full { + width: 100%; + } .border-collapse { border-collapse: collapse; } @@ -548,10 +581,43 @@ .resize { resize: both; } + .items-center { + align-items: center; + } + .gap-4 { + gap: calc(var(--spacing) * 4); + } + .rounded-lg { + border-radius: var(--radius-lg); + } + .rounded-b-lg { + border-bottom-right-radius: var(--radius-lg); + border-bottom-left-radius: var(--radius-lg); + } .border { border-style: var(--tw-border-style); border-width: 1px; } + .bg-\[\#121B2C\] { + background-color: #121B2C; + } + .bg-\[\#FF478B\] { + background-color: #FF478B; + } + .p-4 { + padding: calc(var(--spacing) * 4); + } + .text-2xl { + font-size: var(--text-2xl); + line-height: var(--tw-leading, var(--text-2xl--line-height)); + } + .font-bold { + --tw-font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-bold); + } + .text-white { + color: var(--color-white); + } .underline { text-decoration-line: underline; } @@ -559,6 +625,24 @@ outline-style: var(--tw-outline-style); outline-width: 1px; } + .xl\:text-3xl { + @media (width >= 80rem) { + font-size: var(--text-3xl); + line-height: var(--tw-leading, var(--text-3xl--line-height)); + } + } + .\32 xl\:text-4xl { + @media (width >= 96rem) { + font-size: var(--text-4xl); + line-height: var(--tw-leading, var(--text-4xl--line-height)); + } + } +} +.inter-semibold { + font-family: "Inter", serif; + font-optical-sizing: auto; + font-weight: 600; + font-style: normal; } @keyframes spin { to { @@ -616,6 +700,10 @@ inherits: false; initial-value: solid; } +@property --tw-font-weight { + syntax: "*"; + inherits: false; +} @property --tw-outline-style { syntax: "*"; inherits: false; diff --git a/generate/static_dev/input.css b/generate/static_dev/input.css index f1d8c73..c29fd2c 100644 --- a/generate/static_dev/input.css +++ b/generate/static_dev/input.css @@ -1 +1,8 @@ @import "tailwindcss"; + +.inter-semibold { + font-family: "Inter", serif; + font-optical-sizing: auto; + font-weight: 600; + font-style: normal; +} \ No newline at end of file diff --git a/generate/templates/Base.tsx b/generate/templates/Base.tsx index 6687d8f..4fe4c70 100644 --- a/generate/templates/Base.tsx +++ b/generate/templates/Base.tsx @@ -10,11 +10,21 @@ export default function Base({ children, isDev }: BaseProps) { Radiquum/Photos + {isDev ? : ""} + + + + - - {children} - + {children} ); } diff --git a/generate/templates/Header.tsx b/generate/templates/Header.tsx new file mode 100644 index 0000000..52477d9 --- /dev/null +++ b/generate/templates/Header.tsx @@ -0,0 +1,10 @@ +export default function Header() { + return ( +
+
+ +

RADIQUUM/PHOTOS

+
+
+ ); +}