News and update dialog

.env.example

@@ -1,7 +1,7 @@
 APP_NAME=PGEtinker
 APP_ENV=local
 APP_KEY=
-APP_DEBUG=true
+APP_DEBUG=false
 APP_TIMEZONE=UTC
 APP_URL=http://127.0.0.1:8000
 

.github/workflows/test-on-push-main.yml

@@ -16,8 +16,8 @@ jobs:
       - name: Install Dependencies
         run: npm install && npm run build && composer install --prefer-dist --no-interaction --no-progress && php artisan dusk:chrome-driver --detect
 
-      - name: Copy environment file
-        run: cp .env.example .env
+      - name: Copy environment file and set version
+        run: cp .env.example .env && echo "VERSION=$(git rev-parse HEAD)" >> .env && echo "VITE_VERSION=$(git rev-parse HEAD)" >> .env && EXPORT PGETINKER_VERSION="$(git rev-parse HEAD)"
 
       - name: Build Library Objects
         run: bash build-libs.sh
@@ -57,4 +57,4 @@ jobs:
         uses: docker/build-push-action@v5
         with:
           push: true
-          tags: moros1138/pgetinker:latest
+          tags: moros1138/pgetinker:latest "moros1138/pgetinker:$PGETINKER_VERSION"

.gitignore

@@ -20,4 +20,3 @@ yarn-error.log
 
 third_party/v*/lib
 third_party/v*/model.h
-/resources/js/lib/version.js

CHANGELOG.md

@@ -0,0 +1,14 @@
+# Changelog
+
+All notable changes to this project will be documented in this file. Each batch of changes is marked by the date it was published to the repository for deployment to the PGEtinker site.
+
+It is a summary of changes that would be pertinent to the end user of the PGEtinker website. For a comprehensive history of changes made to the project, please refer to the repository's commit history.
+
+## 2024-05-01
+
+- Added the changelog
+- Added the first changelog entry
+- Added version indicators in frontend/backend
+- Added versioning to the container image build process
+- Added Pixel Code font
+- Removed unused assets

package.json

@@ -2,8 +2,8 @@
     "private": true,
     "type": "module",
     "scripts": {
-        "dev": "node version.js && vite",
-        "build": "node version.js && vite build"
+        "dev": "vite",
+        "build": "vite build"
     },
     "devDependencies": {
         "axios": "^1.6.4",

resources/css/app.scss

@@ -64,10 +64,12 @@ a:link,
 a:visited,
 a:active {
     color: var(--link-color);
+    text-decoration: none;
 }
 
 a:hover {
     color: var(--link-hover-color);
+    text-decoration: underline;
 }
 
 #app {

resources/css/dialog.scss

@@ -16,8 +16,8 @@
 }
 
 .dialog .window {
-    width: 80vw;
-    max-width: 40rem;
+    width: 90vw;
+    max-width: 80rem;
     margin: 10vh auto;
     background: var(--dialog-background-color);
     font-size: 1.2rem;
@@ -29,6 +29,8 @@
 .dialog .window > .header {
     border-bottom: 1px solid var(--dialog-border-color);
     padding: 0.4rem 1rem;
+    font-weight: bold;
+    font-size: 2rem;
 }
 
 .dialog .window > .content {
@@ -104,3 +106,26 @@
 .dialog .window li {
     padding-bottom: 1rem;
 }
+
+.dialog.news .entries {
+    margin: 1rem 0 3rem 0;
+}
+
+.dialog.news .entries div {
+    margin-bottom: 1rem;
+}
+
+.dialog.news .added:before {
+    content: "+ Added: ";
+    color: rgb(92, 250, 255);
+}
+
+.dialog.news .removed:before {
+    content: "‐ Removed: ";
+    color: rgb(248, 102, 102);
+}
+
+.dialog.news .fixed:before {
+    content: "✔ Fixed: ";
+    color: rgb(252, 252, 170);
+}

resources/js/app.js

@@ -5,6 +5,7 @@ import './lib/lucide';
 import version from "./lib/version";
 import agreeDialog from './lib/agreeDialog';
 import shareDialog from './lib/shareDialog';
+import newsDialog from './lib/newsDialog';
 import defaultLayout from './lib/defaultLayout';
 
 class PGEtinker
@@ -200,6 +201,12 @@ class PGEtinker
             alert("Not Implemented");
         });
 
+        document.querySelector("#news-and-updates").addEventListener("click", (event) =>
+        {
+            event.preventDefault();
+            newsDialog();
+        });
+
         window.addEventListener("message", (event) =>
         {
             if(typeof event.data !== "object")
@@ -467,6 +474,19 @@ class PGEtinker
         });
 
         this.layout.init();
+
+        let pgetinkerVersion = window.localStorage.getItem("pgetinkerVersion");
+        pgetinkerVersion = (pgetinkerVersion != "string") ? pgetinkerVersion : "";
+
+        if(version !== pgetinkerVersion)
+        {
+            newsDialog()
+                .finally(() =>
+                {
+                    window.localStorage.setItem("pgetinkerVersion", version);
+                });
+        }
+
     }
 
     UpdateStatusBar()
@@ -531,14 +551,6 @@ class PGEtinker
         // save theme into localStorage
         window.localStorage.setItem("pgetinkerTheme", this.theme);
     }
-
 }
 
 new PGEtinker();
