myaidev-method 0.2.23 → 0.2.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/bin/cli.js +55 -2
  2. package/dist/server/.tsbuildinfo +1 -1
  3. package/package.json +6 -1
  4. package/src/config/workflows.js +28 -44
  5. package/src/lib/config-manager.js +470 -0
  6. package/src/lib/content-generator.js +427 -0
  7. package/src/lib/html-conversion-utils.js +843 -0
  8. package/src/lib/seo-optimizer.js +515 -0
  9. package/src/lib/wordpress-client.js +633 -0
  10. package/src/lib/workflow-installer.js +3 -3
  11. package/src/scripts/html-conversion-cli.js +526 -0
  12. package/src/scripts/init/configure.js +436 -0
  13. package/src/scripts/init/install.js +460 -0
  14. package/src/scripts/utils/file-utils.js +404 -0
  15. package/src/scripts/utils/logger.js +300 -0
  16. package/src/scripts/utils/write-content.js +293 -0
  17. package/src/templates/claude/agents/visual-content-generator.md +129 -4
  18. package/src/templates/claude/commands/myai-convert-html.md +186 -0
  19. package/src/templates/diagrams/architecture.d2 +52 -0
  20. package/src/templates/diagrams/flowchart.d2 +42 -0
  21. package/src/templates/diagrams/sequence.d2 +47 -0
  22. package/src/templates/docs/content-creation-guide.md +164 -0
  23. package/src/templates/docs/deployment-guide.md +336 -0
  24. package/src/templates/docs/visual-generation-guide.md +248 -0
  25. package/src/templates/docs/wordpress-publishing-guide.md +208 -0
  26. package/src/templates/infographics/comparison-table.html +347 -0
  27. package/src/templates/infographics/data-chart.html +268 -0
  28. package/src/templates/infographics/process-flow.html +365 -0
  29. /package/src/scripts/{wordpress-health-check.js → wordpress/wordpress-health-check.js} +0 -0
