feat: add open graph and twitter meta tags for anvil-cmg (#4797)#4799
Open
frano-m wants to merge 10 commits into
Open
feat: add open graph and twitter meta tags for anvil-cmg (#4797)#4799frano-m wants to merge 10 commits into
frano-m wants to merge 10 commits into
Conversation
85503f8 to
a2f939c
Compare
100363e to
25658e6
Compare
Contributor
There was a problem hiding this comment.
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
OgMetaand renders it from_app.tsxusing site-level config defaults plus per-pagepageTitle/pageDescription. - Moves static content page metadata to MDX frontmatter (read via
gray-matter) and updates various pages to stop passing hard-coded titles togetContentStaticProps. - Makes site-level
descriptionrequired inSiteConfigand wires it into multiple site configs; adds build steps to copy OG images intopublic/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.
4 tasks
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…om labels (#4797) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
… title from entity data (#4797)
deffa93 to
86857b9
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
OgMetarendering Open Graph + Twitter meta tags for rich link sharing; wired into_app.tsxso every page picks them up.twitter:card="summary"for the small icon-centred preview format (matches brc-analytics + ncpi-dataset-catalog).pageTitle/pageDescriptionfrom frontmatter in eachapp/content/anvil-cmg/*.mdx(alsolungmap/{apis,metadata}.mdx); helper reads them viagray-matter. Replaces the centralisedCONTENT_PAGE_METAconstants module.descriptionis now a required field on the localSiteConfig; each consumer (anvil-cmg,hca-dcp,lungmap,anvil-catalog) provides its own copy.DEFAULT_DESCRIPTIONconstant deleted.pages/[entityListType]/[...params].tsxfromentityConfig.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 --noEmitpassnpm run build:anvil-cmgsucceeds; rendered HTML showsog:description,og:title,og:image:width/height=512,twitter:card=summaryon both static (e.g./privacy) and entity-list (e.g./datasets) pagesog:titleshould be<entity title>(detail) or<tab label> — <entity title>(tab)descriptionfield is wired🤖 Generated with Claude Code