Home Explore Help
Register Sign In
lee
/
home-display
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Create the creathtml file.
Split into multiple files for ease of use.

Lee Morgan 6 months ago
parent
99c924bcd0
commit
ad4069b9bb
5 changed files with 230 additions and 136 deletions
Unified View Show Diff Stats
  1. 42 0
      createHtml.js
  2. 59 136
      display.html
  3. 87 0
      index.css
  4. 42 0
      index.html
  5. 0 0
      index.js

+ 42 - 0
createHtml.js
View File 

@@ -0,0 +1,42 @@
 
+console.time("Build time");
 
+import esbuild from "esbuild";
 
+import htmlMinifier from "html-minifier-terser";
 
+import fsSync from "fs";
 
+
 
+const fs = fsSync.promises;
 
+const isProduction = false;
 
+
 
+const esbuildProm = esbuild.build({
 
+    entryPoints: [`${import.meta.dirname}/js/index.js`, `${import.meta.dirname}/css/index.css`],
 
+    bundle: true,
 
+    minify: isProduction,
 
+    write: false,
 
+    outdir: import.meta.dirname
 
+});
 
+const htmlProm = await fs.readFile(`${import.meta.dirname}/index.html`, "utf-8");
 
+const [build, html] = await Promise.all([esbuildProm, htmlProm]);
 
+
 
+let js, css;
 
+for(let i = 0; i < build.outputFiles.length; i++){
 
+    if(build.outputFiles[i].path.endsWith(".js")){
 
+        js = build.outputFiles[i].text;
 
+    }else if(build.outputFiles[i].path.endsWith(".css")){
 
+        css = build.outputFiles[i].text;
 
+    }
 
+}
 
+
 
+let data = await htmlMinifier.minify(html, {
 
+    collapseBooleanAttributes: true,
 
+    collapseInlineTagWhitespace: true,
 
+    collapseWhitespace: true,
 
+    conservativeCollapse: true,
 
+    decodeEntities: true,
 
+    noNewlinesBeforeTagClose: true,
 
+    removeComments: true
 
+});
 
+
 
+data = data.replace("<script></script>", `<script>${js}</script>`)
 
+data = data.replace("<style></style>", `<style>${css}</style>`)
 
+
 
+await fs.writeFile(`${import.meta.dirname}/build.html`, data);
 
+console.timeEnd("Build time");

+ 59 - 136
display.html
View File 

@@ -2,83 +2,7 @@
 
 <html>
 
 <html>
 
     <head>
 
     <head>
 
         <meta charset="utf-8">
 
         <meta charset="utf-8">
 
-        <style>
 
-            *{margin:0;padding:0;box-sizing:border-box};
 
-            html, body{
 
-                height: 100vh;
 
-                width: 100vw;
 
-                background: black;
 
-            }
 
-            .grid{
 
-                display: grid;
 
-                grid-template-columns: 1fr 1fr;
 
-                grid-template-rows: 1fr 1fr;
 
-                height: 100vh;
 
-                width: 100vw;
 
-                grid-template-areas:
 
-                    "topLeft topRight"
 
-                    "bottom bottom";
 
-                gap: 2px;
 
-            }
 
-            .grid > *{
 
-                background: black;
 
-                min-height: 0;
 
-                min-width: 0;
 
-                overflow: hidden;
 
-            }
 
-            .topLeft{
 
-                display: flex;
 
-                flex-direction: column;
 
-                justify-content: space-around;
 
-                align-items: center;
 
-                grid-area: topLeft;
 
-                color: white;
 
-            }
 
-            .topRight{
 
-                display: flex;
 
-                align-items: center;
 
-                justify-content: center;
 
-                grid-area: topRight;
 
-            }
 
-            .bottom{
 
-                grid-area: bottom;
 
-            }
 
-
 
-            #date{
 
-                font-size: 2.2em;
 
-            }
 
-            #time{
 
-                font-size: 1.8em;
 
-                text-align: center;
 
-            }
 
-            .weather{
 
-                display: flex;
 
-                justify-content: space-around;
 
-                width: 100%;
 
-            }
 
-            .weatherBlock{
 
-                display: flex;
 
-                justify-content: space-around;
 
-                align-items: center;
 
-                position: relative;
 
-                padding-top: 35px;
 
-                width: 50%;
 
-            }
 
-            .weatherBlock h2{
 
-                position: absolute;
 
-                top: 0;
 
-                left: 0;
 
-                width: 100%;
 
-                text-align: center;
 
-            }
 
-            .topRight img{
 
-                height: 95%;
 
-            }
 
-            .bottom iframe{
 
-                width: 100%;
 
-                height: 100%;
 
-            }
 
