Add Svead head component (#123)

* Add Svead head component Added links to Svead, the Svelte head component for adding head metadata to your project pages * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * add Svead to readme and make screenshots * update eslint commit hook and migrate to flat config * skip eslint in ci --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Co-authored-by: Janosh Riebesell <[email protected]>
janosh · May 31, 2024 · 54d2791 · 54d2791
1 parent d896f16
commit 54d2791
Show file tree

Hide file tree

Showing 13 changed files with 122 additions and 54 deletions.
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
@@ -1,5 +1,6 @@
 ci:
   autoupdate_schedule: quarterly
+  skip: [eslint]
 
 default_stages: [commit]
 
@@ -53,20 +54,18 @@ repos:
         stages: [commit, commit-msg]
 
   - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: v9.0.0-rc.0
+    rev: v9.3.0
     hooks:
       - id: eslint
         types: [file]
-        args: [--fix]
+        args: [--fix, --config, site/eslint.config.js]
         files: \.(js|ts|svelte)$
         additional_dependencies:
           - eslint
+          - eslint-plugin-svelte
           - svelte
           - typescript
-          - eslint-plugin-svelte
-          - '@typescript-eslint/eslint-plugin'
-          - '@typescript-eslint/parser'
-          - svelte-eslint-parser
+          - typescript-eslint
 
   - repo: local
     hooks:

diff --git a/readme.md b/readme.md
@@ -714,6 +714,16 @@ Awesome examples of SvelteKit in the wild. Visit **[janosh.github.io/awesome-sve
 
    uses: [MDsveX], [GSAP], [Netlify]
 
+1. **[Svead](https://svead.pages.dev)**&nbsp;
+   [[code](https://github.com/spences10/svead)]&ensp;
+   <a href="https://github.com/spences10/svead/stargazers">
+   <img src="https://img.shields.io/github/stars/spences10/svead?logo=github" alt="GitHub stars" valign="middle">
+   </a>
+
+   Svead 🍺, a component that allows you to set head meta information, canonical, title, Twitter and Facebook Open Graph tags, and schema.org data.<br>
+
+   uses: [TypeScript], [PNPM], [Cloudflare Pages], [MDsveX], [Tailwind], [PostCSS], [DaisyUI]
+
 1. **[The Pudding](https://pudding.cool)**&nbsp;
    [[code](https://github.com/the-pudding/website)]&ensp;
    <a href="https://github.com/the-pudding/website/stargazers">
@@ -933,8 +943,8 @@ Awesome examples of SvelteKit in the wild. Visit **[janosh.github.io/awesome-sve
 [tailwind]: https://tailwindcss.com
 [testing library]: https://testing-library.com
 [three.js]: https://threejs.org
-[trpc]: https://trpc.io
 [trpc-sveltekit]: https://github.com/icflorescu/trpc-sveltekit
+[trpc]: https://trpc.io
 [turbo]: https://github.com/vercel/turbo
 [typescript]: https://typescriptlang.org
 [underscore]: https://underscorejs.org
@@ -945,6 +955,7 @@ Awesome examples of SvelteKit in the wild. Visit **[janosh.github.io/awesome-sve
 [wasm]: https://webassembly.org
 [webgl]: https://developer.mozilla.org/docs/Web/API/WebGL_API
 [ytdl-core]: https://github.com/fent/node-ytdl-core
+[cloudflare pages]: https://pages.cloudflare.com
 
 ## 🎉 Suggestions Welcome
 

diff --git a/site/.eslintrc.yml b/site/.eslintrc.yml
diff --git a/site/eslint.config.js b/site/eslint.config.js
@@ -0,0 +1,32 @@
+import svelte from 'eslint-plugin-svelte'
+import tslint from 'typescript-eslint'
+
+/** @type { import("eslint").Linter.FlatConfig[] } */
+export default [
+  ...tslint.configs.recommended,
+  ...svelte.configs[`flat/recommended`],
+  {
+    rules: {
+      '@typescript-eslint/no-unused-vars': [
+        `error`,
+        { argsIgnorePattern: `^_`, varsIgnorePattern: `^_` },
+      ],
+      '@typescript-eslint/quotes': [`error`, `backtick`, { avoidEscape: true }],
+      'svelte/no-at-html-tags': `off`,
+    },
+  },
+  {
+    languageOptions: { ecmaVersion: 2020 },
+  },
+  {
+    files: [`**/*.svelte`],
+    languageOptions: {
+      parserOptions: {
+        parser: tslint.parser,
+      },
+    },
+  },
+  {
+    ignores: [`build/`],
+  },
+]
diff --git a/site/package.json b/site/package.json
@@ -17,31 +17,30 @@
     "test": "playwright test tests/*.test.ts"
   },
   "devDependencies": {
-    "@iconify/svelte": "^3.1.6",
-    "@playwright/test": "^1.42.1",
+    "@iconify/svelte": "^4.0.2",
+    "@playwright/test": "^1.44.1",
     "@rollup/plugin-yaml": "^4.1.2",
     "@sveltejs/adapter-static": "^3.0.1",
-    "@sveltejs/kit": "^2.5.4",
-    "@sveltejs/vite-plugin-svelte": "^3.0.2",
-    "@typescript-eslint/eslint-plugin": "^7.3.1",
-    "@typescript-eslint/parser": "^7.3.1",
+    "@sveltejs/kit": "^2.5.10",
+    "@sveltejs/vite-plugin-svelte": "^3.1.1",
     "dotenv": "^16.4.5",
-    "eslint": "^8.57.0",
-    "eslint-plugin-svelte": "^2.35.1",
+    "eslint": "^9.3.0",
+    "eslint-plugin-svelte": "^2.39.0",
     "js-yaml": "^4.1.0",
-    "marked": "^12.0.1",
+    "marked": "^12.0.2",
     "prettier": "^3.2.5",
-    "prettier-plugin-svelte": "^3.2.2",
-    "puppeteer": "^22.6.0",
-    "sharp": "^0.33.3",
-    "svelte": "4.2.12",
-    "svelte-check": "^3.6.8",
-    "svelte-multiselect": "^10.2.0",
-    "svelte-preprocess": "^5.1.3",
+    "prettier-plugin-svelte": "^3.2.3",
+    "puppeteer": "^22.10.0",
+    "sharp": "^0.33.4",
+    "svelte": "4.2.17",
+    "svelte-check": "^3.8.0",
+    "svelte-multiselect": "^10.3.0",
+    "svelte-preprocess": "^5.1.4",
     "svelte-zoo": "^0.4.10",
-    "svelte2tsx": "^0.7.5",
-    "typescript": "5.4.3",
-    "vite": "^5.2.5"
+    "svelte2tsx": "^0.7.9",
+    "typescript": "5.4.5",
+    "typescript-eslint": "^7.11.0",
+    "vite": "^5.2.12"
   },
   "keywords": [
     "sveltekit",

diff --git a/site/src/sites.yml b/site/src/sites.yml
@@ -3012,3 +3012,39 @@
       name: martin
       location: France
       company: null
+- title: Svead
+  url: https://svead.pages.dev
+  repo: https://github.com/spences10/svead
+  description: >-
+    Svead 🍺, a component that allows you to set head meta information,
+    canonical, title, Twitter and Facebook Open Graph tags, and schema.org data.
+  uses:
+    - TypeScript
+    - PNPM
+    - Cloudflare Pages
+    - MDsveX
+    - Tailwind
+    - PostCSS
+    - DaisyUI
+  tags:
+    - component library
+    - open source
+  date_created: 2022-05-15T00:00:00.000Z
+  date_added: 2024-05-31T00:00:00.000Z
+  slug: svead
+  repo_stars: 59
+  contributors:
+    - github: spences10
+      twitter: spences10
+      url: https://scottspence.com
+      avatar: https://avatars.githubusercontent.com/u/234708?v=4
+      name: Scott Spence
+      location: London, United Kingdom
+      company: '@XtendOps-developers'
+    - github: renovate-bot
+      twitter: renovatebot
+      url: https://www.mend.io/free-developer-tools/renovate/
+      avatar: https://avatars.githubusercontent.com/u/25180681?v=4
+      name: Mend Renovate
+      location: null
+      company: '@mend'
diff --git a/site/src/tasks/fetch-github-metadata.ts b/site/src/tasks/fetch-github-metadata.ts
@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 /* This file parses sites.yml, fetches GH metadata like contributors
 and stars for each site, then writes the results to site/src/sites.yml. */
 

diff --git a/site/src/tasks/screenshots.ts b/site/src/tasks/screenshots.ts
@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 /* This file parses sites.yml, generates low+hi-res screenshots for each site,
 saves them as WebP to site/static/screenshots/ and compresses them. */
 

diff --git a/site/src/tasks/update-readme.ts b/site/src/tasks/update-readme.ts
@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 /* This file parses sites.yml, then updates the list of sites in the readme. */
 
 import fs from 'fs'

diff --git a/site/static/screenshots/svead.avif b/site/static/screenshots/svead.avif
diff --git a/site/static/screenshots/svead.small.avif b/site/static/screenshots/svead.small.avif
diff --git a/sites.yml b/sites.yml
@@ -892,3 +892,21 @@
   tags: [photos, photo-gallery, self-hosted, backup-tool, media]
   date_created: 2022-02-03
   date_added: 2024-01-22
+
+- title: Svead
+  url: https://svead.pages.dev
+  repo: https://github.com/spences10/svead
+  description:
+    Svead 🍺, a component that allows you to set head meta information, canonical, title,
+    Twitter and Facebook Open Graph tags, and schema.org data.
+  uses:
+    - TypeScript
+    - PNPM
+    - Cloudflare Pages
+    - MDsveX
+    - Tailwind
+    - PostCSS
+    - DaisyUI
+  tags: [component library]
+  date_created: 2022-05-15
+  date_added: 2024-05-31
diff --git a/tools.yml b/tools.yml
@@ -4,6 +4,7 @@ aws: https://aws.amazon.com
 babel: https://babeljs.io
 changesets: https://github.com/changesets/changesets
 chart.js: https://chartjs.org
+cloudflare pages: https://pages.cloudflare.com
 cloudflare: https://cloudflare.com
 cloudinary: https://cloudinary.com
 codemirror: https://codemirror.net