Merge pull request #32 from timothycohen/bundle-katex-css

Fix katex.css export
timothycohen · Nov 7, 2024 · c47fb03 · c47fb03
2 parents a30cbaf + 2f43ba8
commit c47fb03
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 5 deletions.
diff --git a/.changeset/clean-llamas-count.md b/.changeset/clean-llamas-count.md
@@ -0,0 +1,5 @@
+---
+'@samplekit/preprocess-katex': patch
+---
+
+fix: katex.css export location
diff --git a/packages/preprocess-katex/package.json b/packages/preprocess-katex/package.json
@@ -13,13 +13,13 @@
 		"check": "tsc --noEmit",
 		"validate": "pnpm install --frozen-lockfile && pnpm format && pnpm lint && pnpm check",
 		"clean": "rm -rf dist",
-		"build": "pnpm clean && tsc",
+		"build": "pnpm clean && tsc && cp src/katex.css dist && cp -r node_modules/katex/dist/fonts dist",
 		"prepublishOnly": "pnpm build"
 	},
 	"exports": {
 		".": "./dist/index.js",
 		"./client": "./dist/client.js",
-		"./katex.css": "./node_modules/katex/dist/katex.css",
+		"./katex.css": "./dist/katex.css",
 		"./katex.js": "./dist/katex.js",
 		"./package.json": "./package.json"
 	},

diff --git a/packages/preprocess-katex/src/katex.css b/packages/preprocess-katex/src/katex.css
@@ -0,0 +1 @@
+@import 'katex/dist/katex.css';
diff --git a/sites/preprocessor-docs/src/app.css b/sites/preprocessor-docs/src/app.css
@@ -1,3 +1,4 @@
+@import '@samplekit/preprocess-katex/katex.css';
 @import './lib/styles/css/tokens.css';
 @import './lib/styles/css/themes.css';
 @import './lib/styles/css/code.css';

diff --git a/sites/preprocessor-docs/src/routes/+layout.svelte b/sites/preprocessor-docs/src/routes/+layout.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import '@samplekit/preprocess-katex/katex.css';
 	import '../app.css';
 	import { tick } from 'svelte';
 	import { browser } from '$app/environment';

diff --git a/sites/preprocessor-docs/src/routes/docs/math/+page.svelte b/sites/preprocessor-docs/src/routes/docs/math/+page.svelte
@@ -105,7 +105,7 @@ shiki-end -->
 		<span class="step-content">
 			<span class="lg:text-lg">
 				<!-- shiki-start
-d"diff-add" l"1" l"5-6" l"11-14"
+d"diff-add" l"1" l"5-6" l"11-16"
 ```ts
 import { processKatex, createKatexLogger } from '@samplekit/preprocess-katex';
 import adapter from '@sveltejs/adapter-auto';
@@ -120,6 +120,8 @@ const config = {
 		processKatex({
 			include: (filename) => filename.startsWith(preprocessorRoot),
 			logger: createKatexLogger(formatFilename),
+			// optionally use your own katex installation
+			// renderToString: katex.renderToString
 		}),
 		vitePreprocess(),
 	],
@@ -143,6 +145,22 @@ shiki-end -->
 			</a>
 		</span>
 	</li>
+
+	<li class="step">
+		<span class="step-title">Import <code>katex.css</code> into your <code>app.css</code></span>
+		<span class="step-content">
+			<span class="lg:text-lg">
+				<!-- shiki-start
+p c"no-lines"
+```css
+@import '@samplekit/preprocess-katex/katex.css';
+/* optionally use your own katex installation */
+/* @import 'katex/dist/katex.css'; */
+```
+shiki-end -->
+			</span>
+		</span>
+	</li>
 </ol>
 
 <HAnchor tag="h2" title="Svelte Template" />

diff --git a/sites/samplekit.dev/src/app.css b/sites/samplekit.dev/src/app.css
@@ -1,3 +1,4 @@
+@import '@samplekit/preprocess-katex/katex.css';
 @import './lib/styles/css/tokens.css';
 @import './lib/styles/css/themes.css';
 @import './lib/styles/css/code.css';

diff --git a/sites/samplekit.dev/src/routes/+layout.svelte b/sites/samplekit.dev/src/routes/+layout.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import '@samplekit/preprocess-katex/katex.css';
 	import '../app.css';
 	import { tick } from 'svelte';
 	import { browser } from '$app/environment';