Create Embed 用于创建或更新 Hubble iframe HTML 嵌入。此类嵌入是工作区本地的迷你应用,以 .html 文件编写,并通过 Markdown 中的 iframe src 引入,例如 <iframe src="./file-index.html"></iframe>。src 必须是相对于该 Markdown 文件的工作区本地 .html 路径。
运行时由 Hubble 提供。编写纯 HTML 即可,假定以下全局对象已可用:hubble、Alpine、Tailwind 浏览器版 v4、Hubble 主题令牌。默认使用 Alpine 与 Tailwind,不要为嵌入添加依赖 script 标签,也不要设置 package 文件、lockfile 或 node_modules。
嵌入运行在沙箱 iframe 中。Hubble 允许 allow-scripts(Alpine、Tailwind 浏览器和 Hubble 运行时可以执行)和 allow-forms(原生 HTML 表单语义在与 Alpine 处理程序如 @submit.prevent 配合时可用)。Hubble 不允许 allow-same-origin(嵌入保持不透明来源,无法使用应用来源存储、cookie 或同源访问)、allow-top-navigation(嵌入不能导航桌面应用框架)、allow-popups / allow-popups-to-escape-sandbox(嵌入不能打开未沙箱化的弹窗)、allow-downloads(嵌入不能直接启动下载)、allow-modals(嵌入不能使用浏览器模态对话框)。
可用的运行时 API 包括:await hubble.files.list("**/*.md") 和 await hubble.files.read("path/inside/workspace.md")。
资料还提供一个模板示例,展示如何用 Alpine 的 x-data 加载工作区 Markdown 文件列表并处理错误与空状态。要获得原生观感,应通过 Tailwind 类使用 Hubble 令牌:表面使用 bg-background、bg-card、bg-popover;文本使用 text-foreground、text-muted-foreground、text-card-foreground;边框与环使用 border-border、border-input、ring-ring、focus-visible:ring-ring;操作使用 bg-primary text-primary-foreground、bg-secondary text-secondary-foreground;状态使用 hover:bg-accent、bg-selected text-selected-foreground。保持紧凑间距:gap-2、gap-3、p-2、p-3、px-3、py-2;控件使用 rounded-sm 或 rounded-md。避免一次性调色板、过大的卡片、英雄式布局和装饰性渐变,除非用户要求主题化视觉。参考资料可按需阅读按钮、单选选择、标签页、表单、列表与空状态等模式。适用场景为在 Hubble 工作区内构建轻量、与主题一致的 HTML 迷你应用并嵌入 Markdown。限制包括沙箱约束带来的存储、导航、弹窗、下载和模态对话框不可用。