From 9cd90ae22a88895cd5b6dee3d1d7b54f2a736232 Mon Sep 17 00:00:00 2001 From: riceset Date: Wed, 18 Mar 2026 19:27:05 +0900 Subject: [PATCH] redesign almost done --- Logo_tufs-cropped.svg | 1 + quartz.layout.ts | 12 ++- quartz/components/Graph.tsx | 103 +++++++++++++++------- quartz/components/HomeHero.tsx | 2 +- quartz/components/HomeProfile.tsx | 8 +- quartz/components/scripts/graph.inline.ts | 80 +++++++++++++++-- quartz/components/styles/footer.scss | 2 +- quartz/components/styles/graph.scss | 46 ++++++++++ quartz/static/logos/Logo_tufs-cropped.svg | 3 + 9 files changed, 209 insertions(+), 48 deletions(-) create mode 100644 Logo_tufs-cropped.svg create mode 100644 quartz/static/logos/Logo_tufs-cropped.svg diff --git a/Logo_tufs-cropped.svg b/Logo_tufs-cropped.svg new file mode 100644 index 000000000..60a784295 --- /dev/null +++ b/Logo_tufs-cropped.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/quartz.layout.ts b/quartz.layout.ts index 0d8ede11d..82bd48ab1 100644 --- a/quartz.layout.ts +++ b/quartz.layout.ts @@ -5,7 +5,17 @@ import * as Component from "./quartz/components" export const sharedPageComponents: SharedLayout = { head: Component.Head(), header: [], - afterBody: [], + afterBody: [ + Component.ConditionalRender({ + component: Component.Graph({ + globalOnly: true, + globalGraph: { + removeSlugs: ["index"], + }, + }), + condition: (props) => props.fileData.slug === "index", + }), + ], footer: Component.Footer({ links: {}, }), diff --git a/quartz/components/Graph.tsx b/quartz/components/Graph.tsx index 907372e93..50bc69fd4 100644 --- a/quartz/components/Graph.tsx +++ b/quartz/components/Graph.tsx @@ -15,6 +15,7 @@ export interface D3Config { linkDistance: number fontSize: number opacityScale: number + removeSlugs: string[] removeTags: string[] showTags: boolean focusOnHover?: boolean @@ -22,11 +23,13 @@ export interface D3Config { } interface GraphOptions { + globalOnly: boolean localGraph: Partial | undefined globalGraph: Partial | undefined } const defaultOptions: GraphOptions = { + globalOnly: false, localGraph: { drag: true, zoom: true, @@ -37,6 +40,7 @@ const defaultOptions: GraphOptions = { linkDistance: 30, fontSize: 0.6, opacityScale: 1, + removeSlugs: [], showTags: true, removeTags: [], focusOnHover: false, @@ -52,6 +56,7 @@ const defaultOptions: GraphOptions = { linkDistance: 30, fontSize: 0.6, opacityScale: 1, + removeSlugs: [], showTags: true, removeTags: [], focusOnHover: true, @@ -59,45 +64,79 @@ const defaultOptions: GraphOptions = { }, } +const GraphIcon = () => ( + + + + + + + + + + +) + export default ((opts?: Partial) => { const Graph: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => { const localGraph = { ...defaultOptions.localGraph, ...opts?.localGraph } const globalGraph = { ...defaultOptions.globalGraph, ...opts?.globalGraph } + const graphConfig = opts?.globalOnly ? globalGraph : localGraph + const title = opts?.globalOnly ? "Graph" : i18n(cfg.locale).components.graph.title return ( -
-

{i18n(cfg.locale).components.graph.title}

+
+ {opts?.globalOnly ? ( +

+ + {title} +

+ ) : ( +

{title}

+ )}
-
- -
-
-
+
+ {!opts?.globalOnly && ( + + )}
+ {!opts?.globalOnly && ( +
+
+
+ )}
) } diff --git a/quartz/components/HomeHero.tsx b/quartz/components/HomeHero.tsx index 696fa9bfe..2f6bf9a65 100644 --- a/quartz/components/HomeHero.tsx +++ b/quartz/components/HomeHero.tsx @@ -31,7 +31,7 @@ const HomeHero: QuartzComponent = () => {

Software engineer and linguist. Interning at MIXI, Inc building iOS features for FamilyAlbum. MEXT Scholar at Tokyo University of Foreign Studies. 42 Network alumnus. - Native in English, Japanese, and Portuguese β€” also speak Spanish and Mandarin. + Native in Japanese and Portuguese, bilingual in English, and also speak Spanish and Mandarin.

diff --git a/quartz/components/HomeProfile.tsx b/quartz/components/HomeProfile.tsx index e2fc1ace8..0ab9726a3 100644 --- a/quartz/components/HomeProfile.tsx +++ b/quartz/components/HomeProfile.tsx @@ -84,7 +84,7 @@ const education: EducationItem[] = [ degree: "B.A. Language and Area Studies", institution: "Tokyo University of Foreign Studies", institutionUrl: "https://www.tufs.ac.jp/english/", - logo: "/static/logos/tufs.svg", + logo: "/static/logos/Logo_tufs-cropped.svg", period: "2024 – 2028", }, { @@ -98,10 +98,10 @@ const education: EducationItem[] = [ const languages: Language[] = [ { flag: "πŸ‡§πŸ‡·", name: "Portuguese", level: "Native" }, - { flag: "πŸ‡ΊπŸ‡Έ", name: "English", level: "Native" }, + { flag: "πŸ‡ΊπŸ‡Έ", name: "English", level: "Bilingual Β· TOEIC 945" }, { flag: "πŸ‡―πŸ‡΅", name: "Japanese", level: "Native Β· JLPT N1" }, - { flag: "πŸ‡ͺπŸ‡Έ", name: "Spanish", level: "Professional Β· TOEIC 945" }, - { flag: "πŸ‡¨πŸ‡³", name: "Mandarin", level: "Working Β· HSK 3 Β· TOCFL 4" }, + { flag: "πŸ‡ͺπŸ‡Έ", name: "Spanish", level: "Professional" }, + { flag: "πŸ‡¨πŸ‡³", name: "Mandarin", level: "Working Β· HSK 3 Β· TBCL 4" }, ] // ── Component ────────────────────────────────────────────────────────────── diff --git a/quartz/components/scripts/graph.inline.ts b/quartz/components/scripts/graph.inline.ts index a669b0547..661176b29 100644 --- a/quartz/components/scripts/graph.inline.ts +++ b/quartz/components/scripts/graph.inline.ts @@ -68,6 +68,17 @@ type TweenNode = { stop: () => void } +function getGraphDimensions(graph: HTMLElement) { + const parent = graph.parentElement + const graphRect = graph.getBoundingClientRect() + const parentRect = parent?.getBoundingClientRect() + + return { + width: Math.max(Math.round(graphRect.width), Math.round(parentRect?.width ?? 0)), + height: Math.max(Math.round(graphRect.height), Math.round(parentRect?.height ?? 0), 250), + } +} + async function renderGraph(graph: HTMLElement, fullSlug: FullSlug) { const slug = simplifySlug(fullSlug) const visited = getVisited() @@ -83,17 +94,18 @@ async function renderGraph(graph: HTMLElement, fullSlug: FullSlug) { linkDistance, fontSize, opacityScale, + removeSlugs, removeTags, showTags, focusOnHover, enableRadial, } = JSON.parse(graph.dataset["cfg"]!) as D3Config + const hiddenSlugs = new Set(removeSlugs.map((slug) => simplifySlug(slug as FullSlug))) const data: Map = new Map( - Object.entries(await fetchData).map(([k, v]) => [ - simplifySlug(k as FullSlug), - v, - ]), + Object.entries(await fetchData) + .map(([k, v]) => [simplifySlug(k as FullSlug), v] as const) + .filter(([slug]) => !hiddenSlugs.has(slug)), ) const links: SimpleLinkData[] = [] const tags: SimpleSlug[] = [] @@ -123,7 +135,7 @@ async function renderGraph(graph: HTMLElement, fullSlug: FullSlug) { } const neighbourhood = new Set() - const wl: (SimpleSlug | "__SENTINEL")[] = [slug, "__SENTINEL"] + const wl: (SimpleSlug | "__SENTINEL")[] = validLinks.has(slug) ? [slug, "__SENTINEL"] : [] if (depth >= 0) { while (depth >= 0 && wl.length > 0) { // compute neighbours @@ -161,8 +173,7 @@ async function renderGraph(graph: HTMLElement, fullSlug: FullSlug) { })), } - const width = graph.offsetWidth - const height = Math.max(graph.offsetHeight, 250) + const { width, height } = getGraphDimensions(graph) // we virtualize the simulation and use pixi to actually render it const simulation: Simulation = forceSimulation(graphData.nodes) @@ -556,6 +567,57 @@ async function renderGraph(graph: HTMLElement, fullSlug: FullSlug) { } } +async function mountGraph(graph: HTMLElement, fullSlug: FullSlug) { + let cleanup = () => {} + let isRendering = false + let pendingRender = false + let lastWidth = 0 + let lastHeight = 0 + + const render = async (force = false) => { + if (isRendering) { + pendingRender = true + return + } + + const { width, height } = getGraphDimensions(graph) + if (!force && width === lastWidth && height === lastHeight) { + return + } + + isRendering = true + cleanup() + + try { + cleanup = await renderGraph(graph, fullSlug) + lastWidth = width + lastHeight = height + } finally { + isRendering = false + if (pendingRender) { + pendingRender = false + void render() + } + } + } + + await render(true) + + const resizeObserver = new ResizeObserver(() => { + void render() + }) + + resizeObserver.observe(graph) + if (graph.parentElement) { + resizeObserver.observe(graph.parentElement) + } + + return () => { + resizeObserver.disconnect() + cleanup() + } +} + let localGraphCleanups: (() => void)[] = [] let globalGraphCleanups: (() => void)[] = [] @@ -581,7 +643,7 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => { cleanupLocalGraphs() const localGraphContainers = document.getElementsByClassName("graph-container") for (const container of localGraphContainers) { - localGraphCleanups.push(await renderGraph(container as HTMLElement, slug)) + localGraphCleanups.push(await mountGraph(container as HTMLElement, slug)) } } @@ -608,7 +670,7 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => { const graphContainer = container.querySelector(".global-graph-container") as HTMLElement registerEscapeHandler(container, hideGlobalGraph) if (graphContainer) { - globalGraphCleanups.push(await renderGraph(graphContainer, slug)) + globalGraphCleanups.push(await mountGraph(graphContainer, slug)) } } } diff --git a/quartz/components/styles/footer.scss b/quartz/components/styles/footer.scss index 887387bda..50eab2e4b 100644 --- a/quartz/components/styles/footer.scss +++ b/quartz/components/styles/footer.scss @@ -5,8 +5,8 @@ footer { opacity: 0.7; &.home-footer { + margin-top: 0; padding-top: 2rem; - border-top: 1px solid var(--lightgray); } & ul { diff --git a/quartz/components/styles/graph.scss b/quartz/components/styles/graph.scss index cb1b7b464..c28087486 100644 --- a/quartz/components/styles/graph.scss +++ b/quartz/components/styles/graph.scss @@ -6,6 +6,41 @@ margin: 0; } + &.global-only { + margin-top: 2rem; + padding-top: 2rem; + border-top: 1px solid var(--lightgray); + } + + & .graph-section-heading { + display: flex; + align-items: center; + gap: 0.4rem; + font-family: var(--headerFont); + font-size: 0.8rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--gray); + margin: 0 0 1.25rem; + } + + & .section-icon { + width: 14px; + height: 14px; + flex-shrink: 0; + stroke: var(--gray); + } + + &.global-only > .graph-outer { + height: 420px; + margin: 0; + + @media all and ($mobile) { + height: 320px; + } + } + & > .graph-outer { border-radius: 5px; border: 1px solid var(--lightgray); @@ -15,6 +50,17 @@ position: relative; overflow: hidden; + & > .graph-container { + width: 100%; + height: 100%; + } + + & canvas { + display: block; + width: 100%; + height: 100%; + } + & > .global-graph-icon { cursor: pointer; background: none; diff --git a/quartz/static/logos/Logo_tufs-cropped.svg b/quartz/static/logos/Logo_tufs-cropped.svg new file mode 100644 index 000000000..7ef9e51e6 --- /dev/null +++ b/quartz/static/logos/Logo_tufs-cropped.svg @@ -0,0 +1,3 @@ + + +