OMG FEATURE PARITY WITH REACT

... almost. It looks identical, just some minor things to fix up.

Yes! the templates exist now and work!!

Add `clean` back to `make all` and use `-c` in `gsutil rsync`, which
will ignore mtime and use checksums when comparing files instead,
meaning we don't have to re-upload all of /media/ every time! (^_^)

Also fix a broken link to the kegerator project page
This commit is contained in:
Nick Pegg 2018-01-15 22:13:47 -08:00
parent 3d4e86c462
commit 7308419301
8 changed files with 304 additions and 3 deletions

View file

@ -1,4 +1,4 @@
all: clean build # TODO: add stage here one we can actually build something
all: clean build stage
clean:
rm -rf build
@ -7,6 +7,6 @@ build:
posty build
stage:
gsutil -m rsync -d -r build/ gs://test.nickpegg.com
gsutil -m rsync -c -d -r build/ gs://test2.nickpegg.com
# TODO: add a `publish` task when ready to roll to prod

132
media/css/index.css Normal file
View file

@ -0,0 +1,132 @@
body {
background: #FCFCFC;
color: #35352F;
}
a {
color: #FF4F00;
}
a:hover {
color: #FF4F00;
}
h1, h2, h3, h4, h5 {
font-family: 'Quicksand', sans-serif;
}
blockquote {
margin-left: 0;
border-left: 0.5rem solid #dfe2e5;
padding-left: 2rem;
color: #666D70;
}
.page-header {
background: #74E8E2;
margin-bottom: 2rem;
}
.page-header h1 {
margin-bottom: 1rem;
}
.page-header a {
color: inherit;
text-decoration: inherit;
}
/* nav
****************************************/
.nav {
margin-top: 1rem;
}
.nav ul li {
list-style-type: none;
margin-bottom: 0;
}
.nav-header {
margin-bottom: 0;
}
@media (max-width: 999px) {
.nav {
text-align: center;
}
.nav ul li {
display: inline;
}
.nav ul li:first-child::before {
content: "";
}
.nav ul li::before {
content: "|";
}
}
/* articles
****************************************/
article {
margin-bottom: 4rem;
}
.post-title {
color: inherit;
text-decoration: inherit;
}
.post-title h1 {
margin-bottom: 0rem;
}
.post-meta {
color: #757575;
margin-top: 0.5rem;
margin-bottom: 2rem;
}
.post-tags {
display: inline;
margin-left: 1rem;
}
.post-tags * {
display: inline;
}
/* Override this since hljs removes what skeleton sets */
.hljs {
padding: 1rem 1.5rem
}
/* Article headers should go down one size. This is because when you use a
* `#` in Markdown, it outputs a <h1>, but we don't want post headers to be the
* same size as headers elsewhere.
*
* These values were taken from skeleton.css
*/
article section h1 { font-size: 3.6rem; line-height: 1.2; letter-spacing: -.1rem;}
article section h2 { font-size: 3.0rem; line-height: 1.25; letter-spacing: -.1rem; }
article section h3 { font-size: 2.4rem; line-height: 1.3; letter-spacing: -.1rem; }
article section h4 { font-size: 1.8rem; line-height: 1.35; letter-spacing: -.08rem; }
article section h5 { font-size: 1.5rem; line-height: 1.5; letter-spacing: -.05rem; }
/* Larger than phablet */
@media (min-width: 550px) {
article section h1 { font-size: 4.2rem; }
article section h2 { font-size: 3.6rem; }
article section h3 { font-size: 3.0rem; }
article section h4 { font-size: 2.4rem; }
article section h5 { font-size: 1.5rem; }
}
/* footer
****************************************/
.page-footer {
margin-top: 1rem;
margin-bottom: 1rem;
text-align: center;
font-size: smaller;
}

View file

