feat(rpubs): add zine generator link and ?tool= auto-spawn for canvas
Add AI zine generator section to rPubs landing page with style showcase and links to /rpubs/zine and zine.mycofi.earth. Add /zine sub-route that redirects to canvas with ?tool=folk-zine-gen. Add ?tool= URL param support to canvas for auto-spawning any registered shape on load. Also adds folk-image and folk-bookmark shape components. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
5a33293a23
commit
dd56f486bc
|
|
@ -0,0 +1,348 @@
|
|||
import { FolkShape } from "./folk-shape";
|
||||
import { css, html } from "./tags";
|
||||
|
||||
const styles = css`
|
||||
:host {
|
||||
background: var(--rs-bg-surface, #fff);
|
||||
color: var(--rs-text-primary, #1e293b);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
min-width: 240px;
|
||||
min-height: 100px;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 12px 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
color: var(--rs-text-primary, #1e293b);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.card-description {
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
line-height: 1.4;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.card-domain {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
color: #94a3b8;
|
||||
margin-top: auto;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.card-favicon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.url-input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
padding: 24px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.url-input-icon {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.url-input-label {
|
||||
font-size: 13px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.url-input {
|
||||
width: 100%;
|
||||
max-width: 280px;
|
||||
padding: 10px 14px;
|
||||
border: 2px solid var(--rs-input-border, #e2e8f0);
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
background: var(--rs-input-bg, #fff);
|
||||
color: var(--rs-input-text, inherit);
|
||||
}
|
||||
|
||||
.url-input:focus {
|
||||
border-color: #6366f1;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: #94a3b8;
|
||||
font-size: 13px;
|
||||
}
|
||||
`;
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"folk-bookmark": FolkBookmark;
|
||||
}
|
||||
}
|
||||
|
||||
export class FolkBookmark extends FolkShape {
|
||||
static override tagName = "folk-bookmark";
|
||||
|
||||
static {
|
||||
const sheet = new CSSStyleSheet();
|
||||
const parentRules = Array.from(FolkShape.styles.cssRules)
|
||||
.map((r) => r.cssText)
|
||||
.join("\n");
|
||||
const childRules = Array.from(styles.cssRules)
|
||||
.map((r) => r.cssText)
|
||||
.join("\n");
|
||||
sheet.replaceSync(`${parentRules}\n${childRules}`);
|
||||
this.styles = sheet;
|
||||
}
|
||||
|
||||
#url: string | null = null;
|
||||
#title: string = "";
|
||||
#description: string = "";
|
||||
#image: string | null = null;
|
||||
#domain: string = "";
|
||||
|
||||
get url() { return this.#url; }
|
||||
set url(value: string | null) {
|
||||
this.#url = value;
|
||||
this.requestUpdate("url");
|
||||
this.dispatchEvent(new CustomEvent("url-change", { detail: { url: value } }));
|
||||
}
|
||||
|
||||
get bookmarkTitle() { return this.#title; }
|
||||
set bookmarkTitle(v: string) { this.#title = v; }
|
||||
|
||||
get description() { return this.#description; }
|
||||
set description(v: string) { this.#description = v; }
|
||||
|
||||
get image() { return this.#image; }
|
||||
set image(v: string | null) { this.#image = v; }
|
||||
|
||||
get domain() { return this.#domain; }
|
||||
set domain(v: string) { this.#domain = v; }
|
||||
|
||||
override createRenderRoot() {
|
||||
const root = super.createRenderRoot();
|
||||
|
||||
this.#url = this.getAttribute("url") || null;
|
||||
|
||||
const wrapper = document.createElement("div");
|
||||
wrapper.innerHTML = html`
|
||||
<div class="url-input-container">
|
||||
<span class="url-input-icon">🔖</span>
|
||||
<span class="url-input-label">Enter a URL to create a bookmark card</span>
|
||||
<input
|
||||
type="text"
|
||||
class="url-input"
|
||||
placeholder="https://example.com"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const slot = root.querySelector("slot");
|
||||
const containerDiv = slot?.parentElement as HTMLElement;
|
||||
if (containerDiv) {
|
||||
containerDiv.replaceWith(wrapper);
|
||||
}
|
||||
|
||||
const urlInputContainer = wrapper.querySelector(".url-input-container") as HTMLElement;
|
||||
const urlInput = wrapper.querySelector(".url-input") as HTMLInputElement;
|
||||
|
||||
const handleUrlSubmit = () => {
|
||||
let inputUrl = urlInput.value.trim();
|
||||
if (!inputUrl) return;
|
||||
if (!inputUrl.startsWith("http://") && !inputUrl.startsWith("https://")) {
|
||||
inputUrl = `https://${inputUrl}`;
|
||||
}
|
||||
this.url = inputUrl;
|
||||
this.#fetchAndRender(wrapper, urlInputContainer);
|
||||
};
|
||||
|
||||
urlInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
handleUrlSubmit();
|
||||
}
|
||||
});
|
||||
|
||||
urlInput.addEventListener("blur", () => {
|
||||
if (urlInput.value.trim()) handleUrlSubmit();
|
||||
});
|
||||
|
||||
// If URL is already set with cached data, render card directly
|
||||
if (this.#url && this.#title) {
|
||||
this.#renderCard(wrapper, urlInputContainer);
|
||||
} else if (this.#url) {
|
||||
this.#fetchAndRender(wrapper, urlInputContainer);
|
||||
}
|
||||
|
||||
// Click to open URL in new tab
|
||||
wrapper.addEventListener("click", (e) => {
|
||||
if ((e.target as HTMLElement).tagName === "INPUT") return;
|
||||
if (this.#url) {
|
||||
window.open(this.#url, "_blank", "noopener,noreferrer");
|
||||
}
|
||||
});
|
||||
|
||||
return root;
|
||||
}
|
||||
|
||||
async #fetchAndRender(wrapper: HTMLElement, urlInputContainer: HTMLElement) {
|
||||
if (!this.#url) return;
|
||||
|
||||
// Show loading state
|
||||
urlInputContainer.innerHTML = `<div class="loading">Loading preview…</div>`;
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/link-preview?url=${encodeURIComponent(this.#url)}`);
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
this.#title = data.title || "";
|
||||
this.#description = data.description || "";
|
||||
this.#image = data.image || null;
|
||||
this.#domain = data.domain || "";
|
||||
}
|
||||
} catch {
|
||||
// Fallback: derive domain from URL
|
||||
}
|
||||
|
||||
// Ensure we have at least domain
|
||||
if (!this.#domain && this.#url) {
|
||||
try {
|
||||
this.#domain = new URL(this.#url).hostname.replace("www.", "");
|
||||
} catch {}
|
||||
}
|
||||
if (!this.#title) {
|
||||
this.#title = this.#domain || this.#url || "Link";
|
||||
}
|
||||
|
||||
this.#renderCard(wrapper, urlInputContainer);
|
||||
}
|
||||
|
||||
#renderCard(wrapper: HTMLElement, urlInputContainer: HTMLElement) {
|
||||
urlInputContainer.remove();
|
||||
|
||||
const card = document.createElement("div");
|
||||
card.className = "card";
|
||||
|
||||
let cardHtml = "";
|
||||
|
||||
if (this.#image) {
|
||||
cardHtml += `<img class="card-image" src="${this.#escapeAttr(this.#image)}" alt="" draggable="false" />`;
|
||||
}
|
||||
|
||||
const faviconUrl = this.#url
|
||||
? `https://www.google.com/s2/favicons?domain=${new URL(this.#url).hostname}&sz=32`
|
||||
: "";
|
||||
|
||||
cardHtml += `
|
||||
<div class="card-body">
|
||||
<div class="card-title">${this.#escapeHtml(this.#title)}</div>
|
||||
${this.#description ? `<div class="card-description">${this.#escapeHtml(this.#description)}</div>` : ""}
|
||||
<div class="card-domain">
|
||||
${faviconUrl ? `<img class="card-favicon" src="${this.#escapeAttr(faviconUrl)}" onerror="this.style.display='none'" />` : ""}
|
||||
<span>${this.#escapeHtml(this.#domain)}</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
card.innerHTML = cardHtml;
|
||||
|
||||
// Handle image load error — hide image area
|
||||
const img = card.querySelector(".card-image") as HTMLImageElement;
|
||||
if (img) {
|
||||
img.onerror = () => img.remove();
|
||||
}
|
||||
|
||||
wrapper.appendChild(card);
|
||||
}
|
||||
|
||||
#escapeHtml(str: string): string {
|
||||
return str.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
|
||||
}
|
||||
|
||||
#escapeAttr(str: string): string {
|
||||
return str.replace(/&/g, "&").replace(/"/g, """).replace(/</g, "<").replace(/>/g, ">");
|
||||
}
|
||||
|
||||
static override fromData(data: Record<string, any>): FolkBookmark {
|
||||
const shape = FolkShape.fromData(data) as FolkBookmark;
|
||||
if (data.url) shape.url = data.url;
|
||||
if (data.title) shape.bookmarkTitle = data.title;
|
||||
if (data.description) shape.description = data.description;
|
||||
if (data.image) shape.image = data.image;
|
||||
if (data.domain) shape.domain = data.domain;
|
||||
return shape;
|
||||
}
|
||||
|
||||
override toJSON() {
|
||||
return {
|
||||
...super.toJSON(),
|
||||
type: "folk-bookmark",
|
||||
url: this.url,
|
||||
title: this.#title,
|
||||
description: this.#description,
|
||||
image: this.#image,
|
||||
domain: this.#domain,
|
||||
};
|
||||
}
|
||||
|
||||
override applyData(data: Record<string, any>): void {
|
||||
super.applyData(data);
|
||||
if ("url" in data && this.url !== data.url) {
|
||||
this.url = data.url;
|
||||
}
|
||||
if ("title" in data) this.#title = data.title;
|
||||
if ("description" in data) this.#description = data.description;
|
||||
if ("image" in data) this.#image = data.image;
|
||||
if ("domain" in data) this.#domain = data.domain;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,333 @@
|
|||
import { FolkShape } from "./folk-shape";
|
||||
import { css, html } from "./tags";
|
||||
|
||||
const styles = css`
|
||||
:host {
|
||||
background: var(--rs-bg-surface, #fff);
|
||||
color: var(--rs-text-primary, #1e293b);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
min-width: 200px;
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 12px;
|
||||
background: #22c55e;
|
||||
color: white;
|
||||
border-radius: 8px 8px 0 0;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.header-actions button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.header-actions button:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: calc(100% - 36px);
|
||||
position: relative;
|
||||
border-radius: 0 0 8px 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.drop-zone {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
padding: 24px;
|
||||
gap: 12px;
|
||||
border: 2px dashed var(--rs-input-border, #e2e8f0);
|
||||
border-radius: 0 0 8px 8px;
|
||||
margin: 8px;
|
||||
text-align: center;
|
||||
color: #94a3b8;
|
||||
font-size: 13px;
|
||||
transition: border-color 0.2s, background 0.2s;
|
||||
}
|
||||
|
||||
.drop-zone.dragover {
|
||||
border-color: #22c55e;
|
||||
background: rgba(34, 197, 94, 0.05);
|
||||
}
|
||||
|
||||
.drop-zone-icon {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.url-input {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
padding: 10px 14px;
|
||||
border: 2px solid var(--rs-input-border, #e2e8f0);
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
background: var(--rs-input-bg, #fff);
|
||||
color: var(--rs-input-text, inherit);
|
||||
}
|
||||
|
||||
.url-input:focus {
|
||||
border-color: #22c55e;
|
||||
}
|
||||
|
||||
.image-display {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
`;
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"folk-image": FolkImage;
|
||||
}
|
||||
}
|
||||
|
||||
export class FolkImage extends FolkShape {
|
||||
static override tagName = "folk-image";
|
||||
|
||||
static {
|
||||
const sheet = new CSSStyleSheet();
|
||||
const parentRules = Array.from(FolkShape.styles.cssRules)
|
||||
.map((r) => r.cssText)
|
||||
.join("\n");
|
||||
const childRules = Array.from(styles.cssRules)
|
||||
.map((r) => r.cssText)
|
||||
.join("\n");
|
||||
sheet.replaceSync(`${parentRules}\n${childRules}`);
|
||||
this.styles = sheet;
|
||||
}
|
||||
|
||||
#src: string | null = null;
|
||||
#alt: string = "";
|
||||
|
||||
get src() {
|
||||
return this.#src;
|
||||
}
|
||||
|
||||
set src(value: string | null) {
|
||||
this.#src = value;
|
||||
this.requestUpdate("src");
|
||||
this.dispatchEvent(new CustomEvent("src-change", { detail: { src: value } }));
|
||||
}
|
||||
|
||||
get alt() {
|
||||
return this.#alt;
|
||||
}
|
||||
|
||||
set alt(value: string) {
|
||||
this.#alt = value;
|
||||
}
|
||||
|
||||
override createRenderRoot() {
|
||||
const root = super.createRenderRoot();
|
||||
|
||||
this.#src = this.getAttribute("src") || null;
|
||||
this.#alt = this.getAttribute("alt") || "";
|
||||
|
||||
const wrapper = document.createElement("div");
|
||||
wrapper.innerHTML = html`
|
||||
<div class="header">
|
||||
<span class="header-title">
|
||||
<span>🖼️</span>
|
||||
<span class="title-text">Image</span>
|
||||
</span>
|
||||
<div class="header-actions">
|
||||
<button class="close-btn" title="Close">×</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="drop-zone">
|
||||
<span class="drop-zone-icon">🖼️</span>
|
||||
<span>Paste, drop, or enter image URL…</span>
|
||||
<input
|
||||
type="text"
|
||||
class="url-input"
|
||||
placeholder="https://example.com/image.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const slot = root.querySelector("slot");
|
||||
const containerDiv = slot?.parentElement as HTMLElement;
|
||||
if (containerDiv) {
|
||||
containerDiv.replaceWith(wrapper);
|
||||
}
|
||||
|
||||
const content = wrapper.querySelector(".content") as HTMLElement;
|
||||
const dropZone = wrapper.querySelector(".drop-zone") as HTMLElement;
|
||||
const urlInput = wrapper.querySelector(".url-input") as HTMLInputElement;
|
||||
const closeBtn = wrapper.querySelector(".close-btn") as HTMLButtonElement;
|
||||
|
||||
// URL input
|
||||
const handleUrlSubmit = () => {
|
||||
let inputUrl = urlInput.value.trim();
|
||||
if (!inputUrl) return;
|
||||
if (!inputUrl.startsWith("http://") && !inputUrl.startsWith("https://")) {
|
||||
inputUrl = `https://${inputUrl}`;
|
||||
}
|
||||
this.src = inputUrl;
|
||||
this.#renderImage(content, dropZone);
|
||||
};
|
||||
|
||||
urlInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
handleUrlSubmit();
|
||||
}
|
||||
});
|
||||
|
||||
urlInput.addEventListener("blur", () => {
|
||||
if (urlInput.value.trim()) handleUrlSubmit();
|
||||
});
|
||||
|
||||
// Drop image files directly onto shape
|
||||
dropZone.addEventListener("dragover", (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
dropZone.classList.add("dragover");
|
||||
});
|
||||
|
||||
dropZone.addEventListener("dragleave", () => {
|
||||
dropZone.classList.remove("dragover");
|
||||
});
|
||||
|
||||
dropZone.addEventListener("drop", (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
dropZone.classList.remove("dragover");
|
||||
|
||||
const file = Array.from(e.dataTransfer?.files || []).find((f) =>
|
||||
f.type.startsWith("image/")
|
||||
);
|
||||
if (file) {
|
||||
this.#uploadFile(file, content, dropZone);
|
||||
return;
|
||||
}
|
||||
|
||||
const url = e.dataTransfer?.getData("text/plain") || "";
|
||||
if (url.trim()) {
|
||||
this.src = url.trim();
|
||||
this.#renderImage(content, dropZone);
|
||||
}
|
||||
});
|
||||
|
||||
// Close button
|
||||
closeBtn.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
this.dispatchEvent(new CustomEvent("close"));
|
||||
});
|
||||
|
||||
// If src already set, render image
|
||||
if (this.#src) {
|
||||
this.#renderImage(content, dropZone);
|
||||
}
|
||||
|
||||
return root;
|
||||
}
|
||||
|
||||
async #uploadFile(
|
||||
file: File,
|
||||
content: HTMLElement,
|
||||
dropZone: HTMLElement
|
||||
) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = async () => {
|
||||
try {
|
||||
const res = await fetch("/api/image-upload", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ image: reader.result }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.url) {
|
||||
this.src = data.url;
|
||||
this.alt = file.name;
|
||||
this.#renderImage(content, dropZone);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("[folk-image] upload failed:", err);
|
||||
}
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
|
||||
#renderImage(content: HTMLElement, dropZone: HTMLElement) {
|
||||
if (!this.#src) return;
|
||||
dropZone.style.display = "none";
|
||||
|
||||
// Remove existing image if any
|
||||
const existing = content.querySelector(".image-display");
|
||||
if (existing) existing.remove();
|
||||
|
||||
const img = document.createElement("img");
|
||||
img.className = "image-display";
|
||||
img.src = this.#src;
|
||||
img.alt = this.#alt || "Image";
|
||||
img.draggable = false;
|
||||
content.appendChild(img);
|
||||
|
||||
// Update header title
|
||||
const titleText = this.renderRoot.querySelector(".title-text");
|
||||
if (titleText) {
|
||||
titleText.textContent = this.#alt || "Image";
|
||||
}
|
||||
}
|
||||
|
||||
static override fromData(data: Record<string, any>): FolkImage {
|
||||
const shape = FolkShape.fromData(data) as FolkImage;
|
||||
if (data.src) shape.src = data.src;
|
||||
if (data.alt) shape.alt = data.alt;
|
||||
return shape;
|
||||
}
|
||||
|
||||
override toJSON() {
|
||||
return {
|
||||
...super.toJSON(),
|
||||
type: "folk-image",
|
||||
src: this.src,
|
||||
alt: this.alt,
|
||||
};
|
||||
}
|
||||
|
||||
override applyData(data: Record<string, any>): void {
|
||||
super.applyData(data);
|
||||
if ("src" in data && this.src !== data.src) {
|
||||
this.src = data.src;
|
||||
}
|
||||
if ("alt" in data && this.alt !== data.alt) {
|
||||
this.alt = data.alt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -30,6 +30,8 @@ export * from "./folk-chat";
|
|||
export * from "./folk-google-item";
|
||||
export * from "./folk-piano";
|
||||
export * from "./folk-embed";
|
||||
export * from "./folk-image";
|
||||
export * from "./folk-bookmark";
|
||||
export * from "./folk-calendar";
|
||||
export * from "./folk-map";
|
||||
|
||||
|
|
|
|||
|
|
@ -95,8 +95,82 @@ export function renderLanding(): string {
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Group Buys -->
|
||||
<!-- AI Zine Generator -->
|
||||
<section class="rl-section rl-section--alt">
|
||||
<div class="rl-container">
|
||||
<div class="rl-grid-2">
|
||||
<div>
|
||||
<div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:1rem">
|
||||
<span style="width:1.75rem;height:1.75rem;border-radius:0.375rem;background:linear-gradient(135deg,#f59e0b,#ef4444);display:flex;align-items:center;justify-content:center;font-size:0.75rem;line-height:1">📰</span>
|
||||
<span style="font-size:0.875rem;font-weight:600;color:#e2e8f0">Zine Generator</span>
|
||||
</div>
|
||||
<h2 class="rl-heading">AI-powered zines in minutes</h2>
|
||||
<p style="color:#94a3b8;line-height:1.65;margin-bottom:1rem;font-size:0.95rem">
|
||||
Pick a topic, choose a visual style and tone, and let AI generate a
|
||||
complete 8-page zine — cover, content, and call-to-action —
|
||||
with illustrations and editable text. Tweak any section, regenerate
|
||||
images with feedback, then download or send to print.
|
||||
</p>
|
||||
<ul class="rl-check-list">
|
||||
<li><strong>6 visual styles</strong> — punk zine, mycelial, minimal, collage, retro, academic</li>
|
||||
<li><strong>5 tones</strong> — rebellious, regenerative, playful, informative, poetic</li>
|
||||
<li><strong>Per-section editing</strong> — regenerate any text or image with feedback</li>
|
||||
<li><strong>Print-ready</strong> — download and fold, or send straight to rPubs for binding</li>
|
||||
</ul>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:1.25rem">
|
||||
<a href="/demo/rpubs/zine" style="display:inline-flex;align-items:center;gap:0.4rem;padding:0.5rem 1rem;border-radius:0.5rem;background:linear-gradient(135deg,#f59e0b,#ef4444);color:white;font-size:0.75rem;font-weight:500;text-decoration:none">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M2 12h20"/></svg>
|
||||
Generate a Zine
|
||||
</a>
|
||||
<a href="https://zine.mycofi.earth" target="_blank" rel="noopener" style="display:inline-block;padding:0.5rem 1rem;border-radius:0.5rem;border:1px solid rgba(255,255,255,0.15);color:#94a3b8;font-size:0.75rem;font-weight:500;text-decoration:none">
|
||||
See examples →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rl-card" style="padding:1.5rem;text-align:center">
|
||||
<p style="font-size:0.7rem;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:1rem">Choose your style</p>
|
||||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:0.5rem">
|
||||
<div style="border:1px solid rgba(255,255,255,0.08);border-radius:0.5rem;padding:0.75rem 0.5rem;text-align:center">
|
||||
<p style="font-size:1.25rem;margin-bottom:0.25rem">📷</p>
|
||||
<p style="font-size:0.7rem;font-weight:600;color:#e2e8f0">Punk</p>
|
||||
<p style="font-size:0.6rem;color:#64748b">Xerox & DIY</p>
|
||||
</div>
|
||||
<div style="border:1px solid rgba(255,255,255,0.08);border-radius:0.5rem;padding:0.75rem 0.5rem;text-align:center">
|
||||
<p style="font-size:1.25rem;margin-bottom:0.25rem">🍄</p>
|
||||
<p style="font-size:0.7rem;font-weight:600;color:#e2e8f0">Mycelial</p>
|
||||
<p style="font-size:0.6rem;color:#64748b">Organic textures</p>
|
||||
</div>
|
||||
<div style="border:1px solid rgba(255,255,255,0.08);border-radius:0.5rem;padding:0.75rem 0.5rem;text-align:center">
|
||||
<p style="font-size:1.25rem;margin-bottom:0.25rem">⚪</p>
|
||||
<p style="font-size:0.7rem;font-weight:600;color:#e2e8f0">Minimal</p>
|
||||
<p style="font-size:0.6rem;color:#64748b">Clean lines</p>
|
||||
</div>
|
||||
<div style="border:1px solid rgba(255,255,255,0.08);border-radius:0.5rem;padding:0.75rem 0.5rem;text-align:center">
|
||||
<p style="font-size:1.25rem;margin-bottom:0.25rem">🎨</p>
|
||||
<p style="font-size:0.7rem;font-weight:600;color:#e2e8f0">Collage</p>
|
||||
<p style="font-size:0.6rem;color:#64748b">Mixed media</p>
|
||||
</div>
|
||||
<div style="border:1px solid rgba(255,255,255,0.08);border-radius:0.5rem;padding:0.75rem 0.5rem;text-align:center">
|
||||
<p style="font-size:1.25rem;margin-bottom:0.25rem">🎶</p>
|
||||
<p style="font-size:0.7rem;font-weight:600;color:#e2e8f0">Retro</p>
|
||||
<p style="font-size:0.6rem;color:#64748b">70s vibes</p>
|
||||
</div>
|
||||
<div style="border:1px solid rgba(255,255,255,0.08);border-radius:0.5rem;padding:0.75rem 0.5rem;text-align:center">
|
||||
<p style="font-size:1.25rem;margin-bottom:0.25rem">📚</p>
|
||||
<p style="font-size:0.7rem;font-weight:600;color:#e2e8f0">Academic</p>
|
||||
<p style="font-size:0.6rem;color:#64748b">Infographic</p>
|
||||
</div>
|
||||
</div>
|
||||
<p style="font-size:0.7rem;color:#94a3b8;margin-top:1rem;line-height:1.5">
|
||||
Each style generates unique illustrations, typography, and layouts
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Group Buys -->
|
||||
<section class="rl-section">
|
||||
<div class="rl-container">
|
||||
<h2 class="rl-heading" style="text-align:center">Bulk orders, better prices</h2>
|
||||
<p class="rl-subtext" style="text-align:center">
|
||||
|
|
|
|||
|
|
@ -319,6 +319,12 @@ routes.get("/api/artifact/:id/pdf", async (c) => {
|
|||
});
|
||||
});
|
||||
|
||||
// ── Page: Zine Generator (redirect to canvas with auto-spawn) ──
|
||||
routes.get("/zine", (c) => {
|
||||
const spaceSlug = c.req.param("space") || "personal";
|
||||
return c.redirect(`/${spaceSlug}?tool=folk-zine-gen`);
|
||||
});
|
||||
|
||||
// ── Page: Editor ──
|
||||
routes.get("/", (c) => {
|
||||
const spaceSlug = c.req.param("space") || "personal";
|
||||
|
|
|
|||
|
|
@ -1707,6 +1707,8 @@
|
|||
folk-google-item,
|
||||
folk-piano,
|
||||
folk-embed,
|
||||
folk-image,
|
||||
folk-bookmark,
|
||||
folk-calendar,
|
||||
folk-map,
|
||||
folk-image-gen,
|
||||
|
|
@ -2485,6 +2487,8 @@
|
|||
FolkGoogleItem,
|
||||
FolkPiano,
|
||||
FolkEmbed,
|
||||
FolkImage,
|
||||
FolkBookmark,
|
||||
FolkCalendar,
|
||||
FolkMap,
|
||||
FolkImageGen,
|
||||
|
|
@ -2613,6 +2617,8 @@
|
|||
FolkGoogleItem.define();
|
||||
FolkPiano.define();
|
||||
FolkEmbed.define();
|
||||
FolkImage.define();
|
||||
FolkBookmark.define();
|
||||
FolkCalendar.define();
|
||||
FolkMap.define();
|
||||
FolkImageGen.define();
|
||||
|
|
@ -2654,6 +2660,8 @@
|
|||
shapeRegistry.register("folk-google-item", FolkGoogleItem);
|
||||
shapeRegistry.register("folk-piano", FolkPiano);
|
||||
shapeRegistry.register("folk-embed", FolkEmbed);
|
||||
shapeRegistry.register("folk-image", FolkImage);
|
||||
shapeRegistry.register("folk-bookmark", FolkBookmark);
|
||||
shapeRegistry.register("folk-calendar", FolkCalendar);
|
||||
shapeRegistry.register("folk-map", FolkMap);
|
||||
shapeRegistry.register("folk-image-gen", FolkImageGen);
|
||||
|
|
@ -4222,6 +4230,19 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Auto-spawn shape from ?tool= URL param (e.g. ?tool=folk-zine-gen)
|
||||
const toolParam = urlParams.get("tool");
|
||||
if (toolParam && shapeRegistry.has(toolParam)) {
|
||||
// Wait for sync to initialize, then auto-place the shape
|
||||
setTimeout(() => {
|
||||
newShape(toolParam);
|
||||
// Clean up URL param without reload
|
||||
const cleanUrl = new URL(window.location.href);
|
||||
cleanUrl.searchParams.delete("tool");
|
||||
history.replaceState(null, "", cleanUrl.pathname + cleanUrl.search);
|
||||
}, 800);
|
||||
}
|
||||
|
||||
// Feed shape — pull live data from another layer/module
|
||||
// Arrow connection mode
|
||||
let connectMode = false;
|
||||
|
|
|
|||
Loading…
Reference in New Issue