@beforesemicolon/site-builder 0.35.0 → 0.36.0

package/scaffolds/admin/controls/html.control.js

@@ -0,0 +1,43 @@
+const { html } = window.BFS.MARKUP
+
+export const renderQuillEditor = (input, path, disabled, label, onChange) => {
+    return html`
+        <div class="control-field-block quill-editor-control">
+            <span class="label">${label}</span>
+            <div class="quill-editor-wrapper">
+                <div ref="quill-editor" class="quill-editor">
+                    ${html([input.value])}
+                </div>
+            </div>
+        </div>
+    `.onMount((temp) => {
+        const editorElement = temp.refs['quill-editor'][0]
+
+        if (!window.Quill) {
+            console.error('Quill library not loaded')
+            return
+        }
+
+        const quillInstance = new Quill(editorElement, {
+            theme: 'snow',
+            readOnly: disabled(),
+            modules: {
+                toolbar: disabled()
+                    ? false
+                    : [
+                          [{ header: [1, 2, 3, 4, 5, 6, false] }],
+                          ['bold', 'italic', 'underline'],
+                          ['link', 'blockquote'],
+                          [{ list: 'ordered' }, { list: 'bullet' }],
+                      ],
+            },
+        })
+
+        // Handle content changes (Requirements 5.2, 5.3)
+        if (!disabled()) {
+            quillInstance.on('text-change', (delta, oldDelta, source) => {
+                onChange(path, quillInstance.root.innerHTML, 'html')
+            })
+        }
+    })
+}

package/scaffolds/admin/controls/markdown.control.js

@@ -0,0 +1,31 @@
+const { html } = window.BFS.MARKUP
+
+export const renderMarkdownEditor = (
+    input,
+    path,
+    disabled,
+    label,
+    onChange
+) => {
+    return html`
+        <div class="control-field-block markdown-editor-control">
+            <span class="label">${label}</span>
+            <div class="markdown-editor-wrapper">
+                <div class="markdown-editor" ref="markdown-editor"></div>
+            </div>
+        </div>
+    `.onMount((temp) => {
+        const editorElement = temp.refs['markdown-editor'][0]
+
+        const editor = new TinyMDE.Editor({
+            element: editorElement,
+            content: input.value,
+        })
+
+        if (!disabled()) {
+            editor.addEventListener('change', ({ content }) => {
+                onChange(path, content, 'markdown')
+            })
+        }
+    })
+}

package/scaffolds/admin/data.js

