Improve link focus styles

.eslintrc.js

@@ -40,6 +40,8 @@ module.exports = {
     // because sometimes it's clearer than template strings
     'prefer-template': 'off',
 
+    'no-unused-vars': 'warn',
+
     /* PRETTIER
      *
      * These Airbnb rules need to be re-defined
@@ -56,7 +58,7 @@ module.exports = {
 
     'eslint-comments/no-unused-disable': 'error',
 
-    'simple-import-sort/imports': 'error',
+    'simple-import-sort/imports': 'warn',
 
     /* UNICORN
      *

README.md

@@ -21,6 +21,10 @@ Also, in VS Code:
 2. Choose _"Extensions: Show Recommended Extensions"_
 3. Install the recommended extensions
 
+### Other tips
+
+- [Run 'ESLint: Fix all auto-fixable Problems' on save](https://www.digitalocean.com/community/tutorials/workflow-auto-eslinting#step-4-%E2%80%93-adding-code-actions-on-save)
+
 ## Building for production
 
 1. `npm install`

netlify.toml

@@ -27,6 +27,10 @@
   from   = "https://krapu.la/kysy"
   to     = "https://forms.gle/uyh3v8bbQUwnizEw5"
   status = 302
+[[redirects]]
+  from   = "https://koodikrapula.fi/kysy"
+  to     = "https://forms.gle/uyh3v8bbQUwnizEw5"
+  status = 302
 
 [[redirects]]
   from   = "https://koodikrapula.netlify.app/*"

package.json

@@ -19,20 +19,21 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-simple-import-sort": "^7.0.0",
     "eslint-plugin-sonarjs": "^0.8.0-125",
     "eslint-plugin-unicorn": "^33.0.1",
     "esm": "^3.2.25",
     "htm": "^3.0.4",
-    "markdown-it": "^10.0.0",
+    "markdown-it": "^12.2.0",
+    "markdown-it-link-attributes": "^3.0.0",
     "preact": "^10.5.13",
     "preact-render-to-string": "^5.1.19",
     "prettier": "2.3.2",
     "react": "^17.0.2",
     "twind": "^0.16.16"
   },
   "devDependencies": {
-    "@types/eslint": "^7.2.13"
+    "@types/eslint": "^7.2.13",
+    "eslint-plugin-simple-import-sort": "^7.0.0"
   },
   "engines": {
     "node": ">=14.0.0",

src/js/components/Link.js

@@ -1,6 +1,7 @@
 import { ExternalLinkIcon } from '@heroicons/react/solid'
 import { html } from 'htm/preact'
 import { apply, tw } from 'twind'
+import { linkClasses } from '../utils/const'
 
 export default ({
   children,
@@ -10,7 +11,7 @@ export default ({
   ...rest
 }) => html`
   <a
-    class=${tw(classes, apply('underline text-red(hover:600 active:700)'))}
+    class=${tw(classes, apply(linkClasses))}
     href=${href}
     style="text-decoration-thickness: 1px"
     ...${rest}

src/js/components/Player.js

@@ -1,17 +1,20 @@
 import { html } from 'htm/preact'
 
 import char from '../data/char'
+import Link from './Link'
 
 export default () => html`
   <p class="italic">
     Soitin tulossa pian${char.trade}! Sitä ennen voit kuunnella podia mm.${' '}
-    <a href="https://open.spotify.com/show/1st4zWhHxzXn345vqdTfk8">
+    <${Link} href="https://open.spotify.com/show/1st4zWhHxzXn345vqdTfk8">
       Spotifyssa
-    </a>
+    <//>
     ${' ja '}
-    <a href="https://podcasts.apple.com/us/podcast/koodikrapula/id1572320652">
+    <${Link}
+      href="https://podcasts.apple.com/us/podcast/koodikrapula/id1572320652"
+    >
       Apple Podcastsissa
-    </a>
+    <//>
     .
   </p>
 `

src/js/utils/const.js

@@ -0,0 +1,5 @@
+/* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable import/prefer-default-export */
+
+export const linkClasses =
+  'underline text-red(hover:600 active:700) focus-visible:(outline-none ring(2 blue-300 offset-2))'

src/js/utils/markdownIt.js

@@ -1,3 +1,9 @@
 import markdownIt from 'markdown-it'
+import markdownItLinkAttributes from 'markdown-it-link-attributes'
+import { linkClasses } from './const'
 
-export default markdownIt({ html: true })
+export default markdownIt({ html: true }).use(markdownItLinkAttributes, {
+  attrs: {
+    class: linkClasses,
+  },
+})