Merge pull request #10 from rtuszik/templates

templates
rtuszik · Oct 11, 2024 · 415e04a · 415e04a
2 parents 6b5bc02 + 33ebc4b
commit 415e04a
Show file tree

Hide file tree

Showing 6 changed files with 193 additions and 83 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,7 +1,8 @@
 .aider*
 output/*
-# Created by https://www.toptal.com/developers/gitignore/api/Vim,macOS,Python,venv
-# Edit at https://www.toptal.com/developers/gitignore?templates=Vim,macOS,Python,venv
+
+cheatsheets/*
+!cheatsheets/example.yaml
 
 ### macOS ###
 # General

diff --git a/assets/icons/KoalaKeys.png b/assets/icons/KoalaKeys.png
diff --git a/assets/icons/KoalaKeys_Large.png b/assets/icons/KoalaKeys_Large.png
diff --git a/cheatsheets/example.yaml b/cheatsheets/example.yaml
@@ -1,12 +1,15 @@
-title: Example
+title: "Default macOS Keyboard Shortcuts"
+layout:
+  keyboard: US
+  system: Darwin
 shortcuts:
-  File Operations:
-    "Cmd+C":
-      description: "Copy"
-    "Cmd+V":
-      description: "Paste"
-    "Cmd+S":
-      description: "Save"
-  Window Management:
-    "CMD+H":
-      description: "Hide Current Window"
+  General:
+    "CMD+C":
+      description: "Copy selected item"
+    "CMD+X":
+      description: "Cut selected item"
+  File and App Management:
+    "CMD+N":
+      description: "Open new window or document"
+    "CMD+O":
+      description: "Open selected item or display dialog to choose file to open"
diff --git a/src/cheatsheet_template.html b/src/cheatsheet_template.html
@@ -347,34 +347,6 @@
         height: 25px;
         font-size: 14px;
       }
-      #dark-mode-toggle {
-        position: fixed;
-        top: 20px;
-        right: 20px;
-        padding: 10px 15px;
-        background-color: var(--latte-lavender);
-        color: var(--latte-base);
-        border: none;
-        border-radius: 8px;
-        cursor: pointer;
-        transition:
-          background-color 0.3s,
-          transform 0.2s;
-        font-weight: 600;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-      }
-      #dark-mode-toggle:hover {
-        background-color: var(--latte-sapphire);
-        transform: translateY(-2px);
-      }
-      body.dark-mode #dark-mode-toggle {
-        background-color: var(--mocha-peach);
-        color: var(--mocha-base);
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-      }
-      body.dark-mode #dark-mode-toggle:hover {
-        background-color: var(--mocha-maroon);
-      }
       .wide {
         width: 65px;
       }
@@ -485,7 +457,7 @@
         transform: translateX(-50%);
       }
 
-      #theme-toggle {
+      #dark-mode-toggle {
         flex: 0 0 auto;
         position: relative;
         z-index: 1002;
@@ -497,7 +469,7 @@
         transition: color 0.3s;
       }
 
-      body.dark-mode #theme-toggle {
+      body.dark-mode #dark-mode-toggle {
         color: var(--mocha-text);
       }
 
@@ -627,8 +599,8 @@ <h1>{{ title }}</h1>
         />
       </div>
       <button
-        id="theme-toggle"
-        class="theme-toggle"
+        id="dark-mode-toggle"
+        class="dark-mode-toggle"
         aria-label="Toggle dark mode"
       >
         <span id="theme-icon">◐</span>
@@ -876,21 +848,21 @@ <h2>{{ section }}</h2>
       // Call generateKeyboard on page load
       document.addEventListener("DOMContentLoaded", generateKeyboard);
 
-      // Theme toggle functionality
-      const themeToggle = document.getElementById("theme-toggle");
+      // Dark-Mode toggle functionality
+      const darkModeToggle = document.getElementById('dark-mode-toggle');
       const themeIcon = document.getElementById("theme-icon");
       const body = document.body;
 
-      function updateThemeToggle() {
+      function updateDarkModeToggle() {
         themeIcon.textContent = body.classList.contains("dark-mode")
           ? "☀️"
           : "🌙";
       }
 
-      themeToggle.addEventListener("click", () => {
+      darkModeToggle.addEventListener("click", () => {
         body.classList.toggle("dark-mode");
         localStorage.setItem("darkMode", body.classList.contains("dark-mode"));
-        updateThemeToggle();
+        updateDarkModeToggle();
         adjustLayout();
       });
 
@@ -920,7 +892,7 @@ <h2>{{ section }}</h2>
         body.classList.remove("dark-mode");
       }
 
-      updateThemeToggle();
+      updateDarkModeToggle();
       adjustLayout();
 
       function highlightKeys(shortcut) {

diff --git a/src/index_template.html b/src/index_template.html
@@ -88,47 +88,41 @@
         background-color: var(--mocha-base);
       }
 
+      .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      #logo_img {
+        top: 10px;
+        left: 10px;
+      }
+
       h1 {
+        flex-grow: 2;
         color: var(--latte-mauve);
         text-align: center;
         font-size: 2.5rem;
         margin-bottom: 2rem;
+        margin-right: 8rem;
       }
 
       body.dark-mode h1 {
         color: var(--mocha-mauve);
       }
 
       #dark-mode-toggle {
-        position: fixed;
-        top: 20px;
-        right: 20px;
-        padding: 10px 15px;
-        background-color: var(--latte-blue);
-        color: var(--latte-base);
+        background: none;
         border: none;
-        border-radius: 8px;
         cursor: pointer;
-        transition:
-          background-color 0.3s,
-          transform 0.2s;
-        font-weight: 600;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-      }
-
-      #dark-mode-toggle:hover {
-        background-color: var(--latte-sapphire);
-        transform: translateY(-2px);
+        font-size: 24px;
+        color: var(--text);
+        transition: color 0.3s;
       }
 
       body.dark-mode #dark-mode-toggle {
-        background-color: var(--mocha-peach);
-        color: var(--mocha-base);
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-      }
-
-      body.dark-mode #dark-mode-toggle:hover {
-        background-color: var(--mocha-maroon);
+        color: var(--mocha-text);
       }
 
       .controls {
@@ -313,11 +307,122 @@
         opacity: 0.5;
         cursor: not-allowed;
       }
+
+      footer {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        width: 40%;
+        margin-left: auto;
+        margin-right: auto;
+        margin-top: 8px;
+        padding: 10px;
+        font-family: "Iosevka Web", monospace;
+        line-height: 1.6;
+        transition:
+          background-color 0.3s,
+          color 0.3s;
+      }
+
+      .center {
+        margin: auto;
+        text-align: center;
+        padding: 10px;
+      }
+
+      #icon-footer {
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+        width: 40%;
+      }
+
+      .GitHub_Button {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 10px 15px;
+        gap: 15px;
+        background-color: var(--latte-blue);
+        color: var(--latte-base);
+        outline-offset: -3px;
+        border-radius: 5px;
+        border: none;
+        cursor: pointer;
+        transition: 400ms;
+        height: auto;
+      }
+
+      .dark-mode .GitHub_Button {
+        background-color: var(--mocha-maroon);
+      }
+
+      .GitHub_Button .text {
+        color: black;
+        font-weight: 700;
+        font-size: 1.2em;
+        transition: 400ms;
+      }
+
+      .dark-mode .GitHub_Button .text {
+        color: black;
+      }
+
+      .GitHub_Button svg path {
+        transition: 400ms;
+      }
+
+      .GitHub_Button svg path {
+        fill: white;
+      }
+
+      .dark-mode .GitHub_Button svg path {
+        fill: #181717;
+      }
+
+      .GitHub_Button:hover {
+        background-color: var(--latte-sapphire);
+      }
+
+      .GitHub_Button:hover .text {
+        color: white;
+      }
+
+      .dark-mode .GitHub_Button:hover {
+        background-color: var(--mocha-maroon);
+      }
+
+      .dark-mode .GitHub_Button:hover .text {
+        color: black;
+      }
+
+      a:link {
+        text-decoration: none;
+      }
+      a:visited {
+        text-decoration: none;
+      }
+      a:hover {
+        text-decoration: none;
+      }
+      a:active {
+        text-decoration: none;
+      }
     </style>
   </head>
   <body class="dark-mode">
-    <h1>Cheatsheet Index</h1>
-    <button id="dark-mode-toggle">Toggle Light Mode</button>
+    <div class="header">
+      <img
+        src="https://github.com/rtuszik/KoalaKeys/raw/main/assets/icons/KoalaKeys.png"
+        id="logo_img"
+        width="128"
+      />
+      <h1>Cheatsheet Index</h1>
+      <button id="dark-mode-toggle" aria-label="Toggle dark mode">
+        <span id="theme-icon">◐</span>
+      </button>
+    </div>
     <div class="controls">
       <div class="search-bar">
         <input type="text" id="search" placeholder="Search cheatsheets..." />
@@ -327,11 +432,11 @@ <h1>Cheatsheet Index</h1>
         <option value="name-desc">Name (Z-A)</option>
       </select>
       <select id="items-per-page" class="items-per-page-select">
-        <option value="9">9 per page</option>
-        <option value="18">18 per page</option>
-        <option value="27">27 per page</option>
-        <option value="36">36 per page</option>
-        <option value="45">45 per page</option>
+        <option value="8">8 per page</option>
+        <option value="16">16 per page</option>
+        <option value="32">32 per page</option>
+        <option value="64">64 per page</option>
+        <option value="128">128 per page</option>
       </select>
     </div>
     <ul id="cheatsheet-list" class="cheatsheet-list"></ul>
@@ -354,8 +459,12 @@ <h1>Cheatsheet Index</h1>
       const nextPageButton = document.getElementById('next-page');
       const body = document.body;
 
+      const themeIcon = document.getElementById("theme-icon");
+
       function updateDarkModeToggle() {
-          darkModeToggle.textContent = body.classList.contains('dark-mode') ? 'Toggle Light Mode' : 'Toggle Dark Mode';
+        themeIcon.textContent = body.classList.contains("dark-mode")
+          ? "☀️"
+          : "🌙";
       }
 
       darkModeToggle.addEventListener('click', () => {
@@ -460,4 +569,29 @@ <h1>Cheatsheet Index</h1>
       updateCheatsheets();
     </script>
   </body>
+  <footer>
+    <img
+      src="https://github.com/rtuszik/KoalaKeys/raw/main/assets/icons/KoalaKeys.png"
+      alt="KoalaKeys"
+      id="icon-footer"
+      width="128"
+    />
+    <a href="https://github.com/rtuszik/KoalaKeys">
+      <button class="GitHub_Button">
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 0.296997C5.37 0.296997 0 5.67 0 12.297C0 17.6 3.438 22.097 8.205 23.682C8.805 23.795 9.025 23.424 9.025 23.105C9.025 22.82 9.015 22.065 9.01 21.065C5.672 21.789 4.968 19.455 4.968 19.455C4.422 18.07 3.633 17.7 3.633 17.7C2.546 16.956 3.717 16.971 3.717 16.971C4.922 17.055 5.555 18.207 5.555 18.207C6.625 20.042 8.364 19.512 9.05 19.205C9.158 18.429 9.467 17.9 9.81 17.6C7.145 17.3 4.344 16.268 4.344 11.67C4.344 10.36 4.809 9.29 5.579 8.45C5.444 8.147 5.039 6.927 5.684 5.274C5.684 5.274 6.689 4.952 8.984 6.504C9.944 6.237 10.964 6.105 11.984 6.099C13.004 6.105 14.024 6.237 14.984 6.504C17.264 4.952 18.269 5.274 18.269 5.274C18.914 6.927 18.509 8.147 18.389 8.45C19.154 9.29 19.619 10.36 19.619 11.67C19.619 16.28 16.814 17.295 14.144 17.59C14.564 17.95 14.954 18.686 14.954 19.81C14.954 21.416 14.939 22.706 14.939 23.096C14.939 23.411 15.149 23.786 15.764 23.666C20.565 22.092 24 17.592 24 12.297C24 5.67 18.627 0.296997 12 0.296997Z"
+            fill="white"
+          ></path>
+        </svg>
+        <p class="text">KoalaKeys</p>
+      </button>
+    </a>
+  </footer>
 </html>