New, more flexible feature grid schema

common/src/styles/_typography.scss

@@ -41,14 +41,14 @@ $p1-mobile: 16px;
 $height-p1-mobile: calc(24px / $p1-mobile);
 
 $p2: 16px;
-$height-p2: calc(26px / $p2);
+$height-p2: calc(24px / $p2);
 $p2-mobile: 14px;
 $height-p2-mobile: calc(24px / $p2-mobile);
 
-$blog: 18px;
-$height-blog: calc(28px / $blog);
-$blog-mobile: 16px;
-$height-blog-mobile: calc(26px / $blog-mobile);
+$blog: 16px;
+$height-blog: calc(26px / $blog);
+$blog-mobile: 14px;
+$height-blog-mobile: calc(24px / $blog-mobile);
 
 $aside: 14px;
 $height-aside: calc(22px / $aside);

common/src/styles/vars.scss

@@ -43,7 +43,7 @@
 
     --section-page-margin: #{$section-page-margin};
     --section-width: #{$section-width};
-    --section-max-width: calc(100vw - 24px);
+    --section-max-width: calc(100vw - 40px);
     --blog-post-width: #{$blog-post-width};
     --blog-post-max-width: calc(var(--section-max-width) - #{$blog-post-gap} - #{$blog-post-sidebar-width});
 

main/package.json

@@ -36,6 +36,7 @@
     "fontfaceobserver": "2.3.0",
     "interactjs": "1.10.18",
     "ngx-cookieconsent": "4.0.2",
+    "pixi.js-legacy": "7.4.3",
     "posthog-js": "1.268.8",
     "prismjs": "1.29.0",
     "rxjs": "7.8.1",

main/src/framework/feature-grid/feature-grid.component.html

@@ -1,57 +1,68 @@
-@for (feature of featureRows.flat(); track feature) {
-  <div class="fg-grid-item card-padding">
-    <div class="fg-grid-item-text">
-      @if (feature.title) {
-        <div class="fg-feature-title-section">
-          @if (feature.iconURL) {
-            <img [src]="feature.iconURL" alt="" />
+@if (data.title) {
+  <td-heading-with-highlights level="h3" [value]="data.title" />
+}
+
+@for (row of data.rows; track row) {
+  <div class="fg-grid-row" [class]="'grid-row-size-' + row.cells.length">
+    @for (feature of row.cells; track feature) {
+      <div class="fg-grid-item card-padding">
+        <div class="fg-grid-item-text">
+          @if (feature.title) {
+            <div class="fg-feature-title-section">
+              @if (feature.iconURL) {
+                <img [src]="feature.iconURL" alt="" />
+              }
+              <h4>{{ feature.title }}</h4>
+              <div class="flex"></div>
+              <td-tag-chips [tags]="feature.tags" [sectionId]="sectionId" />
+            </div>
           }
-          <h3>{{ feature.title }}</h3>
-          <div class="flex"></div>
-          <td-tag-chips [tags]="feature.tags" [sectionId]="sectionId" />
-        </div>
-      }
-      @if (feature.body) {
-        <td-rich-text [value]="feature.body" />
-      }
-      @if (feature.links?.length) {
-        <div class="fg-links-section">
-          @for (link of feature.links; track link) {
-            <a class="link-tertiary" [tdLink]="link" [attr.id]="linkId(feature, link)">{{ link.text }}</a>
+          @if (feature.body) {
+            <td-rich-text [value]="feature.body" />
+          }
+          @if (feature.links?.length) {
+            <div class="fg-links-section">
+              @for (link of feature.links; track link) {
+                <a class="link-tertiary" [tdLink]="link" [attr.id]="linkId(feature, link)">{{ link.text }}</a>
+              }
+            </div>
           }
         </div>
-      }
-    </div>
-    @if (hasMediaIllustration(feature)) {
-      <td-aspect-ratio ratio="16:9">
-        <td-illustration [illustration]="$any(feature.illustration)" [isBlurred]="feature.isIllustrationBlurred" />
-      </td-aspect-ratio>
-    }
-    @if (hasShortCodeSnippet(feature)) {
-      <div class="fg-code-short-container">
-        <pre
-          class="fg-code-short"
-          [class.fg-blur]="feature.isIllustrationBlurred"
-        ><code [class]="'language-' + $any(feature.illustration).language">{{ $any(feature.illustration).code }}</code></pre>
-        @if (!feature.isIllustrationBlurred) {
-          <button
-            class="fg-copy-button"
-            title="Copy to clipboard"
-            (click)="writeToClipboard($event, $any(feature.illustration).code)"
-          >
-            <div class="fg-copy-icon"></div>
-            <span class="fg-copy-toast">Copied!</span>
-          </button>
+        @if (hasMediaIllustration(feature)) {
+          <td-aspect-ratio ratio="16:9">
+            <td-illustration [illustration]="$any(feature.illustration)" [isBlurred]="feature.isIllustrationBlurred" />
+          </td-aspect-ratio>
+        }
+        @if (hasShortCodeSnippet(feature)) {
+          <div class="fg-code-short-container">
+            <div
+              class="fg-code-short"
+              [class.fg-blur]="feature.isIllustrationBlurred"
+              tdSyntaxHighlight
+              [language]="$any(feature.illustration).language"
+              [code]="$any(feature.illustration).code"
+            ></div>
+            @if (!feature.isIllustrationBlurred) {
+              <button
+                class="fg-copy-button"
+                title="Copy to clipboard"
+                (click)="writeToClipboard($event, $any(feature.illustration).code)"
+              >
+                <div class="fg-copy-icon"></div>
+                <span class="fg-copy-toast">Copied!</span>
+              </button>
+            }
+          </div>
+        }
+        @if (hasCodeSnippetIllustration(feature)) {
+          <td-illustration
+            class="fg-code-snippet fg-code-snippet-short"
+            [illustration]="$any(feature.illustration)"
+            [isBlurred]="feature.isIllustrationBlurred"
+          />
         }
       </div>
     }
-    @if (hasCodeSnippetIllustration(feature)) {
-      <td-illustration
-        class="fg-code-snippet fg-code-snippet-short"
-        [illustration]="$any(feature.illustration)"
-        [isBlurred]="feature.isIllustrationBlurred"
-      />
-    }
   </div>
 }
 

main/src/framework/feature-grid/feature-grid.component.scss

@@ -5,22 +5,64 @@
     display: flex;
     flex-flow: row wrap;
     overflow: hidden;
-    margin-top: 0;
+    margin-top: 28px;
     padding: 0;
 }
 
-.fg-grid-item,
-.fg-illustration-row {
-    border: shapes.$border;
-    border-width: 1px 0 0 1px;
-    margin: -1px 0 0 -1px;
+td-heading-with-highlights {
+    margin-bottom: 28px;
+}
+
+.fg-grid-row {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+
+    // Add bottom border to all rows except the last one
+    &:not(:last-child) {
+        border-bottom: shapes.$border;
+    }
+
+    &.grid-row-size-1 .fg-grid-item {
+        flex-direction: row;
+
+        > * {
+            flex: 1;
+        }
+    }
+}
+
+.fg-grid-item, .fg-illustration-row {
+    flex: 1;
+    min-width: 0;
+}
+
+.fg-grid-item {
+    // Add right border to all cells except the last one in each row
+    &:not(:last-child) {
+        border-right: shapes.$border;
+    }
+}
+
+.fg-grid-item {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+
+    @media (max-width: media.$max-width-tablet) {
+        gap: 16px;
+    }
+
+    @media (max-width: media.$max-width-mobile) {
+        gap: 12px;
+    }
 }
 
-.fg-grid-item,
 .fg-grid-item-text {
     display: flex;
     flex-direction: column;
     gap: 24px;
+    flex: 1; // Allow text section to grow and push illustrations down
 
     @media (max-width: media.$max-width-tablet) {
         gap: 16px;

main/src/framework/feature-grid/feature-grid.component.ts

@@ -1,53 +1,38 @@
 
-import { isPlatformBrowser } from "@angular/common";
-import { AfterViewInit, ChangeDetectionStrategy, Component, HostBinding, Input, OnInit, inject, PLATFORM_ID } from "@angular/core";
+import { ChangeDetectionStrategy, Component, HostBinding, Input } from "@angular/core";
 import { sanitiseHtmlID } from "typedb-web-common/lib";
 
 import {
-    CodeSnippet, CodeSnippetShort, FeatureGridCell, FeatureGridLayout, GraphVisualisation, Illustration,
+    CodeSnippet, CodeSnippetShort, FeatureGrid, FeatureGridCell, FeatureGridRow, GraphVisualisation, Illustration,
     ImageIllustration, PolyglotSnippet, SplitPaneIllustration, TextLink, VideoEmbed,
 } from "typedb-web-schema";
 
 import { AspectRatioComponent } from "../aspect-ratio/aspect-ratio.component";
+import { SyntaxHighlightDirective } from "../code/syntax-highlight.directive";
 import { IllustrationComponent } from "../illustration/illustration.component";
 import { LinkDirective } from "../link/link.directive";
 import { RichTextComponent } from "../text/rich-text.component";
 import { TagChipsComponent } from "./tag-chips.component";
+import { HeadingWithHighlightsComponent } from "../text/text-with-highlights.component";
 
 @Component({
     selector: "td-feature-grid",
     templateUrl: "./feature-grid.component.html",
     styleUrls: ["./feature-grid.component.scss"],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [TagChipsComponent, RichTextComponent, LinkDirective, AspectRatioComponent, IllustrationComponent]
+    imports: [TagChipsComponent, RichTextComponent, LinkDirective, AspectRatioComponent, IllustrationComponent, HeadingWithHighlightsComponent, SyntaxHighlightDirective]
 })
-export class FeatureGridComponent implements OnInit, AfterViewInit {
-    private readonly platformId = inject(PLATFORM_ID);
-    @Input() layout!: FeatureGridLayout;
-    @Input() featureRows!: FeatureGridCell[][];
+export class FeatureGridComponent {
+    @Input() data!: FeatureGrid;
     @Input() illustration?: Illustration;
     @Input() disableCardAppearance = false;
     @Input({ required: true }) sectionId!: string;
 
-    @HostBinding("class") get classes() {
-        return {
-            section: !this.disableCardAppearance,
-            "narrow-section": !this.disableCardAppearance,
-            ["fg-row-size-" + this.columnIndexes.length]: true,
-        };
-    }
-
-    columnIndexes!: number[];
-
-    ngOnInit() {
-        this.columnIndexes = [...Array(this.featureRows[0].length).keys()];
-    }
-
-    ngAfterViewInit() {
-        if (isPlatformBrowser(this.platformId)) {
-            (window as any)["Prism"].highlightAll();
-        }
-    }
+    // @HostBinding("class") get classes() {
+    //     return {
+    //         section: !this.disableCardAppearance,
+    //     };
+    // }
 
     hasMediaIllustration(feature: FeatureGridCell) {
         return (

main/src/framework/graph-visualisation/graph-visualisation.component.ts

@@ -15,7 +15,7 @@ import * as d3 from "d3-force";
 import FontFaceObserver from "fontfaceobserver";
 // pixi.js-legacy 7.x causes an issue where dragging stops at the edge of the visualisation, which is not a nice UX
 // pixi.js (non-legacy) causes an issue where all text is blurred
-// import * as PIXI from "pixi.js-legacy";
+import * as PIXI from "pixi.js-legacy";
 import { Subscription } from "rxjs";
 import { GraphVisualisation } from "typedb-web-schema";
 
@@ -435,7 +435,7 @@ export function renderGraph(
                 .on("mouseupoutside", () => boundDragEnd(vertex.gfx))
                 .on("mousemove", () => boundDragMove(vertex.gfx));
             vertex.gfx!.interactive = true;
-            vertex.gfx!.buttonMode = true;
+            // vertex.gfx!.buttonMode = true;
 
             app.stage.addChild(vertex.gfx! as any);
         });

main/src/framework/illustration/illustration.component.html

@@ -10,9 +10,9 @@
 @if (polyglotSnippet) {
   <td-polyglot-snippet [id]="polyglotSnippet.id" [snippet]="polyglotSnippet" />
 }
-<!--@if (graphVisualisation && visible) {-->
-<!--  <td-graph-visualisation [graph]="graphVisualisation" />-->
-<!--}-->
+@if (graphVisualisation && visible) {
+  <td-graph-visualisation [graph]="graphVisualisation" />
+}
 @if (splitPaneIllustration) {
   <td-split-pane-illustration [panes]="splitPaneIllustration" [visible]="visible" />
 }

main/src/framework/illustration/illustration.component.ts

@@ -12,7 +12,7 @@ import { MediaQueryService } from "../../service/media-query.service";
 import { AspectRatioComponent } from "../aspect-ratio/aspect-ratio.component";
 import { CodeSnippetComponent } from "../code/code-snippet.component";
 import { PolyglotSnippetComponent } from "../polyglot-snippet/polyglot-snippet.component";
-// import { GraphVisualisationComponent } from "../graph-visualisation/graph-visualisation.component";
+import { GraphVisualisationComponent } from "../graph-visualisation/graph-visualisation.component";
 import { RichTextComponent } from "../text/rich-text.component";
 
 @Component({
@@ -21,14 +21,14 @@ import { RichTextComponent } from "../text/rich-text.component";
     styleUrls: ["illustration.component.scss"],
     changeDetection: ChangeDetectionStrategy.OnPush,
     imports: [
-        CodeSnippetComponent, PolyglotSnippetComponent, /*GraphVisualisationComponent,*/
+        CodeSnippetComponent, PolyglotSnippetComponent, GraphVisualisationComponent,
         forwardRef(() => SplitPaneIllustrationComponent)
     ]
 })
 export class IllustrationComponent {
     @Input() illustration!: Illustration;
     // TODO: requiring the caller to set visible explicitly is counter-intuitive
-    @Input() visible = false;
+    @Input() visible = true;
     @Input() @HostBinding("class.il-blur") isBlurred = false;
 
     @HostBinding("class.is-code-snippet")

main/src/framework/publication-panel/publication-panel.component.html

@@ -16,7 +16,7 @@ <h3>{{ item.title }}</h3>
   }
   @if (isFeatureGrid(item)) {
     <td-feature-grid
-      [disableCardAppearance]="true" [featureRows]="item.features" [layout]="item.featureGridLayout"
+      [disableCardAppearance]="true" [data]="item"
       [illustration]="item.illustration" [sectionId]="featureGridId(item)"
     />
   }

main/src/framework/text/rich-text.component.scss

@@ -41,22 +41,11 @@
         margin-top: -0.1em;
     }
 
-    h3 {
-        font-size: var(--font-size-h4);
-        line-height: var(--line-height-h4);
-    }
-
-    h4 {
-        font-size: var(--font-size-h5);
-        line-height: var(--line-height-h5);
-    }
-
     p, ul, ol {
         margin: 1em 0 0;
     }
 
-    ul,
-    ol {
+    ul, ol {
         padding-inline-start: 2em;
     }