final, for now.

KalipsoCollective · Mar 21, 2022 · f33f9a9 · f33f9a9
1 parent 9b637e7
commit f33f9a9
Show file tree

Hide file tree

Showing 9 changed files with 513 additions and 28 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,10 +8,13 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "del": "^6.0.0",
+    "del-cli": "^4.0.1",
     "sass": "^1.49.9",
     "vite": "^2.8.6",
     "vite-plugin-handlebars": "^1.6.0"
   },
-  "dependencies": {}
+  "dependencies": {
+    "@popperjs/core": "^2.11.4",
+    "bootstrap": "^5.1.3"
+  }
 }
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1 @@
+Allow: /
diff --git a/src/assets/js/main.js b/src/assets/js/main.js
@@ -1,3 +1,6 @@
+import bootstrap from  'bootstrap';
+/*
 (function() {
   console.log('Vite Vanilla Boilerplate Loaded!');
 })();
+*/
diff --git a/src/assets/scss/base/_base.scss b/src/assets/scss/base/_base.scss
@@ -18,6 +18,7 @@ body {
         font-size: 2rem;
         color: #0047FF;
         text-align: center;
+        font-weight: 700;
     }
     .logo {
         width: 5rem;
@@ -26,6 +27,7 @@ body {
     .nav {
         list-style-type: none;
         margin: 0;
+        margin-top: 1rem;
         padding: 0;
         display: inline-flex;
         li {
@@ -41,28 +43,32 @@ body {
                 font-size: 1.2rem;
                 transition: 0.2s ease-out;
                 box-shadow: inset 0 0.2rem 0.4rem rgba(#0047FF, 0.2);
-                border: 0.1rem solid transparent;
+                border: 0.1rem solid #bfbfbf;
                 &:hover {
-                    color: #0047FF;
-                    background-color: #ffffff;
-                    box-shadow: 0 0.2rem 0.4rem rgba(#0047FF, 0.2);
-                }
-                &.active {
+                    color: #ffffff;
+                    background-color: #0047FF;
                     border-color: #0047FF;
+                    box-shadow: 0 0.2rem 0.4rem rgba(#0047FF, 0.2);
+                    transform: translateY(-0.2rem);
                 }
             }
             & + li {
                 margin-left: 0.5rem;
             }
         }
     }
+    p {
+        margin: 0;
+        margin-top: 1rem;
+        color: #697696;
+    }
     .using {
         box-shadow: inset 0 0.2rem 0.4rem rgba(#000c29, 0.2);
         width: 100%;
         background-color: #697696;
         text-align: left;
         color: #ffffff;
-        margin-top: 2rem;
+        margin-top: 1rem;
         border-radius: 0.5rem;
         padding: 2rem 0.5rem;
         font-size: 1rem;

diff --git a/src/assets/scss/base/_root.scss b/src/assets/scss/base/_root.scss
@@ -1 +1,2 @@
 // place global css variables here
+@import 'bootstrap';
diff --git a/src/index.html b/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
     {{> head }}
     <body>
-        {{> intro index=true}}
+        {{> intro}}
         {{> scripts}}
     </body>
 </html>
diff --git a/src/partials/intro.hbs b/src/partials/intro.hbs
@@ -1,14 +1,15 @@
 <section class="intro">
-    <h1 class="header">Vite Template Project</h1>
     <img class="logo" src="{{webRoot}}/assets/img/favicon.svg" alt="Logo" />
+    <h1 class="header">Vite Template Project</h1>
     <ul class="nav">
         <li>
-            <a{{#if index}} class="active"{{/if}} href="index.html">Home</a>
+            <a href="index.html">Home</a>
         </li>
         <li>
-            <a{{#if index}}{{else}} class="active"{{/if}} href="other.html">Other</a>
+            <a href="other.html">Other</a>
         </li>
     </ul>
+    <p>This repository will help create a boilerplate vanilla javascript + scss project using Vite. Also Handlebars included.</p>
     <pre class="using">    npm install
     npm run dev</pre>
 </section>
diff --git a/vite.config.js b/vite.config.js
@@ -13,6 +13,7 @@ const PAGE_DATA = {
 
 export default defineConfig({
   root: 'src',
+  publicDir: 'public',
   build: {
     minify: false,
     outDir: '../dist',
@@ -21,21 +22,6 @@ export default defineConfig({
         index: path.resolve(__dirname, 'src/index.html'),
         other: path.resolve(__dirname, 'src/other.html')
       },
-      output: {
-        assetFileNames: (assetInfo) => {
-          // [hash]
-          let extType = assetInfo.name.split('.').at(1);
-          if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
-            extType = 'img';
-          }
-          if (/otf|ttf|woff|woff2/i.test(extType)) {
-            extType = 'fonts';
-          }
-          return `assets/${extType}/[name][extname]`;
-        },
-        chunkFileNames: 'assets/js/[name].js',
-        entryFileNames: 'assets/js/[name].js',
-      },
     },
   },
   plugins: [Handlebars({
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		// place global css variables here
		@import 'bootstrap';