Merge pull request #38 from zerebos/release/0.2.0

Release v0.2.0

Author: zerebos

README.md

@@ -1,5 +1,5 @@
 <div align="center">
-  <a href="https://zerebos.github.io/ghostty-config"><img src="./src/lib/images/ghost.png" height="128" alt="Ghostty Config"></a>
+  <a href="https://zerebos.github.io/ghostty-config"><img src="./src/lib/images/icon.png" height="128" alt="Ghostty Config"></a>
   <h1 align="center" style="border:0;">Ghostty Config</h1>
   <p align="center">A beautiful intuitive configuration generator for <a href="https://ghostty.org/" target="_blank">Ghostty</a> terminal.</p>
 
@@ -28,7 +28,7 @@ This project is built with [Svelte](https://svelte.dev) + [TypeScript](https://w
 
 - **Interactive settings editor:** Easily tweak fonts, colors, cursor styles, transparency, blur, and more.
 - **Font playground:** Experiment with JetBrains Mono, Nerd Fonts, or any custom font.
-- **Live previews:** See instant demos of cursors, selections, and color palettes.
+- **Live previews:** See instant demos of cursors, selections, app icons, and color palettes.
 - **Keybinding validation *(coming soon)*:** Ensure your shortcuts are conflict‑free.
 - **One‑click export:** Generate a clean Ghostty configuration file to drop into your setup.
 - **Automatic deployment:** Every push to main updates the hosted tool via GitHub Actions.

package.json

@@ -1,6 +1,6 @@
 {
     "name": "ghostty-config",
-    "version": "0.1.2",
+    "version": "0.2.0",
     "description": "A beautiful config generator for Ghostty terminal.",
     "author": "Zerebos",
     "repository": {

src/lib/components/User.svelte

@@ -1,20 +1,20 @@
 <script lang="ts">
-    import {page} from "$app/stores";
-    import logo from "$lib/images/ghost.svg";
+    import {page} from "$app/state";
+    import logo from "$lib/images/avatar.png";
 
-    const {route = "/", name = "Ghostty Config", subtext = "Community Tool"} = $props();
-    const path = $derived($page.url.pathname);
+    const {route = "/", name = "Ghostty Config"} = $props();
+    const path = $derived(page.url.pathname);
 
     const selected = $derived(path === route);
 </script>
 
 <a href={route} class="user-tab" class:selected>
     <div class="user-avatar">
-        <img src={logo} alt="Ghostty Logo" />
+        <img src={logo} alt="Ghostty Config Logo" />
     </div>
     <div class="user-label">
         <div class="user-name">{name}</div>
-        <div class="user-subtext">{subtext}</div>
+        <div class="user-subtext">by @zerebos</div>
     </div>
 </a>
 
@@ -35,18 +35,18 @@
     }
 
     .user-avatar img {
-        height: 30px;
-        width: 30px;
+        height: 100%;
+        width: 100%;
+        border-radius: 50%;
+        /* border: 2px solid inset var(--border-level-1); */
     }
 
     .user-avatar {
         display: inline-flex;
         justify-content: center;
         align-items: center;
-        background: linear-gradient(#03028f, #09043a);
         height: 40px;
         min-width: 40px;
-        border-radius: 50%;
         /* border: 2px solid black; */
         /* box-shadow: 0 0 0 2px white; */
     }

src/lib/data/settings.ts

@@ -146,10 +146,10 @@ const settings = [
                     {id: "desktopNotifications", name: "Allow desktop notifications", type: "switch", value: true},
                     {id: "configFile", name: "Additional config file", type: "text", value: ""},
                     {id: "configDefaultFiles", name: "Load default config file", type: "switch", value: true},
-                    {id: "link", name: "Link handling", note: "Regex for making clickable links, curently disabled.", type: "text", value: "", disabled: true},
+                    {id: "link", name: "Link handling", note: "Regex for making clickable links, currently disabled.", type: "text", value: "", disabled: true},
                     {id: "linkUrl", name: "Automatically link URLs", note: "Matching occurs while holding the control (Linux) or command (macOS) key.", type: "switch", value: true},
                     {id: "linkPreviews", name: "Show link previews", note: "When set to `osc8`, previews are only shown for hyperlinks created with the OSC 8 sequence.", type: "dropdown", value: "true", options: ["true", "false", "osc8"]},
-                    {id: "undoTimeout", name: "Undo timeout", note: "Timeout for undo operations. Format like `1h30m`, `5s`, `500ms`.", type: "text"}
+                    {id: "undoTimeout", name: "Undo timeout", note: "Timeout for undo operations. Format like `1h30m`, `5s`, `500ms`.", type: "text", value: ""}
                 ]
             },
             {
@@ -560,7 +560,7 @@ const settings = [
             {
                 id: "icon",
                 name: "App Icon",
-                note: "An app icon previewer has been added to the to-do list.",
+                note: "If you choose the \"custom-style\" option, you can use any of the other icon settings to customize your icon with a live preview.",
                 settings: [
                     {id: "macosIcon", name: "Icon", note: "Custom style must specify both ghost and screen colors.", type: "dropdown", value: "official", options: ["official", "blueprint", "chalkboard", "microchip", "glass", "holographic", "paper", "retro", "xray", "custom", "custom-style"]},
                     {id: "macosCustomIcon", name: "Icon file", note: "Only used when \"custom\" is selected above.", type: "text", value: ""},

src/lib/images/avatar.png

@@ -143,7 +143,6 @@ interface DefaultConfig {
     cursorOpacity: number;
     cursorStyle: string;
     cursorStyleBlink: string;
-    cursorstring: string;
     cursorClickToMove: boolean;
     mouseHideWhileTyping: boolean;
     mouseShiftCapture: boolean;