chore: updated js structure, updated bulma and alpine JS

gulpfile.js

@@ -6,7 +6,6 @@ import imagemin from "gulp-imagemin";
 import sourcemaps from "gulp-sourcemaps";
 import autoprefixer from "gulp-autoprefixer";
 import panini from "panini";
-
 import sassCompiler from "sass";
 import del from "del";
 import browserify from "browserify";
@@ -33,6 +32,14 @@ function livePreview(done) {
   done();
 }
 
+//Copy latest installed Bulma
+function setupBulma() {
+  console.log("\n\t" + logSymbols.info, "Installing Bulma Files..\n");
+  return src([nodepath + "bulma/*.sass", nodepath + "bulma/**/*.sass"]).pipe(
+    dest("src/sass/")
+  );
+}
+
 //Compile Scss code
 function compileSCSS() {
   console.log(logSymbols.info, "Compiling App SCSS..");
@@ -195,3 +202,7 @@ export default (done) => {
   )();
   done();
 };
+
+export const setup = () => {
+  series(setupBulma);
+};

package.json

@@ -23,11 +23,15 @@
   "node": "^12.20.0 || ^14.13.1 || >=16.0.0",
   "scripts": {
     "dev": "gulp",
-    "build": "gulp build"
+    "build": "gulp build",
+    "setup": "gulp setup"
   },
   "dependencies": {
-    "@ryangjchandler/spruce": "2.7.1",
-    "alpinejs": "2.8.2",
+    "@alpinejs/intersect": "^3.4.0",
+    "@alpinejs/persist": "^3.4.0",
+    "@ryangjchandler/fern": "^0.1.0",
+    "alpinejs": "^3.3.2",
+    "bulma": "^0.9.3",
     "aos": "3.0.0-beta.6",
     "codemirror": "5.64.0",
     "feather-icons": "4.28.0",

src/js/libs/components/index.js

@@ -0,0 +1,15 @@
+import { initNavbar } from './navbar/navbar';
+import { initHero } from './hero/hero';
+import { initTabs } from './tabs/tabs';
+import { initCountdown } from './countdown/countdown';
+import { initRoadmap } from './roadmap/roadmap';
+import { initLike } from './like/like';
+import { initBackToTop } from './backtotop/backtotop';
+
+window.initNavbar = initNavbar;
+window.initHero = initHero;
+window.initTabs = initTabs;
+window.initCountdown = initCountdown;
+window.initRoadmap = initRoadmap;
+window.initLike = initLike;
+window.initBackToTop = initBackToTop;

src/js/main.js

@@ -1,41 +1,38 @@
 "use strict";
 
-import './store/store';
-import 'alpinejs';
-import { env } from './libs/utils/constants';
-import { initPageLoader } from './libs/components/pageloader';
-import { switchDemoImages, insertBgImages } from './libs/utils/utils';
-import { initNavbar } from './libs/components/navbar';
-import { initHero } from './libs/components/hero';
-import { initTabs } from './libs/components/tabs';
-import { initCountdown } from './libs/components/countdown';
-import { initRoadmap } from './libs/components/roadmap';
-import { initLike } from './libs/components/like';
-import { initBackToTop } from './libs/components/backtotop';
-const feather = require('feather-icons');
-
-window.initNavbar = initNavbar;
-window.initHero = initHero;
-window.initTabs = initTabs;
-window.initCountdown = initCountdown;
-window.initRoadmap = initRoadmap;
-window.initLike = initLike;
-window.initBackToTop = initBackToTop;
+const feather = require("feather-icons");
+
+//Alpine JS and plugins import
+import Alpine from "alpinejs";
+import intersect from "@alpinejs/intersect";
+import Fern from "@ryangjchandler/fern";
+
+window.Alpine = Alpine;
+//Init intersect plugin
+Alpine.plugin(intersect);
+//Init Fern plugin
+Alpine.plugin(Fern);
+//Init Fern persisted store
+Alpine.persistedStore("app", {
+  isSiderbarOpen: false,
+});
+//Start Alpine JS
+Alpine.start();
+
+import { initPageLoader } from './libs/components/pageloader/pageloader';
+import './libs/components'
 
 const showPageloader = initPageLoader();
 
 document.onreadystatechange = function () {
-    if (document.readyState == 'complete') {
+  if (document.readyState == "complete") {
+    //Switch demo images
+    const changeImages = switchDemoImages(env);
 
-        //Switch demo images
-        const changeImages = switchDemoImages(env);
-
-        //Switch backgrounds
-        const changeBackgrounds = insertBgImages();
-
-        //Feather Icons
-        const featherIcons = feather.replace();
-
-    }
-}
+    //Switch backgrounds
+    const changeBackgrounds = insertBgImages();
 
+    //Feather Icons
+    const featherIcons = feather.replace();
+  }
+};

