3 Commits 95b44fe369 ... 518cfbfe70

Author SHA1 Message Date
  nsp 518cfbfe70 build module 1 year ago
  nsp 2d9e508e8a ignore dist 1 year ago
  nsp 56ebd61c70 working build script 1 year ago
10 changed files with 2071 additions and 91 deletions
  1. 1 1
      .editorconfig
  2. 1 0
      .gitignore
  3. 2042 0
      .pnp.loader.mjs
  4. 0 2
      Dockerfile
  5. 0 7
      build.mjs
  6. 5 3
      package.json
  7. 2 2
      www/index.html
  8. 20 0
      scripts/esbuild.config.js
  9. 0 76
      src/app.js
  10. 0 0
      src/components/ProjectChooser.jsx

+ 1 - 1
.editorconfig

@@ -4,7 +4,7 @@ root = true
 end_of_line = lf
 insert_final_newline = true
 
-[*.{js,json,yml}]
+[*.{js,mjs,jsx,json,yml}]
 charset = utf-8
 indent_style = space
 indent_size = 2

+ 1 - 0
.gitignore

@@ -1,4 +1,5 @@
 www/js
+build
 
 .yarn/*
 !.yarn/patches

File diff suppressed because it is too large
+ 2042 - 0
.pnp.loader.mjs


+ 0 - 2
Dockerfile

@@ -1,2 +0,0 @@
-FROM docker.io/library/php:7.4-apache
-COPY src/ /var/www/html/

+ 0 - 7
build.mjs

@@ -1,7 +0,0 @@
-import * as esbuild from 'esbuild'
-
-await esbuild.build({
-    entryPoints: ['app.jsx'],
-    bundle: true,
-    outfile: 'out.js'
-})

+ 5 - 3
package.json

@@ -1,13 +1,15 @@
 {
   "name": "project-chooser",
   "packageManager": "yarn@3.4.1",
+  "type": "module",
   "dependencies": {
-    "esbuild": "0.17.11",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "scripts": {
-    "build": "esbuild --bundle --minify --sourcemap --target=es2019,edge18,firefox60,chrome61,safari11 --outfile=www/js/app.js src/App.jsx",
-    "debug": "esbuild --bundle --watch --outfile=www/js/app.js --servedir=www src/App.jsx "
+    "build": "node scripts/esbuild.config.js"
+  },
+  "devDependencies": {
+    "esbuild": "^0.17.11"
   }
 }

+ 2 - 2
www/index.html

@@ -25,8 +25,8 @@
 <body style="background-color: #fcfdfd; font-family: sans-serif; font-size: 12px;">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <script src="js/app.js"></script>
+    <script src="./bundle.js"></script>
     <div><a href="https://notabug.org/nsp/project-chooser">source code</a></div>
 </body>
 
-</html>
+</html>

+ 20 - 0
scripts/esbuild.config.js

@@ -0,0 +1,20 @@
+import { build } from "esbuild";
+import { existsSync } from 'fs';
+import { rm, copyFile, mkdir } from 'fs/promises';
+
+const build_dir = './build';
+
+if (existsSync(build_dir))
+  await rm(build_dir, { recursive: true });
+
+await mkdir(build_dir, { mode: 0o755 });
+
+await copyFile('./public/index.html', `${build_dir}/index.html`);
+
+await build({
+  entryPoints: ['./src/App.jsx'],
+  bundle: true,
+  minify: true,
+  target: ['es2019', 'edge18', 'firefox60', 'chrome61', 'safari11'],
+  outfile: `${build_dir}/bundle.js`
+})

+ 0 - 76
src/app.js

@@ -1,76 +0,0 @@
-
-// FUTURE: Load these from a rest endpoint?
-const my_projects = ['TIMER', '6502', 'CHESS', 'SUDOKU', 'CHALLENGES', 'CHOOSER']
-
-// This is an implementation of the Fisher-Yates shuffle
-// TODO: Understand this algorithm and credit the Stack Overflow
-// post this was copied from
-function shuffle(a) {
-  for(let i = a.length - 1; i > 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1));
-    [a[i], a[j]] = [a[j], a[i]]
-  }
-  return a
-}
-
-let list = null
-
-window.onload = () => {
-  
-  const doShuffle = () => {
-
-    const container = document.getElementById('container')
-    const main = document.createElement('div')
-    const preview = document.getElementById('preview')
-    const projects = shuffle([...my_projects])
-    while (preview.hasChildNodes())
-      preview.removeChild(preview.lastChild)
-
-    // Highlight the first result as the project of the day
-    const selected = document.createElement('div')
-    selected.classList.add('selected');
-    selected.innerText = projects[0];
-    projects.shift();
-    
-    // Display other projects in order
-    const li = document.createElement('ul')	
-    projects.forEach(i => {
-      const p = document.createElement('li')
-      p.innerHTML = i
-      li.appendChild(p)
-    });
-    
-    if(list) container.removeChild(list)
-    main.appendChild(selected)
-    preview.appendChild(li)
-    main.appendChild(preview)
-    container.appendChild(main);
-    list = main
-  }
-  
-  const chooseBtn = document.createElement('button')
-  chooseBtn.innerHTML = 'Choose My Project!'
-  chooseBtn.classList.add('btn')
-  chooseBtn.classList.add('btn-primary')
-  chooseBtn.onclick  = doShuffle
-  
-  const chooseArea = document.getElementById('chooseArea')
-  chooseArea.appendChild(chooseBtn)
-
-  const li = document.createElement('ul')
-  my_projects.forEach(proj => {
-    const p = document.createElement('li')
-    p.innerHTML = proj
-    li.appendChild(p)
-  });
-  
-  const container = document.getElementById('container')
-  const preview = document.getElementById('preview')
-  
-  const header = document.createElement('b')
-  header.innerHTML = 'Projects Available'
-  preview.appendChild(header)
-  preview.appendChild(li)
-  container.appendChild(preview)
-  list = preview
-}

+ 0 - 0
src/components/ProjectChooser.jsx


Some files were not shown because too many files changed in this diff