Project Structure & File Rules (V0)¶

Ekit Studio organizes template files in a simple and predictable structure. This ensures clarity for users, consistency across projects, and a smooth learning curve.

Note: In the current version (V0), subfolder creation is not allowed. This keeps project structures clean and avoids complexity while the tool is still evolving.

1. Project Structure¶

The default template structure includes:

assets/              # Static assets
├─ css/              # Stylesheets
├─ images/           # Images (png, jpg, svg...)
└─ js/               # JavaScript

i18n/                # Static translations (JSON dictionaries)
└─ fr.json            # Example locale file

layouts/             # Page skeletons (.hbs)
partials/            # Reusable components (.hbs)
views/               # Main templates (.hbs)

meta.json            # Project metadata

Each folder has a specific purpose and accepts only certain file types.

2. Allowed File Types per Folder¶

To maintain a clean project and prevent invalid uploads, Ekit enforces file-type rules based on the folder.

Folder	Allowed File Types	Description
`assets/css`	`.css`	Stylesheets for the template
`assets/images`	`.jpg`, `.jpeg`, `.png`, `.gif`, `.svg`, `.webp`	Images used in templates
`assets/js`	`.js`, `.mjs`	JavaScript files
`i18n`	`.json`	Translation dictionaries (used by `ektrans`)
`layouts`	`.hbs`	Handlebars layouts (global page structure)
`partials`	`.hbs`	Reusable Handlebars components
`views`	`.hbs`	Main Handlebars page templates

❌ Uploading or creating a file with an unsupported extension will be blocked automatically.

3. i18n Folder (Static Translations)¶

The i18n/ directory contains one JSON file per locale (for example fr.json, en.json).

Keys are used in templates via:

{{ektrans "WELCOME"}}

Adding a new key to a locale file makes it immediately usable in templates.
The editor provides IntelliSense for available translation keys when typing {{ektrans ".

4. File Explorer Actions¶

Depending on the selected folder, Ekit dynamically enables or disables the following actions:

➕ Create File
⬆️ Upload File
📉 Collapse All
(Subfolder creation will be introduced in a later version.)

The availability of actions is determined by a simple rule:

Only the following folders allow file creation or upload: assets/css, assets/images, assets/js, i18n, layouts, partials, views.

If a file (rather than a folder) is selected, all creation/upload actions are disabled.

5. Why Subfolders Are Not Available Yet¶

Subfolders are intentionally disabled in V0 to keep the experience:

Simple for new users
Consistent across all templates
Predictable for the SSR rendering engine
Easy to maintain during the early releases

Subfolder support will be added later once core features are stable and user demand grows.

6. Upcoming Improvements (Roadmap Excerpt)¶

📁 Subfolder support in assets/**
🌍 Multi-locale management helpers (i18n tooling)
🔍 Search & filtering inside the File Explorer
⬆️ Multi-file upload
🧩 Naming conventions and template helpers
🔄 Drag & drop organization for assets

7. Usage Examples¶

Upload an Image¶

Select the assets/images folder
Click Upload File
Choose a supported image file
The image appears instantly in the File Explorer and SSR preview updates automatically

Add a Translation Key¶

Select the i18n folder
Open fr.json
Add a new key/value:

{
  "WELCOME": "Bienvenue"
}

Use it in a template:

<h1>{{ektrans "WELCOME"}}</h1>

Create a New Handlebars View¶

Select the views folder
Click New File
Enter a file name, e.g. home.hbs
The file opens automatically in the editor

8. Summary¶

Ekit Studio’s initial project structure is minimal by design. It prioritizes usability, avoids complexity, and ensures templates are easy to read and maintain.

As the platform evolves, more advanced features—such as subfolders, enhanced asset management, and richer i18n tooling—will be progressively introduced.