Tavano/global sections (#724)

* Release [0.52.2]

* fmt

* add on preview

* remove console log

* improve type

* improve

* fmt

* unused type

* fix preview

* add pageSections

* fix to work with more than one section

deno.json

@@ -36,5 +36,5 @@
     "jsx": "react-jsx",
     "jsxImportSource": "preact"
   },
-  "version": "0.52.1"
+  "version": "0.52.2"
 }

website/mod.ts

@@ -1,15 +1,15 @@
 import "./utils/unhandledRejection.ts";
 
+import { Matcher } from "deco/blocks/matcher.ts";
+import { Page } from "deco/blocks/page.tsx";
 import { Section } from "deco/blocks/section.ts";
 import type { App, FnContext } from "deco/mod.ts";
 import { asResolved } from "deco/mod.ts";
 import type { Props as Seo } from "./components/Seo.tsx";
 import { Routes } from "./flags/audience.ts";
-import manifest, { Manifest } from "./manifest.gen.ts";
-import { Page } from "deco/blocks/page.tsx";
 import { TextReplace } from "./handlers/proxy.ts";
+import manifest, { Manifest } from "./manifest.gen.ts";
 import { Script } from "./types.ts";
-import { Matcher } from "deco/blocks/matcher.ts";
 
 export type AppContext = FnContext<Props, Manifest>;
 
@@ -79,21 +79,18 @@ export interface Props {
    */
   routes?: Routes[];
 
-  /** @title Seo */
-  seo?: Omit<
-    Seo,
-    "jsonLDs" | "canonical"
-  >;
-  /**
-   * @title Theme
-   */
-  theme?: Section;
   /**
    * @title Global Sections
-   * @description These sections will be included on all website/pages/Page.ts
+   * @description These sections run once on the start of the website and will be included on the start of each page
    */
   global?: Section[];
 
+  /**
+   * @title Page Sections
+   * @description These sections will be included on each page
+   */
+  pageSections?: Section[];
+
   /**
    * @title Error Page
    * @description This page will be used when something goes wrong beyond section error-boundaries when rendering a page
@@ -131,6 +128,17 @@ export interface Props {
    */
   flavor?: Fresh | HTMX;
 
+  /** @title Seo */
+  seo?: Omit<
+    Seo,
+    "jsonLDs" | "canonical"
+  >;
+
+  /**
+   * @title Theme
+   */
+  theme?: Section;
+
   // We are hiding this prop because it is in testing phase
   // after that, probably we will remove this prop and default will be true
   /**
@@ -238,13 +246,21 @@ const deferPropsResolve = (routes: Routes): Routes => {
 };
 
 export const onBeforeResolveProps = <
-  T extends { routes?: Routes[]; errorPage?: Page; abTesting: AbTesting },
+  T extends {
+    routes?: Routes[];
+    errorPage?: Page;
+    abTesting: AbTesting;
+    pageSections?: Section[];
+  },
 >(
   props: T,
 ): T => {
   if (Array.isArray(props?.routes)) {
     const newRoutes: T = {
       ...props,
+      pageSections: props.pageSections?.map((section) =>
+        asResolved(section, true)
+      ),
       errorPage: props.errorPage
         ? asResolved(props.errorPage, true)
         : undefined,

website/pages/Page.tsx

@@ -1,24 +1,22 @@
 import { Head } from "$fresh/runtime.ts";
-import { Section } from "deco/blocks/section.ts";
-import { ComponentMetadata } from "deco/engine/block.ts";
+import type { Page } from "deco/blocks/page.tsx";
+import { Section, SectionProps } from "deco/blocks/section.ts";
+import { ComponentFunc, ComponentMetadata } from "deco/engine/block.ts";
+import { HttpError } from "deco/engine/errors.ts";
 import { Context } from "deco/live.ts";
+import { isDeferred } from "deco/mod.ts";
+import { logger } from "deco/observability/otel/config.ts";
 import {
   usePageContext as useDecoPageContext,
   useRouterContext,
 } from "deco/runtime/fresh/routes/entrypoint.tsx";
-import { JSX } from "preact";
+import { Component, JSX } from "preact";
+import ErrorPageComponent from "../../utils/defaultErrorPage.tsx";
+import Clickhouse from "../components/Clickhouse.tsx";
 import Events from "../components/Events.tsx";
+import { SEOSection } from "../components/Seo.tsx";
 import LiveControls from "../components/_Controls.tsx";
 import { AppContext } from "../mod.ts";
-import type { Page } from "deco/blocks/page.tsx";
-import { Component } from "preact";
-import { ComponentFunc } from "deco/engine/block.ts";
-import { HttpError } from "deco/engine/errors.ts";
-import { logger } from "deco/observability/otel/config.ts";
-import { isDeferred } from "deco/mod.ts";
-import ErrorPageComponent from "../../utils/defaultErrorPage.tsx";
-import { SEOSection } from "../components/Seo.tsx";
-import Clickhouse from "../components/Clickhouse.tsx";
 
 const noIndexedDomains = ["decocdn.com", "deco.site", "deno.dev"];
 
@@ -105,12 +103,8 @@ function Page({
   unindexedDomain,
   avoidRedirectingToEditor,
   sendToClickHouse,
-}: Props & {
-  errorPage?: Page;
-  devMode: boolean;
-  avoidRedirectingToEditor?: boolean;
-  sendToClickHouse?: boolean;
-}): JSX.Element {
+  pageSections,
+}: SectionProps<typeof loader>): JSX.Element {
   const context = Context.active();
   const site = { id: context.siteId, name: context.site };
   const deco = useDeco();
@@ -147,6 +141,7 @@ function Page({
         {sendToClickHouse && (
           <Clickhouse siteId={site.id} siteName={site.name} />
         )}
+        {pageSections?.map(renderSection)}
         {sections.map(renderSection)}
       </ErrorBoundary>
     </>
@@ -165,9 +160,19 @@ export const loader = async (
     url.origin.includes(domain)
   );
 
+  const pageSections = await Promise.all(
+    (ctx.pageSections || [])?.map(async (section) => {
+      if (isDeferred(section)) {
+        return await section() as Section;
+      }
+      return section;
+    }),
+  );
+
   return {
     ...restProps,
     sections,
+    pageSections,
     errorPage: isDeferred<Page>(ctx.errorPage)
       ? await ctx.errorPage()
       : undefined,
@@ -178,8 +183,8 @@ export const loader = async (
   };
 };
 
-export function Preview(props: Props) {
-  const { sections, seo } = props;
+export function Preview(props: SectionProps<typeof loader>) {
+  const { sections, seo, pageSections } = props;
   const deco = useDeco();
 
   return (
@@ -190,6 +195,7 @@ export function Preview(props: Props) {
 
       {seo && renderSection(seo)}
       <Events deco={deco} />
+      {pageSections?.map(renderSection)}
       {sections.map(renderSection)}
     </>
   );