From 1e428a7fd8e6d5671a56d3e5f28e268683be1536 Mon Sep 17 00:00:00 2001 From: 3w36zj6 <52315048+3w36zj6@users.noreply.github.com> Date: Wed, 29 Oct 2025 14:09:49 +0900 Subject: [PATCH 1/6] feat: improve styling for library pages --- src/components/templates/CategoryTemplate.tsx | 4 +- src/components/templates/FuncTemplate.tsx | 75 +++++++++-------- src/components/templates/GroupTemplate.tsx | 12 +-- src/components/templates/TypeTemplate.tsx | 31 +++---- src/components/ui/FunctionDefinition.tsx | 65 +++++++------- src/components/ui/FunctionDisplay.tsx | 8 +- src/components/ui/FunctionParameters.tsx | 84 +++++++++---------- src/components/ui/genPath.ts | 2 +- 8 files changed, 138 insertions(+), 143 deletions(-) diff --git a/src/components/templates/CategoryTemplate.tsx b/src/components/templates/CategoryTemplate.tsx index 6abe5b9..a0e777a 100644 --- a/src/components/templates/CategoryTemplate.tsx +++ b/src/components/templates/CategoryTemplate.tsx @@ -40,7 +40,9 @@ export const CategoryTemplate: FC = ({ {item.code ? {item.name} : item.name} -
{item.oneliner}
+
+

{item.oneliner}

+
))} diff --git a/src/components/templates/FuncTemplate.tsx b/src/components/templates/FuncTemplate.tsx index cf72ff7..b294e04 100644 --- a/src/components/templates/FuncTemplate.tsx +++ b/src/components/templates/FuncTemplate.tsx @@ -69,16 +69,18 @@ export const FuncTemplate: FC = ({ } })} -

- - +

+
+ + +