src/sass/bulma.sass

@@ -1,5 +1,5 @@
 @charset "utf-8"
-/*! bulma.io v0.9.1 | MIT License | github.com/jgthms/bulma */
+/*! bulma.io v0.9.3 | MIT License | github.com/jgthms/bulma */
 @import "sass/utilities/_all"
 @import "sass/base/_all"
 @import "sass/elements/_all"
@@ -8,4 +8,4 @@
 @import "sass/grid/_all"
 @import "sass/helpers/_all"
 @import "sass/layout/_all"
-@import "sass/extensions/_all"
+@import "sass/extensions/_all"

src/sass/sass/base/_all.sass

@@ -1,5 +1,6 @@
 /* Bulma Base */
 @charset "utf-8"
 
-@import "minireset.sass"
-@import "generic.sass"
+@import "minireset"
+@import "generic"
+@import "animations"

src/sass/sass/base/animations.sass

@@ -0,0 +1,5 @@
+@keyframes spinAround
+  from
+    transform: rotate(0deg)
+  to
+    transform: rotate(359deg)

src/sass/sass/base/generic.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $body-background-color: $scheme-main !default
 $body-size: 16px !default
 $body-min-width: 300px !default

src/sass/sass/components/_all.sass

@@ -1,15 +1,15 @@
 /* Bulma Components */
 @charset "utf-8"
 
-@import "breadcrumb.sass"
-@import "card.sass"
-@import "dropdown.sass"
-@import "level.sass"
-@import "media.sass"
-@import "menu.sass"
-@import "message.sass"
-@import "modal.sass"
-@import "navbar.sass"
-@import "pagination.sass"
-@import "panel.sass"
-@import "tabs.sass"
+@import "breadcrumb"
+@import "card"
+@import "dropdown"
+@import "level"
+@import "media"
+@import "menu"
+@import "message"
+@import "modal"
+@import "navbar"
+@import "pagination"
+@import "panel"
+@import "tabs"

src/sass/sass/components/breadcrumb.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $breadcrumb-item-color: $link !default
 $breadcrumb-item-hover-color: $link-hover !default
 $breadcrumb-item-active-color: $text-strong !default

src/sass/sass/components/card.sass

@@ -1,8 +1,9 @@
+@import "../utilities/mixins"
+
 $card-color: $text !default
 $card-background-color: $scheme-main !default
-$card-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
+$card-shadow: $shadow !default
 $card-radius: 0.25rem !default
-$card-overflow: hidden !default
 
 $card-header-background-color: transparent !default
 $card-header-color: $text-strong !default
@@ -25,10 +26,18 @@ $card-media-margin: $block-spacing !default
   box-shadow: $card-shadow
   color: $card-color
   max-width: 100%
-  overflow: $card-overflow
   position: relative
 
+%card-item
+  &:first-child
+    border-top-left-radius: $card-radius
+    border-top-right-radius: $card-radius
+  &:last-child
+    border-bottom-left-radius: $card-radius
+    border-bottom-right-radius: $card-radius
+
 .card-header
+  @extend %card-item
   background-color: $card-header-background-color
   align-items: stretch
   box-shadow: $card-header-shadow
