Table of Contents

Getting Started

Layout

Pages

Translations

Deployments

Showcase

Additional Resources

Getting Started

Global Sites AI is a powerful tool for creating multilingual static websites. This documentation will guide you through the process of setting up and using the framework.

Installation

To install Global Sites AI, you need access to the private repositories. Those will be provided after you purchase a license. Once you have access, you can clone the repositories using the following commands:

Command Line 
git clone --recurse-submodules [path to GlobalSitesTemplate]
git clone [path to GlobalSitesCore]

There are 2 projects. GlobalSitesCore and GlobalSitesTemplate. GlobalSitesTemplate will help provide a full project to start. You can modify it as needed. GlobalSitesCore is the core library that provides the functionality to create multilingual static sites. That is treated as a git submodule and can be updated frequently for your sites to have the most up to date features.

Basic Usage

Here's a simple example of how to create a new page using Global Sites AI:

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 -->
    `,
  });
}

New page with AI

To create a new page with AI translations, you can use the following command from within the Cursor editor. It is likely possible to do similar from other tools.

Command Line 
Using @detailPage.md, write a triangle calculator page.