-
+
-
+
@@ -109,48 +111,47 @@ function ScopedDefinitions({ // the following heading levels will _not_ increase with the scope level. return (
-

- {parent ? ( - // Currently, the scope has at most two levels. - // Therefore, it is sufficient to only annotate the direct `parent`. - - ) : ( - - )} - +

+
+ {parent ? ( + // Currently, the scope has at most two levels. + // Therefore, it is sufficient to only annotate the direct `parent`. + + ) : ( + + )} + +

{scope.map((method, _index) => { const methodId = `${parentId}definitions-${method.name}`; return ( -
-

- - {method.name} - - - - {method.element && } - {method.contextual && } - +
+

+
+ + {method.name} + + + + {method.element && } + {method.contextual && } + +

{} -
- -
+ = ({ {content.functions.map((method, _index) => (
-

- {method.name} -
- {method.element && } - {method.contextual && } +

+
+ {method.name} +
+ {method.element && } + {method.contextual && } +

= ({ {content.constructor && ( <> -

- - +

+
+ + +

= ({ {content.scope.length > 0 && ( <> -

- - +

+
+ + +

{content.scope.map((method, _index) => (
-

- {method.name} -
- {method.element && } - {method.contextual && } +

+
+ {method.name} +
+ {method.element && } + {method.contextual && } +

diff --git a/src/components/ui/FunctionDefinition.tsx b/src/components/ui/FunctionDefinition.tsx index dafacd4..d789aa0 100644 --- a/src/components/ui/FunctionDefinition.tsx +++ b/src/components/ui/FunctionDefinition.tsx @@ -20,27 +20,26 @@ export const FunctionDefinition: FC = ({ func, prefix = undefined, }) => { + const funcName = func.self ? "self" : genPath(func); return ( -
-
- {func.self ? "self." : genPath(func)} - {func.name} - ( -
+ 
+			
+				{funcName}
+				{funcName !== "" && .}
+				{func.name}
+				(
+				
 					{func.params.map((param, index) => (
-						

 							{!param.positional && (
-								

-									
-										{param.name}
-										:
+								

+									
+										{param.name}
 									
+									:
 								

 							)}
 							

@@ -58,38 +57,34 @@ export const FunctionDefinition: FC = ({
 								})}
 							

 							{index < func.params.length - 1 && (
-								,
+								,
 							)}
-						

+						
 					))}
-				

-				)
+				
+
+				)
 
 				{func.returns.length > 0 && (
 					<>
-						->
-						

-							{func.returns.map((ret, i) => {
+						->
+						

+							{func.returns.map((ret, _) => {
 								const href = type2href(ret);
 								return (
-									<>
-										
-										{i < func.returns.length - 1 && (
-											,
-										)}
-									
+									
 								);
 							})}
 						

 					
 				)}
-			

-
+ + ); }; diff --git a/src/components/ui/FunctionDisplay.tsx b/src/components/ui/FunctionDisplay.tsx index 721e488..8740c25 100644 --- a/src/components/ui/FunctionDisplay.tsx +++ b/src/components/ui/FunctionDisplay.tsx @@ -32,7 +32,7 @@ export const FunctionDisplay: FC = ({ case "example": return isExampleFolding ? (
- +
@@ -41,14 +41,12 @@ export const FunctionDisplay: FC = ({ title={block.content.title} /> -
+
) : ( -
- -
+ ); default: return null; diff --git a/src/components/ui/FunctionParameters.tsx b/src/components/ui/FunctionParameters.tsx index a344d33..f821af7 100644 --- a/src/components/ui/FunctionParameters.tsx +++ b/src/components/ui/FunctionParameters.tsx @@ -31,35 +31,33 @@ export const FunctionParameters: FC = ({ return (
{params.map((param, _index) => ( -
- - {param.name} -
-
- {param.types.map((t) => { - const href = type2href(t); - return ( - - ); - })} -
+
+ +
+ {param.name} +
+
+ {param.types.map((t) => { + const href = type2href(t); + return ( + + ); + })} +
- {param.required && } - {param.positional && } - {param.variadic && } - {param.settable && } + {param.required && } + {param.positional && } + {param.variadic && } + {param.settable && } +
@@ -74,7 +72,7 @@ export const FunctionParameters: FC = ({ case "example": return (
- +
@@ -83,7 +81,7 @@ export const FunctionParameters: FC = ({ title={block.content.title} /> -
+
@@ -95,24 +93,24 @@ export const FunctionParameters: FC = ({ {param.strings.length > 0 && (
- +
-
    +
      {param.strings.map((string) => (
    • -
      -
      - {string.string} +
      +
      + {string.string}
      -
      +
      @@ -123,14 +121,10 @@ export const FunctionParameters: FC = ({ )} {param.default && ( -

      - - - {" "} - - - -

      +
      + + +
      )}
      ))} diff --git a/src/components/ui/genPath.ts b/src/components/ui/genPath.ts index 1b8493e..ed3275e 100644 --- a/src/components/ui/genPath.ts +++ b/src/components/ui/genPath.ts @@ -7,5 +7,5 @@ import type { Func } from "../../types/model"; * @returns - The concatenated path string */ export const genPath = (item: Func): string => { - return item.path.map((s) => `${s}.`).join(""); + return item.path.join("."); }; From 13502c24b6c5dc54298a416526e1554eb43a3ed1 Mon Sep 17 00:00:00 2001 From: 3w36zj6 <52315048+3w36zj6@users.noreply.github.com> Date: Tue, 4 Nov 2025 11:24:51 +0900 Subject: [PATCH 2/6] fix: layout list item contents horizontally --- src/components/templates/CategoryTemplate.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/templates/CategoryTemplate.tsx b/src/components/templates/CategoryTemplate.tsx index a0e777a..05ecbeb 100644 --- a/src/components/templates/CategoryTemplate.tsx +++ b/src/components/templates/CategoryTemplate.tsx @@ -32,16 +32,16 @@ export const CategoryTemplate: FC = ({

      -
        +
          {page.body.content.items.map((item) => (
        • - -
          -

          {item.oneliner}

          +
          +
          + + {item.code ? {item.name} : item.name} + +
          +
          {item.oneliner}
          • ))} From 1162d7c114c6d8d2aa20ab929ce89808bb17e921 Mon Sep 17 00:00:00 2001 From: 3w36zj6 <52315048+3w36zj6@users.noreply.github.com> Date: Tue, 4 Nov 2025 12:10:05 +0900 Subject: [PATCH 3/6] refactor: inline function name decoration logic into function definition component --- src/components/ui/FunctionDefinition.tsx | 22 +++++++++++++++++----- src/components/ui/genPath.ts | 11 ----------- 2 files changed, 17 insertions(+), 16 deletions(-) delete mode 100644 src/components/ui/genPath.ts diff --git a/src/components/ui/FunctionDefinition.tsx b/src/components/ui/FunctionDefinition.tsx index d789aa0..734f874 100644 --- a/src/components/ui/FunctionDefinition.tsx +++ b/src/components/ui/FunctionDefinition.tsx @@ -2,10 +2,25 @@ import type { FC } from "hono/jsx"; import { basePath } from "../../metadata"; import type { Func } from "../../types/model"; import { joinPath } from "../../utils/path"; -import { genPath } from "./genPath"; import { TypeIcon } from "./TypeIcon"; import { buildParamId, type2href } from "./type2href"; +/** + * Returns the decorated function name with `.typ-func` and `.typ-punct` spans. + * + * For Typst v0.14.0, the path is either empty or has only one item. + */ +const DecoratedFuncName: FC<{ func: Func }> = ({ func }) => { + const funcName = func.self ? "self" : func.path.join("."); + return ( + <> + {funcName} + {funcName !== "" && .} + {func.name} + + ); +}; + type FunctionDefinitionProps = { func: Func; /** @@ -20,13 +35,10 @@ export const FunctionDefinition: FC = ({ func, prefix = undefined, }) => { - const funcName = func.self ? "self" : genPath(func); return ( 
           			
-				{funcName}
-				{funcName !== "" && .}
-				{func.name}
+				
 				(
 				
 					{func.params.map((param, index) => (
diff --git a/src/components/ui/genPath.ts b/src/components/ui/genPath.ts
deleted file mode 100644
index ed3275e..0000000
--- a/src/components/ui/genPath.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { Func } from "../../types/model";
-
-/**
- * Concatenates path segments.
- *
- * @param item - A Func object
- * @returns - The concatenated path string
- */
-export const genPath = (item: Func): string => {
-	return item.path.join(".");
-};

From 2c9507b8ec35d4bf44eed1a34e15e815693806da Mon Sep 17 00:00:00 2001
From: 3w36zj6 <52315048+3w36zj6@users.noreply.github.com>
Date: Tue, 4 Nov 2025 13:38:19 +0900
Subject: [PATCH 4/6] fix: remove unnecessary margin classes from function page
 template

---
 src/components/templates/FuncTemplate.tsx | 15 ++++-----------
 src/components/ui/FunctionDisplay.tsx     | 12 +++---------
 src/components/ui/FunctionParameters.tsx  |  2 +-
 3 files changed, 8 insertions(+), 21 deletions(-)

diff --git a/src/components/templates/FuncTemplate.tsx b/src/components/templates/FuncTemplate.tsx
index b294e04..8ebc8ce 100644
--- a/src/components/templates/FuncTemplate.tsx
+++ b/src/components/templates/FuncTemplate.tsx
@@ -52,14 +52,14 @@ export const FuncTemplate: FC = ({
 				switch (block.kind) {
 					case "html":
 						return (
-							
          
+							
          
 								
 							
          
 						);
 					case "example":
 						// This will never reach for Typst v0.13.1 and v0.14.0-rc.1 documentations.
 						return (
-							
          
+							
          
 								{block.content.title}
 								
 							
          
@@ -75,15 +75,8 @@ export const FuncTemplate: FC = ({

- -
- -
- -
- -
- + + ); diff --git a/src/components/ui/FunctionDisplay.tsx b/src/components/ui/FunctionDisplay.tsx index 36c3d84..6c1d7ca 100644 --- a/src/components/ui/FunctionDisplay.tsx +++ b/src/components/ui/FunctionDisplay.tsx @@ -41,7 +41,7 @@ export const FunctionDisplay: FC = ({ title={block.content.title} /> -
+
@@ -52,14 +52,8 @@ export const FunctionDisplay: FC = ({ return null; } })} - -
- -
- -
- -
+ + ); }; diff --git a/src/components/ui/FunctionParameters.tsx b/src/components/ui/FunctionParameters.tsx index 718054e..9ba498d 100644 --- a/src/components/ui/FunctionParameters.tsx +++ b/src/components/ui/FunctionParameters.tsx @@ -81,7 +81,7 @@ export const FunctionParameters: FC = ({ title={block.content.title} /> -
+
From c15054b25a06ce0b435f0e815e7d9cd14d1821e2 Mon Sep 17 00:00:00 2001 From: 3w36zj6 <52315048+3w36zj6@users.noreply.github.com> Date: Tue, 4 Nov 2025 13:53:13 +0900 Subject: [PATCH 5/6] fix: align default value display to center vertically in function parameters --- src/components/ui/FunctionParameters.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ui/FunctionParameters.tsx b/src/components/ui/FunctionParameters.tsx index 9ba498d..0cc15c4 100644 --- a/src/components/ui/FunctionParameters.tsx +++ b/src/components/ui/FunctionParameters.tsx @@ -121,7 +121,7 @@ export const FunctionParameters: FC = ({ )} {param.default && ( -
+
From d80ee0e690010cc10fbaa287cd88c7dd02f694a4 Mon Sep 17 00:00:00 2001 From: 3w36zj6 <52315048+3w36zj6@users.noreply.github.com> Date: Tue, 4 Nov 2025 13:54:39 +0900 Subject: [PATCH 6/6] fix: remove `pre` selector from code span styles --- src/globals.css | 42 +++++++++++++++++++++--------------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/src/globals.css b/src/globals.css index 9dc0b11..f3f9cc3 100644 --- a/src/globals.css +++ b/src/globals.css @@ -99,71 +99,71 @@ cf. - crates/typst-syntax/src/highlight.rs - crates/typst-library/src/text/raw.rs */ -pre code span.typ-comment { +code span.typ-comment { color: #8a8a8a; } -pre code span.typ-escape { +code span.typ-escape { color: #1d6c76; } -pre code span.typ-strong { +code span.typ-strong { font-weight: bold; } -pre code span.typ-emph { +code span.typ-emph { font-style: italic; } -pre code span.typ-link { +code span.typ-link { text-decoration: underline; color: #1d6c76; } -pre code span.typ-raw { +code span.typ-raw { color: #818181; } -pre code span.typ-label { +code span.typ-label { color: #1d6c76; } -pre code span.typ-ref { +code span.typ-ref { color: #1d6c76; } -pre code span.typ-heading { +code span.typ-heading { color: #4b69c6; font-weight: bold; text-decoration: underline; } -pre code span.typ-marker { +code span.typ-marker { color: #8b41b1; } -pre code span.typ-term { +code span.typ-term { color: #8b41b1; font-weight: bold; } -pre code span.typ-math-delim { +code span.typ-math-delim { color: #298e0d; } -pre code span.typ-math-op { +code span.typ-math-op { color: #1d6c76; } -pre code span.typ-key { +code span.typ-key { color: #d73a49; } -pre code span.typ-num { +code span.typ-num { color: #b60157; } -pre code span.typ-str { +code span.typ-str { color: #298e0d; } -pre code span.typ-func { +code span.typ-func { color: #4b69c6; } -pre code span.typ-pol { +code span.typ-pol { color: #8b41b1; } -pre code span.typ-punct { +code span.typ-punct { color: #6b7280; } -pre code span.typ-op { +code span.typ-op { color: #d73a49; } -pre code span.typ-error { +code span.typ-error { background: #d73a49; color: #ffffff; padding: 0 0.12rem;