Footnotes in Bard

[binoclard]

It would be super nice to be able to have a proper footnotes feature in Bard.

[riasvdv]

There's a ProseMirror footnote example here https://prosemirror.net/examples/footnote/

Bard is built on TipTap which is built on ProseMirror, so that might help when trying to implement something like this

[jackmcdade]

How do you envision this working? Automatically "scraping" the links in the content, or creating an explicit footnote, or what?

[binoclard]

I was imagining something like a Bard set, but "inline"?

You could create a footnote block, write its content, but it would insert a number at its place inside the paragraph, and then let you output/display/manipulate the actual content of the footnote elsewhere in the View.

[wesort]

I created a Footnotes system recently for a project: satellitedreaming.com (see Essays). It's a bit fragile (in terms of content authoring) but maybe it'll help anyone looking to do this.

Footnote in the body copy of a Bard field

• NB: I'm using Bard for the primary page content and includes a number of sets as "content blocks" (photo, code embeds, etc) alongside body copy.
• Type a number (we surrounded ours with square brackets, ie: [1], but you could of course do superscript ie: ¹ )
• Select that number > make it a link > Select URL (radio button) > enter in the URL field #f1

The footnotes content

• Blueprint: create a Replicator field, probably in a new "Section"
• Mine had two fields: "Number" (Number) and "Body" (Bard)
• Gist of my Blueprint
• NB: You could do without the number field and rely on the sequence. But in my case there as there are sometimes over 50 of them, we decided to input them explicitly to ensure they sequenced correctly.

Position the footnotes within the content

• Create a Bard set that can then be used by authors to define where to output the footnotes (probably at the end of the page!). Or you could skip this and always output the footnotes at the end.

  footnotes_set:
  display: Footnotes
  fields:
  -
    handle: footnotes_will_appear_here
    field:
      display: 'Footnotes will appear here'
      type: section
      icon: section
      listable: hidden
      instructions_position: above

Template the footnotes set

• Layout the footnotes
• Has some JS to create the id attribute on the body copy anchor links. This allows visitors to go to footnotes and back again.

  
  <div class="footnotes_set col-span-12 grid lg:grid-cols-2 gap-4 mb-8">
  <h2 class="text-xl font-bold border-t border-black links-no-underline" id="footnotes">
      <a href="#footnotes" class="anchor font-bold">Footnotes</a>
    <h2>
  <div class="">
  {{ footnotes sort="number" }}
    <div class="flex mb-8">
      <div class="w-20 inline-flex items-start">
        <span>[</span>
        <a
          id="f{{ number }}"
          href="#a{{ number }}"
          class="links-no-underline inline-flex items-center"
        >
          <span class="sr-only">Back to </span>
          <span>{{ number }}</span>
          <span class="ml-1 text-sm transform rotate-90">&#8624;</span>
        </a>
        <span>]</span>
      </div>
      <div class="w-full">{{ body }}</div>
    </div>
  {{ /footnotes }}
  </div>
  </div>

[sjclark]

Huh @wesort thats a great approach 🔥