Skip to content

Commit d405f6c

Browse files
author
danil-nizamov
committed
updated readme
1 parent 16052f7 commit d405f6c

File tree

2 files changed

+3
-90
lines changed

2 files changed

+3
-90
lines changed

README.md

Lines changed: 3 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -36,103 +36,17 @@ A template for creating consistent help content:
3636

3737
### Setting Up a New Application
3838

39-
1. **Copy the template files** to your new application directory
39+
1. **Fork the repository**
4040
2. **Customize the HTML template** by replacing placeholders:
4141
- `<!-- APP_TITLE -->` - Your application title
4242
- `<!-- APP_NAME -->` - Your application name (appears in header)
4343
- `<!-- APP_SPECIFIC_HEADER_CONTENT -->` - Any additional header elements
44-
- `<!-- APP_SPECIFIC_SIDEBAR -->` - Your sidebar content
4544
- `<!-- APP_SPECIFIC_MAIN_CONTENT -->` - Your main content area
4645
- `<!-- APP_SPECIFIC_CSS -->` - Links to your app-specific CSS files
4746
- `<!-- APP_SPECIFIC_SCRIPTS -->` - Links to your app-specific JavaScript files
4847

49-
3. **Create your help content** using the help content template
50-
4. **Initialize the auto-save system** in your JavaScript:
51-
52-
```javascript
53-
// Your application data
54-
let appData = {
55-
// Your data structure here
56-
};
57-
58-
// Initialize auto-save
59-
const autoSave = AutoSave.init({
60-
data: appData,
61-
filename: 'solution.json',
62-
localStorageKey: 'myapp:data',
63-
saveInterval: 1000,
64-
onStatusChange: setStatus,
65-
onDataChange: (data) => {
66-
// Optional: Custom logic when data changes
67-
},
68-
onError: (message, error) => {
69-
console.error('Auto-save error:', message, error);
70-
}
71-
});
72-
73-
// Load existing data
74-
const savedData = autoSave.loadFromLocalStorage();
75-
if (savedData) {
76-
appData = savedData;
77-
}
78-
```
79-
80-
5. **Initialize the help modal** in your JavaScript:
81-
82-
```javascript
83-
// Load your help content (from file, API, or inline)
84-
const helpContent = `<!-- Your help content here -->`;
85-
86-
// Initialize the help modal
87-
HelpModal.init({
88-
triggerSelector: '#btn-help',
89-
content: helpContent,
90-
theme: 'auto' // or 'light' or 'dark'
91-
});
92-
```
93-
94-
### Example Implementation
95-
96-
```html
97-
<!doctype html>
98-
<html lang="en">
99-
<head>
100-
<meta charset="utf-8" />
101-
<title>My App</title>
102-
<meta name="viewport" content="width=device-width, initial-scale=1" />
103-
<link rel="stylesheet" href="./bespoke.css" />
104-
<link rel="stylesheet" href="./my-app.css" />
105-
</head>
106-
<body class="bespoke">
107-
<header class="header">
108-
<h1>My App</h1>
109-
<button id="btn-save">Save</button>
110-
<div class="spacer"></div>
111-
<div id="status" class="status">Ready</div>
112-
<button id="btn-help" class="as-button ghost">Help</button>
113-
</header>
114-
115-
<main class="main-layout">
116-
<aside class="sidebar">
117-
<!-- Your app controls go here -->
118-
</aside>
119-
<div class="content-area">
120-
<!-- Your main app content goes here -->
121-
</div>
122-
</main>
123-
124-
<script src="./help-modal.js"></script>
125-
<script src="./my-app.js"></script>
126-
<script>
127-
HelpModal.init({
128-
triggerSelector: '#btn-help',
129-
content: myHelpContent,
130-
theme: 'auto'
131-
});
132-
</script>
133-
</body>
134-
</html>
135-
```
48+
3. **Implement your application logic**. You can use Cursor or other agents for it. There is a file called `context.txt` that contains context LLM can use.
49+
4. **Customise your help content** using the help content template
13650

13751
### Customizing Help Content
13852

index.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ <h1>APP NAME</h1>
3131
<script src="./app.js"></script>
3232
<!-- APP_SPECIFIC_SCRIPTS -->
3333

34-
<!-- App Initialization -->
3534
<script>
3635
// Your app-specific initialization code goes here
3736
</script>

0 commit comments

Comments
 (0)