feat: prod-style module-grid landing pages + tutorial cards + working TOC anchors + YT iframe width

Five threads bundled because they all surfaced while making the
/documentation and /documentation/userguide pages look like
reactome.org/userguide on prod:

1. Replace the post-marked `__[Label]` heading-with-icon pattern on
   /documentation/index.mdx and /documentation/userguide.mdx with
   inline `<div class="module-grid">` of `<a class="module-card">`
   tiles. Eight subpage cards on userguide (Pathway Browser /
   Details Panel / Searching / Analysis / Diseases / Cytomics /
   Review Status / ReactomeFIViz), three on /documentation (For
   Users / For Developers / Citing us). Each card has a Material
   Symbols icon, label, and optional description; hover lifts and
   highlights the border. Matches prod's icon-card grid.

2. Tutorial cards (Quick tour / Exploring Pathways / Analysis
   Tools) on /documentation/userguide use a `.tutorial-card`
   variant that puts the actual training_N.png screenshot at the
   top of the card instead of an icon glyph -- closer to prod's
   layout. Thumbnail capped at 140px wide to stay compact.

3. Extends addAnchorIds.ts: previously it only added id="X" to
   headings whose first child was an anchor link to "#X". Now it
   also adds id="X" to plain headings (no inner anchor) whose
   slugified text (spaces -> underscores) matches a #fragment used
   anywhere on the page -- fixes the broken TOC jumps on
   /documentation/userguide/reactome-fiviz (e.g.
   #Probabilistic_Graphical_Model_based_Pathway_Analysis).

4. Embedded YouTube/Vimeo iframes default to ~300x150 since the
   markdown doesn't set width/height. Make them fill the content
   column with a 16:9 aspect-ratio in page.component.scss.

5. The new .module-grid gets bigger min-column-width, more gap, a
   subtle drop shadow + transform on hover so the cards feel less
   cramped (adam's feedback).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: adamjohnwright

projects/website-angular/content/documentation/index.mdx

@@ -3,29 +3,29 @@ title: "Documentation"
 category: "documentation"
 ---
 
-[ ![](/uploads/documentation/for_users_110x110.png) ](</documentation/userguide>)
-
-Take the most out of our tools and data analysis. All you need is our User Guide. 
-
-#### [__For Users](</documentation/userguide>)
-
-[ ![](/uploads/documentation/for_developers_110x110.png) ](</documentation/dev>)
-
-Are you interested in programatically querying our data or integrating our Widgets ? 
-
-#### [__For Developers](</documentation/dev>)
-
-[ ![](/uploads/documentation/citing_us_110x110.png) ](</documentation/cite>)
-
-Have our data been useful in your research or experiment ? Please, remember to cite us! 
-
-#### [__Citing us](</documentation/cite>)
+<div class="module-grid">
+  <a class="module-card" href="/documentation/userguide">
+    <span class="material-symbols-rounded module-icon">help</span>
+    <span class="module-label">For Users</span>
+    <span class="module-desc">Take the most out of our tools and data analysis. All you need is our User Guide.</span>
+  </a>
+  <a class="module-card" href="/documentation/dev">
+    <span class="material-symbols-rounded module-icon">code</span>
+    <span class="module-label">For Developers</span>
+    <span class="module-desc">Are you interested in programatically querying our data or integrating our Widgets?</span>
+  </a>
+  <a class="module-card" href="/documentation/cite">
+    <span class="material-symbols-rounded module-icon">format_quote</span>
+    <span class="module-label">Citing us</span>
+    <span class="module-desc">Have our data been useful in your research or experiment? Please, remember to cite us!</span>
+  </a>
+</div>
 
 The online [User’s Guide](</documentation/userguide>) begins with entry-level information that describes what our resource contains and how its pathways are organized. The guide leads users through the process of browsing Reactome, searching for particular biological and chemical molecules or pathways of interest, interpreting experimental datasets through the website and the more specialized [ReactomeFIViz app](</documentation/userguide/reactome-fiviz>).
 
 ### Introduction to the Reactome Pathway Knowledgebase
 
-Please visit our "Getting Started with Reactome" playlist to get an overview of Reactome! 
+Please visit our "Getting Started with Reactome" playlist to get an overview of Reactome!
 
 <iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/videoseries?si=ZgK9G3Ws-Zxin16h&amp;list=PLLc8-qElSrCxhMsCVjYIO8OmO-Im_lQ6D"></iframe>
 

projects/website-angular/content/documentation/userguide.mdx

@@ -1,62 +1,69 @@
 ---
-title: Pathway Browser
+title: User Guide
 category: "documentation"
 ---
 
 ### What is Reactome?
 
-Reactome is a curated database of pathways and reactions in human biology. Reactions can be considered as pathway ‘steps’. Reactome defines a ‘reaction’ as any event in biology that changes the state of a biological molecule. Binding, activation, translocation, degradation and classical biochemical events involving a catalyst are all reactions. Information in the database is authored by expert biologists, entered and maintained by Reactome’s team of Curators and Editorial staff. Reactome content frequently cross-references other resources e.g. [NCBI](<http://www.ncbi.nlm.nih.gov>), [Ensembl](<http://www.ensembl.org>), [UniProt](<http://www.uniprot.org/>), KEGG ([Gene ](<http://www.genome.jp/kegg/genes.html>)and [Compound](<http://www.genome.jp/dbget-bin/www_bfind?compound>)), [ChEBI](<http://www.ebi.ac.uk/chebi/init.do>), [PubMed](<http://www.ncbi.nlm.nih.gov/entrez/query.fcgi?CMD=&DB=PubMed>) and [GO](<http://www.geneontology.org>). [Inferred orthologous reactions](</documentation/inferred-events>) Inferred orthologous reactions are available for 15 non-human species including mouse, rat, chicken, puffer fish, worm, fly, yeast, rice, and Arabidopsis
+Reactome is a curated database of pathways and reactions in human biology. Reactions can be considered as pathway ‘steps’. Reactome defines a ‘reaction’ as any event in biology that changes the state of a biological molecule. Binding, activation, translocation, degradation and classical biochemical events involving a catalyst are all reactions. Information in the database is authored by expert biologists, entered and maintained by Reactome’s team of Curators and Editorial staff. Reactome content frequently cross-references other resources e.g. [NCBI](<http://www.ncbi.nlm.nih.gov>), [Ensembl](<http://www.ensembl.org>), [UniProt](<http://www.uniprot.org/>), KEGG ([Gene](<http://www.genome.jp/kegg/genes.html>) and [Compound](<http://www.genome.jp/dbget-bin/www_bfind?compound>)), [ChEBI](<http://www.ebi.ac.uk/chebi/init.do>), [PubMed](<http://www.ncbi.nlm.nih.gov/entrez/query.fcgi?CMD=&DB=PubMed>) and [GO](<http://www.geneontology.org>). [Inferred orthologous reactions](</documentation/inferred-events>) are available for 15 non-human species including mouse, rat, chicken, puffer fish, worm, fly, yeast, rice, and Arabidopsis.
 
 ### What is this guide For?
 
 This guide introduces features of the Reactome website using a combination of short explanations and exercises. You will learn how to search, interpret the views, use the tools and if necessary find documentation or [help@reactome.org](<mailto:help@reactome.org>) for help.
 
-[ __ ](</documentation/userguide/pathway-browser>)
-
-##  [ Pathway Browser ](</user/guide/pathway-browser>)
-
-[ __ ](</documentation/userguide/details-panel>)
-
-##  [ Details Panel ](</user/guide/details-panel>)
-
-[ __ ](</documentation/userguide/searching>)
-
-##  [ How do I search? ](</user/guide/searching>)
-
-[ __ ](</documentation/userguide/analysis>)
-
-##  [ Analysis Tools ](</user/guide/analysis>)
-
-[ __ ](</user/guide/cytomics>)
-
-##  [ Cytomics ](</user/guide/cytomics>)
-
-[ __ ](</documentation/userguide/diseases>)
-
-##  [ Diseases ](</user/guide/diseases>)
-
-[ __ ](</tools/reactome-fiviz>)
-
-##  [ ReactomeFIVIz ](</user/reactome-fiviz>)
+<div class="module-grid">
+  <a class="module-card" href="/documentation/userguide/pathway-browser">
+    <span class="material-symbols-rounded module-icon">account_tree</span>
+    <span class="module-label">Pathway Browser</span>
+  </a>
+  <a class="module-card" href="/documentation/userguide/details-panel">
+    <span class="material-symbols-rounded module-icon">laptop</span>
+    <span class="module-label">Details Panel</span>
+  </a>
+  <a class="module-card" href="/documentation/userguide/searching">
+    <span class="material-symbols-rounded module-icon">search</span>
+    <span class="module-label">Searching</span>
+  </a>
+  <a class="module-card" href="/documentation/userguide/analysis">
+    <span class="material-symbols-rounded module-icon">analytics</span>
+    <span class="module-label">Analysis</span>
+  </a>
+  <a class="module-card" href="/documentation/userguide/diseases">
+    <span class="material-symbols-rounded module-icon">stethoscope</span>
+    <span class="module-label">Diseases</span>
+  </a>
+  <a class="module-card" href="/documentation/userguide/cytomics">
+    <span class="material-symbols-rounded module-icon">grain</span>
+    <span class="module-label">Cytomics</span>
+  </a>
+  <a class="module-card" href="/documentation/userguide/review-status">
+    <span class="material-symbols-rounded module-icon">verified</span>
+    <span class="module-label">Review Status</span>
+  </a>
+  <a class="module-card" href="/documentation/userguide/reactome-fiviz">
+    <span class="material-symbols-rounded module-icon">hub</span>
+    <span class="module-label">ReactomeFIViz</span>
+  </a>
+</div>
 
 ### Online Tutorial
 
-Available via the EBI Train Online system
-
-[ ![](/uploads/documentation/userguide/training_1.png) ](<https://www.ebi.ac.uk/training/online/course/reactome-quick-tour>)
-
-This quick tour provides a brief introduction to Reactome knowledgebase and its various features. 
-
-#### [__Quick tour](<https://www.ebi.ac.uk/training/online/course/reactome-quick-tour>)
-
-[ ![](/uploads/documentation/userguide/training_2.png) ](<https://www.ebi.ac.uk/training/online/course/reactome-exploring-biological-pathways>)
-
-This course provides a more detailed view of the Reactome pathway database web interface and the database content. 
-
-#### [__Exploring Pathways](<https://www.ebi.ac.uk/training/online/course/reactome-exploring-biological-pathways>)
-
-[ ![](/uploads/documentation/userguide/training_3.png) ](<https://www.ebi.ac.uk/training/online/course/reactome-tools-analysis-biological-pathways>)
-
-This course introduces the analysis tools available via the Reactome pathway database web interface. 
-
-#### [__Analysis Tools](<https://www.ebi.ac.uk/training/online/course/reactome-tools-analysis-biological-pathways>)
+Available via the EBI Train Online system.
+
+<div class="module-grid tutorial-grid">
+  <a class="tutorial-card" href="https://www.ebi.ac.uk/training/online/course/reactome-quick-tour">
+    <img src="/uploads/documentation/userguide/training_1.png" alt="" />
+    <span class="module-label">Quick tour</span>
+    <span class="module-desc">A brief introduction to the Reactome knowledgebase and its various features.</span>
+  </a>
+  <a class="tutorial-card" href="https://www.ebi.ac.uk/training/online/course/reactome-exploring-biological-pathways">
+    <img src="/uploads/documentation/userguide/training_2.png" alt="" />
+    <span class="module-label">Exploring Pathways</span>
+    <span class="module-desc">A more detailed view of the Reactome pathway database web interface and the database content.</span>
+  </a>
+  <a class="tutorial-card" href="https://www.ebi.ac.uk/training/online/course/reactome-tools-analysis-biological-pathways">
+    <img src="/uploads/documentation/userguide/training_3.png" alt="" />
+    <span class="module-label">Analysis Tools</span>
+    <span class="module-desc">An introduction to the analysis tools available via the Reactome pathway database web interface.</span>
+  </a>
+</div>

projects/website-angular/src/app/page/page.component.scss

@@ -17,6 +17,21 @@
     max-height: 110px;
     margin: 0 auto;
   }
+
+  // Embedded YouTube / Vimeo / similar iframes default to ~300x150
+  // because the source HTML doesn't set width/height. Make them fill
+  // the content column with a 16:9 aspect ratio.
+  ::ng-deep iframe[src*="youtube.com"],
+  ::ng-deep iframe[src*="youtu.be"],
+  ::ng-deep iframe[src*="vimeo.com"] {
+    display: block;
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    height: auto;
+    margin: 1rem 0;
+    border: 0;
+    border-radius: 6px;
+  }
 }
 
 .page-content {

projects/website-angular/src/utils/addAnchorIds.ts

@@ -1,10 +1,20 @@
-// Adds id="X" to headings whose first child is an anchor link to "#X".
-// The Joomla->MDX export stripped explicit id="X" attributes from section
-// headings, leaving same-page jump links with no target. When the same href
-// appears in multiple headings (e.g. an H2 jump card at the top of the page
-// plus the matching H3 section heading below it), only the LAST occurrence
-// receives the id so clicks land on the actual section, not the jump card.
+// Adds id="X" attributes to headings so same-page #fragment links jump
+// to them. Handles two patterns the Joomla -> MDX export left behind:
+//
+//   1. Headings whose first child is an anchor link to "#X" (the
+//      pattern used by pages that explicitly link each heading to
+//      itself, like the jump-card pages). When the same href appears
+//      in multiple headings (e.g. an H2 jump card at the top plus the
+//      matching H3 section below it), only the LAST occurrence gets
+//      the id so clicks land on the section, not the jump card.
+//
+//   2. Plain `<hN>Section Text</hN>` headings whose slugified text
+//      matches a same-page #fragment used elsewhere on the page
+//      (typically a TOC list at the top). The fragment format follows
+//      the legacy Joomla convention: spaces -> underscores, with
+//      heading text used verbatim.
 export default function addAnchorIds(html: string): string {
+  // Pass 1: existing behaviour -- headings whose first child is the anchor.
   const re = /<(h[1-6])>\s*(<a\s[^>]*href="#([^"]+)"[^>]*>)/g;
   const matches: { index: number; length: number; tag: string; href: string; full: string }[] = [];
   for (let m = re.exec(html); m !== null; m = re.exec(html)) {
@@ -24,5 +34,27 @@ export default function addAnchorIds(html: string): string {
     cursor = m.index + m.length;
   });
   out += html.slice(cursor);
+
+  // Pass 2: plain headings (no inner anchor) whose slugified text
+  // matches a #fragment referenced anywhere on the page.
+  const fragments = new Set<string>();
+  for (const m of out.matchAll(/href="#([^"]+)"/g)) fragments.add(m[1]);
+  if (fragments.size === 0) return out;
+
+  out = out.replace(
+    /<(h[1-6])(\s[^>]*)?>([\s\S]*?)<\/\1>/g,
+    (full, tag, attrs, inner) => {
+      // Skip headings that already have an id (pass 1 added one).
+      if (attrs && /\bid=/.test(attrs)) return full;
+      // Skip headings whose content is itself a link (pass 1 would have
+      // handled them if the link target matched).
+      // Use the heading's plain text to compute the slug.
+      const text = inner.replace(/<[^>]+>/g, '').trim();
+      if (!text) return full;
+      const slug = text.replace(/\s+/g, '_');
+      if (!fragments.has(slug)) return full;
+      return `<${tag}${attrs || ''} id="${slug}">${inner}</${tag}>`;
+    },
+  );
   return out;
 }

src/styles.scss

@@ -517,3 +517,117 @@ body {
   border-left-color: var(--primary);
   background: rgba(0, 110, 144, 0.08);
 }
+
+// Inline module-card grid used by MDX landing pages
+// (/documentation, /documentation/userguide). Each card is a single
+// anchor wrapping an icon, label, and optional description.
+.module-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 1.5rem;
+  margin: 1.75rem 0 2rem;
+}
+
+.module-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 0.6rem;
+  padding: 1.75rem 1.25rem;
+  border: 1px solid var(--outline-variant);
+  border-radius: 10px;
+  background: var(--surface-container-low, rgba(0, 0, 0, 0.03));
+  color: var(--on-surface);
+  text-decoration: none;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+  transition: background 0.15s, border-color 0.15s, transform 0.15s,
+    box-shadow 0.15s;
+
+  &:hover,
+  &:focus-visible {
+    background: var(--surface-container, rgba(0, 0, 0, 0.06));
+    border-color: var(--primary);
+    text-decoration: none;
+    transform: translateY(-3px);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
+    color: var(--on-surface);
+  }
+
+  .module-icon {
+    font-size: 44px;
+    width: 44px;
+    height: 44px;
+    line-height: 44px;
+    color: var(--primary);
+    margin-bottom: 0.25rem;
+  }
+
+  .module-label {
+    font-size: 1.05rem;
+    font-weight: 600;
+    color: var(--on-surface);
+  }
+
+  .module-desc {
+    font-size: 0.875rem;
+    font-weight: 400;
+    color: var(--on-surface-variant, rgba(0, 0, 0, 0.65));
+    line-height: 1.45;
+  }
+}
+
+// Tutorial card variant -- shows a screenshot/thumbnail image at the
+// top instead of an icon glyph. Used by /documentation/userguide for
+// the EBI Online Tutorial section, where each card previews a real
+// course landing page.
+.tutorial-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 0.75rem;
+  padding: 1rem;
+  border: 1px solid var(--outline-variant);
+  border-radius: 8px;
+  background: var(--surface-container-low, rgba(0, 0, 0, 0.03));
+  color: var(--on-surface);
+  text-decoration: none;
+  transition: background 0.15s, border-color 0.15s, transform 0.15s;
+
+  &:hover,
+  &:focus-visible {
+    background: var(--surface-container, rgba(0, 0, 0, 0.06));
+    border-color: var(--primary);
+    text-decoration: none;
+    transform: translateY(-2px);
+    color: var(--on-surface);
+  }
+
+  img {
+    width: 100%;
+    max-width: 140px;
+    height: auto;
+    border-radius: 6px;
+    display: block;
+  }
+
+  .module-label {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--on-surface);
+  }
+
+  .module-desc {
+    font-size: 0.85rem;
+    font-weight: 400;
+    color: var(--on-surface-variant, rgba(0, 0, 0, 0.6));
+    line-height: 1.4;
+  }
+}
+
+// Tutorial grid wants slightly wider columns so the screenshot thumbs
+// have room to breathe.
+.module-grid.tutorial-grid {
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+}