@ -8,5 +8,5 @@ beer, I've built myself a kegerator!
[![Kegerator](http://farm6.static.flickr.com/5135/5462665976_d11faea2aa.jpg)](http://www.flickr.com/photos/nickpegg/sets/72157625971333921/)
Details are over at my [project page](/projects/kegerator/), or if you'd
Details are over at my [project page](/kegerator/), or if you'd
rather just gawk at some pictures, check out the [Flickr set](http://www.flickr.com/photos/nickpegg/sets/72157625971333921/)!

92
templates/base.html Normal file
View file

@ -0,0 +1,92 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{{ site.title }} - {% block page_title %}{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github-gist.min.css">
<link rel="stylesheet" href="{{ "css/normalize.css" | media_url }}" />
<link rel="stylesheet" href="{{ "css/skeleton.css" | media_url }}" />
<link rel="stylesheet" href="{{ "css/font-awesome.css" | media_url }}" />
<link rel="stylesheet" href="{{ "css/index.css" | media_url }}" />
</head>
<body>
<div class="page-header">
<div class="container">
<a href="{{ site.base_url }}">
<h1>{{ site.title }}</h1>
</a>
</div>
</div>
<div class="container">
<div id="main" class="row">
<div class="two columns nav">
<div class="row">
<ul>
<li>
<a href="{{ site.base_url }}">
Home
</a>
</li>
{% for page in site.pages %}
{% if page.parent == None %}
<li>
<a href="{{ page.url() }}">
{{ page.title }}
</a>
</li>
{% endif %}
{% endfor %}
<li>
<a href="/rss.xml">
<i class="fa fa-rss-square"></i>
RSS
</a>
</li>
</ul>
</div>
<div class="row">
<h5 class="nav-header">Top Tags</h5>
<ul>
{% for tag in site.tags[:5] %}
<li>
<a href="/tag/{{ tag }}/">
<i class="fa fa-tag"></i>
{{ tag }}
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
<div class="eight columns">
{% block content %}
{% endblock %}
</div>
</div>
<!-- end main -->
</div>
<div class="page-footer">
<div class="container">
<i class="fa fa-copyright"></i> 2009 - 2018 Nick Pegg
</div>
<div>
Powered by <a href="https://github.com/nickpegg/posty">Posty</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>

14
templates/page.html Normal file
View file

@ -0,0 +1,14 @@
{% extends "base.html" %}
{% block page_title %}{{ page.title }}{% endblock %}
{% block content %}
<article>
<header>
<h1>{{ page.title }}</h1>
</header>
<section>
{{ page.body | markdown }}
</section>
</article>
{% endblock %}

9
templates/post.html Normal file
View file

@ -0,0 +1,9 @@
{% extends "base.html" %}
{% block page_title %}{{ post.title }}{% endblock %}
{% block content %}
{% with post_content = post.body|markdown %}
{% include "post_base.html" %}
{% endwith %}
{% endblock %}

26
templates/post_base.html Normal file
View file

@ -0,0 +1,26 @@
<article>
<header>
<a class="post-title" href="{{ post.url() }}">
<h1>{{ post.title }}</h1>
</a>
<div class="post-meta">
<time>Posted {{ post.date }}</time>
<div class="post-tags">
<i class="fa fa-tags"></i>
<ul>
{% for tag in post.tags %}
<li><a href="/tag/{{tag}}/">{{ tag }}</a></li>
{% endfor %}
</ul>
</div>
</div>
</header>
<section>
<div>
{{ post_content }}
</div>
{% if read_more %}
<a href="{{ post.url() }}">read more</a>
{% endif %}
</section>
</article>

28
templates/posts.html Normal file
View file

@ -0,0 +1,28 @@
{% extends "base.html" %}
{% block page_title %}Posts{% endblock %}
{% block content %}
{% set read_more = True %}
{% for post in posts %}
{% with post_content = post.blurb|markdown %}
{% include "post_base.html" %}
{% endwith %}
{% endfor %}
<div class="row">
{% if prev_page_url %}
<a href="{{ prev_page_url }}">
<i class="fa fa-arrow-left"></i>
newer posts
</a>
{% endif %}
{% if next_page_url %}
<a class="u-pull-right" href="{{ next_page_url }}">
older posts
<i class="fa fa-arrow-right"></i>
</a>
{% endif %}
</div>
{% endblock %}