chore: rewrite in Nuxt 3

Author: loilo

.browserslistrc

@@ -0,0 +1,4 @@
+last 2 chrome versions
+last 2 firefox versions
+ios_saf >= 15.4
+safari >= 15.4

.eslintrc.js

@@ -1,12 +1,12 @@
 version: 2
 updates:
-- package-ecosystem: npm
-  directory: "/"
-  schedule:
-    interval: daily
-    time: "04:00"
-  open-pull-requests-limit: 10
-  ignore:
-  - dependency-name: sass-loader
-    versions:
-    - ">= 11.a, < 12"
+  - package-ecosystem: npm
+    directory: '/'
+    schedule:
+      interval: daily
+      time: '04:00'
+    open-pull-requests-limit: 10
+    ignore:
+      - dependency-name: sass-loader
+        versions:
+          - '>= 11.a, < 12'

.github/dependabot.yml

@@ -7,22 +7,21 @@ on:
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v2
-      with:
-        persist-credentials: false
-    - uses: actions/setup-node@v2
-      with:
-        node-version: '16'
-    - run: npm ci
-    - run: npm run build
-      env:
-        PUBLIC_PATH: /diffr
-    - uses: JamesIves/github-pages-deploy-action@releases/v3
-      with:
-        ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
-        BRANCH: gh-pages
-        FOLDER: dist
+      - uses: actions/checkout@v3
+        with:
+          persist-credentials: false
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+      - run: npm ci
+      - run: npm run generate
+        env:
+          BASE_URL: /diffr/
+      - uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          token: ${{ secrets.ACCESS_TOKEN }}
+          branch: gh-pages
+          folder: dist

.github/workflows/deploy.yml

@@ -1,93 +1,9 @@
-# Created by .ignore support plugin (hsz.mobi)
-### Node template
-# Logs
-/logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# TypeScript v1 declaration files
-typings/
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-
-# next.js build output
-.next
-
-# nuxt.js build output
+node_modules
+*.log*
 .nuxt
-
-# Nuxt generate
+.nitro
+.cache
+.output
+.env
 dist
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless
-
-# IDE / Editor
-.idea
-
-# Service worker
-sw.*
-
-# macOS
 .DS_Store
-
-# Vim swap files
-*.swp
-
-# V8 report files
-/report.*

.gitignore

@@ -0,0 +1,3 @@
+shamefully-hoist=true
+strict-peer-dependencies=false
+legacy-peer-deps=true

.npmrc

@@ -10,5 +10,5 @@ requirePragma: false
 semi: false
 singleQuote: true
 tabWidth: 2
-trailingComma: none
+trailingComma: all
 useTabs: false

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "workbench.colorCustomizations": {
+    "titleBar.activeBackground": "#47b5e8",
+    "titleBar.activeForeground": "#15202b",
+    "titleBar.inactiveBackground": "#47b5e899",
+    "titleBar.inactiveForeground": "#15202b99",
+    "sash.hoverBorder": "#74c7ee",
+    "commandCenter.border": "#15202b99"
+  },
+  "peacock.color": "#47b5e8"
+}

.vscode/settings.json

@@ -1,7 +1,7 @@
 <div align="center">
   <br>
   <br>
-  <img src="logo.png" alt="The Diffr logo: two slightly overlapping diamond shapes" width="210" height="140">
+  <img src="logo.png" alt="The Diffr logo: two slightly overlapping diamond shapes" width="270" height="174">
 
   <br>
 </div>
@@ -20,30 +20,36 @@ The core technologies this project uses are:
 Technology | Purpose
 -|-
 **[Monaco Editor](https://microsoft.github.io/monaco-editor/)** | A text/code editor by Microsoft, used for the editing and diffing area itself.
-**[NuxtJS](https://nuxtjs.org/)** | An application framework for Vue.js, used for prerendering, PWA support and overall application structure.
+**[Nuxt](https://nuxt.com/)** | An application framework for Vue.js, used for prerendering, PWA support and overall application structure.
 **[`lz-string`](https://www.npmjs.com/package/lz-string)** | A quick and space-efficient compression algorithm, used for serializing the current app state in the URL anchor in as few characters as possible.
 **[GitHub Pages](https://pages.github.com/)** | This app does (purposefully) not generate any income. Therefore, free hosting is essential to keep it running.
 
 ## Setup
 
-Clone this repository and install its dependencies using [yarn](https://yarnpkg.com/).
+Clone this repository and install its dependencies using [npm](https://npmjs.com/).
 
 ```bash
-yarn install
+npm ci
 ```
 
 ## Local Development
 
 Start a local dev server with hot reloading:
 
 ```bash
-yarn dev
+npm run dev
 ```
 
 ## Generate Production Site
 
 Create a production-ready site in the `dist` folder:
 
 ```
-yarn build
+npm run generate
 ```
+
+Set the `BASE_URL` environment variable to create a build that can be hosted in a subfolder of a domain, e.g.:
+
+```
+BASE_URL=/diffr/ npm run generate
+```

README.md

@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+useDiffrHead()
+</script>
+
+<template>
+  <VitePwaManifest />
+  <div>
+    <NuxtPage />
+  </div>
+</template>

app.vue

@@ -0,0 +1,7 @@
+body {
+  @apply bg-slate-50 text-slate-600 dark:bg-slate-900 dark:text-slate-500;
+}
+
+div:where(.diffr-prose) {
+  @apply prose prose-slate dark:prose-invert prose-headings:font-normal prose-headings:text-slate-400 prose-a:rounded-md prose-a:text-blue-400 prose-a:no-underline focus-visible:prose-a:outline focus-visible:prose-a:outline-2 focus-visible:prose-a:outline-offset-8 focus-visible:prose-a:outline-current dark:prose-headings:text-slate-500 dark:prose-a:text-teal-400;
+}