From 07dcd7932d6d643ba2eecac6666ab73140c3bbdd Mon Sep 17 00:00:00 2001
From: "izabela.horodenska" <izabla.horodenska@diva-e.com>
Date: Fri, 19 Apr 2024 10:09:18 +0200
Subject: [PATCH] added preview

---
 styleguide/js/preview.js | 31 ++++++++++++++++
 styleguide/js/script.js  | 77 +++-------------------------------------
 styleguide/main.html     | 30 +---------------
 styleguide/preview.html  | 15 ++++++++
 4 files changed, 52 insertions(+), 101 deletions(-)
 create mode 100644 styleguide/js/preview.js
 create mode 100644 styleguide/preview.html

diff --git a/styleguide/js/preview.js b/styleguide/js/preview.js
new file mode 100644
index 00000000..7458ab99
--- /dev/null
+++ b/styleguide/js/preview.js
@@ -0,0 +1,31 @@
+import { html, render } from 'https://unpkg.com/lit-html@0.7.1/lit-html.js';
+import { typographyTemplate } from './typography.js';
+import { imageTemplate } from './image.js';
+import { buttonsTemplate } from './buttons.js';
+import { colorsTemplate } from './colors.js';
+import { featuresTemplate } from './features.js';
+import { footnoteTemplate } from './footnote.js';
+import { formTemplate } from './form.js';
+import { gridTemplate } from './grid.js';
+import { iconsTemplate } from './icons.js';
+import { linkTemplate } from './link.js';
+import { mediaTemplate } from './media.js';
+import { postsTemplate } from './posts.js';
+import { tableTemplate } from './table.js';
+import { bannersTemplate } from './banners.js';
+import { navTemplate } from './nav.js';
+
+const getTemplate = () => {
+  const url = new URLSearchParams(window.origin);
+  const template = url.get('template');
+  return template;
+};
+
+const appTemplate = () => {
+  const componentTemplate = getTemplate();
+  return componentTemplate;
+};
+
+const app = document.getElementById('app');
+
+render(appTemplate(), app);
diff --git a/styleguide/js/script.js b/styleguide/js/script.js
index e4fb76be..f36632d8 100644
--- a/styleguide/js/script.js
+++ b/styleguide/js/script.js
@@ -15,77 +15,10 @@ import { tableTemplate } from './table.js';
 import { bannersTemplate } from './banners.js';
 import { navTemplate } from './nav.js';
 
-const navContainer = document.getElementById('nav-container');
-if (navContainer) {
-  render(navTemplate(), navContainer);
-}
+const appTemplate = () => {
+  return html` ${footnoteTemplate()}`;
+};
 
-const buttonsContainer = document.getElementById('buttons-container');
-if (buttonsContainer) {
-  render(buttonsTemplate(), buttonsContainer);
-}
+const app = document.getElementById('app');
 
-const colorsContainer = document.getElementById('colors-container');
-if (colorsContainer) {
-  render(colorsTemplate(), colorsContainer);
-}
-
-const gridContainer = document.getElementById('grid-container');
-if (gridContainer) {
-  render(gridTemplate(), gridContainer);
-}
-
-const iconsContainer = document.getElementById('icons-container');
-if (iconsContainer) {
-  render(iconsTemplate(), iconsContainer);
-}
-
-const typographyContainer = document.getElementById('typography-container');
-if (typographyContainer) {
-  render(typographyTemplate(), typographyContainer);
-}
-
-const imageContainer = document.getElementById('image-container');
-if (imageContainer) {
-  render(imageTemplate(), imageContainer);
-}
-
-const linkContainer = document.getElementById('link-container');
-if (linkContainer) {
-  render(linkTemplate(), linkContainer);
-}
-
-const mediaContainer = document.getElementById('media-container');
-if (mediaContainer) {
-  render(mediaTemplate(), mediaContainer);
-}
-
-const footnoteContainer = document.getElementById('footnote-container');
-if (footnoteContainer) {
-  render(footnoteTemplate(), footnoteContainer);
-}
-
-const bannersContainer = document.getElementById('banners-container');
-if (bannersContainer) {
-  render(bannersTemplate(), bannersContainer);
-}
-
-const featuresContainer = document.getElementById('features-container');
-if (featuresContainer) {
-  render(featuresTemplate(), featuresContainer);
-}
-
-const postsContainer = document.getElementById('posts-container');
-if (postsContainer) {
-  render(postsTemplate(), postsContainer);
-}
-
-const formContainer = document.getElementById('form-container');
-if (formContainer) {
-  render(formTemplate(), formContainer);
-}
-
-const tableContainer = document.getElementById('table-container');
-if (tableContainer) {
-  render(tableTemplate(), tableContainer);
-}
+render(appTemplate(), app);
diff --git a/styleguide/main.html b/styleguide/main.html
index 54f64286..b5777910 100644
--- a/styleguide/main.html
+++ b/styleguide/main.html
@@ -13,35 +13,7 @@
 <body>
     <div class="ls-page">
         <div class="ls-page-content">
-            <div id="nav-container"></div>
-            <!-- Button container -->
-            <div id="buttons-container"></div>
-            <!-- Colors container -->
-            <div id="colors-container"></div>
-            <!-- Grid container -->
-            <div id="grid-container"></div>
-            <!-- Icons container -->
-            <div id="icons-container"></div>
-            <!-- Typography container -->
-            <div id="typography-container"></div>
-            <!-- Image container -->
-            <div id="image-container"></div>
-            <!-- Link container -->
-            <div id="link-container"></div>
-            <!-- Media container -->
-            <div id="media-container"></div>
-            <!-- Footnote container -->
-            <div id="footnote-container"></div>
-            <!-- Banner container -->
-            <div id="banners-container"></div>
-            <!-- Features container -->
-            <div id="features-container"></div>
-            <!-- Posts container -->
-            <div id="posts-container"></div>
-            <!-- Form container -->
-            <div id="form-container"></div>
-            <!-- Table container -->
-            <div id="table-container"></div>
+            <div id="app"></div>
         </div>
     </div>
     <script type="module" src="js/script.js"></script> 
diff --git a/styleguide/preview.html b/styleguide/preview.html
new file mode 100644
index 00000000..5e4382cb
--- /dev/null
+++ b/styleguide/preview.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="main.css">
+    <link rel="stylesheet" href="nav.css">
+    <link rel="stylesheet" href="/dist/styles/styles.css">
+    <link rel="stylesheet" href="../__template__/assets/css/main.css" />
+    <title>Document</title>
+</head>
+<body>
+    
+</body>
+</html>
\ No newline at end of file