Merge pull request #26 from allanwhite/feature/blog-updates

SEO improvements, canonical ref

data/site.yml

@@ -51,14 +51,14 @@ contact:
 
 links:
   -
-    label: "Behance Portfolio"
+    label: "Work"
     action: "See Allan's work at Behance"
-    url: "https://behance.net/allanwhite"
-    icon: icon-behance.svg
+    url: "/#recent"
+    icon: icon-eyeball.svg
   -
-    label: "Dev.to Blog"
+    label: "Blog"
     action: "Read Allan's Writing at his blog"
-    url: "https://dev.to/allanwhite"
+    url: "/blog"
     icon: icon-pencil.svg
   -
     label: "Github"

source/layouts/layout.slim

@@ -9,6 +9,8 @@ html lang="en-us"
         meta charset="utf-8" /
         meta content="ie=edge" http-equiv="x-ua-compatible" /
         meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport" /
+        - if current_page.data.canonical_source
+            link rel="canonical" href=current_page.data.canonical_source
         = stylesheet_link_tag "site"
         script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js" type="text/javascript" 
     body class=page_classes 

source/partials/_blocks.slim

@@ -89,7 +89,7 @@
     - when "quote_large"
         aside.content-block.block-quote.relative.w-full.pad-y-xl class=(block.theme.nil? ? nil : "bg-#{block.theme.class_name}") id=block.id
             / code = block.item_type.api_key
-            .text-4xl-scale.font-serif.font-light class=(block.quote_color.nil? ? nil : "text-#{block.quote_color.class_name}") = block.quote_body
+            div class=(block.quote_color.nil? ? nil : "text-#{block.quote_color.class_name}") = Kramdown::Document.new(block.quote_body).to_html
     - when "text_block"
         section.content-block.block-text.relative.w-full.pad class=(block.theme.nil? ? nil : "bg-#{block.theme.class_name}") id=block.id
             / code = block.item_type.api_key

source/stylesheets/components/_content-blocks.scss

@@ -7,4 +7,9 @@
             @apply font-sans text-base;
         }
     }
+}
+.block-quote { // necessary when using markdown
+    p {
+        @apply text-4xl-scale font-serif font-light;
+    }
 }

source/stylesheets/custom/_blog.scss

@@ -24,4 +24,9 @@
             @apply px-20;
         }
     }
+    .block-quote {
+        p {
+            @apply font-book font-light leading-relaxed opacity-75;
+        }
+    }
 }

source/templates/post.html.slim

@@ -16,11 +16,14 @@ page_classes: "blog"
     //    --link-color: var(--color-blue);
     //    --link-hover: var(--color-blue-dark);
     //}
-
+/ - post = locals[:post]
 - set_meta_tags title: "#{post.title} | Blog", full_title: false, pull_image: 'foo.jpg'
 = partial "partials/json-ld", :locals => { :type => "person" }
 - bg_theme = (post.theme.nil? ? nil : "bg-#{post.theme.class_name}")
 - entry_id = post.id
+- unless post.canonical_source.empty?
+    - current_page.data.canonical_source = post.canonical_source
+
 - content_for(:head) do
     = dato_meta_tags(post)
 / .pad.bg-orange.text-sm
@@ -40,6 +43,8 @@ main.relative.w-full.pb-16 class=bg_theme id="top"
             h4.text-2xl.font-sans.font-light.italic.mb-12 = (post.subheader.nil? ? nil : post.subheader )
         .max-w-7xl.mx-auto.flex.flex-col class="lg:flex-row lg:flex-row-reverse"
             div class="w-full lg:w-2/3 xl:w-3/5"
+                figure.rounded-lg.overflow-hidden.mb-6
+                    img.feature-image.lozad.object-fit class="w-auto" src=post.cover_image.url(w: 480, h: 240, blur:200, auto: :compress) data-src=post.cover_image.url(w: 960, h: 480, crop: :edges, fit: :crop, auto: :compress) alt=post.title
                 - unless post.intro.empty?
                     .lead.markdown.pr-0 class="lg:pr-6"
                         = Kramdown::Document.new(post.intro).to_html