Primera version

assets/data.json

@@ -0,0 +1,17 @@
+{
+  "pageTitle": "Mi Manga",
+  "mangaTitle": "Mi Manga",
+  "mangaIntroduction": "Este es mi primer Manga sobre mi vida.",
+  "authorName": "McPato",
+  "authorIntroduction": "Soy de Argentina. Si te gusto mi trabajo seguime en <a href=\"https://www.instagram.com/author\">Instagram</a>.",
+  "mangaPages": [
+    "assets/instrucciones.jpg",
+    "assets/001.jpg",
+    "assets/002.jpg",
+    "assets/003.jpg",
+    "assets/004.jpg",
+    "assets/005.jpg",
+    "assets/006.jpg",
+    "assets/007.jpg"
+  ]
+}

assets/script.js

@@ -0,0 +1,74 @@
+const { createApp, ref, onMounted } = Vue;
+
+createApp({
+    setup() {
+        const mangaData = ref({});
+        const isLoading = ref(true);
+        const swiperWrapper = ref(null);
+        const swiperInstance = ref(null);
+
+        // Function to load configuration from data.json
+        const loadData = async () => {
+            try {
+                const dataJsonPath = './assets/data.json';
+                const response = await fetch(dataJsonPath, { cache: 'no-store', headers: { 'Cache-Control': 'no-cache' } });
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                const data = await response.json();
+                mangaData.value = data;
+                document.title = data.pageTitle;
+                isLoading.value = false;
+
+                // Initialize swiper after data is loaded
+                setTimeout(initSwiper, 100);
+            } catch (err) {
+                console.error('Error loading data:', err);
+                isLoading.value = false;
+            }
+        };
+
+        // Function to initialize the swiper
+        const initSwiper = () => {
+            // Create slides for each manga page
+            if (mangaData.value.mangaPages && mangaData.value.mangaPages.length > 0) {
+                // Reverse the order as in the original script
+                const reversedPages = [...mangaData.value.mangaPages].reverse();
+                
+                for (const page of reversedPages) {
+                    const slide = document.createElement('div');
+                    slide.classList.add('swiper-slide');
+                    const img = document.createElement('img');
+                    img.loading = 'lazy';
+                    img.src = page;
+                    slide.appendChild(img);
+                    swiperWrapper.value.appendChild(slide);
+                }
+
+                // Initialize Swiper
+                swiperInstance.value = new Swiper('.swiper-container', {
+                    direction: 'horizontal',
+                    loop: false,
+                    initialSlide: reversedPages.length - 1,
+                    pagination: {
+                        el: '.swiper-pagination',
+                    },
+                    navigation: {
+                        nextEl: '.swiper-button-next',
+                        prevEl: '.swiper-button-prev',
+                    },
+                });
+            }
+        };
+
+        onMounted(() => {
+            loadData();
+        });
+
+        return {
+            mangaData,
+            isLoading,
+            swiperWrapper
+        };
+    }
+}).mount('#app');

assets/style.css

@@ -0,0 +1,45 @@
+body {
+    font-family: sans-serif;
+    margin: 0;
+    background-color: #f0f0f0;
+}
+
+.container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 5px;
+}
+
+.swiper-container {
+    width: 100%;
+    height: 100%;
+}
+
+.swiper-slide {
+    text-align: center;
+    font-size: 18px;
+    background: #fff;
+
+    /* Center slide text vertically */
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+}
+
+.swiper-slide img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}

index.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Manga Title</title>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
+    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
+    <link rel="stylesheet" href="assets/style.css">
+    <style>
+        [v-cloak] { display: none; }
+    </style>
+</head>
+<body>
+    <div id="app" v-cloak>
+        <section class="section" v-if="isLoading">
+            <div class="container">
+                <div class="columns is-centered">
+                    <div class="column is-half">
+                        <h1 class="title has-text-centered">Loading...</h1>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <section class="section" v-else>
+            <div class="container">
+                <div class="columns is-centered">
+                    <div class="column is-half">
+                        <h1 class="title has-text-centered">{{ mangaData.mangaTitle }}</h1>
+                        <div class="content has-text-centered">
+                            <p>{{ mangaData.mangaIntroduction }}</p>
+                        </div>
+                        <h2 class="subtitle has-text-centered">{{ mangaData.authorName }}</h2>
+                        <div class="content has-text-centered">
+                            <p v-html="mangaData.authorIntroduction"></p>
+                        </div>
+                    </div>
+                </div>
+                <div class="columns is-centered">
+                    <div class="column is-four-fifths">
+                        <div class="swiper-container">
+                            <div class="swiper-wrapper" ref="swiperWrapper">
+                                <!-- Manga pages will be inserted by Vue/script.js -->
+                            </div>
+                            <!-- Add Pagination -->
+                            <div class="swiper-pagination"></div>
+                            <!-- Add Navigation -->
+                            <div class="swiper-button-next"></div>
+                            <div class="swiper-button-prev"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
+    <script src="assets/script.js"></script>
+</body>
+</html>