blog.trnck.dev

init blog post support

+157 -70
+13
_config.yml
··· 1 1 repository: sophshep/manager-resources 2 2 3 + style: light 4 + 3 5 sass: 4 6 load_paths: 5 7 - node_modules ··· 7 9 plugins: 8 10 - jekyll-octicons 9 11 - jekyll-github-metadata 12 + 13 + permalink: /:year/:month/:day/:title/ 14 + 15 + defaults: 16 + - 17 + scope: 18 + path: "" # an empty string here means all files in the project 19 + type: "posts" 20 + values: 21 + layout: "stacked" 22 + is_post: true 10 23 11 24 topics: 12 25 - name: Web design
+10
_includes/header.html
··· 1 + {% if site.style == 'dark' %} 2 + {% assign icon_color = "#ffffff" %} 3 + {% else %} 4 + {% assign icon_color = "#24292e" %} 5 + {% endif %} 6 + 7 + {% assign posts_total = site.posts | size %} 8 + 9 + {% assign user = site.github.owner %} 10 + 1 11 <!doctype html> 2 12 <html> 3 13 <head>
+10
_includes/post-card.html
··· 1 + <div class="height-full text-left {% if site.style == 'dark' %}box-shadow{% else %}border border-gray-light{% endif %} bg-white rounded-1 p-3"> 2 + <div class="d-flex flex-justify-between flex-items-start mb-1"> 3 + <h1 class="f4 lh-condensed mb-1"> 4 + <a href="{{ post.url }}"> 5 + {{ post.title }} 6 + </a> 7 + </h1> 8 + </div> 9 + <div class="text-gray mb-2 ws-normal">{{ post.date | date: "%b %d, %Y"}}</div> 10 + </div>
+9
_includes/thoughts.html
··· 1 + <h2 {% if site.style == 'dark' %}class="text-white"{% endif %}>My Thoughts</h2> 2 + <p class="f4 mb-4 {% if site.style == 'dark' %}text-white{% else %}text-gray{% endif %}">Articles I've written.</p> 3 + <div class="d-sm-flex flex-wrap gutter-condensed mb-4"> 4 + {% for post in site.posts limit: 4 %} 5 + <div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3"> 6 + {% include post-card.html %} 7 + </div> 8 + {% endfor %} 9 + </div>
+4 -8
_layouts/sidebar.html
··· 1 1 {% include header.html %} 2 2 3 - {% if site.style == 'dark' %} 4 - {% assign icon_color = "#ffffff" %} 5 - {% else %} 6 - {% assign icon_color = "#24292e" %} 7 - {% endif %} 8 - 9 - {% assign user = site.github.owner %} 10 - 11 3 <div class="d-md-flex" style="height: 100vh"> 12 4 <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"> 13 5 <img src="{{ user.avatar_url }}" class="circle mb-3" style="max-width: 150px;"> ··· 53 45 {% include projects.html %} 54 46 55 47 {% include interests.html %} 48 + 49 + {% unless post_size == 0 %} 50 + {% include thoughts.html %} 51 + {% endunless %} 56 52 </div> 57 53 </div> 58 54 </div>
+49 -39
_layouts/stacked.html
··· 1 1 {% include header.html %} 2 2 3 - {% if site.style == 'dark' %} 4 - {% assign icon_color = "#ffffff" %} 5 - {% else %} 6 - {% assign icon_color = "#24292e" %} 7 - {% endif %} 8 - 9 - {% assign user = site.github.owner %} 10 - 11 3 <div class="container-lg py-6 p-responsive text-center"> 12 4 <img src="{{ user.avatar_url }}" class="circle mb-3" style="max-width: 150px;"> 13 5 <h1 class="{% if site.style == 'dark' %}text-white{% endif %} mb-2 lh-condensed">{% if user.name %}{{ user.name }}{% else %}{{ user.login }}{% endif %}</h1> 14 6 <p class="col-lg-8 mx-auto mb-3 f3 {% if site.style == 'dark' %}text-white{% else %}text-gray{% endif %}"> 15 7 {{ user.bio }} 16 8 </p> 17 - <div class="f4 mb-6"> 18 - {% if user.name %} 19 - <div class="d-md-inline-block mr-3"> 20 - {% octicon mark-github height:20 class:"mr-1 v-align-middle" fill:{{ icon_color }} aria-label:GitHub %} 21 - <a href="https://github.com/{{ user.login }}" {% if site.style == 'dark' %}class="text-white"{% endif %}> 22 - @{{ user.login }} 23 - </a> 24 - </div> 25 - {% endif %} 26 - {% if user.email %} 27 - <div class="d-md-inline-block mr-3"> 28 - {% octicon mail height:20 class:"mr-2 v-align-middle" fill:{{ icon_color }} aria-label:email %} 29 - <a href="mailto:{{ user.email }}" {% if site.style == 'dark' %}class="text-white"{% endif %}> 30 - {{ user.email }} 31 - </a> 32 - </div> 33 - {% endif %} 34 - {% if user.location %} 35 - <div class="d-md-inline-block {% if site.style == 'dark' %}text-white{% endif %}"> 36 - {% octicon location height:20 class:"mr-1 v-align-middle" fill:{{ icon_color }} aria-label:Location %} 37 - {{ user.location }} 38 - </div> 39 - {% endif %} 40 - </div> 9 + {% unless page.is_post %} 10 + <div class="f4 mb-6"> 11 + {% if user.name %} 12 + <div class="d-md-inline-block mr-3"> 13 + {% octicon mark-github height:20 class:"mr-1 v-align-middle" fill:{{ icon_color }} aria-label:GitHub %} 14 + <a href="https://github.com/{{ user.login }}" {% if site.style == 'dark' %}class="text-white"{% endif %}> 15 + @{{ user.login }} 16 + </a> 17 + </div> 18 + {% endif %} 19 + {% if user.email %} 20 + <div class="d-md-inline-block mr-3"> 21 + {% octicon mail height:20 class:"mr-2 v-align-middle" fill:{{ icon_color }} aria-label:email %} 22 + <a href="mailto:{{ user.email }}" {% if site.style == 'dark' %}class="text-white"{% endif %}> 23 + {{ user.email }} 24 + </a> 25 + </div> 26 + {% endif %} 27 + {% if user.location %} 28 + <div class="d-md-inline-block {% if site.style == 'dark' %}text-white{% endif %}"> 29 + {% octicon location height:20 class:"mr-1 v-align-middle" fill:{{ icon_color }} aria-label:Location %} 30 + {{ user.location }} 31 + </div> 32 + {% endif %} 33 + </div> 34 + {% endunless %} 41 35 42 36 <div {% if site.style == 'dark' %}class="text-white"{% endif %}> 43 - {{ content }} 37 + {% if page.is_post %} 38 + <div class="container-md f4 text-left border rounded-2 bg-white p-3 p-sm-5 mt-6"> 39 + <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> 40 + <h1 class="f00-light lh-condensed">{{ page.title }}</h1> 41 + <p class="{% if site.style == 'dark' %}text-white{% else %}text-gray{% endif %} mb-5">Published {{ page.date | date: "%b %d, %Y"}}</p> 42 + {{ content }} 43 + </div> 44 + {% else %} 45 + {{ content }} 46 + {% endif %} 44 47 </div> 45 48 46 - <div class="my-6"> 47 - {% include projects.html %} 48 - </div> 49 + {% unless page.is_post %} 50 + <div class="my-6"> 51 + {% include projects.html %} 52 + </div> 49 53 50 - <div class="my-6"> 51 - {% include interests.html %} 52 - </div> 54 + <div class="my-6"> 55 + {% include interests.html %} 56 + </div> 53 57 58 + {% unless post_size == 0 %} 59 + <div class="my-6"> 60 + {% include thoughts.html %} 61 + </div> 62 + {% endunless %} 63 + {% endunless %} 54 64 </div> 55 65 56 66
+7
_posts/2019-01-29-hello-world.md
··· 1 + --- 2 + title: "Welcome to Jekyll!" 3 + --- 4 + 5 + **Hello world**, this is my first Jekyll blog post. 6 + 7 + I hope you like it!
+54 -22
_site/index.html
··· 1 + 2 + 3 + 4 + 5 + 6 + 1 7 <!doctype html> 2 8 <html> 3 9 <head> ··· 8 14 <body class="bg-gray-light" > 9 15 10 16 11 - 12 - 13 - 14 - 15 - <div class="d-md-flex" style="height: 100vh"> 16 - <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"> 17 - <img src="https://avatars3.githubusercontent.com/u/527589?v=4" class="circle mb-3" style="max-width: 150px;"> 18 - <h1 class=" mb-2 lh-condensed">Sophie Shepherd</h1> 19 - <p class="mb-3 f4 text-gray"> 20 - ✏ Design manager at @github 21 - </p> 17 + <div class="container-lg py-6 p-responsive text-center"> 18 + <img src="https://avatars3.githubusercontent.com/u/527589?v=4" class="circle mb-3" style="max-width: 150px;"> 19 + <h1 class=" mb-2 lh-condensed">Sophie Shepherd</h1> 20 + <p class="col-lg-8 mx-auto mb-3 f3 text-gray"> 21 + ✏ Design manager at @github 22 + </p> 23 + 22 24 <div class="f4 mb-6"> 23 25 24 - <div class="d-flex flex-items-center mb-3"> 25 - <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> 26 + <div class="d-md-inline-block mr-3"> 27 + <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> 26 28 <a href="https://github.com/sophshep" > 27 29 @sophshep 28 30 </a> ··· 30 32 31 33 32 34 33 - <div class="d-flex flex-items-center mb-3"> 34 - <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> 35 + <div class="d-md-inline-block "> 36 + <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> 35 37 Austin TX 36 38 </div> 37 39 38 - 39 40 </div> 40 - </div> 41 + 41 42 42 - <div class="col-md-7 col-lg-8 col-xl-9 px-4 py-6 px-lg-7"> 43 - <div class="mx-auto" style="max-width: 900px;"> 44 - <div class=" mb-6"> 45 - I have stuff to say here. 43 + <div > 44 + 45 + I have stuff to say here. 46 46 47 - </div> 47 + 48 + </div> 48 49 50 + 51 + <div class="my-6"> 49 52 <h2 >My Projects</h2> 50 53 <p class="f4 mb-4 text-gray">GitHub repositories that I've built.</p> 51 54 <div class="d-sm-flex flex-wrap gutter-condensed mb-4"> ··· 164 167 165 168 </div> 166 169 170 + </div> 167 171 172 + <div class="my-6"> 168 173 <h2 >My Interests</h2> 169 174 <p class="f4 mb-4 text-gray">Topics that I want to learn more about.</p> 170 175 <div class="d-flex flex-wrap gutter-condensed mb-4"> ··· 216 221 </div> 217 222 218 223 </div> 224 + 225 + 226 + <div class="my-6"> 227 + <h2 >My Thoughts</h2> 228 + <p class="f4 mb-4 text-gray">Articles I've written.</p> 229 + <div class="d-sm-flex flex-wrap gutter-condensed mb-4"> 230 + 231 + <div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3"> 232 + <div class="height-full text-left border border-gray-light bg-white rounded-1 p-3"> 233 + <div class="d-flex flex-justify-between flex-items-start mb-1"> 234 + <h1 class="f4 lh-condensed mb-1"> 235 + <a href="/2019/01/29/hello-world/"> 236 + Welcome to Jekyll! 237 + </a> 238 + </h1> 219 239 </div> 240 + <div class="text-gray mb-2 ws-normal">Jan 29, 2019</div> 220 241 </div> 242 + 243 + </div> 244 + 245 + </div> 246 + 247 + </div> 248 + 249 + 250 + </div> 251 + 252 + 221 253 222 254 </body> 223 255 </html>
+1 -1
index.html
··· 1 1 --- 2 - layout: sidebar 2 + layout: stacked 3 3 --- 4 4 I have stuff to say here.