Skip to content

Commit

Permalink
feat: add compare frameworks pages and footer
Browse files Browse the repository at this point in the history
  • Loading branch information
@matschik
matschik committed Mar 4, 2024
2 parents fac783d + 8a3234f commit a7df4a3
Show file tree
Hide file tree
Showing 11 changed files with 2,652 additions and 5,231 deletions.
47 changes: 47 additions & 0 deletions build/template/footer.eta
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<footer class="bg-gray-900 pb-20">
<h2 id="footer-heading" class="sr-only">Footer</h2>
<div class="mx-auto max-w-7xl px-6 pb-8 pt-16 sm:pt-24 lg:px-8 lg:pt-32">
<div class="xl:grid xl:grid-cols-3 xl:gap-8">
<div class="space-y-8">
<a class="font-semibold text-xl flex items-center space-x-3" href="/">
<img src="/popper.svg" alt="logo" class="size-7" />
<span>Component party</span>
</a>
<p class="text-sm leading-6 text-gray-300">
Web component JavaScript frameworks overview by their syntax and
features
</p>
<div class="flex space-x-6">
<a href="https://github.com/matschik/component-party.dev" class="text-gray-500 hover:text-gray-400">
<span class="sr-only">GitHub</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
<div class="mt-16 grid grid-cols-1 sm:grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
<% for (const navigation of it.navigations) { %>
<div class="md:grid md:gap-8">
<aside>
<h3 class="text-sm font-semibold leading-6 text-white">
<%= navigation.title %>
</h3>
<nav>
<ul role="list" class="mt-2 space-y-2">
<% for (const link of navigation.links) { %>
<li>
<a href="<%= link.url %>" class="text-sm leading-6 text-gray-300 hover:text-white">
<%= link.name %>
</a>
</li>
<% } %>
</ul>
</nav>
</aside>
</div>
<% } %>
</div>
</div>
</div>
</footer>
43 changes: 41 additions & 2 deletions frameworks.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,12 @@ function sortAllFilenames(files, filenamesSorted) {
].filter(Boolean);
}

