removed md-block

nicobako · Dec 31, 2023 · 84538ac · 84538ac
1 parent 4920336
commit 84538ac
Show file tree

Hide file tree

Showing 10 changed files with 158 additions and 72 deletions.
diff --git a/README.md b/README.md
@@ -1,32 +1,17 @@
-# [nicobako.dev](https://nicobako.dev)
+# [nicobako.github.io](https://nicobako.github.io)
 
-[nicobako.dev](https://nicobako.dev) is my personal site that is *still a work in progress* and, let's be honest, *a playground*.
+Personal site.
 
-## Design
+Serves mostly as a playground for creating *static site* built with the same technologies that I would use for a full-fledged Django app:
 
-I'm trying something new here.
+* htmx
+* hyperscript
+* tailwind
 
-All my friends told me about is cool thing called _React_, and that *I just had to use it*, but what do they know?
+## Note
 
-Instead, I'm writing this with plain HTML, and a few other libraries.
+Create tailwind css files:
 
-If you're interested in seeing the source code take a look at the [GitHub Repo for this site](https://github.com/nicobako/nicobako.github.io).
-
-### [md-block](https://md-block.verou.me/)
-
-I'm using *md-block* for rendering *markdown*. Because I love *markdown* and *md-block* library is so easy to use!
-
-### [htmx](https://htmx.org/)
-
-I'm using *htmx* for replacing content on pages to simulate an SPA.
-
-### [hyperscript](https://hyperscript.org/)
-
-Hyperscript plays very well with htmx and adds
-JavaScript-y functionality directly in HTML!
-
-### Development
-
-[Vscode](https://code.visualstudio.com/) and [Live Server Extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer).
-
-npx tailwindcss -i ./input.css -o ./static/output.css --watch
+```bash
+npx tailwindcss -i ./input.css -o ./static/output.css --watch
+```
diff --git a/index.html b/index.html
@@ -6,18 +6,15 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>nicobako.dev</title>
-
-    <!-- md-block : markdown rendering -->
-    <script type="module" src="https://md-block.verou.me/md-block.js"></script>
+    <title>nicobako</title>
 
     <!-- htmx : SPA-like functionality -->
     <script src="https://unpkg.com/[email protected]"></script>
 
     <!-- hyperscript : JavaScript, hold the JavaScript -->
     <script src="https://unpkg.com/[email protected]"></script>
 
-    <!-- styles -->
+    <!-- styles - built by tailwind-->
     <link href="/static/output.css" rel="stylesheet">
 
     <!-- PWA -->
@@ -32,18 +29,18 @@
     <link rel="apple-touch-icon" sizes="180x180" href="/static/nico-bako.png">
 </head>
 
-<body class="flex-col items-center align-middle content-center">
-    <header id="header" class="flex-col items-center">
+<body class="flex flex-col items-center mx-10 my-5">
+    <header id="header" class="flex flex-col items-center">
 
-        <h1><a href="/">Nico Bako</a></h1>
-        <div class="flex-row">
-            <button _="on click  or load set #content.innerHTML to `<md-block id='content-md' src='/pages/about_me/about_me.md'>`"></md-block>About Me</button>
-            <button _="on click set #content.innerHTML to `<md-block id='content-md' src='/README.md'>`"></md-block>About Site</button>
+        <h1 class="my-2"><a href="/">Nico Bako</a></h1>
+        <div class="flex flex-row">
+            <button hx-trigger="load,click" hx-get="/pages/about_me.html" hx-target="#content">About Me</button>
+            <button hx-trigger="click" hx-get="/pages/about_site.html" hx-target="#content"></md-block>About Site</button>
         </div>
     </header>
-    <div id="content">
-
-    </div>
+    <content id="content">
+        Empty Content
+    </content>
 
 </body>
 

diff --git a/input.css b/input.css
@@ -24,5 +24,9 @@
         @apply rounded-lg bg-cyan-100;
     }
 
+    p {
+        @apply space-y-10;
+    }
+
 
   }
