From adb1bd5945609cb3b8476e00bc5f5a2e416c14fa Mon Sep 17 00:00:00 2001 From: Julien Calixte Date: Wed, 29 Apr 2026 10:34:46 +0200 Subject: [PATCH] fix: fix height on mobile --- src/components/StackedNote.vue | 16 ++++- src/components/WelcomeWorld.vue | 16 ++--- src/hooks/useMarkdown.hook.ts | 3 +- src/hooks/useResizeContainer.hook.ts | 2 +- src/modules/repo/store/userRepo.store.ts | 5 +- src/utils/alloy.tmLanguage.json | 88 +++++++++++++++++++----- src/utils/downloadFont.ts | 24 ++++--- 7 files changed, 114 insertions(+), 40 deletions(-) diff --git a/src/components/StackedNote.vue b/src/components/StackedNote.vue index 043db60..2dfa45b 100644 --- a/src/components/StackedNote.vue +++ b/src/components/StackedNote.vue @@ -13,7 +13,11 @@ import { useFile } from "@/hooks/useFile.hook" import { useGitHubContent } from "@/hooks/useGitHubContent.hook" import { useImages } from "@/hooks/useImages.hook" import { useLinks } from "@/hooks/useLinks.hook" -import { renderCodeFile, runMermaid, useShikiji } from "@/hooks/useMarkdown.hook" +import { + renderCodeFile, + runMermaid, + useShikiji +} from "@/hooks/useMarkdown.hook" import { getFileLanguage, isMarkdownPath } from "@/utils/fileLanguage" import { useNoteOverlay } from "@/hooks/useNoteOverlay.hook" import { useRouteQueryStackedNotes } from "@/hooks/useRouteQueryStackedNotes.hook" @@ -54,7 +58,9 @@ const { getEditedSha } = useFile(sha) const initialRawContent = ref(null) -const isMarkdown = computed(() => (path.value ? isMarkdownPath(path.value) : true)) +const isMarkdown = computed(() => + path.value ? isMarkdownPath(path.value) : true +) const displayedContent = ref("") watch( @@ -237,7 +243,11 @@ watch(mode, async (newMode) => {
-
+
diff --git a/src/components/WelcomeWorld.vue b/src/components/WelcomeWorld.vue index 12e6bcd..0bded95 100644 --- a/src/components/WelcomeWorld.vue +++ b/src/components/WelcomeWorld.vue @@ -533,8 +533,8 @@ const showReviewCard = computed( means.

- Rule of thumb: write the title as the claim, and the body - as the argument. + Rule of thumb: write the title as the claim, and the body as + the argument.

@@ -562,14 +562,14 @@ const showReviewCard = computed(

A slip-box of atomic notes wired together by links - instead of filed away in folders. Niklas Luhmann kept - ninety thousand of them in a wooden cabinet and wrote with - them, not just about them. + instead of filed away in folders. Niklas Luhmann kept ninety + thousand of them in a wooden cabinet and wrote with them, + not just about them.

- Each Zettel earns its keep by being linked to. - Open one, follow a thread, end up somewhere you didn't plan - to go. + Each Zettel earns its keep by being linked to. Open + one, follow a thread, end up somewhere you didn't plan to + go.

diff --git a/src/hooks/useMarkdown.hook.ts b/src/hooks/useMarkdown.hook.ts index b014a9f..fa1f728 100644 --- a/src/hooks/useMarkdown.hook.ts +++ b/src/hooks/useMarkdown.hook.ts @@ -85,7 +85,8 @@ const md = new MarkdownIt({ }, closeRender: () => "
\n", tabOpenRender: (data: MarkdownItTabData) => { - const isChecked = data.isActive || (!currentTabActiveSet && data.index === 0) + const isChecked = + data.isActive || (!currentTabActiveSet && data.index === 0) const checked = isChecked ? " checked" : "" const title = data.title.replace(/"/g, """) return `\n
\n` diff --git a/src/hooks/useResizeContainer.hook.ts b/src/hooks/useResizeContainer.hook.ts index 52aa9ff..8ecf3fb 100644 --- a/src/hooks/useResizeContainer.hook.ts +++ b/src/hooks/useResizeContainer.hook.ts @@ -19,7 +19,7 @@ export const useResizeContainer = ( } if (isMobile.value) { - container.style.height = `${(stackedNotes.value.length + 1) * 100}vh` + container.style.height = `${(stackedNotes.value.length + 1) * 100}dvh` } else { container.style.minWidth = `${ getNoteWidth() * (stackedNotes.value.length + 1) diff --git a/src/modules/repo/store/userRepo.store.ts b/src/modules/repo/store/userRepo.store.ts index 1d7b81e..5164019 100644 --- a/src/modules/repo/store/userRepo.store.ts +++ b/src/modules/repo/store/userRepo.store.ts @@ -185,7 +185,10 @@ export const useUserRepoStore = defineStore("USER_REPO_STATE", { DataType.SavedRepo, `${this.user}-${this.repo}` ) - const newFiles = [...toRaw(this.files).filter((f) => f.sha !== file.sha), toRaw(file)] + const newFiles = [ + ...toRaw(this.files).filter((f) => f.sha !== file.sha), + toRaw(file) + ] data.update({ _id: savedRepoId, $type: DataType.SavedRepo, diff --git a/src/utils/alloy.tmLanguage.json b/src/utils/alloy.tmLanguage.json index 6f6f33d..6d75099 100644 --- a/src/utils/alloy.tmLanguage.json +++ b/src/utils/alloy.tmLanguage.json @@ -33,11 +33,23 @@ { "match": "\\b(fact)\\b", "name": "keyword.language.fact.alloy" }, { "match": "\\b(pred)\\b", "name": "keyword.language.pred.alloy" }, { "match": "\\b(fun)\\b", "name": "keyword.language.fun.alloy" }, - { "match": "\\b(module)\\b", "name": "keyword.language.module.alloy" }, - { "match": "\\b(extends)\\b", "name": "keyword.language.extends.alloy" }, + { + "match": "\\b(module)\\b", + "name": "keyword.language.module.alloy" + }, + { + "match": "\\b(extends)\\b", + "name": "keyword.language.extends.alloy" + }, { "match": ":", "name": "keyword.other.colon.alloy" }, - { "match": "\\b(check)\\b", "name": "keyword.language.check.alloy" }, - { "match": "\\b(assert)\\b", "name": "keyword.language.assert.alloy" }, + { + "match": "\\b(check)\\b", + "name": "keyword.language.check.alloy" + }, + { + "match": "\\b(assert)\\b", + "name": "keyword.language.assert.alloy" + }, { "match": "\\b(run)\\b", "name": "keyword.language.run.alloy" }, { "match": "\\b(open)\\b", "name": "keyword.other.open.alloy" }, { "match": "\\b(as)\\b", "name": "keyword.other.as.alloy" }, @@ -47,9 +59,18 @@ "modifier": { "patterns": [ { "match": "\\b(var)\\b", "name": "keyword.modifier.var.alloy" }, - { "match": "\\b(private)\\b", "name": "keyword.modifier.private.alloy" }, - { "match": "\\b(abstract)\\b", "name": "keyword.modifier.abstract.alloy" }, - { "match": "\\b(all|disj|lone|no|one|set|seq|some|sum|univ|none)\\b", "name": "keyword.modifier.set.alloy" } + { + "match": "\\b(private)\\b", + "name": "keyword.modifier.private.alloy" + }, + { + "match": "\\b(abstract)\\b", + "name": "keyword.modifier.abstract.alloy" + }, + { + "match": "\\b(all|disj|lone|no|one|set|seq|some|sum|univ|none)\\b", + "name": "keyword.modifier.set.alloy" + } ] }, "operator": { @@ -73,14 +94,26 @@ }, "unary": { "patterns": [ - { "match": "!|#|~|\\*|\\^|(\\b(not)\\b)", "name": "keyword.operator.unary.alloy" } + { + "match": "!|#|~|\\*|\\^|(\\b(not)\\b)", + "name": "keyword.operator.unary.alloy" + } ] }, "binary": { "patterns": [ - { "match": "(?:\\|\\|)|&&|<=>|=>|&|\\+|-|\\+\\+|<:|:>|\\.|=|->", "name": "keyword.operator.binary.alloy" }, - { "match": "\\b(and|or|iff|implies|else|in)\\b", "name": "keyword.operator.binary.alloy" }, - { "match": "=|<|>|=<|>=", "name": "keyword.operator.binary.alloy" }, + { + "match": "(?:\\|\\|)|&&|<=>|=>|&|\\+|-|\\+\\+|<:|:>|\\.|=|->", + "name": "keyword.operator.binary.alloy" + }, + { + "match": "\\b(and|or|iff|implies|else|in)\\b", + "name": "keyword.operator.binary.alloy" + }, + { + "match": "=|<|>|=<|>=", + "name": "keyword.operator.binary.alloy" + }, { "match": ",", "name": "keyword.other.comma.alloy" }, { "match": "\\|", "name": "keyword.other.split.alloy" } ] @@ -97,8 +130,14 @@ "patterns": [ { "match": "\\b(for)\\b", "name": "keyword.control.for.alloy" }, { "match": "\\b(but)\\b", "name": "keyword.control.but.alloy" }, - { "match": "\\b(exactly)\\b", "name": "keyword.control.exactly.alloy" }, - { "match": "\\b(expect)\\b", "name": "keyword.control.expect.alloy" }, + { + "match": "\\b(exactly)\\b", + "name": "keyword.control.exactly.alloy" + }, + { + "match": "\\b(expect)\\b", + "name": "keyword.control.expect.alloy" + }, { "match": "\\b(steps)\\b", "name": "keyword.control.steps.alloy" } ] } @@ -150,21 +189,34 @@ { "begin": "(extends)", "end": "(?=\\{)", - "beginCaptures": { "1": { "name": "keyword.language.extends.alloy" } }, + "beginCaptures": { + "1": { "name": "keyword.language.extends.alloy" } + }, "patterns": [ - { "match": "(?:\\w|'|_|\\d|/)+", "name": "entity.other.inherited-class.alloy" } + { + "match": "(?:\\w|'|_|\\d|/)+", + "name": "entity.other.inherited-class.alloy" + } ] }, { "begin": "(in)", "end": "(?=\\{)", - "beginCaptures": { "1": { "name": "keyword.other.in.alloy" } }, + "beginCaptures": { + "1": { "name": "keyword.other.in.alloy" } + }, "patterns": [ - { "match": "(?:\\w|'|_|\\d|/)+", "name": "entity.other.inherited-class.alloy" }, + { + "match": "(?:\\w|'|_|\\d|/)+", + "name": "entity.other.inherited-class.alloy" + }, { "match": "\\+", "name": "keyword.operator.binary.alloy" } ] }, - { "match": "(?:\\w|'|_|\\d|/)+", "name": "entity.name.type.signature.alloy" }, + { + "match": "(?:\\w|'|_|\\d|/)+", + "name": "entity.name.type.signature.alloy" + }, { "match": ",", "name": "keyword.other.comma.alloy" } ] } diff --git a/src/utils/downloadFont.ts b/src/utils/downloadFont.ts index 7e01e45..478e29a 100644 --- a/src/utils/downloadFont.ts +++ b/src/utils/downloadFont.ts @@ -1,21 +1,29 @@ import FontFaceObserver from "fontfaceobserver" const GENERIC_FAMILIES = new Set([ - "serif", "sans-serif", "monospace", "cursive", "fantasy", - "system-ui", "ui-serif", "ui-sans-serif", "ui-monospace", "ui-rounded", + "serif", + "sans-serif", + "monospace", + "cursive", + "fantasy", + "system-ui", + "ui-serif", + "ui-sans-serif", + "ui-monospace", + "ui-rounded" ]) const parseWebFontFamilies = (font: string): string[] => font .split(",") - .map(f => f.trim().replace(/^["']|["']$/g, "")) - .filter(f => f && !GENERIC_FAMILIES.has(f)) + .map((f) => f.trim().replace(/^["']|["']$/g, "")) + .filter((f) => f && !GENERIC_FAMILIES.has(f)) const assembleFontLink = (families: string[]): string | null => { if (families.length === 0) return null - return `https://api.fonts.coollabs.io/css2?display=swap&${ - families.map(f => `family=${f.replaceAll(" ", "+")}`).join("&") - }` + return `https://api.fonts.coollabs.io/css2?display=swap&${families + .map((f) => `family=${f.replaceAll(" ", "+")}`) + .join("&")}` } export const downloadFont = async ( @@ -28,7 +36,7 @@ export const downloadFont = async ( if (href) { const alreadyLoaded = Array.from( document.head.querySelectorAll('link[rel="stylesheet"]') - ).some(link => link.href === href) + ).some((link) => link.href === href) if (!alreadyLoaded) { const link = document.createElement("link")