From c67f833a0987f20ea77291d1caaf148487f22349 Mon Sep 17 00:00:00 2001 From: Olling <48805670+Ollie-nl@users.noreply.github.com> Date: Mon, 23 Dec 2024 23:41:54 +0100 Subject: [PATCH] Development (#2) * feat: random slide button in footer * fix: added pnpm install on runner * docs: all slugs added * docs: more content * fix: prettier * Update slides-2024-04.json --- .github/workflows/deploy.yml | 90 +- ARCHITECTURE.md | 1 - README.md | 7 +- docs/asset-manifest.json | 3 +- docs/data/available-months.json | 11 +- docs/index.html | 19 +- docs/static/css/main.2a9063d3.css | 208 + docs/static/js/main.d6e15f43.js | 19660 ++++++++++++++++++++++++- package.json | 2 +- public/data/available-months.json | 5 +- public/data/slides-2024-02.json | 18 +- public/data/slides-2024-03.json | 84 +- public/data/slides-2024-04.json | 65 + public/data/slides-2024-05.json | 107 + public/data/slides-2024-06.json | 58 + public/data/slides-2024-08.json | 15 +- public/data/slides-2024-09.json | 50 +- public/data/slides-2024-10.json | 130 +- public/data/slides-2024-12.json | 21 +- public/images/1701.png | Bin 0 -> 403379 bytes public/images/kuifje-outfit.png | Bin 0 -> 678088 bytes public/images/lego-nlds.png | Bin 0 -> 2706465 bytes public/images/logo-sm-1.png | Bin 0 -> 159999 bytes public/images/logo-sm-2.png | Bin 0 -> 2202785 bytes public/images/pincodes.png | Bin 0 -> 1917418 bytes public/images/superman-logos.png | Bin 0 -> 2095993 bytes src/__tests__/App.test.js | 6 +- src/__tests__/DarkModeToggle.test.js | 14 +- src/__tests__/MonthSelector.test.js | 32 +- src/__tests__/Slide.test.js | 16 +- src/__tests__/SlideDeck.test.js | 22 +- src/components/SlideDeck.js | 34 +- src/styles/index.css | 18 +- 33 files changed, 20443 insertions(+), 253 deletions(-) create mode 100644 docs/static/css/main.2a9063d3.css create mode 100644 public/data/slides-2024-04.json create mode 100644 public/data/slides-2024-05.json create mode 100644 public/data/slides-2024-06.json create mode 100644 public/images/1701.png create mode 100644 public/images/kuifje-outfit.png create mode 100644 public/images/lego-nlds.png create mode 100644 public/images/logo-sm-1.png create mode 100644 public/images/logo-sm-2.png create mode 100644 public/images/pincodes.png create mode 100644 public/images/superman-logos.png diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 85ba5b2..f67a12d 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -3,54 +3,54 @@ name: ๐Ÿš€ Deploy to GitHub Pages on: push: branches: - - main # Voer de workflow uit bij elke push naar main + - main # Voer de workflow uit bij elke push naar main permissions: - contents: write # Vereist om GitHub Pages te deployen + contents: write # Vereist om GitHub Pages te deployen jobs: build-and-deploy: - runs-on: ubuntu-latest # Draai de pipeline op de nieuwste Ubuntu-versie - + runs-on: ubuntu-latest # Draai de pipeline op de nieuwste Ubuntu-versie + steps: - - name: ๐Ÿ“ฅ Checkout repository - uses: actions/checkout@v3 - - - name: ๐Ÿ—๏ธ Install Node.js - uses: actions/setup-node@v3 - with: - node-version: '18' # Zorg ervoor dat de Node-versie klopt - cache: 'pnpm' # Cache voor pnpm - - # Installeer PNPM vรณรณr het installeren van dependencies - - name: ๐Ÿ“ฆ Install PNPM - run: npm install -g pnpm # Installeer pnpm globaal - - # Cache afhankelijkheden om builds te versnellen - - name: ๐Ÿ“ฆ Cache dependencies - uses: actions/cache@v3 - with: - path: ~/.pnpm-store - key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }} - restore-keys: | - ${{ runner.os }}-pnpm- - - # Installeer afhankelijkheden met PNPM - - name: ๐Ÿ“ฆ Install dependencies - run: pnpm install # Gebruik pnpm voor snelle dependency installatie - - # Draai tests voor de build (maar faal niet als tests falen) - - name: ๐Ÿงช Run Tests - run: pnpm test || echo "Tests failed, but continuing build..." - - # Bouw het project - - name: ๐Ÿ”จ Build project - run: pnpm run build - - # Deploy naar GitHub Pages - - name: ๐Ÿš€ Deploy to GitHub Pages - uses: peaceiris/actions-gh-pages@v3 - with: - github_token: ${{ secrets.GITHUB_TOKEN }} # Gebruik de standaard GitHub token - publish_dir: ./docs # Map waarin de build staat na 'mv build docs' - keep_files: true # Behoud bestaande bestanden zoals _redirects + - name: ๐Ÿ“ฅ Checkout repository + uses: actions/checkout@v3 + + - name: ๐Ÿ—๏ธ Install Node.js + uses: actions/setup-node@v3 + with: + node-version: "18" # Zorg ervoor dat de Node-versie klopt + cache: "pnpm" # Cache voor pnpm + + # Installeer PNPM vรณรณr het installeren van dependencies + - name: ๐Ÿ“ฆ Install PNPM + run: npm install -g pnpm # Installeer pnpm globaal + + # Cache afhankelijkheden om builds te versnellen + - name: ๐Ÿ“ฆ Cache dependencies + uses: actions/cache@v3 + with: + path: ~/.pnpm-store + key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }} + restore-keys: | + ${{ runner.os }}-pnpm- + + # Installeer afhankelijkheden met PNPM + - name: ๐Ÿ“ฆ Install dependencies + run: pnpm install # Gebruik pnpm voor snelle dependency installatie + + # Draai tests voor de build (maar faal niet als tests falen) + - name: ๐Ÿงช Run Tests + run: pnpm test || echo "Tests failed, but continuing build..." + + # Bouw het project + - name: ๐Ÿ”จ Build project + run: pnpm run build + + # Deploy naar GitHub Pages + - name: ๐Ÿš€ Deploy to GitHub Pages + uses: peaceiris/actions-gh-pages@v3 + with: + github_token: ${{ secrets.GITHUB_TOKEN }} # Gebruik de standaard GitHub token + publish_dir: ./docs # Map waarin de build staat na 'mv build docs' + keep_files: true # Behoud bestaande bestanden zoals _redirects diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md index b2f6b62..cf97bde 100644 --- a/ARCHITECTURE.md +++ b/ARCHITECTURE.md @@ -78,7 +78,6 @@ De webapp is ontworpen om eenvoudig uitbreidbaar te zijn en maakt gebruik van Ja - **CI/CD pipelines om automatisch te testen en te deployen bij iedere commit**. - **More, more, mmmmoooore...**. - --- ## ๐Ÿšจ Let Op diff --git a/README.md b/README.md index a0c1bb8..7012807 100644 --- a/README.md +++ b/README.md @@ -167,6 +167,7 @@ cool-uncool/ --- ## ๐Ÿ… Semantic Versioning + We gebruiken Semantic Versioning (SemVer) om releases te beheren: 1.0.0 = Major.Minor.Patch @@ -179,6 +180,7 @@ git tag v1.0.0 git push origin v1.0.0 ``` + ## Commit Message Conventies ```bash @@ -192,6 +194,7 @@ git commit -m "style: Styling aan gebracht" ``` ## Release Draaiend Houden (Tags & Releases) + ```bash git tag -a v1.1.0 -m "Release 1.1.0 - Nieuwe slides en dark mode" git push origin v1.1.0 @@ -210,12 +213,11 @@ git push origin v1.1.0 #### Verhoog de versie bij elke release: ```json - { "version": "1.1.0" } - ``` + #### Gebruik de volgende commando's: ```bash @@ -225,6 +227,7 @@ npm version minor # Nieuwe feature npm version major # Brekende verandering ``` + #### Push tags automatisch mee: ```bash diff --git a/docs/asset-manifest.json b/docs/asset-manifest.json index f04d423..4d9b21c 100644 --- a/docs/asset-manifest.json +++ b/docs/asset-manifest.json @@ -6,8 +6,9 @@ "main.ec9d09e5.css.map": "./static/css/main.ec9d09e5.css.map", "main.d6e15f43.js.map": "./static/js/main.d6e15f43.js.map" }, + "entrypoints": [ "static/css/main.ec9d09e5.css", "static/js/main.d6e15f43.js" ] -} \ No newline at end of file + diff --git a/docs/data/available-months.json b/docs/data/available-months.json index 17816fa..d98e950 100644 --- a/docs/data/available-months.json +++ b/docs/data/available-months.json @@ -1,10 +1,3 @@ { - "months": [ - "2024-12", - "2024-10", - "2024-09", - "2024-08", - "2024-03", - "2024-02" - ] -} \ No newline at end of file + "months": ["2024-12", "2024-10", "2024-09", "2024-08", "2024-03", "2024-02"] +} diff --git a/docs/index.html b/docs/index.html index 224dbd6..d61081a 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1 +1,18 @@ -Cool Uncool
\ No newline at end of file + + + + + + + Cool Uncool + + + + +
+ + + diff --git a/docs/static/css/main.2a9063d3.css b/docs/static/css/main.2a9063d3.css new file mode 100644 index 0000000..a6586dd --- /dev/null +++ b/docs/static/css/main.2a9063d3.css @@ -0,0 +1,208 @@ +#root, +body, +html { + display: flex; + flex-direction: column; + height: 100%; + margin: 0; + overflow: hidden; + padding: 0; + width: 100%; +} +body { + align-items: center; + background-color: #f4f4f9; + color: #333; + display: flex; + font-family: Arial, sans-serif; + justify-content: center; + transition: + background-color 0.3s ease, + color 0.3s ease; +} +.slide { + -webkit-padding-before: 1rem; + margin: auto; + padding-block-start: 1rem; + text-align: center; + width: 100%; +} +.slide p { + -webkit-padding-after: 1rem; + font-size: 1rem; + line-height: 1.5; + margin: auto; + padding-block-end: 1rem; + width: 70%; +} +.slide h2 { + font-size: 1.5rem; + margin-bottom: 0.5rem; +} +.slide ul { + list-style: none; + margin-left: 1.5rem; +} +.slide a { + color: #007bff; + text-decoration: none; +} +.slide a:hover { + text-decoration: underline; +} +.light-mode { + background-color: #f4f4f9; + color: #333; +} +.dark-mode { + background-color: #121212; + color: #fff; +} +.video-container { + aspect-ratio: 16/9; + margin: 0 auto; + max-width: 1400px; + position: relative; + width: 70%; +} +.video-container iframe { + border: none; + height: 100%; + left: 0; + position: relative; + top: 0; + width: 100%; +} +h2 { + font-size: 1.5rem; + margin-bottom: 1 rem; + text-align: center; +} +h1, +p { + margin: 0; + overflow-wrap: break-word; + padding: 0 0 2rem; +} +.slide-deck { + flex-direction: column; + height: 100vh; + justify-content: center; + position: relative; +} +.slide-counter, +.slide-deck { + align-items: center; + box-sizing: border-box; + display: flex; + transition: + background-color 0.3s ease, + color 0.3s ease; + width: 100%; +} +.slide-counter { + background-color: #000c; + bottom: 0; + color: #fff; + font-size: 14px; + justify-content: space-between; + left: 0; + padding: 10px 0; + position: fixed; + text-align: center; +} +.counter-text { + flex: 1 1; + font-weight: 400; + text-align: center; +} +.light-mode .slide-counter { + background-color: #fffc; + color: #333; +} +.slide-icon { + -webkit-margin-after: 1rem; + -webkit-padding-end: 1rem; + font-size: 2rem; + margin-block-end: 1rem; + padding-inline-end: 1rem; + text-align: center; +} +.slide p img { + max-height: 80vh; + object-fit: contain; + width: auto; +} +.dark-mode-toggle { + align-items: center; + background-color: #fff; + background-color: var(--toggle-bg, #fff); + border: 2px solid #ccc; + border-radius: 20px; + color: #333; + color: var(--toggle-color, #333); + cursor: pointer; + display: flex; + gap: 10px; + justify-content: center; + padding: 10px 20px; + position: fixed; + right: 10px; + top: 10px; + transition: + background-color 0.3s, + color 0.3s, + transform 0.2s; +} +.dark-mode-toggle:hover { + transform: scale(1.05); +} +.dark-mode-toggle .icon { + transition: + transform 0.3s ease, + color 0.3s ease; +} +.dark-mode-toggle .label { + font-size: 14px; + font-weight: 700; +} +.dark-mode-toggle.dark { + --toggle-bg: #333; + --toggle-color: #fff; +} +.dark-mode-toggle.light { + --toggle-bg: #fff; + --toggle-color: #333; +} +.month-selector { + align-items: center; + display: flex; + gap: 10px; + margin-left: auto; +} +.month-dropdown { + -webkit-margin-start: 32px; + background-color: #fff; + background-color: var(--toggle-bg, #fff); + border: 2px solid #ccc; + border-radius: 10px; + color: #333; + color: var(--toggle-color, #333); + cursor: pointer; + font-size: 12px; + margin-inline-start: 32px; + padding: 5px 10px; + transition: + background-color 0.3s, + color 0.3s; +} +.month-dropdown:focus { + border-color: #666; + outline: none; +} +.month-label { + display: none; + font-size: 14px; + font-weight: 700; +} +/*# sourceMappingURL=main.2a9063d3.css.map*/ diff --git a/docs/static/js/main.d6e15f43.js b/docs/static/js/main.d6e15f43.js index 714ecea..0b11541 100644 --- a/docs/static/js/main.d6e15f43.js +++ b/docs/static/js/main.d6e15f43.js @@ -1,3 +1,19657 @@ -/*! For license information please see main.d6e15f43.js.LICENSE.txt */ -(()=>{var e={28:(e,t)=>{"use strict";const n=/^[\u0021-\u003A\u003C\u003E-\u007E]+$/,u=/^[\u0021-\u003A\u003C-\u007E]*$/,r=/^([.]?[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?)([.][a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?)*$/i,o=/^[\u0020-\u003A\u003D-\u007E]*$/,l=Object.prototype.toString,a=(()=>{const e=function(){};return e.prototype=Object.create(null),e})();function i(e,t,n){do{const n=e.charCodeAt(t);if(32!==n&&9!==n)return t}while(++tn;){const n=e.charCodeAt(--t);if(32!==n&&9!==n)return t+1}return n}function c(e){if(-1===e.indexOf("%"))return e;try{return decodeURIComponent(e)}catch(t){return e}}},341:e=>{"use strict";var t=Object.prototype.hasOwnProperty,n=Object.prototype.toString,u=Object.defineProperty,r=Object.getOwnPropertyDescriptor,o=function(e){return"function"===typeof Array.isArray?Array.isArray(e):"[object Array]"===n.call(e)},l=function(e){if(!e||"[object Object]"!==n.call(e))return!1;var u,r=t.call(e,"constructor"),o=e.constructor&&e.constructor.prototype&&t.call(e.constructor.prototype,"isPrototypeOf");if(e.constructor&&!r&&!o)return!1;for(u in e);return"undefined"===typeof u||t.call(e,u)},a=function(e,t){u&&"__proto__"===t.name?u(e,t.name,{enumerable:!0,configurable:!0,value:t.newValue,writable:!0}):e[t.name]=t.newValue},i=function(e,n){if("__proto__"===n){if(!t.call(e,n))return;if(r)return r(e,n).value}return e[n]};e.exports=function e(){var t,n,u,r,s,c,D=arguments[0],f=1,d=arguments.length,p=!1;for("boolean"===typeof D&&(p=D,D=arguments[1]||{},f=2),(null==D||"object"!==typeof D&&"function"!==typeof D)&&(D={});f{var t=/\/\*[^*]*\*+([^/*][^*]*\*+)*\//g,n=/\n/g,u=/^\s*/,r=/^(\*?[-#/*\\\w]+(\[[0-9a-z_-]+\])?)\s*/,o=/^:\s*/,l=/^((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^)]*?\)|[^};])+)/,a=/^[;\s]*/,i=/^\s+|\s+$/g,s="";function c(e){return e?e.replace(i,s):s}e.exports=function(e,i){if("string"!==typeof e)throw new TypeError("First argument must be a string");if(!e)return[];i=i||{};var D=1,f=1;function d(e){var t=e.match(n);t&&(D+=t.length);var u=e.lastIndexOf("\n");f=~u?e.length-u:f+e.length}function p(){var e={line:D,column:f};return function(t){return t.position=new h(e),C(),t}}function h(e){this.start=e,this.end={line:D,column:f},this.source=i.source}h.prototype.content=e;var m=[];function F(t){var n=new Error(i.source+":"+D+":"+f+": "+t);if(n.reason=t,n.filename=i.source,n.line=D,n.column=f,n.source=e,!i.silent)throw n;m.push(n)}function g(t){var n=t.exec(e);if(n){var u=n[0];return d(u),e=e.slice(u.length),n}}function C(){g(u)}function E(e){var t;for(e=e||[];t=y();)!1!==t&&e.push(t);return e}function y(){var t=p();if("/"==e.charAt(0)&&"*"==e.charAt(1)){for(var n=2;s!=e.charAt(n)&&("*"!=e.charAt(n)||"/"!=e.charAt(n+1));)++n;if(n+=2,s===e.charAt(n-1))return F("End of comment missing");var u=e.slice(2,n-2);return f+=2,d(u),e=e.slice(n),f+=2,t({type:"comment",comment:u})}}function v(){var e=p(),n=g(r);if(n){if(y(),!g(o))return F("property missing ':'");var u=g(l),i=e({type:"declaration",property:c(n[0].replace(t,s)),value:u?c(u[0].replace(t,s)):s});return g(a),i}}return C(),function(){var e,t=[];for(E(t);e=v();)!1!==e&&(t.push(e),E(t));return t}()}},92:(e,t,n)=>{"use strict";var u=n(395),r=n(225);function o(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n