starlight-obsidian 0.7.0 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # starlight-obsidian
 
+## 0.8.0
+
+### Minor Changes
+
+- [#45](https://github.com/HiDeoo/starlight-obsidian/pull/45) [`8d1b58c`](https://github.com/HiDeoo/starlight-obsidian/commit/8d1b58cc761ccf380f1dfad25f9b784a7ae4f6bf) Thanks [@HiDeoo](https://github.com/HiDeoo)! - ⚠️ **BREAKING CHANGE:** The minimum supported version of Starlight is now version `0.32.0`.
+
+  Please use the `@astrojs/upgrade` command to upgrade your project:
+
+  ```sh
+  npx @astrojs/upgrade
+  ```
+
+- [#45](https://github.com/HiDeoo/starlight-obsidian/pull/45) [`8d1b58c`](https://github.com/HiDeoo/starlight-obsidian/commit/8d1b58cc761ccf380f1dfad25f9b784a7ae4f6bf) Thanks [@HiDeoo](https://github.com/HiDeoo)! - ⚠️ **BREAKING CHANGE:** The Starlight Obsidian plugin no longer [overrides](https://starlight.astro.build/guides/overriding-components/) the [`<PageSidebar>` component](https://starlight.astro.build/reference/overrides/#pagesidebar). If you were manually rendering `starlight-obsidian/overrides/PageSidebar.astro` in a custom override, you can now remove it.
+
+## 0.7.1
+
+### Patch Changes
+
+- [#41](https://github.com/HiDeoo/starlight-obsidian/pull/41) [`ab86671`](https://github.com/HiDeoo/starlight-obsidian/commit/ab8667139930cad8322ed494a760547e896e7a27) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Fixes an issue with custom aside titles including links.
+
 ## 0.7.0
 
 ### Minor Changes

package/components/starlight/PageTitle.astro

@@ -0,0 +1,11 @@
+---
+import Tags from '../Tags.astro'
+
+const { entry } = Astro.locals.starlightRoute
+
+// @ts-expect-error - This plugin does not extend Starlight's schema so tags are unknown.
+const tags = entry['data']['tags']
+const showTags = tags !== undefined && tags.length > 0
+---
+
+{showTags && <Tags {tags} />}

package/index.ts

@@ -106,7 +106,7 @@ const starlightObsidianConfigSchema = z.object({
   vault: z.string(),
 })
 
-let pluginsCount = 0
+let overridesInjected = false
 
 export const obsidianSidebarGroup = getSidebarGroupPlaceholder()
 
@@ -122,7 +122,7 @@ export function createStarlightObsidianPlugin(): [plugin: typeof starlightObsidi
 function makeStarlightObsidianPlugin(
   sidebarGroup: SidebarGroup,
 ): (userConfig: StarlightObsidianUserConfig) => StarlightPlugin {
-  pluginsCount++
+  overridesInjected = true
 
   return function starlightObsidianPlugin(userConfig) {
     const parsedConfig = starlightObsidianConfigSchema.safeParse(userConfig)
@@ -149,11 +149,22 @@ function makeStarlightObsidianPlugin(
     return {
       name: 'starlight-obsidian-plugin',
       hooks: {
-        async setup({ addIntegration, command, config: starlightConfig, logger, updateConfig }) {
+        async 'config:setup'({
+          addIntegration,
+          addRouteMiddleware,
+          command,
+          config: starlightConfig,
+          logger,
+          updateConfig,
+        }) {
           if (command !== 'build' && command !== 'dev') {
             return
           }
 
+          if (config.tableOfContentsOverview === 'title') {
+            addRouteMiddleware({ entrypoint: 'starlight-obsidian/middleware' })
+          }
+
           const customCss = [...(starlightConfig.customCss ?? []), 'starlight-obsidian/styles/common']
 
           if (config.autoLinkHeadings) {
@@ -161,29 +172,14 @@ function makeStarlightObsidianPlugin(
           }
 
           const updatedStarlightConfig: Partial<StarlightUserConfig> = {
-            components: starlightConfig.components,
+            components: {
+              ...starlightConfig.components,
+              ...overrideStarlightComponent(starlightConfig.components, logger, 'PageTitle'),
+            },
             customCss,
             sidebar: getSidebarFromConfig(config, starlightConfig.sidebar, sidebarGroup),
           }
 
-          if (!updatedStarlightConfig.components) {
-            updatedStarlightConfig.components = {}
-          }
-
-          if (starlightConfig.components?.PageTitle) {
-            logComponentOverrideWarning(logger, 'PageTitle')
-          } else {
-            updatedStarlightConfig.components.PageTitle = 'starlight-obsidian/overrides/PageTitle.astro'
-          }
-
-          if (config.tableOfContentsOverview === 'title') {
-            if (starlightConfig.components?.PageSidebar) {
-              logComponentOverrideWarning(logger, 'PageSidebar')
-            } else {
-              updatedStarlightConfig.components.PageSidebar = 'starlight-obsidian/overrides/PageSidebar.astro'
-            }
-          }
-
           if (config.skipGeneration) {
             logger.warn(
               `Skipping generation of Starlight pages from Obsidian vault as the 'skipGeneration' option is enabled.`,
@@ -214,10 +210,26 @@ function makeStarlightObsidianPlugin(
   }
 }
 
-function logComponentOverrideWarning(logger: AstroIntegrationLogger, component: string) {
-  if (pluginsCount < 2) {
-    logger.warn(`It looks like you already have a \`${component}\` component override in your Starlight configuration.`)
-    logger.warn(`To use \`starlight-obsidian\`, remove the override for the \`${component}\` component.\n`)
+function overrideStarlightComponent(
+  components: StarlightUserConfig['components'],
+  logger: AstroIntegrationLogger,
+  component: keyof NonNullable<StarlightUserConfig['components']>,
+) {
+  if (components?.[component]) {
+    if (!overridesInjected) {
+      logger.warn(
+        `It looks like you already have a \`${component}\` component override in your Starlight configuration.`,
+      )
+      logger.warn(
+        `To use \`starlight-obsidian\`, either remove your override or update it to render the content from \`starlight-obsidian/components/${component}.astro\`.`,
+      )
+    }
+
+    return {}
+  }
+
+  return {
+    [component]: `starlight-obsidian/overrides/${component}.astro`,
   }
 }
 

package/libs/remark.ts

@@ -5,7 +5,18 @@ import twitterMatcher from '@astro-community/astro-embed-twitter/matcher'
 import youtubeMatcher from '@astro-community/astro-embed-youtube/matcher'
 import { toHtml } from 'hast-util-to-html'
 import isAbsoluteUrl from 'is-absolute-url'
-import type { BlockContent, Blockquote, Code, Html, Image, Link, Parent, Root, RootContent } from 'mdast'
+import type {
+  BlockContent,
+  Blockquote,
+  Code,
+  Html,
+  Image,
+  Link,
+  Parent,
+  PhrasingContent,
+  Root,
+  RootContent,
+} from 'mdast'
 import { findAndReplace } from 'mdast-util-find-and-replace'
 import { toHast } from 'mdast-util-to-hast'
 import { customAlphabet } from 'nanoid'
@@ -385,7 +396,23 @@ function handleBlockquotes(node: Blockquote, context: VisitorContext) {
     return SKIP
   }
 
-  const asideTitle = title && title.length > 0 ? `[${title.trim()}]` : ''
+  const hasTitle = title && title.length > 0
+  const asideTitle = hasTitle ? `[${title.trim()}` : ''
+  let didEndAsideTitle = false
+
+  let asideFirstLine = `${asideDelimiter}${getStarlightCalloutType(type)}${asideTitle}`
+  if (otherLines.length > 0) {
+    if (hasTitle) {
+      asideFirstLine += ']'
+      didEndAsideTitle = true
+    }
+    asideFirstLine += `\n${otherLines.join('\n')}`
+  } else if (otherGrandChildren.length === 0) {
+    asideFirstLine += ']\n'
+    didEndAsideTitle = true
+  } else {
+    asideFirstLine += ' '
+  }
 
   const aside: RootContent[] = [
     {
@@ -393,9 +420,22 @@ function handleBlockquotes(node: Blockquote, context: VisitorContext) {
       children: [
         {
           type: 'html',
-          value: `${asideDelimiter}${getStarlightCalloutType(type)}${asideTitle}\n${otherLines.join('\n')}`,
+          value: asideFirstLine,
         },
-        ...otherGrandChildren,
+        ...(hasTitle
+          ? otherGrandChildren.flatMap<PhrasingContent>((otherGrandChild) => {
+              if (didEndAsideTitle) return otherGrandChild
+              if (otherGrandChild.type !== 'text') return otherGrandChild
+              const containsNewLine = /\r?\n/.test(otherGrandChild.value)
+              if (!containsNewLine) return otherGrandChild
+              const [firstLine, ...otherLines] = otherGrandChild.value.split(/\r?\n/)
+              didEndAsideTitle = true
+              return [
+                { type: 'text', value: `${firstLine}]\n` },
+                { type: 'text', value: otherLines.join('\n') },
+              ]
+            })
+          : otherGrandChildren),
         ...(otherChildren.length === 0 ? [{ type: 'html', value: `\n${asideDelimiter}` } satisfies RootContent] : []),
       ],
     },

package/middleware.ts

@@ -0,0 +1,14 @@
+import { defineRouteMiddleware } from '@astrojs/starlight/route-data'
+import config from 'virtual:starlight-obsidian-config'
+
+export const onRequest = defineRouteMiddleware((context) => {
+  const { entry, toc } = context.locals.starlightRoute
+
+  if (config.tableOfContentsOverview === 'title' && toc) {
+    const firstTocItem = toc.items.at(0)
+
+    if (firstTocItem) {
+      firstTocItem.text = entry['data'].title
+    }
+  }
+})

package/overrides/PageTitle.astro

@@ -1,15 +1,8 @@
 ---
 import Default from '@astrojs/starlight/components/PageTitle.astro'
-import type { Props } from '@astrojs/starlight/props'
 
-import Tags from '../components/Tags.astro'
-
-const { entry } = Astro.props
-
-// @ts-expect-error - This plugin does not extend Starlight's schema so tags are unknown.
-const tags = entry['data']['tags']
-const showTags = tags !== undefined && tags.length > 0
+import StarlightObsidianPageTitle from '../components/starlight/PageTitle.astro'
 ---
 
-<Default {...Astro.props}><slot /></Default>
-{showTags && <Tags {tags} />}
+<Default><slot /></Default>
+<StarlightObsidianPageTitle><slot /></StarlightObsidianPageTitle>

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "starlight-obsidian",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "license": "MIT",
   "description": "Starlight plugin to publish Obsidian vaults.",
   "author": "HiDeoo <github@hideoo.dev> (https://hideoo.dev)",
   "type": "module",
   "exports": {
     ".": "./index.ts",
+    "./components/PageTitle.astro": "./components/starlight/PageTitle.astro",
     "./components/Twitter.astro": "./components/Twitter.astro",
     "./components/Youtube.astro": "./components/Youtube.astro",
-    "./overrides/PageSidebar.astro": "./overrides/PageSidebar.astro",
+    "./middleware": "./middleware.ts",
     "./overrides/PageTitle.astro": "./overrides/PageTitle.astro",
     "./schema": "./schema.ts",
     "./styles/common": "./styles/common.css",
@@ -54,7 +55,7 @@
     "vitest": "2.1.6"
   },
   "peerDependencies": {
-    "@astrojs/starlight": ">=0.30.0"
+    "@astrojs/starlight": ">=0.32.0"
   },
   "engines": {
     "node": ">=18.17.1"

package/overrides/PageSidebar.astro

@@ -1,67 +0,0 @@
----
-import MobileTableOfContents from '@astrojs/starlight/components/MobileTableOfContents.astro'
-import TableOfContents from '@astrojs/starlight/components/TableOfContents.astro'
-import type { Props } from '@astrojs/starlight/props'
-import config from 'virtual:starlight-obsidian-config'
-
-const toc = Astro.props.toc
-
-if (config.tableOfContentsOverview === 'title' && toc) {
-  const firstTocItem = toc.items.at(0)
-
-  if (firstTocItem) {
-    firstTocItem.text = Astro.props.entry['data'].title
-  }
-}
----
-
-{
-  Astro.props.toc && (
-    <>
-      <div class="lg:sl-hidden">
-        <MobileTableOfContents {...Astro.props} {toc} />
-      </div>
-      <div class="right-sidebar-panel sl-hidden lg:sl-block">
-        <div class="sl-container">
-          <TableOfContents {...Astro.props} {toc} />
-        </div>
-      </div>
-    </>
-  )
-}
-
-<style>
-  .right-sidebar-panel {
-    padding: 1rem var(--sl-sidebar-pad-x);
-  }
-  .sl-container {
-    width: calc(var(--sl-sidebar-width) - 2 * var(--sl-sidebar-pad-x));
-  }
-  .right-sidebar-panel :global(h2) {
-    color: var(--sl-color-white);
-    font-size: var(--sl-text-h5);
-    font-weight: 600;
-    line-height: var(--sl-line-height-headings);
-    margin-bottom: 0.5rem;
-  }
-  .right-sidebar-panel :global(:where(a)) {
-    display: block;
-    font-size: var(--sl-text-xs);
-    text-decoration: none;
-    color: var(--sl-color-gray-3);
-    overflow-wrap: anywhere;
-  }
-  .right-sidebar-panel :global(:where(a):hover) {
-    color: var(--sl-color-white);
-  }
-  @media (min-width: 72rem) {
-    .sl-container {
-      max-width: calc(
-        (
-          (100vw - var(--sl-sidebar-width) - 2 * var(--sl-content-pad-x) - 2 * var(--sl-sidebar-pad-x)) * 0.25
-            /* MAGIC NUMBER 🥲 */
-        )
-      );
-    }
-  }
-</style>