starlight-obsidian 0.8.1 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # starlight-obsidian
 
+## 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
+
+- [#51](https://github.com/HiDeoo/starlight-obsidian/pull/51) [`b067e02`](https://github.com/HiDeoo/starlight-obsidian/commit/b067e026613abe8aaed9b3de673a5ae93e70525e) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Fixes an issue with embedded note sections not being rendered correctly.
+
 ## 0.8.1
 
 ### 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

@@ -20,7 +20,7 @@ import type {
 import { findAndReplace } from 'mdast-util-find-and-replace'
 import { toHast } from 'mdast-util-to-hast'
 import { customAlphabet } from 'nanoid'
-import { CONTINUE, SKIP, visit } from 'unist-util-visit'
+import { CONTINUE, EXIT, SKIP, visit } from 'unist-util-visit'
 import type { VFile } from 'vfile'
 import yaml from 'yaml'
 
@@ -669,9 +669,13 @@ function getCustomFileNode(filePath: string): RootContent {
 async function getMarkdownFileNode(file: VFile, fileUrl: string): Promise<RootContent> {
   ensureTransformContext(file)
 
+  const [fileName, ...anchorSegments] = fileUrl.split('#')
+  const fileAnchor = anchorSegments.join('#')
   const fileExt = file.data.vault.options.linkSyntax === 'wikilink' ? '.md' : ''
   const filePath = decodeURIComponent(
-    file.data.vault.options.linkFormat === 'relative' ? getRelativeFilePath(file, fileUrl) : fileUrl,
+    file.data.vault.options.linkFormat === 'relative'
+      ? getRelativeFilePath(file, fileName ?? fileUrl)
+      : (fileName ?? fileUrl),
   )
   const url = path.posix.join(path.posix.sep, `${filePath}${fileExt}`)
   const matchingFile = file.data.files.find(
@@ -685,6 +689,10 @@ async function getMarkdownFileNode(file: VFile, fileUrl: string): Promise<RootCo
   const content = fs.readFileSync(matchingFile.fsPath, 'utf8')
   const root = await transformMarkdownToAST(matchingFile.fsPath, content, { ...file.data, embedded: true })
 
+  if (fileAnchor) {
+    root.children = extractMarkdownSection(root, fileAnchor)
+  }
+
   return {
     type: 'blockquote',
     children: [
@@ -705,6 +713,35 @@ function replaceNode({ index, parent }: VisitorContext, replacement: RootContent
   parent.children.splice(index, 1, ...(Array.isArray(replacement) ? replacement : [replacement]))
 }
 
+function extractMarkdownSection(root: Root, sectionAnchor: string) {
+  const children: Root['children'] = []
+
+  visit(root, (node, index, parent) => {
+    switch (node.type) {
+      case 'heading': {
+        if (!parent || index === undefined) return CONTINUE
+        const headingText = node.children.find((child) => child.type === 'text')?.value
+        if (headingText !== sectionAnchor) return CONTINUE
+
+        children.push(node)
+
+        let nextNode = parent.children[index + 1]
+        while (nextNode && (nextNode.type !== 'heading' || nextNode.depth > node.depth)) {
+          children.push(nextNode)
+          nextNode = parent.children[index + children.length]
+        }
+
+        return EXIT
+      }
+      default: {
+        return CONTINUE
+      }
+    }
+  })
+
+  return children
+}
+
 // We are using `Html` node instead of real MDX nodes because 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "starlight-obsidian",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "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)));
-  }
-}