refactor(remark): upgrade dependencies (#242)

* style: prefer Prettier over ESLint's import/order

* style: apply Prettier

* chore(dependencies): bump dependencies

* refactor(remark): upgrade remark dependencies 1/3

* refactor(remark): upgrade remark dependencies 2/3

* fix(remark): prevent double pre wrappers for code blocks

* refactor(remark): upgrade remark dependencies 3/3

* fix(remark): replace remark-slug with rehype-slug

* chore(dependencies): replace ts-prune with knip

* feat(sandbox): add sandbox/markdown page

* feat(a11y): add image titles

* feat(build): migrate to pnpm

* fix(ci): replace yarn with pnpm

* feat(ci): add summaries

.eslintrc.json

@@ -12,36 +12,17 @@
   ],
   "overrides": [
     {
-      "files": ["*.{ts,tsx}"],
+      "files": ["**/*.js"],
       "rules": {
-        "@typescript-eslint/explicit-module-boundary-types": "error",
-        "react/prop-types": "off",
-        "react/react-in-jsx-scope": "off",
-        "react/require-default-props": "off"
+        "@typescript-eslint/no-var-requires": "off"
       }
     },
     {
       "files": ["*.test.{ts,tsx}"],
       "rules": {
-        "@typescript-eslint/no-var-requires": "off",
-        "global-require": "off",
         "import/no-extraneous-dependencies": "off"
       }
     },
-    {
-      "files": ["jest.*.js"],
-      "globals": { "jest": true },
-      "rules": {
-        "@typescript-eslint/no-var-requires": "off"
-      }
-    },
-    {
-      "files": ["scryfall/**/*.js"],
-      "rules": {
-        "@typescript-eslint/no-var-requires": "off",
-        "no-console": "off"
-      }
-    },
     {
       "files": ["src/mocks/**/*.ts"],
       "rules": {
@@ -70,14 +51,16 @@
       }
     ],
     "camelcase": ["warn", { "ignoreDestructuring": true }],
+    "import/consistent-type-specifier-style": ["error", "prefer-inline"],
     "import/extensions": [
       "error",
       "ignorePackages",
       { "ts": "never", "tsx": "never" }
     ],
     "import/no-unresolved": "off",
+    "import/order": "off",
     "import/prefer-default-export": "off",
-    "no-console": ["warn", { "allow": ["error"] }],
+    "no-console": ["warn", { "allow": ["count", "error", "info"] }],
     "no-nested-ternary": "off",
     "no-param-reassign": ["error", { "props": false }],
     "no-restricted-syntax": [
@@ -101,7 +84,10 @@
       { "extensions": [".jsx", ".tsx"] }
     ],
     "react/jsx-no-useless-fragment": ["warn", { "allowExpressions": true }],
-    "react/jsx-props-no-spreading": "off"
+    "react/jsx-props-no-spreading": "off",
+    "react/prop-types": "off",
+    "react/react-in-jsx-scope": "off",
+    "react/require-default-props": "off"
   },
   "settings": {
     "import/resolver": {

.github/workflows/preview.yaml

@@ -7,61 +7,72 @@ env:
 on: push
 
 jobs:
-
   lint:
     name: Lint
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
+      - name: Set up PNPM
+        uses: pnpm/action-setup@v3
+        with:
+          version: latest
       - name: Set up Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          cache: 'yarn'
-          node-version: 18
+          cache: 'pnpm'
+          node-version-file: 'package.json'
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
-      - name: Lint code
-        run: yarn lint:code
-      - name: Check typings
-        run: yarn lint:typings
+        run: pnpm install --frozen-lockfile
+      - name: Run lint tasks
+        run: pnpm lint
 
   tests:
     name: Tests
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
+      - name: Set up PNPM
+        uses: pnpm/action-setup@v3
+        with:
+          version: latest
       - name: Set up Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          cache: 'yarn'
-          node-version: 18
+          cache: 'pnpm'
+          node-version-file: 'package.json'
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
+        run: pnpm install --frozen-lockfile
       - name: Run tests
-        run: yarn test:coverage --ci
+        run: pnpm test:coverage >> $GITHUB_STEP_SUMMARY
 
   preview:
     name: Preview
     needs: [lint, tests]
+    outputs:
+      url: ${{ steps.deploy.outputs.url }}
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
+      - name: Set up PNPM
+        uses: pnpm/action-setup@v3
+        with:
+          version: latest
       - name: Set up Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          cache: 'yarn'
-          node-version: 18
+          cache: 'pnpm'
+          node-version-file: 'package.json'
       - name: Set up Vercel
         run: |
-            yarn global add vercel@latest
-            vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
+          npm install --global vercel@latest
+          vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
       - name: Build
         run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
       - name: Deploy
-        run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}
+        run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }} >> $GITHUB_STEP_SUMMARY
 
   release:
     name: Release
@@ -70,17 +81,21 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
+      - name: Set up PNPM
+        uses: pnpm/action-setup@v3
+        with:
+          version: latest
       - name: Set up Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          cache: 'yarn'
-          node-version: 18
+          cache: 'pnpm'
+          node-version-file: 'package.json'
       - name: Set up Vercel
         run: |
-            yarn global add vercel@latest
-            vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
+          npm install --global vercel@latest
+          vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
       - name: Build
         run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
       - name: Deploy
-        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}
+        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }} >> $GITHUB_STEP_SUMMARY

.knip.json

@@ -0,0 +1,3 @@
+{
+  "ignoreDependencies": ["ts-node"]
+}

.prettierrc.json

@@ -1,3 +1,11 @@
 {
+  "importOrder": [
+    "<BUILTIN_MODULES>",
+    "<THIRD_PARTY_MODULES>",
+    "",
+    "^@/",
+    "^[.]"
+  ],
+  "plugins": ["@ianvs/prettier-plugin-sort-imports"],
   "singleQuote": true
 }

