Merge branch 'main' into 100-copy-colors-to-clipboard

* main:
  Automated dependency upgrades
  Automated dependency upgrades
  Bump actions/checkout from 3 to 4
  Automated dependency upgrades
  only one version of vite at a time
  Automated dependency upgrades
  Pin back vitest
  Automated dependency upgrades
  pin back vitest for now
  Automated dependency upgrades
  review
  add linkedin and color js links
  Automated dependency upgrades

.github/workflows/test.yml

@@ -14,7 +14,7 @@ jobs:
     name: Build
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: actions/setup-node@v3
         with:
           node-version-file: .nvmrc
@@ -34,7 +34,7 @@ jobs:
     runs-on: ubuntu-latest
     needs: build
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: actions/setup-node@v3
         with:
           node-version-file: .nvmrc
@@ -54,7 +54,7 @@ jobs:
     runs-on: ubuntu-latest
     needs: build
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: actions/setup-node@v3
         with:
           node-version-file: .nvmrc

.github/workflows/upgrade-deps.yml

@@ -13,7 +13,7 @@ jobs:
     env:
       BRANCH_NAME: auto-dependency-upgrades
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           # Use a separate key so the resulting PR also runs GH Actions
           # https://github.com/peter-evans/create-pull-request/blob/main/docs/concepts-guidelines.md#triggering-further-workflow-runs

package.json

@@ -42,46 +42,46 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^2.1.0",
-    "@sveltejs/kit": "^1.22.6",
-    "@testing-library/jest-dom": "^6.0.0",
+    "@sveltejs/kit": "^1.25.1",
+    "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/svelte": "^4.0.3",
-    "@types/jest": "^29.5.3",
-    "@types/lodash": "^4.14.197",
+    "@types/jest": "^29.5.5",
+    "@types/lodash": "^4.14.199",
     "@types/node": "*",
-    "@typescript-eslint/eslint-plugin": "^6.3.0",
-    "@typescript-eslint/parser": "^6.3.0",
-    "@vitest/coverage-v8": "^0.34.1",
+    "@typescript-eslint/eslint-plugin": "^6.7.2",
+    "@typescript-eslint/parser": "^6.7.2",
+    "@vitest/coverage-v8": "^0.34.5",
     "chokidar-cli": "^3.0.0",
-    "eslint": "^8.47.0",
+    "eslint": "^8.50.0",
     "eslint-config-prettier": "^9.0.0",
-    "eslint-import-resolver-typescript": "^3.6.0",
-    "eslint-plugin-import": "^2.28.0",
-    "eslint-plugin-jest": "^27.2.3",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jest": "^27.4.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
-    "eslint-plugin-svelte": "^2.32.4",
+    "eslint-plugin-svelte": "^2.33.2",
     "jsdom": "^22.1.0",
     "lodash": "^4.17.21",
     "mocha": "^10.2.0",
     "mockdate": "^3.0.5",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.27",
-    "prettier": "^3.0.1",
+    "postcss": "^8.4.30",
+    "prettier": "^3.0.3",
     "prettier-plugin-svelte": "^3.0.3",
-    "sass": "^1.65.1",
+    "sass": "^1.68.0",
     "sass-true": "^7.0.0",
     "sassdoc": "^2.7.4",
     "sassdoc-theme-herman": "^5.0.1",
-    "stylelint": "^15.10.2",
-    "stylelint-config-standard-scss": "^10.0.0",
-    "svelte": "^4.2.0",
-    "svelte-check": "^3.5.0",
+    "stylelint": "^15.10.3",
+    "stylelint-config-standard-scss": "^11.0.0",
+    "svelte": "^4.2.1",
+    "svelte-check": "^3.5.2",
     "ts-node": "^10.9.1",
-    "typescript": "^5.1.6",
+    "typescript": "^5.2.2",
     "vite": "^4.4.9",
-    "vitest": "0.33.0"
+    "vitest": "^0.34.5"
   },
   "resolutions": {
-    "tslib": ">=2"
+    "vite": "<5"
   },
   "yarn-upgrade-all": {
     "ignore": [

src/lib/components/Footer.svelte

@@ -9,12 +9,14 @@
 
 <footer data-layout="footer">
   <span>
-    &copy; {start}{year > start ? `–${year}` : ''} OddBird.
+    &copy; {start}{year > start ? `–${year}` : ''} OddBird. Built with <ExternalLink
+      href="https://colorjs.io/">Color.js</ExternalLink
+    >.
   </span>
   <ul data-nav="social" data-list="inline">
     {#each SOCIAL_LINKS as { name, icon, href }}
       <li>
-        <ExternalLink {href} showNewTabIcon={false}>
+        <ExternalLink {href} showNewTabIcon={false} title={name}>
           <Icon name={icon} />
           <span class="sr-only">{name}</span></ExternalLink
         >

src/lib/components/util/ExternalLink.svelte

@@ -5,7 +5,7 @@
   export let showNewTabIcon = true;
 </script>
 
-<a {href} target="_blank" rel="noopener noreferrer"
+<a {href} target="_blank" rel="noopener noreferrer" {...$$restProps}
   ><slot />{#if showNewTabIcon}<span class="sr-only">(opens in a new tab)</span
     ><Icon name="newtab" size="small" />{/if}</a
 >

src/lib/components/util/Icon.svelte

@@ -5,6 +5,7 @@
   import Clipboard from '$lib/icons/Clipboard.svelte';
   import Copy from '$lib/icons/Copy.svelte';
   import GitHub from '$lib/icons/GitHub.svelte';
+  import LinkedIn from '$lib/icons/LinkedIn.svelte';
   import Logo from '$lib/icons/Logo.svelte';
   import Mastodon from '$lib/icons/Mastodon.svelte';
   import NewTab from '$lib/icons/NewTab.svelte';
@@ -23,6 +24,7 @@
     github: GitHub,
     twitter: Twitter,
     oddbird: OddBird,
+    linkedin: LinkedIn,
     mastodon: Mastodon,
   };
 

src/lib/constants.ts

@@ -43,6 +43,11 @@ export const SOCIAL_LINKS = [
   },
   { name: 'OddBird', icon: 'oddbird', href: 'https://www.oddbird.net/' },
   { name: 'Twitter', icon: 'twitter', href: 'https://twitter.com/oddbird' },
+  {
+    name: 'LinkedIn',
+    icon: 'linkedin',
+    href: 'https://www.linkedin.com/company/oddbird',
+  },
   {
     name: 'Mastodon',
     icon: 'mastodon',

src/lib/icons/LinkedIn.svelte

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" {...$$restProps}>
+  <path
+    d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"
+  />
+</svg>

vite.config.ts

@@ -36,6 +36,7 @@ export default defineConfig({
       ],
       all: true,
       skipFull: true,
+      reportOnFailure: true,
     },
   },
 });