parcel and github action to build the page

klausbreyer · Aug 19, 2022 · e6cd67a · e6cd67a
1 parent 95467cc
commit e6cd67a
Show file tree

Hide file tree

Showing 14 changed files with 1,451 additions and 144 deletions.
diff --git a/.github/workflows/pages-deployment.yml b/.github/workflows/pages-deployment.yml
@@ -9,14 +9,17 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v3
-      # Run your project's build step
-      # - name: Build
-      #   run: npm install && npm run build
+      - name: Setup
+        run: |
+          sudo apt-get install nodejs yarn
+      - name: Build
+        run: |
+          yarn && yarn run parcel build src/index.html --public-url . --dist-dir dist-parcel
       - name: Publish
         uses: cloudflare/pages-action@1
         with:
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
           projectName: unixtime-app # e.g. 'my-project'
-          directory: src # e.g. 'dist'
+          directory: dist-parcel # e.g. 'dist'
           gitHubToken: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.gitignore b/.gitignore
@@ -15,4 +15,6 @@ embedded.provisionprofile
 dist
 out
 embedded.provisionprofile
-build/icon.png
+build/icon.png
+dist-parcel
+.parcel-cache
diff --git a/.posthtmlrc b/.posthtmlrc
@@ -0,0 +1,8 @@
+{
+  "plugins": {
+    "posthtml-doctype": {
+      "doctype": "HTML 5"
+    },
+    "posthtml-include": {}
+  }
+}
diff --git a/Makefile b/Makefile
@@ -1,15 +1,39 @@
-local:
-	rm -rf dist
-	rm -rf out
-	yarn package
-
 start:
-	yarn start
+	make start-electron & make start-parcel
+
+start-electron:
+	yarn run electron-forge start
+
+start-parcel:
+	rm -rf dist-parcel
+	yarn run parcel  src/index.html --public-url . --dist-dir dist-parcel
+
+patch:
+	yarn version --patch
+	make magic
+
+minor:
+	yarn version --minor
+	make magic
 
 magic:
-	make release
+	make build-parcel
+	make magic-electron
+
+build-parcel:
+	rm -rf dist-parcel
+	yarn run parcel  build src/index.html --public-url . --dist-dir dist-parcel
+
+magic-electron:
+	make build-electron
 	make upload
 
+build-electron:
+	rm -rf dist
+	rm -rf out
+	make icons
+	yarn run electron-builder
+
 upload:
 	xcrun altool --validate-app -f ${shell find dist/mas-universal -name "*.pkg" | head -n 1} -u ${APPLE_ID} -p ${APPLE_PASSWORD} --type macos
 	xcrun altool --upload-app -f ${shell find dist/mas-universal -name "*.pkg" | head -n 1} -u ${APPLE_ID} -p ${APPLE_PASSWORD} --type macos
@@ -18,19 +42,16 @@ icons:
 	cp build/[email protected] build/icon.png
 	cp build/Artwork.png src/favicon.png
 
-release:
+# local
+package-electron:
 	rm -rf dist
 	rm -rf out
-	make icons
-	yarn dist
-
-patch:
-	yarn version --patch
-	make magic
-
-minor:
-	yarn version --minor
-	make magic
+	yarn run electron-forge package
 
+# just to create the favicon.ico
 icon:
 	convert -resize x16 -gravity center -crop 16x16+0+0 build/Artwork.png -flatten -colors 256 -background transparent src/favicon.ico
+
+
+#unused
+# yarn run electron-builder --dir
diff --git a/main.js b/main.js
@@ -13,7 +13,7 @@ const createWindow = () => {
   });
 
   // and load the index.html of the app.
-  mainWindow.loadFile("src/index.html");
+  mainWindow.loadFile("dist-parcel/index.html");
 
   // Open the DevTools.
   // mainWindow.webContents.openDevTools()

