@jiggai/kitchen-plugin-marketing 0.2.1 → 0.2.2

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.
@@ -1,44 +1,47 @@
1
1
  (() => {
2
2
  // src/tabs/accounts.tsx
3
- function Accounts() {
4
- return `
5
- <div class="p-6">
6
- <h2 class="text-2xl font-bold mb-4">Social Media Accounts</h2>
7
- <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
8
- <p class="text-yellow-800">\u{1F517} Connect and manage your social media accounts here!</p>
9
- </div>
10
-
11
- <div class="mb-6">
12
- <h3 class="font-semibold text-lg mb-3">Add New Account</h3>
13
- <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
14
- <button class="bg-blue-500 text-white p-4 rounded-lg hover:bg-blue-600 transition-colors">
15
- <div class="text-xl mb-2">\u{1F426}</div>
16
- <div>Twitter/X</div>
17
- </button>
18
- <button class="bg-pink-500 text-white p-4 rounded-lg hover:bg-pink-600 transition-colors">
19
- <div class="text-xl mb-2">\u{1F4F7}</div>
20
- <div>Instagram</div>
21
- </button>
22
- <button class="bg-red-500 text-white p-4 rounded-lg hover:bg-red-600 transition-colors">
23
- <div class="text-xl mb-2">\u{1F3AC}</div>
24
- <div>YouTube</div>
25
- </button>
26
- <button class="bg-purple-500 text-white p-4 rounded-lg hover:bg-purple-600 transition-colors">
27
- <div class="text-xl mb-2">\u{1F3B5}</div>
28
- <div>TikTok</div>
29
- </button>
3
+ (function() {
4
+ const React = window.React;
5
+ if (!React) return;
6
+ function Accounts() {
7
+ return React.createElement("div", { dangerouslySetInnerHTML: { __html: `
8
+ <div class="p-6">
9
+ <h2 class="text-2xl font-bold mb-4">Social Media Accounts</h2>
10
+ <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
11
+ <p class="text-yellow-800">\u{1F517} Connect and manage your social media accounts here!</p>
30
12
  </div>
31
- </div>
32
-
33
- <div class="bg-white border rounded-lg p-6">
34
- <h3 class="font-semibold text-lg mb-4">Connected Accounts</h3>
35
- <div class="text-center py-8">
36
- <div class="text-4xl mb-2">\u{1F50C}</div>
37
- <p class="text-gray-600">No accounts connected yet</p>
38
- <p class="text-sm text-gray-500">Click one of the platforms above to get started</p>
13
+ <div style="margin-bottom:1.5rem">
14
+ <h3 class="font-semibold text-lg mb-3">Add New Account</h3>
15
+ <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:1rem">
16
+ <button class="bg-blue-500 text-white p-4 rounded-lg hover:bg-blue-600" style="cursor:pointer;border:none">
17
+ <div style="font-size:1.25rem;margin-bottom:0.5rem">\u{1F426}</div>
18
+ <div>Twitter/X</div>
19
+ </button>
20
+ <button class="bg-pink-500 text-white p-4 rounded-lg hover:bg-pink-600" style="cursor:pointer;border:none">
21
+ <div style="font-size:1.25rem;margin-bottom:0.5rem">\u{1F4F7}</div>
22
+ <div>Instagram</div>
23
+ </button>
24
+ <button class="bg-red-500 text-white p-4 rounded-lg hover:bg-red-600" style="cursor:pointer;border:none">
25
+ <div style="font-size:1.25rem;margin-bottom:0.5rem">\u{1F3AC}</div>
26
+ <div>YouTube</div>
27
+ </button>
28
+ <button class="bg-purple-500 text-white p-4 rounded-lg hover:bg-purple-600" style="cursor:pointer;border:none">
29
+ <div style="font-size:1.25rem;margin-bottom:0.5rem">\u{1F3B5}</div>
30
+ <div>TikTok</div>
31
+ </button>
32
+ </div>
33
+ </div>
34
+ <div class="bg-white border rounded-lg p-6">
35
+ <h3 class="font-semibold text-lg mb-4">Connected Accounts</h3>
36
+ <div style="text-align:center;padding:2rem 0">
37
+ <div style="font-size:2.5rem;margin-bottom:0.5rem">\u{1F50C}</div>
38
+ <p class="text-gray-600">No accounts connected yet</p>
39
+ <p class="text-sm text-gray-500">Click one of the platforms above to get started</p>
40
+ </div>
39
41
  </div>
40
42
  </div>
41
- </div>
42
- `;
43
- }
43
+ ` } });
44
+ }
45
+ window.KitchenPlugin.registerTab("marketing", "accounts", Accounts);
46
+ })();
44
47
  })();
