Vue3 Upgrade

.github/workflows/pages.yml

@@ -20,7 +20,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: '16'
+          node-version: '24'
 
       - name: Cache node modules
         uses: actions/cache@v4
@@ -33,6 +33,10 @@ jobs:
             ${{ runner.OS }}-
       - name: Install build dependencies
         run: sudo apt-get install autoconf libtool pkg-config nasm build-essential libpng-dev
+      - name: Setup Yarn
+        run: |
+          corepack enable
+          corepack prepare yarn@4.12.0 --activate
       - name: Install dependencies
         run: yarn install --immutable
       - name: Validate translations

.gitignore

@@ -2,6 +2,10 @@
 node_modules
 /dist
 /build/lang
+/build/generated
+
+# npm lock file
+package-lock.json
 
 # local env files
 .env.local

.yarnrc.yml

@@ -1,3 +1,3 @@
-yarnPath: .yarn/releases/yarn-3.2.3.cjs
+yarnPath: .yarn/releases/yarn-4.12.0.cjs
 nodeLinker: node-modules
 checksumBehavior: update

CONTRIBUTING.md

@@ -22,7 +22,7 @@ If you are aware of a piece of artwork that would fill in where we currently hav
 
 Before adding artwork, please provide our team with proof that the artist gives their explicit permission to use the artwork on this site. Also make sure that you have a link to the artist's website of their choosing for crediting them.
 
-After the artist's permission has been shared and the requisite information gathered, you can add the image file under the appropriate folder under [public/img](https://github.com/Palanaeum/roshar-map/tree/master/public/img). Next navigate to [src/store](https://github.com/Palanaeum/roshar-map/tree/master/src/store) and open the appropriate .json file for the item you wish to add artwork for. For example, to add artwork for an event, open `events.json`. Find the exact item you are adding artwork to and create a new `"image"` key. It will require both a `"file"` (the location ane name of the file in the img directory) and a `"credits"` (providing the name of the artist and a link to their website). See other uses of artwork in the .json file for examples.
+After the artist's permission has been shared and the requisite information gathered, you can add the image file under the appropriate folder under [public/img](https://github.com/Palanaeum/roshar-map/tree/master/public/img). Next navigate to [src/stores](https://github.com/Palanaeum/roshar-map/tree/master/src/stores) and open the appropriate .json file for the item you wish to add artwork for. For example, to add artwork for an event, open `events.json`. Find the exact item you are adding artwork to and create a new `"image"` key. It will require both a `"file"` (the location ane name of the file in the img directory) and a `"credits"` (providing the name of the artist and a link to their website). See other uses of artwork in the .json file for examples.
 
 # Translation
 

Dockerfile

@@ -1,5 +1,5 @@
 # build stage
-FROM node:16-alpine AS build-stage
+FROM node:24-alpine AS build-stage
 
 ARG PUBLIC_URL=/
 
@@ -10,10 +10,11 @@ COPY ./.yarn /app/.yarn
 COPY package.json yarn.lock .yarnrc.yml /app/
 RUN yarn install --immutable
 
-COPY babel.config.js vue.config.js README.md /app/
+COPY vite.config.mjs index.html README.md /app/
 
 COPY ./bin /app/bin
 COPY ./build/loaders /app/build/loaders
+COPY ./build/vite-plugin-generated-assets.mjs /app/build/vite-plugin-generated-assets.mjs
 COPY ./public /app/public
 COPY ./translations /app/translations
 COPY ./src /app/src

Dockerfile-dev

@@ -1,5 +1,5 @@
 # build stage
-FROM node:16-alpine AS build-stage
+FROM node:24-alpine AS build-stage
 
 ARG PUBLIC_URL=/
 
@@ -10,10 +10,11 @@ COPY ./.yarn /app/.yarn
 COPY package.json yarn.lock .yarnrc.yml /app/
 RUN yarn install --immutable
 
-COPY babel.config.js vue.config.js README.md /app/
+COPY vite.config.mjs index.html README.md /app/
 
 COPY ./bin /app/bin
 COPY ./build/loaders /app/build/loaders
+COPY ./build/vite-plugin-generated-assets.mjs /app/build/vite-plugin-generated-assets.mjs
 COPY ./public /app/public
 COPY ./translations /app/translations
 COPY ./src /app/src

README.md

@@ -35,6 +35,7 @@
    * Chinese
    * Russian
    * Spanish
+   * Turkish
  * Layers on top of the map that can be enabled at any time, displaying useful additional information
    * Overlay the borders of the historic Silver Kingdoms
    * Show color indicators of the allegiances of various nations
