init blog post support

Remicck · Jan 29, 2019 · 7febc36 · 7febc36
1 parent 844baaa
commit 7febc36
Show file tree

Hide file tree

Showing 9 changed files with 157 additions and 70 deletions.
diff --git a/_config.yml b/_config.yml
@@ -1,5 +1,7 @@
 repository: sophshep/manager-resources
 
+style: light
+
 sass:
   load_paths:
     - node_modules
@@ -8,6 +10,17 @@ plugins:
   - jekyll-octicons
   - jekyll-github-metadata
 
+permalink: /:year/:month/:day/:title/
+
+defaults:
+  -
+    scope:
+      path: "" # an empty string here means all files in the project
+      type: "posts"
+    values:
+      layout: "stacked"
+      is_post: true
+
 topics:
   - name: Web design
 

diff --git a/_includes/header.html b/_includes/header.html
@@ -1,3 +1,13 @@
+{% if site.style == 'dark' %}
+  {% assign icon_color = "#ffffff" %}
+{% else %}
+  {% assign icon_color = "#24292e" %}
+{% endif %}
+
+{% assign posts_total = site.posts | size %}
+
+{% assign user = site.github.owner %}
+
 <!doctype html>
 <html>
   <head>

diff --git a/_includes/post-card.html b/_includes/post-card.html
@@ -0,0 +1,10 @@
+<div class="height-full text-left {% if site.style == 'dark' %}box-shadow{% else %}border border-gray-light{% endif %} bg-white rounded-1 p-3">
+  <div class="d-flex flex-justify-between flex-items-start mb-1">
+    <h1 class="f4 lh-condensed mb-1">
+      <a href="{{ post.url }}">
+        {{ post.title }}
+      </a>
+    </h1>
+  </div>
+  <div class="text-gray mb-2 ws-normal">{{ post.date | date: "%b %d, %Y"}}</div>
+</div>
diff --git a/_includes/thoughts.html b/_includes/thoughts.html
@@ -0,0 +1,9 @@
+<h2 {% if site.style == 'dark' %}class="text-white"{% endif %}>My Thoughts</h2>
+<p class="f4 mb-4 {% if site.style == 'dark' %}text-white{% else %}text-gray{% endif %}">Articles I've written.</p>
+<div class="d-sm-flex flex-wrap gutter-condensed mb-4">
+  {% for post in site.posts limit: 4 %}
+    <div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
+      {% include post-card.html %}
+    </div>
+  {% endfor %}
+</div>
diff --git a/_layouts/sidebar.html b/_layouts/sidebar.html
@@ -1,13 +1,5 @@
 {% include header.html %}
 
-{% if site.style == 'dark' %}
-  {% assign icon_color = "#ffffff" %}
-{% else %}
-  {% assign icon_color = "#24292e" %}
-{% endif %}
-
-{% assign user = site.github.owner %}
-
 <div class="d-md-flex" style="height: 100vh">
   <div class="flex-self-stretch {% if site.style == 'dark' %}bg-gray-dark{% else %}border-bottom border-md-none border-md-right border-gray-light bg-white{% endif %} col-md-5 col-lg-4 col-xl-3 px-4 px-md-6 px-lg-7 py-6">
     <img src="{{ user.avatar_url }}" class="circle mb-3" style="max-width: 150px;">
@@ -53,6 +45,10 @@ <h1 class="{% if site.style == 'dark' %}text-white{% endif %} mb-2 lh-condensed"
       {% include projects.html %}
 
       {% include interests.html %}
+
+      {% unless post_size == 0 %}
+        {% include thoughts.html %}
+      {% endunless %}
     </div>
   </div>
 </div>

diff --git a/_layouts/stacked.html b/_layouts/stacked.html
@@ -1,56 +1,66 @@
 {% include header.html %}
 
-{% if site.style == 'dark' %}
-  {% assign icon_color = "#ffffff" %}
-{% else %}
-  {% assign icon_color = "#24292e" %}
-{% endif %}
-
-{% assign user = site.github.owner %}
-
 <div class="container-lg py-6 p-responsive text-center">
   <img src="{{ user.avatar_url }}" class="circle mb-3" style="max-width: 150px;">
   <h1 class="{% if site.style == 'dark' %}text-white{% endif %} mb-2 lh-condensed">{% if user.name %}{{ user.name }}{% else %}{{ user.login }}{% endif %}</h1>
   <p class="col-lg-8 mx-auto mb-3 f3 {% if site.style == 'dark' %}text-white{% else %}text-gray{% endif %}">
     {{ user.bio }}
   </p>