-
-// let pgetinkerVersion = window.localStorage.getItem("pgetinkerVersion");
-// pgetinkerVersion = (pgetinkerVersion != "string") ? pgetinkerVersion : "";
-
-// console.log((version != pgetinkerVersion));
-
-

resources/js/lib/lucide.js

@@ -1,5 +1,6 @@
 import {
     createIcons,
+    BadgePlus,
     Bug,
     CircleDollarSign,
     CirclePlay,
@@ -16,6 +17,7 @@ import {
 
 createIcons({
     icons: {
+        BadgePlus,
         Bug,
         CirclePlay,
         CircleDollarSign,

resources/js/lib/newsDialog.js

@@ -0,0 +1,60 @@
+import version from "./version";
+export default function newsDialog()
+{
+    function newsClickAnywhereHandler(event)
+    {
+        let newsDialog = document.querySelector(".dialog.news");
+        if(newsDialog == null)
+            return;
+
+        newsDialog.dispatchEvent(new Event("close-dialog"));
+    }
+
+    return new Promise((resolve) =>
+    {
+        let newsDialog = document.createElement("div");
+
+        newsDialog.classList.toggle("dialog", true);
+        newsDialog.classList.toggle("news", true);
+
+        axios.get("/api/news").then((response) =>
+        {
+
+            let entries = [];
+
+            response.data.entries.forEach((entry) =>
+            {
+                entries.push(`<div class="${entry.type}">${entry.message}</div>`);
+            });
+
+            newsDialog.innerHTML = `
+            <div class="window">
+                <div class="header">News and Updates</div>
+                <div class="content">
+                    <h3>PGEtinker has been updated. Here's what's been done:</h3>
+                    <h3>${response.data.date}</h3>
+                    <div class="entries">${entries.join("")}</div>
+
+                    <p>
+                        For more details visit the <a href="https://github.com/Moros1138/PGEtinker" target="_blank">PGEtinker github repository</a>.
+                    </p>
+                    <p>
+                    Version: ${version}
+                    </p>
+                </div>
+            </div>`;
+
+            newsDialog.addEventListener("close-dialog", (event) =>
+            {
+                setTimeout(() => window.removeEventListener("click", newsClickAnywhereHandler), 500);
+                newsDialog.remove();
+                resolve();
+            });
+
+            setTimeout(() => window.addEventListener("click", newsClickAnywhereHandler), 500);
+            document.body.appendChild(newsDialog);
+        });
+
+    });
+
+}

resources/js/lib/version.js

@@ -0,0 +1,2 @@
+const version = import.meta.env.VITE_VERSION || "develop";
+export default version;

resources/views/home.blade.php

@@ -79,11 +79,15 @@
                             <i data-lucide="circle-dollar-sign"></i>
                             Become a Supporter
                         </a>
+                        <a href="#" id="news-and-updates">
+                            <i data-lucide="badge-plus"></i>    
+                            What's New
+                        </a>
                         <a target="_blank" href="https://github.com/Moros1138/PGEtinker">
                             <i data-lucide="github"></i>
                             PGEtinker on Github
                         </a>
-                        <a target="_blank" href="https://github.com/Moros1138/PGEtinker/issues/new?assignees=Moros1138&labels=bug&projects=&template=bug_report.md&title=">
+                        <a target="_blank" href="https://github.com/Moros1138/PGEtinker/issues/new?assignees=Moros1138&labels=bug&projects=&template=bug_report.md&title=Bug in Version: {{ env('VERSION', 'develop') }}">
                             <i data-lucide="bug"></i>
                             Report an issue
                         </a>

routes/api.php

@@ -24,3 +24,49 @@
         "code" => file_get_contents(base_path() . '/resources/example.cpp')
     ];
 });
+
+Route::get("/news", function(Request $request)
+{
+    $changeLog = new stdClass();
+
+    $lines = file(base_path() . "/CHANGELOG.md");
+
+    $start = 0;
+
+    for($i = 0; $i < count($lines); $i++)
+    {
+        if($start == 0)
+        {
+            if(strpos($lines[$i], "## ") === 0)
+            {
+                $start = $i;
+                $changeLog->date = trim(str_replace("## ", "", $lines[$i]));
+                $changeLog->entries = [];
+                continue;
+            }
+        }
+
+        if($start > 0)
+        {
+            if(strpos($lines[$i], "## ") === 0)
+            {
+                break;
+            }
+
+            $tokens = explode(" ", $lines[$i]);
+            if($tokens[0] == "-")
+            {
+                $entry = new stdClass();
+                $entry->type = strtolower($tokens[1]);
+
+                unset($tokens[0]);
+                unset($tokens[1]);
+
+                $entry->message = trim(implode(" ", $tokens));
+                $changeLog->entries[] = $entry;
+            }
+        }
+    }
+
+    return $changeLog;
+});

tests/Browser/QuickTest.php

@@ -45,6 +45,23 @@ public function testAgreeRevealsTheApplication(): void
         });
     }
 
+    public function testShowsNewsAndUpdates(): void
+    {
+        $this->browse(function(Browser $browser)
+        {
+            $browser->visit("/");
+            $browser->pause(1000);
+            $browser->assertSee("News and Updates");
+
+            $browser->pause(1000);
+
+            $browser->click(".news");
+
+            $browser->pause(1000);
+            $browser->assertNotPresent(".news");
+        });
+    }
+
 
     public function testLoadsDefaultCodeOnClick(): void
     {