Skip to content

Commit 6a8e720

Browse files
alexjpwalkeralexjpwalker
authored
New, more flexible feature grid schema (#351)
## Release notes: usage and product changes Feature grids now support variable length rows. Features page now renders feature grid titles and a table of contents. ## Implementation - Refactor Sanity schema of feature grid - Refactor Angular component to match
1 parent 889ab76 commit 6a8e720

21 files changed

+1210
-180
lines changed

‎common/src/styles/_typography.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -41,14 +41,14 @@ $p1-mobile: 16px;
4141
$height-p1-mobile: calc(24px / $p1-mobile);
4242

4343
$p2: 16px;
44-
$height-p2: calc(26px / $p2);
44+
$height-p2: calc(24px / $p2);
4545
$p2-mobile: 14px;
4646
$height-p2-mobile: calc(24px / $p2-mobile);
4747

48-
$blog: 18px;
49-
$height-blog: calc(28px / $blog);
50-
$blog-mobile: 16px;
51-
$height-blog-mobile: calc(26px / $blog-mobile);
48+
$blog: 16px;
49+
$height-blog: calc(26px / $blog);
50+
$blog-mobile: 14px;
51+
$height-blog-mobile: calc(24px / $blog-mobile);
5252

5353
$aside: 14px;
5454
$height-aside: calc(22px / $aside);

‎common/src/styles/vars.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343

4444
--section-page-margin: #{$section-page-margin};
4545
--section-width: #{$section-width};
46-
--section-max-width: calc(100vw - 24px);
46+
--section-max-width: calc(100vw - 40px);
4747
--blog-post-width: #{$blog-post-width};
4848
--blog-post-max-width: calc(var(--section-max-width) - #{$blog-post-gap} - #{$blog-post-sidebar-width});
4949

‎main/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
"fontfaceobserver": "2.3.0",
3737
"interactjs": "1.10.18",
3838
"ngx-cookieconsent": "4.0.2",
39+
"pixi.js-legacy": "7.4.3",
3940
"posthog-js": "1.268.8",
4041
"prismjs": "1.29.0",
4142
"rxjs": "7.8.1",

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

Lines changed: 59 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,68 @@
1-
@for (feature of featureRows.flat(); track feature) {
2-
<div class="fg-grid-item card-padding">
3-
<div class="fg-grid-item-text">
4-
@if (feature.title) {
5-
<div class="fg-feature-title-section">
6-
@if (feature.iconURL) {
7-
<img [src]="feature.iconURL" alt="" />
1+
@if (data.title) {
2+
<td-heading-with-highlights level="h3" [value]="data.title" />
3+
}
4+
5+
@for (row of data.rows; track row) {
6+
<div class="fg-grid-row" [class]="'grid-row-size-' + row.cells.length">
7+
@for (feature of row.cells; track feature) {
8+
<div class="fg-grid-item card-padding">
9+
<div class="fg-grid-item-text">
10+
@if (feature.title) {
11+
<div class="fg-feature-title-section">
12+
@if (feature.iconURL) {
13+
<img [src]="feature.iconURL" alt="" />
14+
}
15+
<h4>{{ feature.title }}</h4>
16+
<div class="flex"></div>
17+
<td-tag-chips [tags]="feature.tags" [sectionId]="sectionId" />
18+
</div>
819
}
9-
<h3>{{ feature.title }}</h3>
10-
<div class="flex"></div>
11-
<td-tag-chips [tags]="feature.tags" [sectionId]="sectionId" />
12-
</div>
13-
}
14-
@if (feature.body) {
15-
<td-rich-text [value]="feature.body" />
16-
}
17-
@if (feature.links?.length) {
18-
<div class="fg-links-section">
19-
@for (link of feature.links; track link) {
20-
<a class="link-tertiary" [tdLink]="link" [attr.id]="linkId(feature, link)">{{ link.text }}</a>
20+
@if (feature.body) {
21+
<td-rich-text [value]="feature.body" />
22+
}
23+
@if (feature.links?.length) {
24+
<div class="fg-links-section">
25+
@for (link of feature.links; track link) {
26+
<a class="link-tertiary" [tdLink]="link" [attr.id]="linkId(feature, link)">{{ link.text }}</a>
27+
}
28+
</div>
2129
}
2230
</div>
23-
}
24-
</div>
25-
@if (hasMediaIllustration(feature)) {
26-
<td-aspect-ratio ratio="16:9">
27-
<td-illustration [illustration]="$any(feature.illustration)" [isBlurred]="feature.isIllustrationBlurred" />
28-
</td-aspect-ratio>
29-
}
30-
@if (hasShortCodeSnippet(feature)) {
31-
<div class="fg-code-short-container">
32-
<pre
33-
class="fg-code-short"
34-
[class.fg-blur]="feature.isIllustrationBlurred"
35-
><code [class]="'language-' + $any(feature.illustration).language">{{ $any(feature.illustration).code }}</code></pre>
36-
@if (!feature.isIllustrationBlurred) {
37-
<button
38-
class="fg-copy-button"
39-
title="Copy to clipboard"
40-
(click)="writeToClipboard($event, $any(feature.illustration).code)"
41-
>
42-
<div class="fg-copy-icon"></div>
43-
<span class="fg-copy-toast">Copied!</span>
44-
</button>
31+
@if (hasMediaIllustration(feature)) {
32+
<td-aspect-ratio ratio="16:9">
33+
<td-illustration [illustration]="$any(feature.illustration)" [isBlurred]="feature.isIllustrationBlurred" />
34+
</td-aspect-ratio>
35+
}
36+
@if (hasShortCodeSnippet(feature)) {
37+
<div class="fg-code-short-container">
38+
<div
39+
class="fg-code-short"
40+
[class.fg-blur]="feature.isIllustrationBlurred"
41+
tdSyntaxHighlight
42+
[language]="$any(feature.illustration).language"
43+
[code]="$any(feature.illustration).code"
44+
></div>
45+
@if (!feature.isIllustrationBlurred) {
46+
<button
47+
class="fg-copy-button"
48+
title="Copy to clipboard"
49+
(click)="writeToClipboard($event, $any(feature.illustration).code)"
50+
>
51+
<div class="fg-copy-icon"></div>
52+
<span class="fg-copy-toast">Copied!</span>
53+
</button>
54+
}
55+
</div>
56+
}
57+
@if (hasCodeSnippetIllustration(feature)) {
58+
<td-illustration
59+
class="fg-code-snippet fg-code-snippet-short"
60+
[illustration]="$any(feature.illustration)"
61+
[isBlurred]="feature.isIllustrationBlurred"
62+
/>
4563
}
4664
</div>
4765
}
48-
@if (hasCodeSnippetIllustration(feature)) {
49-
<td-illustration
50-
class="fg-code-snippet fg-code-snippet-short"
51-
[illustration]="$any(feature.illustration)"
52-
[isBlurred]="feature.isIllustrationBlurred"
53-
/>
54-
}
5566
</div>
5667
}
5768

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

Lines changed: 49 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,64 @@
55
display: flex;
66
flex-flow: row wrap;
77
overflow: hidden;
8-
margin-top: 0;
8+
margin-top: 28px;
99
padding: 0;
1010
}
1111

12-
.fg-grid-item,
13-
.fg-illustration-row {
14-
border: shapes.$border;
15-
border-width: 1px 0 0 1px;
16-
margin: -1px 0 0 -1px;
12+
td-heading-with-highlights {
13+
margin-bottom: 28px;
14+
}
15+
16+
.fg-grid-row {
17+
display: flex;
18+
flex-direction: row;
19+
width: 100%;
20+
21+
// Add bottom border to all rows except the last one
22+
&:not(:last-child) {
23+
border-bottom: shapes.$border;
24+
}
25+
26+
&.grid-row-size-1 .fg-grid-item {
27+
flex-direction: row;
28+
29+
> * {
30+
flex: 1;
31+
}
32+
}
33+
}
34+
35+
.fg-grid-item, .fg-illustration-row {
36+
flex: 1;
37+
min-width: 0;
38+
}
39+
40+
.fg-grid-item {
41+
// Add right border to all cells except the last one in each row
42+
&:not(:last-child) {
43+
border-right: shapes.$border;
44+
}
45+
}
46+
47+
.fg-grid-item {
48+
display: flex;
49+
flex-direction: column;
50+
gap: 24px;
51+
52+
@media (max-width: media.$max-width-tablet) {
53+
gap: 16px;
54+
}
55+
56+
@media (max-width: media.$max-width-mobile) {
57+
gap: 12px;
58+
}
1759
}
1860

19-
.fg-grid-item,
2061
.fg-grid-item-text {
2162
display: flex;
2263
flex-direction: column;
2364
gap: 24px;
65+
flex: 1; // Allow text section to grow and push illustrations down
2466

2567
@media (max-width: media.$max-width-tablet) {
2668
gap: 16px;

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

Lines changed: 12 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,38 @@
11

2-
import { isPlatformBrowser } from "@angular/common";
3-
import { AfterViewInit, ChangeDetectionStrategy, Component, HostBinding, Input, OnInit, inject, PLATFORM_ID } from "@angular/core";
2+
import { ChangeDetectionStrategy, Component, HostBinding, Input } from "@angular/core";
43
import { sanitiseHtmlID } from "typedb-web-common/lib";
54

65
import {
7-
CodeSnippet, CodeSnippetShort, FeatureGridCell, FeatureGridLayout, GraphVisualisation, Illustration,
6+
CodeSnippet, CodeSnippetShort, FeatureGrid, FeatureGridCell, FeatureGridRow, GraphVisualisation, Illustration,
87
ImageIllustration, PolyglotSnippet, SplitPaneIllustration, TextLink, VideoEmbed,
98
} from "typedb-web-schema";
109

1110
import { AspectRatioComponent } from "../aspect-ratio/aspect-ratio.component";
11+
import { SyntaxHighlightDirective } from "../code/syntax-highlight.directive";
1212
import { IllustrationComponent } from "../illustration/illustration.component";
1313
import { LinkDirective } from "../link/link.directive";
1414
import { RichTextComponent } from "../text/rich-text.component";
1515
import { TagChipsComponent } from "./tag-chips.component";
16+
import { HeadingWithHighlightsComponent } from "../text/text-with-highlights.component";
1617

1718
@Component({
1819
selector: "td-feature-grid",
1920
templateUrl: "./feature-grid.component.html",
2021
styleUrls: ["./feature-grid.component.scss"],
2122
changeDetection: ChangeDetectionStrategy.OnPush,
22-
imports: [TagChipsComponent, RichTextComponent, LinkDirective, AspectRatioComponent, IllustrationComponent]
23+
imports: [TagChipsComponent, RichTextComponent, LinkDirective, AspectRatioComponent, IllustrationComponent, HeadingWithHighlightsComponent, SyntaxHighlightDirective]
2324
})
24-
export class FeatureGridComponent implements OnInit, AfterViewInit {
25-
private readonly platformId = inject(PLATFORM_ID);
26-
@Input() layout!: FeatureGridLayout;
27-
@Input() featureRows!: FeatureGridCell[][];
25+
export class FeatureGridComponent {
26+
@Input() data!: FeatureGrid;
2827
@Input() illustration?: Illustration;
2928
@Input() disableCardAppearance = false;
3029
@Input({ required: true }) sectionId!: string;
3130

32-
@HostBinding("class") get classes() {
33-
return {
34-
section: !this.disableCardAppearance,
35-
"narrow-section": !this.disableCardAppearance,
36-
["fg-row-size-" + this.columnIndexes.length]: true,
37-
};
38-
}
39-
40-
columnIndexes!: number[];
41-
42-
ngOnInit() {
43-
this.columnIndexes = [...Array(this.featureRows[0].length).keys()];
44-
}
45-
46-
ngAfterViewInit() {
47-
if (isPlatformBrowser(this.platformId)) {
48-
(window as any)["Prism"].highlightAll();
49-
}
50-
}
31+
// @HostBinding("class") get classes() {
32+
// return {
33+
// section: !this.disableCardAppearance,
34+
// };
35+
// }
5136

5237
hasMediaIllustration(feature: FeatureGridCell) {
5338
return (

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import * as d3 from "d3-force";
1515
import FontFaceObserver from "fontfaceobserver";
1616
// pixi.js-legacy 7.x causes an issue where dragging stops at the edge of the visualisation, which is not a nice UX
1717
// pixi.js (non-legacy) causes an issue where all text is blurred
18-
// import * as PIXI from "pixi.js-legacy";
18+
import * as PIXI from "pixi.js-legacy";
1919
import { Subscription } from "rxjs";
2020
import { GraphVisualisation } from "typedb-web-schema";
2121

@@ -435,7 +435,7 @@ export function renderGraph(
435435
.on("mouseupoutside", () => boundDragEnd(vertex.gfx))
436436
.on("mousemove", () => boundDragMove(vertex.gfx));
437437
vertex.gfx!.interactive = true;
438-
vertex.gfx!.buttonMode = true;
438+
// vertex.gfx!.buttonMode = true;
439439

440440
app.stage.addChild(vertex.gfx! as any);
441441
});

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@
1010
@if (polyglotSnippet) {
1111
<td-polyglot-snippet [id]="polyglotSnippet.id" [snippet]="polyglotSnippet" />
1212
}
13-
<!--@if (graphVisualisation && visible) {-->
14-
<!-- <td-graph-visualisation [graph]="graphVisualisation" />-->
15-
<!--}-->
13+
@if (graphVisualisation && visible) {
14+
<td-graph-visualisation [graph]="graphVisualisation" />
15+
}
1616
@if (splitPaneIllustration) {
1717
<td-split-pane-illustration [panes]="splitPaneIllustration" [visible]="visible" />
1818
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { MediaQueryService } from "../../service/media-query.service";
1212
import { AspectRatioComponent } from "../aspect-ratio/aspect-ratio.component";
1313
import { CodeSnippetComponent } from "../code/code-snippet.component";
1414
import { PolyglotSnippetComponent } from "../polyglot-snippet/polyglot-snippet.component";
15-
// import { GraphVisualisationComponent } from "../graph-visualisation/graph-visualisation.component";
15+
import { GraphVisualisationComponent } from "../graph-visualisation/graph-visualisation.component";
1616
import { RichTextComponent } from "../text/rich-text.component";
1717

1818
@Component({
@@ -21,14 +21,14 @@ import { RichTextComponent } from "../text/rich-text.component";
2121
styleUrls: ["illustration.component.scss"],
2222
changeDetection: ChangeDetectionStrategy.OnPush,
2323
imports: [
24-
CodeSnippetComponent, PolyglotSnippetComponent, /*GraphVisualisationComponent,*/
24+
CodeSnippetComponent, PolyglotSnippetComponent, GraphVisualisationComponent,
2525
forwardRef(() => SplitPaneIllustrationComponent)
2626
]
2727
})
2828
export class IllustrationComponent {
2929
@Input() illustration!: Illustration;
3030
// TODO: requiring the caller to set visible explicitly is counter-intuitive
31-
@Input() visible = false;
31+
@Input() visible = true;
3232
@Input() @HostBinding("class.il-blur") isBlurred = false;
3333

3434
@HostBinding("class.is-code-snippet")

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ <h3>{{ item.title }}</h3>
1616
}
1717
@if (isFeatureGrid(item)) {
1818
<td-feature-grid
19-
[disableCardAppearance]="true" [featureRows]="item.features" [layout]="item.featureGridLayout"
19+
[disableCardAppearance]="true" [data]="item"
2020
[illustration]="item.illustration" [sectionId]="featureGridId(item)"
2121
/>
2222
}

0 commit comments

Comments
 (0)