@@ -45,6 +54,7 @@ $card-media-margin: $block-spacing !default
     justify-content: center
 
 .card-header-icon
+  +reset
   align-items: center
   cursor: pointer
   display: flex
@@ -54,12 +64,22 @@ $card-media-margin: $block-spacing !default
 .card-image
   display: block
   position: relative
+  &:first-child
+    img
+      border-top-left-radius: $card-radius
+      border-top-right-radius: $card-radius
+  &:last-child
+    img
+      border-bottom-left-radius: $card-radius
+      border-bottom-right-radius: $card-radius
 
 .card-content
+  @extend %card-item
   background-color: $card-content-background-color
   padding: $card-content-padding
 
 .card-footer
+  @extend %card-item
   background-color: $card-footer-background-color
   border-top: $card-footer-border-top
   align-items: stretch

src/sass/sass/components/dropdown.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $dropdown-menu-min-width: 12rem !default
 
 $dropdown-content-background-color: $scheme-main !default
@@ -6,7 +8,7 @@ $dropdown-content-offset: 4px !default
 $dropdown-content-padding-bottom: 0.5rem !default
 $dropdown-content-padding-top: 0.5rem !default
 $dropdown-content-radius: $radius !default
-$dropdown-content-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
+$dropdown-content-shadow: $shadow !default
 $dropdown-content-z: 20 !default
 
 $dropdown-item-color: $text !default

src/sass/sass/components/level.sass

@@ -1,5 +1,6 @@
-@use "sass:math"
-$level-item-spacing: math.div($block-spacing, 2) !default
+@import "../utilities/mixins"
+
+$level-item-spacing: ($block-spacing * 0.5) !default
 
 .level
   @extend %block

src/sass/sass/components/media.sass

@@ -1,26 +1,33 @@
+@import "../utilities/mixins"
+
 $media-border-color: bulmaRgba($border, 0.5) !default
-$media-spacing: 1rem
-$media-spacing-large: 1.5rem
+$media-border-size: 1px !default
+$media-spacing: 1rem !default
+$media-spacing-large: 1.5rem !default
+$media-content-spacing: 0.75rem !default
+$media-level-1-spacing: 0.75rem !default
+$media-level-1-content-spacing: 0.5rem !default
+$media-level-2-spacing: 0.5rem !default
 
 .media
   align-items: flex-start
   display: flex
   text-align: inherit
   .content:not(:last-child)
-    margin-bottom: 0.75rem
+    margin-bottom: $media-content-spacing
   .media
-    border-top: 1px solid $media-border-color
+    border-top: $media-border-size solid $media-border-color
     display: flex
-    padding-top: 0.75rem
+    padding-top: $media-level-1-spacing
     .content:not(:last-child),
     .control:not(:last-child)
-      margin-bottom: 0.5rem
+      margin-bottom: $media-level-1-content-spacing
     .media
-      padding-top: 0.5rem
+      padding-top: $media-level-2-spacing
       & + .media
-        margin-top: 0.5rem
+        margin-top: $media-level-2-spacing
   & + .media
-    border-top: 1px solid $media-border-color
+    border-top: $media-border-size solid $media-border-color
     margin-top: $media-spacing
     padding-top: $media-spacing
   // Sizes

src/sass/sass/components/menu.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $menu-item-color: $text !default
 $menu-item-radius: $radius-small !default
 $menu-item-hover-color: $text-strong !default

src/sass/sass/components/message.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $message-background-color: $background !default
 $message-radius: $radius !default
 

src/sass/sass/components/modal.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $modal-z: 40 !default
 
 $modal-background-background-color: bulmaRgba($scheme-invert, 0.86) !default

src/sass/sass/components/navbar.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $navbar-background-color: $scheme-main !default
 $navbar-box-shadow-size: 0 2px 0 0 !default
 $navbar-box-shadow-color: $background !default
@@ -151,6 +153,7 @@ body
   overflow-y: hidden
 
 .navbar-burger
+  @extend %reset
   color: $navbar-burger-color
   +hamburger($navbar-height)
   +ltr-property("margin", auto, false)