Glossary component

Author: Dan Costello

app/components/Glossary.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import Popover from './Popover';
 import { glossaryDefinitions } from './glossary-definitions';
@@ -8,11 +10,10 @@ type GlossaryProps = {
 
 const Glossary = ({ children }: GlossaryProps) => {
   const term = children.trim();
-  console.log(term);
   const definition = glossaryDefinitions[term] || 'No definition found.';
   return (
     <Popover content={definition}>
-      <span style={{ textDecoration: 'underline dotted', cursor: 'help' }}>{term}</span>
+      <span style={{ textDecoration: 'underline dotted', cursor: 'help' }} className={definition ? '' : 'border border-red-500'}>{term}</span>
     </Popover>
   );
 };

app/docs/[[...slug]]/page.tsx

@@ -30,7 +30,6 @@ export default async function Page(props: {
       <DocsBody className="prose dark:prose-invert">
         <MDXContent
           components={getMDXComponents({
-            // this allows you to link to other pages with relative file paths
             a: createRelativeLink(source, page),
           })}
         />

content/docs/(data-access)/definitions/access-policies.mdx

@@ -12,9 +12,9 @@ Access Policies control the circumstances under which data can be retrieved or e
 
 Access Policies are executed in three places in UserClouds:
 
-- Every <glossary>accessor</glossary> (read path) is associated with an access policy that controls access for each target user record and filters the records in the response accordingly.
-- Every <glossary>mutator</glossary> (write path) is associated with an access policy that governs whether the write is allowed.
-- Every <glossary>token</glossary> is associated with an access policy that governs the circumstances in which the token can be exchanged for the original data ("resolved").
+- Every <Glossary>accessor</Glossary> (read path) is associated with an access policy that controls access for each target user record and filters the records in the response accordingly.
+- Every <Glossary>mutator</Glossary> (write path) is associated with an access policy that governs whether the write is allowed.
+- Every <Glossary>token</Glossary> is associated with an access policy that governs the circumstances in which the token can be exchanged for the original data ("resolved").
 
 In addition, two special types of access policies are available:
 

content/docs/(data-access)/definitions/mutators-write-apis.md

@@ -8,7 +8,7 @@ updatedAt: "Tue Sep 10 2024 16:09:35 GMT+0000 (Coordinated Universal Time)"
 ---
 ## Introduction
 
-Mutators are configurable APIs that allow a client to write data to the User Store. Mutators (setters) can be thought of as the complement to <<glossary:accessor>>s (getters). Mutators serve two functions: 
+Mutators are configurable APIs that allow a client to write data to the User Store. Mutators (setters) can be thought of as the complement to <glossary:accessor>s (getters). Mutators serve two functions: 
 
 - Storing sensitive user data in the store
 - Storing user <<glossary:consent>>s to data processing <<glossary:purpose>>s alongside that data

…s/(data-access)/definitions/selectors.md …/(data-access)/definitions/selectors.mdxcontent/docs/(data-access)/definitions/selectors.md renamed to content/docs/(data-access)/definitions/selectors.mdx content/docs/(data-access)/definitions/selectors.md renamed to content/docs/(data-access)/definitions/selectors.mdx

@@ -8,16 +8,16 @@ updatedAt: "Fri Mar 01 2024 17:20:02 GMT+0000 (Coordinated Universal Time)"
 ---
 # Introduction
 
-Selectors are SQL-like clauses that specify which records an <<glossary:accessor>> or <<glossary:mutator>> should act on. Each accessor/mutator is associated with exactly one selector. The selector is specified at accessor/mutator creation time, either as a free text input in the UI, or as a string through the API.
+Selectors are SQL-like clauses that specify which records an <Glossary>accessor</Glossary> or <Glossary>mutator</Glossary> should act on. Each accessor/mutator is associated with exactly one selector. The selector is specified at accessor/mutator creation time, either as a free text input in the UI, or as a string through the API.
 
-A Selector may refer to configured Columns, specified as `{ColumnName}`, where ColumnName is the defined name of the Column. Note that non-<<glossary:system column>>s used in selectors are subject to <<glossary:purpose check>>s: each accessor's response will filter out users who have not consented to the accessor's purpose for all columns being retrieved, and all non-system columns used in the selector.
+A Selector may refer to configured Columns, specified as `{ColumnName}`, where ColumnName is the defined name of the Column. Note that non-<Glossary>system column</Glossary>s used in selectors are subject to <Glossary>purpose check</Glossary>s: each accessor's response will filter out users who have not consented to the accessor's purpose for all columns being retrieved, and all non-system columns used in the selector.
 
-A Selector may also specify a collection of variables, each of which is represented by a `?`, allowing the Selector to be parameterized for each individual accessor or mutator invocation. The `SelectorValues` array that is specified when executing an Accessor or Mutator is used to parameterize the associated Selector. Each of the values in <<glossary:SelectorValues>> must be a concrete value (i.e., contain no variables), and the number of values in SelectorValues must exactly match the number of variables in the Selector. The variables in a Selector are replaced sequentially by the values in SelectorValues at invocation time - the first value in SelectorValues replaces the first variable in the Selector, and so on. The type of each value must match the expected type of the value placeholder.
+A Selector may also specify a collection of variables, each of which is represented by a `?`, allowing the Selector to be parameterized for each individual accessor or mutator invocation. The `SelectorValues` array that is specified when executing an Accessor or Mutator is used to parameterize the associated Selector. Each of the values in <Glossary>SelectorValues</Glossary> must be a concrete value (i.e., contain no variables), and the number of values in SelectorValues must exactly match the number of variables in the Selector. The variables in a Selector are replaced sequentially by the values in SelectorValues at invocation time - the first value in SelectorValues replaces the first variable in the Selector, and so on. The type of each value must match the expected type of the value placeholder.
 
 Examples of selectors include:
 
 - `{FirstName} LIKE ?`
-- `{Address}->>’country’ = ‘USA’`
+- `{Address}-</Glossary>’country’ = ‘USA’`
 - `{BoolColumn} = TRUE OR {IntColumn} = ?`
 
 See below for a longer list of examples.
@@ -84,8 +84,8 @@ ARRAY_ELEMENTS must either be a VALUE or a comma-separated list of VALUEs. Each
 
 ### COLUMN_IDENTIFIERs
 
-- {column_name} - The selector query will replace the column identifier with the column value for the specific column_name for a given user
-- {column_name}->>’field_name’ - If column_name refers to a column that has a data type of address or composite, a valid subfield specified by field_name can be referenced in the column identifier.
+- `{column_name}` - The selector query will replace the column identifier with the column value for the specific column_name for a given user
+- `{column_name}` - ’field_name’ - If column_name refers to a column that has a data type of address or composite, a valid subfield specified by field_name can be referenced in the column identifier.
 
 ### INT_VALUEs
 
@@ -198,9 +198,9 @@ The following are all examples of valid selector queries:
 | `{IntColumn} = ANY ARRAY[3, 4::INT, ?]`                | return users where the IntColumn value is either 3, 4, or the parameterized value                                            |
 | `ABS(MOD({IntColumn},3)) = ?`                          | return users where the absolute value of IntColumn value mod 3 equals parameterized value                                    |
 | `DIV({IntColumn}, ?) = ?`                              | return users where the quotient of dividing the IntColumn value by a parameterized value equals a second parameterized value |
-| `{AddressColumn}->>’country’ IS NULL`                  | return users where the country field of AddressColumn is not set                                                             |
-| `{AddressColumn}->>’country’ = ?`                      | return users where the country field of AddressColumn equals the parameterized value                                         |
-| `{AddressColumn}->>’country’ = ‘USA’`                  | return users where the country field AddressColumn is ‘USA’                                                                  |
+| `{AddressColumn}-</Glossary>’country’ IS NULL`                  | return users where the country field of AddressColumn is not set                                                             |
+| `{AddressColumn}-</Glossary>’country’ = ?`                      | return users where the country field of AddressColumn equals the parameterized value                                         |
+| `{AddressColumn}-</Glossary>’country’ = ‘USA’`                  | return users where the country field AddressColumn is ‘USA’                                                                  |
 | `{StringColumn} LIKE ?`                                | return users that have a StringColumn value that matches the parameterized pattern                                           |
 | `{StringColumn} LIKE ‘%foo%’`                          | return users that have a StringColumn value that contains the string ‘foo’                                                   |
 | `lower({StringColumn}) = ANY ARRAY[‘foo’,’bar’,’baz’]` | return users that have a StringColumn value that when lower-cased equals either ‘foo’, ‘bar’, or ‘baz’                       |

content/docs/(welcome)/getting-started.md …ntent/docs/(welcome)/getting-started.mdxcontent/docs/(welcome)/getting-started.md renamed to content/docs/(welcome)/getting-started.mdx content/docs/(welcome)/getting-started.md renamed to content/docs/(welcome)/getting-started.mdx

@@ -1,10 +1,7 @@
-import { docs, meta } from "@/.source";
+import { docs } from '@/.source';
 import { loader } from 'fumadocs-core/source';
-import { createMDXSource } from "fumadocs-mdx";
 
-// See https://fumadocs.vercel.app/docs/headless/source-api for more info
 export const source = loader({
-  // it assigns a URL to your pages
   baseUrl: '/docs',
-  source: createMDXSource(docs, meta),
-});
+  source: docs.toFumadocsSource(),
+});

lib/source.ts

@@ -1,11 +1,12 @@
 import defaultMdxComponents from 'fumadocs-ui/mdx';
 import type { MDXComponents } from 'mdx/types';
 import Glossary from './app/components/Glossary';
+
 // use this function to get MDX components, you will need it for rendering MDX
 export function getMDXComponents(components?: MDXComponents): MDXComponents {
   return {
     ...defaultMdxComponents,
-    glossary: Glossary,
     ...components,
+    Glossary
   };
 }

mdx-components.tsx

@@ -2,11 +2,18 @@ import { createMDX } from 'fumadocs-mdx/next';
 
 const withMDX = createMDX();
 
+const isDev = process.env.NODE_ENV === 'development';
+
 /** @type {import('next').NextConfig} */
 const config = {
   reactStrictMode: true,
   images: {
-    domains: ['files.readme.io'],
+    unoptimized: isDev,
+    remotePatterns: [
+      {
+        hostname: 'files.readme.io',
+      },
+    ],
   },
 };
 

next.config.mjs

@@ -1,23 +1,11 @@
-import {
-  defineConfig,
-  defineDocs,
-  frontmatterSchema,
-  metaSchema,
-} from 'fumadocs-mdx/config';
+import { defineDocs } from 'fumadocs-mdx/config';
 
-// You can customise Zod schemas for frontmatter and `meta.json` here
-// see https://fumadocs.vercel.app/docs/mdx/collections#define-docs
-export const {docs, meta} = defineDocs({
+export const docs = defineDocs({
+  dir: 'content/docs',
   docs: {
-    schema: frontmatterSchema,
+    // options for `doc` collection
   },
   meta: {
-    schema: metaSchema,
+    // options for `meta` collection
   },
-});
-
-export default defineConfig({
-  mdxOptions: {
-    // MDX options
-  },
-});
+});