add support to relationship field to access singletons

[EpicKau]

hey guys, is it possible to extend the relationship field to access singletons?

[wburningham]

I'm also interested in this.

Use case:

• Use a singleton to define a list of user-configurable tags that are common across different collections (ie: tag posts, recipes, articles, etc with a global tag)
• A global search or filter across collections based on the tag.

[wburningham]

This would also allow storing tags in a single yaml like:

  - golang
  - html
  - js

Instead of a directory like

└── tags
    ├── golang.yaml
    ├── html.yaml
    ├── js.yaml

where the yaml file contents are all {}

[simonswiss]

Yeah, that's a fair point. We have tags in collections for the Thinkmill website, but it's setup exactly as you show, basically a list of slug files without any other fields.

[hellocory]

Any word on this feature? Would love to get more involved!

[klalicki]

This is a kinda hacky thing and @simonswiss will probably say it's a bad idea, but if you have a singleton that writes to a JSON file, you can import that JSON file from a collection schema and use it to build a select field with the values from the singleton as selectable options. This seems to work fine in a local environment using the dev server; i haven't tested it in a production site.

Here's a sample where I built a font system that lets you specify any number of fonts to be available in the site:

const fontLoader = fields.object({
  fontName: fields.text({
    label: "Font Name",
    description: "this is the name you will use to select this font",
  }),
  uniqueID: customFields.uniquify({ label: "unique ID" }),
  mode: fields.conditional(
    fields.select({
      label: "Font Type",
      options: [
        { label: "Remote Font (Google Fonts or similar)", value: "remote" },
        { label: "Self-Hosted Font", value: "local" },
      ],
      defaultValue: "remote",
    }),
    {
      local: fields.empty(),
      remote: fields.object({
        htmlLink: customFields.codeEditor({
          label: "HTML <link> code",
          description:
            "Copy the <link> embed code from Google Fonts or another platform and paste it here. You only need the third line from Google Fonts.",
          wrap: true,
          height: "10rem",
        }),
        fontFamily: fields.text({
          label: "font-family",
          description:
            'The font-family line from Google Fonts. This should look like "DM Sans", sans-serif',
        }),
      }),
    },
  ),
});

export const fonts = singleton({
  label: "Link Fonts (Google or Adobe)",
  format: { data: "json" },

  path: "src/settings/fonts",
  schema: {
    fontLibrary: fields.array(fontLoader, {
      itemLabel: (props) => props.fields.fontName.value,
    }),
  },
});

and here's the field (used elsewhere in the site) that loads the fonts from the json file and lets the user pick from them:

import fontSettings from "../../../src/settings/fonts.json";

...
//  below code is in list of fields

 fontFamily: {
        ...fields.select({
          label: "Font Family",
          options: fontOptions,
          defaultValue: "0",
        }),
        parse(value: string) {
          console.log("parsing: " + value);
          const isValidFont = fontOptions.find((item) => {
            return item.value === value;
          });
          return isValidFont ? value : "0";
        },
   
      },

Note that I'm spreading the default fields.select() and adding a custom parse function that checks if the stored value is still valid and replaces it with a default if it isn't. If I didn't have this code, the editor would break if you deleted an entry from the source field (the one that writes to the JSON file)