Discussion on using proxy link documents and inline annotations in Sanity.io for easy source of truth and flexibility in content management.

12 replies
Last updated: Jun 16, 2022
I’m starting to think that maybe the builtin
slug
is not the best and should be replaced with a proxy
link
document, otherwise there’s no way to have one easy source of truth.
Jun 11, 2022, 11:52 PM
You can create a custom annotation schema in the block editor, which would allow you to choose the reference. Here's an example guide https://www.sanity.io/guides/portable-text-internal-and-external-links
Jun 12, 2022, 12:09 AM
This is the relevant code

export default {
  name: 'portableText',
  type: 'array',
  title: 'Content',
  of: [
    {
      type: 'block',
      marks: {
        annotations: [
          {
            name: 'internalLink',
            type: 'object',
            title: 'Internal link',
            fields: [
              {
                name: 'reference',
                type: 'reference',
                title: 'Reference',
                to: [
                  { type: 'post' },
                  // other types you may want to link to
                ]
              }
            ]
          }
        ]
      }
    }
  ]
}
Jun 12, 2022, 12:10 AM
There's a method we use for front end utility that exists outside of annotations as well.
If you add a new field
within the block field in the same array that the block is included when making a block editor, it'll create an object inline (versus following up the block in that same array, which will give it its own row, block out the text, etc.)
What's nice is that if I had an image in the latter variety, it completely interrupts the text flow, gets its own separate tags, etc. but if I keep it inline, I can write it right alongside sibling text.

In this case, the preview wasn't written so it looks garish, but you could just have it show the title for a frame of reference (ha)

I have used this previously to inline a reference to a person. Reason being, I just need it to know that a person is being addressed or involved at that point. More often than not, when we do the front end, we'll just grab their email address and name, those
parts of the person, and make the mailto: link and add their name as the link text.
As you can imagine, it's handy when that person's contact info changes because aside from updating all the pages, you don't have to go find where they are since anywhere they
could be mentioned will be intrinsicly found and changed.
Jun 12, 2022, 12:11 AM
That's pretty useful! Thanks User
Jun 12, 2022, 12:16 AM
Yeah it's pretty slick every time I remember where to actually place it to get that to happen. There's plenty of docs on the bigger blocks but the truly inline ones feel like they're passively mentioned.
The neatest thing to me is, just like you can use different data for different purposes in regular references (like a Person is on the Staff and holds a Job, but also a Job is an Open Position for a Career Opportunity, etc...).........because the actual presentation is a totally separate element, I could get different things from that one reference depending on the context of why I am pulling that in.

Like maybe if I pull it into an app, they're going to want to fetch just the phone numbers since it's less cumbersome to link to that on a phone than emails.

Or maybe I want to write a bunch of inline things for a About Our Company page, listing people, and do nothing but have their names print out. Same mechanism, same references and people....different application of it.

It's one of the simplest things on this platform and in practice the thing I do the least but it's arguably among the most powerful in terms of cost/benefit time-wise to usefulness...wise(?) =P
Jun 12, 2022, 12:44 AM
Inline Annotations are very useful and with a little extra code you can also define a renderer for the editor itself!
You can check out my
personal 😅 „abstracted“ interplay between frontend (query & Portable Text Component), editor and reference in this repo … it‘s not perfect but can absolutely give you a good idea of the functionality of Portable Text and how much you can do with it.
Let me know if you need any more help or if you need explanations within my code
😊
Jun 13, 2022, 12:54 PM
Another usefull ressource is this site and this guide , which goes deeper into using references as annotations
Jun 13, 2022, 12:59 PM
Oh, I like the elegance of handling the references that way. Thanks for the tip!
Jun 13, 2022, 3:33 PM
Hey
user E
! Please try to keep your questions to a single thread so that all context surrounding your issue is easily discoverable and the main channel remains uncluttered. Thanks!
Jun 13, 2022, 3:56 PM
user J
this repo was very helpful, was wondering what is the best practice to handle portable text within portable text? I have a post page and inside the portable text it references a product page with its own portable text. How do you handle the serializers for the product page? For examples lets say your testimonial type has its own portable text, how would you pass in the types and marks down to your <testimonialcard> https://github.com/bobinska-dev/sharing-is-caring/blob/main/Portable%20Text%20in%20Sanity%20Studio%20and%20React/components/Body.jsx
Jun 15, 2022, 5:41 PM
Good question, I had a deep dive around that topic a couple of months ago…
This actually can be handled through queries, this is where Groq can shine
🙂Look at my
<Body>
component, which basically is Portable Text with my marks and annotations serialised, like my testimonials.
1. As you can see, within
TestimonialCard
, which has a
<Body>
comp in it as well 😅, because the
testimonials
are Portable Text themselves, I pass down the referenced data from the
_ref
👇
... testimonial: (props) => { return <TestimonialCard key={props.node.reference._id} data={props.node.reference} /> },...
2. My query should look something like this, so that I get the referenced doc data within my Portable Text array, not just the `ref._id`:

..., // The query itself but then you need to get the PT, which I call body in my schema
  body[]{ ...,  
    _type == "testimonial" => {..., "reference": @->},
... // All the other things you need to get within PT
    }
With that projection data in hand, you pass this into 1. and then use a
<Body>
in
<TestimonialCard>
and you could do that ad infinitum ♾️ if needed.I love how Groq, Sanity and NextJS (or React) make this modular approach so easy, because they follow a very similar logic…
Jun 16, 2022, 12:08 PM
Thanks ill give that a shot
Jun 16, 2022, 6:27 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?