Atom 1.0 and Atom Validation

RSS and RSS Validation

Hi, welcome to my code. I'm Milton Bolonha, web developer, software engineer and designer. I also like to write books (philosophy, teen science fiction and programming learning).

Summary

1. Milton Bolonha
2. What is this?
3. When should I use this?
4. Examples
5. Prerequisites
6. Manual Installation
7. Project Structure
8. Static Export
9. Tech Stack
10. Pipelines
11. GitHub Installation Steps
12. Netlify Deploy Steps
13. SendGrid Integration
14. Managing Posts
15. Managing Pages
16. Business Settings
17. Site Settings
18. Theme Settings
19. Logos Upload
20. Main Menu
21. Link Tree
22. Our Features
    • Commercial Advantages
    • Integrations
    • Development Technologies
    • Blog Features
    • Web Coding
    • Code Flow
    • Code Quality
    • PageSpeed
    • Optimization
    • Standard Documentations
23. Contact Info

---

---

Hi, I'm Milton Bolonha and I've been developing websites since 1998.

As a specialist, I curate and implement sustainable code. I have unique knowledge of the technology market. I work as a technology manager with proficiency in document management and optimizing advertising reach. I direct investments and make strategic decisions in marketing, advertising, and branding.

I have extensive experience in the Brazilian and global technology market. I am an Artificial Intelligence engineer, an open-source project manager, and I teach programming.

Professional Summary

This book is an initiative of mine, technology mentor Milton Bolonha.

I have been a programmer and designer since 1998, a philanthropist since 2007, an Amazon best-selling author since 2018, and a "Top Rated" software engineer on UpWork since 2018.

I started learning to program at the age of 11 in the late '90s. I have always been self-taught and had to develop my own methods for understanding web programming.

Since then, I have developed literally thousands of websites, applications, and systems. My boldest career move was trying life in the capital city of São Paulo for the first time, leaving a town with a population of 20,000. And it worked!

From São Paulo to many other places. I also went through global financial crises, constant and devastating political crises in this field, and a pandemic.

I am a volunteer teacher in philanthropic services and have always loved making a difference in the lives of the people around me.

Over these years, with an extensive career in web development, I had opportunities both in Brazil and abroad, being nationally recognized as a programmer in the United States, Italy, and France.

Based in San Francisco, CA, USA, I am part of the GitHub Developer Program, which means I will provide you with all the GitHub support you need.

Through the 100 Open Startup program, I was hired by the healthcare giant HapVida for online technology consulting.

My startup Edu4Dev was evaluated by ACBOOST 22 of the São Paulo Commercial Association. Edu4Dev stood out with above-average product and governance in the program.

I worked for over 2 years at the American web agency Green Hat Web Solution. Green Hat is an agency specializing in WordPress.

Descola is an innovative startup in the field of courses, and its main partner is Cubo Itaú. They use technology created by me on their blog, with the same standards used in this book.

I have a long career in volunteer services, starting this passion in Paraíba between 2007 and 2009 with philanthropic (non-paid) work in various cities in the state.

Testimonials

See below what people are saying about my technology and work. These are real testimonials from my clients:

"Milton is clearly on a different level, GOAT!"

• Renato Q., Portugal (Creativity Block Agency)

"This guy is a code rockstar. I recommend him! :) Also, a very relaxed and communicative person. We will definitely work with him again. FIVE STARS!"

• Federico H., Milan, Italy (Figmenta Agency)

"Milton is a very talented developer. I hired him many years ago and know him well. Milton's skills are very high. I recommend him."

• Ryan M., Denver, USA. (Green Hat Web Solutions Agency)

"Great! Good communication and quick work. I recommend."

• Jordane P., France.

"Milton helped us optimize our Gatsby site and resolve our build issues. Great job!"

• Nathan P., Richmond, USA.

"Milton is an excellent professional and definitely an expert in Gatsby. He has good code quality and attention to deadlines."

• Gustavo P., São Paulo, BR.

"Solid development. Thank you!"

• Emily W., Hollywood, Los Angeles, USA.

"Milton is a great designer and developer. He is extremely talented in WordPress, Git, and Gatsby. I highly recommend Milton."

• Ken Miller, Denver, USA.

"Very good developer to work with. Fast, efficient, and knowledgeable. Certainly recommend and want to work with him again."

• Gustavo O., Brasília, BR.

---

This is the culmination of my two decades of experience in web development. Over the past five years, I've dedicated myself to researching and studying React, serverless architectures, and static websites.

This project integrates the best practices and insights gained from this extensive journey, offering a robust and versatile foundation for modern web applications.

This boilerplate is ideal for:

