@paroicms/site-generator-plugin 0.8.0 → 0.9.0

package/gen-backend/dist/generator/site-generator/theme-scss.js

@@ -0,0 +1,262 @@
+export function getThemeCssContent() {
+    return `/* Reset */
+* {
+  box-sizing: border-box;
+}
+
+a,
+a:visited {
+  color: inherit;
+  text-decoration: none;
+}
+
+/* Elements */
+
+body {
+  background-color: #aaa;
+  margin: 0;
+  padding: 0;
+}
+
+img {
+  display: block;
+  max-width: 100%;
+}
+
+picture {
+  display: block;
+}
+
+/* Tile */
+
+a > article {
+  background-color: #fff;
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  max-width: 340px;
+  overflow: hidden;
+}
+a > article div:first-child {
+  flex: 0 0 120px;
+  max-width: 120px;
+}
+a > article img {
+  height: 100%;
+  object-fit: cover;
+  width: 100%;
+}
+a > article div:last-child {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  padding: 15px;
+}
+a > article h3 {
+  margin: 0 0 8px;
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+}
+a > article p {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.4;
+  margin: 0;
+}
+
+a:hover > article {
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
+}
+
+/* Classes */
+
+._bg2 {
+  background-color: #444;
+  color: #eee;
+}
+
+.Container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.Page {
+  background-color: #fff;
+  color: #333;
+  padding: 5px 40px;
+}
+
+.TextWidth {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.List {
+  display: flex;
+  gap: 20px;
+  flex-wrap: wrap;
+}
+
+.Header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  padding-top: 15px;
+  color: #fff;
+}
+
+@media (max-width: 768px) {
+  .Header {
+    flex-wrap: wrap;
+    padding: 15px 0 5px;
+  }
+}
+
+.Header-logo {
+  display: flex;
+  align-items: center;
+}
+
+.Header-logo img {
+  margin-right: 10px;
+  border-radius: 50%;
+}
+
+.Header-title {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.Header-search {
+  padding: 0 10px;
+}
+
+.Text::after {
+  clear: both;
+  content: "";
+  display: block;
+}
+
+.Text .Img {
+  height: auto;
+}
+
+.Text .Img.left {
+  float: left;
+  margin: 5px 20px 10px 0;
+}
+
+.Text .Img.right {
+  float: right;
+  margin: 5px 0 10px 20px;
+}
+
+.Text .Img.left, .Text .Img.right {
+  max-width: 50%;
+}
+
+.Text .Img.center {
+  display: block;
+  margin: 20px auto;
+}
+
+.Text a,
+.Text a:visited,
+.TextLink,
+.TextLink:visited {
+  color: #007bff;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.Hero img {
+  height: auto;
+  width: 100%;
+}
+
+.InfiniteLoading-actionArea {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
+.Button,
+.SearchOpenerBtn,
+.InfiniteLoading-btn {
+  background-color: #3498db;
+  border: 1px solid #3498db;
+  border-radius: 5px;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-size: 16px;
+  margin: 10px 0;
+  padding: 10px 20px;
+  text-align: center;
+  text-decoration: none;
+}
+.Button:hover,
+.SearchOpenerBtn:hover,
+.InfiniteLoading-btn:hover {
+  background-color: #2980b9;
+  border-color: #2980b9;
+}
+
+.SearchOpenerBtn {
+  display: flex;
+}
+
+.Navbar {
+  align-items: center;
+  display: flex;
+  flex-grow: 1;
+  justify-content: center;
+  margin: 0 15px;
+}
+
+@media (max-width: 768px) {
+  .Navbar {
+    flex-basis: 100%;
+    order: 3;
+    margin: 10px 0 5px;
+    justify-content: flex-start;
+    overflow-x: auto;
+    padding-bottom: 5px;
+  }
+}
+
+.NavButton {
+  color: rgba(255, 255, 255, 0.85);
+  padding: 8px;
+  margin: 0 4px;
+  border-radius: 4px;
+  font-size: 17px;
+  font-weight: bold;
+  position: relative;
+  transition: all 0.2s ease;
+}
+
+.NavButton:hover {
+  color: #fff;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.NavButton.active {
+  color: #fff;
+}
+
+.NavButton.active::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 16px;
+  right: 16px;
+  height: 3px;
+  background-color: #3498db;
+  border-radius: 1.5px;
+}
+`;
+}

package/gen-backend/dist/generator/site-schema-generator/create-site-schema.js

