Overview

neeto-templates-nano serves as an incredibly flexible and user-friendly template builder within the Neeto ecosystem. In this blog post, we will explore the evolution from previous approaches to the development of neeto-templates-nano and how it effectively addresses the challenges encountered.

Evolution of templates at NeetoSite

NeetoSite is a website builder.

Before the advent of neeto-templates-nano, NeetoSite relied on three tables - templates_sites, templates_pages, and template_blocks to store site, page, and blocks data for templates. This structure duplicated the schema already employed in NeetoSite for sites, pages, and blocks, resulting in redundancy.

Another challenge arose with the storage of each template in a YAML file, necessitating a custom rake task for maintenance. Tasks like updating templates, such as changing font families, required laborious manual edits to every YAML file, affecting scalability and maintainability.

This YAML snippet portrays the complexity of maintaining templates. The need for manual edits in each YAML file hampers scalability and maintainability.

1## Example of a template in YAML format
2name: Document Signer
3keywords: "E-signature, AI, Cost effective, Paperless"
4pages:
5  - name: "Home"
6    url: "/"
7    blocks:
8      - name: "header_with_logo_title"
9        category: "header"
10        kind: "header_with_logo_title"
11        identifier: "Header"
12        configurations:
13          design:
14            body:
15              border:
16                borderColor: "#FFFFFF"
17                borderStyle: none
18                borderWidth: 0
19              backgroundColor: "#FFFFFF"
20              paddingVertical: 8
21              paddingHorizontal: 48
22            logo:
23              height: 52
24            links:
25              color: "#1F2433"
26              fontSize: "1em"
27              fontFamily: Lato
28              fontWeight: 500
29              letterSpacing: 0
30            buttons:
31              color: "#ffffff"
32              border:
33                borderColor: "#f4620c"
34                borderStyle: solid
35                borderWidth: 1
36              fontSize: "0.875em"
37              fontFamily: Open Sans
38              fontWeight: 500
39              borderRadius: 9999
40              letterSpacing: 0
41              backgroundColor: "#f4620c"
42            logoTitle:
43              color: "#1F2433"
44              fontSize: "0.875em"
45              fontFamily: Inter
46              fontWeight: 500
47              letterSpacing: 0
48            hamburgerMenu:
49              color: "#000000"
50          properties:
51            logo:
52              alt: Max Chat
53              url: "#!"
54              title: ""
55            links:
56              - to: "#Clients"
57                label: Clients
58                action: internal
59              - to: "#Insights"
60                label: Insights
61                action: internal
62            position: sticky
63            enableAnimation: true
Copy

Recognizing these challenges, we opted for a more scalable and maintainable solution.

The neeto-templates-nano solution

Eliminating redundancy

To streamline template creation and management, neeto-templates-nano introduces a comprehensive solution. It includes a frontend package, @bigbinary/neeto-templates-frontend, and a ruby gem, neeto-templates-engine (private gem).

Architecture

The architecture addresses redundancy by whitelisting the templates organization for template creation. Once a site is constructed from the templates organization and published, it becomes a template accessible from other organizations.

In this illustration, we've published 5 sites at templates organization of NeetoSite. After publication, the sites become accessible to users across all organizations. Choosing any template will clone it from the templates organization to the user's organization. This straightforward mechanism simplifies the management and sharing of templates across different organizations.

The CreateTemplateModal exported from @bigbinary/neeto-templates-frontend, allows users to see and select templates when creating a new site.

This GIF shows how simple it is to browse through available templates using the CreateTemplateModal. Users can preview templates, pick the one that suits their needs, and quickly start their projects without reinventing the wheel.

Advantages of porting to neeto-templates-nano

1. Effortless Template Management: With neeto-templates-nano, managing templates is a breeze. Administrators can easily add, update, or delete templates by accessing the templates organization and simply publishing the changes. This streamlines the template lifecycle, ensuring that users always have access to the latest versions.

2. Enhanced Template Customization: neeto-templates-nano introduces new customizations which enables administrators to add tags and cover images for templates directly within the templates organization. This functionality enhances the visual appeal of templates and facilitates better organization and searchability. Administrators can tailor templates to specific project requirements, improving overall user experience and productivity.

Implementation across Neeto products

neeto-templates-nano has seamlessly integrated into NeetoForm and NeetoSite, offering a standardized approach to template management across all Neeto products.