WIP react-nextjs.html

index.js

@@ -340,5 +340,5 @@ main()
 
 console.log('⭐️ END BUILD ⭐️\n🎉 🎉 🎉')
 
-module.exports = { kissX, optimizeHTML } // For development purpose import in watch.js
+module.exports = { kissX, optimizeHTML, convertImages, copyAssets } // For development purpose import in watch.js
 // #endregion

src/assets/modules/react.js

@@ -10,7 +10,13 @@ function Counter() {
       justifyContent: 'center',
       alignItems: 'center',
     },
-
+    heading: {
+      padding: '0',
+      margin: '0',
+    },
+    paragraph: {
+      margin: '0.5rem',
+    },
     button: {
       width: '10rem',
       color: 'white',
@@ -23,8 +29,8 @@ function Counter() {
 
   return (
     <div style={mystyle.container}>
-      <h3>Counter</h3>
-      <p>You clicked {count} times</p>
+      <h3 style={mystyle.heading}>Counter</h3>
+      <p style={mystyle.paragraph}>You clicked {count} times</p>
       <button style={mystyle.button} onClick={() => setCount(count + 1)}>
         Click me
       </button>
@@ -33,7 +39,13 @@ function Counter() {
 }
 
 function Header() {
-  return <h2>Develop. Preview. Ship. 🚀</h2>
+  const mystyle = {
+    heading: {
+      padding: '0.5rem',
+      margin: '0',
+    },
+  }
+  return <h2 style={mystyle.heading}>Develop. Preview. Ship. 🚀</h2>
 }
 
 function App() {

src/components/navmenu-x.html

@@ -343,7 +343,7 @@
           </div>
         </a>
 
-        <a class="nav__link" href="/nextjs.html" aria-label="link to page">
+        <a class="nav__link" href="/react-nextjs.html" aria-label="link to page">
           <div class="svg nav__svg">
             <svg
               width="48"

src/pages/nextjs.html → src/pages/react-nextjs.html

@@ -18,6 +18,12 @@
         border-radius: 5px;
         filter: drop-shadow(0 0 2rem rgba(255, 255, 255, 0.5));
       }
+      .heading-react {
+        margin: 0;
+      }
+      .heading-next {
+        margin-top: 5rem;
+      }
     </style>
   </head>
 
@@ -31,7 +37,7 @@
     <main>
       <h1>React & Next.js</h1>
 
-      <h2>React</h2>
+      <h2 class="heading-react">React</h2>
 
       <div id="app"></div>
 
@@ -45,7 +51,7 @@ <h2>React</h2>
       <!-- React Component -->
       <script src="/assets/react.js" type="text/babel"></script>
 
-      <h2>Next.js</h2>
+      <h2 class="heading-next">Next.js</h2>
 
       <a href="https://nextjs-blog-pink-two-81.vercel.app">Next.js Blog</a>
       <div class="iframe">

watch.js

@@ -1,12 +1,14 @@
 const fs = require('fs')
-const { kissX, optimizeHTML } = require('./index.js')
+const { kissX, optimizeHTML, convertImages, copyAssets } = require('./index.js')
 // const { exec } = require('child_process')
 
 // Watch file changes and rebuild
 fs.watch('./src/', { recursive: true }, (event, filename) => {
   console.log(`Detected ${event} in ${filename}`)
   kissX()
-  optimizeHTML()
+  // optimizeHTML()
+  // convertImages()
+  // copyAssets()
 })
 
 // // Exec shell command