stack bookmark layout is 50% done

src/modules/server.ts

@@ -1,30 +1,27 @@
-import { Application, Router } from "https://deno.land/x/oak/mod.ts";
+import { opine, serveStatic } from "https://deno.land/x/opine/mod.ts";
 import { ensureDirSync, existsSync } from "https://deno.land/std/fs/mod.ts";
 import { Language, minify } from "https://deno.land/x/minifier/mod.ts";
 
 const tempFolder = `${Deno.cwd()}/temp`;
 
 export async function startServer(): Promise<void> {
-  const router = new Router();
-  router
-    .get("/", (context) => {
-      context.response.body = window.index;
+  const app = opine();
+  app.use(serveStatic("./public"));
+  app.get("/", function (req, res) {
+    res.headers = new Headers({
+      "content-type": "text/html; charset=UTF-8",
     });
-
-  const app = new Application();
-  app.use(router.routes());
-  app.use(router.allowedMethods());
-  app.use(async (context, next) => {
-    try {
-      await context.send({
-        root: `${Deno.cwd()}/public`,
-      });
-    } catch {
-      next();
-    }
+    res.send(window.index);
   });
 
-  await app.listen({ port: window.config.server.port });
+  Compile();
+  app.listen(
+    window.config.server.port,
+    () =>
+      console.log(
+        `server has started on http://localhost:${window.config.server.port} 🚀`,
+      ),
+  );
 }
 
 export async function Compile(): Promise<void> {
@@ -54,15 +51,26 @@ export async function CompileIndex(): Promise<void> {
   }
 
   //Minify HTML
-  indexContent = minify(Language.HTML, indexContent);
+  if (window.config.server.minify) {
+    indexContent = minify(Language.HTML, indexContent);
+  }
 
   //Write index.html into temp folder
   ensureDirSync(tempFolder);
-  await Deno.writeTextFile(`${tempFolder}/index.html`, indexContent);
+  window.index = indexContent;
+  //await Deno.writeTextFile(`${tempFolder}/index.html`, indexContent);
 }
 
 export async function CompileCSS(path: string): Promise<void> {
+  if (!path) {
+  }
+
+  if (window.config.server.minify) {}
 }
 
 export async function CompileJS(path: string): Promise<void> {
+  if (!path) {
+  }
+
+  if (window.config.server.minify) {}
 }

src/private/css/magma.css

@@ -10,3 +10,7 @@
   align-content: center;
   float: right;
 }
+
+.group-title {
+  margin-top: 5%;
+}

src/private/index.html

@@ -19,19 +19,43 @@
         <div id="header" class="row">
             <div class="two-thirds column">
                 <h5 id="clock"></h5>
-                <h1><b id="welcome">Good afternoon!</b></h1>
+                <h1>
+                    <b id="welcome">Good afternoon!</b>
+                </h1>
                 </b>
             </div>
             <div id="header-right" class="one-third column">
                 <canvas id="weather-icon" width="50" height="50"></canvas>
             </div>
         </div>
-        <div id="content" class="row"></div>
+        <div id="content" class="row">
+            <div class="column twelve">
+                <div class="row group-title">
+                    <h4><b>Applications</b></h4>
+                </div>
+                <div class="row">
+                    <div class="three columns">a</div>
+                    <div class="three columns">b</div>
+                    <div class="three columns">c</div>
+                    <div class="three columns">d</div>
+                </div>
+                <div class="row group-title">
+                    <h4><b>Bookmarks</b></h4>
+                </div>
+                <div class="row">
+                    <div class="three columns">a</div>
+                    <div class="three columns">b</div>
+                    <div class="three columns">c</div>
+                    <div class="three columns">d</div>
+                </div>
+            </div>
+        </div>
         <div id="footer" class="row"></div>
     </div>
 
     <script src="js/skycons.js"></script>
     <script src="js/magma.js"></script>
+    <script src="js/custom.js"></script>
 </body>
 
 </html>