Backlinks

Installation

1. Install BrainDB

2. Create Backlinks component

   src/components/Backlinks.astro

   ---
   import { getBrainDb } from "@braindb/astro";
   import type { CollectionEntry } from "astro:content";
   interface Props {
     entry: CollectionEntry<"docs">;
   }
   const { entry } = Astro.props;
   
   const links = doc?.documentsFrom()
     .filter((doc) => doc.frontmatter().draft !== true || import.meta.env.DEV) || [];
   ---
   
    {
      links.length > 0 && (
        <div class="backlinks">
          <h2>Backlinks</h2>
          <ul>
            {links.map((x) => (
              <li>
                <a href={x.url()}>{x.title()}</a>
              </li>
            ))}
          </ul>
        </div>
      )
    }
   
   <style>
     .backlinks {
       padding-top: 1rem;
   
       ul {
         padding: 0;
         list-style: none;
       }
       a {
         --pad-inline: 0.5rem;
         display: block;
         border-radius: 0.25rem;
         padding-block: 0.25rem;
         padding-inline: var(--pad-inline) var(--pad-inline);
         line-height: 1.25;
       }
     }
   </style>

3. Use component, for example, in the sidebar (in Starlight)

   src/components/TableOfContents.astro

   ---
   import type { Props } from "@astrojs/starlight/props";
   import Default from "@astrojs/starlight/components/TableOfContents.astro";
   import Backlinks from "./Backlinks.astro";
   ---
   
   <Default {...Astro.props}>
     <slot />
   </Default>
   
   {
     Astro.props.entry.data.backlinks !== false && (
       <Backlinks entry={Astro.props.entry as any} />
     )
   }

   astro.config.mjs

   export default defineConfig({
     integrations: [
       starlight({
         components: {
           TableOfContents: "./src/components/TableOfContents.astro",
         },
       }),
     ],
   });

Related:

• starlight#1335 ↗

Example

See an example of <Backlinks /> in the right sidebar 👉