UI/UX Overhaul

.github/workflows/deploy-dev-to-beta.yml

@@ -0,0 +1,62 @@
+name: Deploy dev -> main:/beta
+
+on:
+  push:
+    branches: [ dev ]
+  workflow_dispatch: {}
+
+jobs:
+  build-and-publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+
+    steps:
+      - name: Checkout dev
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Set up Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: '3.1'
+
+      - name: Install bundler & dependencies
+        run: |
+          gem install bundler
+          bundle config set --local deployment 'true'
+          bundle install --jobs 4 --retry 3
+
+      - name: Build site (Jekyll)
+        run: bundle exec jekyll build --destination _site
+
+      - name: Remove CNAME from build (prevent overriding custom domain)
+        run: rm -f _site/CNAME || true
+
+      - name: Checkout main into separate folder
+        uses: actions/checkout@v4
+        with:
+          repository: ${{ github.repository }}
+          ref: main
+          token: ${{ secrets.GITHUB_TOKEN }}
+          path: main-worktree
+
+      - name: Copy built site into main-worktree/beta
+        run: |
+          rm -rf main-worktree/beta || true
+          mkdir -p main-worktree/beta
+          cp -a _site/. main-worktree/beta/
+
+      - name: Commit & push beta content to main
+        run: |
+          cd main-worktree
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+          git add -A beta
+          git commit -m "Deploy dev -> beta: $GITHUB_SHA" || echo "No changes to commit"
+          # ensure push uses token auth (works around some permission/remote issues)
+          git remote set-url origin https://x-access-token:${{ secrets.GITHUB_TOKEN }}@github.com/${{ github.repository }}.git
+          git push origin main
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -5,3 +5,5 @@ _site/
 .DS_Store
 Dockerfile
 /.vscode
+/.history
+/node_modules

_includes/footer.html

@@ -1,3 +1,3 @@
 <footer class="text-center my-6">
-    <p class="f4-mktg color-fg-muted"> <a href="https://github.com/Iautner/Iautner.github.io" class="">View on Github</a></p>
+    <p class="f4-mktg color-fg-muted">© 2025 Lautner</p>
 </footer>

_includes/links.html

@@ -1,11 +1,11 @@
-<ul class="list-style-none f3 container-sm">
+<ul class="list-style-none container-sm">
     {% for item in site.data.links %}
-    <li class="mb-3 text-center text-semibold">
-        <a href="{{ item.url }}" class="Link--primary d-block p-3 border rounded-3 color-shadow-small color-bg-subtle">
-            <svg class="bi mr-1" width="16" height="16" fill="currentColor">
-                <use xlink:href="{{ site.baseurl }}/assets/img/bootstrap-icons.svg#{{ item.icon | default: 'globe2' }}"/>
-            </svg><br>
-            {{ item.text }}
+    <li>
+        <a href="{{ item.url }}" target="_blank" rel="noopener noreferrer" class="link-card" aria-label="Open {{ item.text }} in new tab">
+            <svg class="bi" width="16" height="16" fill="currentColor">
+                <use xlink:href="assets/img/bootstrap-icons.svg#{{ item.icon | default: 'globe2' }}"/>
+            </svg>
+            <span class="link-text">{{ item.text }}</span>
         </a>
     </li>
     {% endfor %}

_layouts/default.html

@@ -5,26 +5,74 @@
     <meta charset="utf-8">
     <title>{{ site.data.metadata.title }}</title>
     <meta name="description" content="{{ site.data.metadata.description }}">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
+
+    <!-- Enhanced viewport for modern devices -->
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+
+    <!-- PWA and mobile optimizations -->
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="apple-mobile-web-app-title" content="Lautner">
+    <meta name="application-name" content="Lautner">
+    <meta name="msapplication-TileColor" content="#000000">
+    <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
+    <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
+
+    <!-- Performance and SEO -->
+    <meta name="robots" content="index, follow">
+    <meta name="googlebot" content="index, follow">
+    <link rel="canonical" href="{{ site.url }}{{ page.url }}">
+
+    <!-- Icons and manifest -->
     <link rel="icon" href="favicon.ico" type="image/x-icon">
-
+    <link rel="apple-touch-icon" sizes="192x192" href="/manifest-icon-192.maskable.png">
+    <link rel="manifest" href="manifest.json">
+
+    <!-- Preload critical resources -->
     <link rel="preload" href="assets/css/primer.css" as="style">
     <link rel="preload" href="assets/css/custom.css" as="style">
-
+    <link rel="preload" href="assets/js/lazy-load.js" as="script">
+
+    <!-- CSS with enhanced loading -->
     <link rel="stylesheet" href="assets/css/primer.css" media="print" onload="this.media='all'">
     <link rel="stylesheet" href="assets/css/custom.css" media="print" onload="this.media='all'">
     <link rel="stylesheet" href="assets/css/bootstrap-icons.css" media="print" onload="this.media='all'">
-
+    
     <noscript>
         <link rel="stylesheet" href="assets/css/primer.css">
         <link rel="stylesheet" href="assets/css/custom.css">
         <link rel="stylesheet" href="assets/css/bootstrap-icons.css">
     </noscript>
-    <meta property="og:image" content="https://lautner.co/assets/img/thumbnail-og.png">
+
+    <!-- Enhanced Open Graph -->
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="{{ site.url }}{{ page.url }}">
     <meta property="og:title" content="Lautner's Links">
-<script>navigator.serviceWorker.register("service-worker.js")</script> 
-<link rel="manifest" href="/manifest.json" />    <meta property="og:description" content="Fun Minecraft content, modded Minecraft, let's play, and challenge videos!">
+    <meta property="og:description" content="Fun Minecraft content, modded Minecraft, let's play, and challenge videos!">
+    <meta property="og:image" content="{{ '/assets/img/thumbnail-og.png' | absolute_url }}">
+    <meta property="og:site_name" content="Lautner">
+
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="Lautner's Links">
+    <meta name="twitter:description" content="Fun Minecraft content, modded Minecraft, let's play, and challenge videos!">
+    <meta name="twitter:image" content="{{ '/assets/img/thumbnail-og.png' | absolute_url }}">
+
+    <!-- Enhanced Service Worker Registration -->
+    <script>
+        if ('serviceWorker' in navigator) {
+            window.addEventListener('load', () => {
+                navigator.serviceWorker.register('service-worker.js')
+                    .then(registration => {
+                        console.log('SW registered: ', registration);
+                    })
+                    .catch(registrationError => {
+                        console.log('SW registration failed: ', registrationError);
+                    });
+            });
+        }
+    </script>
 </head>
 
 <body class="p-3">
@@ -34,7 +82,25 @@
         {% include links.html %}
         {% include footer.html %}
     </main>
-    <script src="assets/js/lazy-load.js" defer></script>
+
+    <!-- Enhanced scripts -->
+    <script src="assets/js/lazy-load.js"></script>
+
+    <!-- Minimal initialization -->
+    <script>
+        // Prevent zoom on double tap (iOS Safari) but allow scrolling
+        let lastTouchEnd = 0;
+        document.addEventListener('touchend', event => {
+            const now = (new Date()).getTime();
+            if (now - lastTouchEnd <= 300) {
+                // Only prevent default for non-scrollable elements
+                if (!event.target.closest('.scrollable, main, body')) {
+                    event.preventDefault();
+                }
+            }
+            lastTouchEnd = now;
+        }, false);
+    </script>
 </body>
 
 </html>