-  <div class="f4 mb-6">
-    {% if user.name %}
-      <div class="d-md-inline-block mr-3">
-        {% octicon mark-github height:20 class:"mr-1 v-align-middle" fill:{{ icon_color }} aria-label:GitHub %}
-        <a href="https://github.com/{{ user.login }}" {% if site.style == 'dark' %}class="text-white"{% endif %}>
-          @{{ user.login }}
-        </a>
-      </div>
-    {% endif %}
-    {% if user.email %}
-      <div class="d-md-inline-block mr-3">
-        {% octicon mail height:20 class:"mr-2 v-align-middle" fill:{{ icon_color }} aria-label:email %}
-        <a href="mailto:{{ user.email }}" {% if site.style == 'dark' %}class="text-white"{% endif %}>
-          {{ user.email }}
-        </a>
-      </div>
-    {% endif %}
-    {% if user.location %}
-      <div class="d-md-inline-block {% if site.style == 'dark' %}text-white{% endif %}">
-        {% octicon location height:20 class:"mr-1 v-align-middle" fill:{{ icon_color }} aria-label:Location %}
-        {{ user.location }}
-      </div>
-    {% endif %}
-  </div>
+  {% unless page.is_post %}
+    <div class="f4 mb-6">
+      {% if user.name %}
+        <div class="d-md-inline-block mr-3">
+          {% octicon mark-github height:20 class:"mr-1 v-align-middle" fill:{{ icon_color }} aria-label:GitHub %}
+          <a href="https://github.com/{{ user.login }}" {% if site.style == 'dark' %}class="text-white"{% endif %}>
+            @{{ user.login }}
+          </a>
+        </div>
+      {% endif %}
+      {% if user.email %}
+        <div class="d-md-inline-block mr-3">
+          {% octicon mail height:20 class:"mr-2 v-align-middle" fill:{{ icon_color }} aria-label:email %}
+          <a href="mailto:{{ user.email }}" {% if site.style == 'dark' %}class="text-white"{% endif %}>
+            {{ user.email }}
+          </a>
+        </div>
+      {% endif %}
+      {% if user.location %}
+        <div class="d-md-inline-block {% if site.style == 'dark' %}text-white{% endif %}">
+          {% octicon location height:20 class:"mr-1 v-align-middle" fill:{{ icon_color }} aria-label:Location %}
+          {{ user.location }}
+        </div>
+      {% endif %}
+    </div>
+  {% endunless %}
 
   <div {% if site.style == 'dark' %}class="text-white"{% endif %}>