diff --git a/src/index.js → src/app.js b/src/index.js → src/app.js
diff --git a/src/header.html b/src/header.html
@@ -0,0 +1,20 @@
+<header>
+    <nav>
+        <h1>
+            <a href="/">unixtime.app</a>
+        </h1>
+        <a href="story.html">Background Story</a>
+        <a href="support.html">Support</a>
+        <a href="https://v01.io/category/v01-software/unixtime-app/"
+            target="_blank">Blog</a>
+        <p>&copy;<a href="https://v01.software/"
+                target="_blank">v01.software</a></p>
+        <a href="https://v01.io/imprint/" target="_blank">Contact</a>
+    </nav>
+    <div id="support">
+        <a href="https://apps.apple.com/de/app/unixtime-app/id1627321235?l=en&mt=12"
+            target="_blank"><img src="./images/mas.svg" /></a>
+        <a href="https://apps.microsoft.com/store/detail/unixtimeapp/9NXBTRZH3ZQN?hl=de-de&gl=de"
+            target="_blank"><img src="./images/ms.svg" /></a>
+    </div>
+</header>
diff --git a/src/index.css b/src/index.css
@@ -73,7 +73,7 @@ textarea {
   margin: 0;
   padding: 0;
   flex: 1;
-  height: 100%;
+  /* height: 100%; */
   color: #c9d1d9;
   background-color: #0d1117;
   border-width: 0;
@@ -84,20 +84,18 @@ pre {
   overflow: hidden;
 }
 
-.inverse {
-  color: #1d1e1f;
-  background-color: #c9d1d9;
-  font-weight: bold;
-}
-
 textarea {
-  border-right: 1px solid #c9d1d9;
-  padding: 1em;
   border: none;
   resize: none;
   outline: none;
-
   overflow: auto;
+  padding: 1em;
+}
+
+.inverse {
+  color: #1d1e1f;
+  background-color: #c9d1d9;
+  font-weight: bold;
 }
 
 header {

diff --git a/src/index.html b/src/index.html
@@ -1,46 +1,16 @@
 <html>
 
 <head>
+    <include src="src/metas.html"></include>
     <title>unixtime.app</title>
-    <meta charset="utf-8" />
-    <link rel="manifest" href="manifest.json" />
-    <link rel="icon" href="favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="description"
         content="unixtime.app is an Web App to replace unix timestamps in large chunks of text data." />
 
-    <link rel="stylesheet" href="index.css" />
-    <link rel="stylesheet" href="./lib/highlight.js-11.5.1/github-dark.min.css">
-    <script type="module">
-        import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate';
-        const el = document.createElement('pwa-update');
-        document.body.appendChild(el);
-    </script>
 </head>
 
 <body>
     <main>
-        <header>
-            <nav>
-                <h1>
-                    <a href="/">unixtime.app</a>
-                </h1>
-                <a href="/story.html">Background Story</a>
-                <a href="support.html">Support</a>
-                <a href="https://v01.io/category/v01-software/unixtime-app/"
-                    target="_blank">Blog</a>
-                <p>&copy;<a href="https://v01.software/"
-                        target="_blank">v01.software</a></p>
-                <a href="https://v01.io/imprint/" target="_blank">Contact</a>
-            </nav>
-            <div id="support">
-                <a href="https://apps.apple.com/de/app/unixtime-app/id1627321235?l=en&mt=12"
-                    target="_blank"><img src="./images/mas.svg" /></a>
-                <a href="https://apps.microsoft.com/store/detail/unixtimeapp/9NXBTRZH3ZQN?hl=de-de&gl=de"
-                    target="_blank"><img src="./images/ms.svg" /></a>
-            </div>
-        </header>
-
+        <include src="src/header.html"></include>
         <div id="app">
             <textarea id="input"></textarea>
             <pre disabled><code id="output"  class="language-json"></code></pre>
@@ -138,12 +108,11 @@ <h3>Settings</h3>
                 <option value="1971">since 1971</option>
                 <option value="Epoch">since Epoch</option>
             </select>
-
         </div>
     </footer>
 
 
-    <script src="index.js"></script>
+    <script src="app.js"></script>
 
     <script src="./lib/highlight.js-11.5.1/highlight.min.js"></script>
     <script>hljs.highlightAll();</script>

diff --git a/src/manifest.json b/src/manifest.json
@@ -14,7 +14,7 @@
       "src": "https://www.unixtime.app/images/logo.png"
     },
     {
-      "src": "/favicon.ico",
+      "src": "favicon.ico",
       "type": "image/x-icon"
     }
   ]

