@@ -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 **
40402 . ** 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
0 commit comments