Update index.html and dist/index.html for improved clarity and stylin…

…g; add GitHub Pages deployment workflow
VincentLoy · Dec 28, 2024 · 9c9cd83 · 9c9cd83
1 parent a67d5d3
commit 9c9cd83
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 11 deletions.
diff --git a/.github/workflows/deploy-pages.yml b/.github/workflows/deploy-pages.yml
@@ -0,0 +1,43 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["master"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload docs/dist directory
+          path: 'docs/dist'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/docs/dist/assets/main.min.css b/docs/dist/assets/main.min.css
diff --git a/docs/dist/index.html b/docs/dist/index.html
@@ -20,7 +20,7 @@
     <!-- Fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:[email protected]&display=swap" rel="stylesheet">
 
     <!-- Added Schema.org markup -->
     <script type="application/ld+json">
@@ -57,11 +57,12 @@
 <body class="bg-slate-900 p-0 font-sans text-white" id="top">
     <header class="bg-gradient-to-br from-indigo-600 to-violet-600 text-white pt-40 pb-20">
         <div class="container text-center md:text-left mx-auto px-4" itemscope itemtype="https://schema.org/WebApplication">
-            <h1 class="text-3xl sm:text-4xl md:text-5xl font-bold mb-4" itemprop="name">
+            <h1 class="text-3xl sm:text-4xl md:text-6xl font-bold mb-4" itemprop="name">
                 <span>simplyCountdown.js</span>
             </h1>
-            <p class="text-sm md:text-xl text-indigo-100 mb-8" itemprop="description">
-                A lightweight (&lt;5KB) JavaScript countdown library with zero dependencies
+            <p class="flex text-sm md:text-xl text-indigo-100 mb-8 justify-center md:justify-start" itemprop="description">
+                <span class="icon-[lucide--timer-reset] w-7 h-7" title="Timer" role="img" aria-label="Timer"></span>
+                <span class="transform translate-y-3px">&nbsp;A lightweight (&lt;5KB) JavaScript countdown library with zero dependencies</span>
             </p>
             <div class="flex flex-col md:flex-row items-center gap-4">
                 <div class="md:flex gap-4 w-full md:w-auto">
@@ -205,7 +206,7 @@ <h2 id="why-simply-countdown" class="text-3xl font-bold mb-8 flex items-center g
                             </h2>
                             <div class="sc-doc-block">
                                 <div class="prose text-white">
-                                    <h3 class="text-xl font-semibold mb-4 text-indigo-400">Key Benefits</h3>
+                                    <h3 class="text-xl font-bold mb-4 text-indigo-400">Key Benefits</h3>
                                     <ul class="list-disc pl-6 mb-6">
                                         <li>Lightweight: Less than 5KB minified</li>
                                         <li>Easy Integration: Works with any JavaScript project</li>
@@ -446,7 +447,7 @@ <h2 id="control" class="text-3xl font-bold mb-8 flex items-center gap-2">
                         <span class="icon-[lucide--toggle-left] w-6 h-6 text-indigo-600"></span>
                         Countdown Controller
                     </h2>
-                    <h3 class="text-xl font-bold mb-4">Control Methods</h3>
+                    <h3 class="text-xl font-bold mb-4">Control Methods API</h3>
                     <p class="mb-2 text-lg">
                         Control your countdown timers with precision using the returned controller object.
                         <strong class="font-bold text-indigo-400">simplyCountdown's</strong> API lets you stop, resume, and update countdowns dynamically.
@@ -578,7 +579,7 @@ <h3 id="themes-import" class="text-xl font-bold mb-4">Countdown Ready-to-use The
         <div class="container mx-auto px-4">
             <h2 class="text-3xl font-bold mb-8 flex items-center gap-2">
                 <span class="icon-[lucide--git-branch] w-6 h-6 text-indigo-600"></span>
-                Migration Guide: v1.x/v2.x to v3.x
+                What's new? v1.x/v2.x to v3.x
             </h2>
 
             <div class="grid gap-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
@@ -674,7 +675,7 @@ <h3 class="text-xl font-semibold mb-4 text-indigo-400 flex items-center">
 
     <!-- Add before closing body tag -->
     <button id="scrollTopBtn"
-            class="fixed bottom-10 right-10 z-50 bg-indigo-600 hover:bg-indigo-700 text-white w-12 h-12 rounded-full shadow-lg transition-all duration-300 opacity-0 translate-y-10 flex items-center justify-center"
+            class="fixed bottom-8 right-8 z-50 bg-indigo-600 hover:bg-indigo-700 text-white w-12 h-12 rounded-full shadow-lg transition-all duration-300 opacity-0 translate-y-10 flex items-center justify-center"
             aria-label="Scroll to top">
         <span class="icon-[lucide--chevron-up] w-5 h-5"></span>
     </button>

diff --git a/docs/src/index.html b/docs/src/index.html
@@ -445,7 +445,7 @@ <h2 id="control" class="text-3xl font-bold mb-8 flex items-center gap-2">
                         <span class="icon-[lucide--toggle-left] w-6 h-6 text-indigo-600"></span>
                         Countdown Controller
                     </h2>
-                    <h3 class="text-xl font-bold mb-4">Control Methods</h3>
+                    <h3 class="text-xl font-bold mb-4">Control Methods API</h3>
                     <p class="mb-2 text-lg">
                         Control your countdown timers with precision using the returned controller object.
                         <strong class="font-bold text-indigo-400">simplyCountdown's</strong> API lets you stop, resume, and update countdowns dynamically.
@@ -577,7 +577,7 @@ <h3 id="themes-import" class="text-xl font-bold mb-4">Countdown Ready-to-use The
         <div class="container mx-auto px-4">
             <h2 class="text-3xl font-bold mb-8 flex items-center gap-2">
                 <span class="icon-[lucide--git-branch] w-6 h-6 text-indigo-600"></span>
-                Migration Guide: v1.x/v2.x to v3.x
+                What's new? v1.x/v2.x to v3.x
             </h2>
 
             <div class="grid gap-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">