@@ -0,0 +1,543 @@
+import { hideFlashbar, showFlashbar } from './flashbar.js'
+import { showModal } from './modal.js'
+import * as authManager from './auth-manager.js'
+import * as repositoryManager from './repository-manager.js'
+
+const { MARKUP, SITE_BUILDER } = window.BFS
+const { state, html, effect } = MARKUP
+const { inputDefinitionsToObject, mergeDataIntoInputDefinition } = SITE_BUILDER
+
+// Store original widget values when first loaded
+export const originalWidgetValues = new Map()
+export const widgets = new Map()
+export const widgetElements = new Map()
+export const widgetLoadingStates = new Set()
+export const isLocalDevelopment =
+    location.hostname === 'localhost' ||
+    location.hostname === '127.0.0.1' ||
+    location.port === '8888'
+
+export const [loading, setLoading] = state(true)
+export const [publishing, setPublishing] = state(false)
+export const [panel, setPanel] = state('page')
+export const [config, setConfig] = state(null)
+export const [currentPage, setCurrentPage] = state(null)
+export const [currentWidget, setCurrentWidget] = state(null)
+export const [currentWidgetId, setCurrentWidgetId] = state('')
+const [pendingChanges, setPendingChanges] = state([])
+
+effect(() => {
+    const widgetId = currentWidgetId()
+    if (!widgetId) {
+        return
+    }
+    // Re-load widget when panel changes so page overrides don't leak into widget panel.
+    loadWidget(widgetId)
+})
+
+export const hasPendingChanges = () => pendingChanges().length > 0
+
+export const removePendingChange = (id) => {
+    setPendingChanges(pendingChanges().filter((change) => change.id !== id))
+}
+export const getPendingChange = (id) => {
+    return pendingChanges().find((change) => change.id === id) ?? null
+}
+export const allPendingChanges = pendingChanges
+
+export const addPendingChange = (id, change) => {
+    removePendingChange(id)
+    setPendingChanges((prev) => [
+        ...prev,
+        {
+            ...change,
+            id,
+        },
+    ])
+}
+
+export const selectWidget = (widgetId, newWidget) => {
+    setCurrentWidget(newWidget)
+    setCurrentWidgetId(widgetId)
+}
+
+export const selectPage = (newPage) => {
+    setCurrentPage(newPage)
+    setCurrentWidget(null)
+    setCurrentWidgetId('')
+}
+
+const getWidgetById = (id) => widgets.get(id)
+
+const fetchLocalWidget = async (widgetId) => {
+    return (await import(`/admin/widgets/${widgetId}.js`)).default
+}
+
+const fetchRemoteWidget = async (widgetId) => {
+    const response = await fetch(`/api/widgets?action=get&widget=${widgetId}`)
+
+    if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}))
+
+        throw new Error(
+            errorData.error ||
+                `Remote fetch failed: ${response.status} ${response.statusText}`
+        )
+    }
+
+    const data = await response.json()
+
+    if (!data.success) {
+        throw new Error(
+            data.error || 'Remote widget fetch failed without specific error'
+        )
+    }
+
+    if (!data.content || typeof data.content !== 'string') {
+        throw new Error('Remote widget content is missing or invalid')
+    }
+
+    const blob = new Blob([data.content], { type: 'text/javascript' })
+    const url = URL.createObjectURL(blob)
+    try {
+        const mod = await import(url)
+        return mod?.default ?? mod
+    } finally {
+        URL.revokeObjectURL(url)
+    }
+}
+
+const storeOriginalValues = (key, widget) => {
+    if (!originalWidgetValues.has(key)) {
+        const originalValues = {}
+
+        const extractOriginalValues = (inputs, pathPrefix = '') => {
+            if (!Array.isArray(inputs)) {
+                return
+            }
+            inputs.forEach((input, index) => {
+                const currentPath = pathPrefix
+                    ? `${pathPrefix}.${index}`
+                    : String(index)
+
+                if (input.type === 'list' || input.type === 'group') {
+                    extractOriginalValues(input.definitions, currentPath)
+                } else {
+                    originalValues[currentPath] = input.value
+                }
+            })
+        }
+
+        extractOriginalValues(widget?.inputs)
+        originalWidgetValues.set(key, originalValues)
+    }
+}
+
+const cloneInputs = (inputs) => {
+    if (!Array.isArray(inputs)) {
+        return []
+    }
+    return inputs.map((input) => ({
+        ...input,
+        definitions: input.definitions
+            ? cloneInputs(input.definitions)
+            : undefined,
+    }))
+}
+
+const cloneWidgetWithInputs = (widget) => ({
+    ...widget,
+    inputs: cloneInputs(widget?.inputs),
+})
+
+const applyWidgetOverrides = (inputs, overrides) => {
+    if (!Array.isArray(inputs)) {
+        return []
+    }
+    return inputs.map((input) => {
+        if (!input?.name) {
+            return input
+        }
+        const overrideValue = overrides?.[input.name]
+        if (overrideValue === undefined) {
+            return input
+        }
+        return mergeDataIntoInputDefinition(overrideValue, input)
+    })
+}
+
+export const loadWidget = async (widgetId) => {
+    let loadingId
+
+    try {
+        if (widgetLoadingStates.has(widgetId)) {
+            return
+        }
+
+        // Check if widget is already cached
+        let w = widgets.get(widgetId)
+
+        if (w) {
+            selectWidget(widgetId, w)
+            return w
+        }
+
+        widgetLoadingStates.add(widgetId)
+
+        loadingId = showFlashbar({
+            type: 'info',
+            title: 'Loading Widget',
+            message: `Fetching ${widgetId} widget...`,
+            loading: true,
+        })
+
+        let data
+
+        if (isLocalDevelopment) {
+            data = await fetchLocalWidget(widgetId)
+        } else {
+            data = await fetchRemoteWidget(widgetId)
+        }
+
+        widgets.set(widgetId, data)
+
+        const pageId = currentPage()?.id ?? ''
+        const isPagePanel = panel() === 'page'
+        const pageOverrides = isPagePanel
+            ? currentPage()?.widgetsData?.[widgetId] || null
+            : null
+
+        if (pageOverrides) {
+            const widgetClone = cloneWidgetWithInputs(data)
+            widgetClone.inputs = applyWidgetOverrides(
+                widgetClone.inputs,
+                pageOverrides
+            )
+            selectWidget(widgetId, widgetClone)
+            storeOriginalValues(`${pageId}:${widgetId}`, widgetClone)
+        } else {
+            selectWidget(widgetId, data)
+            storeOriginalValues(widgetId, data)
+        }
+    } catch (error) {
+        console.error(error)
+        showFlashbar({
+            type: 'error',
+            title: 'Widget Load Error',
+            message: `Failed to load widget "${widgetId}"`,
+        })
+    } finally {
+        hideFlashbar(loadingId)
+        widgetLoadingStates.delete(widgetId)
+    }
+}
+
+export const loadConfig = async () => {
+    const response = await fetch('/admin/config.json')
+
+    if (!response.ok) {
+        return showFlashbar({
+            type: 'error',
+            title: `Failed to load your website`,
+            message: 'Please refresh to try again',
+        })
+    }
+
+    const cf = await response.json()
+    setConfig(cf)
+    selectPage(cf.pages.find((pg) => pg.id === 'home') ?? null)
+}
+
+const resolveNamePath = (inputs, path) => {
+    const segments = String(path).split('.')
+    const topIndex = Number.parseInt(segments.shift(), 10)
+    if (!Number.isFinite(topIndex)) {
+        return null
+    }
+    let currentInput = inputs?.[topIndex]
+    if (!currentInput?.name) {
+        return null
+    }
+    const namePath = [currentInput.name]
+    while (segments.length) {
+        if (!currentInput?.definitions) {
+            return null
+        }
+        const index = Number.parseInt(segments.shift(), 10)
+        if (!Number.isFinite(index)) {
+            return null
+        }
+        const nextInput = currentInput.definitions?.[index]
+        if (!nextInput) {
+            return null
+        }
+        if (currentInput.type === 'list') {
+            namePath.push(index)
+        } else {
+            namePath.push(nextInput.name)
+        }
+        currentInput = nextInput
+    }
+    return namePath
+}
+
+const setDeepValue = (target, path, value) => {
+    if (!path.length) {
+        return
+    }
+    let cursor = target
+    for (let i = 0; i < path.length - 1; i += 1) {
+        const key = path[i]
+        const nextKey = path[i + 1]
+        const shouldBeArray = typeof nextKey === 'number'
+        if (cursor[key] == null) {
+            cursor[key] = shouldBeArray ? [] : {}
+        }
+        cursor = cursor[key]
+    }
+    cursor[path[path.length - 1]] = value
+}
+
+const buildWidgetInputPatch = (widget, change) => {
+    const inputValues = inputDefinitionsToObject(widget.inputs || [])
+    const patch = {}
+    for (const [path, changeEntry] of Object.entries(change.changes || {})) {
+        const namePath = resolveNamePath(widget.inputs || [], path)
+        if (!namePath?.length) {
+            continue
+        }
+        setDeepValue(inputValues, namePath, changeEntry.newValue)
+        const topKey = namePath[0]
+        if (Object.prototype.hasOwnProperty.call(inputValues, topKey)) {
+            patch[topKey] = inputValues[topKey]
+        }
+    }
+    return patch
+}
+
+export const publishChanges = async () => {
+    if (publishing()) {
+        return
+    }
+
+    setPublishing(true)
+
+    let progressId
+    let publishProgressId
+    let buildProgressId
+
+    try {
+        // Step 1: Collect unique widgets, page-widget changes, and separate file uploads
+        const changedWidgetIds = new Set()
+        const fileUploads = []
+        const pageWidgetUpdates = new Map()
+
+        for (const change of allPendingChanges()) {
+            if (change.type === 'widget') {
+                changedWidgetIds.add(change.id)
+
+                // Collect file uploads from this widget's changes
+                for (const [path, changeData] of Object.entries(
+                    change.changes
+                )) {
+                    if (changeData.fileData) {
+                        fileUploads.push({
+                            widgetId: change.id,
+                            path,
+                            filePath: changeData.fileData.targetPath,
+                            fileData: changeData.fileData,
+                        })
+                    }
+                }
+            } else if (change.type === 'page-widget') {
+                const pageId = currentPage()?.id
+                const widgetId = change.id
+                if (!pageId || !widgetId) {
+                    console.warn(
+                        '[cms:publish] Skipping page-widget change without page/widget id',
+                        change
+                    )
+                    continue
+                }
+                const widget = getWidgetById(widgetId)
+                if (!widget) {
+                    console.warn(
+                        '[cms:publish] Widget not found for page-widget update',
+                        { widgetId, pageId }
+                    )
+                    continue
+                }
+                const patch = buildWidgetInputPatch(widget, change)
+                if (Object.keys(patch).length === 0) {
+                    continue
+                }
+                for (const [path, changeData] of Object.entries(
+                    change.changes
+                )) {
+                    if (changeData.fileData) {
+                        fileUploads.push({
+                            widgetId,
+                            path,
+                            filePath: changeData.fileData.targetPath,
+                            fileData: changeData.fileData,
+                        })
+                    }
+                }
+                if (!pageWidgetUpdates.has(pageId)) {
+                    pageWidgetUpdates.set(pageId, new Map())
+                }
+                const pageUpdates = pageWidgetUpdates.get(pageId)
+                pageUpdates.set(widgetId, {
+                    ...(pageUpdates.get(widgetId) || {}),
+                    ...patch,
+                })
+            }
+        }
+
+        if (
+            changedWidgetIds.size === 0 &&
+            fileUploads.length === 0 &&
+            pageWidgetUpdates.size === 0
+        ) {
+            return showFlashbar({
+                type: 'info',
+                title: 'No Changes',
+                message: 'There are no changes to publish.',
+            })
+        }
+
+        // Show progress message
+        progressId = showFlashbar({
+            type: 'info',
+            title: 'Saving changes...',
+            message: 'Making sure your changes are valid and ready to publish.',
+            loading: true,
+            dismissable: false,
+        })
+
+        const widgetsToCommit = []
+        for (const widgetId of changedWidgetIds) {
+            const widget = getWidgetById(widgetId)
+            if (!widget) {
+                continue
+            }
+
+            widgetsToCommit.push({
+                widgetId,
+                inputs: widget.inputs,
+            })
+        }
+
+        const changedFiles = []
+        for (const [pageId, widgetsMap] of pageWidgetUpdates.entries()) {
+            const filePath = `templates/${pageId}.json`
+            const { content, sha } =
+                await repositoryManager.getFileContent(filePath)
+            let templateData
+            try {
+                templateData = JSON.parse(content)
+            } catch (error) {
+                throw new Error(
+                    `Failed to parse ${filePath} JSON: ${error.message}`
+                )
+            }
+            const widgetsData = {
+                ...(templateData.widgetsData || {}),
+            }
+            for (const [widgetId, patch] of widgetsMap.entries()) {
+                widgetsData[widgetId] = {
+                    ...(widgetsData[widgetId] || {}),
+                    ...patch,
+                }
+            }
+            const updatedContent = `${JSON.stringify(
+                {
+                    ...templateData,
+                    widgetsData,
+                },
+                null,
+                2
+            )}\n`
+            changedFiles.push({
+                filePath,
+                content: updatedContent,
+                sha,
+            })
+        }
+
+        if (
+            widgetsToCommit.length === 0 &&
+            fileUploads.length === 0 &&
+            changedFiles.length === 0
+        ) {
+            hideFlashbar(progressId)
+            return showFlashbar({
+                type: 'error',
+                title: 'No Valid Changes',
+                message: 'No valid changes found to publish.',
+            })
+        }
+
+        // Prepare file uploads for commit (Requirements 3.1, 3.2)
+        const uploadedFiles = fileUploads.map((upload) => ({
+            filePath: upload.filePath,
+            fileData: upload.fileData,
+        }))
+
+        const widgetLabels = widgetsToCommit.map(
+            (w) => `widgets/${w.widgetId}.js`
+        )
+        const templateLabels = changedFiles.map((file) => file.filePath)
+        const commitTargets = [...widgetLabels, ...templateLabels]
+        const commitMsg = `[${authManager.user().name}] CMS Update ${commitTargets.join(', ')}${fileUploads.length > 0 ? ` + ${fileUploads.length} files` : ''}: ${new Date().toISOString()}`
+        // Step 3: Commit all changes and file uploads at once
+        const commitTime = new Date().toISOString()
+        await repositoryManager.commitChanges(
+            commitMsg,
+            changedFiles,
+            uploadedFiles,
+            widgetsToCommit
+        )
+
+        hideFlashbar(progressId)
+        publishProgressId = showFlashbar({
+            type: 'info',
+            title: 'Publishing...',
+            message:
+                'We are updating the live website. This may take a minute.',
+            loading: true,
+        })
+
+        const { buildId } = await repositoryManager.waitForBuild(commitTime)
+
+        await repositoryManager.pollBuildStatus(buildId)
+
+        hideFlashbar(publishProgressId)
+
+        showModal({
+            dismissable: false,
+            title: 'Changes Published!',
+            content: html`<p>
+                Your changes are now live.
+                <a href="${location.origin}">View website</a>.
+            </p>`,
+            action: () => {
+                // Page reload will automatically clear widget cache and fetch fresh widgets
+                window.location.reload(true) // Hard refresh
+            },
+        })
+    } catch (error) {
+        console.error('Error publishing changes:', error)
+        hideFlashbar(progressId)
+        hideFlashbar(publishProgressId)
+        hideFlashbar(buildProgressId)
+        showFlashbar({
+            type: 'error',
+            title: 'Publish Failed',
+            message:
+                'We could not publish or update the website with your changes. Please try again.',
+        })
+    } finally {
+        setPublishing(false)
+    }
+}