Skip to content

Commit b9b8678

Browse files
ChristianHohlfeldChristianHohlfeld
committed
readme.md
1 parent 718457c commit b9b8678

File tree

1 file changed

+40
-129
lines changed

1 file changed

+40
-129
lines changed

‎README.md‎

Lines changed: 40 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -1,173 +1,84 @@
1+
12
# ✍️ MiniTemplate - Simple Template Engine
2-
3+
34
## Overview
4-
5-
MiniTemplate is a modular web template system designed to easily integrate various components. It leverages **Tailwind CSS** and **DaisyUI**, providing a flexible and efficient structure for statically generated web applications.
5+
MiniTemplate is a modular web template system designed to easily integrate various components. It leverages Tailwind CSS and DaisyUI, providing a flexible and efficient structure for statically generated web applications.
66

77
## Key Features
8-
9-
- **Modular Components**: Reusable components like headers, sidebars, footers, and chat inputs.
10-
- **Template-based System**: Utilize a main `template.html` file to assemble components using a simple placeholder system (e.g., `{{component}}`).
11-
- **Custom Theming**: Quickly change themes with the `generate.sh` script or directly using the theme controller dropdown.
8+
- **Modular Components**: Reusable components like headers, sidebars, footers, and hero sections.
9+
- **Template-based System**: Assemble components with placeholders (e.g., `{{componentName}}`) to populate `template.html`.
10+
- **Custom Theming**: Quickly change themes with the `generate.sh` script or via the theme controller dropdown.
1211

1312
## Project Structure
14-
15-
The flat project structure is intentional to improve development speed by providing direct access to all components without deep navigation. Further structure can be added as the project scales to accommodate more complexity while maintaining this simplicity.
16-
17-
The project consists of the following files and components:
13+
The project follows a flat structure for ease of navigation. As the project scales, more structure can be added as necessary.
1814

1915
```
2016
.
21-
├── 🟢 createcomponent.sh [name] # Create a new component (name is required)
22-
├── 🟢 generate.sh [theme] # Generate index.html with optional theme
23-
├── 🟢 print.sh . # Print current directory structure and files
24-
├── 🟢 installhooks.sh # Install Git hooks for running tests before push
25-
├── 🟢 run_tests.sh # Run all the test scripts
26-
├── template.html # Base file used to generate index.html
27-
├── index.html # Generated from template.html
17+
├── 🟢 createcomponent.sh [componentName] # Create a new component (componentName is required)
18+
├── 🟢 generate.sh [theme] # Generate `index.html` with an optional theme
19+
├── 🟢 print.sh # Print current directory structure and files
20+
├── template.html # Base file used to generate `index.html`
21+
├── index.html # Generated from `template.html`
2822
├── headerComponent.html # Header with theme controller
2923
├── contentComponent.html # Main content area
3024
├── sidebarComponent.html # Sidebar with navigation
25+
├── heroComponent.html # Hero section component
3126
├── themecontrollerComponent.html # Theme controller dropdown
3227
├── footerComponent.html # Footer content
3328
├── README.md # Project documentation
29+
├── CNAME # Domain name configuration
3430
└── tests # Directory containing test scripts
31+
├── 🟢 run_tests.sh # Run all test scripts
3532
├── 🟢 test_component_creation.sh # Test component creation script
36-
├── 🟢 test_invalid_component_references.sh # Test for invalid component references
37-
├── 🟢 test_open_chrome.sh # Script to test opening Chrome
33+
├── 🟢 test_component_ids.sh # Test that component IDs match filenames
34+
├── 🟢 test_component_references.sh # Test for invalid component references
3835
├── 🟢 test_print.sh # Test print functionality
39-
├── 🟢 test_template_generation.sh # Test template generation
40-
└── 🟢 test_wrap_components.sh # Test wrapping components into templates
36+
└── 🟢 test_template_generation.sh # Test template generation
4137
```
4238

4339
## How to Use
4440

45-
### 1. Generating the index.html File
41+
### 1. Generating the `index.html` File
42+
Use the `generate.sh` script to populate `template.html` with content from each component:
4643

47-
The core structure of the application is generated using the `generate.sh` script. This script reads `template.html` and populates it with the actual content from each component.
44+
```bash
45+
./generate.sh [theme-name]
46+
```
4847

49-
- **Run the script**:
50-
```bash
51-
./generate.sh [theme-name]
52-
```
53-
- If no theme is specified, the default theme will be applied. If no theme is provided, the `data-theme` attribute will not be set.
48+
If no theme is specified, the default theme will be applied.
5449

5550
### 2. Creating New Components
51+
To create a new component, run the `createcomponent.sh` script:
5652