• Rapid Prototyping: Quickly set up a new project with a solid foundation that includes modern tools and best practices.
• Static Websites: Perfect for creating static sites with dynamic functionalities, leveraging serverless architecture to minimize costs and maximize performance.
• React Applications: Use this boilerplate to kickstart your React projects with a well-organized structure, pre-configured settings, and common utilities already in place.
• Learning and Experimentation: For developers looking to learn more about React, serverless functions, and static site generation, this project serves as an excellent learning tool with practical implementations.
• Production-Ready Deployments: Whether you're building a personal project, a startup, or a large-scale enterprise application, this boilerplate provides the scalability and flexibility needed for production environments.

By using this boilerplate, you can streamline your development process, reduce setup time, and focus on building unique features and functionalities.

Who is using:

• https://boilerplate-times.netlify.app
• https://www.edu4.dev/
• https://blog.descola.org/
• https://ruun.com/
• https://www.boilerplate-times.netlify.app/
• https://github.com/miltonbolonha/gatsby-theme-v5-boilerplate/
• https://miltonbolonha.com.br/

Boilerplate Quality Proofs and Tests

• Features: https://github.com/miltonbolonha/boilerplate-times/blob/master/README.md#our-features
• Demo: https://boilerplate-times.netlify.app
• Production: https://moderntips.com/
• Sitemaps: https://boilerplate-times.netlify.app/sitemaps.xml
• PageSpeed: https://pagespeed.web.dev/analysis/https-boilerplate-times-netlify-app/quvfc4swsb?form_factor=desktop
• Schema Validator: https://validator.schema.org/#url=https%3A%2F%2Fboilerplate-times.netlify.app%2Fsecrets-revealed-how-seniors-are-snagging-affordable-dental-implants%2F
• MetaTags: https://metatags.io/?url=https%3A%2F%2Fboilerplate-times.netlify.app%2Fshocking-news-get-paid-to-become-a-nurse-discover-fully-funded-nursing-programs%2F
• Documentation: https://github.com/miltonbolonha/readme-boilerplate/blob/main/README.md

---

This documentation should provide a comprehensive guide for setting up and running your Boilerplate Times blog project using GitHub and Netlify.

Boilerplate Times is a modern blog project built with Next.js, leveraging npm workspaces and GitHub Actions to create a modular, efficient, and easy-to-maintain architecture.

Prerequisites

• Git
• Node.js
• npm
• GitHub account
• Netlify account
• Cloudinary account

Manual Installation

1. Clone the repository:

bash git clone https://github.com/miltonbolonha/boilerplate-times.git my-boilerplate-times-folder cd my-boilerplate-times-folder

1. The following variables must be changed in the ./content/public/admin/config.yml:3,5,12,13 file:

• site_domain;
• Git repo;
• Cloudinary cloud_name;
• Cloudinary api_key.

1. Install the dependencies:

bash npm install

1. Run the app:

Development:

The website will be available at http://localhost:3000.

bash npm run dev

Build:

bash npm run build

---

Key Files and Directories

.
├──  📂 content/             # Content files (md, json, cache and public folder)
│    ├── cache/
│    ├── pages/
│    ├── posts/
│    ├── styles/
│    └── public/
│        └── admin/config.yml
├──  📂 core/                # Next.js and sync files
│    ├── public/
│    ├── lib/
│    └── src/
│        ├── containers/     # Logic of the components
│        ├── components/     # Visual components
│        ├── pages/
│        ├── lib/
│        └── styles/
│        └── templates/
│    └── next.config.js
├──  📂 .github/             # Cron Jobs (auto sitemap.xml)
│    └── workflows/
│        └── sitemaps-on-commit.yml
├── .gitignore
├── package.json
└── README.md

