starlight-obsidian 0.8.2 → 0.9.1

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # starlight-obsidian
 
+## 0.9.1
+
+### Patch Changes
+
+- [#56](https://github.com/HiDeoo/starlight-obsidian/pull/56) [`ff18bbd`](https://github.com/HiDeoo/starlight-obsidian/commit/ff18bbd6b2614e5e817fdca2005825ea1841e0a0) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Fixes a potential syntax issue when converting Obsidian vault files containing void elements to MDX format.
+
+## 0.9.0
+
+### Minor Changes
+
+- [#53](https://github.com/HiDeoo/starlight-obsidian/pull/53) [`be89246`](https://github.com/HiDeoo/starlight-obsidian/commit/be8924661655c041a7339d040c4518e74e39defb) Thanks [@HiDeoo](https://github.com/HiDeoo)! - ⚠️ **BREAKING CHANGE:** The minimum supported version of Starlight is now version `0.34.0`.
+
+  Please use the `@astrojs/upgrade` command to upgrade your project:
+
+  ```sh
+  npx @astrojs/upgrade
+  ```
+
+- [#53](https://github.com/HiDeoo/starlight-obsidian/pull/53) [`be89246`](https://github.com/HiDeoo/starlight-obsidian/commit/be8924661655c041a7339d040c4518e74e39defb) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Removes the `autoLinkHeadings` option.
+
+  ⚠️ **BREAKING CHANGE:** The `autoLinkHeadings` option has been removed and this feature is now built-in to Starlight and configurable using the Starlight [`markdown.headingLinks` configuration option](https://starlight.astro.build/reference/configuration/#headinglinks) which is enabled by default.
+
+  To conserve the previous default behavior of the plugin, set `markdown.headingLinks` to `false` in your Starlight configuration.
+
+  ```js
+  // astro.config.mjs
+  starlight({
+    markdown: {
+      // Disable Starlight’s clickable heading anchor links.
+      headingLinks: false,
+    },
+  }),
+  ```
+
 ## 0.8.2
 
 ### Patch Changes

package/index.ts

@@ -10,12 +10,6 @@ import { throwUserError } from './libs/plugin'
 import { addObsidianFiles, getSidebarFromConfig, getSidebarGroupPlaceholder, type SidebarGroup } from './libs/starlight'
 
 const starlightObsidianConfigSchema = z.object({
-  /**
-   * Add links to Starlight headings to make it easier to share a link to a specific section of a page.
-   *
-   * @default false
-   */
-  autoLinkHeadings: z.boolean().default(false),
   /**
    * The name of the Obsidian vault configuration folder if different from the default one.
    *
@@ -165,18 +159,12 @@ function makeStarlightObsidianPlugin(
             addRouteMiddleware({ entrypoint: 'starlight-obsidian/middleware' })
           }
 
-          const customCss = [...(starlightConfig.customCss ?? []), 'starlight-obsidian/styles/common']
-
-          if (config.autoLinkHeadings) {
-            customCss.push('starlight-obsidian/styles/autolinks-headings')
-          }
-
           const updatedStarlightConfig: Partial<StarlightUserConfig> = {
             components: {
               ...starlightConfig.components,
               ...overrideStarlightComponent(starlightConfig.components, logger, 'PageTitle'),
             },
-            customCss,
+            customCss: [...(starlightConfig.customCss ?? []), 'starlight-obsidian/styles/common'],
             sidebar: getSidebarFromConfig(config, starlightConfig.sidebar, sidebarGroup),
           }
 

package/libs/integration.ts

@@ -1,12 +1,10 @@
-import { rehypeHeadingIds } from '@astrojs/markdown-remark'
 import type { AstroIntegration } from 'astro'
-import rehypeAutolinkHeadings from 'rehype-autolink-headings'
 import rehypeKatex from 'rehype-katex'
 import remarkMath from 'remark-math'
 
 import type { StarlightObsidianConfig } from '..'
 
-import { getRehypeAutolinkHeadingsOptions, rehypeStarlightObsidian } from './rehype'
+import { rehypeStarlightObsidian } from './rehype'
 import { vitePluginStarlightObsidianConfig } from './vite'
 
 export function starlightObsidianIntegration(config: StarlightObsidianConfig): AstroIntegration {
@@ -16,13 +14,7 @@ export function starlightObsidianIntegration(config: StarlightObsidianConfig): A
       'astro:config:setup': ({ updateConfig }) => {
         updateConfig({
           markdown: {
-            rehypePlugins: [
-              ...(config.autoLinkHeadings
-                ? [rehypeHeadingIds, [rehypeAutolinkHeadings, getRehypeAutolinkHeadingsOptions()]]
-                : []),
-              rehypeStarlightObsidian,
-              rehypeKatex,
-            ],
+            rehypePlugins: [rehypeStarlightObsidian, rehypeKatex],
             remarkPlugins: [remarkMath],
           },
           vite: {

package/libs/rehype.ts

@@ -1,9 +1,5 @@
 import type { Element, ElementContent, Root } from 'hast'
-import { toString } from 'hast-util-to-string'
-import { h } from 'hastscript'
-import { escape } from 'html-escaper'
 import type { Literal } from 'mdast'
-import type { Options as RehypeAutolinkHeadingsOptions } from 'rehype-autolink-headings'
 import { CONTINUE, SKIP, visit } from 'unist-util-visit'
 
 const blockIdentifierRegex = /(?<identifier> *\^(?<name>[\w-]+))$/
@@ -42,24 +38,6 @@ export function rehypeStarlightObsidian() {
   }
 }
 
-// https://hideoo.dev/notes/starlight-heading-links
-// https://github.com/withastro/docs/blob/main/plugins/rehype-autolink.ts
-// https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
-export function getRehypeAutolinkHeadingsOptions(): RehypeAutolinkHeadingsOptions {
-  return {
-    behavior: 'after',
-    content: (heading) => {
-      return [
-        h('span', { ariaHidden: 'true' }, '§'),
-        h('span', { class: 'sr-only' }, `Section titled ${escape(toString(heading))}`),
-      ]
-    },
-    group: ({ tagName }) =>
-      h('div', { class: `sl-obs-section sl-obs-section-level-${tagName.slice(1)}`, tabIndex: -1 }),
-    properties: { class: 'sl-obs-heading-link' },
-  }
-}
-
 function transformBlockIdentifier(reference: Element, node: ElementContent | undefined) {
   if (!isNodeWithValue(node)) {
     return CONTINUE

package/libs/remark.ts

@@ -50,6 +50,7 @@ const wikilinkReplacementRegex = /!?\[\[(?<url>(?:(?![[\]|]).)+)(?:\|(?<maybeTex
 const tagReplacementRegex = /(?:^|\s)#(?<tag>[\w/-]+)/g
 const calloutRegex = /^\[!(?<type>\w+)][+-]? ?(?<title>.*)$/
 const imageSizeRegex = /^(?:(?<altText>.*)\|)?(?:(?<widthOnly>\d+)|(?:(?<width>\d+)x(?<height>\d+)))$/
+const mdxNonClosingVoidElementRegex = /<(?<tag>br|hr)(?<attrs>[^/>]*)>/g
 
 const asideDelimiter = ':::'
 
@@ -88,6 +89,10 @@ export function remarkStarlightObsidian() {
 
     handleFrontmatter(tree, file, obsidianFrontmatter)
     handleImports(tree, file)
+
+    if (file.data.isMdx) {
+      closeVoidElements(tree)
+    }
   }
 }
 
@@ -750,6 +755,19 @@ function createMdxNode(value: string): Html {
   return { type: 'html', value }
 }
 
+// We are not using `remark-mdx` due to the fact that it makes the parsing step way more strict. During our inital
+// testing round, we found out that a few users had pretty poorly formatted Markdown files (usually the result of
+// various Obisidian migration tools) and we wanted to make sure that they could still use Starlight Obsidian.
+// In MDX files, if the source content contains non-closing void elements, we need to convert them to self-closing
+// ones, e.g. `<br>` to `<br/>`.
+// At the moment, we only support `br` and `hr` elements, but based on feedback, we can eventually support all of them.
+function closeVoidElements(tree: Root) {
+  visit(tree, 'html', (node) => {
+    node.value = node.value.replaceAll(mdxNonClosingVoidElementRegex, '<$<tag>$<attrs>/>')
+    return SKIP
+  })
+}
+
 function ensureTransformContext(file: VFile): asserts file is VFile & { data: TransformContext; dirname: string } {
   if (!file.dirname || !file.data.files || file.data.output === undefined || !file.data.vault) {
     throw new Error('Invalid transform context.')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "starlight-obsidian",
-  "version": "0.8.2",
+  "version": "0.9.1",
   "license": "MIT",
   "description": "Starlight plugin to publish Obsidian vaults.",
   "author": "HiDeoo <github@hideoo.dev> (https://hideoo.dev)",
@@ -14,27 +14,21 @@
     "./overrides/PageTitle.astro": "./overrides/PageTitle.astro",
     "./schema": "./schema.ts",
     "./styles/common": "./styles/common.css",
-    "./styles/autolinks-headings": "./styles/autolinks-headings.css",
     "./package.json": "./package.json"
   },
   "dependencies": {
     "@astro-community/astro-embed-twitter": "^0.5.8",
     "@astro-community/astro-embed-youtube": "^0.5.6",
-    "@astrojs/markdown-remark": "^6.0.0",
     "decode-uri-component": "^0.4.1",
     "github-slugger": "^2.0.0",
     "globby": "^14.0.2",
     "hast-util-to-html": "^9.0.4",
-    "hast-util-to-string": "^3.0.1",
-    "hastscript": "^9.0.0",
-    "html-escaper": "^3.0.3",
     "is-absolute-url": "^4.0.1",
     "mdast-util-find-and-replace": "^3.0.1",
     "mdast-util-from-markdown": "^2.0.2",
     "mdast-util-to-hast": "^13.2.0",
     "nanoid": "^5.0.9",
     "rehype": "^13.0.2",
-    "rehype-autolink-headings": "^7.1.0",
     "rehype-katex": "^7.0.1",
     "rehype-mermaid": "^2.1.0",
     "remark": "^15.0.1",
@@ -47,7 +41,6 @@
   },
   "devDependencies": {
     "@types/hast": "^3.0.4",
-    "@types/html-escaper": "^3.0.2",
     "@types/mdast": "^4.0.4",
     "@types/node": "^18.19.68",
     "@types/unist": "^3.0.3",
@@ -55,7 +48,7 @@
     "vitest": "2.1.6"
   },
   "peerDependencies": {
-    "@astrojs/starlight": ">=0.32.0"
+    "@astrojs/starlight": ">=0.34.0"
   },
   "engines": {
     "node": ">=18.17.1"

package/styles/autolinks-headings.css

@@ -1,68 +0,0 @@
-.sl-markdown-content :not(.sl-obs-section) + :is(.sl-obs-section):not(:where(.not-content *)) {
-  margin-top: 1.5em;
-}
-
-.sl-markdown-content .sl-obs-section {
-  --sl-obs-heading-link-spacing: 0.25em;
-
-  line-height: var(--sl-line-height-headings);
-}
-
-.sl-markdown-content .sl-obs-section.sl-obs-section-level-1 {
-  font-size: var(--sl-text-h1);
-}
-
-.sl-markdown-content .sl-obs-section.sl-obs-section-level-2 {
-  font-size: var(--sl-text-h2);
-}
-
-.sl-markdown-content .sl-obs-section.sl-obs-section-level-3 {
-  font-size: var(--sl-text-h3);
-}
-
-.sl-markdown-content .sl-obs-section.sl-obs-section-level-4 {
-  font-size: var(--sl-text-h4);
-}
-
-.sl-markdown-content .sl-obs-section.sl-obs-section-level-5 {
-  font-size: var(--sl-text-h5);
-}
-
-.sl-markdown-content .sl-obs-section.sl-obs-section-level-6 {
-  font-size: var(--sl-text-h6);
-}
-
-.sl-markdown-content .sl-obs-section > :first-child {
-  display: inline;
-  margin-inline-end: var(--sl-obs-heading-link-spacing);
-}
-
-.sl-markdown-content .sl-obs-heading-link {
-  color: var(--sl-color-gray-3);
-  text-decoration: none;
-}
-
-.sl-markdown-content .sl-obs-heading-link:is(:hover, :focus) {
-  color: var(--sl-color-text-accent);
-}
-
-@media (hover: hover) {
-  .sl-markdown-content .sl-obs-heading-link {
-    opacity: 0;
-  }
-}
-
-.sl-markdown-content .sl-obs-section:hover > .sl-obs-heading-link,
-.sl-markdown-content .sl-obs-heading-link:focus {
-  opacity: 1;
-}
-
-@media (min-width: 95em) {
-  .sl-markdown-content .sl-obs-section {
-    display: flex;
-    flex-direction: row-reverse;
-    gap: var(--sl-obs-heading-link-spacing);
-    justify-content: flex-end;
-    margin-inline-start: calc(-1 * (1ch + var(--sl-obs-heading-link-spacing)));
-  }
-}