Public content loading plugin

QA

  • In the public site of Singapore, use the amplifier icon to search something. Ensure that it works
    • Change the search with at least 2 words, ensure that it works
  • Follow the instructions and install a new local website. Open the BO, create at least 2 pages with some text content.
    • Open the public site, use the amplifier icon to search something. Ensure that it works.
    • Change the search with at least 2 words, ensure that it works

Implementation

Notice: This ticket is a continuation for #63 (closed) . We will extract another feature from the SiteApp.

Create a plugin

We are going to use plugins/contact-form-plugin as a template, because it contains the right organization of code:

  • A backend sub-project (it's a Node project)
  • A public-front sub-project (it's a SolidJS application)

Here is what to do:

  1. Duplicate plugins/contact-form-plugin/ in plugins/content-loading-plugin/
  2. Remove:
    • CHANGELOG.md
    • .turbo
    • backend/locales
    • backend/dist
    • backend/src/: remove all but plugin.ts
    • public-front/dist
    • public-front/locales/: keep the directory but remove its content
    • public-front/src/: remove all but main.tsx and i18n.ts
  3. Edit package.json:
    • change the name (@paroicms/content-loading-plugin), description, keywords, repository directory, set the version to 0.0.1
    • remove "backend/locales" from files
  4. Edit README.md: change the package name and the description.

Add it in the package.json of the monorepo.

Use the new plugin in websites

In Singapore and Seoul, files site-schema.json, add "@paroicms/content-loading-plugin" in the usePlugins list.

backend sub-project

The entry point of our plugin is backend/src/plugin.ts. Edit it:

  • Remove simpleI18n, we don't need it
  • In the setPublicApiHandler callback, remove the implementation. We will implement that later.

Extract the controllers

  • In app/server/src/modules/public-api/public-api-controller.ts, move the controllers partial and search to a new file in plugins/content-loading-plugin/backend/src/controllers.ts
  • Do not try to implement a class. Transform them to regular functions without annotations.

Notice: In a plugin, we don't have access to NestJS. It's more low-level.

Our moved code will need new things in PluginSiteContext. In plugin-site-context-types.d.ts, the PluginSiteContext interface, add:

renderChildPartials(options: {
    req: Request;
    res: Response;
    params: PartialsParamsInput;
    parentDocumentId: ParsedSectionId;
    labeledByTermId?: string;
}): Promise<void>;

renderSearchPartials(options: {
    req: Request;
    res: Response;
    language: string;
    words: string[];
    limit: number;
    start: number;
    templateName: string;
}): Promise<void>

Important: Add import type { Request, Response } from "express"; in the imports.

In make-plugin-site-context.ts, the makePluginSiteContext function, add the implementation (it's like getSiteFieldValue: just call the same function, with the siteContext).

👉 Now you should be able to implement the callback in setPublicApiHandler (file plugins/content-loading-plugin/backend/src/plugin.ts) using ctx.renderChildPartials(...) and ctx.renderSearchPartials(...).

Important: We don't have access to the route parser of NestJS. So, I suggest to implement the search route first. Then, use a similar implementation for a "child-partials" route: pass the parameters as URL attributes instead of in the path.

public-front sub-project

Extract the UI from SiteApp

  • Move the following folders in the public-front sub-project in our plugin:
    • app/site-app/locales
    • app/site-app/src/infinite-loading
    • app/site-app/src/search-app
    • app/site-app/src/search-opener
  • Ensure that the Site-App can still be compiled

Make it work

Make it work in Singapore and Seoul.

Here is a tip. Inspect the public site of Singapore, expand the <head> element: you should see the CSS and JS files from your plugin. 👉 You can check if these 2 URLs are correct by manually loading them.

Edited by Thomas Mur