Sanity Plugin: Referenced By

Originally posted on the Indent Blog

Given the size of our team and the need to revamp the marketing content for our website, we've decided to move the marketing content to a headless CMS. We've chosen Sanity.io for this purpose.

Sanity.io is an excellent developer tool and CMS. We thought a plugin which would show at a glance which documents reference a specific document would extend its capability even further. Think of this functionality as "backlinks", a concept popularised by Roam Research.

This plugin was built as an internal tool for Indent and subsequently we decided it would be useful to share with the community.

The sanityio-referenced-by plugin is available on NPM, and the source is available on GitHub. Included is an example directory to help with getting started. We'd love to hear your feedback:

npmjs.com/package/@indent-oss/sanityio-referenced-by

github.com/indentinc/sanityio-referenced-by

Credit

Thank you to Devin Halladay for writing up a recipe: List Referring Documents (Backlinks) in Sanity. This plugin builds upon Devin's recipe on how to setup backlinks for a specific document. The "Referenced By" plugin differs from Devin's receipe in that the backlinks are extracted into their own dedicated view. This view has been conveniently packaged into an easy to install plugin.

Installing the plugin:

1. Install the @indent-oss/sanityio-referenced-by plugin using the command line:

   • NPM

   npm i @indent-oss/sanityio-referenced-by
   
   

   • Yarn

   yarn add @indent-oss/sanityio-referenced-by
   
   

2. Add @indent-oss/sanityio-referenced-by to sanity.json "plugins":

  // /sanity.json
  "plugins": [
    "@indent-oss/sanityio-referenced-by"
  ],

3. Add sanity-structure.js reference to sanity.json "parts":

  // /sanity.json
  "parts": [
    {
      "name": "part:@sanity/desk-tool/structure",
      "path": "./sanity-structure.js"
    }
  ]

4. Create and/or update sanity-structure.js in the root directory:

// /sanity-structure.js
import { ReferencedByView } from "part:@indent-oss/sanityio-referenced-by";
import S from "@sanity/desk-tool/structure-builder";

export const getDefaultDocumentNode = () => {
    return S.document().views([
        S.view.form(),
        S.view.component(ReferencedByView).title("Referenced by"),
    ]);
};

export default () => S.list().title("Base").items(S.documentTypeListItems());

The "Referenced By" plugin tab will now appear in your Sanity.io Studio Project.