@bagelink/blox 1.5.17 → 1.5.20

package/views/RenderPage.vue

@@ -1,127 +0,0 @@
-<script setup lang="ts">
-/**
- * Render Page View
- *
- * This component renders a published page without editor functionality.
- * Use this for production rendering on external sites.
- */
-
-import type { PageData } from '../core/types'
-import { ref, onMounted, computed } from 'vue'
-import { getAllComponents } from '../core/registry'
-import { initializePage } from '../core/renderer'
-import { normalizeComponentData } from '../utils/normalizer'
-import { generateBlockStyles, getResponsiveClasses } from '../utils/styles'
-
-interface Props {
-	pageData: PageData
-	mobileBreakpoint?: number // Window width to consider mobile (default: 910px)
-}
-
-const props = withDefaults(defineProps<Props>(), {
-	mobileBreakpoint: 910,
-})
-
-// State
-const isMobile = ref(false)
-const loading = ref(true)
-const updateCounter = ref(0)
-
-// Get registered components
-const registeredComponents = getAllComponents()
-
-// Reactive computed for block styles
-const getBlockStyles = computed(() => {
-	// Access updateCounter to trigger reactivity
-	console.log('updateCounter', updateCounter.value)
-	return (data: Record<string, any>, mobile: boolean = false) => generateBlockStyles(data, mobile)
-})
-
-/**
- * Update mobile status based on window width
- */
-function updateMobileStatus() {
-	const wasMobile = isMobile.value
-	isMobile.value = window.innerWidth <= props.mobileBreakpoint
-
-	if (wasMobile !== isMobile.value) {
-		updateCounter.value++
-	}
-}
-
-onMounted(async () => {
-	console.log('🚀 Render Page mounted')
-	console.log('📦 Registered components:', Object.keys(registeredComponents))
-
-	// Initialize page with settings and fonts
-	await initializePage(props.pageData)
-
-	// Set mobile status
-	updateMobileStatus()
-
-	// Listen for window resize
-	window.addEventListener('resize', updateMobileStatus)
-
-	loading.value = false
-})
-</script>
-
-<template>
-	<div class="blox-page-wrapper">
-		<div v-if="loading" class="blox-loading">
-			<p>Loading...</p>
-		</div>
-
-		<template v-else>
-			<template v-for="comp in pageData.components" :key="`${comp.id}-${updateCounter}`">
-				<div
-					:id="comp.data.customId" :style="getBlockStyles(comp.data, isMobile)"
-					:class="getResponsiveClasses(comp.data)"
-				>
-					<component
-						:is="registeredComponents[comp.type]" v-if="registeredComponents[comp.type]"
-						v-bind="{ ...normalizeComponentData(comp.data), isMobile }"
-					/>
-					<div v-else class="blox-missing-component">
-						Component not found: {{ comp.type }}
-					</div>
-				</div>
-			</template>
-		</template>
-	</div>
-</template>
-
-<style>
-/* Global styles for the Blox page */
-.blox-page-wrapper {
-	min-height: 100vh;
-	background-color: #fff;
-}
-
-.blox-page-wrapper * {
-	box-sizing: border-box;
-}
-</style>
-
-<style scoped>
-/* Loading state */
-.blox-loading {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	min-height: 100vh;
-	font-size: 1.2rem;
-	color: #666;
-}
-
-/* Missing component warning */
-.blox-missing-component {
-	padding: 2rem;
-	background: #fee;
-	border: 2px solid #faa;
-	border-radius: 8px;
-	text-align: center;
-	font-size: 1rem;
-	color: #c00;
-}
-</style>