@@ -0,0 +1,365 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>{{title}}</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
8
+ <style>
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ }
14
+
15
+ body {
16
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
17
+ background: linear-gradient(135deg, {{backgroundColor || '#f8fafc'}} 0%, {{backgroundGradient || '#e2e8f0'}} 100%);
18
+ min-height: 100vh;
19
+ padding: 40px;
20
+ }
21
+
22
+ .container {
23
+ max-width: 900px;
24
+ margin: 0 auto;
25
+ background: white;
26
+ border-radius: 24px;
27
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
28
+ overflow: hidden;
29
+ }
30
+
31
+ .header {
32
+ background: linear-gradient(135deg, {{accentColor || '#3b82f6'}} 0%, {{accentGradient || '#1d4ed8'}} 100%);
33
+ color: white;
34
+ padding: 32px 40px;
35
+ text-align: center;
36
+ }
37
+
38
+ .header h1 {
39
+ font-size: 28px;
40
+ font-weight: 700;
41
+ margin-bottom: 8px;
42
+ }
43
+
44
+ .header .subtitle {
45
+ font-size: 16px;
46
+ opacity: 0.9;
47
+ }
48
+
49
+ .content {
50
+ padding: 40px;
51
+ }
52
+
53
+ /* Vertical Flow Layout */
54
+ .flow-vertical {
55
+ display: flex;
56
+ flex-direction: column;
57
+ gap: 0;
58
+ }
59
+
60
+ .flow-step {
61
+ display: flex;
62
+ gap: 24px;
63
+ position: relative;
64
+ }
65
+
66
+ .step-indicator {
67
+ display: flex;
68
+ flex-direction: column;
69
+ align-items: center;
70
+ flex-shrink: 0;
71
+ }
72
+
73
+ .step-number {
74
+ width: 48px;
75
+ height: 48px;
76
+ border-radius: 50%;
77
+ background: linear-gradient(135deg, {{accentColor || '#3b82f6'}} 0%, {{accentGradient || '#1d4ed8'}} 100%);
78
+ color: white;
79
+ display: flex;
80
+ align-items: center;
81
+ justify-content: center;
82
+ font-size: 18px;
83
+ font-weight: 700;
84
+ box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
85
+ z-index: 1;
86
+ }
87
+
88
+ .step-connector {
89
+ width: 3px;
90
+ flex: 1;
91
+ min-height: 40px;
92
+ background: linear-gradient(to bottom, {{accentColor || '#3b82f6'}}, #e5e7eb);
93
+ }
94
+
95
+ .flow-step:last-child .step-connector {
96
+ display: none;
97
+ }
98
+
99
+ .step-content {
100
+ flex: 1;
101
+ padding-bottom: 32px;
102
+ }
103
+
104
+ .step-title {
105
+ font-size: 18px;
106
+ font-weight: 600;
107
+ color: #111827;
108
+ margin-bottom: 8px;
109
+ }
110
+
111
+ .step-description {
112
+ font-size: 14px;
113
+ color: #6b7280;
114
+ line-height: 1.6;
115
+ }
116
+
117
+ .step-details {
118
+ margin-top: 12px;
119
+ padding: 16px;
120
+ background: #f8fafc;
121
+ border-radius: 12px;
122
+ border-left: 3px solid {{accentColor || '#3b82f6'}};
123
+ }
124
+
125
+ .step-details ul {
126
+ list-style: none;
127
+ margin: 0;
128
+ padding: 0;
129
+ }
130
+
131
+ .step-details li {
132
+ font-size: 13px;
133
+ color: #4b5563;
134
+ padding: 6px 0;
135
+ display: flex;
136
+ align-items: center;
137
+ gap: 8px;
138
+ }
139
+
140
+ .step-details li::before {
141
+ content: '→';
142
+ color: {{accentColor || '#3b82f6'}};
143
+ font-weight: bold;
144
+ }
145
+
146
+ /* Horizontal Flow Layout */
147
+ .flow-horizontal {
148
+ display: flex;
149
+ justify-content: space-between;
150
+ gap: 16px;
151
+ overflow-x: auto;
152
+ padding: 20px 0;
153
+ }
154
+
155
+ .flow-h-step {
156
+ flex: 1;
157
+ min-width: 160px;
158
+ text-align: center;
159
+ position: relative;
160
+ }
161
+
162
+ .flow-h-step:not(:last-child)::after {
163
+ content: '';
164
+ position: absolute;
165
+ top: 28px;
166
+ right: -24px;
167
+ width: 32px;
168
+ height: 3px;
169
+ background: linear-gradient(to right, {{accentColor || '#3b82f6'}}, #e5e7eb);
170
+ }
171
+
172
+ .h-step-icon {
173
+ width: 56px;
174
+ height: 56px;
175
+ border-radius: 16px;
176
+ background: linear-gradient(135deg, {{accentColor || '#3b82f6'}} 0%, {{accentGradient || '#1d4ed8'}} 100%);
177
+ color: white;
178
+ display: flex;
179
+ align-items: center;
180
+ justify-content: center;
181
+ font-size: 24px;
182
+ margin: 0 auto 16px;
183
+ box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
184
+ }
185
+
186
+ .h-step-number {
187
+ font-weight: 700;
188
+ }
189
+
190
+ .h-step-title {
191
+ font-size: 14px;
192
+ font-weight: 600;
193
+ color: #111827;
194
+ margin-bottom: 4px;
195
+ }
196
+
197
+ .h-step-desc {
198
+ font-size: 12px;
199
+ color: #6b7280;
200
+ line-height: 1.5;
201
+ }
202
+
203
+ /* Timeline Layout */
204
+ .timeline {
205
+ position: relative;
206
+ padding-left: 40px;
207
+ }
208
+
209
+ .timeline::before {
210
+ content: '';
211
+ position: absolute;
212
+ left: 16px;
213
+ top: 0;
214
+ bottom: 0;
215
+ width: 3px;
216
+ background: linear-gradient(to bottom, {{accentColor || '#3b82f6'}}, #e5e7eb);
217
+ }
218
+
219
+ .timeline-item {
220
+ position: relative;
221
+ padding-bottom: 32px;
222
+ }
223
+
224
+ .timeline-item:last-child {
225
+ padding-bottom: 0;
226
+ }
227
+
228
+ .timeline-marker {
229
+ position: absolute;
230
+ left: -40px;
231
+ width: 32px;
232
+ height: 32px;
233
+ border-radius: 50%;
234
+ background: white;
235
+ border: 3px solid {{accentColor || '#3b82f6'}};
236
+ display: flex;
237
+ align-items: center;
238
+ justify-content: center;
239
+ font-size: 14px;
240
+ font-weight: 600;
241
+ color: {{accentColor || '#3b82f6'}};
242
+ }
243
+
244
+ .timeline-content {
245
+ background: #f8fafc;
246
+ padding: 20px;
247
+ border-radius: 12px;
248
+ }
249
+
250
+ .timeline-date {
251
+ font-size: 12px;
252
+ font-weight: 600;
253
+ color: {{accentColor || '#3b82f6'}};
254
+ text-transform: uppercase;
255
+ letter-spacing: 0.05em;
256
+ margin-bottom: 8px;
257
+ }
258
+
259
+ .timeline-title {
260
+ font-size: 16px;
261
+ font-weight: 600;
262
+ color: #111827;
263
+ margin-bottom: 8px;
264
+ }
265
+
266
+ .timeline-desc {
267
+ font-size: 14px;
268
+ color: #6b7280;
269
+ line-height: 1.6;
270
+ }
271
+
272
+ .footer {
273
+ padding: 24px 40px;
274
+ background: #f8fafc;
275
+ border-top: 1px solid #e5e7eb;
276
+ text-align: center;
277
+ }
278
+
279
+ .footer-text {
280
+ font-size: 13px;
281
+ color: #6b7280;
282
+ }
283
+
284
+ .branding {
285
+ font-size: 12px;
286
+ color: #9ca3af;
287
+ font-weight: 500;
288
+ margin-top: 8px;
289
+ }
290
+ </style>
291
+ </head>
292
+ <body>
293
+ <div class="container">
294
+ <div class="header">
295
+ <h1>{{title}}</h1>
296
+ {{#subtitle}}<p class="subtitle">{{subtitle}}</p>{{/subtitle}}
297
+ </div>
298
+
299
+ <div class="content">
300
+ {{#layout === 'vertical'}}
301
+ <div class="flow-vertical">
302
+ {{#steps}}
303
+ <div class="flow-step">
304
+ <div class="step-indicator">
305
+ <div class="step-number">{{number}}</div>
306
+ <div class="step-connector"></div>
307
+ </div>
308
+ <div class="step-content">
309
+ <div class="step-title">{{title}}</div>
310
+ <div class="step-description">{{description}}</div>
311
+ {{#details}}
312
+ <div class="step-details">
313
+ <ul>
314
+ {{#details}}
315
+ <li>{{.}}</li>
316
+ {{/details}}
317
+ </ul>
318
+ </div>
319
+ {{/details}}
320
+ </div>
321
+ </div>
322
+ {{/steps}}
323
+ </div>
324
+ {{/layout === 'vertical'}}
325
+
326
+ {{#layout === 'horizontal'}}
327
+ <div class="flow-horizontal">
328
+ {{#steps}}
329
+ <div class="flow-h-step">
330
+ <div class="h-step-icon">
331
+ {{#icon}}{{icon}}{{/icon}}
332
+ {{^icon}}<span class="h-step-number">{{number}}</span>{{/icon}}
333
+ </div>
334
+ <div class="h-step-title">{{title}}</div>
335
+ <div class="h-step-desc">{{description}}</div>
336
+ </div>
337
+ {{/steps}}
338
+ </div>
339
+ {{/layout === 'horizontal'}}
340
+
341
+ {{#layout === 'timeline'}}
342
+ <div class="timeline">
343
+ {{#steps}}
344
+ <div class="timeline-item">
345
+ <div class="timeline-marker">{{number}}</div>
346
+ <div class="timeline-content">
347
+ {{#date}}<div class="timeline-date">{{date}}</div>{{/date}}
348
+ <div class="timeline-title">{{title}}</div>
349
+ <div class="timeline-desc">{{description}}</div>
350
+ </div>
351
+ </div>
352
+ {{/steps}}
353
+ </div>
354
+ {{/layout === 'timeline'}}
355
+ </div>
356
+
357
+ {{#footerText}}
358
+ <div class="footer">
359
+ <div class="footer-text">{{footerText}}</div>
360
+ {{#branding}}<div class="branding">{{branding}}</div>{{/branding}}
361
+ </div>
362
+ {{/footerText}}
363
+ </div>
364
+ </body>
365
+ </html>