@jiggai/kitchen-plugin-marketing 0.2.3 → 0.2.5
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 +55 -53
- package/dist/tabs/analytics.js +44 -49
- package/dist/tabs/content-calendar.js +59 -45
- package/dist/tabs/content-library.js +37 -43
- package/package.json +1 -1
package/dist/tabs/accounts.js
CHANGED
|
@@ -1,61 +1,63 @@
|
|
|
1
1
|
(() => {
|
|
2
2
|
// src/tabs/accounts.tsx
|
|
3
3
|
(function() {
|
|
4
|
-
const
|
|
5
|
-
if (!
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
4
|
+
const R = window.React;
|
|
5
|
+
if (!R) return;
|
|
6
|
+
const h = R.createElement;
|
|
7
|
+
const t = {
|
|
8
|
+
text: { color: "var(--ck-text-primary)" },
|
|
9
|
+
muted: { color: "var(--ck-text-secondary)" },
|
|
10
|
+
faint: { color: "var(--ck-text-tertiary)" },
|
|
11
|
+
card: {
|
|
12
|
+
background: "rgba(255,255,255,0.03)",
|
|
13
|
+
border: "1px solid var(--ck-border-subtle)",
|
|
14
|
+
borderRadius: "10px",
|
|
15
|
+
padding: "1rem"
|
|
16
|
+
},
|
|
17
|
+
platformBtn: {
|
|
18
|
+
background: "rgba(255,255,255,0.03)",
|
|
19
|
+
border: "1px solid var(--ck-border-subtle)",
|
|
20
|
+
borderRadius: "10px",
|
|
21
|
+
cursor: "pointer",
|
|
22
|
+
transition: "border-color 0.15s, background 0.15s",
|
|
23
|
+
padding: "1rem",
|
|
24
|
+
textAlign: "center"
|
|
25
|
+
}
|
|
20
26
|
};
|
|
27
|
+
const platforms = [
|
|
28
|
+
{ icon: "\u{1D54F}", name: "Twitter / X" },
|
|
29
|
+
{ icon: "\u{1F4F7}", name: "Instagram" },
|
|
30
|
+
{ icon: "\u{1F3AC}", name: "YouTube" },
|
|
31
|
+
{ icon: "\u{1F4BC}", name: "LinkedIn" }
|
|
32
|
+
];
|
|
21
33
|
function Accounts() {
|
|
22
|
-
return
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
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>
|
|
56
|
-
</div>
|
|
57
|
-
</div>
|
|
58
|
-
` } });
|
|
34
|
+
return h(
|
|
35
|
+
"div",
|
|
36
|
+
{ className: "space-y-3" },
|
|
37
|
+
h(
|
|
38
|
+
"div",
|
|
39
|
+
{ style: t.card },
|
|
40
|
+
h("div", { className: "text-sm font-medium mb-3", style: t.text }, "Connect Account"),
|
|
41
|
+
h(
|
|
42
|
+
"div",
|
|
43
|
+
{ style: { display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: "0.5rem" } },
|
|
44
|
+
...platforms.map(
|
|
45
|
+
(p) => h(
|
|
46
|
+
"div",
|
|
47
|
+
{ key: p.name, style: t.platformBtn },
|
|
48
|
+
h("div", { className: "text-xl mb-1" }, p.icon),
|
|
49
|
+
h("div", { className: "text-xs font-medium", style: t.text }, p.name)
|
|
50
|
+
)
|
|
51
|
+
)
|
|
52
|
+
)
|
|
53
|
+
),
|
|
54
|
+
h(
|
|
55
|
+
"div",
|
|
56
|
+
{ style: t.card },
|
|
57
|
+
h("div", { className: "text-sm font-medium mb-2", style: t.text }, "Connected Accounts"),
|
|
58
|
+
h("div", { className: "py-6 text-center text-sm", style: t.faint }, "No accounts connected yet.")
|
|
59
|
+
)
|
|
60
|
+
);
|
|
59
61
|
}
|
|
60
62
|
window.KitchenPlugin.registerTab("marketing", "accounts", Accounts);
|
|
61
63
|
})();
|
package/dist/tabs/analytics.js
CHANGED
|
@@ -1,57 +1,52 @@
|
|
|
1
1
|
(() => {
|
|
2
2
|
// src/tabs/analytics.tsx
|
|
3
3
|
(function() {
|
|
4
|
-
const
|
|
5
|
-
if (!
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
statLabel:
|
|
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"
|
|
4
|
+
const R = window.React;
|
|
5
|
+
if (!R) return;
|
|
6
|
+
const h = R.createElement;
|
|
7
|
+
const t = {
|
|
8
|
+
text: { color: "var(--ck-text-primary)" },
|
|
9
|
+
muted: { color: "var(--ck-text-secondary)" },
|
|
10
|
+
faint: { color: "var(--ck-text-tertiary)" },
|
|
11
|
+
card: {
|
|
12
|
+
background: "rgba(255,255,255,0.03)",
|
|
13
|
+
border: "1px solid var(--ck-border-subtle)",
|
|
14
|
+
borderRadius: "10px",
|
|
15
|
+
padding: "1rem"
|
|
16
|
+
},
|
|
17
|
+
statLabel: { color: "var(--ck-text-tertiary)", fontSize: "0.75rem", textTransform: "uppercase", letterSpacing: "0.05em" }
|
|
21
18
|
};
|
|
19
|
+
const stats = [
|
|
20
|
+
{ label: "Total Posts", value: "0", color: "rgba(99,179,237,0.9)" },
|
|
21
|
+
{ label: "Engagements", value: "0", color: "rgba(72,187,120,0.9)" },
|
|
22
|
+
{ label: "New Followers", value: "0", color: "rgba(237,137,54,0.9)" }
|
|
23
|
+
];
|
|
22
24
|
function Analytics() {
|
|
23
|
-
return
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
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>
|
|
51
|
-
</div>
|
|
52
|
-
</div>
|
|
53
|
-
</div>
|
|
54
|
-
` } });
|
|
25
|
+
return h(
|
|
26
|
+
"div",
|
|
27
|
+
{ className: "space-y-3" },
|
|
28
|
+
h(
|
|
29
|
+
"div",
|
|
30
|
+
{ className: "grid grid-cols-3 gap-3" },
|
|
31
|
+
...stats.map(
|
|
32
|
+
(s) => h(
|
|
33
|
+
"div",
|
|
34
|
+
{ key: s.label, className: "text-center p-3", style: t.card },
|
|
35
|
+
h("div", { className: "text-2xl font-bold mb-1", style: { color: s.color } }, s.value),
|
|
36
|
+
h("div", { style: t.statLabel }, s.label)
|
|
37
|
+
)
|
|
38
|
+
)
|
|
39
|
+
),
|
|
40
|
+
h(
|
|
41
|
+
"div",
|
|
42
|
+
{ style: t.card },
|
|
43
|
+
h("div", { className: "text-sm font-medium mb-3", style: t.text }, "Engagement Over Time"),
|
|
44
|
+
h("div", {
|
|
45
|
+
className: "flex items-center justify-center py-8 text-sm",
|
|
46
|
+
style: { ...t.faint, border: "1px dashed var(--ck-border-subtle)", borderRadius: "8px" }
|
|
47
|
+
}, "Start publishing content to see analytics")
|
|
48
|
+
)
|
|
49
|
+
);
|
|
55
50
|
}
|
|
56
51
|
window.KitchenPlugin.registerTab("marketing", "analytics", Analytics);
|
|
57
52
|
})();
|
|
@@ -1,23 +1,37 @@
|
|
|
1
1
|
(() => {
|
|
2
2
|
// src/tabs/content-calendar.tsx
|
|
3
3
|
(function() {
|
|
4
|
-
const
|
|
5
|
-
if (!
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
4
|
+
const R = window.React;
|
|
5
|
+
if (!R) return;
|
|
6
|
+
const h = R.createElement;
|
|
7
|
+
const t = {
|
|
8
|
+
text: { color: "var(--ck-text-primary)" },
|
|
9
|
+
muted: { color: "var(--ck-text-secondary)" },
|
|
10
|
+
faint: { color: "var(--ck-text-tertiary)" },
|
|
11
|
+
card: {
|
|
12
|
+
background: "rgba(255,255,255,0.03)",
|
|
13
|
+
border: "1px solid var(--ck-border-subtle)",
|
|
14
|
+
borderRadius: "10px",
|
|
15
|
+
padding: "1rem"
|
|
16
|
+
},
|
|
17
|
+
dayHeader: { color: "var(--ck-text-tertiary)", fontSize: "0.75rem", textTransform: "uppercase", letterSpacing: "0.05em", fontWeight: 600 },
|
|
18
|
+
cell: { border: "1px solid var(--ck-border-subtle)", borderRadius: "6px", minHeight: "4rem", padding: "0.35rem 0.5rem" },
|
|
19
|
+
cellEmpty: { minHeight: "4rem", opacity: 0.15 },
|
|
20
|
+
dayNum: { color: "var(--ck-text-secondary)", fontSize: "0.8rem", fontWeight: 500 },
|
|
21
|
+
todayBadge: {
|
|
22
|
+
color: "rgba(99,179,237,1)",
|
|
23
|
+
background: "rgba(99,179,237,0.15)",
|
|
24
|
+
fontSize: "0.8rem",
|
|
25
|
+
fontWeight: 700,
|
|
26
|
+
width: "1.5rem",
|
|
27
|
+
height: "1.5rem",
|
|
28
|
+
borderRadius: "50%",
|
|
29
|
+
display: "inline-flex",
|
|
30
|
+
alignItems: "center",
|
|
31
|
+
justifyContent: "center"
|
|
32
|
+
}
|
|
20
33
|
};
|
|
34
|
+
const grid7 = { display: "grid", gridTemplateColumns: "repeat(7,1fr)", gap: "3px" };
|
|
21
35
|
const now = /* @__PURE__ */ new Date();
|
|
22
36
|
const year = now.getFullYear();
|
|
23
37
|
const month = now.getMonth();
|
|
@@ -25,36 +39,36 @@
|
|
|
25
39
|
const firstDay = new Date(year, month, 1).getDay();
|
|
26
40
|
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
|
27
41
|
const monthName = now.toLocaleString("default", { month: "long", year: "numeric" });
|
|
28
|
-
const
|
|
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
|
-
}
|
|
42
|
+
const dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
|
43
43
|
function ContentCalendar() {
|
|
44
|
-
|
|
45
|
-
<
|
|
46
|
-
|
|
47
|
-
<
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
44
|
+
const cells = [];
|
|
45
|
+
for (let i = 0; i < 42; i++) {
|
|
46
|
+
const day = i - firstDay + 1;
|
|
47
|
+
if (day < 1 || day > daysInMonth) {
|
|
48
|
+
cells.push(h("div", { key: i, style: t.cellEmpty }));
|
|
49
|
+
} else {
|
|
50
|
+
const isToday = day === today;
|
|
51
|
+
cells.push(
|
|
52
|
+
h(
|
|
53
|
+
"div",
|
|
54
|
+
{ key: i, style: t.cell },
|
|
55
|
+
h("span", { style: isToday ? t.todayBadge : t.dayNum }, day)
|
|
56
|
+
)
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
return h(
|
|
61
|
+
"div",
|
|
62
|
+
{ style: t.card },
|
|
63
|
+
h("div", { className: "text-sm font-medium mb-3", style: t.text }, monthName),
|
|
64
|
+
h(
|
|
65
|
+
"div",
|
|
66
|
+
{ style: { ...grid7, marginBottom: "3px" } },
|
|
67
|
+
...dayNames.map((d) => h("div", { key: d, className: "text-center py-1", style: t.dayHeader }, d))
|
|
68
|
+
),
|
|
69
|
+
h("div", { style: grid7 }, ...cells),
|
|
70
|
+
h("div", { className: "mt-3 text-xs", style: t.faint }, "Scheduled posts will appear on their respective dates.")
|
|
71
|
+
);
|
|
58
72
|
}
|
|
59
73
|
window.KitchenPlugin.registerTab("marketing", "content-calendar", ContentCalendar);
|
|
60
74
|
})();
|
|
@@ -1,51 +1,45 @@
|
|
|
1
1
|
(() => {
|
|
2
2
|
// src/tabs/content-library.tsx
|
|
3
3
|
(function() {
|
|
4
|
-
const
|
|
5
|
-
if (!
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
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"
|
|
4
|
+
const R = window.React;
|
|
5
|
+
if (!R) return;
|
|
6
|
+
const h = R.createElement;
|
|
7
|
+
const t = {
|
|
8
|
+
text: { color: "var(--ck-text-primary)" },
|
|
9
|
+
muted: { color: "var(--ck-text-secondary)" },
|
|
10
|
+
faint: { color: "var(--ck-text-tertiary)" },
|
|
11
|
+
card: {
|
|
12
|
+
background: "rgba(255,255,255,0.03)",
|
|
13
|
+
border: "1px solid var(--ck-border-subtle)",
|
|
14
|
+
borderRadius: "10px",
|
|
15
|
+
padding: "1rem"
|
|
16
|
+
}
|
|
19
17
|
};
|
|
20
18
|
function ContentLibrary() {
|
|
21
|
-
return
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
</div>
|
|
46
|
-
</div>
|
|
47
|
-
</div>
|
|
48
|
-
` } });
|
|
19
|
+
return h(
|
|
20
|
+
"div",
|
|
21
|
+
{ className: "space-y-3" },
|
|
22
|
+
h(
|
|
23
|
+
"div",
|
|
24
|
+
{ style: t.card },
|
|
25
|
+
h("div", { className: "text-sm font-medium mb-2", style: t.text }, "Create New Post"),
|
|
26
|
+
h("div", { className: "text-sm", style: t.muted }, "Your content creation tools will live here:"),
|
|
27
|
+
h(
|
|
28
|
+
"ul",
|
|
29
|
+
{ className: "text-sm mt-2 space-y-1", style: { ...t.muted, listStyle: "disc inside", paddingLeft: "0.5rem" } },
|
|
30
|
+
h("li", null, "Rich text editor with media embedding"),
|
|
31
|
+
h("li", null, "Multi-platform publishing (Twitter, Instagram, LinkedIn)"),
|
|
32
|
+
h("li", null, "Scheduling & auto-posting"),
|
|
33
|
+
h("li", null, "Template library for quick starts")
|
|
34
|
+
)
|
|
35
|
+
),
|
|
36
|
+
h(
|
|
37
|
+
"div",
|
|
38
|
+
{ style: t.card },
|
|
39
|
+
h("div", { className: "text-sm font-medium mb-2", style: t.text }, "Recent Posts"),
|
|
40
|
+
h("div", { className: "py-6 text-center text-sm", style: t.faint }, "No posts yet \u2014 create your first post to get started.")
|
|
41
|
+
)
|
|
42
|
+
);
|
|
49
43
|
}
|
|
50
44
|
window.KitchenPlugin.registerTab("marketing", "content-library", ContentLibrary);
|
|
51
45
|
})();
|