Skip to content

Commit 75a78f1

Browse files
jaredandrewsjaredandrews
committed
pelican_08_page: Added page template and about page
1 parent 20601da commit 75a78f1

11 files changed

Lines changed: 225 additions & 10 deletions

File tree

‎content/images/jared_large.png‎

33.8 KB
Loading

content/images/jared.png renamed to content/images/jared_small.png

File renamed without changes.

‎content/making-this-site/pelican_07_design.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,6 @@ I found this made the metadata a little less obtrusive.
121121

122122
Unless my feelings change this is probably the final state of design for this site. What remains is an About page, figuring out to set up RSS and then **DEPLOYMENT**!
123123

124-
To see the complete code for the site at this point checkout COMMIT HASH LINK on GitHub.
124+
To see the complete code for the site at this point checkout COMMIT HASH LINK on GitHub.
125125

126-
To see what the site looked after these changes were made [click here]().
126+
To see what the site looked after these changes were made [click here]().

‎content/making-this-site/pelican_08_page.md‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
Title: Making This Site, Part 8: Page Template
2+
Date: 2017-02-28 18:15
3+
Tags: programming, web-dev, pelican, jinja2, css, markdown
4+
5+
There are two types of content in Pelican, [articles and pages](http://docs.getpelican.com/en/stable/content.html#articles-and-pages). So far we have only worked with articles. But now that we are nearing the end of creating this site I need to add an "About" page with a bio, contact information and maybe a few other things. In the future I may use pages to host content that will be updated over time but is better preseneted as a single package. For example I intend to add a travel map and log at some point. This would be more suited as a single page that get's updated frequently than a million very brief blog posts.
6+
7+
### Setting Up
8+
9+
We need to create both a template for pages and a place for them to go in the `content` directory. Lets add the new template, a new content directory and a new page:
10+
11+
$ touch theme/templates/page.html
12+
$ mkdir content/pages/
13+
$ touch content/pages/about.md
14+
15+
### Creating the About Page Markdown
16+
17+
Lets start with `about.md`. This is the post that describes the content and metadata for my about page. Working with it is basically the same as an article.
18+
19+
Title: About
20+
Date: 2017-02-28 18:15
21+
Modified: 2017-02-28 18:15
22+
23+
CONTENT TODO
24+
25+
Notice there is less metadata than an article. I added a `Modified` key which I will update whenever I change this page.
26+
27+
### Creating the Page Template
28+
29+
Next lets edit `page.html`. This is the template that content in `content/pages/` willl be applied to. It is like a simpler article:
30+
31+
{% from 'macros.html' import get_page_meta_data_html %}
32+
{% extends "base.html" %}
33+
{% block title %}{{ page.title }} — {{ SITENAME }}{% endblock %}
34+
{% block content %}
35+
<h2 class="article-title">{{ page.title }}</h2>
36+
37+
<footer class="article-metadata">
38+
{{ get_page_meta_data_html(page) }}
39+
</footer>
40+
41+
<div>{{ page.content }}</div>
42+
{% endblock %}
43+
44+
Notice that the CSS classnames are still prepended with "article-". These names not don't make sense, because they are used with pages as well. I doubt I will ever confuse myself with this inconsistency but since I will be using the exact same styles for both type of content I think it's fair to remove the prefix, thus `.article-title` and `.article-metadata` are now `.title` and `.metadata` respectively.
45+
46+
Every thing is pretty similar to `article.html` minus the navigation. I also changed how the metadta was displayed with a new method in `macros.html`:
47+
48+
{% macro get_page_meta_data_html(page) %}
49+
Last Modified:
50+
{% if page.modified %}
51+
{{ page.modified.strftime("%b %d, %Y") }}
52+
{% elif page.date %}
53+
{{ page.modified.strftime("%b %d, %Y") }}
54+
{% endif %}
55+
{% endmacro %}
56+
57+
This shows the "last modification" date for a page and that's it.
58+
59+
### Updating the Nav Bar
60+
61+
A page in `content/pages` is generated with a slug that looks like `pages/page.html`. Thus my new about page will look like `pages/about.html`. I have a link to the About page both in the Nav Bar and on the front page.
62+
63+
To update the Nav Bar I update `base.html`:
64+
65+
<nav><a href="{{ SITEURL }}/pages/about.html">about</a> / <a href="{{ SITEURL }}/archives.html">archive</a> / <a href="#">rss</a></nav>
66+
67+
In the last post I added a greetings box to `index.html`. I put a link to the about page in it and at the time thought the link would be `{{ SITEURL }}/about.html`. Turns out my assumption was wrong so I updated that `index.html` to reflect the new link.
68+
69+
### Adding Content to the About Page
70+
71+
Next I added content to `about.md`:
72+
73+
Title: About
74+
Date: 2017-02-28 18:15
75+
Modified: 2017-02-28 18:15
76+
77+
![Portrait of Author](/images/jared_large.png){ class='portrait large' }
78+
79+
**Email Me:** jared (at) jaredandrews (dot) com
80+
**Online Profiles:** [HN](https://news.ycombinator.com/user?id=jaredandrews), [reddit](https://www.reddit.com/user/jared_and_fizz/), [Instagram](https://www.instagram.com/jtaaaaaa/), [GitHub](https://github.com/jaredandrews), [LinkedIn](https://www.linkedin.com/in/jaredtandrews), [Spotify](https://open.spotify.com/user/1236628403)
81+
82+
Greetings! My name is Jared Andrews. I am a freelance software developer. I was raised in Central Massachusetts, went to college at WPI, and lived in Allston, MA for serveral years after. I am currently traveling the United States indefinitely. I work remotely with several clients on Android and Web Development projects. If you are interested in working on a project with me, please check out my [Portfolio]() and/or [LinkedIn](https://www.linkedin.com/in/jaredtandrews) and shoot me an email. I would love to build a great app or website with you!
83+
84+
During my time in Boston I cofounded Rock and Culture blog, [Spark & Fizz](https://sparkandfizz.com) with some of my friends. If you are interested in DIY music and culture I would ask you to check it out. Along with handling the tech side of things I frequently write, edit videos and conduct interviews for Spark & Fizz.
85+
86+
The purpose of this website is to host content I created that has nowhere else to live. What that entails will become clear over time :D
87+
88+
### Technology Interests
89+
* Structurally Sound Android Deveopment
90+
* Android UI and Unit Testing
91+
* Static Sites (Why is everything on the internet so **slow** in 2017!?)
92+
* Artifical Intelligence
93+
* Cellular Automata
94+
* Generative Art
95+
* The Post Automation World
96+
97+
### Other Interests
98+
* [Hacking](http://www.catb.org/jargon/html/H/hacker.html)
99+
* DIY Music, DIY everything really
100+
* Motorcycle Riding and Maintainance
101+
* [Stoicism](https://en.wikipedia.org/wiki/Stoicism) and [Absurdism](https://en.wikipedia.org/wiki/Absurdism)
102+
* Rock Climbing
103+
* SCUBA Diving
104+
* Fringe Cultures
105+
* Photography and Video Editing
106+
107+
*Portrait Graphic by [Alyssa Alarcón](https://alyssalarcondesign.com/), based on a photo by [Townsend Colon](https://twitter.com/townsendcolon?lang=en)*.
108+
109+
*Content on this site is copyright 2015 to infinity unless otherwise stated.*
110+
*Any code on this site can be considered [MIT licensed](https://opensource.org/licenses/MIT)*.
111+
*Any views expressed on this site are those of the author and do not reflect views held by past or present employers.*
112+
113+
That is a lot of text! Mostly using Markdown that we have already seen. New Markdown that hasn't been used before is ` ` (two spaces at the end of a line) which causes the next line to be on a new line, it basically maps to `<br/>`.
114+
115+
The other thing of note is the class I assign the portrait: `{ class='portrait large' }`. This applies the CSS classes `portrait` and `large`. `jaredandrews.css` has been updated with a large class:
116+
117+
118+
.large {
119+
display: block;
120+
float: none;
121+
}
122+
123+
...
124+
125+
/* Larger than tablet */
126+
@media (min-width: 750px) {
127+
.large {
128+
display: inline-block;
129+
float: left;
130+
}
131+
...
132+
}
133+
134+
These classes make the text wrap the portrait on "larger than tablet" screen sizes and go under the portrait for mobile screen sizes.
135+
136+
I wanted to include the "current location" shown on `index.html` as well but it turns out that Pelican variables are not available for pages or articles. For now I will only show it on `index.html` tho I would like to display it on the About page in the future. To do this I would need to make a specific page template for the about page.
137+
138+
### Wrapping Up
139+
140+
The site is done! Well close... I still need to figure out how to turn on RSS and deploy this bad boy! Then I need to actually write more content :D We are getting close!
141+
142+
To see the complete code for the site at this point checkout COMMIT HASH LINK on GitHub.
143+
144+
To see what the site looked after these changes were made [click here]().

‎content/pages/about.md‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
Title: About
2+
Date: 2017-02-28 18:15
3+
Modified: 2017-02-28 18:15
4+
5+
![Portrait of Author](/images/jared_large.png){ class='portrait large' }
6+
7+
**Email Me:** jared (at) jaredandrews (dot) com
8+
**Online Profiles:** [HN](https://news.ycombinator.com/user?id=jaredandrews), [reddit](https://www.reddit.com/user/jared_and_fizz/), [Instagram](https://www.instagram.com/jtaaaaaa/), [GitHub](https://github.com/jaredandrews), [LinkedIn](https://www.linkedin.com/in/jaredtandrews), [Spotify](https://open.spotify.com/user/1236628403)
9+
10+
Greetings! My name is Jared Andrews. I am a freelance software developer. I was raised in Central Massachusetts, went to college at WPI, and lived in Allston, MA for serveral years after. I am currently traveling the United States indefinitely. I work remotely with several clients on Android and Web Development projects. If you are interested in working on a project with me, please check out my [Portfolio]() and/or [LinkedIn](https://www.linkedin.com/in/jaredtandrews) and shoot me an email. I would love to build a great app or website with you!
11+
12+
During my time in Boston I cofounded Rock and Culture blog, [Spark & Fizz](https://sparkandfizz.com) with some of my friends. If you are interested in DIY music and culture I would ask you to check it out. Along with handling the tech side of things I frequently write, edit videos and conduct interviews for Spark & Fizz.
13+
14+
The purpose of this website is to host content I created that has nowhere else to live. What that entails will become clear over time :D
15+
16+
### Technology Interests
17+
* Structurally Sound Android Deveopment
18+
* Android UI and Unit Testing
19+
* Static Sites (Why is everything on the internet so **slow** in 2017!?)
20+
* Artifical Intelligence
21+
* Cellular Automata
22+
* Generative Art
23+
* The Post Automation World
24+
25+
### Other Interests
26+
* [Hacking](http://www.catb.org/jargon/html/H/hacker.html)
27+
* DIY Music, DIY everything really
28+
* Motorcycle Riding and Maintainance
29+
* [Stoicism](https://en.wikipedia.org/wiki/Stoicism) and [Absurdism](https://en.wikipedia.org/wiki/Absurdism)
30+
* Rock Climbing
31+
* SCUBA Diving
32+
* Fringe Cultures
33+
* Photography and Video Editing
34+
35+
*Portrait Graphic by [Alyssa Alarcón](https://alyssalarcondesign.com/), based on a photo by [Townsend Colon](https://twitter.com/townsendcolon?lang=en)*.
36+
37+
*Content on this site is copyright 2015 to infinity unless otherwise stated.*
38+
*Any code on this site can be considered [MIT licensed](https://opensource.org/licenses/MIT)*.
39+
*Any views expressed on this site are those of the author and do not reflect views held by past or present employers.*

‎theme/static/css/jaredandrews.css‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,11 @@ h1, h2, h3, h4 {
1818
float: left;
1919
}
2020

21+
.large {
22+
display: block;
23+
float: none;
24+
}
25+
2126
.header {
2227
margin-bottom: 2.5rem;
2328
}
@@ -32,11 +37,11 @@ h1, h2, h3, h4 {
3237
text-align: center;
3338
}
3439

35-
.article-title {
40+
.title {
3641
margin-bottom: 0rem;
3742
}
3843

39-
.article-metadata {
44+
.metadata {
4045
margin-bottom: 2rem;
4146
}
4247

@@ -79,6 +84,11 @@ p {
7984

8085
/* Larger than tablet */
8186
@media (min-width: 750px) {
87+
.large {
88+
display: inline-block;
89+
float: left;
90+
}
91+
8292
.header .site-title {
8393
float: left;
8494
}
@@ -87,6 +97,7 @@ p {
8797
display: inline;
8898
float: right;
8999
}
100+
90101
}
91102

92103
/* Larger than desktop */

‎theme/templates/article.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
{% extends "base.html" %}
33
{% block title %}{{ article.title }} — {{ SITENAME }}{% endblock %}
44
{% block content %}
5-
<h2 class="article-title">{{ article.title }}</h1>
6-
<footer class="article-metadata">
5+
<h2 class="title">{{ article.title }}</h2>
6+
<footer class="metadata">
77
{{ get_meta_data_html(article) }}
88
</footer>
9-
<div class="article-body">{{ article.content }}</div>
9+
<div>{{ article.content }}</div>
1010
{% if article.category != DEFAULT_CATEGORY %}
1111
<div class="row">
1212
{% if article.prev_article_in_category %}

‎theme/templates/base.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222

2323
<div class="row header">
2424
<h1 class="site-title"><a href="{{ SITEURL }}">Jared Andrews</a></h1>
25-
<nav><a href="#">about</a> / <a href="{{ SITEURL }}/archives.html">archive</a> / <a href="#">rss</a></nav>
25+
<nav><a href="{{ SITEURL }}/pages/about.html">about</a> / <a href="{{ SITEURL }}/archives.html">archive</a> / <a href="#">rss</a></nav>
2626
</div>
2727

2828
<div class="row">

‎theme/templates/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@
22
{% extends "base.html" %}
33
{% block content %}
44
<div class="row">
5-
<img class="portrait" src="{{ SITEURL }}/images/jared.png" alt="Portrait of the Author"/>
5+
<img class="portrait" src="{{ SITEURL }}/images/jared_small.png" alt="Portrait of the Author"/>
66

77
<p>
88
Greetings! My name is Jared Andrews, I am a location
99
independent, freelance software
1010
developer. This website is a place where I put technology and
1111
writing projects that don't belong anywhere else. If you are
1212
interested in learning more about me, check out the
13-
<a href="{{ SITEURL }}/about.html">About page</a>.
13+
<a href="{{ SITEURL }}/pages/about.html">About page</a>.
1414
</p>
1515

1616
<p>

‎theme/templates/macros.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,15 @@
1515
{% endif %}
1616
{% endmacro %}
1717

18+
{% macro get_page_meta_data_html(page) %}
19+
Last Modified:
20+
{% if page.modified %}
21+
{{ page.modified.strftime("%b %d, %Y") }}
22+
{% elif page.date %}
23+
{{ page.modified.strftime("%b %d, %Y") }}
24+
{% endif %}
25+
{% endmacro %}
26+
1827
{% macro get_article_list(articles, default_category, hidden_category) %}
1928
<ul>
2029
{% for article in articles %}

0 commit comments

Comments
 (0)