-        </style>
 
+        <style></style>
 
     </head>
 
     </head>
 
     <body>
 
     <body>
 
         <div class="grid">
 
         <div class="grid">
 
@@ -106,67 +30,66 @@
 
             <div class="topRight">
 
             <div class="topRight">
 
                 <img id="radar" src="https://radar.weather.gov/ridge/standard/KLTX_0.gif" alt="radar">
 
                 <img id="radar" src="https://radar.weather.gov/ridge/standard/KLTX_0.gif" alt="radar">
 
             </div>
 
             </div>
 
-            <div class="bottom">
 
+            <div class="bottomLeft">
 
+                <table>
 
+                    <thead>
 
+                        <tr>
 
+                            <th></th>
 
+                            <th></th>
 
+                            <th></th>
 
+                            <th></th>
 
+                        </tr>
 
+                    </thead>
 
+                    <tbody>
 
+                        <tr>
 
+                            <td>Temp (&deg;F)</td>
 
+                            <td></td>
 
+                            <td></td>
 
+                            <td></td>
 
+                        </tr>
 
+                        <tr>
 
+                            <td>Humidity</td>
 
+                            <td></td>
 
+                            <td></td>
 
+                            <td></td>
 
+                        </tr>
 
+                        <tr>
 
+                            <td>Chance Of Rain</td>
 
+                            <td></td>
 
+                            <td></td>
 
+                            <td></td>
 
+                        </tr>
 
+                        <tr>
 
+                            <td>Precipitation (inches)</td>
 
+                            <td></td>
 
+                            <td></td>
 
+                            <td></td>
 
+                        </tr>
 
+                        <tr>
 
+                            <td>Max Wind (MPH)</td>
 
+                            <td></td>
 
+                            <td></td>
 
+                            <td></td>
 
+                        </tr>
 
+                        <tr>
 
+                            <td>Sunrise</td>
 
+                            <td></td>
 
+                            <td></td>
 
+                            <td></td>
 
+                        </tr>
 
+                        <tr>
 
+                            <td>Sunset</td>
 
+                            <td></td>
 
+                            <td></td>
 
+                            <td></td>
 
+                        </tr>
 
+                    </tbody>
 
+                </table>
 
+            </div>
 
+            <div class="bottomRight">
 
                 <iframe src="https://www.youtube-nocookie.com/embed/4nMfRpesYfw?si=O9Up2lQKNo8v9gi2" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 
                 <iframe src="https://www.youtube-nocookie.com/embed/4nMfRpesYfw?si=O9Up2lQKNo8v9gi2" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
+        <script></script>
 
     </body>
 
     </body>
 
-    <script>
 
-        const setDateTime = ()=>{
 
-            const dateTime = new Date();
 
-            document.getElementById("date").textContent = dateTime.toLocaleDateString("en-US", {
 
-                weekday: "long",
 
-                year: "numeric",
 
-                month: "long",
 
-                day: "numeric"
 
-            });
 
-            document.getElementById("time").textContent = dateTime.toLocaleTimeString("en-US", {
 
-                hour: "numeric",
 
-                minute: "2-digit",
 
-                hour12: true
 
-            });
 
-        }
 
-
 
-        const getWeather = ()=>{
 
-            fetch("https://api.weatherapi.com/v1/current.json?key=519f51763fa8477b864184849251502&q=29576&aqi=no", {
 
-                method: "get"
 
-            })
 
-                .then(r=>r.json())
 
-                .then((response)=>{
 
-                    const tempDisplay = `Temperature: ${response.current.temp_f}\u00B0F`;
 
-                    document.getElementById("temp").textContent = tempDisplay;
 
-
 
-                    const feelsLike = `Feels Like: ${response.current.feelslike_f}\u00B0F`;
 
-                    document.getElementById("feels").textContent = feelsLike;
 
-
 
-                    const currentWeatherImage = document.querySelector("#currentWeather img");
 
-                    currentWeatherImage.src = `https:${response.current.condition.icon}`;
 
-                    currentWeatherImage.alt = response.current.condition.text;
 
-
 
-                    const currentWeatherText = document.querySelector("#currentWeather .conditionText");
 
-                    currentWeatherText.textContent = response.current.condition.text;
 
-
 
-                    const currentWind = `Wind: ${response.current.wind_mph}mph ${response.current.wind_dir}`;
 
-                    document.getElementById("wind").textContent = currentWind;
 
-
 
-                    const humidity = `Humidity: ${response.current.humidity}%`;
 
-                    document.getElementById("humidity").textContent = humidity;
 
-                })
 
-                .catch((err)=>{
 
-                    console.log(err);
 
-                });
 
-        }
 