@@ -1,39 +1,42 @@
1
1
  (() => {
2
2
  // src/tabs/analytics.tsx
3
- function Analytics() {
4
- return `
5
- <div class="p-6">
6
- <h2 class="text-2xl font-bold mb-4">Analytics</h2>
7
- <div class="bg-purple-50 border border-purple-200 rounded-lg p-4 mb-6">
8
- <p class="text-purple-800">\u{1F4CA} Analytics dashboard - track your content performance!</p>
9
- </div>
10
-
11
- <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
12
- <div class="bg-white border rounded-lg p-4">
13
- <div class="text-2xl font-bold text-blue-600">0</div>
14
- <div class="text-gray-600">Total Posts</div>
15
- </div>
16
- <div class="bg-white border rounded-lg p-4">
17
- <div class="text-2xl font-bold text-green-600">0</div>
18
- <div class="text-gray-600">Total Engagement</div>
3
+ (function() {
4
+ const React = window.React;
5
+ if (!React) return;
6
+ function Analytics() {
7
+ return React.createElement("div", { dangerouslySetInnerHTML: { __html: `
8
+ <div class="p-6">
9
+ <h2 class="text-2xl font-bold mb-4">Analytics</h2>
10
+ <div class="bg-purple-50 border border-purple-200 rounded-lg p-4 mb-6">
11
+ <p class="text-purple-800">\u{1F4CA} Track your content performance!</p>
19
12
  </div>
20
- <div class="bg-white border rounded-lg p-4">
21
- <div class="text-2xl font-bold text-orange-600">0</div>
22
- <div class="text-gray-600">New Followers</div>
13
+ <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:1.5rem">
14
+ <div class="bg-white border rounded-lg p-4">
15
+ <div class="text-2xl font-bold text-blue-600">0</div>
16
+ <div class="text-gray-600">Total Posts</div>
17
+ </div>
18
+ <div class="bg-white border rounded-lg p-4">
19
+ <div class="text-2xl font-bold text-green-600">0</div>
20
+ <div class="text-gray-600">Total Engagement</div>
21
+ </div>
22
+ <div class="bg-white border rounded-lg p-4">
23
+ <div class="text-2xl font-bold text-orange-600">0</div>
24
+ <div class="text-gray-600">New Followers</div>
25
+ </div>
23
26
  </div>
24
- </div>
25
-
26
- <div class="bg-white border rounded-lg p-6">
27
- <h3 class="font-semibold text-lg mb-4">Engagement Over Time</h3>
28
- <div class="h-64 bg-gray-50 rounded border flex items-center justify-center">
29
- <div class="text-center">
30
- <div class="text-4xl mb-2">\u{1F4C8}</div>
31
- <p class="text-gray-600">Your engagement chart will appear here</p>
32
- <p class="text-sm text-gray-500">Start publishing content to see analytics</p>
27
+ <div class="bg-white border rounded-lg p-6">
28
+ <h3 class="font-semibold text-lg mb-4">Engagement Over Time</h3>
29
+ <div class="h-64 bg-gray-50 rounded border" style="display:flex;align-items:center;justify-content:center">
30
+ <div style="text-align:center">
31
+ <div style="font-size:2.5rem;margin-bottom:0.5rem">\u{1F4C8}</div>
32
+ <p class="text-gray-600">Your engagement chart will appear here</p>
33
+ <p class="text-sm text-gray-500">Start publishing content to see analytics</p>
34
+ </div>
33
35
  </div>
34
36
  </div>
35
37
  </div>
36
- </div>
37
- `;
38
- }
38
+ ` } });
39
+ }
40
+ window.KitchenPlugin.registerTab("marketing", "analytics", Analytics);
41
+ })();
39
42
  })();
