From beb83a984910ac85bdab3864353f39b34931bdaf Mon Sep 17 00:00:00 2001 From: Cyper Date: Sun, 27 Jul 2025 18:07:57 -0400 Subject: [PATCH] feat: Reworked project layout to use liquid + components Made project make heavier use of component-based rendering and broke parts of layout into separate files for making future layout files easier and less redundant --- public/css/style.css | 9 + src/_data/metadata.js | 19 +- src/_includes/components/footer.liquid | 46 ++++ src/_includes/components/meta-tags.liquid | 29 +++ src/_includes/components/navbars.liquid | 64 ++++++ src/_includes/components/scripts.liquid | 2 + src/_includes/layout.html | 248 ---------------------- src/_includes/layout.liquid | 72 +++++++ src/about.liquid | 8 + src/index.html | 62 +++++- src/posts.html | 9 - src/posts.liquid | 11 + src/posts/posts.json | 2 +- 13 files changed, 317 insertions(+), 264 deletions(-) create mode 100644 src/_includes/components/footer.liquid create mode 100644 src/_includes/components/meta-tags.liquid create mode 100644 src/_includes/components/navbars.liquid create mode 100644 src/_includes/components/scripts.liquid delete mode 100644 src/_includes/layout.html create mode 100644 src/_includes/layout.liquid create mode 100644 src/about.liquid delete mode 100644 src/posts.html create mode 100644 src/posts.liquid diff --git a/public/css/style.css b/public/css/style.css index 592ebf5..f46d965 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -314,6 +314,15 @@ footer ul li:last-child { text-align: center; margin: 1rem 0 0 0; } +.footer-links ul li a { + display: inline-flex; + align-items: center; + gap: 0.25rem; +} +.footer-links ul li a ion-icon { + position: relative; + top: 0.05em; +} .footer-links > * { flex-grow: 1; } diff --git a/src/_data/metadata.js b/src/_data/metadata.js index 84494de..43ff4ac 100644 --- a/src/_data/metadata.js +++ b/src/_data/metadata.js @@ -8,11 +8,28 @@ const formattedDate = date.toLocaleDateString('en-GB', { export default { author: { name: "Cyper", - url: "https://cyper.cc" + socials: [ + { name: "Twitter", url: "https://twitter.com/Cyperita", icon: "logo-twitter" }, + { name: "YouTube", url: "https://www.youtube.com/@Cyperita", icon: "logo-youtube" }, + { name: "TikTok", url: "https://www.tiktok.com/@cyperita", icon: "logo-tiktok" }, + { name: "Instagram", url: "https://www.instagram.com/cyperita/", icon: "logo-instagram" }, + { name: "RSS", url: "https://cy.cyper.cc/rss.xml", icon: "logo-rss" }, + ], + + sites: [ + { name: "Main Site", url: "https://cy.cyper.cc", icon: "home-sharp" }, + { name: "Gitea", url: "https://gitea.cyper.cc", icon: "code-slash-sharp" }, + ], + + // TODO: email / newsletter sign up? + consumables: [ + { name: "RSS Feed", url: "https://cy.cyper.cc/rss.xml", icon: "logo-rss" }, + ] }, title: "Cy-by-Side", url: "https://cy.cyper.cc/", + rss: "https://cy.cyper.cc/rss.xml", language: "en", description: "Cy by Side with Cyper: Tangents, Tech, and Thoughtful Takes.", date: formattedDate, diff --git a/src/_includes/components/footer.liquid b/src/_includes/components/footer.liquid new file mode 100644 index 0000000..56c432c --- /dev/null +++ b/src/_includes/components/footer.liquid @@ -0,0 +1,46 @@ +
+
+

Cyper Catalog

+
+
+

Websites

+ +
+
+

Consumables

+ +
+
+
+
+

{{ metadata.title }}

+

by {{ metadata.author.name }}

+

Connect with me!

+ +
+ {%- for social in metadata.author.socials -%} + + + + {%- endfor -%} +
+
+
\ No newline at end of file diff --git a/src/_includes/components/meta-tags.liquid b/src/_includes/components/meta-tags.liquid new file mode 100644 index 0000000..87f9bb0 --- /dev/null +++ b/src/_includes/components/meta-tags.liquid @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/_includes/components/navbars.liquid b/src/_includes/components/navbars.liquid new file mode 100644 index 0000000..6e37ce3 --- /dev/null +++ b/src/_includes/components/navbars.liquid @@ -0,0 +1,64 @@ + +