Quick Start Guide for Layout Generation:

1. Install the CLI:

   If you haven't already, install the hmgo-cli globally:

   npm install -g hmgo-cli

2. Navigate to your Project Directory:

   Open your terminal and navigate to the root directory of your HMGO project.

3. Change Directory to src/app:

   Ensure you are in the src/app folder of your project before running the layout creation command. This is the recommended location to store your layouts.

4. Run the create-layout Command:

   Use the following command, replacing <layout-name> with the desired name for your layout:

   npx hmgo-cli create-layout <layout-name>

   For example:

   npx hmgo-cli create-layout marketing-layout

5. Explore the Generated Layout:

   A new folder with the specified name will be created in the src/app directory, containing the basic structure and example files for your layout.

6. Customize your Layout:

   • LayoutConfig.ts:
     • This file is the central configuration file for your layout.
     • It defines the pages, navigation, and data providers of your layout.
     • Contents:
       • layouts: Defines the layout components used (e.g., RootLayout).
       • navItems: Defines the navigation items of your layout.
       • pages: Defines the page components and their associated data providers.
       • dataProviders: Defines the data providers used by the pages.
   • layouts/RootLayout.tsx: Define the overall structure of your layout, including header, footer, and navigation.
   • pages/: Add your page components.
   • components/: Create reusable components.
   • styling/: Add your custom styles.
   • dataproviders/: Implement custom data providers.
   • [[...slugs]]/page.tsx: Defines the dynamic page generation.
   • [[...slugs]]/layout.tsx: Defines the dynamic layout selection.
   • dataproviders/PageDataProvider.tsx: Defines an example data provider.

Features

• Creates the basic folder structure for an HMGO layout.
• Generates a LayoutConfig.ts file with example configuration.
• Creates a layouts/RootLayout.tsx file with a simple layout example.
• Creates a pages/HomePage.tsx file as an example starting page.
• Creates a pages/MorePage.tsx file as an additional example page.
• Creates dynamic routing files in the [[...slugs]] folder.
• Creates an example data provider in the dataproviders folder.

Contributing

Contributions are welcome! Please create a pull request to suggest changes.

License

MIT

Author

Marvin Biesenbach