Fix app

.github/workflows/buildFront.yml

@@ -13,7 +13,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [22.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
@@ -48,7 +48,6 @@ jobs:
       uses: actions/setup-node@v2
       with:
         node-version: ${{ matrix.node-version }}
-        cache: 'npm'
 
     - run: git submodule update --init --recursive -j 8
     - run: npm ci

README.md

@@ -28,7 +28,7 @@ $ npm install
 $ npm start
 ```
 
-And then look main page in [http://localhost:3000/index.html](http://localhost:3000/index.html)
+And then look main page in [http://localhost:3000/](http://localhost:3000/)
 
 ## Production
 

package.json

@@ -6,7 +6,7 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "parcel ./src/index.pug ./src/achievements/*.pug ./src/projects/*.pug --open -p 3000 --out-dir build --no-cache",
+    "start": "node scripts/dev.js",
     "predeploy": "npm ci && jake && exit 0",
     "deploy": "gh-pages -d build -b gh-pages-pr"
   },
@@ -28,7 +28,6 @@
     "jake": "^10.8.2",
     "lodash.escaperegexp": "^4.1.2",
     "node-fetch": "^3.2.10",
-    "npm": "^8.11.0",
     "parcel-bundler": "^1.12.5",
     "parcel-plugin-clean-easy": "^1.0.2",
     "postcss": "^8.4.7",

scripts/dev.js

@@ -0,0 +1,173 @@
+const { spawn } = require('child_process');
+const http = require('http');
+const fs = require('fs');
+const path = require('path');
+
+const ROOT = path.resolve(__dirname, '..');
+const BUILD = path.join(ROOT, 'build');
+const PORT = Number(process.env.PORT) || 3000;
+
+const MIME = {
+  '.html': 'text/html; charset=utf-8',
+  '.js': 'application/javascript; charset=utf-8',
+  '.css': 'text/css; charset=utf-8',
+  '.json': 'application/json; charset=utf-8',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.gif': 'image/gif',
+  '.webp': 'image/webp',
+  '.svg': 'image/svg+xml',
+  '.ico': 'image/x-icon',
+  '.woff': 'font/woff',
+  '.woff2': 'font/woff2',
+  '.wasm': 'application/wasm',
+  '.map': 'application/json',
+};
+
+function tryResolveFile(filePath) {
+  if (!filePath.startsWith(BUILD)) {
+    return null;
+  }
+  if (fs.existsSync(filePath) && fs.statSync(filePath).isFile()) {
+    return filePath;
+  }
+  return null;
+}
+
+function resolveRequest(urlPath) {
+  const decoded = decodeURIComponent(urlPath.split('?')[0]);
+  const normalized =
+    decoded === '/' || decoded === ''
+      ? '/index.html'
+      : decoded.endsWith('/')
+        ? decoded + 'index.html'
+        : decoded;
+
+  let filePath = path.normalize(path.join(BUILD, normalized));
+
+  let found = tryResolveFile(filePath);
+  if (found) {
+    return found;
+  }
+
+  if (path.extname(filePath) === '') {
+    found = tryResolveFile(filePath + '.html');
+    if (found) {
+      return found;
+    }
+  }
+
+  found = tryResolveFile(path.join(BUILD, path.basename(filePath)));
+  if (found) {
+    return found;
+  }
+
+  if (normalized.startsWith('/dist/')) {
+    found = tryResolveFile(path.join(BUILD, 'dist', path.basename(filePath)));
+    if (found) {
+      return found;
+    }
+  }
+
+  return null;
+}
+
+let serverStarted = false;
+
+function startServer() {
+  if (serverStarted) {
+    return;
+  }
+  serverStarted = true;
+
+  const server = http.createServer((req, res) => {
+    const filePath = resolveRequest(req.url || '/');
+
+    if (!filePath) {
+      res.writeHead(404);
+      res.end();
+      return;
+    }
+
+    const ext = path.extname(filePath);
+    res.writeHead(200, {
+      'Content-Type': MIME[ext] || 'application/octet-stream',
+      'Access-Control-Allow-Origin': '*',
+    });
+    fs.createReadStream(filePath).pipe(res);
+  });
+
+  server.on('error', (err) => {
+    if (err.code === 'EADDRINUSE') {
+      console.error(
+        `Port ${PORT} is already in use. Stop the other process or set PORT to another value.`
+      );
+    } else {
+      console.error(err);
+    }
+    parcel.kill('SIGINT');
+    process.exit(1);
+  });
+
+  server.listen(PORT, () => {
+    const url = `http://localhost:${PORT}/`;
+    console.log(`Dev server: ${url}`);
+    openBrowser(url);
+  });
+}
+
+function openBrowser(url) {
+  const cmd =
+    process.platform === 'win32'
+      ? `start "" "${url}"`
+      : process.platform === 'darwin'
+        ? `open "${url}"`
+        : `xdg-open "${url}"`;
+  spawn(cmd, { shell: true, stdio: 'ignore' });
+}
+
+const parcelBin = path.join(
+  ROOT,
+  'node_modules',
+  '.bin',
+  process.platform === 'win32' ? 'parcel.cmd' : 'parcel'
+);
+
+const parcelArgs = [
+  'watch',
+  './src/index.pug',
+  './src/achievements/*.pug',
+  './src/projects/*.pug',
+  '--out-dir',
+  'build',
+  '--public-url',
+  '/',
+  '--no-cache',
+];
+
+const parcel = spawn(parcelBin, parcelArgs, {
+  cwd: ROOT,
+  stdio: ['inherit', 'pipe', 'pipe'],
+  shell: process.platform === 'win32',
+});
+
+parcel.stdout.on('data', (chunk) => {
+  process.stdout.write(chunk);
+  if (!serverStarted && /Built in/.test(chunk.toString())) {
+    startServer();
+  }
+});
+
+parcel.stderr.on('data', (chunk) => {
+  process.stderr.write(chunk);
+});
+
+parcel.on('exit', (code) => {
+  process.exit(code ?? 1);
+});
+
+process.on('SIGINT', () => {
+  parcel.kill('SIGINT');
+  process.exit(0);
+});

src/js/projects/projects.js

@@ -35,7 +35,7 @@ function onMouseUp(e) {
 function updateProjectsInfo() {
   if (displayedProjects.length === 0) return;
   currentProjectTitle.innerText = displayedProjects[currentActiveTab].title;
-  currentProjectLink.href = 'projects/' + displayedProjects[currentActiveTab].link;
+  currentProjectLink.href = 'projects/' + displayedProjects[currentActiveTab].link + '.html';
   currentProjectLink.style.display = 'block';
 }
 

src/layout/achievements/achievements.pug

@@ -22,7 +22,7 @@ article#achievements.achievements__achievementsParent
 							// Здесь не тег <a/>, так как swiper баганулся и при клике на этот тег свайпает на следующий слайд
 							// поэтому здесь реализовано с помощью div и onclick
 
-							div(href="/achievements/" + obj.link onclick=`window.location='${"achievements/" + obj.link}'`).achievementCard__parent
+							div(href="/achievements/" + obj.link + ".html" onclick=`window.location='${"achievements/" + obj.link + ".html"}'`).achievementCard__parent
 								h1
 									=obj.title.replaceAll("\\n", "")
 								.linkButton Подробнее