improve example webapp

jamowei · Dec 29, 2024 · 2b1e4b2 · 2b1e4b2
1 parent e46096f
commit 2b1e4b2
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 25 deletions.
diff --git a/build.mjs b/build.mjs
@@ -17,6 +17,7 @@ const mainDir = 'src/main';
 const kubernetesFile = 'app.ts';
 const kubernetesDir = 'src/kubernetes';
 const resourceDir = 'src/resources';
+const excludes = ['*.jpg', '*.png', '*.svg', '*.webp', '*.ttf'];
 const outputDir = 'out';
 const serve = process.argv[2] === 'serve';
 const kubernetes = process.argv[2] === 'k8s';
@@ -28,6 +29,7 @@ const mainConf = {
   minify: !serve,
   sourcemap: serve,
   plugins: [tailwindPlugin()],
+  external: excludes,
   outdir: outputDir,
 };
 

diff --git a/src/main/app.css b/src/main/app.css
@@ -2,4 +2,11 @@
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 
-/* custom styles here */
+/* custom styles here */
+
+@layer base {
+  @font-face {
+    font-family: 'Quicksand';
+    src: url(fonts/Quicksand.ttf) format('truetype');
+  }
+}
diff --git a/src/main/app.tsx b/src/main/app.tsx
@@ -1,32 +1,40 @@
-import './app.css'
-import * as React from "jsx-dom"
+import "./app.css";
+import * as React from "jsx-dom";
 
 class App {
-    readonly name = 'Web-Developer'
+  readonly name = "Web-Developer";
 
-    /**
-     * returns html content
-     * @returns html content
-     */
-    private content() {
-        return (
-            <h1 class="text-xl text-center mt-8">
-                Hello, {this.name}!
+  /**
+   * returns html content
+   * @returns html content
+   */
+  private content() {
+    return (
+        <div class="absolute top-0 w-full h-full bg-[url('img/background.jpg')] bg-no-repeat bg-center bg-cover">
+          <div class="bg-blue-950 opacity-90 shadow-xl max-w-3xl mx-auto text-center md:rounded-xl md:mt-8 px-4 sm:px-6 lg:px-8 py-16 md:py-12">
+            <h1 class="text-gray-200 text-3xl font-bold md:text-4xl lg:text-5xl">
+                WebApp made easy
             </h1>
-        )
-    }
+            <p class="mt-8 md:mt-4 md:text-lg text-gray-300">
+              Free, ready-to-use responsive WebApp using JSX and Tailwind CSS to build your own site
+              at lightning speed. Then all gets bundled in a Docker container for easy deployment.
+            </p>
+          </div>
+        </div>
+    );
+  }
 
-    /**
-     * bind the content to the DOM
-     * @param element
-     */
-    public bind(element: Element) {
-        element.appendChild(this.content())
-    }
+  /**
+   * bind the content to the DOM
+   * @param element
+   */
+  public bind(element: Element) {
+    element.appendChild(this.content());
+  }
 }
 
-new App().bind(document.getElementById('content')!)
+new App().bind(document.getElementById("content")!);
 
 // enables automatic live reload in browser
 // https://esbuild.github.io/api/#live-reload
-new EventSource('/esbuild').addEventListener('change', () => location.reload())
+new EventSource("/esbuild").addEventListener("change", () => location.reload());
diff --git a/src/resources/fonts/Quicksand.ttf b/src/resources/fonts/Quicksand.ttf
diff --git a/src/resources/img/background.jpg b/src/resources/img/background.jpg
diff --git a/src/resources/index.html b/src/resources/index.html
@@ -9,7 +9,7 @@
 </head>
 
 <body>
-    <div id="content"></div>
+    <main id="content"></main>
     <script src="app.js"></script>
 </body>
 

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -2,7 +2,11 @@
 export default {
   content: ['./src/**/*.{js,jsx,ts,tsx}'],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        'sans': ['Quicksand'],
+      }
+    },
   },
   plugins: []
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,7 +9,7 @@ @@
     </head>
     <body>
-        <div id="content"></div>
+        <main id="content"></main>
         <script src="app.js"></script>
     </body>
@@ Expand Down @@