}/assets/logo/vaticle-text-only.svg){kind=logo}
`;
- const credits = ``;
-
- return `
-
}
+
+
+ {{ brochure.title }}
+-
+ @for (keyPoint of brochure.keyPoints; track keyPoint) {
+
{{ keyPoint }}
+ }
+
+
+
+}
diff --git a/website/src/framework/brochures/brochures.component.scss b/website/src/framework/brochures/brochures.component.scss
new file mode 100644
index 000000000..df6b88048
--- /dev/null
+++ b/website/src/framework/brochures/brochures.component.scss
@@ -0,0 +1,58 @@
+@use "media";
+@use "colors";
+@import "mixins";
+
+:host {
+ display: flex;
+ flex-direction: row;
+ gap: var(--card-padding);
+
+ @media (max-width: media.$max-width-mobile) {
+ flex-direction: column;
+ }
+}
+
+.td-brochure {
+ @include card-appearance;
+ transition: border-color 150ms ease;
+ flex: 1;
+
+ &:hover {
+ border-color: var(--color-green);
+ }
+}
+
+.td-title-area {
+ padding: 20px 28px;
+}
+
+ul.td-key-points-area {
+ background: colors.$deep-purple;
+ border-bottom: 1px solid var(--content-border-color);
+ list-style: none;
+
+ li {
+ border-top: 1px solid var(--content-border-color);
+ padding: 16px;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+
+ mat-icon {
+ color: colors.$green;
+ }
+ }
+}
+
+.td-price-tag-area {
+ @include card-padding;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+
+ td-rich-text ::ng-deep h4 {
+ margin: 0;
+ padding: 0;
+ }
+}
diff --git a/website/src/framework/brochures/brochures.component.ts b/website/src/framework/brochures/brochures.component.ts
new file mode 100644
index 000000000..44dad44bb
--- /dev/null
+++ b/website/src/framework/brochures/brochures.component.ts
@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, HostBinding, Input } from "@angular/core";
+import { MatIconModule } from "@angular/material/icon";
+import { Brochure } from "typedb-web-schema";
+import { ButtonComponent } from "../button/button.component";
+
+import { LinkDirective } from "../link/link.directive";
+import { RichTextComponent } from "../text/rich-text.component";
+
+@Component({
+ selector: "td-brochures",
+ templateUrl: "brochures.component.html",
+ styleUrls: ["brochures.component.scss"],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ standalone: true,
+ imports: [RichTextComponent, LinkDirective, ButtonComponent, MatIconModule],
+})
+export class BrochuresComponent {
+ @Input() brochures!: Brochure[];
+ @HostBinding("class") clazz = "section";
+}
diff --git a/website/src/framework/code/polyglot-snippet.component.scss b/website/src/framework/code/polyglot-snippet.component.scss
index e800ef23f..210e7c4b5 100644
--- a/website/src/framework/code/polyglot-snippet.component.scss
+++ b/website/src/framework/code/polyglot-snippet.component.scss
@@ -51,17 +51,6 @@
background: var(--color-purple);
}
-.ft-graphic {
- flex: 1;
-}
-
-.ft-text-area {
- width: 366px;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
-}
-
td-scroll-shadow {
::ng-deep .ss-container {
height: calc(100% + 4px);
diff --git a/website/src/framework/content-panel/content-panel.component.html b/website/src/framework/content-panel/content-panel.component.html
index 057f0f467..87bd70895 100644
--- a/website/src/framework/content-panel/content-panel.component.html
+++ b/website/src/framework/content-panel/content-panel.component.html
@@ -1,18 +1,12 @@
-
- @if (illustrationIsCodeSnippet()) {
-
-
- }
- @if (contentTextPanel) {
-
+
+}
diff --git a/website/src/framework/content-panel/content-panel.component.scss b/website/src/framework/content-panel/content-panel.component.scss
index f3c61d4ed..89aab755b 100644
--- a/website/src/framework/content-panel/content-panel.component.scss
+++ b/website/src/framework/content-panel/content-panel.component.scss
@@ -1,9 +1,9 @@
@use "media";
-.cp-root {
- display: flex;
- flex-flow: row wrap;
- gap: 40px;
+:host {
+ min-width: 0;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
@media (max-width: media.$max-width-tablet) {
padding: 32px;
@@ -14,14 +14,9 @@
padding: 12px;
gap: 20px;
}
-
- &.cp-in-tab {
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- }
}
-$number-of-lines: 20;
+$number-of-lines: 13;
$number-of-lines-mobile: 12;
td-aspect-ratio {
@@ -42,8 +37,6 @@ td-aspect-ratio {
}
td-illustration.cp-code-snippet {
- flex: 0 0 calc((var(--font-size-code) * var(--line-height-code) * $number-of-lines + 2px) * 16 / 9);
- max-width: 100%;
height: calc(var(--font-size-code) * var(--line-height-code) * $number-of-lines + 2px);
@media (max-width: media.$max-width-tablet) {
@@ -56,10 +49,12 @@ td-illustration.cp-code-snippet {
}
.cp-text-area {
- flex: 1 0 200px;
+ height: 100px;
display: flex;
- flex-direction: column;
+ flex-direction: row;
justify-content: space-between;
+ gap: 12px;
+ align-items: flex-start;
}
.cp-learn-more {
diff --git a/website/src/framework/content-panel/content-panel.component.ts b/website/src/framework/content-panel/content-panel.component.ts
index 381e80c31..bd78a5b7c 100644
--- a/website/src/framework/content-panel/content-panel.component.ts
+++ b/website/src/framework/content-panel/content-panel.component.ts
@@ -1,9 +1,8 @@
-import { NgClass } from "@angular/common";
-import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
-
-import { CodeSnippet, ContentTextPanel, ContentTextTab } from "typedb-web-schema";
+import { ChangeDetectionStrategy, Component, HostBinding, Input } from "@angular/core";
+import { CodeSnippet, ContentTextPanel, LinkButton } from "typedb-web-schema";
import { AspectRatioComponent } from "../aspect-ratio/aspect-ratio.component";
+import { ButtonComponent } from "../button/button.component";
import { IllustrationComponent } from "../illustration/illustration.component";
import { LinkDirective } from "../link/link.directive";
import { RichTextComponent } from "../text/rich-text.component";
@@ -14,23 +13,20 @@ import { RichTextComponent } from "../text/rich-text.component";
styleUrls: ["content-panel.component.scss"],
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
- imports: [NgClass, IllustrationComponent, AspectRatioComponent, RichTextComponent, LinkDirective],
+ imports: [IllustrationComponent, AspectRatioComponent, RichTextComponent, LinkDirective, ButtonComponent],
})
export class ContentPanelComponent {
- @Input() hidden?: boolean;
+ @Input() @HostBinding("hidden") hidden?: boolean;
@Input() panel!: ContentTextPanel;
+ @HostBinding("class") clazz = `card`;
- get contentTextPanel(): ContentTextPanel | undefined {
- return this.panel instanceof ContentTextPanel ? this.panel : undefined;
- }
-
- get rootNgClass(): { [clazz: string]: boolean | undefined } {
- return {
- section: true,
- card: true,
- "cp-root": true,
- "cp-in-tab": this.panel instanceof ContentTextTab,
- };
+ get actionButton(): LinkButton {
+ return new LinkButton({
+ link: this.panel.learnMoreLink,
+ style: "secondary",
+ text: this.panel.learnMoreLinkText,
+ comingSoon: false
+ });
}
illustrationIsCodeSnippet() {
diff --git a/website/src/framework/content-tabs/content-tabs.component.html b/website/src/framework/content-tabs/content-tabs.component.html
deleted file mode 100644
index 7ce61e558..000000000
--- a/website/src/framework/content-tabs/content-tabs.component.html
+++ /dev/null
@@ -1,20 +0,0 @@
- = {
+ "section": true,
+ "card-appearance": true
+ };
+}
diff --git a/website/src/framework/further-learning/further-learning.component.html b/website/src/framework/further-learning/further-learning.component.html
index 4b9d4b7d9..8e70dabb8 100644
--- a/website/src/framework/further-learning/further-learning.component.html
+++ b/website/src/framework/further-learning/further-learning.component.html
@@ -1,2 +1,2 @@
-
+
+@for (tab of tabs; track tab) {
+ ;
private _elementID!: string;
diff --git a/website/src/framework/multi-comparison-tabs/multi-comparison-tabs.component.html b/website/src/framework/multi-comparison-tabs/multi-comparison-tabs.component.html
new file mode 100644
index 000000000..b587e56f7
--- /dev/null
+++ b/website/src/framework/multi-comparison-tabs/multi-comparison-tabs.component.html
@@ -0,0 +1,34 @@
+;
+ private _elementID!: string;
+ private readonly secondaryTabClick$: Subject = new Subject();
+
+ constructor(
+ private router: Router,
+ private _el: ElementRef,
+ activatedRoute: ActivatedRoute,
+ ) {
+ this.selectedSecondaryTab$ = defer(() =>
+ merge(
+ activatedRoute.fragment.pipe(
+ map((value) => this.tabs.secondaryTabs.find((x) => this.tabID(x) === value)),
+ filter((v): v is ContentProsConsTab => !!v),
+ ),
+ this.secondaryTabClick$,
+ ).pipe(startWith(this.tabs.secondaryTabs[0]), shareReplay(1)),
+ );
+ }
+
+ ngOnInit() {
+ if (!this._el.nativeElement.id.length) {
+ throw `${this.constructor.name}'s native HTML element must have an id set`;
+ }
+ this._elementID = this._el.nativeElement.id;
+ }
+
+ tabID(tab: ContentProsConsTab): string {
+ return `${this._elementID}-${sanitiseHtmlID(tab.title)}`;
+ }
+
+ onTabClick(tab: ContentProsConsTab, event: Event) {
+ event.preventDefault();
+ if (event.currentTarget instanceof HTMLElement) {
+ event.currentTarget.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
+ }
+ this.secondaryTabClick$.next(tab);
+
+ if (this.setWindowHashOnTabClick) {
+ this.router.navigate([], {
+ fragment: this.tabID(tab),
+ state: { preventScrollToAnchor: true },
+ });
+ }
+ }
+}
diff --git a/website/src/framework/multi-comparison-tabs/pros-cons.component.html b/website/src/framework/multi-comparison-tabs/pros-cons.component.html
new file mode 100644
index 000000000..2db10f7a3
--- /dev/null
+++ b/website/src/framework/multi-comparison-tabs/pros-cons.component.html
@@ -0,0 +1,12 @@
+
-
+
-
+,
- // private ngZone: NgZone,
- // ) {}
-
- // ngAfterViewInit(): void {
- // this.ngZone.runOutsideAngular(() => {
- // const { cleanupDotListeners } = this.initDotListeners();
- // this.destroyRef.onDestroy(() => {
- // cleanupDotListeners();
- // });
- // });
- // }
-
- @HostBinding("class")
- get clazz(): string {
- return `section ${this.levelClass} ${this.colorClass}`;
- }
-
- private get colorClass(): string {
- switch (this.index % 3) {
- case 0:
- return "tb-green";
- case 1:
- return "tb-pink";
- case 2:
- return "tb-yellow";
- default:
- throw "Unreachable code";
- }
- }
-
- private get levelClass(): string {
- return `tb-level-${this.level}`;
- }
-
- get themeColorHex(): string {
- switch (this.index % 3) {
- case 0:
- return "#02DAC9"; // TODO: parametrise
- case 1:
- return "#FF87DC";
- case 2:
- return "#FFE49E";
- default:
- throw "Unreachable code";
- }
- }
-
- // private initDotListeners() {
- // const dotEls = this.elementRef.nativeElement.querySelectorAll(".tb-graphic-dot");
- // const handleScroll = () => dotEls.forEach((dotEl) => this.updateDotPosition(dotEl));
- // window.addEventListener("scroll", handleScroll);
- // window.addEventListener("resize", handleScroll);
- // handleScroll();
- // const cleanupDotListeners = () => {
- // window.removeEventListener("scroll", handleScroll);
- // window.removeEventListener("resize", handleScroll);
- // };
- // return { cleanupDotListeners };
- // }
-
- // private updateDotPosition(dotEl: HTMLElement): void {
- // if (dotEl.parentElement) {
- // const { height: parentHeight, top: parentOffset } = dotEl.parentElement.getBoundingClientRect();
- // const initialOffset = dotEl.offsetTop;
- // const keyframes = this.calculateDotAnimationKeyframes({ initialOffset, parentHeight, parentOffset });
- // const { top: finalOffset, opacity: finalOpacity } = keyframes[keyframes.length - 1];
-
- // dotEl.animate(keyframes, { duration: 300, easing: "ease" });
- // dotEl.style.top = `${finalOffset}`;
- // dotEl.style.opacity = `${finalOpacity}`;
- // }
- // }
-
- // private calculateDotAnimationKeyframes({
- // initialOffset,
- // parentHeight,
- // parentOffset,
- // }: {
- // initialOffset: number;
- // parentHeight: number;
- // parentOffset: number;
- // }): Keyframe[] {
- // const finalOffset = window.innerHeight / 2 - parentOffset;
- // const opacity = 1 + (parentHeight / 2 - Math.abs(parentHeight / 2 - finalOffset)) / this.opacityChangeDistance;
- // const finalOpacity = Math.max(Math.min(opacity, 1), 0);
-
- // const topHiddenOffset = (-this.opacityChangeDistance - initialOffset) / (finalOffset - initialOffset);
- // const topVisibleOffset = (0 - initialOffset) / (finalOffset - initialOffset);
- // const bottomVisibleOffset = (parentHeight - initialOffset) / (finalOffset - initialOffset);
- // const bottomHiddenOffset =
- // (parentHeight + this.opacityChangeDistance - initialOffset) / (finalOffset - initialOffset);
-
- // const calculatedKeyframes: (Keyframe & { offset: number })[] = [
- // { opacity: 0, top: `${-this.opacityChangeDistance}px`, offset: topHiddenOffset },
- // { opacity: 1, top: `0px`, offset: topVisibleOffset },
- // { opacity: 1, top: `${parentHeight}px`, offset: bottomVisibleOffset },
- // { opacity: 0, top: `${parentHeight + this.opacityChangeDistance}px`, offset: bottomHiddenOffset },
- // ].filter(({ offset }) => offset > 0 && offset < 1);
-
- // const allKeyframes = calculatedKeyframes.concat(
- // { top: `${initialOffset}px`, offset: 0 },
- // { top: `${finalOffset}px`, opacity: finalOpacity, offset: 1 },
- // );
-
- // return allKeyframes.sort((a, b) => a.offset - b.offset);
- // }
-}
diff --git a/website/src/framework/text/heading-with-highlights.component.html b/website/src/framework/text/heading-with-highlights.component.html
index f07250a1e..30057c0fc 100644
--- a/website/src/framework/text/heading-with-highlights.component.html
+++ b/website/src/framework/text/heading-with-highlights.component.html
@@ -2,28 +2,28 @@
@switch (level) {
@case ('h1') {
-
}
@case ('h2') {
-
}
@case ('h3') {
-
}
@case ('h4') {
-
}
}
@for (span of value.spans; track span) {
- {{ span.text }}
+ {{ span.text }}
}
diff --git a/website/src/framework/text/rich-text.component.scss b/website/src/framework/text/rich-text.component.scss
index 13c5c3981..5bd84d6fc 100644
--- a/website/src/framework/text/rich-text.component.scss
+++ b/website/src/framework/text/rich-text.component.scss
@@ -12,7 +12,7 @@
/* prettier-ignore */
h1, h2, h3, h4, h5, h6 {
- font-weight: var(--font-weight-bold);
+ font-weight: var(--font-weight-semi-bold);
margin: 1.5em 0 1em -0.66em;
padding-left: 0.66em;
position: relative;
diff --git a/website/src/framework/text/text-with-highlights.component.scss b/website/src/framework/text/text-with-highlights.component.scss
new file mode 100644
index 000000000..c49803e74
--- /dev/null
+++ b/website/src/framework/text/text-with-highlights.component.scss
@@ -0,0 +1,5 @@
+@use "colors";
+
+.td-highlight {
+ color: colors.$green;
+}
diff --git a/website/src/framework/text/text-with-highlights.component.ts b/website/src/framework/text/text-with-highlights.component.ts
index e53f60f5f..a71ec5cf8 100644
--- a/website/src/framework/text/text-with-highlights.component.ts
+++ b/website/src/framework/text/text-with-highlights.component.ts
@@ -6,6 +6,7 @@ import { ParagraphWithHighlights } from "typedb-web-schema";
@Component({
selector: "td-heading-with-highlights",
templateUrl: "heading-with-highlights.component.html",
+ styleUrls: ["text-with-highlights.component.scss"],
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [NgTemplateOutlet, NgStyle],
@@ -15,7 +16,6 @@ export class HeadingWithHighlightsComponent {
@Input("id") inputId?: string;
@Input() level: "h1" | "h2" | "h3" | "h4" = "h2";
@Input() value!: ParagraphWithHighlights;
- @Input() themeColorHex = "#02DAC9";
get id(): string {
return (
diff --git a/website/src/framework/tier-summary-table/tier-summary-table.component.html b/website/src/framework/tier-summary-table/tier-summary-table.component.html
new file mode 100644
index 000000000..85bea6b32
--- /dev/null
+++ b/website/src/framework/tier-summary-table/tier-summary-table.component.html
@@ -0,0 +1,23 @@
+
+
diff --git a/website/src/framework/tier-summary-table/tier-summary-table.component.scss b/website/src/framework/tier-summary-table/tier-summary-table.component.scss
new file mode 100644
index 000000000..060192d47
--- /dev/null
+++ b/website/src/framework/tier-summary-table/tier-summary-table.component.scss
@@ -0,0 +1,65 @@
+@use "media";
+
+table {
+ overflow: hidden;
+ table-layout: fixed;
+}
+
+col:first-of-type {
+ width: 359px;
+
+ @media (max-width: media.$max-width-tablet) {
+ width: 261px;
+ }
+
+ @media (max-width: media.$max-width-mobile) {
+ width: 114px;
+ }
+}
+
+thead {
+ background: var(--color-deep-purple);
+ font-weight: var(--font-weight-semi-bold);
+}
+
+th,
+td {
+ height: 80px;
+
+ @media (max-width: media.$max-width-mobile) {
+ tr:last-of-type & {
+ height: 48px;
+ }
+ }
+}
+
+th {
+ font-weight: inherit;
+ padding: 12px 24px;
+
+ @media (max-width: media.$max-width-mobile) {
+ padding: 8px 4px;
+
+ font-size: var(--font-size-p2);
+ line-height: var(--line-height-p2);
+ }
+
+ &:first-of-type {
+ text-align: start;
+
+ @media (max-width: media.$max-width-mobile) {
+ padding: 8px;
+ }
+ }
+}
+
+.ft-row-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 8px;
+
+ @media (max-width: media.$max-width-mobile) {
+ gap: 4px;
+ }
+}
diff --git a/website/src/framework/tier-summary-table/tier-summary-table.component.ts b/website/src/framework/tier-summary-table/tier-summary-table.component.ts
new file mode 100644
index 000000000..1329766e3
--- /dev/null
+++ b/website/src/framework/tier-summary-table/tier-summary-table.component.ts
@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
+import { TierSummaryTable } from "typedb-web-schema";
+import { RichTextComponent } from "../text/rich-text.component";
+
+@Component({
+ selector: "td-tier-summary-table",
+ templateUrl: "tier-summary-table.component.html",
+ styleUrls: ["./tier-summary-table.component.scss"],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ standalone: true,
+ imports: [
+ RichTextComponent
+ ],
+})
+export class TierSummaryTableComponent {
+ @Input() table!: TierSummaryTable;
+}
diff --git a/website/src/page/deployment/deployment-page.component.html b/website/src/page/deployment/deployment-page.component.html
index 43b545fab..64bd6b44e 100644
--- a/website/src/page/deployment/deployment-page.component.html
+++ b/website/src/page/deployment/deployment-page.component.html
@@ -1,16 +1,19 @@
@if (page$ | async; as page) {
diff --git a/website/src/page/deployment/deployment-page.component.ts b/website/src/page/deployment/deployment-page.component.ts
index 5f7c89f4b..050637e93 100644
--- a/website/src/page/deployment/deployment-page.component.ts
+++ b/website/src/page/deployment/deployment-page.component.ts
@@ -1,21 +1,14 @@
import { AsyncPipe } from "@angular/common";
-import { ChangeDetectionStrategy, Component, forwardRef, Input } from "@angular/core";
-
+import { ChangeDetectionStrategy, Component } from "@angular/core";
import { of } from "rxjs";
-import {
- DeploymentPage,
- deploymentPageSchemaName,
- SanityDataset,
- SanityDeploymentPage,
- TechnicolorBlock,
-} from "typedb-web-schema";
+import { DeploymentPage, deploymentPageSchemaName, SanityDataset, SanityDeploymentPage } from "typedb-web-schema";
import { ConclusionPanelComponent } from "../../framework/conclusion-panel/conclusion-panel.component";
import { FeatureTableComponent } from "../../framework/feature-table/feature-table.component";
import { LinkPanelsComponent } from "../../framework/link-panels/link-panels.component";
import { PageBackgroundComponent } from "../../framework/page-background/page-background.component";
import { ProductTableComponent } from "../../framework/product-table/product-table.component";
-import { TechnicolorBlockComponent } from "../../framework/technicolor-block/technicolor-block.component";
+import { SectionCoreComponent } from "../../framework/section/section-core.component";
import { PageComponentBase } from "../page-component-base";
@Component({
@@ -24,14 +17,9 @@ import { PageComponentBase } from "../page-component-base";
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [
- PageBackgroundComponent,
- forwardRef(() => DeploymentPageTechnicolorBlockComponent),
- ProductTableComponent,
- FeatureTableComponent,
- LinkPanelsComponent,
- ConclusionPanelComponent,
- AsyncPipe
-],
+ PageBackgroundComponent, ProductTableComponent, FeatureTableComponent,
+ LinkPanelsComponent, ConclusionPanelComponent, AsyncPipe, SectionCoreComponent
+ ],
})
export class DeploymentPageComponent extends PageComponentBase {
protected override getPage(data: SanityDataset) {
@@ -39,24 +27,3 @@ export class DeploymentPageComponent extends PageComponentBase {
return of(page ? new DeploymentPage(page, data) : null);
}
}
-
-@Component({
- selector: "td-deployment-page-technicolor-block",
- template: ` {
constructor(
diff --git a/website/src/page/events/events-page.component.ts b/website/src/page/events/events-page.component.ts
index 97327f1ae..da099dbd7 100644
--- a/website/src/page/events/events-page.component.ts
+++ b/website/src/page/events/events-page.component.ts
@@ -16,7 +16,7 @@ import { AspectRatioComponent } from "../../framework/aspect-ratio/aspect-ratio.
import { ButtonComponent } from "../../framework/button/button.component";
import { EventDatePipe } from "../../framework/date/event-date.pipe";
import { PageBackgroundComponent } from "../../framework/page-background/page-background.component";
-import { TitleBodyActionsSectionComponent } from "../../framework/section/title-body-actions-section.component";
+import { TitleBodyActionsSectionComponent } from "../../framework/intro-section/title-body-actions-section.component";
import { PlainTextPipe } from "../../framework/text/plain-text.pipe";
import { RichTextComponent } from "../../framework/text/rich-text.component";
import { PageComponentBase } from "../page-component-base";
@@ -28,25 +28,14 @@ import { PageComponentBase } from "../page-component-base";
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [
- PageBackgroundComponent,
- TitleBodyActionsSectionComponent,
- AspectRatioComponent,
- RichTextComponent,
- ButtonComponent,
- AsyncPipe,
- EventDatePipe,
- PlainTextPipe
-],
+ PageBackgroundComponent, TitleBodyActionsSectionComponent, AspectRatioComponent, RichTextComponent,
+ ButtonComponent, AsyncPipe, EventDatePipe, PlainTextPipe
+ ],
})
export class EventsPageComponent extends PageComponentBase {
constructor(
- private imageBuilder: ImageBuilder,
- activatedRoute: ActivatedRoute,
- analytics: AnalyticsService,
- router: Router,
- title: Title,
- idleMonitor: IdleMonitorService,
- metaTags: MetaTagsService,
+ private imageBuilder: ImageBuilder, activatedRoute: ActivatedRoute, analytics: AnalyticsService,
+ router: Router, title: Title, idleMonitor: IdleMonitorService, metaTags: MetaTagsService,
contentService: ContentService,
) {
super(activatedRoute, analytics, router, title, idleMonitor, metaTags, contentService);
diff --git a/website/src/page/features/features-page.component.html b/website/src/page/features/features-page.component.html
index b380507a4..2b265eaab 100644
--- a/website/src/page/features/features-page.component.html
+++ b/website/src/page/features/features-page.component.html
@@ -2,21 +2,15 @@
@if (page$ | async; as page) {
{
protected override getPage(data: SanityDataset) {
@@ -33,15 +27,3 @@ export class FeaturesPageComponent extends PageComponentBase {
return of(page ? new FeaturesPage(page, data) : null);
}
}
-
-@Component({
- selector: "td-features-page-technicolor-block",
- template: ` {
diff --git a/website/src/page/home/home-page.component.html b/website/src/page/home/home-page.component.html
index 2e0496e6a..dd5408acd 100644
--- a/website/src/page/home/home-page.component.html
+++ b/website/src/page/home/home-page.component.html
@@ -1,46 +1,35 @@
-
+
@if (page$ | async; as page) {
{
- readonly socialMediaLinks$!: Observable;
-
constructor(
activatedRoute: ActivatedRoute,
analytics: AnalyticsService,
@@ -63,9 +47,6 @@ export class HomePageComponent extends PageComponentBase {
contentService: ContentService,
) {
super(activatedRoute, analytics, router, title, idleMonitor, metaTags, contentService);
- this.socialMediaLinks$ = combineLatest([this.page$, contentService.data]).pipe(
- map(([page, data]) => page?.communitySection?.socialMedias.map((x) => new SocialMediaLink(x, data)) || []),
- );
}
protected override getPage(data: SanityDataset) {
@@ -79,46 +60,3 @@ export class HomePageComponent extends PageComponentBase {
Prism.highlightAll();
}
}
-
-@Component({
- selector: "td-home-page-technicolor-block",
- template: `;
readonly actions$: Observable;
@@ -74,18 +53,11 @@ export class LectureDetailsPageComponent implements OnInit {
private readonly _isSubmitting$ = new BehaviorSubject(false);
constructor(
- private router: Router,
- private activatedRoute: ActivatedRoute,
- private contentService: ContentService,
- private metaTags: MetaTagsService,
- private _formService: FormService,
- private _popupNotificationService: PopupNotificationService,
- private _title: Title,
- private _analytics: AnalyticsService,
- private _idleMonitor: IdleMonitorService,
- private _plainTextPipe: PlainTextPipe,
- private sanitizer: DomSanitizer,
- private dialog: MatDialog,
+ private router: Router, private activatedRoute: ActivatedRoute, private contentService: ContentService,
+ private metaTags: MetaTagsService, private _formService: FormService,
+ private _popupNotificationService: PopupNotificationService, private _title: Title,
+ private _analytics: AnalyticsService, private _idleMonitor: IdleMonitorService,
+ private _plainTextPipe: PlainTextPipe, private sanitizer: DomSanitizer, private dialog: MatDialog,
) {
this.isSubmitting$ = this._isSubmitting$.asObservable();
this.lecture$ = combineLatest([this.activatedRoute.paramMap, this.contentService.data]).pipe(
diff --git a/website/src/page/lectures/lectures-page.component.html b/website/src/page/lectures/lectures-page.component.html
index 9c59e7114..b9a238327 100644
--- a/website/src/page/lectures/lectures-page.component.html
+++ b/website/src/page/lectures/lectures-page.component.html
@@ -2,11 +2,7 @@
@if (page$ | async; as page) {
-
- }
+
+
+@if (illustrationIsCodeSnippet()) {
+
-
-
- @for (tab of tabs; track tab) {
-
diff --git a/website/src/framework/content-tabs/content-tabs.component.scss b/website/src/framework/content-tabs/content-tabs.component.scss
deleted file mode 100644
index c2bfb411a..000000000
--- a/website/src/framework/content-tabs/content-tabs.component.scss
+++ /dev/null
@@ -1,63 +0,0 @@
-@use "media";
-
-.ft-root {
- display: flex;
- flex-direction: column;
-}
-
-.ft-tabs-container {
- border: 1px solid var(--content-border-color);
- border-bottom: none;
- border-top-left-radius: var(--border-radius);
- border-top-right-radius: var(--border-radius);
- background: var(--color-deep-purple);
-}
-
-.ft-tabs {
- height: 52px;
- display: flex;
- flex-direction: row;
-
- @media (max-width: media.$max-width-mobile) {
- height: 48px;
- }
-}
-
-.ft-tab {
- flex: 1;
- display: flex;
- justify-content: center;
- align-items: center;
- text-align: center;
- padding-left: 12px;
- padding-right: 12px;
- white-space: nowrap;
-
- &:not(:first-child) {
- border-left: 1px solid var(--content-border-color);
- }
-
- @media (hover: hover) {
- &:hover h5 {
- color: var(--color-green);
- text-decoration: underline;
- }
- }
-}
-
-.ft-tab-selected,
-.ft-tab-selected h5 {
- color: var(--color-green);
- background: var(--color-purple);
-}
-
-.ft-graphic {
- flex: 1;
-}
-
-.ft-text-area {
- width: 366px;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
-}
diff --git a/website/src/framework/feature-fusion/feature-fusion.component.html b/website/src/framework/feature-fusion/feature-fusion.component.html
new file mode 100644
index 000000000..e1e1fc692
--- /dev/null
+++ b/website/src/framework/feature-fusion/feature-fusion.component.html
@@ -0,0 +1,9 @@
+@for (feature of features; track feature) {
+ @if ($index !== 0) {
+
- @for (tab of tabs; track tab) {
-
-
- {{ tab.title }}
- - } -+
+ }
+
+
+}
diff --git a/website/src/framework/feature-fusion/feature-fusion.component.scss b/website/src/framework/feature-fusion/feature-fusion.component.scss
new file mode 100644
index 000000000..4453c18a9
--- /dev/null
+++ b/website/src/framework/feature-fusion/feature-fusion.component.scss
@@ -0,0 +1,48 @@
+@use "media";
+@use "shapes";
+@import "mixins";
+
+:host {
+ display: flex;
+ flex-direction: row;
+ overflow: hidden;
+
+ @media (max-width: media.$max-width-mobile) {
+ flex-direction: column;
+ }
+}
+
+.ff-cell {
+ @include card-padding;
+
+ &.text-h2 {
+ line-height: 27px;
+
+ @media (max-width: media.$max-width-mobile) {
+ line-height: 15px;
+ margin-bottom: 4px;
+ }
+ }
+}
+
+.ff-cell + .ff-cell {
+ @media (min-width: media.$min-width-tablet) {
+ border-left: 1px solid var(--content-border-color);
+ }
+
+ @media (max-width: media.$max-width-mobile) {
+ border-top: 1px solid var(--content-border-color);
+ }
+}
+
+td-rich-text {
+ margin-top: 24px;
+
+ @media (min-width: media.$min-width-tablet) and (max-width: media.$max-width-tablet) {
+ margin-top: 16px;
+ }
+
+ @media (max-width: media.$max-width-mobile) {
+ margin-top: 12px;
+ }
+}
diff --git a/website/src/framework/feature-fusion/feature-fusion.component.ts b/website/src/framework/feature-fusion/feature-fusion.component.ts
new file mode 100644
index 000000000..381f9d8a2
--- /dev/null
+++ b/website/src/framework/feature-fusion/feature-fusion.component.ts
@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, HostBinding, Input } from "@angular/core";
+import { KeyPoint } from "typedb-web-schema";
+import { LinkDirective } from "../link/link.directive";
+import { RichTextComponent } from "../text/rich-text.component";
+
+@Component({
+ selector: "td-feature-fusion",
+ templateUrl: "./feature-fusion.component.html",
+ styleUrls: ["./feature-fusion.component.scss"],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ standalone: true,
+ imports: [RichTextComponent, LinkDirective],
+})
+export class FeatureFusionComponent {
+ @Input() features!: KeyPoint[];
+ @HostBinding("class") classes: Record{{ feature.title }}
+
+ @for (tab of tabs; track tab) {
+
+
+{{ tab.title }}
+{{ tab.subtitle }}
+ + } +
+
+
+
+
+
+
+
+ {{ tabs.primaryTab.title }}
+
+
+
+
+
+ @for (tab of tabs.secondaryTabs; track tab) {
+
diff --git a/website/src/framework/multi-comparison-tabs/multi-comparison-tabs.component.scss b/website/src/framework/multi-comparison-tabs/multi-comparison-tabs.component.scss
new file mode 100644
index 000000000..b383b37f7
--- /dev/null
+++ b/website/src/framework/multi-comparison-tabs/multi-comparison-tabs.component.scss
@@ -0,0 +1,107 @@
+@use "media";
+
+:host {
+ display: flex;
+ flex-direction: row;
+ gap: var(--card-padding);
+
+ @media (max-width: media.$max-width-mobile) {
+ flex-direction: column;
+ gap: 8px;
+ }
+}
+
+.mc-primary-area, .mc-secondary-area {
+ flex: 1;
+
+ @media (max-width: media.$max-width-mobile) {
+ width: 100%;
+ }
+}
+
+.mc-secondary-area {
+ display: flex;
+ flex-direction: column;
+}
+
+.mc-tabs-container {
+ border: 1px solid var(--content-border-color);
+ border-radius: var(--border-radius) var(--border-radius) 0 0;
+ border-bottom: none;
+ background: var(--color-deep-purple);
+}
+
+.mc-tabs {
+ height: 52px;
+ display: flex;
+ flex-direction: row;
+
+ @media (max-width: media.$max-width-mobile) {
+ height: 48px;
+ }
+}
+
+.mc-tab {
+ flex: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ padding-left: 12px;
+ padding-right: 12px;
+ white-space: nowrap;
+
+ &:not(:first-child) {
+ border-left: 1px solid var(--content-border-color);
+ }
+
+ @media (hover: hover) {
+ &:hover:not(.mc-tab-primary) h5 {
+ color: var(--color-green);
+ text-decoration: underline;
+ }
+ }
+}
+
+.mc-tab-selected,
+.mc-tab-selected h5 {
+ color: var(--color-green);
+ background: var(--color-purple);
+}
+
+.mc-tab-primary,
+.mc-tab-primary h5 {
+ color: var(--color-white);
+ font-weight: var(--font-weight-semi-bold);
+}
+
+td-pros-cons {
+ border-radius: 0;
+ border-bottom: none;
+ height: 84px;
+
+ @media (min-width: media.$min-width-tablet) and (max-width: media.$max-width-tablet) {
+ height: 76px;
+ }
+
+ @media (max-width: media.$max-width-mobile) {
+ height: 72px;
+ }
+}
+
+.mc-illustration-container {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+}
+
+$number-of-lines: 15;
+$number-of-lines-mobile: 13;
+
+td-illustration {
+ max-width: 100%;
+ height: calc(var(--font-size-code) * var(--line-height-code) * $number-of-lines + 2px);
+
+ @media (max-width: media.$max-width-mobile) {
+ height: calc(var(--font-size-code) * var(--line-height-code) * $number-of-lines-mobile + 2px);
+ }
+}
diff --git a/website/src/framework/multi-comparison-tabs/multi-comparison-tabs.component.ts b/website/src/framework/multi-comparison-tabs/multi-comparison-tabs.component.ts
new file mode 100644
index 000000000..ff5aea8f6
--- /dev/null
+++ b/website/src/framework/multi-comparison-tabs/multi-comparison-tabs.component.ts
@@ -0,0 +1,73 @@
+import { AsyncPipe, NgClass } from "@angular/common";
+import { ChangeDetectionStrategy, Component, ElementRef, HostBinding, Input, OnInit } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
+
+import { defer, filter, map, merge, Observable, shareReplay, startWith, Subject } from "rxjs";
+import { ContentProsConsTab, MultiComparisonTabs } from "typedb-web-schema";
+
+import { ContentPanelComponent } from "../content-panel/content-panel.component";
+import { IllustrationComponent } from "../illustration/illustration.component";
+import { ScrollShadowComponent } from "../scroll-shadow/scroll-shadow.component";
+import { RichTextComponent } from "../text/rich-text.component";
+import { sanitiseHtmlID } from "../util";
+import { ProsConsComponent } from "./pros-cons.component";
+
+@Component({
+ selector: "td-multi-comparison-tabs",
+ templateUrl: "multi-comparison-tabs.component.html",
+ styleUrls: ["multi-comparison-tabs.component.scss"],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ standalone: true,
+ imports: [ScrollShadowComponent, NgClass, ContentPanelComponent, AsyncPipe, RichTextComponent, ProsConsComponent, IllustrationComponent],
+})
+export class MultiComparisonTabsComponent implements OnInit {
+ @Input() tabs!: MultiComparisonTabs;
+ @Input() setWindowHashOnTabClick = false;
+ @HostBinding("class") clazz = "section";
+
+ readonly selectedSecondaryTab$: Observable
+ @for (tab of tabs.secondaryTabs; track tab) {
+
+
+ {{ tab.title }}
+ + } +
+
+ }
+
+
+
+ -
+ @for (proCon of prosAndCons; track proCon) {
+
-
+ @if (proCon.proConType === "pro") {
+
+ } @else { + + } + +
+ }
+
{{ panel.title }}
-
+
{{ panel.title }}
{{ panel.title }}
-
+
+
diff --git a/website/src/framework/section/section-core.component.scss b/website/src/framework/section/section-core.component.scss
new file mode 100644
index 000000000..8c013b6a8
--- /dev/null
+++ b/website/src/framework/section/section-core.component.scss
@@ -0,0 +1,126 @@
+@use "colors";
+@use "media";
+
+@mixin graphic-line-gradient($base-color) {
+ background: linear-gradient(
+ transparent 0%,
+ rgba($base-color, 0.1) 7%,
+ $base-color 20%,
+ $base-color 80%,
+ rgba($base-color, 0.1) 93%,
+ transparent 100%
+ );
+}
+
+:host {
+ &:first-of-type {
+ margin-top: 120px;
+
+ &.tb-level-h1 {
+ margin-top: 256px;
+ }
+
+ @media (max-width: media.$max-width-mobile) {
+ margin-top: 64px;
+
+ &.tb-level-h1 {
+ margin-top: 116px;
+ }
+ }
+ }
+
+ &:not(:first-of-type) {
+ padding-top: 144px;
+
+ @media (max-width: media.$max-width-mobile) {
+ padding-top: 64px;
+ }
+ }
+}
+
+.td-background {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: calc(var(--icon-size) / 2 - 1px);
+ width: 3px;
+ z-index: -1;
+
+ @media (max-width: media.$max-width-mobile) {
+ width: 2px;
+ }
+}
+
+.td-main {
+ display: block;
+ padding-bottom: 64px;
+
+ @media (max-width: media.$max-width-tablet) {
+ padding-bottom: 56px;
+ }
+
+ @media (max-width: media.$max-width-mobile) {
+ padding-bottom: 24px;
+ }
+
+ td-heading-with-highlights, td-rich-text {
+ max-width: 660px;
+ }
+}
+
+td-heading-with-highlights {
+ display: block;
+ margin: 24px 0;
+
+ @media (max-width: media.$max-width-mobile) {
+ margin: 16px 0;
+ }
+}
+
+.td-section-core-body {
+ margin-top: 40px;
+}
+
+.td-actions-left .td-section-core-body {
+ display: flex;
+ gap: 40px;
+ flex-direction: row-reverse;
+ align-items: center;
+ width: fit-content;
+
+ td-actions {
+ margin-top: 0;
+ }
+}
+
+.td-actions-right .td-section-core-body {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+
+ td-actions {
+ margin-top: 0;
+ }
+}
+
+.td-actions-afterContent td-actions {
+ justify-content: center;
+}
+
+td-rich-text ::ng-deep {
+ > h1:first-child, > h2:first-child, > h3:first-child, > h4:first-child, > h5:first-child, > h6:first-child {
+ margin-top: 0.5em;
+ }
+}
+
+@media (max-width: media.$max-width-mobile) {
+ td-heading-with-highlights,
+ td-rich-text {
+ padding-right: calc(var(--icon-size) / 2 - 1px);
+ }
+
+ td-actions {
+ padding-right: var(--graphic-area-width);
+ }
+}
diff --git a/website/src/framework/section/section-core.component.ts b/website/src/framework/section/section-core.component.ts
new file mode 100644
index 000000000..2a8986d39
--- /dev/null
+++ b/website/src/framework/section/section-core.component.ts
@@ -0,0 +1,31 @@
+
+import { ChangeDetectionStrategy, Component, HostBinding, Input } from "@angular/core";
+
+import { SectionBase } from "typedb-web-schema";
+
+import { ActionsComponent } from "../actions/actions.component";
+import { LinkDirective } from "../link/link.directive";
+import { OrganisationLogosComponent } from "../organisation-logos/organisation-logos.component";
+import { RichTextComponent } from "../text/rich-text.component";
+import { HeadingWithHighlightsComponent } from "../text/text-with-highlights.component";
+
+@Component({
+ selector: "td-section-core",
+ templateUrl: "section-core.component.html",
+ styleUrls: ["./section-core.component.scss"],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ standalone: true,
+ imports: [
+ LinkDirective, HeadingWithHighlightsComponent, RichTextComponent, ActionsComponent, OrganisationLogosComponent
+ ],
+})
+export class SectionCoreComponent {
+ @Input({ required: true }) section!: SectionBase;
+ @Input() level: "h1" | "h2" = "h2";
+ @Input() actionsPosition: "left" | "right" | "beforeContent" | "afterContent" = "right";
+
+ @HostBinding("class")
+ get clazz(): string {
+ return `section tb-level-${this.level}`;
+ }
+}
diff --git a/website/src/framework/technicolor-block/technicolor-block.component.html b/website/src/framework/technicolor-block/technicolor-block.component.html
deleted file mode 100644
index a91839c67..000000000
--- a/website/src/framework/technicolor-block/technicolor-block.component.html
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
+ @if (section.body) {
+
+
-
-
diff --git a/website/src/framework/technicolor-block/technicolor-block.component.scss b/website/src/framework/technicolor-block/technicolor-block.component.scss
deleted file mode 100644
index c706af9eb..000000000
--- a/website/src/framework/technicolor-block/technicolor-block.component.scss
+++ /dev/null
@@ -1,232 +0,0 @@
-@use "colors";
-@use "media";
-
-@mixin graphic-line-gradient($base-color) {
- background: linear-gradient(
- transparent 0%,
- rgba($base-color, 0.1) 7%,
- $base-color 20%,
- $base-color 80%,
- rgba($base-color, 0.1) 93%,
- transparent 100%
- );
-}
-
-:host {
- --icon-size: 72px;
- --halo-size: 104px;
- --graphic-area-width: 120px;
- display: block;
- position: relative;
-
- @media (max-width: media.$max-width-mobile) {
- --icon-size: 36px;
- --halo-size: 52px;
- --graphic-area-width: 52px;
- }
-
- &.tb-no-upper {
- margin-top: 120px;
-
- &.tb-level-h1 {
- margin-top: 256px;
- }
-
- @media (max-width: media.$max-width-mobile) {
- margin-top: 64px;
-
- &.tb-level-h1 {
- margin-top: 116px;
- }
- }
- }
-
- &:not(.tb-no-upper) .tb-main {
- padding-top: 144px;
-
- @media (max-width: media.$max-width-mobile) {
- padding-top: 64px;
- }
- }
-
- &.tb-green {
- .tb-icon-area {
- color: var(--color-green);
- }
- .tb-background {
- @include graphic-line-gradient(colors.$green);
- }
- }
-
- &.tb-pink {
- .tb-icon-area {
- color: var(--color-secondary-pink);
- }
- .tb-background {
- @include graphic-line-gradient(colors.$secondary-pink);
- }
- }
-
- &.tb-yellow {
- .tb-icon-area {
- color: var(--color-secondary-yellow);
- }
- .tb-background {
- @include graphic-line-gradient(colors.$secondary-yellow);
- }
- }
-
- &.tb-no-upper .tb-background {
- top: 35px;
- }
-
- &.tb-long-upper .tb-background {
- top: -100px;
- }
-}
-
-.tb-background {
- position: absolute;
- top: 0;
- bottom: 0;
- left: calc(var(--icon-size) / 2 - 1px);
- width: 3px;
- z-index: -1;
-
- @media (max-width: media.$max-width-mobile) {
- width: 2px;
- }
-}
-
-.tb-main {
- display: grid;
- grid-template-columns: var(--graphic-area-width) minmax(auto, 660px);
- padding-bottom: 64px;
-
- @media (max-width: media.$max-width-tablet) {
- padding-bottom: 56px;
- }
-
- @media (max-width: media.$max-width-mobile) {
- padding-bottom: 24px;
- grid-template-columns: var(--graphic-area-width) auto;
- }
-}
-
-.tb-icon-area {
- position: relative;
-
- .tb-icon-bg-paper,
- .tb-icon-bg-halo,
- .tb-icon {
- top: 0;
- bottom: 0;
- margin: auto 0;
- }
-
- .tb-icon-bg-paper {
- position: absolute;
- width: var(--halo-size);
- height: var(--halo-size);
- margin-left: -16px;
- border-radius: var(--border-radius);
- filter: blur(8px);
- background: var(--color-black-purple);
- }
-
- .tb-icon-bg-halo {
- display: block;
- color: unset;
- position: absolute;
- width: var(--halo-size);
- height: var(--halo-size);
- margin-left: -16px;
- border-radius: 50%;
- filter: blur(15px);
- transform: translate3d(0, 0, 0); /* patch for Safari ignoring border-radius on hover */
- opacity: 0.15;
- background: currentColor;
- z-index: 4;
- transition: opacity 200ms ease;
-
- &:hover {
- opacity: 0.3;
- }
- }
-
- .tb-icon {
- position: absolute;
- width: var(--icon-size);
- height: var(--icon-size);
- z-index: 3;
- }
-}
-
-.tb-graphic-dot {
- display: none !important; // temporary patch to hide dot pending QA review
- position: absolute;
- width: 9px;
- height: 9px;
- background: currentColor;
- border-radius: 50%;
- top: 0;
- opacity: 0;
- left: -3px;
- pointer-events: none;
-
- @media (max-width: media.$max-width-mobile) {
- left: -2px;
- width: 6px;
- height: 6px;
- }
-
- .tb-graphic-dot-blur {
- position: absolute;
- top: -8px;
- left: -8px;
- width: 25px;
- height: 25px;
- background: currentColor;
- border-radius: 50%;
- filter: blur(15px);
-
- @media (max-width: media.$max-width-tablet) {
- top: -7px;
- left: -7px;
- width: 23px;
- height: 23px;
- }
-
- @media (max-width: media.$max-width-mobile) {
- top: -5px;
- left: -5px;
- width: 16px;
- height: 16px;
- }
- }
-}
-
-td-heading-with-highlights {
- display: block;
- margin: 24px 0;
-
- @media (max-width: media.$max-width-mobile) {
- margin: 16px 0;
- }
-}
-
-td-organisation-logos {
- display: block;
- margin-top: 40px;
-}
-
-@media (max-width: media.$max-width-mobile) {
- td-heading-with-highlights,
- td-rich-text {
- padding-right: calc(var(--icon-size) / 2 - 1px);
- }
-
- td-actions {
- padding-right: var(--graphic-area-width);
- }
-}
diff --git a/website/src/framework/technicolor-block/technicolor-block.component.ts b/website/src/framework/technicolor-block/technicolor-block.component.ts
deleted file mode 100644
index 8f80da6a1..000000000
--- a/website/src/framework/technicolor-block/technicolor-block.component.ts
+++ /dev/null
@@ -1,142 +0,0 @@
-
-import { ChangeDetectionStrategy, Component, HostBinding, Input } from "@angular/core";
-
-import { Organisation, TechnicolorBlock } from "typedb-web-schema";
-
-import { ActionsComponent } from "../actions/actions.component";
-import { LinkDirective } from "../link/link.directive";
-import { OrganisationLogosComponent } from "../organisation-logos/organisation-logos.component";
-import { RichTextComponent } from "../text/rich-text.component";
-import { HeadingWithHighlightsComponent } from "../text/text-with-highlights.component";
-
-@Component({
- selector: "td-technicolor-block",
- templateUrl: "technicolor-block.component.html",
- styleUrls: ["./technicolor-block.component.scss"],
- changeDetection: ChangeDetectionStrategy.OnPush,
- standalone: true,
- imports: [
- LinkDirective, HeadingWithHighlightsComponent, RichTextComponent, ActionsComponent, OrganisationLogosComponent
- ],
-})
-export class TechnicolorBlockComponent {
- @Input() block!: TechnicolorBlock;
- @Input() index!: number;
- @Input() level: "h1" | "h2" = "h2";
- @Input() @HostBinding("class.tb-no-upper") noUpperLine?: boolean;
- @Input() noBody?: boolean;
- @Input() @HostBinding("class.tb-long-upper") longUpperLine?: boolean;
- @Input() organisationLogos?: Organisation[];
-
- // private readonly opacityChangeDistance = 15;
-
- // constructor(
- // private destroyRef: DestroyRef,
- // private elementRef: ElementRef
- @if (block.body && !noBody) {
-
-
-
}
@case ('h2') {
-
}
@case ('h3') {
-
}
@case ('h4') {
-
}
}
| {{ header }} | + } +
|---|
@if (page.introSection) {
-
+
}
@if (page.cloudSection) {
-
}
diff --git a/website/src/page/home/home-page.component.ts b/website/src/page/home/home-page.component.ts
index fa2108a84..e831ea8a6 100644
--- a/website/src/page/home/home-page.component.ts
+++ b/website/src/page/home/home-page.component.ts
@@ -1,34 +1,27 @@
import { AsyncPipe } from "@angular/common";
-import { ChangeDetectionStrategy, Component, forwardRef, Input } from "@angular/core";
+import { ChangeDetectionStrategy, Component } from "@angular/core";
import { Title } from "@angular/platform-browser";
import { ActivatedRoute, Router } from "@angular/router";
-
import { IdleMonitorService } from "@scullyio/ng-lib";
import Prism from "prismjs";
-import { combineLatest, map, Observable, of } from "rxjs";
-import {
- HomePage,
- homePageSchemaName,
- Organisation,
- SanityDataset,
- SanityHomePage,
- SocialMediaLink,
-} from "typedb-web-schema";
-import { TechnicolorBlock } from "typedb-web-schema";
-
-import { AnalyticsService } from "src/service/analytics.service";
-import { ContentService } from "src/service/content.service";
-import { MetaTagsService } from "src/service/meta-tags.service";
+import { of } from "rxjs";
+import { HomePage, homePageSchemaName, SanityDataset, SanityHomePage } from "typedb-web-schema";
import { ConclusionPanelComponent } from "../../framework/conclusion-panel/conclusion-panel.component";
-import { ContentTabsComponent } from "../../framework/content-tabs/content-tabs.component";
+import { KeyPointsShowcaseComponent } from "../../framework/key-points-showcase/key-points-showcase.component";
import { FeatureGridComponent } from "../../framework/feature-grid/feature-grid.component";
import { KeyPointTableComponent } from "../../framework/key-point/key-point.component";
import { LinkPanelsComponent, ResourcePanelsComponent } from "../../framework/link-panels/link-panels.component";
+import { MultiComparisonTabsComponent } from "../../framework/multi-comparison-tabs/multi-comparison-tabs.component";
import { PageBackgroundComponent } from "../../framework/page-background/page-background.component";
+import { BrochuresComponent } from "../../framework/brochures/brochures.component";
+import { ProductTableComponent } from "../../framework/product-table/product-table.component";
+import { SectionCoreComponent } from "../../framework/section/section-core.component";
import { SocialMediaPanelsComponent } from "../../framework/social-media/social-media-panels.component";
-import { TechnicolorBlockComponent } from "../../framework/technicolor-block/technicolor-block.component";
import { TestimonialsCarouselComponent } from "../../framework/testimonials-carousel/testimonials-carousel.component";
+import { AnalyticsService } from "../../service/analytics.service";
+import { ContentService } from "../../service/content.service";
+import { MetaTagsService } from "../../service/meta-tags.service";
import { PageComponentBase } from "../page-component-base";
@Component({
@@ -37,22 +30,13 @@ import { PageComponentBase } from "../page-component-base";
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [
- PageBackgroundComponent,
- forwardRef(() => HomePageTechnicolorBlockComponent),
- ContentTabsComponent,
- ResourcePanelsComponent,
- LinkPanelsComponent,
- FeatureGridComponent,
- KeyPointTableComponent,
- SocialMediaPanelsComponent,
- TestimonialsCarouselComponent,
- ConclusionPanelComponent,
- AsyncPipe
-],
+ PageBackgroundComponent, KeyPointsShowcaseComponent, ResourcePanelsComponent, LinkPanelsComponent,
+ FeatureGridComponent, KeyPointTableComponent, SocialMediaPanelsComponent, TestimonialsCarouselComponent,
+ ConclusionPanelComponent, AsyncPipe, MultiComparisonTabsComponent, BrochuresComponent, ProductTableComponent,
+ SectionCoreComponent
+ ],
})
export class HomePageComponent extends PageComponentBase
-
@if (!page?.introSection?.featuredLecture) {
@@ -38,18 +34,18 @@
page.featuredLecturesSection.featuredLectures &&
page.featuredLecturesSection.featuredLectures.length
) {
-
page.featuredLecturesSection.featuredLectures &&
page.featuredLecturesSection.featuredLectures.length
) {
-
@for (lecture of allLectures$ | async; track lecture) {
-
- ![]()
+ ![]()
{{ lecture.title | plainText }}
diff --git a/website/src/page/lectures/lectures-page.component.ts b/website/src/page/lectures/lectures-page.component.ts
index 00054833d..f883e8830 100644
--- a/website/src/page/lectures/lectures-page.component.ts
+++ b/website/src/page/lectures/lectures-page.component.ts
@@ -7,13 +7,7 @@ import { ActivatedRoute, Router } from "@angular/router";
import { IdleMonitorService } from "@scullyio/ng-lib";
import { map, Observable, of } from "rxjs";
import {
- Lecture,
- lectureSchemaName,
- LecturesPage,
- lecturesPageSchemaName,
- SanityDataset,
- SanityLecture,
- SanityLecturesPage,
+ Lecture, lectureSchemaName, LecturesPage, lecturesPageSchemaName, SanityDataset, SanityLecture, SanityLecturesPage,
} from "typedb-web-schema";
import { MetaTagsService } from "src/service/meta-tags.service";
@@ -24,8 +18,8 @@ import { EventDurationPipe } from "../../framework/date/event-duration.pipe";
import { OrdinalDatePipe } from "../../framework/date/ordinal-date.pipe";
import { LecturePanelsComponent } from "../../framework/link-panels/link-panels.component";
import { PageBackgroundComponent } from "../../framework/page-background/page-background.component";
-import { TitleBodyActionsSectionComponent } from "../../framework/section/title-body-actions-section.component";
-import { TechnicolorBlockComponent } from "../../framework/technicolor-block/technicolor-block.component";
+import { TitleBodyActionsSectionComponent } from "../../framework/intro-section/title-body-actions-section.component";
+import { SectionCoreComponent } from "../../framework/section/section-core.component";
import { PlainTextPipe } from "../../framework/text/plain-text.pipe";
import { RichTextComponent } from "../../framework/text/rich-text.component";
import { AnalyticsService } from "../../service/analytics.service";
@@ -38,32 +32,17 @@ import { PageComponentBase } from "../page-component-base";
styleUrls: ["./lectures-page.component.scss"],
standalone: true,
imports: [
- PageBackgroundComponent,
- TitleBodyActionsSectionComponent,
- AspectRatioComponent,
- RichTextComponent,
- ButtonComponent,
- TechnicolorBlockComponent,
- LecturePanelsComponent,
- MatIconModule,
- AsyncPipe,
- DatePipe,
- EventDurationPipe,
- OrdinalDatePipe,
- PlainTextPipe
-],
+ PageBackgroundComponent, TitleBodyActionsSectionComponent, AspectRatioComponent, RichTextComponent,
+ ButtonComponent, SectionCoreComponent, LecturePanelsComponent, MatIconModule, AsyncPipe, DatePipe,
+ EventDurationPipe, OrdinalDatePipe, PlainTextPipe
+ ],
})
export class LecturesPageComponent extends PageComponentBase {
readonly allLectures$: Observable;
constructor(
- activatedRoute: ActivatedRoute,
- analytics: AnalyticsService,
- router: Router,
- title: Title,
- idleMonitor: IdleMonitorService,
- metaTags: MetaTagsService,
- contentService: ContentService,
+ activatedRoute: ActivatedRoute, analytics: AnalyticsService, router: Router, title: Title,
+ idleMonitor: IdleMonitorService, metaTags: MetaTagsService, contentService: ContentService,
) {
super(activatedRoute, analytics, router, title, idleMonitor, metaTags, contentService);
this.allLectures$ = contentService.data.pipe(
diff --git a/website/src/page/legal/legal-document.component.ts b/website/src/page/legal/legal-document.component.ts
index ed590323f..041f860e3 100644
--- a/website/src/page/legal/legal-document.component.ts
+++ b/website/src/page/legal/legal-document.component.ts
@@ -27,12 +27,8 @@ export class LegalDocumentComponent implements OnInit {
document$!: Observable;
constructor(
- private router: Router,
- private activatedRoute: ActivatedRoute,
- private content: ContentService,
- private metaTags: MetaTagsService,
- private title: Title,
- private _analytics: AnalyticsService,
+ private router: Router, private activatedRoute: ActivatedRoute, private content: ContentService,
+ private metaTags: MetaTagsService, private title: Title, private _analytics: AnalyticsService,
private _idleMonitor: IdleMonitorService,
) {}
diff --git a/website/src/page/papers/paper-details-page.component.ts b/website/src/page/papers/paper-details-page.component.ts
index 6c44b29f4..5204d0e13 100644
--- a/website/src/page/papers/paper-details-page.component.ts
+++ b/website/src/page/papers/paper-details-page.component.ts
@@ -36,10 +36,7 @@ import { PageComponentBase } from "../page-component-base";
})
export class PaperDetailsPageComponent extends PageComponentBase {
readonly allPapersHeading = new ParagraphWithHighlights({
- spans: [
- { text: "TypeDB ", highlight: false },
- { text: "Papers", highlight: true },
- ],
+ spans: [{ text: "TypeDB ", highlight: false }, { text: "Papers", highlight: true }],
});
readonly isSubmitting$: Observable;
private readonly _isSubmitting$ = new BehaviorSubject(false);
diff --git a/website/src/page/papers/papers-page.component.html b/website/src/page/papers/papers-page.component.html
index f000c7d38..82ade13d0 100644
--- a/website/src/page/papers/papers-page.component.html
+++ b/website/src/page/papers/papers-page.component.html
@@ -2,11 +2,7 @@
@if (page$ | async; as page) {
- {{ page.featuredPaper.title | plainText }}
diff --git a/website/src/page/papers/papers-page.component.ts b/website/src/page/papers/papers-page.component.ts
index 44d55b8e8..f3b34c32b 100644
--- a/website/src/page/papers/papers-page.component.ts
+++ b/website/src/page/papers/papers-page.component.ts
@@ -3,19 +3,13 @@ import { ChangeDetectionStrategy, Component } from "@angular/core";
import { of } from "rxjs";
import {
- ButtonStyle,
- LinkButton,
- SanityDataset,
- SanityPapersPage,
- Paper,
- PapersPage,
- papersPageSchemaName,
+ ButtonStyle, LinkButton, SanityDataset, SanityPapersPage, Paper, PapersPage, papersPageSchemaName,
} from "typedb-web-schema";
import { AspectRatioComponent } from "../../framework/aspect-ratio/aspect-ratio.component";
import { ButtonComponent } from "../../framework/button/button.component";
import { PageBackgroundComponent } from "../../framework/page-background/page-background.component";
-import { TitleBodyActionsSectionComponent } from "../../framework/section/title-body-actions-section.component";
+import { TitleBodyActionsSectionComponent } from "../../framework/intro-section/title-body-actions-section.component";
import { PlainTextPipe } from "../../framework/text/plain-text.pipe";
import { RichTextComponent } from "../../framework/text/rich-text.component";
import { PageComponentBase } from "../page-component-base";
diff --git a/website/src/page/philosophy/philosophy-page.component.html b/website/src/page/philosophy/philosophy-page.component.html
index 572d0dc48..59e0d714b 100644
--- a/website/src/page/philosophy/philosophy-page.component.html
+++ b/website/src/page/philosophy/philosophy-page.component.html
@@ -8,11 +8,11 @@
[actions]="page.introSection.actions"
/>
@for (section of page.coreSections; track section; let idx = $index) {
- PhilosophyPageTechnicolorBlockComponent),
- PublicationPanelComponent,
- ConclusionPanelComponent,
- AsyncPipe
-],
+ PageBackgroundComponent, TitleBodyActionsSectionComponent, PublicationPanelComponent, ConclusionPanelComponent,
+ AsyncPipe
+ ],
})
export class PhilosophyPageComponent extends PageComponentBase {
protected override getPage(data: SanityDataset) {
@@ -40,22 +32,3 @@ export class PhilosophyPageComponent extends PageComponentBase {
return of(page ? new PhilosophyPage(page, data) : null);
}
}
-
-@Component({
- selector: "td-philosophy-page-technicolor-block",
- template: ` {
protected override getPage(data: SanityDataset) {
@@ -39,38 +25,3 @@ export class ServicesPageComponent extends PageComponentBase {
return of(page ? new ServicesPage(page, data) : null);
}
}
-
-@Component({
- selector: "td-services-page-technicolor-block",
- template: `
diff --git a/website/src/page/solutions/solution-page.component.ts b/website/src/page/solutions/solution-page.component.ts
index c00f6d87e..5668be947 100644
--- a/website/src/page/solutions/solution-page.component.ts
+++ b/website/src/page/solutions/solution-page.component.ts
@@ -1,8 +1,7 @@
-import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
+import { ChangeDetectionStrategy, Component } from "@angular/core";
import { map } from "rxjs";
import { SanityDataset, SanitySolutionPage, SolutionPage, solutionPageSchemaName } from "typedb-web-schema";
-import { TechnicolorBlock } from "typedb-web-schema";
import { PageComponentBase } from "../page-component-base";
@@ -28,35 +27,3 @@ export class SolutionPageComponent extends PageComponentBase {
this.title.setTitle(`TypeDB Solutions: ${page.title}`);
}
}
-
-@Component({
- selector: "td-solution-page-technicolor-block",
- template: ` {
protected override getPage(data: SanityDataset) {
@@ -36,39 +29,3 @@ export class SupportPageComponent extends PageComponentBase {
return of(page ? new SupportPage(page, data) : null);
}
}
-
-@Component({
- selector: "td-support-page-technicolor-block",
- template: ` {
readonly isSubmitting$: Observable;
diff --git a/website/src/page/why/why-page.component.html b/website/src/page/why/why-page.component.html
new file mode 100644
index 000000000..2df406c05
--- /dev/null
+++ b/website/src/page/why/why-page.component.html
@@ -0,0 +1,18 @@
+
+ @if (page$ | async; as page) {
+
+
diff --git a/website/src/page/why/why-page.component.scss b/website/src/page/why/why-page.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/website/src/page/why/why-page.component.ts b/website/src/page/why/why-page.component.ts
new file mode 100644
index 000000000..e9afda32a
--- /dev/null
+++ b/website/src/page/why/why-page.component.ts
@@ -0,0 +1,31 @@
+import { AsyncPipe } from "@angular/common";
+import { ChangeDetectionStrategy, Component } from "@angular/core";
+
+import { of } from "rxjs";
+import { SanityDataset, SanityWhyPage, WhyPage, whyPageSchemaName } from "typedb-web-schema";
+
+import { ConclusionPanelComponent } from "../../framework/conclusion-panel/conclusion-panel.component";
+import { FeatureFusionComponent } from "../../framework/feature-fusion/feature-fusion.component";
+import { FeatureGridComponent } from "../../framework/feature-grid/feature-grid.component";
+import { PageBackgroundComponent } from "../../framework/page-background/page-background.component";
+import { TitleBodyActionsSectionComponent } from "../../framework/intro-section/title-body-actions-section.component";
+import { SectionCoreComponent } from "../../framework/section/section-core.component";
+import { PageComponentBase } from "../page-component-base";
+
+@Component({
+ selector: "td-why-page",
+ templateUrl: "./why-page.component.html",
+ styleUrls: ["./why-page.component.scss"],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ standalone: true,
+ imports: [
+ PageBackgroundComponent, TitleBodyActionsSectionComponent, FeatureGridComponent, ConclusionPanelComponent,
+ AsyncPipe, FeatureFusionComponent, SectionCoreComponent
+ ],
+})
+export class WhyPageComponent extends PageComponentBase {
+ protected override getPage(data: SanityDataset) {
+ const page = data.getDocumentByID(whyPageSchemaName);
+ return of(page ? new WhyPage(page, data) : null);
+ }
+}
diff --git a/website/src/service/content.service.ts b/website/src/service/content.service.ts
index ee6435678..7ee6e093d 100644
--- a/website/src/service/content.service.ts
+++ b/website/src/service/content.service.ts
@@ -7,7 +7,7 @@ import {
BehaviorSubject, combineLatest, concat, filter, first, iif, map, Observable, of, ReplaySubject, shareReplay,
switchMap,
} from "rxjs";
-import { FooterData, footerQuery, SANITY_QUERY_URL, SANITY_TOKEN, TopbarData, topbarQuery } from "typedb-web-common/lib";
+import { FooterData, footerQuery, SANITY_TOKEN, TopbarData, topbarQuery } from "typedb-web-common/lib";
import {
ApplicationArticle, applicationArticleSchemaName, Article, articleFromApi, associateBy, BlogCategoryID, BlogFilter,
blogNullFilter, BlogPost, blogPostSchemaName, FundamentalArticle, fundamentalArticleSchemaName, groupBy,
@@ -20,6 +20,7 @@ import { environment } from "src/environment/environment";
import { WordpressService } from "./wordpress.service";
const postsApiUrl = `https://public-api.wordpress.com/rest/v1.1/sites/typedb.wordpress.com/posts`;
+const SANITY_QUERY_URL = `https://xndl14mc.api.sanity.io/v2021-10-21/data/query/crisper-messaging`;
@Injectable({
providedIn: "root",
diff --git a/website/src/service/image-builder.service.ts b/website/src/service/image-builder.service.ts
index 76828955b..0c73f4955 100644
--- a/website/src/service/image-builder.service.ts
+++ b/website/src/service/image-builder.service.ts
@@ -3,7 +3,7 @@ import { Injectable } from "@angular/core";
import imageUrlBuilder from "@sanity/image-url";
const SANITY_PROJECT_ID = "xndl14mc";
-const SANITY_DATASET = "production";
+const SANITY_DATASET = "crisper-messaging";
@Injectable({
providedIn: "root",
diff --git a/website/src/styles/styles.scss b/website/src/styles/styles.scss
index 57d6f02fa..23daaaafe 100644
--- a/website/src/styles/styles.scss
+++ b/website/src/styles/styles.scss
@@ -166,6 +166,10 @@ table {
margin-top: var(--subtitle-margin);
}
+.text-margin-s {
+ margin-top: var(--text-margin-s);
+}
+
.section-background-solid {
background-color: var(--color-black-purple);
}
diff --git a/website/src/website-routes.ts b/website/src/website-routes.ts
index fb8078b09..6a884169e 100644
--- a/website/src/website-routes.ts
+++ b/website/src/website-routes.ts
@@ -5,7 +5,8 @@ export const staticPageSchemas = [
{ path: "events", schemaName: "eventsPage" },
{ path: "lectures", schemaName: "lecturesPage" },
{ path: "features", schemaName: "featuresPage" },
- { path: "philosophy", schemaName: "philosophyPage" },
+ { path: "why", schemaName: "whyPage" },
+ // { path: "philosophy", schemaName: "philosophyPage" },
{ path: "learn", schemaName: "learningCenter" },
{ path: "fundamentals", schemaName: "fundamentalsPage" },
{ path: "request-tech-talk", schemaName: "requestTechTalkPage" },
@@ -13,10 +14,10 @@ export const staticPageSchemas = [
{ path: "papers", schemaName: "papersPage" },
] as const satisfies readonly StaticPage[];
-export const genericPageSchemas = [
- { path: "cloud", documentID: "cloudPage" },
- { path: "studio", documentID: "studioPage" },
-] as const satisfies readonly GenericPage[];
+// export const genericPageSchemas = [
+// { path: "cloud", documentID: "cloudPage" },
+// { path: "studio", documentID: "studioPage" },
+// ] as const satisfies readonly GenericPage[];
export const dynamicPageSchemas = [
{ path: "applications/:slug", schemaName: "applicationArticle" },
@@ -35,10 +36,10 @@ interface StaticPage {
schemaName: string;
}
-interface GenericPage {
- path: string;
- documentID: string;
-}
+// interface GenericPage {
+// path: string;
+// documentID: string;
+// }
interface DynamicPageWithSchema {
path: `${string}:slug${string}`;
diff --git a/website/src/website-routing.module.ts b/website/src/website-routing.module.ts
index 6fdc8b506..d169c9def 100644
--- a/website/src/website-routing.module.ts
+++ b/website/src/website-routing.module.ts
@@ -9,19 +9,20 @@ import { EventDetailsPageComponent } from "./page/events/event-details-page.comp
import { EventsPageComponent } from "./page/events/events-page.component";
import { FallbackPageComponent } from "./page/fallback/fallback-page.component";
import { FeaturesPageComponent } from "./page/features/features-page.component";
-import { GenericPageComponent } from "./page/generic/generic-page.component";
+// import { GenericPageComponent } from "./page/generic/generic-page.component";
import { HomePageComponent } from "./page/home/home-page.component";
import { LearningArticleComponent } from "./page/resource-hub/learning-article.component";
import { LectureDetailsPageComponent } from "./page/lectures/lecture-details-page.component";
import { LecturesPageComponent } from "./page/lectures/lectures-page.component";
import { LegalDocumentComponent } from "./page/legal/legal-document.component";
-import { PhilosophyPageComponent } from "./page/philosophy/philosophy-page.component";
+// import { PhilosophyPageComponent } from "./page/philosophy/philosophy-page.component";
import { ResourceHubComponent } from "./page/resource-hub/resource-hub.component";
import { SupportPageComponent } from "./page/support/support-page.component";
import { RequestTechTalkPageComponent } from "./page/tech-talk/request-tech-talk-page.component";
import { PaperDetailsPageComponent } from "./page/papers/paper-details-page.component";
import { PapersPageComponent } from "./page/papers/papers-page.component";
-import { dynamicPageSchemas, genericPageSchemas, staticPageSchemas } from "./website-routes";
+import { WhyPageComponent } from "./page/why/why-page.component";
+import { dynamicPageSchemas, staticPageSchemas } from "./website-routes";
const staticPages: Record<(typeof staticPageSchemas)[number]["path"], Route> = {
"": { component: HomePageComponent },
@@ -32,16 +33,17 @@ const staticPages: Record<(typeof staticPageSchemas)[number]["path"], Route> = {
events: { component: EventsPageComponent, title: "TypeDB Events" },
features: { component: FeaturesPageComponent, title: "TypeDB Features" },
lectures: { component: LecturesPageComponent, title: "TypeDB Lectures" },
- philosophy: { component: PhilosophyPageComponent, title: "TypeDB Philosophy" },
+ why: { component: WhyPageComponent, title: "Why choose TypeDB?" },
+ // philosophy: { component: PhilosophyPageComponent, title: "TypeDB Philosophy" },
support: { component: SupportPageComponent, title: "TypeDB Support" },
learn: { component: ResourceHubComponent, title: "TypeDB Learning Center", data: { documentID: "learningCenter" } },
fundamentals: { component: ResourceHubComponent, title: "TypeDB Fundamentals", data: { documentID: "fundamentalsPage" } },
};
-const genericPages: Record<(typeof genericPageSchemas)[number]["path"], Route> = {
- cloud: { component: GenericPageComponent, title: "TypeDB Cloud" },
- studio: { component: GenericPageComponent, title: "TypeDB Studio" },
-};
+// const genericPages: Record<(typeof genericPageSchemas)[number]["path"], Route> = {
+// cloud: { component: GenericPageComponent, title: "TypeDB Cloud" },
+// studio: { component: GenericPageComponent, title: "TypeDB Studio" },
+// };
const dynamicPages: Record<(typeof dynamicPageSchemas)[number]["path"], Route> = {
"blog/:slug": { component: BlogPostPageComponent },
@@ -60,11 +62,11 @@ const routes: Routes = [
...staticPages[path],
})),
- ...genericPageSchemas.map(({ documentID, path }) => ({
- path,
- data: { documentID },
- ...genericPages[path],
- })),
+ // ...genericPageSchemas.map(({ documentID, path }) => ({
+ // path,
+ // data: { documentID },
+ // ...genericPages[path],
+ // })),
...dynamicPageSchemas.map(({ path }) => ({
path,
@@ -72,10 +74,11 @@ const routes: Routes = [
})),
// TODO: remember to clean up these redirects eventually
- { path: "introduction", redirectTo: "philosophy" },
+ { path: "introduction", redirectTo: "why" },
+ { path: "philosophy", redirectTo: "why" },
{ path: "applications", redirectTo: "learn" },
{ path: "services", redirectTo: "support" },
- { path: "solutions/:route", redirectTo: "philosophy" },
+ { path: "solutions/:route", redirectTo: "why" },
{ path: "webinars/:slug", redirectTo: "lectures/:slug" },
{ path: "webinars", redirectTo: "lectures" },
{ path: "white-papers/:slug", redirectTo: "papers" },
-
@for (lecture of allLectures$ | async; track lecture) {
-
diff --git a/website/src/page/lectures/lectures-page.component.ts b/website/src/page/lectures/lectures-page.component.ts index 00054833d..f883e8830 100644 --- a/website/src/page/lectures/lectures-page.component.ts +++ b/website/src/page/lectures/lectures-page.component.ts @@ -7,13 +7,7 @@ import { ActivatedRoute, Router } from "@angular/router"; import { IdleMonitorService } from "@scullyio/ng-lib"; import { map, Observable, of } from "rxjs"; import { - Lecture, - lectureSchemaName, - LecturesPage, - lecturesPageSchemaName, - SanityDataset, - SanityLecture, - SanityLecturesPage, + Lecture, lectureSchemaName, LecturesPage, lecturesPageSchemaName, SanityDataset, SanityLecture, SanityLecturesPage, } from "typedb-web-schema"; import { MetaTagsService } from "src/service/meta-tags.service"; @@ -24,8 +18,8 @@ import { EventDurationPipe } from "../../framework/date/event-duration.pipe"; import { OrdinalDatePipe } from "../../framework/date/ordinal-date.pipe"; import { LecturePanelsComponent } from "../../framework/link-panels/link-panels.component"; import { PageBackgroundComponent } from "../../framework/page-background/page-background.component"; -import { TitleBodyActionsSectionComponent } from "../../framework/section/title-body-actions-section.component"; -import { TechnicolorBlockComponent } from "../../framework/technicolor-block/technicolor-block.component"; +import { TitleBodyActionsSectionComponent } from "../../framework/intro-section/title-body-actions-section.component"; +import { SectionCoreComponent } from "../../framework/section/section-core.component"; import { PlainTextPipe } from "../../framework/text/plain-text.pipe"; import { RichTextComponent } from "../../framework/text/rich-text.component"; import { AnalyticsService } from "../../service/analytics.service"; @@ -38,32 +32,17 @@ import { PageComponentBase } from "../page-component-base"; styleUrls: ["./lectures-page.component.scss"], standalone: true, imports: [ - PageBackgroundComponent, - TitleBodyActionsSectionComponent, - AspectRatioComponent, - RichTextComponent, - ButtonComponent, - TechnicolorBlockComponent, - LecturePanelsComponent, - MatIconModule, - AsyncPipe, - DatePipe, - EventDurationPipe, - OrdinalDatePipe, - PlainTextPipe -], + PageBackgroundComponent, TitleBodyActionsSectionComponent, AspectRatioComponent, RichTextComponent, + ButtonComponent, SectionCoreComponent, LecturePanelsComponent, MatIconModule, AsyncPipe, DatePipe, + EventDurationPipe, OrdinalDatePipe, PlainTextPipe + ], }) export class LecturesPageComponent extends PageComponentBase
- +
{{ lecture.title | plainText }}
{ readonly allLectures$: Observable ; constructor( - private router: Router, - private activatedRoute: ActivatedRoute, - private content: ContentService, - private metaTags: MetaTagsService, - private title: Title, - private _analytics: AnalyticsService, + private router: Router, private activatedRoute: ActivatedRoute, private content: ContentService, + private metaTags: MetaTagsService, private title: Title, private _analytics: AnalyticsService, private _idleMonitor: IdleMonitorService, ) {} diff --git a/website/src/page/papers/paper-details-page.component.ts b/website/src/page/papers/paper-details-page.component.ts index 6c44b29f4..5204d0e13 100644 --- a/website/src/page/papers/paper-details-page.component.ts +++ b/website/src/page/papers/paper-details-page.component.ts @@ -36,10 +36,7 @@ import { PageComponentBase } from "../page-component-base"; }) export class PaperDetailsPageComponent extends PageComponentBase { readonly allPapersHeading = new ParagraphWithHighlights({ - spans: [ - { text: "TypeDB ", highlight: false }, - { text: "Papers", highlight: true }, - ], + spans: [{ text: "TypeDB ", highlight: false }, { text: "Papers", highlight: true }], }); readonly isSubmitting$: Observable ; private readonly _isSubmitting$ = new BehaviorSubject(false); diff --git a/website/src/page/papers/papers-page.component.html b/website/src/page/papers/papers-page.component.html index f000c7d38..82ade13d0 100644 --- a/website/src/page/papers/papers-page.component.html +++ b/website/src/page/papers/papers-page.component.html @@ -2,11 +2,7 @@ @if (page$ | async; as page) { -+ {{ page.featuredPaper.title | plainText }}
diff --git a/website/src/page/papers/papers-page.component.ts b/website/src/page/papers/papers-page.component.ts index 44d55b8e8..f3b34c32b 100644 --- a/website/src/page/papers/papers-page.component.ts +++ b/website/src/page/papers/papers-page.component.ts @@ -3,19 +3,13 @@ import { ChangeDetectionStrategy, Component } from "@angular/core"; import { of } from "rxjs"; import { - ButtonStyle, - LinkButton, - SanityDataset, - SanityPapersPage, - Paper, - PapersPage, - papersPageSchemaName, + ButtonStyle, LinkButton, SanityDataset, SanityPapersPage, Paper, PapersPage, papersPageSchemaName, } from "typedb-web-schema"; import { AspectRatioComponent } from "../../framework/aspect-ratio/aspect-ratio.component"; import { ButtonComponent } from "../../framework/button/button.component"; import { PageBackgroundComponent } from "../../framework/page-background/page-background.component"; -import { TitleBodyActionsSectionComponent } from "../../framework/section/title-body-actions-section.component"; +import { TitleBodyActionsSectionComponent } from "../../framework/intro-section/title-body-actions-section.component"; import { PlainTextPipe } from "../../framework/text/plain-text.pipe"; import { RichTextComponent } from "../../framework/text/rich-text.component"; import { PageComponentBase } from "../page-component-base"; diff --git a/website/src/page/philosophy/philosophy-page.component.html b/website/src/page/philosophy/philosophy-page.component.html index 572d0dc48..59e0d714b 100644 --- a/website/src/page/philosophy/philosophy-page.component.html +++ b/website/src/page/philosophy/philosophy-page.component.html @@ -8,11 +8,11 @@ [actions]="page.introSection.actions" /> @for (section of page.coreSections; track section; let idx = $index) { -diff --git a/website/src/page/solutions/solution-page.component.ts b/website/src/page/solutions/solution-page.component.ts index c00f6d87e..5668be947 100644 --- a/website/src/page/solutions/solution-page.component.ts +++ b/website/src/page/solutions/solution-page.component.ts @@ -1,8 +1,7 @@ -import { ChangeDetectionStrategy, Component, Input } from "@angular/core"; +import { ChangeDetectionStrategy, Component } from "@angular/core"; import { map } from "rxjs"; import { SanityDataset, SanitySolutionPage, SolutionPage, solutionPageSchemaName } from "typedb-web-schema"; -import { TechnicolorBlock } from "typedb-web-schema"; import { PageComponentBase } from "../page-component-base"; @@ -28,35 +27,3 @@ export class SolutionPageComponent extends PageComponentBase+ } @if (page.finalSection) { - PhilosophyPageTechnicolorBlockComponent), - PublicationPanelComponent, - ConclusionPanelComponent, - AsyncPipe -], + PageBackgroundComponent, TitleBodyActionsSectionComponent, PublicationPanelComponent, ConclusionPanelComponent, + AsyncPipe + ], }) export class PhilosophyPageComponent extends PageComponentBase { protected override getPage(data: SanityDataset) { @@ -40,22 +32,3 @@ export class PhilosophyPageComponent extends PageComponentBase { return of(page ? new PhilosophyPage(page, data) : null); } } - -@Component({ - selector: "td-philosophy-page-technicolor-block", - template: ` `, - changeDetection: ChangeDetectionStrategy.OnPush, - standalone: true, - imports: [TechnicolorBlockComponent], -}) -export class PhilosophyPageTechnicolorBlockComponent implements OnInit { - @Input() section!: PublicationSection | ConclusionSection; - @Input() index!: number; - @Input() page!: PhilosophyPage; - - block!: TechnicolorBlock; - - ngOnInit() { - this.block = new TechnicolorBlock(this.section); - } -} diff --git a/website/src/page/resource-hub/learning-article.component.ts b/website/src/page/resource-hub/learning-article.component.ts index 1a3d9d3d9..e0be62a53 100644 --- a/website/src/page/resource-hub/learning-article.component.ts +++ b/website/src/page/resource-hub/learning-article.component.ts @@ -8,15 +8,8 @@ import { IdleMonitorService } from "@scullyio/ng-lib"; import Prism from "prismjs"; import { combineLatest, map, Observable, of, shareReplay, switchMap } from "rxjs"; import { - Article, - blogCategories, - BlogCategoryID, - fundamentalArticleSchemaName, - ResourceHub, - learningCenterSchemaName, - Link, - LinkButton, - SanityResourceHub, fundamentalsPageSchemaName, + Article, blogCategories, BlogCategoryID, fundamentalArticleSchemaName, ResourceHub, learningCenterSchemaName, + Link, LinkButton, SanityResourceHub, fundamentalsPageSchemaName, } from "typedb-web-schema"; import { TopbarMenuService } from "src/navigation/topbar/topbar-menu.service"; diff --git a/website/src/page/resource-hub/resource-hub.component.ts b/website/src/page/resource-hub/resource-hub.component.ts index 150d18366..4293b52ef 100644 --- a/website/src/page/resource-hub/resource-hub.component.ts +++ b/website/src/page/resource-hub/resource-hub.component.ts @@ -3,24 +3,24 @@ import { ChangeDetectionStrategy, Component, Input } from "@angular/core"; import { map } from "rxjs"; import { ResourceHub, SanityDataset, SanityResourceHub } from "typedb-web-schema"; -import { TechnicolorBlock } from "typedb-web-schema"; +import { SectionBase } from "typedb-web-schema"; import { ConclusionPanelComponent } from "../../framework/conclusion-panel/conclusion-panel.component"; import { LinkPanelsCols2Component } from "../../framework/link-panels/link-panels.component"; import { PageBackgroundComponent } from "../../framework/page-background/page-background.component"; -import { TitleBodyActionsSectionComponent } from "../../framework/section/title-body-actions-section.component"; -import { TechnicolorBlockComponent } from "../../framework/technicolor-block/technicolor-block.component"; +import { TitleBodyActionsSectionComponent } from "../../framework/intro-section/title-body-actions-section.component"; +import { SectionCoreComponent } from "../../framework/section/section-core.component"; import { PageComponentBase } from "../page-component-base"; @Component({ selector: "td-resources-block", - template: ` `, + template: ` `, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, - imports: [TechnicolorBlockComponent], + imports: [SectionCoreComponent], }) export class ResourcesBlockComponent { - @Input() section!: TechnicolorBlock; + @Input() section!: SectionBase; @Input() index!: number; } diff --git a/website/src/page/services/services-page.component.html b/website/src/page/services/services-page.component.html index a9afa8768..c0f83938e 100644 --- a/website/src/page/services/services-page.component.html +++ b/website/src/page/services/services-page.component.html @@ -2,15 +2,15 @@ @if (page$ | async; as page) { @if (page.introSection) { -diff --git a/website/src/page/services/services-page.component.ts b/website/src/page/services/services-page.component.ts index ce9f17528..982a5ff37 100644 --- a/website/src/page/services/services-page.component.ts +++ b/website/src/page/services/services-page.component.ts @@ -1,21 +1,12 @@ import { AsyncPipe } from "@angular/common"; -import { ChangeDetectionStrategy, Component, forwardRef, Input } from "@angular/core"; +import { ChangeDetectionStrategy, Component } from "@angular/core"; import { of } from "rxjs"; -import { - SanityDataset, - SanityServicesPage, - ServicesPage, - servicesPageSchemaName, - TechnicolorBlock, -} from "typedb-web-schema"; - -import { TechnicolorBlockComponent } from "src/framework/technicolor-block/technicolor-block.component"; +import { SanityDataset, SanityServicesPage, ServicesPage, servicesPageSchemaName } from "typedb-web-schema"; import { ContactPanelComponent } from "../../framework/contact-panel/contact-panel.component"; import { PageBackgroundComponent } from "../../framework/page-background/page-background.component"; import { ServicesTableComponent } from "../../framework/services-table/services-table.component"; -import { TechnicolorBlockComponent as TechnicolorBlockComponent_1 } from "../../framework/technicolor-block/technicolor-block.component"; import { TestimonialsCarouselComponent } from "../../framework/testimonials-carousel/testimonials-carousel.component"; import { PageComponentBase } from "../page-component-base"; @@ -25,13 +16,8 @@ import { PageComponentBase } from "../page-component-base"; changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ - PageBackgroundComponent, - forwardRef(() => ServicesPageTechnicolorBlockComponent), - ServicesTableComponent, - TestimonialsCarouselComponent, - ContactPanelComponent, - AsyncPipe -], + PageBackgroundComponent, ServicesTableComponent, TestimonialsCarouselComponent, ContactPanelComponent, AsyncPipe + ], }) export class ServicesPageComponent extends PageComponentBase+ } @if (page.testimonialsSection) { - + } @if (page.contactSection) { - + } { protected override getPage(data: SanityDataset) { @@ -39,38 +25,3 @@ export class ServicesPageComponent extends PageComponentBase { return of(page ? new ServicesPage(page, data) : null); } } - -@Component({ - selector: "td-services-page-technicolor-block", - template: ` `, - changeDetection: ChangeDetectionStrategy.OnPush, - standalone: true, - imports: [TechnicolorBlockComponent_1], -}) -export class ServicesPageTechnicolorBlockComponent { - @Input() block!: TechnicolorBlock; - @Input() page!: ServicesPage; - - get index(): number { - return this.allBlocks.indexOf(this.block); - } - - get level(): TechnicolorBlockComponent["level"] { - return this.block === this.page.introSection ? "h1" : "h2"; - } - - private get allBlocks(): TechnicolorBlock[] { - const blocks: (TechnicolorBlock | undefined)[] = [ - this.page.introSection, - this.page.testimonialsSection, - this.page.contactSection, - ]; - return blocks.filter((x): x is TechnicolorBlock => x instanceof TechnicolorBlock); - } -} diff --git a/website/src/page/solutions/solution-page.component.html b/website/src/page/solutions/solution-page.component.html index 6d839e896..e0430c926 100644 --- a/website/src/page/solutions/solution-page.component.html +++ b/website/src/page/solutions/solution-page.component.html @@ -14,19 +14,19 @@ } @if (page.useCasesSection) { - + } @if (page.challengesSection) { - + } @if (page.solutionSection) { - + } @if (page.furtherReadingSection) { - + } { this.title.setTitle(`TypeDB Solutions: ${page.title}`); } } - -@Component({ - selector: "td-solution-page-technicolor-block", - template: ` `, - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class SolutionPageTechnicolorBlockComponent { - @Input() block!: TechnicolorBlock; - @Input() page!: SolutionPage; - - get allBlocks(): TechnicolorBlock[] { - return [ - this.page.useCasesSection, - this.page.challengesSection, - this.page.solutionSection, - this.page.furtherReadingSection, - ].filter((x) => !!x) as TechnicolorBlock[]; - } - - get index() { - return this.allBlocks.indexOf(this.block); - } - - get noTrailingLine() { - return this.index >= this.allBlocks.length - 1; - } -} diff --git a/website/src/page/support/support-page.component.html b/website/src/page/support/support-page.component.html index dc3f43e7f..91e25d59a 100644 --- a/website/src/page/support/support-page.component.html +++ b/website/src/page/support/support-page.component.html @@ -2,20 +2,20 @@ @if (page$ | async; as page) { @if (page.introSection) { -} diff --git a/website/src/page/support/support-page.component.ts b/website/src/page/support/support-page.component.ts index add191de8..078e2e62d 100644 --- a/website/src/page/support/support-page.component.ts +++ b/website/src/page/support/support-page.component.ts @@ -1,17 +1,15 @@ import { AsyncPipe } from "@angular/common"; -import { ChangeDetectionStrategy, Component, forwardRef, Input } from "@angular/core"; +import { ChangeDetectionStrategy, Component } from "@angular/core"; import { of } from "rxjs"; -import { SanitySupportPage, SupportPage, supportPageSchemaName, TechnicolorBlock } from "typedb-web-schema"; +import { SanitySupportPage, SupportPage, supportPageSchemaName } from "typedb-web-schema"; import { SanityDataset } from "typedb-web-schema"; -import { TechnicolorBlockComponent } from "src/framework/technicolor-block/technicolor-block.component"; - import { ContactPanelComponent } from "../../framework/contact-panel/contact-panel.component"; import { FeatureTableComponent } from "../../framework/feature-table/feature-table.component"; import { LinkPanelsComponent } from "../../framework/link-panels/link-panels.component"; import { PageBackgroundComponent } from "../../framework/page-background/page-background.component"; -import { TechnicolorBlockComponent as TechnicolorBlockComponent_1 } from "../../framework/technicolor-block/technicolor-block.component"; +import { SectionCoreComponent } from "../../framework/section/section-core.component"; import { TestimonialsCarouselComponent } from "../../framework/testimonials-carousel/testimonials-carousel.component"; import { PageComponentBase } from "../page-component-base"; @@ -21,14 +19,9 @@ import { PageComponentBase } from "../page-component-base"; changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ - PageBackgroundComponent, - forwardRef(() => SupportPageTechnicolorBlockComponent), - LinkPanelsComponent, - FeatureTableComponent, - TestimonialsCarouselComponent, - ContactPanelComponent, - AsyncPipe -], + PageBackgroundComponent, LinkPanelsComponent, FeatureTableComponent, TestimonialsCarouselComponent, + ContactPanelComponent, AsyncPipe, SectionCoreComponent + ], }) export class SupportPageComponent extends PageComponentBase+ } @if (page.featureTableSection) { - + } @if (page.testimonialsSection) { - + } @if (page.contactSection) { - - + + } { protected override getPage(data: SanityDataset) { @@ -36,39 +29,3 @@ export class SupportPageComponent extends PageComponentBase { return of(page ? new SupportPage(page, data) : null); } } - -@Component({ - selector: "td-support-page-technicolor-block", - template: ` `, - changeDetection: ChangeDetectionStrategy.OnPush, - standalone: true, - imports: [TechnicolorBlockComponent_1], -}) -export class SupportPageTechnicolorBlockComponent { - @Input() block!: TechnicolorBlock; - @Input() page!: SupportPage; - - get index(): number { - return this.allBlocks.indexOf(this.block); - } - - get level(): TechnicolorBlockComponent["level"] { - return this.block === this.page.introSection ? "h1" : "h2"; - } - - private get allBlocks(): TechnicolorBlock[] { - const blocks: (TechnicolorBlock | undefined)[] = [ - this.page.introSection, - this.page.featureTableSection, - this.page.testimonialsSection, - this.page.contactSection, - ]; - return blocks.filter((x): x is TechnicolorBlock => x instanceof TechnicolorBlock); - } -} diff --git a/website/src/page/tech-talk/request-tech-talk-page.component.ts b/website/src/page/tech-talk/request-tech-talk-page.component.ts index ee2fb9d82..a18dfb0a9 100644 --- a/website/src/page/tech-talk/request-tech-talk-page.component.ts +++ b/website/src/page/tech-talk/request-tech-talk-page.component.ts @@ -18,8 +18,7 @@ import { PopupNotificationService } from "src/service/popup-notification.service import { PageBackgroundComponent } from "../../framework/page-background/page-background.component"; import { RichTextComponent } from "../../framework/text/rich-text.component"; import { - HeadingWithHighlightsComponent, - ParagraphWithHighlightsComponent, + HeadingWithHighlightsComponent, ParagraphWithHighlightsComponent, } from "../../framework/text/text-with-highlights.component"; import { PageComponentBase } from "../page-component-base"; @@ -30,13 +29,9 @@ import { PageComponentBase } from "../page-component-base"; changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ - PageBackgroundComponent, - HeadingWithHighlightsComponent, - MatProgressBarModule, - ParagraphWithHighlightsComponent, - RichTextComponent, - AsyncPipe -], + PageBackgroundComponent, HeadingWithHighlightsComponent, MatProgressBarModule, ParagraphWithHighlightsComponent, + RichTextComponent, AsyncPipe + ], }) export class RequestTechTalkPageComponent extends PageComponentBase { readonly isSubmitting$: Observable ; diff --git a/website/src/page/why/why-page.component.html b/website/src/page/why/why-page.component.html new file mode 100644 index 000000000..2df406c05 --- /dev/null +++ b/website/src/page/why/why-page.component.html @@ -0,0 +1,18 @@ + + @if (page$ | async; as page) { + diff --git a/website/src/page/why/why-page.component.scss b/website/src/page/why/why-page.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/website/src/page/why/why-page.component.ts b/website/src/page/why/why-page.component.ts new file mode 100644 index 000000000..e9afda32a --- /dev/null +++ b/website/src/page/why/why-page.component.ts @@ -0,0 +1,31 @@ +import { AsyncPipe } from "@angular/common"; +import { ChangeDetectionStrategy, Component } from "@angular/core"; + +import { of } from "rxjs"; +import { SanityDataset, SanityWhyPage, WhyPage, whyPageSchemaName } from "typedb-web-schema"; + +import { ConclusionPanelComponent } from "../../framework/conclusion-panel/conclusion-panel.component"; +import { FeatureFusionComponent } from "../../framework/feature-fusion/feature-fusion.component"; +import { FeatureGridComponent } from "../../framework/feature-grid/feature-grid.component"; +import { PageBackgroundComponent } from "../../framework/page-background/page-background.component"; +import { TitleBodyActionsSectionComponent } from "../../framework/intro-section/title-body-actions-section.component"; +import { SectionCoreComponent } from "../../framework/section/section-core.component"; +import { PageComponentBase } from "../page-component-base"; + +@Component({ + selector: "td-why-page", + templateUrl: "./why-page.component.html", + styleUrls: ["./why-page.component.scss"], + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [ + PageBackgroundComponent, TitleBodyActionsSectionComponent, FeatureGridComponent, ConclusionPanelComponent, + AsyncPipe, FeatureFusionComponent, SectionCoreComponent + ], +}) +export class WhyPageComponent extends PageComponentBase++ } ++ + + + + @for (section of page.coreSections; track section;) { } + + + + { + protected override getPage(data: SanityDataset) { + const page = data.getDocumentByID (whyPageSchemaName); + return of(page ? new WhyPage(page, data) : null); + } +} diff --git a/website/src/service/content.service.ts b/website/src/service/content.service.ts index ee6435678..7ee6e093d 100644 --- a/website/src/service/content.service.ts +++ b/website/src/service/content.service.ts @@ -7,7 +7,7 @@ import { BehaviorSubject, combineLatest, concat, filter, first, iif, map, Observable, of, ReplaySubject, shareReplay, switchMap, } from "rxjs"; -import { FooterData, footerQuery, SANITY_QUERY_URL, SANITY_TOKEN, TopbarData, topbarQuery } from "typedb-web-common/lib"; +import { FooterData, footerQuery, SANITY_TOKEN, TopbarData, topbarQuery } from "typedb-web-common/lib"; import { ApplicationArticle, applicationArticleSchemaName, Article, articleFromApi, associateBy, BlogCategoryID, BlogFilter, blogNullFilter, BlogPost, blogPostSchemaName, FundamentalArticle, fundamentalArticleSchemaName, groupBy, @@ -20,6 +20,7 @@ import { environment } from "src/environment/environment"; import { WordpressService } from "./wordpress.service"; const postsApiUrl = `https://public-api.wordpress.com/rest/v1.1/sites/typedb.wordpress.com/posts`; +const SANITY_QUERY_URL = `https://xndl14mc.api.sanity.io/v2021-10-21/data/query/crisper-messaging`; @Injectable({ providedIn: "root", diff --git a/website/src/service/image-builder.service.ts b/website/src/service/image-builder.service.ts index 76828955b..0c73f4955 100644 --- a/website/src/service/image-builder.service.ts +++ b/website/src/service/image-builder.service.ts @@ -3,7 +3,7 @@ import { Injectable } from "@angular/core"; import imageUrlBuilder from "@sanity/image-url"; const SANITY_PROJECT_ID = "xndl14mc"; -const SANITY_DATASET = "production"; +const SANITY_DATASET = "crisper-messaging"; @Injectable({ providedIn: "root", diff --git a/website/src/styles/styles.scss b/website/src/styles/styles.scss index 57d6f02fa..23daaaafe 100644 --- a/website/src/styles/styles.scss +++ b/website/src/styles/styles.scss @@ -166,6 +166,10 @@ table { margin-top: var(--subtitle-margin); } +.text-margin-s { + margin-top: var(--text-margin-s); +} + .section-background-solid { background-color: var(--color-black-purple); } diff --git a/website/src/website-routes.ts b/website/src/website-routes.ts index fb8078b09..6a884169e 100644 --- a/website/src/website-routes.ts +++ b/website/src/website-routes.ts @@ -5,7 +5,8 @@ export const staticPageSchemas = [ { path: "events", schemaName: "eventsPage" }, { path: "lectures", schemaName: "lecturesPage" }, { path: "features", schemaName: "featuresPage" }, - { path: "philosophy", schemaName: "philosophyPage" }, + { path: "why", schemaName: "whyPage" }, + // { path: "philosophy", schemaName: "philosophyPage" }, { path: "learn", schemaName: "learningCenter" }, { path: "fundamentals", schemaName: "fundamentalsPage" }, { path: "request-tech-talk", schemaName: "requestTechTalkPage" }, @@ -13,10 +14,10 @@ export const staticPageSchemas = [ { path: "papers", schemaName: "papersPage" }, ] as const satisfies readonly StaticPage[]; -export const genericPageSchemas = [ - { path: "cloud", documentID: "cloudPage" }, - { path: "studio", documentID: "studioPage" }, -] as const satisfies readonly GenericPage[]; +// export const genericPageSchemas = [ +// { path: "cloud", documentID: "cloudPage" }, +// { path: "studio", documentID: "studioPage" }, +// ] as const satisfies readonly GenericPage[]; export const dynamicPageSchemas = [ { path: "applications/:slug", schemaName: "applicationArticle" }, @@ -35,10 +36,10 @@ interface StaticPage { schemaName: string; } -interface GenericPage { - path: string; - documentID: string; -} +// interface GenericPage { +// path: string; +// documentID: string; +// } interface DynamicPageWithSchema { path: `${string}:slug${string}`; diff --git a/website/src/website-routing.module.ts b/website/src/website-routing.module.ts index 6fdc8b506..d169c9def 100644 --- a/website/src/website-routing.module.ts +++ b/website/src/website-routing.module.ts @@ -9,19 +9,20 @@ import { EventDetailsPageComponent } from "./page/events/event-details-page.comp import { EventsPageComponent } from "./page/events/events-page.component"; import { FallbackPageComponent } from "./page/fallback/fallback-page.component"; import { FeaturesPageComponent } from "./page/features/features-page.component"; -import { GenericPageComponent } from "./page/generic/generic-page.component"; +// import { GenericPageComponent } from "./page/generic/generic-page.component"; import { HomePageComponent } from "./page/home/home-page.component"; import { LearningArticleComponent } from "./page/resource-hub/learning-article.component"; import { LectureDetailsPageComponent } from "./page/lectures/lecture-details-page.component"; import { LecturesPageComponent } from "./page/lectures/lectures-page.component"; import { LegalDocumentComponent } from "./page/legal/legal-document.component"; -import { PhilosophyPageComponent } from "./page/philosophy/philosophy-page.component"; +// import { PhilosophyPageComponent } from "./page/philosophy/philosophy-page.component"; import { ResourceHubComponent } from "./page/resource-hub/resource-hub.component"; import { SupportPageComponent } from "./page/support/support-page.component"; import { RequestTechTalkPageComponent } from "./page/tech-talk/request-tech-talk-page.component"; import { PaperDetailsPageComponent } from "./page/papers/paper-details-page.component"; import { PapersPageComponent } from "./page/papers/papers-page.component"; -import { dynamicPageSchemas, genericPageSchemas, staticPageSchemas } from "./website-routes"; +import { WhyPageComponent } from "./page/why/why-page.component"; +import { dynamicPageSchemas, staticPageSchemas } from "./website-routes"; const staticPages: Record<(typeof staticPageSchemas)[number]["path"], Route> = { "": { component: HomePageComponent }, @@ -32,16 +33,17 @@ const staticPages: Record<(typeof staticPageSchemas)[number]["path"], Route> = { events: { component: EventsPageComponent, title: "TypeDB Events" }, features: { component: FeaturesPageComponent, title: "TypeDB Features" }, lectures: { component: LecturesPageComponent, title: "TypeDB Lectures" }, - philosophy: { component: PhilosophyPageComponent, title: "TypeDB Philosophy" }, + why: { component: WhyPageComponent, title: "Why choose TypeDB?" }, + // philosophy: { component: PhilosophyPageComponent, title: "TypeDB Philosophy" }, support: { component: SupportPageComponent, title: "TypeDB Support" }, learn: { component: ResourceHubComponent, title: "TypeDB Learning Center", data: { documentID: "learningCenter" } }, fundamentals: { component: ResourceHubComponent, title: "TypeDB Fundamentals", data: { documentID: "fundamentalsPage" } }, }; -const genericPages: Record<(typeof genericPageSchemas)[number]["path"], Route> = { - cloud: { component: GenericPageComponent, title: "TypeDB Cloud" }, - studio: { component: GenericPageComponent, title: "TypeDB Studio" }, -}; +// const genericPages: Record<(typeof genericPageSchemas)[number]["path"], Route> = { +// cloud: { component: GenericPageComponent, title: "TypeDB Cloud" }, +// studio: { component: GenericPageComponent, title: "TypeDB Studio" }, +// }; const dynamicPages: Record<(typeof dynamicPageSchemas)[number]["path"], Route> = { "blog/:slug": { component: BlogPostPageComponent }, @@ -60,11 +62,11 @@ const routes: Routes = [ ...staticPages[path], })), - ...genericPageSchemas.map(({ documentID, path }) => ({ - path, - data: { documentID }, - ...genericPages[path], - })), + // ...genericPageSchemas.map(({ documentID, path }) => ({ + // path, + // data: { documentID }, + // ...genericPages[path], + // })), ...dynamicPageSchemas.map(({ path }) => ({ path, @@ -72,10 +74,11 @@ const routes: Routes = [ })), // TODO: remember to clean up these redirects eventually - { path: "introduction", redirectTo: "philosophy" }, + { path: "introduction", redirectTo: "why" }, + { path: "philosophy", redirectTo: "why" }, { path: "applications", redirectTo: "learn" }, { path: "services", redirectTo: "support" }, - { path: "solutions/:route", redirectTo: "philosophy" }, + { path: "solutions/:route", redirectTo: "why" }, { path: "webinars/:slug", redirectTo: "lectures/:slug" }, { path: "webinars", redirectTo: "lectures" }, { path: "white-papers/:slug", redirectTo: "papers" },