diff --git a/README.md b/README.md index a86ed38..c3c0af4 100644 --- a/README.md +++ b/README.md @@ -21,6 +21,7 @@ A paper-style theme for [Jekyll]. Check out the GitHub pages [deployment] to see - 🎨 Responsive, [customisable] design - 🕔 See post reading time +- 🗄️ 'First published on' icons - 🏷️ Browse posts by tags - 🧑 Browse posts by author - 📺 Embedded [YouTube, Twitch, etc][videos] diff --git a/_config.yml b/_config.yml index 67aa613..2cc3dfd 100644 --- a/_config.yml +++ b/_config.yml @@ -91,14 +91,17 @@ wren: # instance: mastodon.cloud # - username: jekyll2 # instance: mastodon.social + medium: jekyll # microdotblog: jekyll # pinterest: jekyll + # reddit: jekyll + telegram: jekyll + # tumblr: jekyll twitter: jekyllrb # youtube: jekyll youtube_channel: # link which makes user of ID - username: CloudCannon id: UC8CXR0-3I70i1tfPg1PAE1g - telegram: jekyll google-plus: # link not covered by Wren's data - username: jekyll @@ -155,18 +158,27 @@ wren_social_data: url: linkedin.com/in mastodon: name: Mastodon + medium: + name: Medium + url: medium.com microdotblog: name: Micro.blog url: micro.blog pinterest: name: Pinterest url: pinterest.com + reddit: + name: Reddit + url: reddit.com/u stackoverflow: name: StackOverflow url: stackoverflow.com/users telegram: name: Telegram url: t.me + tumblr: + name: Tumblr + url: tumblr.com/blog/view twitter: name: Twitter url: twitter.com diff --git a/_includes/meta.html b/_includes/meta.html index adcefbe..9ec3a55 100644 --- a/_includes/meta.html +++ b/_includes/meta.html @@ -22,8 +22,10 @@ + {%comment%} passing content to be analysed by reading-time explicitly {%endcomment%} • {%- include reading-time.html text=p.content -%} + {%comment%} if tag given, give as comma-separated list with links to tag page {%endcomment%} {%- if p.tags -%} {%- for tag in p.tags -%} @@ -32,6 +34,7 @@ {%- if forloop.last == false %}, {% endif %} {%- endfor -%} {%- endif %} + {%comment%} if authors given, give as comma-separated list {%endcomment%} {%- if p.author -%} {%- for author in p.author -%} @@ -42,9 +45,38 @@ {{author}} {%- if forloop.last == false -%}, {%- endif -%} - + {% endfor %} {%- endif -%} + + {%comment%} indicate if the post was first published elsewhere first {%endcomment%} + {%- if p.first_published_on -%} + {%comment%} allow specifying a specific URL at which it was published {%endcomment%} + {%- if p.first_published_url -%} + {%- assign fpo_string = "First published on " | append: p.first_published_url -%} + {%- else -%} + {%- assign fpo_string = "First published on " | append: p.first_published_on -%} + {%- endif -%} + {%comment%} construct expected icon path, then check if exists {%endcomment%} + {%- assign icon_path = p.first_published_on | prepend: 'assets/social-icons/' | append: '.svg' -%} + {%- assign found = false -%} + {%- for static_file in site.static_files -%} + {%- if static_file.path contains icon_path -%} + {%- assign found = true -%} + {%- endif -%} + {%- endfor -%} + {%comment%} if it doesn't, use the default source icon {%endcomment%} + {%- if found == false -%} + {%- assign icon_path = 'assets/social-icons/Default.svg' -%} + {%- endif -%} + {%comment%} put that all together with a.svg.use for the button {%endcomment%} + • + + + + + + {%- endif -%} {%comment%} add user's custom meta; anything can go here! {%endcomment%} {%- include custom-meta.html -%} -

\ No newline at end of file +