@@ -9,6 +9,7 @@ export function createSiteSchemaFromAnalysis(analysis) {
             "@paroicms/content-loading-plugin",
             "@paroicms/public-menu-plugin",
             "@paroicms/contact-form-plugin",
+            "@paroicms/video-plugin",
         ],
         nodeTypes: [
             {

package/gen-backend/dist/lib/generator-context.js

@@ -0,0 +1,14 @@
+export function createCommandContext(service, pluginConf, rawContext) {
+    const packConf = service.connector.getSitePackConf(pluginConf.packName);
+    const { sitesDir, packName } = packConf;
+    if (!sitesDir) {
+        throw new Error(`Site-generator plugin can generate sites only for pack with "sitesDir", but pack "${packName}" doesn't have it`);
+    }
+    return {
+        ...rawContext,
+        sitesDir,
+        packName,
+        service,
+        logger: service.logger,
+    };
+}

package/gen-backend/dist/plugin.js

@@ -31,7 +31,7 @@ const plugin = {
             modelName: "claude-3-7-sonnet-20250219",
             anthropicApiKey: pluginConf.anthropicApiKey,
             temperature: 0.1,
-            maxTokens: 4096,
+            maxTokens: 6500,
             clientOptions: {
                 timeout: 60_000,
             },
@@ -40,7 +40,7 @@ const plugin = {
             modelName: "claude-3-7-sonnet-20250219",
             anthropicApiKey: pluginConf.anthropicApiKey,
             temperature: 0.1,
-            maxTokens: 4096,
+            maxTokens: 3000,
             clientOptions: {
                 timeout: 20_000,
             },

package/gen-backend/prompts/0-context.md

@@ -1,4 +1,4 @@
-We use **ParoiCMS** technology. With this technology, a web page is called a **document**. A website is a tree of documents. The home page is a document, the site section with news posts is a document, each post is a document. Each document has its own path in the URL.
+We use **ParoiCMS** for creating a website. With this technology, a web page is called a **document**. A website is a tree of documents. The home page is a document, the site section with news posts is a document, each post is a document. Each document has its own path in the URL.
 
 There is a special kind of documents that we want to detect: **routing documents** are the site sections. They can't be duplicated. They are never items of a list. For example, the homepage document, the search-page document, the "about us" document, the parent page of blog posts are _routing documents_. Other documents are **regular documents**, and they are always items of a list.
 
@@ -6,4 +6,6 @@ A document always has the following base attributes: a localized _title_, a _pub
 
 A document can contain lists of **parts**. A _part_ is a sub-section of a document, or of another _part_. A part always has a _publish date_ and a _draft_ flag. It may contain a sequence of fields and/or a sequence of child parts. A part is always an item of a list.
 
-Important: In the current version, we don't support any taxonomy. No categories, no tags etc.
+Any routing document which is parent of regular documents can be used as a **taxonomy**. Then, the terms are the regular child documents. Then a taxonomy can be used in any document or part, by declaring a **labeling field**.
+
+Documents and parts are **nodes** in a tree. Children are part of the definition of a node type. When 2 node types appear identical, but their children types are not the same, then they are 2 different node types and they should have 2 different names.

package/gen-backend/prompts/new-site-1-analysis.md

@@ -30,16 +30,17 @@ For this second step, follow these instructions for creating the bullet list:
 
 1. Carefully read and analyze the website description.
 2. Identify the main documents and parts of the website.
-  - Notice: Children are part of the definition of a node type. When 2 node types appear identical, but their children types are not the same, then they are 2 different node types and they should have 2 different names.
 3. Determine the hierarchical relationships between documents and parts.
 4. Create a tree structure using a limited Markdown format to represent the website's tree structure.
 
+Whenever you have a choice, keep it simple. If the user is not directive, if he gives a general and vague instruction, for example with a short prompt like “create a blog”, then limit the site sections to two main entries (in the example of a blog, a list of posts and a list of pages). Plus the usual contact and search pages.
+
 Guidelines for creating the hierarchical bullet list:
 
 - Write in English.
   - But, if the website description is not in English: do not translate book or post titles.
 - Use a Markdown syntax. Indent with 2 spaces. Use indentation to show parent-child relationships between node types.
-- Always include a homepage with key `home` at the top level.
+- Always start with the homepage, with key `home` at the top level.
 - When you define an identifier for a node type name or a list name, use camel case and follow the identifier syntax of JavaScript.
   - Use `contactPage` as the default type name for contact page, and `searchPage` for the search page.
 - Bullet point format for a _routing document_:
@@ -100,7 +101,9 @@ Here's an example of correct output using parts, and with the default contact an
 * `home` (routing document)
   * list of `homeSection` (parts), list name: `homeSections`
   * `news` (routing document)
-    * list of `article` (regular documents)
+    * list of `post` (regular documents)
+    * `tags` (routing document)
+      * list of `tag` (regular documents)
   * `pages` (routing document)
     * list of `page` (regular documents)
       * list of `pageSection` (parts), list name: `pageSections`
@@ -125,6 +128,7 @@ Guidelines for creating the dictionnary YAML:
   - ogType: (optional, and document only) If you think of a particular Open-Graph type for this document, give it here.
   - label: A label of the node type, in the _website language_.
   - description: A description (5-40 words) for describing the purpose and theme of the node type. Write it in the _website language_.
+  - prompt: This is an optional property. If there is an information to process later about this node type (a description of fields), then write it here. Keep is short.
 - For a list type (only for part list, never for document list), provide the following properties:
   - confidence: Your confidence level for the accuracy of this node type (0.0-1.0).
   - kind: Must be `partList`.
@@ -155,14 +159,26 @@ news:
   kind: routingDocument
   entryPage: true
   label: News
-  description: This is the blog section of the website. The news document contains all the topical articles.
-article:
+  description: This is the blog section of the website. The news document contains all the topical posts.
+post:
   confidence: 0.8
   kind: regularDocument
   temporal: true
   ogType: article
-  label: Article
-  description: A topical article about the subject of the website whatever it is.
+  label: Post
+  description: A topical post about the subject of the website whatever it is.
+  prompt: Add a labeling field using the tags taxonomy
+tags:
+  confidence: 0.9
+  kind: routingDocument
+  label: Tags
+  description: Tags taxonomy for post documents.
+tag:
+  confidence: 0.9
+  kind: regularDocument
+  temporal: true
+  label: Tag
+  description: A tag is a term in the tags taxonomy.
 pages:
   confidence: 0.9
   kind: routingDocument

package/gen-backend/prompts/new-site-2-fields.md

@@ -33,6 +33,7 @@ Guidelines for creating the dictionnary YAML:
   - By default, for most of node types, if you are not sure about what could be the best fields, then remember that a document is a webpage and just use a `[htmlContent]`.
   - Except if there are specific instructions in the website description, here is the default value for the `_site` node type: `["logo", "footerMention"]`.
 - Gallery of medias: there is a predefined field named `"gallery"`. It contains a list of medias. The theme can render it as a carousel, a slider, an image gallery, a slideshow, etc.
+- This task is about predefined fields only. Custom fields will be added in a further step.
 
 Here is an example of expected output:
 

package/gen-backend/prompts/update-site-schema-2-execute.md

@@ -73,7 +73,23 @@ Important:
 - Never add an unknown predefined field.
 - The type name of the "site" node type is omitted from the JSON but its value is always `_site`.
 
-# 3. Examine the current JSON data, which conforms to the `JtSiteSchema` type:
+# 3. Labeling fields (using a taxonomy)
+
+A labeling field lets the user assign taxonomy terms to a document (or part).
+
+<field_type_example>
+{{
+  "name": "tags",
+  "localized": false,
+  "storedAs": "labeling",
+  "taxonomy": "tags",
+  "multiple": true
+}},
+</field_type_example>
+
+Most of the time, the field name will be the same as the taxonomy type name.
+
+# 4. Examine the current JSON data, which conforms to the `JtSiteSchema` type:
 
 <site_schema_json>
 {siteSchemaJson}
@@ -85,19 +101,19 @@ Also, the attached locales:
 {l10nJson}
 </l10n_json>
 
-# 4. Now, here is what to do:
+# 5. Now, here is what to do:
 
 <user_request>
 {taskDetailsMd}
 </user_request>
 
-# 5. Guidelines
+# 6. Guidelines
 
 - Don't assume how the CMS works. If you are not sure how to do something, don't do it.
 - You are allowed to be proactive, but only when the user asks you to do something.
 - Remember to adhere strictly to the TypeScript typing when making changes. If the update message requests changes that would violate the typing, then prioritize maintaining the correct structure over making those specific changes.
 
-# 6. Output
+# 7. Output
 
 If there is a change in the site schema, then provide the updated site schema in JSON within <updated_site_schema_json> tags. Otherwise, let this tag empty.