From 934486339f5d3b88057204042c127b2ae596040b Mon Sep 17 00:00:00 2001 From: Mathieu Schimmerling Date: Mon, 4 Mar 2024 14:19:23 +0100 Subject: [PATCH 1/3] feat(app): add seo with more html pages --- build/include/footer.eta | 52 + frameworks.mjs | 17 +- index.html | 44 +- package.json | 1 + pnpm-lock.yaml | 6703 +++++++----------------- src/App.svelte | 1 - src/components/GithubStarButton.svelte | 8 +- src/components/Header.svelte | 4 +- tailwind.config.cjs | 2 +- vite.config.js | 128 +- 10 files changed, 2127 insertions(+), 4833 deletions(-) create mode 100644 build/include/footer.eta diff --git a/build/include/footer.eta b/build/include/footer.eta new file mode 100644 index 00000000..71524ad2 --- /dev/null +++ b/build/include/footer.eta @@ -0,0 +1,52 @@ + \ No newline at end of file diff --git a/frameworks.mjs b/frameworks.mjs index 6c69b727..41e7e168 100644 --- a/frameworks.mjs +++ b/frameworks.mjs @@ -12,6 +12,7 @@ export default [ { id: "svelte4", title: "Svelte 4", + frameworkName: "Svelte", img: "framework/svelte.svg", eslint: { files: ["**/svelte4/*.svelte"], @@ -28,6 +29,7 @@ export default [ { id: "react", title: "React", + frameworkName: "React", img: "framework/react.svg", eslint: { files: ["**/react/*.jsx", "**/react/*.tsx"], @@ -53,6 +55,7 @@ export default [ { id: "vue3", title: "Vue 3", + frameworkName: "Vue", img: "framework/vue.svg", eslint: { files: ["**/vue3/*.vue"], @@ -76,6 +79,7 @@ export default [ { id: "angular", title: "Angular", + frameworkName: "Angular", img: "framework/angular.svg", eslint: [ { @@ -131,6 +135,7 @@ export default [ { id: "lit", title: "Lit", + frameworkName: "Lit", img: "framework/lit.svg", eslint: { files: ["**/lit/**"], @@ -149,6 +154,7 @@ export default [ { id: "vue2", title: "Vue 2", + frameworkName: "Vue", img: "framework/vue.svg", eslint: { files: ["**/vue2/*.vue"], @@ -169,6 +175,7 @@ export default [ { id: "ember", title: "Ember", + frameworkName: "Ember", img: "framework/ember.svg", eslint: { files: ["**/ember/**"], @@ -186,7 +193,8 @@ export default [ }, { id: "solid", - title: "SolidJS", + title: "Solid.js", + frameworkName: "Solid", img: "framework/solid.svg", eslint: { files: ["**/solid/*.jsx"], @@ -204,6 +212,7 @@ export default [ { id: "alpine", title: "Alpine", + frameworkName: "Alpine", img: "framework/alpine.svg", eslint: { files: ["**/alpine/**"], @@ -220,6 +229,7 @@ export default [ { id: "mithril", title: "Mithril", + frameworkName: "Mithril", img: "framework/mithril.svg", eslint: { env: { @@ -241,6 +251,7 @@ export default [ { id: "aurelia2", title: "Aurelia 2", + frameworkName: "Aurelia", img: "framework/aurelia.svg", eslint: { env: { @@ -269,6 +280,7 @@ export default [ { id: "qwik", title: "Qwik", + frameworkName: "Qwik", img: "framework/qwik.svg", eslint: { env: { @@ -299,6 +311,7 @@ export default [ { id: "marko", title: "Marko", + frameworkName: "Marko", img: "framework/marko.svg", eslint: { files: ["!**"], // Marko’s linter/prettyprinter doesn’t use eslint @@ -314,6 +327,7 @@ export default [ { id: "aurelia1", title: "Aurelia 1", + frameworkName: "Aurelia", img: "framework/aurelia.svg", eslint: { env: { @@ -341,6 +355,7 @@ export default [ { id: "svelte5", title: "Svelte 5 (preview)", + frameworkName: "Svelte", img: "framework/svelte.svg", eslint: { files: ["**/TODO-THIS-IS-DISABLED-svelte5/*.svelte"], diff --git a/index.html b/index.html index 6e50796d..9b0b3043 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - Component Party + <%= it.title %> - - + + + - - - - + + + + - - - - + + + + + diff --git a/src/Index.svelte b/src/Index.svelte new file mode 100644 index 00000000..638ebf0f --- /dev/null +++ b/src/Index.svelte @@ -0,0 +1,453 @@ + + + + +
+ +
+
+ + diff --git a/vite.config.js b/vite.config.js index d793676f..37029cfd 100644 --- a/vite.config.js +++ b/vite.config.js @@ -7,6 +7,8 @@ import { Eta } from "eta"; import FRAMEWORKS from "./frameworks.mjs"; import pluginGenerateFrameworkContent from "./build/generateContentVitePlugin.js"; +// @TODO: sitemap + const footerNavigation = [ { title: "Most Popular Frameworks", @@ -33,24 +35,24 @@ const footerNavigation = [ { title: "Comparing Legacy version & Current Version", links: [ - { name: "Vue 2 vs. Vue 3", url: "/compare/vue-2-vs-vue-3" }, + { name: "Vue 2 vs. Vue 3", url: "/compare/vue2-vs-vue3" }, { name: "Aurelia 1 vs. Aurelia 2", - url: "/compare/aurelia-1-vs-aurelia-2", + url: "/compare/aurelia1-vs-aurelia2", }, ], }, { title: "Comparing Current Version & Upcoming Version", links: [ - { name: "Svelte 4 vs. Svelte 5", url: "/compare/svelte-4-vs-svelte-5" }, + { name: "Svelte 4 vs. Svelte 5", url: "/compare/svelte4-vs-svelte5" }, ], }, ]; const footerLinks = footerNavigation.map((n) => n.links).flat(); -const sharedTemplateData = { +const templateDataDefaults = { title: "Component Party", url: "https://component-party.dev/", description: `Web component JS frameworks overview by their syntax and features: ${FRAMEWORKS.map((f) => f.title).join(", ")}`, @@ -67,14 +69,14 @@ export default defineConfig({ outputPath: `${link.url}.html`, template: "dist/index.html", templateData: { - ...sharedTemplateData, - title: `${link.name} - ${sharedTemplateData.title}`, + ...templateDataDefaults, + title: `${link.name} - ${templateDataDefaults.title}`, }, })), { outputPath: "index.html", template: "dist/index.html", - templateData: sharedTemplateData, + templateData: templateDataDefaults, }, ]), ], @@ -119,7 +121,11 @@ async function generateHtmlPagesPlugin(pages) { const matchedPage = pages.find( (page) => ctx.originalUrl === filePathToUrl(page.outputPath) ); - html = htmlTransform.render(html, matchedPage.templateData); + if (matchedPage) { + html = htmlTransform.render(html, matchedPage.templateData); + } else { + html = htmlTransform.render(html, templateDataDefaults); + } } return html; },