diff --git a/_includes/social-list.html b/_includes/social-list.html index cbdb4d8..19c8062 100644 --- a/_includes/social-list.html +++ b/_includes/social-list.html @@ -23,7 +23,7 @@ {%- assign url = entry.instance | default: data[key]["url"] -%} {%comment%} handle service specific url delimiters {%endcomment%} - {%- if key == "mastodon" -%} + {%- if key == "mastodon" or key == "medium" -%} {%- assign delimiter = "/@" -%} {%- else -%} {%- assign delimiter = "/" -%} diff --git a/_posts/2021-09-12-welcome-to-wren.md b/_posts/2021-09-12-welcome-to-wren.md new file mode 100644 index 0000000..f33960c --- /dev/null +++ b/_posts/2021-09-12-welcome-to-wren.md @@ -0,0 +1,50 @@ +--- +title: Welcome to Wren +author: Renny Wrennington +layout: post +tags: [jekyll] +date: '2021-09-12 20:50:16' +modified_date: '2021-09-13 15:23:01' +first_published_on: Ghost +first_published_url: wren.ghost.org +--- + +The first thing you'll notice is the post-meta gives more info. [Minima][Minima's post-meta] has the date, modified date, and page authors. Wren improves the modified date formatting[^1], shows the reading time, any tags and authors (both linked to post-list pages), and then finally indicates if the post was originally published elsewhere (given in the frontmatter by service name, or name and URL). + +[Minima's post-meta]: https://github.com/jekyll/minima/blob/master/_layouts/post.html#L9-L26 + +Wren uses [kramdown] rather than [GitHub Flavoured Markdown] for rendering markdown which means that we've access to footnotes[^2], abbreviation syntax from PHP, inline attributes to *change style*{: style="font-family: "Times New Roman", Times, serif; font-stretch: condensed; font-style: italic; text-decoration: underline wavy firebrick;" } without inline HTML, and more. See the [source] for this page to see how it's done. + +[kramdown]: https://github.com/gettalong/kramdown +[GitHub Flavoured Markdown]: https://github.github.com/gfm/ +[source]: https://github.com/Foggalong/Wren/blob/main/_posts/2021-09-12-welcome-to-wren.md +*[PHP]: PHP Hypertext Preprocessor + +![Photo of Me]({{ '/images/profile.jpg' | relative_url }}){: class="left" width="90px" } + +Minima's default SASS does have some default stylings for images, but Wren extends that and uses kramdown's image syntax so that our images can be left aligned with text wrap by adding `{: class="left" }` after than standard markdown. + +![Photo of Me]({{ '/images/profile.jpg' | relative_url }}){: class="right" width="90px" } + +We can similarly right align using `{: class="right" }`. In both cases Wren will automatically add appropriate margins so that the page doesn't get too cluttered. If you're using a thin form-factor the UI will also respond by switching off text-wrapping. + +From one medium to another, embedding a video from an external source like + +{% include video-player.html site="YouTube" id="T1itpPvFWHI" alt="Intro Video" %} + +is as simple as + +```liquid +{% raw %}{% include video-player.html site="YouTube" id="T1itpPvFWHI" alt="Jekyll Intro" %}{% endraw %} +``` + +where `T1itpPvFWHI` is the video ID in the [YouTube URL]. This isn't restricted to YouTube either; it works with [Twitch, Vimeo, and more][demo]! + +[YouTube URL]: https://www.youtube.com/watch?v=T1itpPvFWHI +[Jekyll Embed Video]: https://github.com/nathancy/jekyll-embed-video +[demo]: {{ 'video-embed-demo' | relative_url }} + +----- + +[^1]: It adds an asterisk after the date when a post's been modified and the date of modification appears on hover. +[^2]: Which you've already seen, but there's another one! diff --git a/_sass/wren/layout.scss b/_sass/wren/layout.scss index cd55b59..b49a84e 100644 --- a/_sass/wren/layout.scss +++ b/_sass/wren/layout.scss @@ -93,7 +93,7 @@ a { text-decoration: none; padding: $spacing-unit / 4; - + svg { fill: $text-color; filter: $base-drop-shadow; @@ -147,6 +147,12 @@ a:hover, a:active { text-decoration: underline dotted; } + + svg { + fill: $brand-color; + width: 16px; + height: 16px; + } } .post-link { @@ -163,7 +169,7 @@ .post-list-header { // they have slightly smaller font @include relative-font-size(1.5); - + // they need less space margin-top: $spacing-unit * 1.5; margin-bottom: $spacing-unit / 2; @@ -176,13 +182,13 @@ // ...unless they're being inspected a:hover, a:active { text-decoration: underline dotted; - } + } } .post-list { margin-left: 0; list-style: none; - + > li { margin-bottom: $spacing-unit; } diff --git a/assets/social-icons/Blogger.svg b/assets/social-icons/Blogger.svg new file mode 100644 index 0000000..3328b22 --- /dev/null +++ b/assets/social-icons/Blogger.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/social-icons/DEV.svg b/assets/social-icons/DEV.svg index 1a0eaf3..2b8e7ad 100644 --- a/assets/social-icons/DEV.svg +++ b/assets/social-icons/DEV.svg @@ -1,4 +1,3 @@ - - - - \ No newline at end of file + + + diff --git a/assets/social-icons/Default.svg b/assets/social-icons/Default.svg index 7144b8a..3ba2943 100644 --- a/assets/social-icons/Default.svg +++ b/assets/social-icons/Default.svg @@ -1,3 +1,3 @@ - - - \ No newline at end of file + + + diff --git a/assets/social-icons/Dribbble.svg b/assets/social-icons/Dribbble.svg index 94127f8..a3a3dac 100644 --- a/assets/social-icons/Dribbble.svg +++ b/assets/social-icons/Dribbble.svg @@ -1,3 +1,3 @@ - + - \ No newline at end of file + diff --git a/assets/social-icons/Facebook.svg b/assets/social-icons/Facebook.svg index b9a7797..275a759 100644 --- a/assets/social-icons/Facebook.svg +++ b/assets/social-icons/Facebook.svg @@ -1,3 +1,3 @@ - - - \ No newline at end of file + + + diff --git a/assets/social-icons/Flickr.svg b/assets/social-icons/Flickr.svg index f1328c8..032b981 100644 --- a/assets/social-icons/Flickr.svg +++ b/assets/social-icons/Flickr.svg @@ -1,3 +1,3 @@ - - - \ No newline at end of file + + + diff --git a/assets/social-icons/Ghost.svg b/assets/social-icons/Ghost.svg new file mode 100644 index 0000000..2313e9d --- /dev/null +++ b/assets/social-icons/Ghost.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/social-icons/GitHub.svg b/assets/social-icons/GitHub.svg index b0bd9e9..060eee7 100644 --- a/assets/social-icons/GitHub.svg +++ b/assets/social-icons/GitHub.svg @@ -1,3 +1,3 @@ - - - \ No newline at end of file + + + diff --git a/assets/social-icons/GitLab.svg b/assets/social-icons/GitLab.svg index eb32d95..cb10cb4 100644 --- a/assets/social-icons/GitLab.svg +++ b/assets/social-icons/GitLab.svg @@ -1,3 +1,3 @@ - - - \ No newline at end of file + + + diff --git a/assets/social-icons/Instagram.svg b/assets/social-icons/Instagram.svg index 7685a32..90db2b2 100644 --- a/assets/social-icons/Instagram.svg +++ b/assets/social-icons/Instagram.svg @@ -1,3 +1,5 @@ - - - \ No newline at end of file + + + + + diff --git a/assets/social-icons/Keybase.svg b/assets/social-icons/Keybase.svg index 07afc08..d6fadf1 100644 --- a/assets/social-icons/Keybase.svg +++ b/assets/social-icons/Keybase.svg @@ -1,6 +1,6 @@ - - - - - - \ No newline at end of file + + + + + + diff --git a/assets/social-icons/LinkedIn.svg b/assets/social-icons/LinkedIn.svg index 0af1f24..0a19df5 100644 --- a/assets/social-icons/LinkedIn.svg +++ b/assets/social-icons/LinkedIn.svg @@ -1,3 +1,3 @@ - - - \ No newline at end of file + + + diff --git a/assets/social-icons/Mastodon.svg b/assets/social-icons/Mastodon.svg index f196bce..2a45635 100644 --- a/assets/social-icons/Mastodon.svg +++ b/assets/social-icons/Mastodon.svg @@ -1,3 +1,3 @@ - - - \ No newline at end of file + + + diff --git a/assets/social-icons/Medium.svg b/assets/social-icons/Medium.svg new file mode 100644 index 0000000..25debba --- /dev/null +++ b/assets/social-icons/Medium.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/social-icons/Micro.blog.svg b/assets/social-icons/Micro.blog.svg index 973e8a8..e3d0193 100644 --- a/assets/social-icons/Micro.blog.svg +++ b/assets/social-icons/Micro.blog.svg @@ -1,3 +1,3 @@ - - - \ No newline at end of file + + + diff --git a/assets/social-icons/Pinterest.svg b/assets/social-icons/Pinterest.svg index 31be002..71b882b 100644 --- a/assets/social-icons/Pinterest.svg +++ b/assets/social-icons/Pinterest.svg @@ -1,3 +1,3 @@ - - - \ No newline at end of file + + + diff --git a/assets/social-icons/Reddit.svg b/assets/social-icons/Reddit.svg new file mode 100644 index 0000000..e4a7fcd --- /dev/null +++ b/assets/social-icons/Reddit.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/social-icons/StackOverflow.svg b/assets/social-icons/StackOverflow.svg index 9526e9b..1dc89d1 100644 --- a/assets/social-icons/StackOverflow.svg +++ b/assets/social-icons/StackOverflow.svg @@ -1,3 +1,3 @@ - - - \ No newline at end of file + + + diff --git a/assets/social-icons/Telegram.svg b/assets/social-icons/Telegram.svg index 08037e3..001b4a5 100644 --- a/assets/social-icons/Telegram.svg +++ b/assets/social-icons/Telegram.svg @@ -1,3 +1,3 @@ - - - \ No newline at end of file + + + diff --git a/assets/social-icons/Tumblr.svg b/assets/social-icons/Tumblr.svg new file mode 100644 index 0000000..495fbeb --- /dev/null +++ b/assets/social-icons/Tumblr.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/social-icons/Twitter.svg b/assets/social-icons/Twitter.svg index bb402b3..5611f86 100644 --- a/assets/social-icons/Twitter.svg +++ b/assets/social-icons/Twitter.svg @@ -1,3 +1,3 @@ - - - \ No newline at end of file + + + diff --git a/assets/social-icons/Wordpress.svg b/assets/social-icons/Wordpress.svg new file mode 100644 index 0000000..965f9fd --- /dev/null +++ b/assets/social-icons/Wordpress.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/social-icons/YouTube.svg b/assets/social-icons/YouTube.svg index e814739..28be1ce 100644 --- a/assets/social-icons/YouTube.svg +++ b/assets/social-icons/YouTube.svg @@ -1,3 +1,3 @@ - - - \ No newline at end of file + + + diff --git a/blog/videos.md b/blog/videos.md index e281cbd..1c54ceb 100644 --- a/blog/videos.md +++ b/blog/videos.md @@ -30,7 +30,7 @@ Using Google Drive videos is a bit more complicated; [check the README][wiki] fo {%- include video-player.html site="Google Drive" id="0B7L_dMcaZknxVTRndmdSQ0F5OFE/preview" alt="Road Rage" -%} ```liquid -{% raw %}{%- include video-player.html site="Dailymotion" id="x8429i4" alt="Former FBI Agent Breaks Down His Own Body Language" -%}{% endraw %} +{% raw %}{%- include video-player.html site="Dailymotion" id="x8429i4" alt="Road Rage" -%}{% endraw %} ``` ## Streamable