CONTRIBUTING.org

@@ -19,24 +19,21 @@ See [[./CONTRIBUTING_WITH_CODE.org][CONTRIBUTING_WITH_CODE]].
 ** Testing your Changes
 
 This is a Next.js application written with TypeScript. All you have to do in
-order to run the project locally is to clone the repository and use =yarn= to
-install the dependencies.
+order to run the project locally is to clone the repository and install the
+JavaScript dependencies.
 
 #+BEGIN_SRC sh
-yarn      # Install dependencies
-yarn dev  # Run the application on http://localhost:3000
+pnpm install  # Install dependencies
+pnpm dev      # Run the application on http://localhost:3000
 #+END_SRC
 
 See [[./package.json][package.json]] for a complete list of the available
 commands.
 
 Running the project locally ensures you abide by the existing conventions and
 enables live preview for your changes. If for some reason you cannot run the
-project locally, Netlify generates and updates URLs for every pull requests on
+project locally, Vercel generates and updates URLs for every pull requests on
 the repository.
 
-For instance, the pull request #123 deploys to
-[[https://deploy-preview-123--ddftwiki.netlify.app]].
-
 As a general advice, avoid pushing for every little change you make as build
 minutes are limited.

CONTRIBUTING_WITH_MARKDOWN.org

@@ -38,7 +38,7 @@ content.
 
 In addition, a linter will run on your committed changes to detect necessary
 improvements. A command is provided to help you sanitize your content locally:
-=yarn lint:wiki=.
+=pnpm lint:wiki=.
 
 If you can, set up your editor of choice to run =prettier= on save when you edit
 Wiki content. It'll do almost everything for you and make the linter happy
@@ -140,6 +140,9 @@ directives.
   closing pairs. It is possible to nest /container/ directives by using more
   than 3 colons.
 
+See [[https://doomsday.wiki/sandbox/markdown]] for examples of the below
+features.
+
 *** Inline Card Links
 
 You can insert inline Scryfall links for cards using the following syntax:

README.org

@@ -1,7 +1,6 @@
 #+TITLE: Doomsday Wiki
 #+AUTHOR: Mathieu Marques
 
-[[https://app.netlify.com/sites/ddftwiki/deploys][https://img.shields.io/netlify/c4286750-ff36-41ea-aecd-daf5ae567b1a.svg?style=flat-square]]
 [[./LICENSE.org][https://img.shields.io/github/license/angrybacon/doomsday-wiki.svg?style=flat-square]]
 [[https://discord.gg/vajvFXt][https://img.shields.io/discord/398217260344410112.svg?color=7289DA&label=discord&style=flat-square]]
 

jest.config.ts

@@ -0,0 +1,8 @@
+import { type Config } from 'jest';
+import NextJest from 'next/jest';
+
+export default NextJest()({
+  moduleNameMapper: { '^@/(.+)$': '<rootDir>/src/$1' },
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+  testEnvironment: 'jsdom',
+} satisfies Config);

jest.setup.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import '@testing-library/jest-dom';

markdown/articles/2018/01/03/doomsday-by-committee.md

@@ -55,7 +55,7 @@ We are on the play and started with a Misty Rainforest. Opponent leads Turn one
 Verdant Catacombs and passes. We play a Badlands, crack the fetch for an Island,
 and cast Preordain, which brings us to here:
 
-![Scenario 1](/media/pictures/2018.ritual-doomsday.one.jpeg)
+![MTGO screenshot](/media/pictures/2018.ritual-doomsday.one.jpeg 'Scenario 1')
 
 Doishy and I quickly agree that we go for it here. By leaving both cards on top
 and drawing Doomsday, we can cast Doomsday and win that way if it resolves, and
@@ -111,7 +111,7 @@ pile with Lab Maniac. The important question here is what to put in the pile. To
 answer this question, we need to consider what disruption they could have and
 what of that we can even play around.
 
-![Scenario 2](/media/pictures/2018.ritual-doomsday.two.jpeg)
+![MTGO Screenshot](/media/pictures/2018.ritual-doomsday.two.jpeg 'Scenario 2')
 
 The pile that quickly jumps to mind is a _basic_ pile like \[AoI, LED, LM, GP,
 GP\]. This neatly plays around Therapy, and the 4 life paid is fine in this

markdown/articles/2018/01/10/doomsday-in-2017.md

@@ -106,9 +106,9 @@ across all games of a match and the win percentages calculated from when
 mulligans occur. Below you can find two graphs: the percentage of games where
 mulligans occur and the percentage of games won against mulligans.
 
-![Mulligan percentage across games](/media/pictures/2017.chart.mulligan.gif)
+![Mulligan chart](/media/pictures/2017.chart.mulligan.gif 'Mulligan percentage across games')
 
-![Mulligan win percentage across games](/media/pictures/2017.chart.mulligan-winrate.gif)
+![Winrate per mulligan chart](/media/pictures/2017.chart.mulligan-winrate.gif 'Mulligan win percentage across games')
 
 As you can see, despite the concerns, the deck seems to mulligan very well.
 There could be some variance in that people are keeping dodgy seven card hands
@@ -247,7 +247,7 @@ gone up but is still on par with ANT. Following on from this point again Nanda
 had real concerns that Doomsday as a deck was not winning using its namesake
 card. Let's look at the breakdown of winning game engines:
 
-![Combo engines across games](/media/pictures/2017.chart.engines.gif)
+![Win engine chart](/media/pictures/2017.chart.engines.gif 'Combo engines across games')
 
 I guess that paints a clear picture. The four engines measured are the primary
 ones of any line that uses Doomsday itself, BW into EtW, natural ToA kills and