πŸ‘€ See Sanity in action: Watch product demo now β†’

How to Add Internal Links to Top Level Singletons

4 replies
Last updated: Mar 28, 2022
What is the best way to add internal links to my top level singletons using this same cta object?

export default {
  title: "Call to action",
  name: "cta",
  type: "object",
  validation: (Rule) =>
    Rule.custom(
      (fields = {}) =>
        !<http://fields.post|fields.post> || !fields.link || "Only one link type is allowed"
    ),
  fieldsets: [
    {
      title: "Link",
      name: "link",
    },
  ],
  fields: [
    {
      title: "Title",
      name: "title",
      type: "string",
    },
    {
      name: "show",
      title: "Show (leave unchecked to hide CTA)",
      type: "boolean",
    },
    {
      title: "Internal link",
      description: "Use this to link between pages on the website",
      name: "post",
      type: "reference",
      to: [{ type: "post" },{ type: "project" }],
      fieldset: "link",
    },
    {
      title: "External link",
      name: "link",
      type: "url",
      fieldset: "link",
    },
  ],
Mar 26, 2022, 7:13 PM
Typically I include the singletons in the reference array and deal with handling the slugs in groq.

{
  title: "Internal link",
  description: "Use this to link between pages on the website",
  name: "post",
  type: "reference",
  to: [
    { type: 'home' },
    { type: 'about' },
    { type: 'info' },
    { type: "post" },
    { type: "project" }
  ],
  fieldset: "link",
},
Then something like this in groq:

/* groq */`
  title,
  link,
  post-&gt;_type == "project" =&gt; {
    "link": "/project/" + post-&gt;slug.current
  },
  post-&gt;_type == "post" =&gt; {
    "link": "/post/" + post-&gt;slug.current
  },
  post-&gt;_type == "about" =&gt; {
    "link": "/about
  }
`
Mar 26, 2022, 7:34 PM
Thanks
user J
Mar 26, 2022, 7:40 PM
user B
Hello .What do you use for coding ? React ?
I'm trying to find a way to add intrenal link in my own website ( not between sanity post ) but couldn't find something working so far with my nextJs project .Thanks
Mar 28, 2022, 8:04 AM
ok find a way with this
  const serializers = {
    marks: {
      link: ({ children, value }) =&gt;
        value.blank === false ? (
          &lt;Link href={value.href}&gt;
            &lt;a className={styles["internal-link"]}&gt;{children}&lt;/a&gt;
          &lt;/Link&gt;
        ) : (
          &lt;&gt;
            &lt;a
              className={styles["external-link"]}
              href={value.href}
              target="_blank"
              rel="noopener noreferrer"
            &gt;
              {`${children}β†—`}
            &lt;/a&gt;{" "}
          &lt;/&gt;
        ),
    },
Still try to understand how to do link in a post for another post .
Thanks
Mar 28, 2022, 10:57 AM

Sanity.io – build remarkable experiences at scale

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

Categorized in