From 68165d23a7a15dc31b52b1bdaab6ffd423df106c Mon Sep 17 00:00:00 2001 From: mishamyrt Date: Thu, 13 Apr 2023 22:46:06 +0300 Subject: [PATCH 01/23] Migrate preview to Actions deploy --- .github/workflows/build.yaml | 3 +- .github/workflows/preview.yaml | 62 ++++++++++++++++++++++++++++++++++ 2 files changed, 64 insertions(+), 1 deletion(-) create mode 100644 .github/workflows/preview.yaml diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml index a3dc279f..c3116f80 100644 --- a/.github/workflows/build.yaml +++ b/.github/workflows/build.yaml @@ -1,6 +1,7 @@ name: Build -on: [push] +on: + - push jobs: build: diff --git a/.github/workflows/preview.yaml b/.github/workflows/preview.yaml new file mode 100644 index 00000000..de246e2c --- /dev/null +++ b/.github/workflows/preview.yaml @@ -0,0 +1,62 @@ +name: Publish preview + +on: + - push + +permissions: + contents: read + pages: write + id-token: write + +concurrency: + group: "pages" + cancel-in-progress: false + +jobs: + build: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v3 + + - name: Setup Pages + uses: actions/configure-pages@v3 + + - name: Setup Python + uses: actions/setup-python@v4 + with: + python-version: '3.9' + + - name: Setup pnpm + uses: pnpm/action-setup@v2 + with: + version: '8.0.0' + + - name: Bootstrap + run: | + sudo apt install python3-setuptools ttfautohint build-essential libffi-dev libgit2-dev -y + make configure + make configure_preview + + - name: Build Lilex + run: make build + + - name: Build preview + run: make build_preview + + - name: Upload artifact + uses: actions/upload-pages-artifact@v1 + with: + path: './preview/dist' + + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + needs: build + steps: + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v2 + From c375e4c6599a93ff7d584a26d89fd6a187a8dca2 Mon Sep 17 00:00:00 2001 From: mishamyrt Date: Fri, 14 Apr 2023 00:31:37 +0300 Subject: [PATCH 02/23] Rename font in preview to avoid local conflicts --- preview/src/app.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/preview/src/app.css b/preview/src/app.css index 608403ce..3383b741 100644 --- a/preview/src/app.css +++ b/preview/src/app.css @@ -1,5 +1,5 @@ @font-face { - font-family: "Lilex"; + font-family: "LilexVF"; src: url('./variable/Lilex-VF.ttf'); } @@ -11,7 +11,7 @@ --color-text: var(--color-text-light); --color-background: var(--color-background-light); - --font-family: "Lilex"; + --font-family: "LilexVF"; --padding-layout: 24px; font-family: 'Lilex'; From 551fca03f47015669b4a7f03ca3e6120572a8ade Mon Sep 17 00:00:00 2001 From: mishamyrt Date: Fri, 14 Apr 2023 00:53:12 +0300 Subject: [PATCH 03/23] Automatically turns on the dark theme --- preview/src/parts/Tester.svelte | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/preview/src/parts/Tester.svelte b/preview/src/parts/Tester.svelte index 01fa9139..715c7679 100644 --- a/preview/src/parts/Tester.svelte +++ b/preview/src/parts/Tester.svelte @@ -1,4 +1,5 @@
From 4dbdc0e8b3d8d77b6c895a0bc24f21d32d6099e9 Mon Sep 17 00:00:00 2001 From: mishamyrt Date: Sun, 5 Nov 2023 00:08:26 +0300 Subject: [PATCH 04/23] feat(preview): Improve type tester layout --- preview/src/App.svelte | 7 +- preview/src/app.css | 45 ++++++---- .../GlyphsTable/GlyphsTable.svelte} | 18 ++-- preview/src/blocks/GlyphsTable/index.ts | 5 ++ .../src/blocks/TypeTester/TypeTester.svelte | 74 ++++++++++++++++ preview/src/blocks/TypeTester/constants.ts | 7 ++ preview/src/blocks/TypeTester/index.ts | 3 + preview/src/blocks/index.ts | 2 + preview/src/components/Block/Block.svelte | 42 ++++++++++ .../src/components/{ => Block}/Toolbar.svelte | 2 +- preview/src/components/Block/index.ts | 3 + preview/src/components/Block/theme-utils.ts | 3 + .../FeatureSelector/FeatureSelector.svelte | 46 ++++++++++ .../FeatureSelector/FeatureToggle.svelte | 52 ++++++++++++ .../FeatureSelector/FeatureVariant.svelte | 77 +++++++++++++++++ .../src/components/FeatureSelector/context.ts | 31 +++++++ .../FeatureSelector/context.types.ts | 12 +++ .../src/components/FeatureSelector/index.ts | 3 + .../components/FontPreview/FontPreview.svelte | 84 +++++++++++++++++++ .../components/FontPreview/indent-utils.ts | 40 +++++++++ preview/src/components/FontPreview/index.ts | 5 ++ .../src/components/FontPreview/keys-utils.ts | 14 ++++ preview/src/components/RangeSlider.svelte | 19 ++--- preview/src/components/SchemeSelect.svelte | 8 +- preview/src/components/index.ts | 12 +++ preview/src/parts/Tester.svelte | 75 ----------------- 26 files changed, 572 insertions(+), 117 deletions(-) rename preview/src/{parts/Glyphs.svelte => blocks/GlyphsTable/GlyphsTable.svelte} (89%) create mode 100644 preview/src/blocks/GlyphsTable/index.ts create mode 100644 preview/src/blocks/TypeTester/TypeTester.svelte create mode 100644 preview/src/blocks/TypeTester/constants.ts create mode 100644 preview/src/blocks/TypeTester/index.ts create mode 100644 preview/src/blocks/index.ts create mode 100644 preview/src/components/Block/Block.svelte rename preview/src/components/{ => Block}/Toolbar.svelte (83%) create mode 100644 preview/src/components/Block/index.ts create mode 100644 preview/src/components/Block/theme-utils.ts create mode 100644 preview/src/components/FeatureSelector/FeatureSelector.svelte create mode 100644 preview/src/components/FeatureSelector/FeatureToggle.svelte create mode 100644 preview/src/components/FeatureSelector/FeatureVariant.svelte create mode 100644 preview/src/components/FeatureSelector/context.ts create mode 100644 preview/src/components/FeatureSelector/context.types.ts create mode 100644 preview/src/components/FeatureSelector/index.ts create mode 100644 preview/src/components/FontPreview/FontPreview.svelte create mode 100644 preview/src/components/FontPreview/indent-utils.ts create mode 100644 preview/src/components/FontPreview/index.ts create mode 100644 preview/src/components/FontPreview/keys-utils.ts create mode 100644 preview/src/components/index.ts delete mode 100644 preview/src/parts/Tester.svelte diff --git a/preview/src/App.svelte b/preview/src/App.svelte index 4812f884..07397990 100644 --- a/preview/src/App.svelte +++ b/preview/src/App.svelte @@ -1,9 +1,8 @@
- - + +
diff --git a/preview/src/app.css b/preview/src/app.css index 3383b741..46d05be2 100644 --- a/preview/src/app.css +++ b/preview/src/app.css @@ -4,15 +4,24 @@ } :root { - --color-text-light: #212529; - --color-text-dark: #F3F3F3; + --color-content-light: #212529; + --color-content-dimmed-light: rgb(0 0 0 / 35%); + --color-accent-light: #226aff; + --color-content-dark: #F3F3F3; + --color-content-dimmed-dark: rgb(255 255 255 / 20%); + --color-accent-dark: #749FF8; --color-background-light: #F3F3F3; --color-background-dark: #242424; - - --color-text: var(--color-text-light); - --color-background: var(--color-background-light); --font-family: "LilexVF"; - --padding-layout: 24px; + --transition-default: .3s ease-out; + --transition-fast: .15s ease-out; + --space-2xl: 32px; + --space-xl: 24px; + --space-l: 16px; + --space-m: 12px; + --space-s: 8px; + --space-xs: 4px; + --padding-layout: var(--space-xl); font-family: 'Lilex'; line-height: 1.5; @@ -27,21 +36,29 @@ -webkit-text-size-adjust: 100%; } -@media (prefers-color-scheme: dark) { - :root { - --color-text: var(--color-text-dark); - --color-background: var(--color-background-dark); - } -} - * { box-sizing: border-box; } + html { background-color: var(--color-background); - color: var(--color-text); + color: var(--color-content); } body { margin: 0; } + +*::-webkit-scrollbar { + width: 14px; /* width of the entire scrollbar */ +} + +*::-webkit-scrollbar-track { + background: transparent; +} + +*::-webkit-scrollbar-thumb { + background-color: var(--color-content-dimmed); + border-radius: 20px; + border: 3px solid var(--color-background); +} diff --git a/preview/src/parts/Glyphs.svelte b/preview/src/blocks/GlyphsTable/GlyphsTable.svelte similarity index 89% rename from preview/src/parts/Glyphs.svelte rename to preview/src/blocks/GlyphsTable/GlyphsTable.svelte index 40f855a4..a3c2aa50 100644 --- a/preview/src/parts/Glyphs.svelte +++ b/preview/src/blocks/GlyphsTable/GlyphsTable.svelte @@ -1,10 +1,10 @@ + + + +
+ + {weight.toFixed(0)} +
+ + +
+
+ +
+
+
+ +
+ +
+
+ + + diff --git a/preview/src/blocks/TypeTester/constants.ts b/preview/src/blocks/TypeTester/constants.ts new file mode 100644 index 00000000..7c7e9cf5 --- /dev/null +++ b/preview/src/blocks/TypeTester/constants.ts @@ -0,0 +1,7 @@ +export const MIN_WEIGHT = 100 +export const MAX_WEIGHT = 700 +export const WEIGHT_DELTA = MAX_WEIGHT - MIN_WEIGHT + +export const INITIAL_TEXT = `Lilex. +The font for developers. +>>-!-<<` diff --git a/preview/src/blocks/TypeTester/index.ts b/preview/src/blocks/TypeTester/index.ts new file mode 100644 index 00000000..b0e20ecc --- /dev/null +++ b/preview/src/blocks/TypeTester/index.ts @@ -0,0 +1,3 @@ +import TypeTester from './TypeTester.svelte' + +export { TypeTester } diff --git a/preview/src/blocks/index.ts b/preview/src/blocks/index.ts new file mode 100644 index 00000000..7e3da85a --- /dev/null +++ b/preview/src/blocks/index.ts @@ -0,0 +1,2 @@ +export * from './GlyphsTable' +export * from './TypeTester' diff --git a/preview/src/components/Block/Block.svelte b/preview/src/components/Block/Block.svelte new file mode 100644 index 00000000..c01da7b6 --- /dev/null +++ b/preview/src/components/Block/Block.svelte @@ -0,0 +1,42 @@ + + + + + diff --git a/preview/src/components/Toolbar.svelte b/preview/src/components/Block/Toolbar.svelte similarity index 83% rename from preview/src/components/Toolbar.svelte rename to preview/src/components/Block/Toolbar.svelte index a932d287..e414061c 100644 --- a/preview/src/components/Toolbar.svelte +++ b/preview/src/components/Block/Toolbar.svelte @@ -13,6 +13,6 @@ margin-top: -12px; padding: 12px 0; background-color: var(--color-background); - transition: background-color .3s ease-out; + transition: background-color var(--transition-default); } diff --git a/preview/src/components/Block/index.ts b/preview/src/components/Block/index.ts new file mode 100644 index 00000000..91106cb6 --- /dev/null +++ b/preview/src/components/Block/index.ts @@ -0,0 +1,3 @@ +import Block from './Block.svelte' + +export { Block } diff --git a/preview/src/components/Block/theme-utils.ts b/preview/src/components/Block/theme-utils.ts new file mode 100644 index 00000000..2e44bccc --- /dev/null +++ b/preview/src/components/Block/theme-utils.ts @@ -0,0 +1,3 @@ +export function isDark (): boolean { + return window.matchMedia('(prefers-color-scheme: dark)').matches +} diff --git a/preview/src/components/FeatureSelector/FeatureSelector.svelte b/preview/src/components/FeatureSelector/FeatureSelector.svelte new file mode 100644 index 00000000..d01c10aa --- /dev/null +++ b/preview/src/components/FeatureSelector/FeatureSelector.svelte @@ -0,0 +1,46 @@ + + +
+ + + + + + + + + + + + + +
+ + diff --git a/preview/src/components/FeatureSelector/FeatureToggle.svelte b/preview/src/components/FeatureSelector/FeatureToggle.svelte new file mode 100644 index 00000000..914c4777 --- /dev/null +++ b/preview/src/components/FeatureSelector/FeatureToggle.svelte @@ -0,0 +1,52 @@ + + +
+ {title} +
+ setSelected('')} + selected={selected === ''} + code="-" + /> + {#each variants as fea} + setSelected(fea)} + selected={selected === fea} + code={fea} + /> + {/each} +
+
+ + diff --git a/preview/src/components/FeatureSelector/FeatureVariant.svelte b/preview/src/components/FeatureSelector/FeatureVariant.svelte new file mode 100644 index 00000000..b3342309 --- /dev/null +++ b/preview/src/components/FeatureSelector/FeatureVariant.svelte @@ -0,0 +1,77 @@ + + +
+ {symbols} + {code} +
+ + diff --git a/preview/src/components/FeatureSelector/context.ts b/preview/src/components/FeatureSelector/context.ts new file mode 100644 index 00000000..55c6985a --- /dev/null +++ b/preview/src/components/FeatureSelector/context.ts @@ -0,0 +1,31 @@ +import { getContext, setContext } from 'svelte' +import { derived, writable, type Readable } from 'svelte/store' +import type { FeatureContext, FeatureMap, FeatureSetter, FeatureStore } from './context.types' + +const CONTEXT_KEY = 'features' + +function extractFeatures (store: FeatureStore): Readable { + return derived(store, f => Object.values(f).filter(Boolean)) +} + +function createSetter (store: FeatureStore): FeatureSetter { + return (symbols, code) => store.update((v) => ({ + ...v, + [symbols]: code + })) +} + +export function createFeaturesContext (): FeatureContext { + const featureMap = writable({}) + const features = extractFeatures(featureMap) + const setFeature = createSetter(featureMap) + + return setContext(CONTEXT_KEY, { + features, + setFeature + }) +} + +export function getFeaturesContext (): FeatureContext { + return getContext(CONTEXT_KEY) +} diff --git a/preview/src/components/FeatureSelector/context.types.ts b/preview/src/components/FeatureSelector/context.types.ts new file mode 100644 index 00000000..c2f815fc --- /dev/null +++ b/preview/src/components/FeatureSelector/context.types.ts @@ -0,0 +1,12 @@ +import type { Readable, Writable } from 'svelte/store' + +export type FeatureMap = Record + +export type FeatureStore = Writable + +export type FeatureSetter = (symbols: string, code: string) => void + +export interface FeatureContext { + features: Readable + setFeature: FeatureSetter +} diff --git a/preview/src/components/FeatureSelector/index.ts b/preview/src/components/FeatureSelector/index.ts new file mode 100644 index 00000000..13a948d5 --- /dev/null +++ b/preview/src/components/FeatureSelector/index.ts @@ -0,0 +1,3 @@ +import FeatureSelector from './FeatureSelector.svelte' + +export { FeatureSelector } diff --git a/preview/src/components/FontPreview/FontPreview.svelte b/preview/src/components/FontPreview/FontPreview.svelte new file mode 100644 index 00000000..cb7e1db7 --- /dev/null +++ b/preview/src/components/FontPreview/FontPreview.svelte @@ -0,0 +1,84 @@ + + +