Improve site a little
9 files changed, 230 insertions(+), 63 deletions(-) M site/package-lock.json M site/package.json M site/src/routes/+layout.svelte M site/src/routes/+page.svelte M site/static/css/global.css A site/static/img/snippetexpandergui-add-snippet.png A site/static/img/snippetexpandergui-search-and-paste.png A site/static/img/snippetexpandergui-select-snippet.png A site/static/img/snippetexpandergui-settings.png
M site/package-lock.json => site/package-lock.json +12 -22
@@ 7,6 7,9 @@ "": { "name": "site", "version": "1.0.0-beta.2", "dependencies": { "svelte-lightbox": "^1.1.2" }, "devDependencies": { "@sveltejs/adapter-static": "^2.0.3", "@sveltejs/kit": "^1.27.5" @@ 16,7 19,6 @@ "version": "2.2.1", "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz", "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==", "dev": true, "peer": true, "dependencies": { "@jridgewell/gen-mapping": "^0.3.0", @@ 413,7 415,6 @@ "version": "0.3.3", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz", "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==", "dev": true, "peer": true, "dependencies": { "@jridgewell/set-array": "^1.0.1", @@ 428,7 429,6 @@ "version": "3.1.1", "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz", "integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==", "dev": true, "peer": true, "engines": { "node": ">=6.0.0" @@ 438,7 438,6 @@ "version": "1.1.2", "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz", "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==", "dev": true, "peer": true, "engines": { "node": ">=6.0.0" @@ 447,14 446,12 @@ "node_modules/@jridgewell/sourcemap-codec": { "version": "1.4.15", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz", "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==", "dev": true "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==" }, "node_modules/@jridgewell/trace-mapping": { "version": "0.3.20", "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz", "integrity": "sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==", "dev": true, "peer": true, "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", @@ 557,14 554,12 @@ "version": "1.0.5", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==", "dev": true, "peer": true }, "node_modules/acorn": { "version": "8.11.2", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz", "integrity": "sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==", "dev": true, "peer": true, "bin": { "acorn": "bin/acorn" @@ 577,7 572,6 @@ "version": "5.3.0", "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==", "dev": true, "peer": true, "dependencies": { "dequal": "^2.0.3" @@ 587,7 581,6 @@ "version": "3.2.1", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz", "integrity": "sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==", "dev": true, "peer": true, "dependencies": { "dequal": "^2.0.3" @@ 597,7 590,6 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz", "integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==", "dev": true, "peer": true, "dependencies": { "@jridgewell/sourcemap-codec": "^1.4.15", @@ 620,7 612,6 @@ "version": "2.3.1", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz", "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==", "dev": true, "peer": true, "dependencies": { "mdn-data": "2.0.30", @@ 660,7 651,6 @@ "version": "2.0.3", "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==", "dev": true, "peer": true, "engines": { "node": ">=6" @@ 720,7 710,6 @@ "version": "3.0.3", "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz", "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==", "dev": true, "peer": true, "dependencies": { "@types/estree": "^1.0.0" @@ 757,7 746,6 @@ "version": "3.0.2", "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz", "integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==", "dev": true, "peer": true, "dependencies": { "@types/estree": "*" @@ 776,14 764,12 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz", "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==", "dev": true, "peer": true }, "node_modules/magic-string": { "version": "0.30.5", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz", "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==", "dev": true, "dependencies": { "@jridgewell/sourcemap-codec": "^1.4.15" }, @@ 795,7 781,6 @@ "version": "2.0.30", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==", "dev": true, "peer": true }, "node_modules/mri": { @@ 845,7 830,6 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz", "integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==", "dev": true, "peer": true, "dependencies": { "@types/estree": "^1.0.0", @@ 942,7 926,6 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", "dev": true, "peer": true, "engines": { "node": ">=0.10.0" @@ 952,7 935,6 @@ "version": "4.2.3", "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.3.tgz", "integrity": "sha512-sqmG9KC6uUc7fb3ZuWoxXvqk6MI9Uu4ABA1M0fYDgTlFYu1k02xp96u6U9+yJZiVm84m9zge7rrA/BNZdFpOKw==", "dev": true, "peer": true, "dependencies": { "@ampproject/remapping": "^2.2.1", @@ 985,6 967,14 @@ "svelte": "^3.19.0 || ^4.0.0" } }, "node_modules/svelte-lightbox": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/svelte-lightbox/-/svelte-lightbox-1.1.2.tgz", "integrity": "sha512-zOvLq+z1TI5V2/U2myUL6m+oHATum8dV9wNnzBe+cCUGpP79OqRwoRu6Y9T9F9jomc/wiy4SomvL7RGnsXN81g==", "peerDependencies": { "svelte": "^3.25.0 || ^4.0.0" } }, "node_modules/tiny-glob": { "version": "0.2.9", "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
M site/package.json => site/package.json +4 -1
@@ 11,5 11,8 @@ "@sveltejs/adapter-static": "^2.0.3", "@sveltejs/kit": "^1.27.5" }, "type": "module" "type": "module", "dependencies": { "svelte-lightbox": "^1.1.2" } }
M site/src/routes/+layout.svelte => site/src/routes/+layout.svelte +18 -13
@@ 2,27 2,32 @@ <title>Snippet Expander</title> </svelte:head> <nav> <a href="/" class="icon" title="Home"> <img src="/img/snippetexpander-icon-128.svg" alt="Home" /> </a> <a href="/docs/">Docs</a> <a href="https://git.sr.ht/~ianmjones/snippetexpander/" target="_blank"> Source </a> </nav> <header> <nav> <a href="/" class="icon" title="Home"> <img src="/img/snippetexpander-icon-128.svg" alt="Home" /> </a> <a href="/docs/">Docs</a> <a href="https://git.sr.ht/~ianmjones/snippetexpander/" target="_blank"> Source </a> </nav> </header> <div class="content"> <article> <slot /> </div> </article> <style> header { width: 100%; } nav { display: flex; gap: 1rem; justify-content: flex-end; align-items: center; width: 100%; } nav .icon { @@ 34,7 39,7 @@ height: 32px; } div { article { display: flex; flex-direction: column; align-items: center;
M site/src/routes/+page.svelte => site/src/routes/+page.svelte +192 -26
@@ 1,33 1,114 @@ <img src="img/snippetexpander-icon-128.svg" alt="Snippet Expander icon" class="icon" /> <h1>Snippet Expander</h1> <p>Your little expandable text snippets helper</p> <h2>What is Snippet Expander?</h2> <p> Save your often used text snippets and then auto expand them whenever you type their abbreviation. </p> <script> import { Lightbox } from "svelte-lightbox"; </script> <p> For example, you could have an abbreviation "ser`" that expands to "Snippet Expander rules!" when you type it 😃. </p> <header> <img src="img/snippetexpander-icon-128.svg" alt="Snippet Expander icon" class="icon" /> <div class="text"> <h1>Snippet Expander</h1> <p>Your little expandable text snippets helper</p> </div> </header> <p> You can also use the search and paste window if you can't remember your abbreviation, or happen to be using an application that does not allow auto expansion of snippets. </p> <main> <div class="card"> <div class="text"> <h2 id="auto-expand">Auto Expand Snippets</h2> <p> Save your often used text snippets and then auto expand them whenever you type their abbreviation. </p> <p> For example, you could have an abbreviation "ser`" that expands to "Snippet Expander rules! 🤘" when you type it 😃. </p> </div> <Lightbox description="Screenshot of Snippet Expander's Add Snippet screen" > <img src="img/snippetexpandergui-add-snippet.png" alt="Screenshot of Snippet Expander's Add Snippet window" /> </Lightbox> </div> <p>The desktop application is simple to use for managing your snippets.</p> <div class="card"> <Lightbox description="Screenshot of Snippet Expander's Search & Paste window" > <img src="img/snippetexpandergui-search-and-paste.png" alt="Screenshot of Snippet Expander's Search & Paste window" /> </Lightbox> <div class="text"> <h2 id="search-and-paste">Search & Paste Window</h2> <p> Use the search and paste window if you can't remember your abbreviation, or happen to be using an application that does not allow auto expansion of snippets. </p> <p> The most recently used snippets are shown first, with numeric quick select keys. </p> </div> </div> <div class="card"> <div class="text"> <h2 id="gui-and-cli">GUI & CLI</h2> <p> As well as the desktop application, you can use a fully featured <a href="docs/snippetexpander/" title="snippetexpander CLI manual page" > command line interface </a> to manage your snippets and settings. </p> </div> <Lightbox description="Screenshot of Snippet Expander's Select Snippet window" > <img src="img/snippetexpandergui-select-snippet.png" alt="Screenshot of Snippet Expander's Select Snippet window" /> </Lightbox> </div> <p>And of course, there's a command line application too.</p> <div class="card"> <Lightbox description="Screenshot of Snippet Expander's Settings window" > <img src="img/snippetexpandergui-settings.png" alt="Screenshot of Snippet Expander's Settings window" /> </Lightbox> <div class="text"> <h2 id="settings">Settings</h2> <p> You can control whether Snippet Expander starts when you log in, whether snippets should auto expand, how the Search & Paste window is opened and whether the search box is focused at first. </p> <h2 id="import-and-export">Import & Export</h2> <p> You can export your snippets as a backup, or to then import on another machine. </p> </div> </div> </main> <h2>⚠️ Under Construction ⚠️</h2> <h2 id="under-construction">⚠️ Under Construction ⚠️</h2> <p> This site is under construction, and Snippet Expander isn't quite ready for regular use yet. You probably want to grab Snippet Pixie (Snippet Expander's @@ 57,10 138,95 @@ </p> <style> .icon { header { display: flex; align-items: center; gap: 2rem; margin-bottom: 2rem; } header .icon { width: 128px; } header h1 { font-size: 40px; margin: 0; color: var(--highlight-color); } header p { font-size: 18px; margin: 0; } @media screen and (max-width: 666px) { header { flex-direction: column; margin-top: 2rem; } header h1 { font-size: 32px; } header p { font-size: 16px; } header div.text { display: flex; flex-direction: column; text-align: center; } } main { display: flex; flex-direction: column; gap: 2rem; } div.card { background-color: var(--secondary-background-color); border-radius: 5px; box-shadow: 5px 5px 5px var(--alpha-15-color); padding: 1rem; display: flex; gap: 1rem; } div.card h2 { font-size: 18px; margin: 0 0 0.75rem 0; } div.card p { margin: 0 0 0.5rem 0; } div.card p + h2 { margin-top: 1rem; } div.card :global(.svelte-lightbox-thumbnail) { max-width: 45%; } @media screen and (max-width: 666px) { div.card { flex-direction: column; } div.card :global(.svelte-lightbox-thumbnail) { max-width: inherit; } } #under-construction { margin-top: 3rem; } ul { margin-left: -2.5rem; }
M site/static/css/global.css => site/static/css/global.css +4 -1
@@ 19,10 19,14 @@ --nord13: #EBCB8B; --nord14: #A3BE8C; --nord15: #B48EAD; /* Utility Colours */ --alpha-15-color: #00000015; } :root { --background-color: var(--nord0); --secondary-background-color: var(--nord1); --primary-text-color: var(--nord6); --secondary-text-color: var(--nord5); --tertiary-text-color: var(--nord4); @@ 50,6 54,5 @@ body > div.body { } a { text-decoration: none; color: var(--primary-color); }
A site/static/img/snippetexpandergui-add-snippet.png => site/static/img/snippetexpandergui-add-snippet.png +0 -0
A site/static/img/snippetexpandergui-search-and-paste.png => site/static/img/snippetexpandergui-search-and-paste.png +0 -0
A site/static/img/snippetexpandergui-select-snippet.png => site/static/img/snippetexpandergui-select-snippet.png +0 -0
A site/static/img/snippetexpandergui-settings.png => site/static/img/snippetexpandergui-settings.png +0 -0