-
 
-        const getRadarImage = () =>{
 
-            const img = document.getElementById("radar");
 
-            const base = img.src.split("?")[0];
 
-            img.src = base + "?t=" + Date.now();
 
-        }
 
-
 
-        getWeather();
 
-        setInterval(getWeather, 60000);
 
-        setDateTime();
 
-        setInterval(setDateTime, 10000);
 
-        setInterval(getRadarImage, 10 * 1000);
 
-    </script>
 
 </html>
 
 </html>

+ 87 - 0
index.css
View File 

@@ -0,0 +1,87 @@
 
+*{margin:0;padding:0;box-sizing:border-box};
 
+
 
+html, body{
 
+    height: 100vh;
 
+    width: 100vw;
 
+    background: black;
 
+}
 
+
 
+.grid{
 
+    display: grid;
 
+    grid-template-columns: 1fr 1fr;
 
+    grid-template-rows: 1fr 1fr;
 
+    height: 100vh;
 
+    width: 100vw;
 
+    grid-template-areas:
 
+        "topLeft topRight"
 
+        "bottomLeft bottomRight";
 
+    gap: 2px;
 
+}
 
+
 
+.grid > *{
 
+    background: black;
 
+    min-height: 0;
 
+    min-width: 0;
 
+    overflow: hidden;
 
+}
 
+
 
+.topLeft{
 
+    display: flex;
 
+    flex-direction: column;
 
+    justify-content: space-around;
 
+    align-items: center;
 
+    grid-area: topLeft;
 
+    color: white;
 
+}
 
+
 
+.topRight{
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: center;
 
+    grid-area: topRight;
 
+}
 
+
 
+.bottomRight{
 
+    grid-area: bottomRight;
 
+}
 
+
 
+#date{
 
+    font-size: 2.2em;
 
+}
 
+
 
+#time{
 
+    font-size: 1.8em;
 
+    text-align: center;
 
+}
 
+
 
+.weather{
 
+    display: flex;
 
+    justify-content: space-around;
 
+    width: 100%;
 
+}
 
+
 
+.weatherBlock{
 
+    display: flex;
 
+    justify-content: space-around;
 
+    align-items: center;
 
+    position: relative;
 
+    padding-top: 35px;
 
+    width: 50%;
 
+}
 
+
 
+.weatherBlock h2{
 
+    position: absolute;
 
+    top: 0;
 
+    left: 0;
 
+    width: 100%;
 
+    text-align: center;
 
+}
 
+
 
+.topRight img{
 
+    height: 95%;
 
+}
 
+
 
+.bottomRight iframe{
 
+    width: 100%;
 
+    height: 100%;
 
+}

+ 42 - 0
index.html
View File 

@@ -0,0 +1,42 @@
 
+console.time("Build time");
 
+import esbuild from "esbuild";
 
+import htmlMinifier from "html-minifier-terser";
 
+import fsSync from "fs";
 
+
 
+const fs = fsSync.promises;
 
+const isProduction = false;
 
+
 
+const esbuildProm = esbuild.build({
 
+    entryPoints: [`${import.meta.dirname}/js/index.js`, `${import.meta.dirname}/css/index.css`],
 
+    bundle: true,
 
+    minify: isProduction,
 
+    write: false,
 
+    outdir: import.meta.dirname
 
+});
 
+const htmlProm = await fs.readFile(`${import.meta.dirname}/index.html`, "utf-8");
 
+const [build, html] = await Promise.all([esbuildProm, htmlProm]);
 
+
 
+let js, css;
 
+for(let i = 0; i < build.outputFiles.length; i++){
 
+    if(build.outputFiles[i].path.endsWith(".js")){
 
+        js = build.outputFiles[i].text;
 
+    }else if(build.outputFiles[i].path.endsWith(".css")){
 
+        css = build.outputFiles[i].text;
 
+    }
 
+}
 
+
 
+let data = await htmlMinifier.minify(html, {
 
+    collapseBooleanAttributes: true,
 
+    collapseInlineTagWhitespace: true,
 
+    collapseWhitespace: true,
 
+    conservativeCollapse: true,
 
+    decodeEntities: true,
 
+    noNewlinesBeforeTagClose: true,
 
+    removeComments: true
 
+});
 
+
 
+data = data.replace("<script></script>", `<script>${js}</script>`)
 
+data = data.replace("<style></style>", `<style>${css}</style>`)
 
+
 
+await fs.writeFile(`${import.meta.dirname}/build.html`, data);
 
+console.timeEnd("Build time");

+ 0 - 0
index.js
View File