-    {{ content }}
+    {% if page.is_post %}
+      <div class="container-md f4 text-left border rounded-2 bg-white p-3 p-sm-5 mt-6">
+        <p class="f5"><a href="/" class="d-flex flex-items-center">{% octicon chevron-left height:16 class:"mr-2 v-align-middle" fill:#0366d6 aria-label:Home %}Home</a></p>
+        <h1 class="f00-light lh-condensed">{{ page.title }}</h1>
+        <p class="{% if site.style == 'dark' %}text-white{% else %}text-gray{% endif %} mb-5">Published {{ page.date | date: "%b %d, %Y"}}</p>
+        {{ content }}
+      </div>
+    {% else %}
+      {{ content }}
+    {% endif %}
   </div>
 
-  <div class="my-6">
-    {% include projects.html %}
-  </div>
+  {% unless page.is_post %}
+    <div class="my-6">
+      {% include projects.html %}
+    </div>
 
-  <div class="my-6">
-    {% include interests.html %}
-  </div>
+    <div class="my-6">
+      {% include interests.html %}
+    </div>
 
+    {% unless post_size == 0 %}
+      <div class="my-6">
+        {% include thoughts.html %}
+      </div>
+    {% endunless %}
+  {% endunless %}
 </div>
 
 

diff --git a/_posts/2019-01-29-hello-world.md b/_posts/2019-01-29-hello-world.md
@@ -0,0 +1,7 @@
+---
+title: "Welcome to Jekyll!"
+---
+
+**Hello world**, this is my first Jekyll blog post.
+
+I hope you like it!
diff --git a/_site/index.html b/_site/index.html
@@ -1,3 +1,9 @@
+
+
+
+
+
+
 <!doctype html>
 <html>
   <head>
@@ -8,44 +14,41 @@
   <body class="bg-gray-light" >
 
 
-
-
-
-
-<div class="d-md-flex" style="height: 100vh">
-  <div class="flex-self-stretch border-bottom border-md-none border-md-right border-gray-light bg-white col-md-5 col-lg-4 col-xl-3 px-4 px-md-6 px-lg-7 py-6">
-    <img src="https://avatars3.githubusercontent.com/u/527589?v=4" class="circle mb-3" style="max-width: 150px;">
-    <h1 class=" mb-2 lh-condensed">Sophie Shepherd</h1>
-    <p class="mb-3 f4 text-gray">
-      ✏  Design manager at @github
-    </p>
+<div class="container-lg py-6 p-responsive text-center">
+  <img src="https://avatars3.githubusercontent.com/u/527589?v=4" class="circle mb-3" style="max-width: 150px;">
+  <h1 class=" mb-2 lh-condensed">Sophie Shepherd</h1>
+  <p class="col-lg-8 mx-auto mb-3 f3 text-gray">
+    ✏  Design manager at @github
+  </p>
+
     <div class="f4 mb-6">
 
-        <div class="d-flex flex-items-center mb-3">
-          <svg height="20" class="octicon octicon-mark-github mr-2 v-align-middle" fill="#24292e" aria-label="GitHub" viewBox="0 0 16 16" version="1.1" width="20" role="img"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
+        <div class="d-md-inline-block mr-3">
+          <svg height="20" class="octicon octicon-mark-github mr-1 v-align-middle" fill="#24292e" aria-label="GitHub" viewBox="0 0 16 16" version="1.1" width="20" role="img"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
           <a href="https://github.com/sophshep" >
             @sophshep
           </a>
         </div>
 
 
 
-        <div class="d-flex flex-items-center  mb-3">
-          <svg height="20" class="octicon octicon-location mr-2 v-align-middle" fill="#24292e" aria-label="Location" viewBox="0 0 12 16" version="1.1" width="15" role="img"><path fill-rule="evenodd" d="M6 0C2.69 0 0 2.5 0 5.5 0 10.02 6 16 6 16s6-5.98 6-10.5C12 2.5 9.31 0 6 0zm0 14.55C4.14 12.52 1 8.44 1 5.5 1 3.02 3.25 1 6 1c1.34 0 2.61.48 3.56 1.36.92.86 1.44 1.97 1.44 3.14 0 2.94-3.14 7.02-5 9.05zM8 5.5c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"/></svg>
+        <div class="d-md-inline-block ">
+          <svg height="20" class="octicon octicon-location mr-1 v-align-middle" fill="#24292e" aria-label="Location" viewBox="0 0 12 16" version="1.1" width="15" role="img"><path fill-rule="evenodd" d="M6 0C2.69 0 0 2.5 0 5.5 0 10.02 6 16 6 16s6-5.98 6-10.5C12 2.5 9.31 0 6 0zm0 14.55C4.14 12.52 1 8.44 1 5.5 1 3.02 3.25 1 6 1c1.34 0 2.61.48 3.56 1.36.92.86 1.44 1.97 1.44 3.14 0 2.94-3.14 7.02-5 9.05zM8 5.5c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"/></svg>
           Austin TX
         </div>
 
-
     </div>
-  </div>
+
 
-  <div class="col-md-7 col-lg-8 col-xl-9 px-4 py-6 px-lg-7">
-    <div class="mx-auto" style="max-width: 900px;">
-      <div class=" mb-6">
-        I have stuff to say here.
+  <div >
+
+      I have stuff to say here.
 
-      </div>
+
+  </div>
 
+
+    <div class="my-6">
       <h2 >My Projects</h2>
 <p class="f4 mb-4 text-gray">GitHub repositories that I've built.</p>
 <div class="d-sm-flex flex-wrap gutter-condensed mb-4">
@@ -164,7 +167,9 @@ <h1 class="f4 lh-condensed mb-1">
 
 </div>
 
+    </div>
 
+    <div class="my-6">
       <h2 >My Interests</h2>
 <p class="f4 mb-4 text-gray">Topics that I want to learn more about.</p>
 <div class="d-flex flex-wrap gutter-condensed mb-4">
@@ -216,9 +221,36 @@ <h2 >My Interests</h2>
 </div>
 
     </div>
+
+
+      <div class="my-6">
+        <h2 >My Thoughts</h2>
+<p class="f4 mb-4 text-gray">Articles I've written.</p>
+<div class="d-sm-flex flex-wrap gutter-condensed mb-4">
+
+    <div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
+      <div class="height-full text-left border border-gray-light bg-white rounded-1 p-3">
+  <div class="d-flex flex-justify-between flex-items-start mb-1">
+    <h1 class="f4 lh-condensed mb-1">
+      <a href="/2019/01/29/hello-world/">
+        Welcome to Jekyll!
+      </a>
+    </h1>
   </div>
+  <div class="text-gray mb-2 ws-normal">Jan 29, 2019</div>
+</div>
+
+    </div>
+
+</div>
+
+      </div>
+
+
 </div>
 
+
+
   </body>
 </html>
 
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
 ---
-layout: sidebar
+layout: stacked
 ---
 I have stuff to say here.