Setup

.gitignore

@@ -5,6 +5,7 @@
 build/
 dist/
 /hass_frontend/
+/logs/dist/
 /translations/
 
 # yarn

build-scripts/bundle.cjs

@@ -327,6 +327,20 @@ module.exports.config = {
     };
   },
 
+  logs({ isProdBuild, latestBuild, isStatsBuild }) {
+    return {
+      name: "logs" + nameSuffix(latestBuild),
+      entry: {
+        entrypoint: path.resolve(paths.logs_dir, "src/entrypoint.ts"),
+      },
+      outputPath: outputPath(paths.logs_output_root, latestBuild),
+      publicPath: publicPath(latestBuild),
+      isProdBuild,
+      latestBuild,
+      isStatsBuild,
+    };
+  },
+
   landingPage({ isProdBuild, latestBuild }) {
     return {
       name: "landing-page" + nameSuffix(latestBuild),

build-scripts/gulp/clean.js

@@ -39,6 +39,13 @@ gulp.task(
   )
 );
 
+gulp.task(
+  "clean-logs",
+  gulp.parallel("clean-translations", async () =>
+    deleteSync([paths.logs_output_root, paths.build_dir])
+  )
+);
+
 gulp.task(
   "clean-landing-page",
   gulp.parallel("clean-translations", async () =>

build-scripts/gulp/entry-html.js

@@ -245,6 +245,24 @@ gulp.task(
   )
 );
 
+const LOGS_PAGE_ENTRIES = { "index.html": ["entrypoint"] };
+
+gulp.task(
+  "gen-pages-logs-dev",
+  genPagesDevTask(LOGS_PAGE_ENTRIES, paths.logs_dir, paths.logs_output_root)
+);
+
+gulp.task(
+  "gen-pages-logs-prod",
+  genPagesProdTask(
+    LOGS_PAGE_ENTRIES,
+    paths.logs_dir,
+    paths.logs_output_root,
+    paths.logs_output_latest,
+    paths.logs_output_es5
+  )
+);
+
 const LANDING_PAGE_PAGE_ENTRIES = { "index.html": ["entrypoint"] };
 
 gulp.task(

build-scripts/gulp/gather-static.js

@@ -202,6 +202,16 @@ gulp.task("copy-static-gallery", async () => {
   copyMdiIcons(paths.gallery_output_static);
 });
 
+gulp.task("copy-static-logs", async () => {
+  // Copy app static files
+  fs.copySync(polyPath("public/static"), paths.logs_output_static);
+
+  copyFonts(paths.logs_output_static);
+  copyTranslations(paths.logs_output_static);
+  copyLocaleData(paths.logs_output_static);
+  copyMdiIcons(paths.logs_output_static);
+});
+
 gulp.task("copy-static-landing-page", async () => {
   // Copy landing-page static files
   fs.copySync(

build-scripts/gulp/index.mjs

@@ -7,6 +7,7 @@ import "./download-translations.js";
 import "./entry-html.js";
 import "./fetch-nightly-translations.js";
 import "./gallery.js";
+import "./logs.js";
 import "./gather-static.js";
 import "./gen-icons-json.js";
 import "./hassio.js";

build-scripts/gulp/logs.js

@@ -0,0 +1,39 @@
+import gulp from "gulp";
+import "./clean.js";
+import "./entry-html.js";
+import "./gather-static.js";
+import "./gen-icons-json.js";
+import "./translations.js";
+import "./rspack.js";
+
+gulp.task(
+  "develop-logs",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "development";
+    },
+    "clean-logs",
+    gulp.parallel(
+      "gen-icons-json",
+      "gen-pages-logs-dev",
+      "build-translations",
+      "build-locale-data"
+    ),
+    "copy-static-logs",
+    "rspack-dev-server-logs"
+  )
+);
+
+gulp.task(
+  "build-logs",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "production";
+    },
+    "clean-logs",
+    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
+    "copy-static-logs",
+    "rspack-prod-logs",
+    "gen-pages-logs-prod"
+  )
+);

build-scripts/gulp/rspack.js

@@ -15,6 +15,7 @@ import {
   createGalleryConfig,
   createHassioConfig,
   createLandingPageConfig,
+  createLogsConfig,
 } from "../rspack.cjs";
 
 const bothBuilds = (createConfigFunc, params) => [
@@ -204,6 +205,25 @@ gulp.task("rspack-prod-gallery", () =>
   )
 );
 
+gulp.task("rspack-dev-server-logs", () =>
+  runDevServer({
+    compiler: rspack(
+      createLogsConfig({ isProdBuild: false, latestBuild: true })
+    ),
+    contentBase: paths.logs_output_root,
+    port: 5647,
+  })
+);
+
+gulp.task("rspack-prod-logs", () =>
+  prodBuild(
+    bothBuilds(createLogsConfig, {
+      isProdBuild: true,
+      isStatsBuild: env.isStatsBuild(),
+    })
+  )
+);
+
 gulp.task("rspack-watch-landing-page", () => {
   // This command will run forever because we don't close compiler
   rspack(

build-scripts/paths.cjs

@@ -59,5 +59,11 @@ module.exports = {
   hassio_output_es5: path.resolve(__dirname, "../hassio/build/frontend_es5"),
   hassio_publicPath: "/api/hassio/app",
 
+  logs_dir: path.resolve(__dirname, "../logs"),
+  logs_output_root: path.resolve(__dirname, "../logs/dist"),
+  logs_output_static: path.resolve(__dirname, "../logs/dist/static"),
+  logs_output_latest: path.resolve(__dirname, "../logs/dist/frontend_latest"),
+  logs_output_es5: path.resolve(__dirname, "../logs/dist/frontend_es5"),
+
   translations_src: path.resolve(__dirname, "../src/translations"),
 };

build-scripts/rspack.cjs

@@ -302,6 +302,11 @@ const createHassioConfig = ({
 const createGalleryConfig = ({ isProdBuild, latestBuild }) =>
   createRspackConfig(bundle.config.gallery({ isProdBuild, latestBuild }));
 
+const createLogsConfig = ({ isProdBuild, latestBuild, isStatsBuild }) =>
+  createRspackConfig(
+    bundle.config.logs({ isProdBuild, latestBuild, isStatsBuild })
+  );
+
 const createLandingPageConfig = ({ isProdBuild, latestBuild }) =>
   createRspackConfig(bundle.config.landingPage({ isProdBuild, latestBuild }));
 
@@ -311,6 +316,7 @@ module.exports = {
   createCastConfig,
   createHassioConfig,
   createGalleryConfig,
+  createLogsConfig,
   createRspackConfig,
   createLandingPageConfig,
 };

logs/src/entrypoint.ts

@@ -0,0 +1,5 @@
+import "./logs-app";
+
+import("../../src/resources/append-ha-style");
+
+document.body.appendChild(document.createElement("logs-app"));

logs/src/html/index.html.template

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#03a9f4" />
+    <title>Home Assistant Logs</title>
+    <% for (const entry of latestEntryJS) { %>
+      <script type="module" src="<%= entry %>"></script>
+    <% } %>
+    <style>
+      html {
+        background-color: var(--primary-background-color, #fafafa);
+        color: var(--primary-text-color, #212121);
+      }
+      @media (prefers-color-scheme: dark) {
+        html {
+          background-color: var(--primary-background-color, #111111);
+          color: var(--primary-text-color, #e1e1e1);
+        }
+      }
+      body {
+        font-family: Roboto, Noto, sans-serif;
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        font-weight: 400;
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+  <body></body>
+</html>

logs/src/logs-app.ts

@@ -0,0 +1,46 @@
+import { LitElement, css, html } from "lit";
+import { customElement } from "lit/decorators";
+
+@customElement("logs-app")
+class LogsApp extends LitElement {
+  render() {
+    return html`
+      <div class="container">
+        <h1>Logs Application</h1>
+        <p>This is a minimal logs frontend application.</p>
+      </div>
+    `;
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      height: 100vh;
+    }
+
+    .container {
+      padding: 24px;
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+
+    h1 {
+      font-size: 32px;
+      font-weight: 400;
+      margin: 0 0 16px 0;
+      color: var(--primary-text-color, #212121);
+    }
+
+    p {
+      font-size: 16px;
+      line-height: 1.5;
+      color: var(--secondary-text-color, #727272);
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "logs-app": LogsApp;
+  }
+}

script/develop-logs

@@ -0,0 +1,9 @@
+#!/bin/sh
+# Run the logs frontend development server
+
+# Stop on errors
+set -e
+
+cd "$(dirname "$0")/.."
+
+./node_modules/.bin/gulp develop-logs