@jiggai/kitchen-plugin-marketing 0.2.1 → 0.2.3
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.
- package/dist/tabs/accounts.js +56 -38
- package/dist/tabs/analytics.js +50 -31
- package/dist/tabs/content-calendar.js +55 -27
- package/dist/tabs/content-library.js +46 -23
- package/package.json +2 -3
package/dist/tabs/accounts.js
CHANGED
|
@@ -1,44 +1,62 @@
|
|
|
1
1
|
(() => {
|
|
2
2
|
// src/tabs/accounts.tsx
|
|
3
|
-
function
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
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
|
+
const s = {
|
|
7
|
+
page: "padding:2rem;max-width:1200px;margin:0 auto",
|
|
8
|
+
h2: "font-size:1.5rem;font-weight:700;color:var(--ck-text-primary);margin-bottom:1.5rem",
|
|
9
|
+
card: "background:var(--ck-bg-glass);border:1px solid var(--ck-border-subtle);border-radius:14px;padding:1.5rem;backdrop-filter:blur(18px) saturate(1.25)",
|
|
10
|
+
cardTitle: "font-size:1.1rem;font-weight:600;color:var(--ck-text-primary);margin-bottom:1rem",
|
|
11
|
+
muted: "color:var(--ck-text-secondary);font-size:0.9rem",
|
|
12
|
+
mutedSm: "color:var(--ck-text-tertiary);font-size:0.85rem",
|
|
13
|
+
banner: "background:var(--ck-bg-glass);border:1px solid rgba(237,199,80,0.25);border-radius:14px;padding:1.25rem;color:rgba(237,199,80,0.9);font-size:0.9rem;margin-bottom:1.5rem;backdrop-filter:blur(18px)",
|
|
14
|
+
platformGrid: "display:grid;grid-template-columns:repeat(4,1fr);gap:0.75rem;margin-bottom:1.5rem",
|
|
15
|
+
platformBtn: "border:1px solid var(--ck-border-subtle);border-radius:12px;padding:1.25rem 1rem;cursor:pointer;text-align:center;transition:all 0.15s;background:var(--ck-bg-glass);backdrop-filter:blur(18px)",
|
|
16
|
+
platformIcon: "font-size:1.75rem;margin-bottom:0.5rem",
|
|
17
|
+
platformName: "font-size:0.85rem;font-weight:500;color:var(--ck-text-primary)",
|
|
18
|
+
emptyIcon: "font-size:2.5rem;margin-bottom:0.75rem;opacity:0.6",
|
|
19
|
+
emptyCenter: "text-align:center;padding:2.5rem 0"
|
|
20
|
+
};
|
|
21
|
+
function Accounts() {
|
|
22
|
+
return React.createElement("div", { dangerouslySetInnerHTML: { __html: `
|
|
23
|
+
<div style="${s.page}">
|
|
24
|
+
<h2 style="${s.h2}">Social Media Accounts</h2>
|
|
25
|
+
<div style="${s.banner}">
|
|
26
|
+
\u{1F517} Connect and manage your social media accounts
|
|
30
27
|
</div>
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
28
|
+
<div style="${s.card};margin-bottom:1rem">
|
|
29
|
+
<h3 style="${s.cardTitle}">Add New Account</h3>
|
|
30
|
+
<div style="${s.platformGrid}">
|
|
31
|
+
<div style="${s.platformBtn}">
|
|
32
|
+
<div style="${s.platformIcon}">\u{1D54F}</div>
|
|
33
|
+
<div style="${s.platformName}">Twitter / X</div>
|
|
34
|
+
</div>
|
|
35
|
+
<div style="${s.platformBtn}">
|
|
36
|
+
<div style="${s.platformIcon}">\u{1F4F7}</div>
|
|
37
|
+
<div style="${s.platformName}">Instagram</div>
|
|
38
|
+
</div>
|
|
39
|
+
<div style="${s.platformBtn}">
|
|
40
|
+
<div style="${s.platformIcon}">\u{1F3AC}</div>
|
|
41
|
+
<div style="${s.platformName}">YouTube</div>
|
|
42
|
+
</div>
|
|
43
|
+
<div style="${s.platformBtn}">
|
|
44
|
+
<div style="${s.platformIcon}">\u{1F4BC}</div>
|
|
45
|
+
<div style="${s.platformName}">LinkedIn</div>
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
<div style="${s.card}">
|
|
50
|
+
<h3 style="${s.cardTitle}">Connected Accounts</h3>
|
|
51
|
+
<div style="${s.emptyCenter}">
|
|
52
|
+
<div style="${s.emptyIcon}">\u{1F50C}</div>
|
|
53
|
+
<p style="${s.muted}">No accounts connected yet</p>
|
|
54
|
+
<p style="${s.mutedSm}">Click a platform above to get started</p>
|
|
55
|
+
</div>
|
|
39
56
|
</div>
|
|
40
57
|
</div>
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
58
|
+
` } });
|
|
59
|
+
}
|
|
60
|
+
window.KitchenPlugin.registerTab("marketing", "accounts", Accounts);
|
|
61
|
+
})();
|
|
44
62
|
})();
|
package/dist/tabs/analytics.js
CHANGED
|
@@ -1,39 +1,58 @@
|
|
|
1
1
|
(() => {
|
|
2
2
|
// src/tabs/analytics.tsx
|
|
3
|
-
function
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
3
|
+
(function() {
|
|
4
|
+
const React = window.React;
|
|
5
|
+
if (!React) return;
|
|
6
|
+
const s = {
|
|
7
|
+
page: "padding:2rem;max-width:1200px;margin:0 auto",
|
|
8
|
+
h2: "font-size:1.5rem;font-weight:700;color:var(--ck-text-primary);margin-bottom:1.5rem",
|
|
9
|
+
card: "background:var(--ck-bg-glass);border:1px solid var(--ck-border-subtle);border-radius:14px;padding:1.5rem;backdrop-filter:blur(18px) saturate(1.25)",
|
|
10
|
+
cardTitle: "font-size:1.1rem;font-weight:600;color:var(--ck-text-primary);margin-bottom:1rem",
|
|
11
|
+
muted: "color:var(--ck-text-secondary);font-size:0.9rem",
|
|
12
|
+
mutedSm: "color:var(--ck-text-tertiary);font-size:0.85rem",
|
|
13
|
+
banner: "background:var(--ck-bg-glass);border:1px solid rgba(183,148,244,0.25);border-radius:14px;padding:1.25rem;color:rgba(183,148,244,0.9);font-size:0.9rem;margin-bottom:1.5rem;backdrop-filter:blur(18px)",
|
|
14
|
+
statsGrid: "display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.5rem",
|
|
15
|
+
statCard: "background:var(--ck-bg-glass);border:1px solid var(--ck-border-subtle);border-radius:14px;padding:1.25rem;text-align:center;backdrop-filter:blur(18px) saturate(1.25)",
|
|
16
|
+
statValue: "font-size:2rem;font-weight:700;margin-bottom:0.25rem",
|
|
17
|
+
statLabel: "color:var(--ck-text-tertiary);font-size:0.8rem;text-transform:uppercase;letter-spacing:0.05em",
|
|
18
|
+
emptyChart: "height:16rem;border-radius:10px;display:flex;align-items:center;justify-content:center;border:1px dashed var(--ck-border-subtle)",
|
|
19
|
+
emptyIcon: "font-size:2.5rem;margin-bottom:0.75rem;opacity:0.6",
|
|
20
|
+
emptyCenter: "text-align:center"
|
|
21
|
+
};
|
|
22
|
+
function Analytics() {
|
|
23
|
+
return React.createElement("div", { dangerouslySetInnerHTML: { __html: `
|
|
24
|
+
<div style="${s.page}">
|
|
25
|
+
<h2 style="${s.h2}">Analytics</h2>
|
|
26
|
+
<div style="${s.banner}">
|
|
27
|
+
\u{1F4CA} Track your content performance across platforms
|
|
19
28
|
</div>
|
|
20
|
-
<div
|
|
21
|
-
<div
|
|
22
|
-
|
|
29
|
+
<div style="${s.statsGrid}">
|
|
30
|
+
<div style="${s.statCard}">
|
|
31
|
+
<div style="${s.statValue};color:rgba(99,179,237,0.9)">0</div>
|
|
32
|
+
<div style="${s.statLabel}">Total Posts</div>
|
|
33
|
+
</div>
|
|
34
|
+
<div style="${s.statCard}">
|
|
35
|
+
<div style="${s.statValue};color:rgba(72,187,120,0.9)">0</div>
|
|
36
|
+
<div style="${s.statLabel}">Engagements</div>
|
|
37
|
+
</div>
|
|
38
|
+
<div style="${s.statCard}">
|
|
39
|
+
<div style="${s.statValue};color:rgba(237,137,54,0.9)">0</div>
|
|
40
|
+
<div style="${s.statLabel}">New Followers</div>
|
|
41
|
+
</div>
|
|
23
42
|
</div>
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
<p class="text-sm text-gray-500">Start publishing content to see analytics</p>
|
|
43
|
+
<div style="${s.card}">
|
|
44
|
+
<h3 style="${s.cardTitle}">Engagement Over Time</h3>
|
|
45
|
+
<div style="${s.emptyChart}">
|
|
46
|
+
<div style="${s.emptyCenter}">
|
|
47
|
+
<div style="${s.emptyIcon}">\u{1F4C8}</div>
|
|
48
|
+
<p style="${s.muted}">Your engagement chart will appear here</p>
|
|
49
|
+
<p style="${s.mutedSm}">Start publishing content to see analytics</p>
|
|
50
|
+
</div>
|
|
33
51
|
</div>
|
|
34
52
|
</div>
|
|
35
53
|
</div>
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
54
|
+
` } });
|
|
55
|
+
}
|
|
56
|
+
window.KitchenPlugin.registerTab("marketing", "analytics", Analytics);
|
|
57
|
+
})();
|
|
39
58
|
})();
|
|
@@ -1,33 +1,61 @@
|
|
|
1
1
|
(() => {
|
|
2
2
|
// src/tabs/content-calendar.tsx
|
|
3
|
-
function
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
3
|
+
(function() {
|
|
4
|
+
const React = window.React;
|
|
5
|
+
if (!React) return;
|
|
6
|
+
const s = {
|
|
7
|
+
page: "padding:2rem;max-width:1200px;margin:0 auto",
|
|
8
|
+
h2: "font-size:1.5rem;font-weight:700;color:var(--ck-text-primary);margin-bottom:1.5rem",
|
|
9
|
+
card: "background:var(--ck-bg-glass);border:1px solid var(--ck-border-subtle);border-radius:14px;padding:1.5rem;backdrop-filter:blur(18px) saturate(1.25)",
|
|
10
|
+
muted: "color:var(--ck-text-secondary);font-size:0.9rem",
|
|
11
|
+
mutedSm: "color:var(--ck-text-tertiary);font-size:0.85rem;margin-top:1rem",
|
|
12
|
+
banner: "background:var(--ck-bg-glass);border:1px solid rgba(72,187,120,0.25);border-radius:14px;padding:1.25rem;color:rgba(72,187,120,0.9);font-size:0.9rem;margin-bottom:1.5rem;backdrop-filter:blur(18px)",
|
|
13
|
+
grid7: "display:grid;grid-template-columns:repeat(7,1fr);gap:4px",
|
|
14
|
+
dayHeader: "text-align:center;padding:0.5rem;font-weight:600;font-size:0.8rem;color:var(--ck-text-tertiary);text-transform:uppercase;letter-spacing:0.05em",
|
|
15
|
+
dayCell: "border:1px solid var(--ck-border-subtle);border-radius:8px;padding:0.5rem;min-height:5rem;transition:background 0.15s",
|
|
16
|
+
dayCellActive: "border:1px solid var(--ck-border-subtle);border-radius:8px;padding:0.5rem;min-height:5rem;background:rgba(255,255,255,0.03);transition:background 0.15s",
|
|
17
|
+
dayCellEmpty: "border:1px solid transparent;border-radius:8px;padding:0.5rem;min-height:5rem;opacity:0.3",
|
|
18
|
+
dayNum: "font-size:0.8rem;font-weight:500;color:var(--ck-text-secondary)",
|
|
19
|
+
todayNum: "font-size:0.8rem;font-weight:700;color:rgba(99,179,237,1);background:rgba(99,179,237,0.15);width:1.5rem;height:1.5rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center"
|
|
20
|
+
};
|
|
21
|
+
const now = /* @__PURE__ */ new Date();
|
|
22
|
+
const year = now.getFullYear();
|
|
23
|
+
const month = now.getMonth();
|
|
24
|
+
const today = now.getDate();
|
|
25
|
+
const firstDay = new Date(year, month, 1).getDay();
|
|
26
|
+
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
|
27
|
+
const monthName = now.toLocaleString("default", { month: "long", year: "numeric" });
|
|
28
|
+
const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
|
29
|
+
const headerHtml = days.map((d) => `<div style="${s.dayHeader}">${d}</div>`).join("");
|
|
30
|
+
let cellsHtml = "";
|
|
31
|
+
for (let i = 0; i < 42; i++) {
|
|
32
|
+
const dayNum = i - firstDay + 1;
|
|
33
|
+
if (dayNum < 1 || dayNum > daysInMonth) {
|
|
34
|
+
cellsHtml += `<div style="${s.dayCellEmpty}"></div>`;
|
|
35
|
+
} else {
|
|
36
|
+
const isToday = dayNum === today;
|
|
37
|
+
const numStyle = isToday ? s.todayNum : s.dayNum;
|
|
38
|
+
cellsHtml += `<div style="${isToday ? s.dayCellActive : s.dayCellActive}">
|
|
39
|
+
<span style="${numStyle}">${dayNum}</span>
|
|
40
|
+
</div>`;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
function ContentCalendar() {
|
|
44
|
+
return React.createElement("div", { dangerouslySetInnerHTML: { __html: `
|
|
45
|
+
<div style="${s.page}">
|
|
46
|
+
<h2 style="${s.h2}">Content Calendar</h2>
|
|
47
|
+
<div style="${s.banner}">
|
|
48
|
+
\u{1F4C5} Schedule and plan your content
|
|
19
49
|
</div>
|
|
20
|
-
<div
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
</div>`;
|
|
26
|
-
}).join("")}
|
|
50
|
+
<div style="${s.card}">
|
|
51
|
+
<div style="text-align:center;font-weight:600;font-size:1.1rem;color:var(--ck-text-primary);margin-bottom:1rem">${monthName}</div>
|
|
52
|
+
<div style="${s.grid7}">${headerHtml}</div>
|
|
53
|
+
<div style="${s.grid7};margin-top:4px">${cellsHtml}</div>
|
|
54
|
+
<p style="${s.mutedSm}">Scheduled posts will appear on their respective dates. Drag to reschedule.</p>
|
|
27
55
|
</div>
|
|
28
|
-
<p class="text-gray-500 text-sm mt-4">Scheduled posts would appear on their respective dates. Drag to reschedule!</p>
|
|
29
56
|
</div>
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
57
|
+
` } });
|
|
58
|
+
}
|
|
59
|
+
window.KitchenPlugin.registerTab("marketing", "content-calendar", ContentCalendar);
|
|
60
|
+
})();
|
|
33
61
|
})();
|
|
@@ -1,29 +1,52 @@
|
|
|
1
1
|
(() => {
|
|
2
2
|
// src/tabs/content-library.tsx
|
|
3
|
-
function
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
3
|
+
(function() {
|
|
4
|
+
const React = window.React;
|
|
5
|
+
if (!React) return;
|
|
6
|
+
const s = {
|
|
7
|
+
page: "padding:2rem;max-width:1200px;margin:0 auto",
|
|
8
|
+
h2: "font-size:1.5rem;font-weight:700;color:var(--ck-text-primary);margin-bottom:1.5rem",
|
|
9
|
+
card: "background:var(--ck-bg-glass);border:1px solid var(--ck-border-subtle);border-radius:14px;padding:1.5rem;backdrop-filter:blur(18px) saturate(1.25)",
|
|
10
|
+
cardTitle: "font-size:1.1rem;font-weight:600;color:var(--ck-text-primary);margin-bottom:0.75rem",
|
|
11
|
+
muted: "color:var(--ck-text-secondary);font-size:0.9rem;line-height:1.6",
|
|
12
|
+
mutedSm: "color:var(--ck-text-tertiary);font-size:0.85rem;font-style:italic",
|
|
13
|
+
stack: "display:flex;flex-direction:column;gap:1rem",
|
|
14
|
+
list: "color:var(--ck-text-secondary);font-size:0.9rem;line-height:2;margin-top:0.5rem;padding-left:1.25rem",
|
|
15
|
+
banner: "background:var(--ck-bg-glass);border:1px solid rgba(99,179,237,0.25);border-radius:14px;padding:1.25rem;color:rgba(99,179,237,0.9);font-size:0.9rem;margin-bottom:1.5rem;backdrop-filter:blur(18px)",
|
|
16
|
+
emptyIcon: "font-size:2.5rem;margin-bottom:0.75rem;opacity:0.6",
|
|
17
|
+
emptyCenter: "text-align:center;padding:2.5rem 0",
|
|
18
|
+
btn: "background:rgba(99,179,237,0.15);border:1px solid rgba(99,179,237,0.3);color:rgba(99,179,237,0.9);padding:0.6rem 1.25rem;border-radius:10px;cursor:pointer;font-size:0.9rem;font-weight:500;transition:all 0.15s"
|
|
19
|
+
};
|
|
20
|
+
function ContentLibrary() {
|
|
21
|
+
return React.createElement("div", { dangerouslySetInnerHTML: { __html: `
|
|
22
|
+
<div style="${s.page}">
|
|
23
|
+
<h2 style="${s.h2}">Content Library</h2>
|
|
24
|
+
<div style="${s.banner}">
|
|
25
|
+
\u{1F389} Marketing Suite plugin is active! Manage your content from here.
|
|
20
26
|
</div>
|
|
21
|
-
<div
|
|
22
|
-
<
|
|
23
|
-
|
|
27
|
+
<div style="${s.stack}">
|
|
28
|
+
<div style="${s.card}">
|
|
29
|
+
<h3 style="${s.cardTitle}">Create New Post</h3>
|
|
30
|
+
<p style="${s.muted}">Your content creation tools will live here:</p>
|
|
31
|
+
<ul style="${s.list}">
|
|
32
|
+
<li>Rich text editor with media embedding</li>
|
|
33
|
+
<li>Multi-platform publishing (Twitter, Instagram, LinkedIn)</li>
|
|
34
|
+
<li>Scheduling & auto-posting</li>
|
|
35
|
+
<li>Template library for quick starts</li>
|
|
36
|
+
</ul>
|
|
37
|
+
</div>
|
|
38
|
+
<div style="${s.card}">
|
|
39
|
+
<h3 style="${s.cardTitle}">Recent Posts</h3>
|
|
40
|
+
<div style="${s.emptyCenter}">
|
|
41
|
+
<div style="${s.emptyIcon}">\u270D\uFE0F</div>
|
|
42
|
+
<p style="${s.muted}">No posts yet</p>
|
|
43
|
+
<p style="${s.mutedSm}">Create your first post to get started</p>
|
|
44
|
+
</div>
|
|
45
|
+
</div>
|
|
24
46
|
</div>
|
|
25
47
|
</div>
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
48
|
+
` } });
|
|
49
|
+
}
|
|
50
|
+
window.KitchenPlugin.registerTab("marketing", "content-library", ContentLibrary);
|
|
51
|
+
})();
|
|
29
52
|
})();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jiggai/kitchen-plugin-marketing",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.3",
|
|
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",
|