added archive data to config json, added archive page, further refined page styles

pug.config.js

@@ -1,7 +1,7 @@
 module.exports = {
 	locals: {
 		title: 'This is Fipamo',
-		welcome_message: 'Hey there',
+		welcome_message: 'Hey there. So this is a long ass title to see how it breaks',
 		keywords:
 			'creative technoglogist, graphic design, web development, designer developer, social thought, political discussion, music producer, creative culture, black creative, black geek',
 		description:
@@ -9,9 +9,8 @@ module.exports = {
 		base_path: '/src/front/',
 		default_bg: '/assets/images/global/default-bg.jpg',
 		default_avi: '/assets/images/global/default-avi.png',
-		content_index:
-			"The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.",
-		content_page: 'This is some page content... for your broke ass',
+		content:
+			"The path of the <a href='#'>righteous</a> man is beset on ALL sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.",
 		bucket: [{ item: 'one' }, { item: 'two' }, { item: 'three' }],
 		menu: [
 			{
@@ -64,6 +63,123 @@ module.exports = {
 				feature: 'content/blog-images/2018/11/chi-raq.jpg',
 				created: '2018 Nov 11th'
 			}
+		],
+		archives: [
+			{
+				year: '2020',
+				year_data: [
+					{
+						month: '06',
+						full_month: 'June',
+						count: 1,
+						pages: [
+							{
+								metadata: {
+									id: 1,
+									uuid: '29338b67-68d9-4b05-99ac-8d031d27e95c',
+									title: 'Swaggy Disgust 1',
+									slug: 'swaggy-disgust'
+								},
+								content: 'My man looks so fed up right now'
+							},
+							{
+								metadata: {
+									id: 2,
+									uuid: '29338b67-68d9-4b05-99ac-8d031d27e95c',
+									title: 'Swaggy Disgust 2',
+									slug: 'swaggy-disgust'
+								},
+								content: 'My man looks so fed up right now'
+							}
+						]
+					},
+					{
+						month: '05',
+						full_month: 'May',
+						count: 1,
+						pages: [
+							{
+								metadata: {
+									id: 1,
+									uuid: '29338b67-68d9-4b05-99ac-8d031d27e95c',
+									title: 'Swaggy Disgust 3',
+									slug: 'swaggy-disgust'
+								},
+								content: 'My man looks so fed up right now'
+							},
+							{
+								metadata: {
+									id: 1,
+									uuid: '29338b67-68d9-4b05-99ac-8d031d27e95c',
+									title: 'Swaggy Disgust 4',
+									slug: 'swaggy-disgust'
+								},
+								content: 'My man looks so fed up right now'
+							}
+						]
+					}
+				]
+			},
+			{
+				year: '2019',
+				year_data: [
+					{
+						month: '04',
+						full_month: 'April',
+						count: 1,
+						pages: [
+							{
+								metadata: {
+									id: 1,
+									uuid: '29338b67-68d9-4b05-99ac-8d031d27e95c',
+									title: 'Swaggy Disgust 5',
+									slug: 'swaggy-disgust'
+								},
+								content: 'My man looks so fed up right now'
+							},
+							{
+								metadata: {
+									id: 1,
+									uuid: '29338b67-68d9-4b05-99ac-8d031d27e95c',
+									title: 'Swaggy Disgust 6',
+									slug: 'swaggy-disgust'
+								},
+								content: 'My man looks so fed up right now'
+							}
+						]
+					}
+				]
+			},
+			{
+				year: '2018',
+				year_data: [
+					{
+						month: '06',
+						full_month: 'June',
+						count: 1,
+						pages: [
+							{
+								metadata: {
+									id: 1,
+									uuid: '29338b67-68d9-4b05-99ac-8d031d27e95c',
+									title: 'Swaggy Disgust 7',
+									slug: 'swaggy-disgust'
+								},
+								content: 'My man looks so fed up right now'
+							},
+							{
+								metadata: {
+									id: 1,
+									uuid: '29338b67-68d9-4b05-99ac-8d031d27e95c',
+									title: 'Swaggy Disgust 8',
+									slug: 'swaggy-disgust'
+								},
+								content: 'My man looks so fed up right now'
+							}
+						]
+					}
+				]
+			}
 		]
 	}
 };

src/front/archive.pug

@@ -0,0 +1,21 @@
+extends frame
+
+block main-content
+  section
+    article
+        - var index = 0;			
+        - for ( index; index < archives.length; index++)
+            .archive-item
+                h1= archives[index].year
+                - var i = 0;
+                - for (i; i < archives[index].year_data.length; i++)
+                    - var data = archives[index].year_data[i];
+                        p= data.full_month
+                        - var x = 0;
+                        - for (x; x < data.pages.length; x++)
+                            -var page = data.pages[x];
+                            a(href='/'+archives[index].year+"/"+data.month+"/"+page.metadata.slug)= page.metadata.title
+                            br
+        
+  footer
+     | © 2020 Fipamo by PV 

src/front/assets/css/base.css

@@ -274,15 +274,19 @@ header span {
   transform: translate(-50%, -50%);
   font-weight: 100;
   padding: 15px 20px 10px 20px;
-  font-size: 14em;
+  font-size: 3em;
   line-height: 1;
-  color: #7ed07e;
+  color: #fc6399;
 }
 header .menu {
+  padding: 20px;
   width: 100%;
   text-align: left;
   color: #d5cfba;
 }
+header .menu #logo {
+  width: 30px;
+}
 header,
 header:before {
   background: 50% 50%/cover;
@@ -326,25 +330,25 @@ header::before {
   font: 600 2em/1.5 Helvetica, Arial, sans-serif;
   color: #fc6399;
 }
-.container article .index {
+.container article .index,
+.container article .page {
   margin: 30px;
 }
-.container article .index label {
+.container article .index label,
+.container article .page label {
   background: #32302f;
   color: #d5cfba;
   font-size: 1.5em;
   line-height: 1.3;
 }
-.container article .index a {
-  font-size: 1.5em;
-  line-height: 1.3;
-  margin-bottom: 10px;
-  margin-right: 10px;
-  font-weight: 400;
-}
 .container section {
   color: #d5cfba;
 }
+.container section .archive-item {
+  display: inline-block;
+  width: 30%;
+  vertical-align: top;
+}
 .container footer {
   background: #7ed07e;
   padding: 10px;

src/front/assets/scripts/start.min.js

@@ -198,7 +198,7 @@ var parent = module.bundle.parent;
 if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
   var hostname = "" || location.hostname;
   var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
-  var ws = new WebSocket(protocol + '://' + hostname + ':' + "64438" + '/');
+  var ws = new WebSocket(protocol + '://' + hostname + ':' + "53487" + '/');
 
   ws.onmessage = function (event) {
     checkedAssets = {};

src/front/frame.pug

@@ -17,9 +17,14 @@ html(xmlns='http://www.w3.org/1999/xhtml', lang='en', xml:lang="en")
         header::before { background: url(!{default_bg}); background-size: cover; }
       header
         .menu
-          | LINKZ
-          br
-          | LINKZ
+          a(href='/') 
+            img#logo(src='/assets/images/global/the-logo.svg')
+            br
+          if menu
+            - var index = 0;			
+            - for ( index; index < menu.length; index++)
+              a.menu-link(href="/"+menu[index].path+"/"+menu[index].slug)= menu[index].slug
+              br
         span= welcome_message
       script(src='/assets/scripts/start.min.js' type="text/javascript")
               

src/front/index.pug

@@ -3,14 +3,13 @@ extends frame
 block main-content
   article
     .index
-      span= title
-      p !{content_index}
+      p !{content}
       span Recent
       br
       - var index = 0;			
       - for ( index; index < recent_posts.length; index++)
         a(href="/"+recent_posts[index].slug)= recent_posts[index].title
-        label= recent_posts[index].created
+        label= " "+recent_posts[index].created
         br
         br
       a(href='/archives') Post Archive

src/front/page.pug

@@ -2,8 +2,9 @@ extends frame
 
 block main-content
   section
-    | TITLE
-    div !{content_page}
-      span YAAAAAAAHS KHAALEEEEESI
+      article
+        .page
+          p !{content}
+
   footer
      | © 2020 Fipamo by PV 

src/styles/_page.styl

@@ -1,5 +1,4 @@
-#blog-content
-    
+#blog-content   
     #blog-display
         #blog-list
             .blog-entry

src/styles/_structure.styl

@@ -47,13 +47,16 @@ header
         transform translate(-50%, -50%)
         font-weight: 100
         padding 15px 20px 10px 20px
-        font-size 14em
+        font-size 3em
         line-height 1
-        color $highlight
+        color $secondary
     .menu
+      padding 20px
       width: 100%
       text-align: left
       color $white
+      #logo
+        width 30px
 header,header:before
     background 50% 50% / cover
 
@@ -93,22 +96,21 @@ header::before
       margin 0 auto
       span
         custom-header(600, 2em, 1.5, $secondary)
-      .index
+      .index, .page
         margin 30px
         label 
           background $black
           color $white
           font-size 1.5em
           line-height 1.3
-        a
-          font-size 1.5em
-          line-height 1.3
-          margin-bottom 10px
-          margin-right 10px
-          font-weight 400
+        
           
     section 
       color $white
+      .archive-item
+        display inline-block
+        width 30%
+        vertical-align top
         
           
     footer