Replace blog with snippets

src/index.pug

@@ -1,19 +1,18 @@
 extends templates/homepage.pug
 
 block main
-  section.blog-recent
+  section.snippet-recent
     .header
-      h3 Latest Articles
+      h3 Latest Snippets
-      .all-articles
+      .all-snippets
-        a(href="/blog") All articles
+        a(href="/snippets") All Snippets
     .list
-      ul.blog-items
+      div(insert-data='insertRecentSnippets(this, 5)')
-        div(insert-data='insertRecentSnippets(this, 5)')
 
 block aside
-  section.blog-popular
+  section.snippet-common-tags
-    h3 Popular Content
+    h3 Common tags
-    ul.popular-items
+    ul.common-tags
       li
         include partials/arrow.pug
-        a.link(href="javascript:void(0)") New Portfolio Layout
+        a.link(href="javascript:void(0)") Some tag

src/partials/recent-snippet.pug

@@ -1,8 +1,7 @@
-.list
+ul.snippet-items
-  ul.blog-items
+  each snippet in snippets
-    each snippet in snippets
+    li.snippet-item
-      li.blog-item
+      img.snippet-image(src="//via.placeholder.com/128", alt="Snippet Topic")
-        img.article-image(src="//via.placeholder.com/128", alt="Article Topic")
+      .snippet-text
-        .article-text
+        h4.snippet-title=snippet.title
-          h4.article-title=snippet.title
+        span.snippet-date(title=snippet.timeAddedPretty)=snippet.timeAddedRelative
-          span.article-date(title=snippet.timeAddedPretty)=snippet.timeAddedRelative

src/sass/_blogedit.scss

@@ -1,74 +0,0 @@
-.blog-edit {
-    .article-form {
-        input,
-        textarea {
-            padding: .1rem;
-            width: calc(100% - .2rem);
-            margin: 0;
-        }
-
-        .controls {
-            width: 100%;
-        }
-
-        input {
-            border-radius: 5px;
-        }
-
-        .md-editor {
-            margin-top: .5rem;
-
-            :first-child {
-                border-top-left-radius: 5px;
-                border-top-right-radius: 5px;
-            }
-
-            :last-child {
-                border-bottom-left-radius: 5px;
-                border-bottom-right-radius: 5px;
-            }
-
-            &> * {
-                border-width: 3px;
-            }
-
-            .controls {
-                background-color: $background-lighter;
-                border-color: $background-darker;
-                border-bottom-width: 0;
-                border-style: solid;
-
-                ul {
-                    display: flex;
-                    list-style: none;
-                    padding: .25rem;
-                    margin: 0;
-
-                    li {
-                        a {
-                            display: inline-block;
-                            width: 32px;
-                            height: 32px;
-
-                            i {
-                                width: 100%;
-                                max-height: 100%;
-                                font-size: 24px;
-                                text-align: center;
-                                vertical-align: baseline;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-
-        input,
-        textarea,
-        button {
-            background-color: $background-lighter;
-            border-color: $background-darker;
-            color: $text-color;
-        }
-    }
-}

src/sass/_snippet.scss

@@ -1,11 +1,11 @@
-$article-image-size: 24px;
+$snippet-image-size: 24px;
 
-section.blog-recent {
+section.snippet-recent {
   .header {
     display: flex;
     justify-content: space-between;
 
-    .all-articles {
+    .all-snippets {
       display: flex;
       flex-direction: column;
       justify-content: center;
@@ -21,14 +21,14 @@ section.blog-recent {
   }
 }
 
-section.blog-recent,
+section.snippet-recent,
-section.blog {
+section.snippet {
   .list {
-    .blog-items {
+    .snippet-items {
       list-style: none;
       padding: 0;
 
-      .blog-item {
+      .snippet-item {
         background-color: $background-lighter;
         border-radius: 16px;
         padding: 8px;
@@ -54,31 +54,31 @@ section.blog {
           }
         }
 
-        .article-image {
+        .snippet-image {
-          max-width: $article-image-size;
+          max-width: $snippet-image-size;
-          max-height: $article-image-size;
+          max-height: $snippet-image-size;
 
           margin-right: 1rem;
         }
 
-        .article-text {
+        .snippet-text {
-          .article-title {
+          .snippet-title {
-            line-height: $article-image-size;
+            line-height: $snippet-image-size;
             font-size: 1.2rem;
             margin: 0;
           }
 
-          .article-desc,
+          .snippet-desc,
-          .article-date,
+          .snippet-date,
-          .article-published {
+          .snippet-published {
             display: block;
           }
 
-          .article-date {
+          .snippet-date {
             color: darken($text-color, 15%);
           }
 
-          .article-published {
+          .snippet-published {
             text-transform: uppercase;
             font-size: 1rem;
             color: red;
@@ -89,7 +89,7 @@ section.blog {
   }
 }
 
-section.blog-popular {
+section.snippet-popular {
   .popular-items {
     list-style: none;
     padding: 0;
@@ -121,7 +121,7 @@ section.blog-popular {
   }
 }
 
-.blog-links {
+.snippet-links {
     &> :not(:first-child) {
         margin-left: 1rem;
     }

src/sass/main.scss

@@ -13,9 +13,8 @@
 // Component specific styling
 @import "header";
 @import "hero";
-@import "blog";
+@import "snippet";
 @import "footer";
 @import "home";
 @import "pagination";
 @import "markdown";
-@import "blogedit";