😎 Discover cool tips and tricks for customization in our next Developer Deep Dive virtual event - sign up 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->_type == "project" => {
    "link": "/project/" + post->slug.current
  },
  post->_type == "post" => {
    "link": "/post/" + post->slug.current
  },
  post->_type == "about" => {
    "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 }) =>
        value.blank === false ? (
          <Link href={value.href}>
            <a className={styles["internal-link"]}>{children}</a>
          </Link>
        ) : (
          <>
            <a
              className={styles["external-link"]}
              href={value.href}
              target="_blank"
              rel="noopener noreferrer"
            >
              {`${children}β†—`}
            </a>{" "}
          </>
        ),
    },
Still try to understand how to do link in a post for another post .
Thanks
Mar 28, 2022, 10:57 AM

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?