@12degrees/website-builder-www

A fastify plugin for the website-builder library

Installation

Install with npm:

npm install @12degrees/website-builder-www

Install with pnpm:

pnpm add --filter "@scope/project" @12degrees/website-builder-www

Usage

Add following options to your config

import type { ApiConfig } from "@dzangolab/fastify-config";

const config: ApiConfig = {
  ...
    content: {
      meta: {
        description: process.env.APP_DESCRIPTION as string,
        title: process.env.APP_TITLE as string,
      },
      tables: {
        content: process.env.CONTENT_TABLE as string
      },
      version: process.env.CONTENT_VERSION as string
    },
    i18n: {
      defaultLocale: process.env.DEFAULT_LOCALE as string,
      locales: ((process.env.LOCALES as string) || "en")
                .split(","),
    },
    static: {
      root: "src/public",
      // other fastifyViewoptions properties
    },
    view: {
      templates: "src/templates",
      // other fastifyStaticOptions properties
    },
  ...
};

export default config;

Register the plugin with your fastify instance in src/index.ts:

import wwwPlugin from "@12degrees/website-builder-fastify";
import Fastify from "fastify";

const start = async () => {
  const fastify = await Fastify();

  // Register website-builder-fastify plugin
  await fastify.register(wwwPlugin);

  try {
    await fastify.listen({
      port: 3000,
      host: "0.0.0.0",
    });
  } catch (error) {
    fastify.log.error(error);
  }
};

start();

Configuration

content

The content block is used to configure your application's content meta and versioning.

• meta: An object containing the meta description and title for your website.
  • description: A brief description of your website.
  • title: The title of your website.
• tables: (optional) An object containing the table names for storing content.
  • content: The name of the table used to store content data.
• version: The current version of your application's content, useful for handling content updates.

content: {
  meta: {
    description: "Your website description",
    title: "Your website title",
  },
  tables: {
    content: "content_table", // Name of the table for storing content
  },
  version: "1.0.0", // Current version of your content
}

i18n

The i18n block is used to configure localization settings for your application.

• defaultLocale (string): The default locale for your application. This locale must be included in the locales array.
• locales (array): Array of locales to support. Each locale is identified by a language tag as per the W3C Language Tag and Locale Identifiers.

Note: If the defaultLocale is not present in the locales array, the package will throw an error to ensure consistency.

i18n: {
  defaultLocale: "en", // Default locale for the application
  locales: ["en", "fr"], // Supported locales
}

static (optional)

All the additional plugin options provided by the Fastify static package. For more details, refer to the @fastify/static documentation.

Default Path for Static Files:

The default path for serving static assets is src/public. You can change this by setting the root property in static.

view (optional)

All the additional plugin options provided by the Fastify view package except for engine and root configuration are available here. For more details, refer to @fastify/view documentation.

Default Path for Templates:

By default, templates are rendered from the src/views directory. You can customize this path by setting the templates property in view.

Template Setup

The @12degrees/website-builder-fastify package comes with a basic template to help you get started quickly. This template includes a simple structure that you can customize to fit your application's needs.

Using the Basic Template

While the package provides a basic template, it's essential to customize this template according to your application's specific requirements. This includes ensuring that the template contains all necessary links for CSS, JavaScript, and favicon files. These resources are critical for the proper styling and functionality of your web pages.

To achieve this, you will need to override the provided template file in your application. This allows you to add and modify elements such as stylesheets, scripts, and other assets that are unique to your project.

Stylesheets Setup

The @12degrees/website-builder-www package includes a stylesheets.njk template that handles the inclusion of default stylesheets. You can include this template or override it based on your project's needs.

Default Stylesheets Provided by the Package

The stylesheets.njk template provided by the package looks like this:

{% include "stylesheetsBase.njk" %}

Example Stylesheets File

To use both the default stylesheets from the package and your custom stylesheets, your stylesheets.njk template might look like this:

{% include "stylesheetsBase.njk" %}

<link rel="stylesheet" href="/static/css/header.css" 
  media="screen, print"/>
<link rel="stylesheet" href="/static/css/footer.css" 
  media="screen, print"/>

Customizing Stylesheets

• Using Default Stylesheets: To use the package's default stylesheets, include the stylesheetsBase.njk template as shown in example above.

• Overriding Default Stylesheets: If you don't want to use the default stylesheets provided by the package, you can overwrite the stylesheets.njk template and exclude the stylesheetsBase.njk template.

• Combining Default and Custom Stylesheets: If you want to use both default styles and custom ones, simply include the stylesheetsBase.njk file and add your custom stylesheet links afterward, like the example above.