Move font playground for clarity

zerebos · Oct 25, 2024 · 6c20948 · 6c20948
1 parent e6e683d
commit 6c20948
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 3 deletions.
diff --git a/src/lib/images/tabs/font-playground.webp b/src/lib/images/tabs/font-playground.webp
diff --git a/src/lib/views/FontPreview.svelte b/src/lib/views/FontPreview.svelte
@@ -17,7 +17,7 @@
 
 
 <!-- eslint-disable-next-line svelte/no-useless-mustaches -->
-<Group title="Font Playground" note={"Use this section to test your fonts as they may look in the terminal along with colors and glyphs.\n\nNote: this playground does not set any actual settings."}>
+<Group title="" note={"Use this page to test your locally installed fonts as they may look in the terminal along with colors and glyphs.\n\nNote: this playground does not set any actual settings."}>
     <div class="preview" style="font-family: {fontFamily}; font-size: {fontSize + "px"}; font-style: {italic ? "italic" : "normal"}; font-weight: {bold ? 700 : 400};">
     <div class="row prompt">
         <span style="color: var(--config-palette-2);">john</span>

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -2,9 +2,11 @@
     import Page from "$lib/views/Page.svelte";
     import logo from "$lib/images/ghost.svg";
     import sync from "$lib/images/tabs/sync.webp";
+    import fonts from "$lib/images/tabs/font-playground.webp";
     import Admonition from "$lib/components/Admonition.svelte";
     import Group from "$lib/components/settings/Group.svelte";
     import LinkItem from "$lib/components/settings/LinkItem.svelte";
+    import Separator from "$lib/components/settings/Separator.svelte";
 </script>
 
 
@@ -24,6 +26,8 @@
     </Admonition>
     <Group>
         <LinkItem name="Import & Export" href="/app/import-export" icon={sync} />
+        <Separator />
+        <LinkItem name="Font Playground" href="/app/font-playground" icon={fonts} />
     </Group>
     <Group title="Known Issues">
         <ul>

diff --git a/src/routes/app/font-playground/+page.svelte b/src/routes/app/font-playground/+page.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+    import Page from "$lib/views/Page.svelte";
+    import FontPreview from "$lib/views/FontPreview.svelte";
+</script>
+
+<Page title="Font Playground">
+    <FontPreview />
+</Page>
diff --git a/src/routes/settings/[category]/+page.svelte b/src/routes/settings/[category]/+page.svelte
@@ -14,7 +14,6 @@
     import Dropdown from "$lib/components/settings/Dropdown.svelte";
     import Color from "$lib/components/settings/Color.svelte";
     import Palette from "$lib/components/settings/Palette.svelte";
-    import FontPreview from "$lib/views/FontPreview.svelte";
     import BaseColorPreview from "$lib/views/BaseColorPreview.svelte";
     import CursorPreview from "$lib/views/CursorPreview.svelte";
     import PalettePreview from "$lib/views/PalettePreview.svelte";
@@ -30,7 +29,7 @@
 <Page {title}>
     {#if category}
         {#if category.id === "fonts"}
-            <FontPreview />
+            <Admonition size="1.5rem">The font playground has moved to a <a href="/app/font-playground/">separate page</a>.</Admonition>
         {:else if category.id === "colors"}
             <Admonition size="1.5rem">You can reset a color to its default value by right clicking!</Admonition>
         {/if}