🌱 Add layout.js to start Layouts feature

app.css

@@ -205,7 +205,7 @@ body {
   color: var(--fg);
 }
 
-.buttonsBlock {
+.linksBlockLeft {
   grid-row: 3 / span 2;
   grid-column: 1 / span 2;
   display: grid;
@@ -259,6 +259,16 @@ body {
   stroke: var(--sfg);
 }
 
+.linksBlockRight {
+  grid-row: 3 / span 2;
+  grid-column: 3 / span 2;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  grid-gap: 30px;
+  padding: 0.3rem;
+}
+
 .list {
   display: flex;
   align-items: center;
@@ -266,12 +276,12 @@ body {
 }
 
 .list__1 {
-  grid-column: 3;
+  grid-column: 1;
-  grid-row: 3 / span 2;
+  grid-row: 1 / span 2;
 }
 .list__2 {
-  grid-column: 4;
+  grid-column: 2;
-  grid-row: 3 / span 2;
+  grid-row: 1 / span 2;
 }
 .listIcon {
   margin-top: 3vh;

assets/js/buttons.js

@@ -0,0 +1,30 @@
+// ┌─┐┌─┐┬─┐┌┬┐┌─┐
+// │  ├─┤├┬┘ ││└─┐
+// └─┘┴ ┴┴└──┴┘└─┘
+// Function to print Button Cards.
+
+const generateButtons = () => {
+  console.log("Yeah, Buttons are working");
+}
+
+const printLinksBlockLeft = () => {
+  
+  for (const button of CONFIG.buttons) {
+    let item = `
+        <a
+          href="${button.link}"
+          target="${CONFIG.openInNewTab ? '_blank' : ''}"
+          class="card button button__${button.id}"
+        >
+          <i class="buttonIcon" icon-name="${button.icon}"></i>
+        </a>
+    `;
+
+    const position = 'beforeend';
+
+    linksBlockLeft.insertAdjacentHTML(position, item);
+  }
+};
+
+generateButtons();
+printLinksBlockLeft();

assets/js/cards.js

@@ -1,24 +0,0 @@
-// ┌─┐┌─┐┬─┐┌┬┐┌─┐
-// │  ├─┤├┬┘ ││└─┐
-// └─┘┴ ┴┴└──┴┘└─┘
-// Function to print Button Cards.
-
-const printCards = () => {
-  for (const card of CONFIG.cards) {
-    let item = `
-        <a
-          href="${card.link}"
-          target="${CONFIG.openInNewTab ? '_blank' : ''}"
-          class="card button button__${card.id}"
-        >
-          <i class="buttonIcon" icon-name="${card.icon}"></i>
-        </a>
-    `;
-
-    const position = 'beforeend';
-
-    buttonsContainer.insertAdjacentHTML(position, item);
-  }
-};
-
-printCards();

assets/js/layout.js

@@ -0,0 +1,56 @@
+// ┬  ┌─┐┬ ┬┌─┐┬ ┬┌┬┐
+// │  ├─┤└┬┘│ ││ │ │
+// ┴─┘┴ ┴ ┴ └─┘└─┘ ┴
+// Generate Layout.
+
+const generateLayout = () => {
+  let bentoLayout = `
+        <div class="linksBlockLeft" id="linksBlockLeft">
+            <div class="buttonsContainer" id="buttons_1"></div>
+        </div>
+
+        <div class="linksBlockRight" id="linksBlockRight">
+            <div class="card list list__1" id="list_1"></div>
+            <div class="card list list__2" id="list_2"></div>
+        </div>
+    `;
+  let listLayout = `
+        <div class="linksBlockLeft" id="linksBlockLeft">
+            <div class="card list list__1" id="list_1"></div>
+            <div class="card list list__2" id="list_2"></div>
+        </div>
+
+        <div class="linksBlockRight" id="linksBlockRight">
+            <div class="card list list__3" id="list_3"></div>
+            <div class="card list list__4" id="list_4"></div>
+        </div>
+    `;
+  let buttonsLayout = `
+        <div class="linksBlockLeft" id="linksBlockLeft">
+            <div class="buttonsContainer" id="buttons_1"></div>
+        </div>
+
+        <div class="linksBlockRight" id="linksBlockRight">
+        <div class="buttonsContainer" id="buttons_2"></div>
+        </div>
+    `;
+
+  const position = 'beforeend';
+  switch (CONFIG.bentoLayout) {
+    case 'bento':
+      linksBlock.insertAdjacentHTML(position, bentoLayout);
+      break;
+    case 'lists':
+      linksBlock.insertAdjacentHTML(position, listLayout);
+      break;
+    case 'buttons':
+      linksBlock.insertAdjacentHTML(position, buttonsLayout);
+      break;
+    default:
+      break;
+  }
+
+  console.log('Layout Generated');
+};
+
+generateLayout();

assets/js/lists.js

@@ -3,6 +3,10 @@
 // ┴─┘┴└─┘ ┴ └─┘
 // Functions for printing both lists
 
+const generateLists = () => {
+  console.log("Yeah, I'm working");
+}
+
 const printFirstList = () => {
   let icon = `<i class="listIcon" icon-name="${CONFIG.firstListIcon}"></i>`;
   const position = 'beforeend';
@@ -39,5 +43,6 @@ const printSecondList = () => {
   }
 };
 
+generateLists();
 printFirstList();
 printSecondList();

assets/js/weather.js

@@ -46,9 +46,6 @@ function setPosition(position) {
 // Get the Weather data
 function getWeather(latitude, longitude) {
   let api = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&lang=${CONFIG.language}&appid=${key}`;
-
-  console.log(api);
-
   fetch(api)
     .then(function (response) {
       let data = response.json();

config.js

@@ -16,6 +16,9 @@ const CONFIG = {
   openInNewTab: true,
   twelveHourFormat: false,
 
+  // Layout
+  bentoLayout: 'bento', // 'bento', 'cards', 'lists'
+
   // Greetings
   greetingMorning: 'Good morning!',
   greetingAfternoon: 'Good afternoon,',
@@ -23,7 +26,7 @@ const CONFIG = {
   greetingNight: 'Go to Sleep!',
 
   // Weather
-  weatherKey: 'InsertYourAPIKeyHere123456', // Write here your API Key
+  weatherKey: '15fe26a8e22e4783054e3273824c5e7b', // Write here your API Key
   weatherIcons: 'OneDark', // 'Onedark', 'Nord', 'Dark', 'White'
   weatherUnit: 'C', // 'F', 'C'
   language: 'en', // More languages in https://openweathermap.org/current#multi
@@ -43,12 +46,11 @@ const CONFIG = {
   hourDarkThemeActive: '18:30',
   hourDarkThemeInactive: '07:00',
 
-  // ┌─┐┌─┐┬─┐┌┬┐┌─┐
+  // ┌┐ ┬ ┬┌┬┐┌┬┐┌─┐┌┐┌┌─┐
-  // │  ├─┤├┬┘ ││└─┐
+  // ├┴┐│ │ │  │ │ ││││└─┐
-  // └─┘┴ ┴┴└──┴┘└─┘
+  // └─┘└─┘ ┴  ┴ └─┘┘└┘└─┘
 
-  // Links
+  buttons: [
-  cards: [
     {
       id: '1',
       name: 'Github',
@@ -85,6 +87,43 @@ const CONFIG = {
       icon: 'youtube',
       link: 'https://odysee.com/',
     },
+    {
+      id: '7',
+      name: 'Odysee',
+      icon: 'youtube',
+      link: 'https://odysee.com/',
+    },
+    {
+      id: '8',
+      name: 'Odysee',
+      icon: 'youtube',
+      link: 'https://odysee.com/',
+    },
+    {
+      id: '9',
+      name: 'Odysee',
+      icon: 'youtube',
+      link: 'https://odysee.com/',
+    },
+    {
+      id: '10',
+      name: 'Odysee',
+      icon: 'youtube',
+      link: 'https://odysee.com/',
+    },
+    {
+      id: '11',
+      name: 'Odysee',
+      icon: 'youtube',
+      link: 'https://odysee.com/',
+    },
+    {
+      id: '12',
+      name: 'Odysee',
+      icon: 'youtube',
+      link: 'https://odysee.com/',
+    },
+
   ],
 
   // ┬  ┬┌─┐┌┬┐┌─┐

index.html

@@ -54,35 +54,31 @@
         </div>
       </div>
 
-      <!-- 
+      <div class="linksBlock" id="linksBlock">
-        ┌┐ ┬ ┬┌┬┐┌┬┐┌─┐┌┐┌┌─┐
-        ├┴┐│ │ │  │ │ ││││└─┐
-        └─┘└─┘ ┴  ┴ └─┘┘└┘└─┘ 
-        -->
         
-      <div class="buttonsBlock" id="buttonsContainer"></div>
+      </div>
 
-      <!-- 
+      <!-- <div class="linksBlockLeft" id="linksBlockLeft">
-        ┬  ┬┌─┐┌┬┐┌─┐
+        <div class="buttonsContainer"></div>
-        │  │└─┐ │ └─┐
+      </div>
-        ┴─┘┴└─┘ ┴ └─┘
-        -->
 
-      <div class="card list list__1" id="list_1"></div>
+      <div class="linksBlockRight" id="linksBlockRight">
-
+        <div class="card list list__1" id="list_1"></div>
-      <div class="card list list__2" id="list_2"></div>
+        <div class="card list list__2" id="list_2"></div>
+      </div> -->
     </div>
 
     <!-- Config  -->
     <script src="config.js"></script>
 
     <!-- Scripts  -->
+    <script src="assets/js/layout.js"></script>
     <script src="assets/js/time.js"></script>
     <script src="assets/js/theme.js"></script>
     <script src="assets/js/greeting.js"></script>
     <script src="assets/js/weather.js"></script>
 
-    <script src="assets/js/cards.js"></script>
+    <script src="assets/js/buttons.js"></script>
     <script src="assets/js/lists.js"></script>
 
     <!-- Icons -->