Skip to content

feat: add open graph and twitter meta tags for anvil-cmg (#4797)#4799

Open
frano-m wants to merge 10 commits into
mainfrom
fran/4797-anvil-cmg-og-meta
Open

feat: add open graph and twitter meta tags for anvil-cmg (#4797)#4799
frano-m wants to merge 10 commits into
mainfrom
fran/4797-anvil-cmg-og-meta

Conversation

@frano-m
Copy link
Copy Markdown
Contributor

@frano-m frano-m commented May 1, 2026

Summary

  • Add OgMeta rendering Open Graph + Twitter meta tags for rich link sharing; wired into _app.tsx so every page picks them up.
  • OG image is a 512×512 square AnVIL brand icon on white background; twitter:card="summary" for the small icon-centred preview format (matches brc-analytics + ncpi-dataset-catalog).
  • Static MDX pages source pageTitle / pageDescription from frontmatter in each app/content/anvil-cmg/*.mdx (also lungmap/{apis,metadata}.mdx); helper reads them via gray-matter. Replaces the centralised CONTENT_PAGE_META constants module.
  • Site-level OG description is now a required field on the local SiteConfig; each consumer (anvil-cmg, hca-dcp, lungmap, anvil-catalog) provides its own copy. DEFAULT_DESCRIPTION constant deleted.
  • Entity detail/tab page title is derived in pages/[entityListType]/[...params].tsx from entityConfig.getTitle(props.data) + active detail tab label (falls back to entity id when no title is available). Generic description works for any consumer's entity vocabulary.

Closes #4797.

Test plan

  • npm run check-format, npm run lint, npx tsc --noEmit pass
  • npm run build:anvil-cmg succeeds; rendered HTML shows og:description, og:title, og:image:width/height=512, twitter:card=summary on both static (e.g. /privacy) and entity-list (e.g. /datasets) pages
  • Spot-check entity detail and tab pages after build — og:title should be <entity title> (detail) or <tab label> — <entity title> (tab)
  • Smoke-build hca-dcp / lungmap / anvil-catalog to confirm the required description field is wired
  • Verify rendered preview in Slack, Twitter/X, LinkedIn, Facebook debugger after deploy

🤖 Generated with Claude Code

@frano-m frano-m assigned NoopDog and unassigned NoopDog May 1, 2026
@frano-m frano-m force-pushed the fran/4797-anvil-cmg-og-meta branch from 85503f8 to a2f939c Compare May 11, 2026 06:02
@frano-m frano-m requested a review from Copilot May 13, 2026 04:53
@frano-m frano-m force-pushed the fran/4797-anvil-cmg-og-meta branch from 100363e to 25658e6 Compare May 13, 2026 04:54
@frano-m frano-m marked this pull request as ready for review May 13, 2026 04:56
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds Open Graph and Twitter meta tags across the Data Explorer Next.js app to improve rich link previews, and standardizes how page titles/descriptions are sourced for static content and entity pages.

Changes:

  • Introduces OgMeta and renders it from _app.tsx using site-level config defaults plus per-page pageTitle/pageDescription.
  • Moves static content page metadata to MDX frontmatter (read via gray-matter) and updates various pages to stop passing hard-coded titles to getContentStaticProps.
  • Makes site-level description required in SiteConfig and wires it into multiple site configs; adds build steps to copy OG images into public/og/.

Reviewed changes

Copilot reviewed 47 out of 49 changed files in this pull request and generated 6 comments.

Show a summary per file
File Description
site-config/lungmap/dev/config.ts Adds required site-level description for LungMAP dev config.
site-config/hca-dcp/dev/config.ts Adds required site-level description for HCA DCP dev config.
site-config/common/entities.ts Extends SiteConfig to require description.
site-config/anvil-cmg/dev/config.ts Adds required site-level description for AnVIL CMG dev config.
site-config/anvil-catalog/dev/config.ts Adds required site-level description for AnVIL Catalog dev config.
scripts/common-build.sh Copies OG images (if present) into public/og/ during common builds.
scripts/build.sh Copies OG images (if present) into public/og/ during build.
pages/terms-of-service/index.tsx Uses MDX frontmatter for title/description (stops passing title to helper).
pages/privacy/index.tsx Uses MDX frontmatter for title/description (stops passing title to helper).
pages/metadata/index.tsx Uses MDX frontmatter for title/description (stops passing title to helper).
pages/login/index.tsx Adds pageDescription for OG/meta description.
pages/guides/tsv-file-manifest-download.tsx Uses MDX frontmatter for title/description.
pages/guides/individual-file-download.tsx Uses MDX frontmatter for title/description.
pages/guides/index.tsx Uses MDX frontmatter for title/description.
pages/guides/data-download-via-curl.tsx Uses MDX frontmatter for title/description.
pages/guides/data-download-options.tsx Uses MDX frontmatter for title/description.
pages/ga-announcement/index.tsx Uses MDX frontmatter for title/description.
pages/export/index.tsx Adds pageDescription for OG/meta description.
pages/export/get-curl-command.tsx Adds pageDescription for OG/meta description.
pages/export/export-to-terra.tsx Adds pageDescription for OG/meta description.
pages/export/download-manifest.tsx Adds pageDescription for OG/meta description.
pages/export/cavatica.tsx Adds pageDescription for OG/meta description.
pages/export/cancer-genomics-cloud.tsx Adds pageDescription for OG/meta description.
pages/export/biodata-catalyst.tsx Adds pageDescription for OG/meta description.
pages/data-dictionary/[dictionary]/index.tsx Adds static pageTitle/pageDescription for dictionary pages.
pages/beta-announcement/index.tsx Uses MDX frontmatter for title/description.
pages/apis/index.tsx Uses MDX frontmatter for title/description.
pages/[entityListType]/index.tsx Derives list page title/description from entity config label.
pages/[entityListType]/[...params].tsx Builds entity detail/tab page title from entity title + tab label.
pages/_app.tsx Wires OgMeta into app and reads config description as default description.
app/content/lungmap/metadata.mdx Adds pageTitle frontmatter.
app/content/lungmap/apis.mdx Adds pageTitle frontmatter.
app/content/common/entities.ts Adds frontmatter typing and allows pageDescription in content props.
app/content/common/contentPages.ts Reads pageTitle/pageDescription from MDX frontmatter via gray-matter.
app/content/anvil-cmg/terms-of-service.mdx Adds pageTitle/pageDescription frontmatter.
app/content/anvil-cmg/privacy.mdx Adds pageTitle/pageDescription frontmatter.
app/content/anvil-cmg/guides/tsv-file-manifest-download.mdx Adds pageTitle/pageDescription frontmatter.
app/content/anvil-cmg/guides/individual-file-download.mdx Adds pageTitle/pageDescription frontmatter.
app/content/anvil-cmg/guides/data-download-via-curl.mdx Adds pageTitle/pageDescription frontmatter.
app/content/anvil-cmg/guides/data-download-options.mdx Adds pageTitle/pageDescription frontmatter.
app/content/anvil-cmg/guides.mdx Adds pageTitle/pageDescription frontmatter.
app/content/anvil-cmg/ga-announcement.mdx Adds pageTitle/pageDescription frontmatter.
app/content/anvil-cmg/beta-announcement.mdx Adds pageTitle/pageDescription frontmatter.
app/config/config.ts Switches to local extended SiteConfig type including description.
app/components/Layout/components/BackPage/components/BackPageHero/components/BackPageHeroActions/backPageHeroActions.tsx Updates config typing/cast to account for extended SiteConfig.
app/components/common/OgMeta/types.ts Defines OgMeta prop types.
app/components/common/OgMeta/ogMeta.tsx Implements OG/Twitter/meta description tags using router and config.
.gitignore Ignores generated public/og/* assets.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread app/content/common/contentPages.ts
Comment thread pages/_app.tsx Outdated
Comment thread app/components/common/OgMeta/ogMeta.tsx
Comment thread scripts/build.sh Outdated
Comment thread scripts/common-build.sh Outdated
@frano-m frano-m force-pushed the fran/4797-anvil-cmg-og-meta branch from deffa93 to 86857b9 Compare May 14, 2026 07:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[AnVIL DX] Add Open Graph and Twitter meta tags

3 participants