diff --git a/src/metas.html b/src/metas.html
@@ -0,0 +1,13 @@
+<meta charset="utf-8" />
+<link rel="manifest" href="manifest.json" />
+<link rel="icon" href="favicon.png" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+
+<link rel="stylesheet" href="index.css" />
+<link rel="stylesheet" href="./lib/highlight.js-11.5.1/github-dark.min.css">
+<script type="module">
+    const src = "https://unpkg.com/[email protected]/bin/canvaskit.js";
+    import(src);
+    const el = document.createElement('pwa-update');
+    document.body.appendChild(el);
+</script>
diff --git a/src/story.html b/src/story.html
@@ -1,45 +1,17 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
 
 <head>
-    <title>unixtime.app - Background Story</title>
-    <meta charset="utf-8" />
-    <link rel="manifest" href="manifest.json" />
-    <link rel="icon" href="favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <include src="src/metas.html"></include>
+    <title>unixtime.app</title>
     <meta name="description"
         content="unixtime.app is an Web App to replace unix timestamps in large chunks of text data." />
 
-    <link rel="stylesheet" href="index.css" />
-    <link rel="stylesheet" href="./lib/highlight.js-11.5.1/github-dark.min.css">
-    <script type="module">
-        import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate';
-        const el = document.createElement('pwa-update');
-        document.body.appendChild(el);
-    </script>
 </head>
 
 <body>
     <main>
-        <header>
-            <nav>
-                <h1>
-                    <a href="/">unixtime.app</a>
-                </h1>
-                <a href="/story.html">Background Story</a>
-                <a href="support.html">Support</a>
-                <a href="https://v01.io/category/v01-software/unixtime-app/"
-                    target="_blank">Blog</a>
-                <p>&copy;<a href="https://v01.software/"
-                        target="_blank">v01.software</a></p>
-                <a href="https://v01.io/imprint/" target="_blank">Contact</a>
-            </nav>
-            <div id="support">
-                <a href="https://apps.apple.com/de/app/unixtime-app/id1627321235?l=en&mt=12"
-                    target="_blank"><img src="./images/mas.svg" /></a>
-                <a href="https://apps.microsoft.com/store/detail/unixtimeapp/9NXBTRZH3ZQN?hl=de-de&gl=de"
-                    target="_blank"><img src="./images/ms.svg" /></a>
-            </div>
-        </header>
+        <include src="src/header.html"></include>
         <article>
             <h1>The unixtime.app background Story</h1>
             <p> Hi, I'm Klaus Breyer. And I am the author of unixtime.app: An
@@ -239,7 +211,5 @@ <h2>Call to Action</h2>
     </main>
 
 </body>
-</p>
-<p>
 
 </html>
diff --git a/src/support.html b/src/support.html
@@ -1,45 +1,16 @@
 <html>
 
 <head>
-    <title>unixtime.app - Support</title>
-    <meta charset="utf-8" />
-    <link rel="manifest" href="manifest.json" />
-    <link rel="icon" href="favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <include src="src/metas.html"></include>
+    <title>unixtime.app</title>
     <meta name="description"
         content="unixtime.app is an Web App to replace unix timestamps in large chunks of text data." />
 
-    <link rel="stylesheet" href="index.css" />
-    <link rel="stylesheet" href="./lib/highlight.js-11.5.1/github-dark.min.css">
-    <script type="module">
-        import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate';
-        const el = document.createElement('pwa-update');
-        document.body.appendChild(el);
-    </script>
 </head>
 
 <body>
     <main>
-        <header>
-            <nav>
-                <h1>
-                    <a href="/">unixtime.app</a>
-                </h1>
-                <a href="/story.html">Background Story</a>
-                <a href="support.html">Support</a>
-                <a
-                    href="https://v01.io/category/v01-software/unixtime-app/">Blog</a>
-                <p>&copy;<a href="https://v01.software/"
-                        target="_blank">v01.software</a></p>
-                <a href="https://v01.io/imprint/" target="_blank">Contact</a>
-            </nav>
-            <div id="support">
-                <a href="https://apps.apple.com/de/app/unixtime-app/id1627321235?l=en&mt=12"
-                    target="_blank"><img src="./images/mas.svg" /></a>
-                <a href="https://apps.microsoft.com/store/detail/unixtimeapp/9NXBTRZH3ZQN?hl=de-de&gl=de"
-                    target="_blank"><img src="./images/ms.svg" /></a>
-            </div>
-        </header>
+        <include src="src/header.html"></include>
 
         <article>