@@ -1,33 +1,31 @@
1
1
  (() => {
2
2
  // src/tabs/content-calendar.tsx
3
- function ContentCalendar() {
4
- return `
5
- <div class="p-6">
6
- <h2 class="text-2xl font-bold mb-4">Content Calendar</h2>
7
- <div class="bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
8
- <p class="text-green-800">\u{1F4C5} This is the Content Calendar tab - schedule and plan your content!</p>
9
- </div>
10
- <div class="bg-white border rounded-lg p-6">
11
- <div class="grid grid-cols-7 gap-2 mb-4">
12
- <div class="font-semibold text-center p-2">Sun</div>
13
- <div class="font-semibold text-center p-2">Mon</div>
14
- <div class="font-semibold text-center p-2">Tue</div>
15
- <div class="font-semibold text-center p-2">Wed</div>
16
- <div class="font-semibold text-center p-2">Thu</div>
17
- <div class="font-semibold text-center p-2">Fri</div>
18
- <div class="font-semibold text-center p-2">Sat</div>
19
- </div>
20
- <div class="grid grid-cols-7 gap-2">
21
- ${Array.from({ length: 35 }, (_, i) => {
22
- const day = i % 7 === 0 ? Math.floor(i / 7) + 1 : "";
3
+ (function() {
4
+ const React = window.React;
5
+ if (!React) return;
6
+ const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
7
+ const headerHtml = days.map((d) => `<div class="font-semibold text-center p-2">${d}</div>`).join("");
8
+ const cellsHtml = Array.from({ length: 35 }, (_, i) => {
9
+ const day = i < 31 ? i + 1 : "";
23
10
  return `<div class="border rounded p-2 h-20 ${day ? "bg-gray-50" : "bg-gray-100"}">
24
- ${day ? `<div class="text-sm font-medium">${day}</div>` : ""}
25
- </div>`;
26
- }).join("")}
11
+ ${day ? `<div class="text-sm font-medium">${day}</div>` : ""}
12
+ </div>`;
13
+ }).join("");
14
+ function ContentCalendar() {
15
+ return React.createElement("div", { dangerouslySetInnerHTML: { __html: `
16
+ <div class="p-6">
17
+ <h2 class="text-2xl font-bold mb-4">Content Calendar</h2>
18
+ <div class="bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
19
+ <p class="text-green-800">\u{1F4C5} Schedule and plan your content!</p>
20
+ </div>
21
+ <div class="bg-white border rounded-lg p-6">
22
+ <div class="grid grid-cols-7 gap-2 mb-4">${headerHtml}</div>
23
+ <div class="grid grid-cols-7 gap-2">${cellsHtml}</div>
24
+ <p class="text-gray-500 text-sm mt-4">Scheduled posts would appear on their respective dates.</p>
27
25
  </div>
28
- <p class="text-gray-500 text-sm mt-4">Scheduled posts would appear on their respective dates. Drag to reschedule!</p>
29
26
  </div>
30
- </div>
31
- `;
32
- }
27
+ ` } });
28
+ }
29
+ window.KitchenPlugin.registerTab("marketing", "content-calendar", ContentCalendar);
30
+ })();
33
31
  })();
@@ -1,29 +1,34 @@
1
1
  (() => {
2
2
  // src/tabs/content-library.tsx
3
- function ContentLibrary() {
4
- return `
5
- <div class="p-6">
6
- <h2 class="text-2xl font-bold mb-4">Content Library</h2>
7
- <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
8
- <p class="text-blue-800">\u{1F389} Marketing Suite plugin is working! This is the Content Library tab.</p>
9
- </div>
10
- <div class="space-y-4">
11
- <div class="bg-white border rounded-lg p-4">
12
- <h3 class="font-semibold text-lg mb-2">Create New Post</h3>
13
- <p class="text-gray-600">Your content creation tools would go here. You could add:</p>
14
- <ul class="list-disc list-inside mt-2 text-gray-600">
15
- <li>Rich text editor</li>
16
- <li>Media upload</li>
17
- <li>Platform selection (Twitter, Instagram, etc.)</li>
18
- <li>Scheduling options</li>
19
- </ul>
3
+ (function() {
4
+ const React = window.React;
5
+ if (!React) return;
6
+ function ContentLibrary() {
7
+ return React.createElement("div", { dangerouslySetInnerHTML: { __html: `
8
+ <div class="p-6">
9
+ <h2 class="text-2xl font-bold mb-4">Content Library</h2>
10
+ <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
11
+ <p class="text-blue-800">\u{1F389} Marketing Suite plugin is working! This is the Content Library tab.</p>
20
12
  </div>
21
- <div class="bg-white border rounded-lg p-4">
22
- <h3 class="font-semibold text-lg mb-2">Recent Posts</h3>
23
- <p class="text-gray-500 italic">No posts yet. Create your first post above!</p>
13
+ <div style="display:flex;flex-direction:column;gap:1rem">
14
+ <div class="bg-white border rounded-lg p-4">
15
+ <h3 class="font-semibold text-lg mb-2">Create New Post</h3>
16
+ <p class="text-gray-600">Your content creation tools would go here. You could add:</p>
17
+ <ul class="list-disc list-inside mt-2 text-gray-600">
18
+ <li>Rich text editor</li>
19
+ <li>Media upload</li>
20
+ <li>Platform selection (Twitter, Instagram, etc.)</li>
21
+ <li>Scheduling options</li>
22
+ </ul>
23
+ </div>
24
+ <div class="bg-white border rounded-lg p-4">
25
+ <h3 class="font-semibold text-lg mb-2">Recent Posts</h3>
26
+ <p class="text-gray-500 italic">No posts yet. Create your first post above!</p>
27
+ </div>
24
28
  </div>
25
29
  </div>
26
- </div>
27
- `;
28
- }
30
+ ` } });
31
+ }
32
+ window.KitchenPlugin.registerTab("marketing", "content-library", ContentLibrary);
33
+ })();
29
34
  })();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jiggai/kitchen-plugin-marketing",
3
- "version": "0.2.1",
3
+ "version": "0.2.2",
4
4
  "description": "Marketing Suite plugin for ClawKitchen",
5
5
  "main": "dist/index.js",
6
6
  "files": [
@@ -10,8 +10,7 @@
10
10
  "README.md"
11
11
  ],
12
12
  "bin": {
13
- "kitchen-plugin-marketing": "scripts/kitchen-cli.js",
14
- "@jiggai/kitchen-plugin-marketing": "scripts/kitchen-cli.js"
13
+ "kitchen-plugin-marketing": "scripts/kitchen-cli.js"
15
14
  },
16
15
  "kitchenPlugin": {
17
16
  "id": "marketing",