add comments to config

src/component/Bookmark/index.js

@@ -21,7 +21,7 @@ export const Bookmark = function() {
 
   this.populateGroup = () => {
 
-    config.bookmark.group.set.forEach(groupItem => {
+    config.bookmark.group.forEach(groupItem => {
 
       const bookmarkGroup = new BookmarkGroup(groupItem, this.node.allGroup);
 
@@ -47,7 +47,7 @@ export const Bookmark = function() {
 
     this.node.group.addEventListener('mouseleave', () => {
 
-      config.bookmark.group.set.forEach(bookmarkGroup => {
+      config.bookmark.group.forEach(bookmarkGroup => {
 
         bookmarkGroup.active = false;
 

src/component/BookmarkGroup/index.js

@@ -34,7 +34,7 @@ export const BookmarkGroup = function(bookmarkGroupData, allBookmarkGroup) {
 
   this.toggleActiveState = () => {
 
-    config.bookmark.group.set.forEach(bookmarkGroup => {
+    config.bookmark.group.forEach(bookmarkGroup => {
 
       bookmarkGroup.active = false;
 
@@ -42,7 +42,6 @@ export const BookmarkGroup = function(bookmarkGroupData, allBookmarkGroup) {
 
     bookmarkGroupData.active = true;
 
-
   }
 
   this.renderActive = () => {
@@ -131,4 +130,4 @@ export const BookmarkGroup = function(bookmarkGroupData, allBookmarkGroup) {
 
   this.group = () => this.node.groupItem;
 
-}
+}

src/config.js

@@ -1,14 +1,33 @@
 export const config = {
   bookmark: {
-    newTab: true,
-    panel: { size: 35 },
-    group: {
-      set: [{
-        active: false,
-        name: 'Productivity',
-        description: 'Daily apps',
-        color: { primary: { hsl: [0, 0, 100] }, secondary: { hsl: [200, 60, 70] } },
+    newTab: true, // open the bookmarks in a new tab: true|false
+    panel: {
+      size: 35 // width of the left panel
+    },
+    group: [ // each object in this array is a bookmark group
+      // add as many objects { ... } as needed to bookmark group array
+      {
+        name: 'Productivity', // group name
+        description: 'Daily apps', // group description
+        color: {
+          primary: { hsl: [0, 0, 100] }, // colour for group name and icons
+          secondary: { hsl: [200, 60, 70] } // colour for group description and "open all" button
+        },
         list: [
+          // list of bookmarks in this group
+          // add as many links as needed to he list array
+          // the first key can be any of the following types: "icon"|"letter"|"image"
+
+          // icon eg:
+          // use a Font Awesome class name found on https://fontawesome.com/icons
+          // { icon: 'fa-solid fa-envelope', url: 'https://website.com/' },
+
+          // letter eg:
+          // { letter: 'ABC', url: 'https://website.com/' },
+
+          // image eg:
+          // { image: 'https://example.com/image.jpg', url: 'https://website.com/' },
+
           { icon: 'fa-solid fa-envelope', url: 'https://mail.google.com/' },
           { icon: 'fa-brands fa-slack', url: 'https://slack.com/signin/' },
           { icon: 'fa-brands fa-github', url: 'https://github.com/' },
@@ -19,8 +38,8 @@ export const config = {
           { icon: 'fa-brands fa-google-drive', url: 'https://drive.google.com/' },
           { icon: 'fa-solid fa-calendar-day', url: 'https://calendar.google.com/calendar/' },
         ]
-      }, {
-        active: false,
+      },
+      {
         name: 'Cool stuff',
         description: 'Downtime and media',
         color: { primary: { hsl: [0, 0, 100] }, secondary: { hsl: [250, 60, 70] } },
@@ -32,8 +51,8 @@ export const config = {
           { icon: 'fa-solid fa-dice-d20', url: 'https://zombiefox.github.io/diceRoller/' },
           { icon: 'fa-brands fa-dribbble', url: 'https://dribbble.com/' },
         ]
-      }, {
-        active: false,
+      },
+      {
         name: 'Entertainment',
         description: 'Films and videos',
         color: { primary: { hsl: [0, 0, 100] }, secondary: { hsl: [0, 60, 70] } },
@@ -43,8 +62,8 @@ export const config = {
           { icon: 'fa-solid fa-clapperboard', url: 'https://netflix.com/' },
           { icon: 'fa-brands fa-twitch', url: 'https://www.twitch.tv/' },
         ]
-      }, {
-        active: false,
+      },
+      {
         name: 'Ref',
         description: 'Docs, code + specs',
         color: { primary: { hsl: [0, 0, 100] }, secondary: { hsl: [40, 60, 70] } },
@@ -55,21 +74,48 @@ export const config = {
           { icon: 'fa-brands fa-bootstrap', url: 'https://getbootstrap.com/docs/5.2/getting-started/introduction/' },
           { icon: 'fa-brands fa-npm', url: 'https://www.npmjs.com/' },
         ]
-      }]
-    }
+      }
+    ]
   },
   theme: {
-    scale: 38,
-    accent: { hsl: [204, 100, 72] },
-    text: { hsl: [0, 0, 0] },
-    font: 'Ubuntu',
-    transition: { speed: { xfast: 10, fast: 20, medium: 30, slow: 40, xslow: 50 } },
-    easing: { bounce: [0.8, 0.5, 0.2, 2] },
-    bookmark: { background: { blur: 14, color: { hsla: [200, 180, 25, 0.2] } } }
+    scale: 38, // global scale
+    accent: { hsl: [204, 100, 72] }, // accent colour, not used for much yet, colour using hsl: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl
+    text: { hsl: [0, 0, 0] }, // text colour, not used for much yet, colour using hsl: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl
+    font: 'Ubuntu', // use the full name of any font found on Google Fonts: https://fonts.google.com/
+    transition: { speed: { xfast: 10, fast: 20, medium: 30, slow: 40, xslow: 50 } }, // the speed of the different transitions
+    easing: { bounce: [0.8, 0.5, 0.2, 2] }, // the bounce transition easing bezier curve
+    bookmark: {
+      background: {
+        blur: 14, // bookmark left panel blur amount
+        color: { hsla: [200, 180, 25, 0.2] } // bookmark left panel colour using hsla: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsla
+      }
+    }
   },
   background: {
-    color: { hsl: [220, 30, 50] },
-    image: { url: 'https://i.redd.it/niecy4jmlmh81.png', opacity: 1, grayscale: 0.1, blur: 0 },
-    gradient: { degree: 90, color: [{ hsla: [220, 80, 18, 0.6], position: 30 }, { hsla: [240, 85, 25, 0.4], position: 40 }, { hsla: [280, 40, 25, 0.1], position: 100 }] }
+    // the background is made of three layers
+    // colour at the bottom
+    // an image above the colour layer
+    // a gradient above the image layer
+    color: {
+      hsl: [220, 30, 50] //background colour using hsl: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl
+    },
+    image: {
+      url: 'https://i.redd.it/niecy4jmlmh81.png', // background image url
+      opacity: 1, // opacity of background image, range from 0.0 to 1.0
+      grayscale: 0.1, // grayscale of background image, range from 0.0 to 1.0
+      blur: 0 // blur of background image
+    },
+    gradient: {
+      degree: 90, // gradient angle
+      color: [
+        // the colour array lists the different colour stops of the gradient
+        // each colour is hsla: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsla
+        // the position is the location of the colour stop, range from 1 to 100
+        // add as many colour objects { ... } as needed
+        { hsla: [220, 80, 18, 0.6], position: 30 },
+        { hsla: [240, 85, 25, 0.4], position: 40 },
+        { hsla: [280, 40, 25, 0.1], position: 100 }
+      ]
+    }
   }
-};
+};