Basic info

Engrafia uses a file system to organize,, and create categories, and menus, so, you don't need to worry about routes, menus, or other things, every file becomes a new menu entry, and every folder becomes a category menu. If you want to organize your menu, you can add position property in metadata, this metadata will organize the order of menu items.

Another important thing, is that Engrafia uses md, and mdx files to create contents, and javascript files to create custom pages, like 404, home.

Content folder

All contents should be in pages folder, following the versioning rules, if it's the case.

mdx
engrafia-app


- pages
  - 0.0.0
    - page-examples
  - 0.0.1
    - page-examples

app.js

_app.js is the entry file of an Engrafia application, there are not many configurations to do in this file unless you want to use your theme, and customize the global style.

document.js

As _app.js, _document.js does not have much customization, unless you need to customize styles.

Do not put meta tags, or link styles here, those things should be in theme.config.js.

jsx
import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { CssBaseline } from '@nextui-org/react';
import { GlobalStyles } from 'engrafia';


export default class CustomDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return {
      ...initialProps,
      styles: React.Children.toArray([initialProps.styles]),
    };
  }


  render() {
    return (
      <Html>
        <Head>
          {CssBaseline.flush()}
          {GlobalStyles()}
          <link href="https://css.gg/link.css" rel="stylesheet" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

Translations

Engrafia supports Next i18n out of the box, so, you don't have to learn a new way to do that.

To create documentation with internationalization, you need to create a file for every language that you want to use on it, public/locales/en.json.

json
{
  "description": "This is a description",
  "link.docs": "Documentation",
  "link.github": "Github",
  "edit.content": "Edit this content",
  "table.of.content": "Page content",
  "search.placeholder": "Search..."
}

theme.config.js

This file is the main file configuration, this file should not be deleted, it's responsible for config menus, basic information about the website, metadata, tags, and more.

sidebar.json

Sidebar menu configuration is auto-generated by the file system, which means you don't need to create a configuration for that, just create folders, and md, and mdx files, and the file system will generate a file to represent the sidebar configuration.