export default [
const frameworks = [
{
id: "svelte4",
title: "Svelte 4",
frameworkName: "Svelte",
isCurrentVersion: true,
img: "framework/svelte.svg",
eslint: {
files: ["**/svelte4/*.svelte"],
Expand All @@ -28,6 +30,8 @@ export default [
{
id: "react",
title: "React",
frameworkName: "React",
isCurrentVersion: true,
img: "framework/react.svg",
eslint: {
files: ["**/react/*.jsx", "**/react/*.tsx"],
Expand All @@ -53,6 +57,8 @@ export default [
{
id: "vue3",
title: "Vue 3",
frameworkName: "Vue",
isCurrentVersion: true,
img: "framework/vue.svg",
eslint: {
files: ["**/vue3/*.vue"],
Expand All @@ -76,6 +82,8 @@ export default [
{
id: "angular",
title: "Angular",
frameworkName: "Angular",
isCurrentVersion: true,
img: "framework/angular.svg",
eslint: [
{
Expand Down Expand Up @@ -131,6 +139,8 @@ export default [
{
id: "lit",
title: "Lit",
frameworkName: "Lit",
isCurrentVersion: true,
img: "framework/lit.svg",
eslint: {
files: ["**/lit/**"],
Expand All @@ -149,6 +159,8 @@ export default [
{
id: "vue2",
title: "Vue 2",
frameworkName: "Vue",
isCurrentVersion: false,
img: "framework/vue.svg",
eslint: {
files: ["**/vue2/*.vue"],
Expand All @@ -169,6 +181,8 @@ export default [
{
id: "ember",
title: "Ember",
frameworkName: "Ember",
isCurrentVersion: true,
img: "framework/ember.svg",
eslint: {
files: ["**/ember/**"],
Expand All @@ -186,7 +200,9 @@ export default [
},
{
id: "solid",
title: "SolidJS",
title: "Solid.js",
frameworkName: "Solid",
isCurrentVersion: true,
img: "framework/solid.svg",
eslint: {
files: ["**/solid/*.jsx"],
Expand All @@ -204,6 +220,8 @@ export default [
{
id: "alpine",
title: "Alpine",
frameworkName: "Alpine",
isCurrentVersion: true,
img: "framework/alpine.svg",
eslint: {
files: ["**/alpine/**"],
Expand All @@ -220,6 +238,8 @@ export default [
{
id: "mithril",
title: "Mithril",
frameworkName: "Mithril",
isCurrentVersion: true,
img: "framework/mithril.svg",
eslint: {
env: {
Expand All @@ -241,6 +261,8 @@ export default [
{
id: "aurelia2",
title: "Aurelia 2",
frameworkName: "Aurelia",
isCurrentVersion: true,
img: "framework/aurelia.svg",
eslint: {
env: {
Expand Down Expand Up @@ -269,6 +291,8 @@ export default [
{
id: "qwik",
title: "Qwik",
frameworkName: "Qwik",
isCurrentVersion: true,
img: "framework/qwik.svg",
eslint: {
env: {
Expand Down Expand Up @@ -299,6 +323,8 @@ export default [
{
id: "marko",
title: "Marko",
frameworkName: "Marko",
isCurrentVersion: true,
img: "framework/marko.svg",
eslint: {
files: ["!**"], // Marko’s linter/prettyprinter doesn’t use eslint
Expand All @@ -314,6 +340,8 @@ export default [
{
id: "aurelia1",
title: "Aurelia 1",
frameworkName: "Aurelia",
isCurrentVersion: false,
img: "framework/aurelia.svg",
eslint: {
env: {
Expand Down Expand Up @@ -341,6 +369,8 @@ export default [
{
id: "svelte5",
title: "Svelte 5 (preview)",
frameworkName: "Svelte",
isCurrentVersion: false,
img: "framework/svelte.svg",
eslint: {
files: ["**/TODO-THIS-IS-DISABLED-svelte5/*.svelte"],
Expand All @@ -355,3 +385,12 @@ export default [
mainPackageName: "svelte",
},
];

export function matchFrameworkId(id){
return frameworks.find((framework) =>
framework.id === id ||
(framework.isCurrentVersion &&
framework.frameworkName.toLowerCase() === id))
}

export default frameworks;
44 changes: 15 additions & 29 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta name="viewport" content="width=device-width" />
<title>Component Party</title>
<title><%= it.title %></title>
<link rel="icon" href="/favicon.png" />
<link
rel="preload"
Expand All @@ -12,45 +12,30 @@
crossorigin=""
/>

<meta
name="description"
content="Web component JS frameworks overview by their syntax and features: <%= frameworkList %>"
/>
<!-- Primary Meta Tags -->
<meta name="title" content="Component Party" />
<meta name="title" content="<%= it.title %>" />
<meta name="description" content="<%= it.description %>" />

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://component-party.dev/" />
<meta property="og:title" content="Component Party" />
<meta
property="og:description"
content="Web component JS frameworks overview by their syntax and features: <%= frameworkList %>"
/>
<meta
property="og:image"
content="https://component-party.dev/banner2.png"
/>
<meta property="og:url" content="<%= it.url %>" />
<meta property="og:title" content="<%= it.title %>" />
<meta property="og:description" content="<%= it.description %>" />
<meta property="og:image" content="<%= it.image %>" />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://component-party.dev/" />
<meta property="twitter:title" content="Component Party" />
<meta
property="twitter:description"
content="Web component JS frameworks overview by their syntax and features: <%= frameworkList %>"
/>
<meta
property="twitter:image"
content="https://component-party.dev/banner2.png"
/>
<meta property="twitter:url" content="<%= it.url %>" />
<meta property="twitter:title" content="<%= it.title %>" />
<meta property="twitter:description" content="<%= it.description %>" />
<meta property="twitter:image" content="<%= it.image %>" />
<style>
@font-face {
font-family: "Mona Sans";
src:
url("/font/Mona-Sans.woff2") format("woff2 supports variations"),
url("/font/Mona-Sans.woff2") format("woff2-variations");
font-weight: 400 800;
/* font-weight: 400 500 600 700 800; */
font-weight: 400 500 600 700 800;
font-stretch: 75% 125%;
font-display: swap;
}
Expand All @@ -62,7 +47,7 @@
}

html {
font-family: "Mona Sans" !important;
font-family: "Mona Sans";
background-color: var(--bg-color);
color: #fff;
}
Expand All @@ -71,6 +56,7 @@

<body>
<div id="app"></div>
<!--template:footer-->
<script type="module" src="/src/main.js"></script>
</body>
</html>
4 changes: 3 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@
"@veljs/svelte": "^0.1.11",
"classnames": "^2.5.1",
"eslint-plugin-svelte": "^2.35.1",
"heroiconsvelte": "^1.0.2"
"heroiconsvelte": "^1.0.2",
"svelte-router-spa": "^7.0.1"
},
"devDependencies": {
"@angular-eslint/eslint-plugin": "^17.2.1",
Expand Down Expand Up @@ -54,6 +55,7 @@
"eslint-plugin-solid": "^0.13.1",
"eslint-plugin-vue": "^9.22.0",
"esm": "^3.2.25",
"eta": "^3.2.0",
"folder-hash": "^4.0.4",
"husky": "^9.0.11",
"lint-staged": "^15.2.2",
Expand Down
Loading

0 comments on commit a7df4a3

Please sign in to comment.