.github/workflows/*.yml

Contains YAML files defining GitHub Actions workflows, such as netlify-build-YYYY-MM-DD.yml, which trigger future builds on Netlify on specified dates.

./content

The content folder houses all the content files, including markdown, JSON, cache, and the public folder. It is organized as follows:

• cache/: Contains cache files for optimization and improved site performance.
• pages/: Stores content files in markdown or JSON format representing site pages.
• posts/: Holds blog post files, usually in markdown format.
• styles/: Includes custom styles that can be applied to the content.
• public/: Public folder where static files are stored. Contains subdirectories like admin/ for admin configuration.
  • admin/config.yml: Configuration file for the admin interface (Decap CMS).

This structure facilitates content management and clearly separates static files, posts, and pages, allowing efficient organization and quick access to necessary resources.

./core

The core folder houses essential Next.js files and other libraries necessary for the project's functionality. The structure is organized as follows:

• public/: Contains public and static files that are served directly by the server.
• lib/: Includes custom libraries and utilities used by the project.
• src/: Main source code folder subdivided into various subfolders for better code organization:
  • containers/: Component logic, including containers that manage state and business logic.
  • components/: Reusable visual components used throughout the application.
  • pages/: Next.js page files that define the application routes.
  • lib/: Project-specific libraries and utilities.
  • styles/: Style files, including CSS and preprocessors like SASS.
  • templates/: Reusable templates for various parts of the application.
• next.config.js: Next.js configuration file defining the custom settings for the application.

The core structure is designed to clearly separate application logic, visual components, styles, and utilities, promoting a clean and modular architecture that facilitates maintenance and scalability of the project.

Digest It - Project Summary

Main Services

• GitHub
• GitHub Actions
• Netlify
• Static Files
• Cloudinary
• ChatGPT

Digest It! Main Pipepline

| Order | Process Name | Description | | ----- | ----------------------- | ----------------------------------- | | 1 | Initialization | Setup environment | | 2 | Processing Inputs | Handle and validate input data | | 3 | AI Content Generator | Generate content using AI | | 4 | Export Static Files | Export files for static site | | 5 | Utilities | Helper methods for various tasks | | 6 | Automation & Scheduling | Automate tasks, schedule processes | | 7 | Sync | Sync files across different systems |

GitHub Actions Interface

| Functionality | Description | | --------------- | ------------------------------------------ | | Watcher | Watch folder to initiate workflows | | Trigger | Monitors json file for workflow triggers | | Schedule | Runs cron jobs to automate scheduled posts | | Auto Post | Automates periodic posting using GPT | | Auto Post 2 | Automates scheduled posting using GPT | | Actions Logs | Logs all actions and workflow activities | | Trigger Updates | Updates based on triggered actions |

``` +---------------------------------------------+ | Main Services | +---------------------------------------------+ | GitHub / GH Actions | | Netlify / Static Files | | Cloudinary / ChatGPT | +---------------------------------------------+

+-----------------------------------+ | Digest It! | +-----------------------------------+ | [Initialization] | | [Processing Inputs] | | [AI Content Generator] | | [Export Static Files] | | [Utilities] | | [Automation & Scheduling] | | [Sync] | +-----------------------------------+

+---------------------------------------------------------------+ | GitHub Actions Interface | +---------------------------------------------------------------+ | Watcher: [ Watches Folders Workflows ] | | Trigger: [ Scan For Update Triggers Workflows ] | | Schedule: [ Cron Jobs For Schedule Post Workflows ] | | Auto Post: [ GPT Periodic Auto Posting System Workflow ] | | Auto Post 2: [ GPT Schedule Auto Posting System Workflow ] | +---------------------------------------------------------------+ | [ Actions Logs ] [ Trigger Updates ] | +---------------------------------------------------------------+ ```

---

What is output: 'export'?

The output: 'export' configuration in Next.js allows for the generation of a static version of your application. Instead of dynamically rendering pages on the server during runtime, all pages are pre-rendered into static HTML files during the build process. These static files can be served by any web server that supports HTML, CSS, and JavaScript, providing an efficient way to host your site.

How Does It Work?

When you enable output: 'export' in the next.config.js file and run the next build command, Next.js generates an out folder containing all the necessary HTML, CSS, and JS files for each route in your application. These pages are generated statically, meaning the content remains fixed until a new build is executed.

Key Benefits

• Optimized Performance: With all pages pre-rendered, initial load times are drastically reduced, providing a faster user experience.

• Enhanced SEO: Static HTML pages are easier for search engines to index, improving your site's SEO.

• Simplified Hosting: The site can be hosted on any service that supports static files, such as GitHub Pages, Netlify, or Vercel, without the need for a Node.js backend.

• Cost Reduction: By eliminating the need for a dynamic server, hosting costs can be significantly reduced.

• Simplified Maintenance: The simplicity of a static site reduces complexity in server maintenance and monitoring.

• Ideal for Static Content: Perfect for sites like blogs, landing pages, documentation, and portfolios where content doesn’t need frequent dynamic updates.

Static export is ideal for projects that don't require real-time dynamic rendering. It's especially useful for pages that remain unchanged until the next build, ensuring superior performance and a consistent user experience.

Server Rendering Benefits

1. Data Fetching: Server-side components allow data fetching to occur closer to the data source, improving performance by reducing fetch times and the number of client requests.

2. Security: Keeping sensitive data and logic on the server, such as tokens and API keys, reduces the risk of exposing them to the client.

3. Caching: Server-side rendering allows results to be cached and reused across requests and users, enhancing performance and reducing costs.

4. Performance Optimization: Server components can reduce the amount of client-side JavaScript needed, benefiting users with slower internet or less powerful devices.

5. Initial Page Load and First Contentful Paint (FCP): Server-side HTML generation allows users to see the page immediately without waiting for JavaScript to download and execute.

6. SEO and Social Network Shareability: Rendered HTML can be used by search engine bots for indexing and social networks for generating previews.

7. Streaming: Server components allow rendering work to be split into chunks and streamed to the client as they become ready, allowing users to see parts of the page earlier.

8. Static Export for IoT: In IoT environments, where devices often have limited processing power and connectivity, serving static content can optimize performance and reduce system complexity.

---

Languages (1)

JavaScript

Frameworks (3)

Next.js v14.2.3

React

Sass

DevOps (3)

Git

GitHub Actions

npm

Software as a Service (SaaS) (1)

Netlify

Other (4)

Moment.js v2.30.1

Showdown v2.1.0

XSLT

date-fns

Open source packages (15)

npm (15)

| NAME | VERSION | LAST UPDATED | LAST UPDATED BY | LICENSE | VULNERABILITIES | | :--------------------------------------------------------- | :------ | :----------- | :-------------- | :------ | :-------------- | | chokidar | v3.6.0 | 05/22/24 | Milton Bolonha | MIT | N/A | | cross-env | v7.0.3 | 06/14/24 | Milton Bolonha | MIT | N/A | | cross-fetch | v4.0.0 | 05/22/24 | Milton Bolonha | MIT | N/A | | fs-extra | v11.2.0 | 05/22/24 | Milton Bolonha | MIT | N/A | | gray-matter | v4.0.3 | 05/22/24 | Milton Bolonha | MIT | N/A | | he | v1.2.0 | 05/22/24 | Milton Bolonha | MIT | N/A | | moment | v2.30.1 | 05/22/24 | Milton Bolonha | MIT | N/A | | react-dom | N/A | 06/05/24 | Milton Bolonha | MIT | N/A | | rehype-stringify | v10.0.0 | 05/22/24 | Milton Bolonha | N/A | N/A | | remark | v14.0.3 | 05/22/24 | Milton Bolonha | MIT | N/A | | remark-gfm | v4.0.0 | 05/22/24 | Milton Bolonha | N/A | N/A | | remark-rehype | v11.1.0 | 05/22/24 | Milton Bolonha | N/A | N/A | | slugify | v1.6.6 | 05/22/24 | Milton Bolonha | MIT | N/A | | unified | v11.0.4 | 06/05/24 | Milton Bolonha | MIT | N/A | | unist-util-visit | v5.0.0 | 08/01/24 | Milton Bolonha | MIT | N/A |

Next.js Comparasion

| | BT | Next SEO | Next Sitemaps | | ---------------------------- | --- | -------- | ------------- | | RSS Generation | ✔️ | ✔️ | - | | Atom Generation | ✔️ | ✔️ | - | | Meta tags | ✔️ | ✔️ | - | | JSON-LD Schema | ✔️ | ✔️ | - | | Sitemap | ✔️ | ✔️ | - | | robots.txt | ✔️ | ✔️ | - | | Link tags | ✔️ | ✔️ | - | | Script optimization | ✔️ | ✔️ | - | | Image optimization | ✔️ | ✔️ | - | | Open Graph | ✔️ | ✔️ | - | | Twitter meta tags | ✔️ | ✔️ | - | | Canonical | ✔️ | ✔️ | - | | Post Article SEO | ✔️ | ✔️ | - | | Sitemap Generation | ✔️ | ✔️ | ✔️ | | Sitemap Visualization | ✔️ | ✗ | ✗ | | Automatic Sitemap Generation | ✔️ | ✗ | ⚠ | | Sitemap Schedule Update | ✔️ | ✗ | ✗ | | Index sitemaps | ✔️ | ✗ | ✔️ | | Kill SEO function | ✔️ | ✗ | - | | Language | ✔️ | ✔️ | - | | Index SEO | ✔️ | ✗ | - | | Page SEO | ✔️ | ✔️ | - | | Super and subscript MD | ✔️ | ✔️ | - | | Blockquote MD | ✔️ | ✔️ | - | | Sanitize Post | ✔️ | ✔️ | - | | Post YouTube Embed | ✔️ | ✔️ | - |

---

1. Pre-Build Sync Pipeline
   1. Create JSON from markdown files
2. Build Pipeline
   1. Generate sitemaps
   2. Generate ads.txt
   3. Generate SCSS files
   4. Sync public files
   5. Clean old GitHub Action files
   6. Schedule posts
3. Post Build GitHub Actions
   1. Schedule posts
   2. Content update

The pipeline structure adopted in this project represents the culmination of two decades of web development experience and five years of intensive research and study in technologies like React, serverless, and static websites. This meticulously designed architecture not only optimizes efficiency but also ensures quality and consistency in site development and maintenance.

Pre-Build Sync Pipeline

The first stage, the Pre-Build Sync Pipeline, involves creating JSON files from markdown files. This conversion is essential to ensure that all content is properly structured and ready for use, preserving the integrity and consistency of the data.

Step 1: Create JSON from Markdown Files

This step involves converting all markdown (.md) files into JSON format. The JSON files are essential for the build process as they provide structured data that can be easily consumed by the application. This process ensures that all content is properly formatted and ready for the subsequent build steps.

Build Pipeline

The second stage, the Build Pipeline, encompasses several critical operations:

Step 1: Generate Sitemaps

Sitemaps are crucial for SEO and ensuring search engines can efficiently index the site's content. This step generates XML sitemaps for both posts and pages, providing a comprehensive map of all the site's content.

Step 2: Generate ads.txt

The ads.txt file is used to declare authorized digital sellers for the site’s ad inventory. This step ensures that the ads.txt file is generated and up-to-date, protecting the site from unauthorized ad sales.

Step 3: Generate SCSS Files

This step compiles SCSS (Sass) files into CSS, ensuring the styles for the site are up-to-date and consistent. This is important for maintaining the look and feel of the site across different pages and posts.

Step 4: Sync Public Files

During this step, all necessary files are synchronized to the Next.js public folder. This includes images, scripts, and other static assets that need to be available publicly. Syncing these files ensures that the latest versions are available to users.

Step 5: Clean Old GitHub Action Files

Old GitHub Action files, particularly those related to scheduled posts, are cleaned up in this step. This helps in maintaining a clean and efficient workflow, preventing any unnecessary or outdated actions from being triggered.

Step 6: Schedule Posts

This step involves creating workflows for scheduled posts using GitHub Actions. It ensures that posts are published at the right times according to the defined schedule, leveraging Netlify build hooks for automated deployments.

Post Build GitHub Actions

After building, GitHub Actions play a vital role:

Step 1: Schedule Posts

This GitHub Action is responsible for triggering Netlify builds based on a defined schedule. It ensures that the site is rebuilt and updated regularly, according to the specified cron job. This helps in maintaining fresh and up-to-date content on the site.

Step 2: Content Update

This action is triggered by updates to the content, specifically changes in the content/posts and content/pages directories. It synchronizes the project, creates necessary JSON and XML files, and commits the changes back to the repository. This ensures that any content updates are promptly reflected in the site's build, maintaining consistency and accuracy.

---

1. Clone the Template Repository

Using a template repository:

1. If you have a repository template, navigate to that repository on GitHub.
2. Click the "Use this template" button.
3. Enter a repository name for your new repository.
4. Optionally, add a description and choose the repository's visibility.
5. Click "Create repository from template".

2. Create a Secret PAT

Create a personal access token:

1. Navigate to your profile Settings in the top right corner of GitHub (your profile picture dropdown).
2. Scroll down to the "Developer settings" section and click on it.
3. Select "Personal Access Tokens" from the left sidebar.
4. Select Read and Write access to actions, code, commit statuses, and workflows.
5. Navigate to Repository Settings > Secrets and variables > Secrets > New repository secret.
6. Paste the token inside a new secret named 'PAT'.

3. Prepare the oAuth App

Create an oAuth Application:

1. Navigate to Settings in the top right corner of GitHub (your profile picture dropdown).
2. Scroll down to the "Developer settings" section and click on it.
3. Select "OAuth Apps" from the left sidebar.
4. Click the "New OAuth App" button.
5. Fill in the application details:
   • Application name: Choose a name for your OAuth application.
   • Homepage URL: Enter the URL of your site (e.g., https://your-site.com).
   • Authorization callback URL: Enter the callback URL, typically something like https://your-site.com/callback.
6. Click "Register application".

Obtain Client ID and Client Secret

• After registering your application, you will be redirected to the application settings page.
• Note down the Client ID and Client Secret from this page.
• You will use these credentials to integrate GitHub authentication with your application.

This section should help you set up your GitHub repository, use a template for your new repository, and create an OAuth application for authentication.

---

1. Create a New Site

Login and Access Websites Dashboard

1. Navigate to the Netlify website.
2. Log in to your account.
3. Once logged in, go to your websites dashboard.

Create a New Site

1. Click on the "New site" button.
2. Link your site to a Git repository.
   • Select the branch to deploy: master.
3. Build settings:
   • Select "Other" and configure manually.
   • Leave all fields blank.
4. Click the "Deploy" button.

2. Fulfill Site Configuration

Build Settings

1. Go to the "Site configuration" section.
2. Set the production branch name to master.
3. Deploy preview: Set to "none".

Branch Deploy

1. Go to the "Branch deploy" section.
2. Ensure the production branch name is set to master.
3. Set deploy preview to "none".

3. Enable Identity Service

Enable Identity Service

1. Navigate to Settings > Identity.
2. Enable the Identity service.

Enable Identity and Git Gateway

Netlify's Identity and Git Gateway services allow you to manage CMS admin users for your site without requiring them to have an account with your Git host or commit access to your repo. Follow these steps from your site dashboard on Netlify:

1. Go to Integrations > Identity > Netlify Identity - Enable.
   • Click "Enable Identity" and proceed to Configuration and Usage.
2. Under Registration, select one of the following:
   • Open: Allows anyone to register.
   • Invite only: Only invited users can access your CMS. This is recommended for most cases, but for testing, you can leave it open for convenience.
3. To allow one-click login with services like Google and GitHub:
   • Check the boxes next to the services you'd like to use under "External providers".
4. Scroll down to Services > Git Gateway.
   • Click "Enable Git Gateway".
   • This will authenticate with your Git host and generate an API access token.
   • Leave the "Roles" field blank to allow any logged-in user to access the CMS. For more information on changing this, refer to the Netlify Identity documentation.

---

---

Introduction

This documentation provides guidance for users and editors on how to use the posts section in the administrative area of the system, available at https://domain/admin. The posts section allows you to create, edit, and manage markdown articles that will be published on the website.

Accessing the Posts Section

1. Login to the System:

• Access the URL: https://domain/admin
• Log in with your admin credentials.

1. Navigate to the Posts Section:
   • In the admin panel, select the "Posts" option from the menu.

Creating a New Post

1. Click on "New Post":

• In the posts section, click the "New Post" button to start creating a new article.

1. Filling in the Post Fields:

• Title:

  • Enter the title of your post.

• Publish Date:

  • Select the date and time you want to publish the post.

• Author:

  • Enter the name of the post's author. The default value is "Boilerplate Times".

• Categories:

  • Add one or more relevant categories for the post.

• Tags:

  • Add tags to help classify and search the post.

• Featured Image:

  • Upload an image to be used as the post's featured image.
  • Access your post at 'https://domain/draft/post-slug'.

• Featured Post:

  • Check this option if you want the post to be highlighted on the homepage or in specific sections of the site.
  • Access your post at 'https://domain/draft/post-slug'.

• Draft Mode:

  • Enable this option if you do not want to publish the post yet and would like to save it as a draft for future edits.

• Body:

  • Write the content of your post using markdown.

Editing an Existing Post

1. Select the Post to Edit:

• In the list of posts, click the title of the post you want to edit.

1. Make the Necessary Changes:
   • Update the fields as needed and click "Save" to apply the changes.

Publishing a Post

1. Review the Content:

• Ensure all fields are filled out correctly and the content is reviewed.

1. Disable Draft Mode:

• If the post is in draft mode, disable it so the post can be published.

1. Save and Publish:
   • Click "Save" to publish the post according to the defined publish date.

Managing Posts

1. View Posts:

• In the posts section, you can view a list of all existing posts, with options to edit or delete each one.

1. Filter and Search:
   • Use the filter and search options to quickly locate specific posts.

---

Introduction

This documentation provides guidance for users and editors on how to use the pages section in the administrative area of the system, available at https://domain/admin. The pages section allows you to create, edit, and manage static pages that will be published on the website.

Accessing the Pages Section

1. Login to the System:

• Access the URL: https://domain/admin
• Log in with your admin credentials.

1. Navigate to the Pages Section:
   • In the admin panel, select the "Pages" option from the menu.

Creating a New Page

1. Click on "New Page":

• In the pages section, click the "New Page" button to start creating a new page.

1. Filling in the Page Fields:

• Title:

  • Enter the title of your page.

• Body:

  • Write the content of your page using markdown.

• Publish Date:

  • Select the date and time you want to publish the page.

• Description:

  • Enter a brief description of the page.

Editing an Existing Page

1. Select the Page to Edit:

• In the list of pages, click the title of the page you want to edit.

1. Make the Necessary Changes:
   • Update the fields as needed and click "Save" to apply the changes.

Publishing a Page

1. Review the Content:

• Ensure all fields are filled out correctly and the content is reviewed.

1. Save and Publish:
   • Click "Save" to publish the page according to the defined publish date.

Managing Pages

1. View Pages:

• In the pages section, you can view a list of all existing pages, with options to edit or delete each one.

1. Filter and Search:
   • Use the filter and search options to quickly locate specific pages.

---

1. Access Business Settings:

• In the settings section, select "Business Settings".

1. Available Fields:
   • Brand Name:
     • Enter the brand name.
   • Brand Description:
     • Enter a brief description of the brand.
   • Brand Phone:
     • Enter the brand's contact phone number.
   • Brand Email:
     • Enter the brand's contact email.
   • Brand Keywords:
     • Enter a list of keywords related to the brand.

---

1. Access General Settings:

• In the settings section, select "Site Settings".

1. Available Fields:
   • Publish Date:
     • Enter the date and time of publication.
   • Site Url:
     • Enter the main URL of the site.
   • Scope:
     • Enter the site's scope.
   • I18n:
     • Set the default language of the site.
   • Ads Client ID:
     • Enter the ads client ID.
   • Google Analytics ID:
     • Enter the Google Analytics ID.
   • Footer Text:
     • Enter the text to be displayed in the footer of the site.
   • Standard Feedback Subject:
     • Set the default subject for feedback.
   • Feedback Email:
     • Enter the email to receive feedback.
   • Feedback Success Message:
     • Set the success message to be displayed after feedback is submitted.
   • Feedback Error Message:
     • Set the error message to be displayed in case of feedback submission failure.

---

This documentation provides guidelines for users and editors on how to use the theme settings section in the administrative area of the system, available at https://domain/admin. The theme settings section allows you to customize various visual aspects of the site, such as colors, headers, pages, and posts.

1. Login to the System:
   • Go to the URL: https://domain/admin
   • Log in with your admin credentials.
2. Navigate to the Theme Settings Section:
   • In the admin panel, select the "Theme Settings" option from the menu.

Customizing Theme Colors

1. Main Brand Color:
   • Description: Set the main color of the brand. Example - #b82632.
2. Background Color:
   • Description: Set the background color of the site. Example - #00ffc1.

Configuring the Header

1. Header Logo Alignment:
   • Description: Align the logo in the header (currently not working). Default: Left. Options: "left", "center".
2. Header Main Menu:
   • Description: Toggle the main menu position (right or above main logo) in the header. Default: true.
3. Header Height:
   • Description: Set the height of the header (currently not working). Default: 60px. Range: 50px to 90px.

Configuring Page Settings

1. Page Max-Width:
   • Description: Set the maximum width of the page. Options: "960px", "1024px", "1100px", "1344px". Default: 1100px.
2. Page Header Padding:
   • Description: Set the padding for the page header. Default: 20px. Range: 0px to 120px.
3. Page Bottom Padding:
   • Description: Set the bottom padding for the page. Default: 30px. Range: 0px to 120px.
4. Bottom Main Menu:
   • Description: Toggle the bottom main menu (currently not working). Default: false.

Configuring Post Settings

1. Posts to Show:
   • Description: Define the number of posts to show on the index page and category pages. Default: 9. Range: 1 to 9.
2. Post Table of Content:
   • Description: Enable or disable the table of content for posts. Default: true.
3. Related Posts - Right Column:
   • Description: Show related posts in the right column. Default: true.
4. Related Posts - Bottom Line:
   • Description: Show related posts at the bottom. Default: true.

---

1. Access Logos Settings:
   • In the settings section, select "Logos Upload".
2. Available Fields:
   • Main Logo:
     • Upload the main logo.
   • Main Logo - WxH:
     • Define the dimensions of the main logo.
   • Favicon:
     • Upload the favicon.
   • Mark Logo:
     • Upload the mark logo.
   • Shareable Card:
     • Upload the image for social media sharing.
   • Post Author Image:
     • Upload the post author's profile image.

---

1. Access Main Menu Settings:
   • In the settings section, select "Main Menu".
2. Available Fields:
   • Main Menu Items:
     • Add, edit, or remove items from the main menu.
     • Label:
     • Enter the label of the menu item.
     • Href:
     • Enter the link of the menu item.

---

1. Access Link Tree Settings:
   • In the settings section, select "Link Tree".
2. Available Fields:
   • Link Tree Items:
     • Add, edit, or remove items from the link tree.
     • Label:
     • Enter the label of the link tree item.
     • Href:
     • Enter the link of the link tree item.

---

Free Techs

Utilize free and open-source technologies to build robust applications without incurring additional costs. This allows you to innovate and develop high-quality software without a large financial investment.

Easy Maintenance

Simplify ongoing updates and optimize development using smart code, low-code techniques, and human-friendly code. This reduces the complexity of maintaining and updating your application.

Node.js

Leverage the power of Node.js for fast, scalable, and efficient websites and applications. Node.js is renowned for its performance and ability to handle large-scale, real-time applications.

Great SEO

Enhance your online visibility with built-in SEO optimization, ensuring your content ranks higher in search engine results. This helps attract more organic traffic to your site.

High Performance

Achieve superior performance and speed, delivering a seamless user experience. High-performance applications retain users and improve satisfaction.

Automation

Streamline processes with automated workflows, reducing manual effort and increasing efficiency. Automation helps maintain consistency and reliability in your operations.

Theme System

Manage your own theme easily. Customize and update your website's look and feel without hassle, ensuring it always meets your brand standards.

Design Patterns

Utilize proven design patterns to solve common problems and improve the structure of your code. This leads to more maintainable and scalable applications.

Decap CMS

Manage your content effortlessly with Decap CMS, providing a simple and intuitive interface for content creation and management.

SendGrid

Integrate SendGrid to handle your email marketing needs, ensuring reliable and efficient email delivery.

Cloudinary

Optimize and manage your media assets with Cloudinary, offering powerful tools for image and video manipulation.

Google Tag Manager

Easily manage and deploy marketing tags on your website with Google Tag Manager, simplifying the tracking and analytics process.

Google AdSense

Monetize your website with Google AdSense, displaying relevant ads and generating revenue from your online content.

Google Analytics

Gain insights into your website traffic and user behavior with Google Analytics, helping you make informed decisions to improve your site's performance.

Netlify

Deploy modern web projects with ease using Netlify. Enjoy seamless integration, automated builds, and global delivery for high-performance websites and applications.

GitHub Template

Streamline your development with GitHub Templates designed for one-click startup launch.

Cron Jobs

Automate recurring tasks seamlessly using Cron Jobs to improve efficiency.

Node.js

Leverage the power of Node.js for fast, scalable applications. Node.js, along with JavaScript, is the most popular programming tool in the world.

NPM Workspace

Organize and manage your projects efficiently with a structured NPM workspace.

React.js

Build dynamic user interfaces with React.js, enhancing user experience. React.js, along with Node.js, is the most popular web programming tool in the world.

Next.js

Develop robust React applications with Next.js for optimal performance. Next.js secured the 3rd position as the most desired framework, just below Node.js and React, and it jumped from the 11th position in 2022 to an impressive 6th position this year. Trusted by Netflix, Twitch, GitHub, Uber.

Arrow Functions

Simplify your JavaScript code with concise and clear arrow functions.

Markdown Posts

Create and manage content easily with Markdown posts, allowing simple formatting.

Sass

Advanced CSS capabilities, making your stylesheets more powerful and maintainable.

Theme

Easily manage and customize your website's themes for a consistent and appealing look.

Posts

Manage and publish your blog posts effortlessly.

Featured Posts

Highlight your top content to engage readers.

Posts Archive

Organize and access past articles easily.

Scheduled Posts

Automate publishing with scheduled posts.

Geo Title

Customize titles based on user {{city}} or {{state}} location.

Anchor Title

Enable quick navigation with anchor titles.

Ads Structure

Optimize ad placement for better revenue.

Table of Content

Enhance readability with a clear table of contents.

Sanitize

Ensure data integrity and security by sanitizing inputs to prevent malicious code injection.

Share SEO

Optimize content for social sharing with meta tags to improve your card visibility.

Sitemaps

Automatically generate sitemaps to help search engines crawl and index your site effectively.

Pages

Create and manage static pages.

Contact Form

Collect user inquiries and feedback through customizable contact forms.

Community Standards

Maintain high-quality contributions and collaboration with community standards.

GDPR Fonts

Use GDPR-compliant fonts to ensure data privacy, security, and avoiding Google fonts.

gTag Hit Counter

Track website visits and interactions with a Google Tag Manager hit counter.

Serverless

Modern serverless architecture for scalable, efficient, and cost-effective application deployment.

Static Website

Generate fast, secure, and powerful static websites (HTML/CSS/JS) with pre-rendered pages.

Sync Core

Synchronization across core components for consistent performance.

Tiny Bundle

Optimized application performance with reduced bundle sizes.

Logic Containers

Encapsulate business logic in reusable and maintainable containers.

Public

Manage and sync public assets for streamlined content delivery.

Lines of Code

This JavaScript project has only 3.3k lines of code.

Quality Gate (Passed)

Ensures code meets all set quality standards.

Vulnerabilities (0)

No security vulnerabilities detected in the codebase.

Maintainability (A)

High maintainability rating, indicating well-structured and easy-to-modify code.

Security (A)

Top security rating, ensuring robust protection against threats.

Duplicated Lines (0%)

No duplicated lines of code, promoting clean and efficient coding practices.

Sonar Cloud Guarantee (100%)

Full assurance of code quality and compliance through Sonar Cloud.

Performance (M: 95% / D: 100%)

Excellent performance scores for both mobile and desktop.

Accessibility (M: 100% / D: 100%)

Perfect accessibility rating across all devices.

Best Practices (M: 100% / D: 100%)

Adheres to all best practices for web development.

SEO (M: 100% / D: 100%)

Optimal SEO performance for maximum visibility.

Google PageSpeed (99%)

Perfect PageSpeed score, ensuring fast load times.

GTmetrix Grade (A)

Achieved the highest GTmetrix grade.

Performance (100%)

Top performance score, ensuring swift load times.

Structure (100%)

Perfect structural integrity of the site.

LCP (768ms)

Fast Largest Contentful Paint, indicating quick loading of main content.

TBT (0ms)

Zero Total Blocking Time, ensuring smooth interactivity.

CLS (0)

No layout shifts, providing a stable visual experience.

Readme

The README file serves as the first point of contact for users and developers interacting with your project. It provides a comprehensive overview of the project, including its purpose, how to set it up, and how to contribute.

Code of Conduct

The Code of Conduct outlines the expected behavior for contributors and participants in the project’s community. It helps create a welcoming and inclusive environment.

Contributing

The CONTRIBUTING file provides guidelines for those who want to contribute to the project. It includes information on the development process, coding conventions, and how to submit changes.

License

The LICENSE file specifies the terms under which the project’s code can be used, modified, and shared. It provides legal protection for both the project maintainers and users.

Security Policy

The SECURITY file outlines the procedures for reporting and addressing security vulnerabilities in the project. It helps ensure that security issues are handled promptly and appropriately.

Issue Templates

Issue templates help standardize the way issues are reported in your project, ensuring that all necessary information is provided. This makes it easier for maintainers to understand, reproduce, and resolve the issues.

Pull Request Template

A pull request template helps contributors provide all the necessary information when submitting a pull request, making it easier for maintainers to review and merge changes.

---

Call me: miltonbolonha@gmail.com