diff --git a/pages/about_me.html b/pages/about_me.html
@@ -0,0 +1,38 @@
+<h1>
+    About Me
+</h1>
+
+<p>
+    My name is Nico Bako.
+</p>
+
+<p>
+    I'm a software developer with a passion for writing <i>beautiful code</i>.
+</p>
+
+<p>
+    I have a firm belief that writing code is about more than <i>implementing features</i>.
+    Writing code is a creative process that is equal parts art and science.
+</p>
+
+<p>
+    My principle goal, when writing code, is to create software that improves the lives of whoever interacts with it.
+    This includes customers, other developers, and of course, myself.
+</p>
+
+<h2>
+    Other Work
+</h2>
+
+I have written a simple blog: <a href="https://nicobako.github.io/pythonic-misadventures">Pythonic Misadventures</a>
+
+<h2>Social LInks</h2>
+
+<ul>
+    <li>
+        <a href="https://github.com/nicobako">GitHub</a>
+    </li>
+    <li>
+        <a href="https://www.linkedin.com/in/nicobako/">LinkedIn</a>
+    </li>
+</ul>
diff --git a/pages/about_me/about_me.md b/pages/about_me/about_me.md
diff --git a/pages/about_me/index.html b/pages/about_me/index.html
diff --git a/pages/about_site.html b/pages/about_site.html
@@ -0,0 +1,34 @@
+<h1> <a href="https://nicobako.dev">nicobako.github.io</a></h1>
+
+<a href="https://nicobako.dev">nicobako.dev</a> is my personal site that is *still a work in progress* and, let's be honest, *a playground*.
+
+<h2> Design</h2>
+
+I'm trying something new here.
+
+All my friends told me about is cool thing called _React_, and that *I just had to use it*, but what do they know?
+
+Instead, I'm writing this with plain HTML, and a few other libraries.
+
+If you're interested in seeing the source code take a look at the <a href="https://github.com/nicobako/nicobako.github.io">GitHub Repo for this site</a>.
+
+<h3> <a href="https://tailwindcss.com/">Tailwind</a></h3>
+
+I'm using <i>Tailwind</i> as a CSS framework since I like its concept of <i>atomic CSS</i>.
+
+<h3> <a href="https://htmx.org/">htmx</a></h3>
+
+I'm using *htmx* for replacing content on pages to simulate an SPA.
+
+<h3> <a href="https://hyperscript.org/">hyperscript</a></h3>
+
+<p>
+    Hyperscript plays very well with htmx and adds
+    JavaScript-y functionality directly in HTML!
+</p>
+
+<h3> Development</h3>
+
+<a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer">Vscode](https://code.visualstudio.com/) and [Live Server Extension</a>.
+
+npx tailwindcss -i ./input.css -o ./static/output.css --watch
diff --git a/pages/about_site/index.html b/pages/about_site/index.html
diff --git a/static/output.css b/static/output.css
@@ -476,6 +476,12 @@ button {
   background-color: rgb(207 250 254 / var(--tw-bg-opacity));
 }
 
+p > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
+}
+
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -576,6 +582,30 @@ button {
   --tw-backdrop-sepia:  ;
 }
 
+.mx-10 {
+  margin-left: 2.5rem;
+  margin-right: 2.5rem;
+}
+
+.my-5 {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
+
+.my-10 {
+  margin-top: 2.5rem;
+  margin-bottom: 2.5rem;
+}
+
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.flex {
+  display: flex;
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -584,6 +614,10 @@ button {
   flex-direction: column;
 }
 
+.place-content-stretch {
+  place-content: stretch;
+}
+
 .content-center {
   align-content: center;
 }
@@ -592,6 +626,29 @@ button {
   align-items: center;
 }
 
+.gap-x-8 {
+  -moz-column-gap: 2rem;
+       column-gap: 2rem;
+}
+
+.space-x-10 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(2.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-20 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(5rem * var(--tw-space-x-reverse));
+  margin-left: calc(5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.-space-x-10 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(-2.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(-2.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .align-middle {
   vertical-align: middle;
 }
diff --git a/sw.js b/sw.js
@@ -8,14 +8,10 @@ self.addEventListener("install", (event) => {
         cache.addAll([
           "/",
           "/index.html",
-          "/README.md",
-          "/static/styles.css",
-          "/static/reset.css",
+          "/static/output.css",
           "/static/nico-bako.png",
-          "/pages/about_me/about_me.md",
-          "/pages/about_me/index.html",
-          "/pages/about_site/index.html",
-          "https://md-block.verou.me/md-block.js",
+          "/pages/about_me.html",
+          "/pages/about_site.html",
           "https://unpkg.com/[email protected]",
           "https://unpkg.com/[email protected]",
         ]),
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,5 +24,9 @@ @@
             @apply rounded-lg bg-cyan-100;
         }
+        p {
+            @apply space-y-10;
+        }
       }