Table of Contents

Getting Started

Layout

Pages

Translations

Deployments

Showcase

Additional Resources

Pages

There are a few parts to each page. These include the layout, the content, and the language options.

The layout is the HTML that wraps the content. It includes the header, footer, and any other elements that are consistent across all pages. That layout is defined in another page as a TypeScript function.

The content is the HTML that is unique to each page. We define it as shown below. Make sure to include calls to i18Next.t as appropriate to support translations.

The language options are the different languages that the page is available in. We define those at the beginning. It connects the route and the individual page function together. The translation of URLs are handled within that.

TypeScript - pages/ExamplePage.ts 
import i18next from "../GlobalSitesCore/i18n";
import { Layout } from "../Layout";
import { RenderProps, renderLanguageFiles } from "../GlobalSitesCore/languages";
import { FileResult } from "../GlobalSitesCore/FileResult";

export async function ExamplePagePages(): Promise<FileResult[]> {
  return renderLanguageFiles({
    subDirectoryInEnglish: undefined,
    fileNameInEnglish: "example-page",
    includeInSitemap: true,
    render: (props) => ExamplePage(props),
  });
}

interface ExamplePageProps extends RenderProps {}

export function ExamplePage(props: ExamplePageProps): string {
  var title = i18next.t(`Example Page`);
  var metaDescription = i18next.t(`This is an example page.`);

  return Layout({
    lang: props.option.code,
    title: title,
    description: metaDescription,
    languageOptions: props.allOptions,
    content: /* HTML */ `
      <h1>${title}</h1>
      <p>${metaDescription}</p>
      <!-- Add more content as needed -->
    `,
  });
}