57-
To create a new component, use the `createcomponent` script, which will generate the necessary HTML structure for you.
58-
59-
- **Run the script**:
60-
```bash
61-
./createcomponent.sh [componentName]
62-
```
63-
- Replace `[componentName]` with the desired name for your new component.
64-
65-
The generated component structure includes:
66-
67-
- A `div` element with an ID corresponding to the component name.
68-
- A button element using DaisyUI classes (`btn`) for consistent styling.
69-
- An immediately invoked function expression (IIFE) in the script tag to ensure that JavaScript executes once the document is loaded, scoped specifically to this component.
70-
71-
#### Component Structure
72-
73-
```html
74-
<!-- buttonComponent.html -->
75-
<div id="buttonComponent">
76-
<!-- Add custom HTML or paste daisyUI components: https://daisyui.com/components/ -->
77-
<button class="btn">Action</button>
78-
79-
<script>
80-
// Add your component-specific JavaScript here
81-
(function() {
82-
// Ensures the script runs only after the document is fully loaded
83-
document.addEventListener('DOMContentLoaded', function() {
84-
console.log('button component loaded.');
85-
});
86-
})();
87-
</script>
88-
</div>
53+
```bash
54+
./createcomponent.sh [componentName]
8955
```
9056

91-
- **Why use an Immediate Function?**
92-
93-
- The immediate function, also known as an Immediately Invoked Function Expression (IIFE), ensures that the JavaScript within the component is self-contained and doesn't interfere with other components. This keeps the scope of variables and functions limited to this component, promoting modularity and avoiding conflicts.
94-
95-
- **Scoped Tailwind and DaisyUI CSS**
96-
97-
- The use of DaisyUI ensures that the styles are consistent and scoped to the elements using DaisyUI classes like `btn`. This approach helps keep the styling modular and easily maintainable, while also providing a visually appealing design out of the box.
57+
The script generates the necessary HTML structure with a scoped IIFE for modular JavaScript functionality.
9858

9959
### 3. Integrating Components into the Template
100-
101-
To include a component in `template.html` (or any other component you have created):
102-
103-
1. Use the placeholder syntax `{{componentName}}` within `template.html` where you want the component to appear.
104-
2. Ensure the component file (e.g., `headerComponent.html`) is correctly named and located in the project root.
105-
106-
### Example of Template Integration
60+
Include components in `template.html` using placeholders:
10761

10862
```html
109-
<!DOCTYPE html>
110-
<html lang="en">
111-
<head>
112-
<title>Your Page Title</title>
113-
<!-- Include CSS and scripts here -->
114-
</head>
115-
<body>
116-
{{headerComponent}} <!-- Header integration -->
117-
{{contentComponent}} <!-- Main content integration -->
118-
{{footerComponent}} <!-- Footer integration -->
119-
</body>
120-
</html>
63+
{{headerComponent}} <!-- Header integration -->
64+
{{contentComponent}} <!-- Main content integration -->
65+
{{footerComponent}} <!-- Footer integration -->
12166
```
12267

123-
## Custom Theming
124-
125-
The project now includes a **Theme Controller** (`themecontrollerComponent.html`) that allows users to change the theme dynamically via a dropdown. Themes like "light," "dark," "cupcake," "cyberpunk," and many more are available. To update the theme:
126-
127-
1. The `themecontrollerComponent` is used to switch between themes, local storage is used to store the selection.
128-
2. The selected theme will be applied immediately to the page by updating the `data-theme` attribute.
129-
130-
The available themes include but are not limited to:
68+
### Custom Theming
69+
Use the `themecontrollerComponent.html` to switch themes dynamically with DaisyUI. Available themes include:
13170

13271
- light
13372
- dark
13473
- cupcake
135-
- bumblebee
136-
- emerald
137-
- corporate
138-
- synthwave
139-
- business
14074
- cyberpunk
14175

142-
For a complete list [click here](https://daisyui.com/docs/themes/)
143-
144-
## daisyUI
145-
146-
MiniTemplate uses daisyUI for modular scoped Tailwind CSS components. You can [visit daisyUI documentation](https://daisyui.com/components/) to see all available components, themes, and their documentation.
76+
### Testing
77+
Run all test scripts with:
14778

148-
## Testing and Git Hooks
149-
150-
### Running Tests
151-
152-
To ensure the integrity of the components and templates, the project includes a set of automated tests located in the `tests` directory. These tests cover:
153-
154-
- **Component Creation**: Validating that components are correctly created.
155-
- **Template Generation**: Ensuring that the template is properly generated.
156-
- **Print Functionality**: Testing the print script to ensure it outputs the correct structure.
157-
- **Invalid Component References**: Verifying that no invalid component references exist in the templates.
158-
159-
- **Run all tests**:
160-
```bash
161-
./run_tests.sh
162-
```
163-
164-
### Installing Git Hooks
165-
166-
To automatically run tests before pushing changes, you can install Git hooks using the `installhooks.sh` script. This ensures that only passing code is pushed to the repository.
79+
```bash
80+
./tests/run_tests.sh
81+
```
16782

168-
- **Install the Git hooks**:
169-
```bash
170-
./installhooks.sh
171-
```
83+
These scripts test component creation, template generation, and other core functionalities.
17284

173-
For further assistance or contributions, feel free to reach out or contribute to the project!

0 commit comments

Comments
 (0)