Add a cmsPreview flag to use alternative CMS dataset (#1135)

I tried using draft documents but that requires authentication.

This way if we copy + publish to preview it's easy to see content changes deep
in the tree which would otherwise be awkward as we fetch it all in one go.

Author: microbit-matt-hillsdon

src/common/imageUrlBuilder.ts

@@ -5,13 +5,14 @@
  */
 
 import unconfiguredImageUrlBuilder from "@sanity/image-url";
+import { dataset, project } from "./sanity";
 
 export const defaultQuality = 80;
 
 export const imageUrlBuilder = unconfiguredImageUrlBuilder()
   // Hardcoded for now as there's no practical alternative.
-  .projectId("ajwvhvgo")
-  .dataset("apps")
+  .projectId(project)
+  .dataset(dataset)
   .auto("format")
   .dpr(window.devicePixelRatio ?? 1)
   .quality(defaultQuality);

src/common/sanity.ts

@@ -2,6 +2,8 @@
  * Common sanity types.
  */
 
+import { flags } from "../flags";
+
 export interface PortableTextBlock {
   _type: "block";
   _key: string;
@@ -85,9 +87,11 @@ export const sanityLanguageId = (locale: string): string => {
   return `${parts[0]}-${parts[1].toUpperCase()}`;
 };
 
+export const project = "ajwvhvgo";
+export const dataset = flags.cmsPreview ? "apps-preview" : "apps";
+
 const queryUrl = (query: string): string => {
-  return (
-    "https://ajwvhvgo.apicdn.sanity.io/v1/data/query/apps?query=" +
-    encodeURIComponent(query)
-  );
+  return `https://${project}.apicdn.sanity.io/v1/data/query/${dataset}?query=${encodeURIComponent(
+    query
+  )}`;
 };

src/documentation/reference/content.ts

@@ -29,8 +29,8 @@ export const getTopicAndEntry = (
   return [entry.parent, entry];
 };
 
-// For now we just slurp the whole toolkit at once.
-// Might revisit depending on eventual size.
+// We just slurp the whole toolkit at once.
+// This is necessary for the client-side search index.
 const toolkitQuery = (languageId: string): string => {
   return `
   *[_type == "toolkit" && language == "${languageId}" && (slug.current == "explore" || slug.current == "reference") && !(_id in path("drafts.**"))]{

src/flags.ts

@@ -16,30 +16,32 @@ import { Stage, stage as stageFromEnvironment } from "./environment";
  * A union of the flag names (alphabetical order).
  */
 export type Flag =
-  /**
-   * Enables verbose debug logging to the console of drag events.
-   */
-  | "dndDebug"
-
   /**
    * Flag to add a beta notice. Enabled for staging site but not production stages.
    */
   | "betaNotice"
-
   /**
-   * Disables the pop-up welcome dialog.
-   *
-   * Added to support user-testing and has the nice side-effect of disabling
-   * the dialog for local development so is worth keeping for that use alone.
+   * Uses CMS content from an alternative preview dataset.
+   */
+  | "cmsPreview"
+  /**
+   * Enables verbose debug logging to the console of drag events.
    */
-  | "noWelcome"
+  | "dndDebug"
   /**
    * Disables language selection from the settings menu.
    *
    * Added so we can embed the editor in micro:bit classroom without competing language
    * options. The language selected in classroom is passed through via query param.
    */
-  | "noLang";
+  | "noLang"
+  /**
+   * Disables the pop-up welcome dialog.
+   *
+   * Added to support user-testing and has the nice side-effect of disabling
+   * the dialog for local development so is worth keeping for that use alone.
+   */
+  | "noWelcome";
 
 interface FlagMetadata {
   defaultOnStages: Stage[];
@@ -48,10 +50,11 @@ interface FlagMetadata {
 
 const allFlags: FlagMetadata[] = [
   // Alphabetical order.
-  { name: "dndDebug", defaultOnStages: [] },
   { name: "betaNotice", defaultOnStages: ["local", "REVIEW", "STAGING"] },
-  { name: "noWelcome", defaultOnStages: ["local", "REVIEW"] },
+  { name: "cmsPreview", defaultOnStages: [] },
+  { name: "dndDebug", defaultOnStages: [] },
   { name: "noLang", defaultOnStages: [] },
+  { name: "noWelcome", defaultOnStages: ["local", "REVIEW"] },
 ];
 
 type Flags = Record<Flag, boolean>;