@@ -117,11 +118,11 @@ The following is a list of all the artists that are either official artists or h
  * [Yen Shu Liao](https://coppermind.net/wiki/Coppermind:Artists/Yen_Shu_Liao)
  * [Zamoraalma](https://www.artstation.com/Zamoraalma)
 
-A very special thanks goes out to Reddit user [Stoneward13](https://www.reddit.com/user/Stoneward13) for letting use and modify his awesome high resolution versions of the Roshar and Shadesmar maps.
+A very special thanks goes out to Reddit user [Stoneward13](https://www.reddit.com/user/Stoneward13) for letting us use and modify his awesome high resolution versions of the Roshar and Shadesmar maps.
 
 We also thank the amazing people at [Cosmere.es](https://cosmere.es/), [The Cosmerenauts](https://coppermind.huijiwiki.com/wiki/%E4%B8%89%E7%95%8C%E5%AE%99%E6%97%85%E8%80%85), and everyone else in our translation Discord server for going through the monumental effort of translating everything to several other languages, and fixing errors in the English text along the way!
 
-Finally, the general appearance and concept of the map derives heavily from the [interactive map](http://witchernetflix.com/) of "The Continent" for Netflix's *The Witcher* series.
+Finally, the general appearance, design and concept of the map derives heavily from the [now-defunct interactive map](https://www.soapcentral.com/shows/netflix-finally-closed-the-witcher-website-why-possibilities-explored) of "[The Continent](https://web.archive.org/web/20241213194256/https://www.witchernetflix.com/en/map/)" for Netflix's *The Witcher* series.
 
 ## License
 

bin/convert-textures.js

@@ -1,10 +1,7 @@
-/* eslint-disable no-console */
+
 const childProcess = require('child_process')
 const { lstatSync, readdirSync } = require('fs')
 const path = require('path')
-const imagemin = require('imagemin')
-const imageminWebp = require('imagemin-webp')
-const imageminZopfli = require('imagemin-zopfli')
 
 const isDirectory = source => lstatSync(path.resolve(source)).isDirectory()
 
@@ -28,66 +25,73 @@ const webpOnly = process.argv.slice(2)[0] === '--webp-only'
 const filter = process.argv.slice(webpOnly ? 3 : 2)
 const locales = readdirSync(path.resolve(`${basePath}/localized`)).filter(locale => isDirectory(`${basePath}/localized/${locale}`))
 
-Promise.all(Object.keys(textures).flatMap((name) => {
-  const texture = textures[name]
-  const transformed = []
+;(async () => {
+  // Dynamic imports for ESM packages
+  const { default: imagemin } = await import('imagemin')
+  const { default: imageminWebp } = await import('imagemin-webp')
+  const { default: imageminZopfli } = await import('imagemin-zopfli')
+
+  await Promise.all(Object.keys(textures).flatMap((name) => {
+    const texture = textures[name]
+    const transformed = []
 
-  if (texture.localized) {
-    locales.forEach((locale) => {
-      const files = [`${basePath}/localized/${locale}/${name}.png`]
+    if (texture.localized) {
+      locales.forEach((locale) => {
+        const files = [`${basePath}/localized/${locale}/${name}.png`]
+        if (texture.hqAvailable === true) {
+          files.push(`${basePath}/localized/${locale}/hq_${name}.png`)
+        }
+        transformed.push({ ...texture, name: `${name}[${locale}]`, files, destination: `${basePath}/localized/${locale}` })
+      })
+    } else {
+      const directory = texture.lossy ? 'lossy' : 'lossless'
+      const ext = texture.lossy ? 'jpg' : 'png'
+      const files = [`${basePath}/${directory}/${name}.${ext}`]
       if (texture.hqAvailable === true) {
-        files.push(`${basePath}/localized/${locale}/hq_${name}.png`)
+        files.push(`${basePath}/${directory}/hq_${name}.${ext}`)
       }
-      transformed.push({ ...texture, name: `${name}[${locale}]`, files, destination: `${basePath}/localized/${locale}` })
-    })
-  } else {
-    const directory = texture.lossy ? 'lossy' : 'lossless'
-    const ext = texture.lossy ? 'jpg' : 'png'
-    const files = [`${basePath}/${directory}/${name}.${ext}`]
-    if (texture.hqAvailable === true) {
-      files.push(`${basePath}/${directory}/hq_${name}.${ext}`)
+      transformed.push({ ...texture, name, files, destination: `${basePath}/${directory}` })
     }
-    transformed.push({ ...texture, name, files, destination: `${basePath}/${directory}` })
-  }
-
-  return transformed
-}).flatMap((texture) => {
-  const { name, lossy } = texture
 
-  const changedFiles = texture.files.filter(path => childProcess.execSync(`git status -s ${path}`).toString().length > 0)
+    return transformed
+  }).flatMap((texture) => {
+    const { name, lossy } = texture
 
-  if (changedFiles.length === 0 && (filter.length === 0 || !filter.includes(name))) {
-    console.log(`Files for texture '${name}' haven't changed, ignoring...`)
-    return
-  }
+    const changedFiles = texture.files.filter(path => childProcess.execSync(`git status -s ${path}`).toString().length > 0)
 
-  if (filter.length > 0 && !filter.includes(name)) {
-    console.log(`Ignoring texture '${name}'...`)
-    return
-  }
+    if (changedFiles.length === 0 && (filter.length === 0 || !filter.includes(name))) {
+      console.log(`Files for texture '${name}' haven't changed, ignoring...`)
+      return
+    }
 
-  const forced = filter.includes(name)
-  console.log(`Optimizing and converting texture '${name}${forced ? ' (forced)' : ''}'...`)
+    if (filter.length > 0 && !filter.includes(name)) {
+      console.log(`Ignoring texture '${name}'...`)
+      return
+    }
 
-  return (webpOnly || lossy ? new Promise(resolve => resolve()) : imagemin(changedFiles, {
-    destination: texture.destination,
-    plugins: [
-      imageminZopfli({ more: true })
-    ]
-  })).then(() => {
-    console.log(`Optimized PNGs for texture '${name}'`)
+    const forced = filter.includes(name)
+    console.log(`Optimizing and converting texture '${name}${forced ? ' (forced)' : ''}'...`)
 
-    return imagemin(changedFiles, {
+    return (webpOnly || lossy ? new Promise(resolve => resolve()) : imagemin(changedFiles, {
       destination: texture.destination,
       plugins: [
-        imageminWebp({ quality: texture.lossy === true ? 90 : 100, lossless: texture.lossy !== true })
+        imageminZopfli({ more: true })
       ]
+    })).then(() => {
+      console.log(`Optimized PNGs for texture '${name}'`)
+
+      return imagemin(changedFiles, {
+        destination: texture.destination,
+        plugins: [
+          imageminWebp({ quality: texture.lossy === true ? 90 : 100, lossless: texture.lossy !== true })
+        ]
+      })
+    }).then(() => {
+      console.log(`Converted texture '${name}' to WEBP`)
     })
+  })).catch((error) => {
+    console.error(error)
   }).then(() => {
-    console.log(`Converted texture '${name}' to WEBP`)
+    console.log('All textures optimized and converted successfully')
   })
-})).catch((error) => {
-  console.error(error)
-}).then(() => {
-  console.log('All textures optimized and converted successfully')
-})
+})()

bin/dump-translations.js

@@ -1,4 +1,4 @@
-/* eslint-disable no-console */
+ 
 const fs = require('fs')
 
 const events = JSON.parse(fs.readFileSync('./src/store/events.json', 'utf8'))
@@ -19,7 +19,7 @@ events.forEach((event) => {
 })
 
 function dump (type) {
-  const entries = JSON.parse(fs.readFileSync(`./src/store/${type}.json`, 'utf8'))
+  const entries = JSON.parse(fs.readFileSync(`./src/stores/${type}.json`, 'utf8'))
   fs.mkdirSync(`./translations/en/${type}`, { recursive: true })
   entries.forEach((entry) => {
     const path = `./translations/en/${type}/${entry.id}.md`

bin/validate-translations.js

@@ -1,10 +1,10 @@
-/* eslint-disable no-console */
+ 
 const fs = require('fs')
 
-const events = JSON.parse(fs.readFileSync('./src/store/events.json', 'utf8')).map(e => e.id)
-const locations = JSON.parse(fs.readFileSync('./src/store/locations.json', 'utf8')).map(l => l.id)
-const characters = JSON.parse(fs.readFileSync('./src/store/characters.json', 'utf8')).map(l => l.id)
-const misc = JSON.parse(fs.readFileSync('./src/store/misc.json', 'utf8')).map(l => l.id)
+const events = JSON.parse(fs.readFileSync('./src/stores/events.json', 'utf8')).map(e => e.id)
+const locations = JSON.parse(fs.readFileSync('./src/stores/locations.json', 'utf8')).map(l => l.id)
+const characters = JSON.parse(fs.readFileSync('./src/stores/characters.json', 'utf8')).map(l => l.id)
+const misc = JSON.parse(fs.readFileSync('./src/stores/misc.json', 'utf8')).map(l => l.id)
 const allReference = new Set([
   ...events.map(name => `events/${name}`),
   ...locations.map(name => `locations/${name}`),

build/loaders/lang-loader.js

@@ -80,5 +80,7 @@ function parseStandardFile (lang, type, id, content) {
     return undefined
   }
 
-  return { name: root.name, details: root.content.trim(), ...metadata }
+  const details = root.content.trim()
+  // For standard entries (locations, characters, misc), blurb is the same as details
+  return { name: root.name, blurb: details, details, ...metadata }
 }

build/loaders/search-index-loader.js

@@ -78,7 +78,7 @@ module.exports = function (source) {
   const load = async (key) => {
     const path = await new Promise((resolve, reject) => this.resolve(
       this.rootContext,
-      `@/store/${key}.json`,
+      `@/stores/${key}.json`,
       (error, result) => error !== null ? reject(error) : resolve(result)
     ))
     this.addDependency(path)
@@ -105,7 +105,7 @@ module.exports = function (source) {
     return lunr(function () {
       const lunrLanguage = messages['search-language']
       this.tokenizer = nGramTokenizer
-      if (lunrLanguage !== 'en') {
+      if (lunrLanguage && lunrLanguage !== 'en-US') {
         require(`lunr-languages/lunr.${lunrLanguage}`)(lunr)
         this.use(lunr[lunrLanguage])
       }