Feat/upgrade to jsx by john20xdoe · Pull Request #9 · john20xdoe/john20xdoe.github.io

john20xdoe · 2026-03-10T06:26:45Z

No description provided.

Co-authored-by: john20xdoe <14521605+john20xdoe@users.noreply.github.com>

Fix npm scripts by aligning project structure with Vite conventions

Co-authored-by: john20xdoe <14521605+john20xdoe@users.noreply.github.com>

Update copyright to 2026 and serve JSON from deployed domain only

Copilot

Pull request overview

This PR migrates the site to a React + Vite setup (JSX entrypoint) and updates deployment/build configuration to publish the Vite dist/ output to GitHub Pages.

Changes:

Introduces a Vite + React app entry (src/main.jsx) and reimplements the page in src/App.jsx with runtime JSON fetching.
Adds build-time copying of root data/*.json into dist/data/ via a Vite plugin.
Adds a GitHub Pages deployment workflow and updates project metadata/ignores.

Reviewed changes

Copilot reviewed 9 out of 12 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
vite.config.js	Adds Vite config + plugin to copy `data/` JSON into `dist/data/`.
src/main.jsx	Adds React root bootstrap.
src/App.jsx	Implements the full page UI in React + fetches `data/*.json`.
index.html	Converts static HTML page into Vite root + module entry script.
package.json	Switches to Vite/React dependencies and build/dev scripts.
package-lock.json	Locks dependency tree for Vite/React toolchain.
deploy.yml	Adds GitHub Pages deployment workflow (currently misplaced).
robots.txt	Adds crawler rules + sitemap reference (currently not deployed by Vite as-is).
data/skills.json	Adds runtime skills data used by the app.
data/links.json	Adds runtime links data used by the app.
.gitignore	Adds `dist` and `.DS_Store` ignores.
.DS_Store	(Should not be committed) macOS metadata file added.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-10T06:30:03Z

vite.config.js

+          const dataDir = resolve(__dirname, "data");
+          const distData = resolve(__dirname, "dist/data");
+


vite.config.js is treated as an ES module (package.json sets "type": "module"), so __dirname is not defined and the build will crash when the copy plugin runs. Use an ESM-safe path resolution approach (e.g., derive a directory from import.meta.url / fileURLToPath, or use process.cwd() if appropriate) before calling resolve().

Copilot · 2026-03-10T06:30:03Z

deploy.yml

+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [main]
+


This GitHub Actions workflow file won’t run from the repository root. GitHub only loads workflows from .github/workflows/*.yml. Move this file into .github/workflows/ (or adjust the PR to add it there) so the Pages deployment actually triggers on pushes to main.

Copilot · 2026-03-10T06:30:04Z

robots.txt

+User-agent: Googlebot
+Allow: /
+


robots.txt is added at the repo root, but Vite only copies static files from public/ into dist/ by default. Since the Pages artifact is dist, this robots.txt likely won’t be deployed. Move it under public/robots.txt (or configure publicDir / add a copy step) so it ends up in the deployed site root.

robots.txt

src/App.jsx

Copilot · 2026-03-10T06:30:04Z

src/App.jsx

+  return (
+    <>
+      <style>{`
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@200,400,600,700,800&family=Open+Sans:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');
+
+        *, *::before, *::after { box-sizing: border-box; }
+


The large CSS string is embedded inside the App component’s render output. Because App re-renders on state changes (e.g., accordion open/close), this will re-render/re-apply the <style> contents repeatedly and can cause unnecessary style recalculation. Consider moving these styles to a static CSS file (preferred with Vite) or at least hoisting the string outside the component so it isn’t recreated on every render.

@copilot open a new pull request to apply changes based on this feedback

Copilot

Pull request overview

Copilot reviewed 9 out of 11 changed files in this pull request and generated 4 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-10T06:46:52Z

src/App.jsx

+  useEffect(() => {
+    const controller = new AbortController();
+
+    setLoading(true);
+    fetch(url, { signal: controller.signal })
+      .then((r) => {
+        if (!r.ok) throw new Error(`HTTP ${r.status}`);
+        return r.json();


useFetch never resets error when a new request starts. If a previous request errors and a subsequent one succeeds (or url changes), the stale error value will remain set. Consider clearing error (and optionally data) when starting a new fetch (before calling fetch).

Copilot · 2026-03-10T06:46:52Z

src/App.jsx

+// Safely renders label strings that contain inline <b> tags
+function InlineHTML({ html }) {
+  return <span dangerouslySetInnerHTML={{ __html: html }} />;
+}


InlineHTML uses dangerouslySetInnerHTML with content coming from JSON. Even if it's currently intended to only include <b>, this is still an XSS footgun if the JSON ever becomes user-controlled (or is modified unintentionally). Prefer representing emphasis as structured data (no HTML), or sanitize/whitelist allowed tags/attributes before rendering. Also, the comment says "Safely" but there is no sanitization here.

src/App.jsx

Copilot · 2026-03-10T06:46:53Z

src/App.jsx

+  return (
+    <>
+      <style>{`
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@200,400,600,700,800&family=Open+Sans:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');
+
+        *, *::before, *::after { box-sizing: border-box; }
+
+        body {
+          margin: 0;
+          width: 100%;
+          font-family: "Inter", "Open Sans", sans-serif;


Large CSS is inlined inside the component render via a template literal. This string is recreated on every re-render (e.g., when toggling accordions), and it makes styling harder to maintain. Consider moving these styles to a dedicated CSS file (and importing it), or at least hoisting the CSS string outside the component so it isn't reallocated each render.

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Copilot · 2026-03-10T06:51:52Z

@john20xdoe I've opened a new pull request, #10, to work on those changes. Once the pull request is ready, I'll request review from you.

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

john20xdoe and others added 14 commits March 10, 2026 12:35

feat: added dstore

81d6619

feat: dsstore

67d4eb9

initial implem

3a76ca7

feat: updated dsstore

5efe7e3

feat:

6ce3fbf

Initial plan

7b100d7

Move JSX files to src directory and update gitignore

78b0cb0

Co-authored-by: john20xdoe <14521605+john20xdoe@users.noreply.github.com>

Merge pull request #7 from john20xdoe/copilot/fix-dev-build-scripts

9d4042c

Fix npm scripts by aligning project structure with Vite conventions

Initial plan

60f29ed

Update copyright and remove REST API dependency for JSON data

2b29c71

Co-authored-by: john20xdoe <14521605+john20xdoe@users.noreply.github.com>

Move JSON files to root data/ folder and fetch via relative URLs

c3253bd

Co-authored-by: john20xdoe <14521605+john20xdoe@users.noreply.github.com>

Improve vite plugin with error handling and scalability

1e89db7

Co-authored-by: john20xdoe <14521605+john20xdoe@users.noreply.github.com>

Add proper loading state, abort controller, and improved error handling

5ced623

Co-authored-by: john20xdoe <14521605+john20xdoe@users.noreply.github.com>

Merge pull request #8 from john20xdoe/copilot/update-footer-copyright

a81377c

Update copyright to 2026 and serve JSON from deployed domain only

john20xdoe requested a review from Copilot March 10, 2026 06:26

Copilot started reviewing on behalf of john20xdoe March 10, 2026 06:27 View session

feat: dsstore

145e780

Copilot AI reviewed Mar 10, 2026

View reviewed changes

john20xdoe added 6 commits March 10, 2026 14:32

gitignore dsstore

edfc7de

feat: remove dssstore

ed60a5c

fix: remove dsstore

613947f

Merge branch 'master' into newmaster

e6ec472

fix: remove dsstore

2bc9df1

Merge branch 'feat/upgrade-to-jsx' into newmaster

e3b330d

john20xdoe requested a review from Copilot March 10, 2026 06:43

Copilot started reviewing on behalf of john20xdoe March 10, 2026 06:43 View session

Copilot AI reviewed Mar 10, 2026

View reviewed changes

Update robots.txt

da025c5

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Copilot AI mentioned this pull request Mar 10, 2026

Move inline CSS from App render to static App.css #10

Draft

john20xdoe and others added 2 commits March 10, 2026 14:52

Update src/App.jsx

8865eaf

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update src/App.jsx

386eb1e

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat/upgrade to jsx#9

Feat/upgrade to jsx#9
john20xdoe wants to merge 24 commits intomasterfrom
feat/upgrade-to-jsx

john20xdoe commented Mar 10, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 10, 2026

Uh oh!

Copilot AI Mar 10, 2026

Uh oh!

Copilot AI Mar 10, 2026

Uh oh!

Uh oh!

Uh oh!

Copilot AI Mar 10, 2026

Uh oh!

john20xdoe Mar 10, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 10, 2026

Uh oh!

Copilot AI Mar 10, 2026

Uh oh!

Uh oh!

Copilot AI Mar 10, 2026

Uh oh!

Copilot AI commented Mar 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		const dataDir = resolve(__dirname, "data");
		const distData = resolve(__dirname, "dist/data");

		User-agent: Googlebot
		Allow: /

Conversation

john20xdoe commented Mar 10, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

john20xdoe Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented Mar 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants