Improve authory byline on blog posts (#1304)

* Improve authory byline on blog posts * Display optional author image * Display handle on separate line * Update carolyn's posts to link to her website * Fix makefile to build future dated posts Signed-off-by: Carolyn Van Slyck <me@carolynvanslyck.com> * Document how to write a blog post Signed-off-by: Carolyn Van Slyck <me@carolynvanslyck.com> * Center author name under image Signed-off-by: Carolyn Van Slyck <me@carolynvanslyck.com>
getporter · Sep 28, 2020 · 5730aed · 5730aed
1 parent c96aaf8
commit 5730aed
Show file tree

Hide file tree

Showing 12 changed files with 78 additions and 9 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -13,6 +13,7 @@
   * [Makefile explained](#makefile-explained)
   * [Install mixins](#install-mixins)
   * [Preview documentation](#preview-documentation)
+  * [Write a blog post](#write-a-blog-post)
 * [Code structure and practices](#code-structure-and-practices)
   * [What is the general code layout?](#what-is-the-general-code-layout)
   * [Logging](#logging)
@@ -313,6 +314,42 @@ site/docs.
 We welcome your contribution to improve our documentation, and we hope it is an
 easy process! ❤️
 
+## Write a blog post
+
+Thank you for writing a post for our blog! 🙇‍♀️ Here's what you need to do to create
+a new blog post and then preview it:
+
+1. Go to /docs/content/blog and create a new file. Whatever you name the file
+    will be the last part of the URL. For example a file named
+    "porter-collaboration.md" will be located at
+    <https://porter.sh/blog/porter-collaboration/>.
+
+1. At the top of the file copy and paste the frontmatter template below. The
+    frontmatter is YAML that instucts the blogging software, Hugo, how to render the
+    blog post.
+
+    ```yaml
+   ---
+   title: "Title of Your Blog Post in Titlecase"
+   description: "SEO description of your post, displayed in search engine results."
+   date: "2020-07-28"
+   authorname: "Your Name"
+   author: "@yourhandle" #Not used to link to github/twitter, but informally that's what people put here
+   authorlink: "https://link/to/your/website" # link to your personal website, github, social media...
+   authorimage: "https://link/to/your/profile/picture" # Optional, https://github.com/yourhandle.png works great
+   tags: [] # Optional, look at other pages and pick tags that are already in use, e.g. ["mixins"]
+   ---
+   ```
+
+1. [Preview](#preview-documentation) the website and click "Blog" at the top right to find your blog post.
+
+1. When you create a pull request, look at the checks run by the pull request,
+    and click "Details" on the *netlify/porter/deploy-preview** one to see a live
+    preview of your pull request.
+
+Our pull request preview and the live site will not show posts with a date in
+the future. If you don't see your post, change the date to today's date.
+
 ## Command Documentation
 
 Our commands are documented at <https://porter.sh/cli> and that documentation is

diff --git a/Makefile b/Makefile
@@ -105,7 +105,7 @@ docs-gen:
 
 docs-preview: docs-stop-preview
 	@docker run -d -v $$PWD/docs:/src -p 1313:1313 --name porter-docs \
-	klakegg/hugo:0.53-ext-alpine server --buildDrafts --noHTTPCache --watch --bind=0.0.0.0
+	klakegg/hugo:0.53-ext-alpine server -D -F --noHTTPCache --watch --bind=0.0.0.0
 	# Wait for the documentation web server to finish rendering
 	@until docker logs porter-docs | grep -m 1  "Web Server is available"; do : ; done
 	@open "http://localhost:1313/docs/"

diff --git a/docs/content/blog/docker-mixin-blog-post.md b/docs/content/blog/docker-mixin-blog-post.md
@@ -5,6 +5,7 @@ date: "2020-07-28"
 authorname:  Gauri Madhok
 author: "@gaurimadhok"
 authorlink: "https://twitter.com/gaurimadhok"
+authorimage: "https://github.com/gaurimadhok.png"
 tags: ["docker", "mixins"]
 ---
 

diff --git a/docs/content/blog/porter-collaboration.md b/docs/content/blog/porter-collaboration.md
@@ -4,7 +4,8 @@ description: "Porter's latest release makes managing a bundle's lifecycle as a t
 date: "2020-02-19"
 authorname: "Carolyn Van Slyck"
 author: "@carolynvs"
-authorlink: "https://twitter.com/carolynvs"
+authorlink: "https://carolynvanslyck.com/"
+authorimage: "https://github.com/carolynvs.png"
 image: "images/porter-twitter-card.png"
 tags: ["plugins"]
 ---

diff --git a/docs/content/blog/porter-package-search.md b/docs/content/blog/porter-package-search.md
@@ -5,6 +5,7 @@ date: "2020-03-02"
 authorname: "Vaughn Dice"
 author: "@vdice"
 authorlink: "https://github.com/vdice"
+authorimage: "https://github.com/vdice.png"
 tags: ["plugins", "mixins"]
 ---
 

diff --git a/docs/content/blog/using-docker-in-bundles.md b/docs/content/blog/using-docker-in-bundles.md
@@ -4,7 +4,8 @@ description: "Now you can use Docker and Docker Compose from inside Porter bundl
 date: "2020-04-23"
 authorname: "Carolyn Van Slyck"
 author: "@carolynvs"
-authorlink: "https://twitter.com/carolynvs"
+authorlink: "https://carolynvanslyck.com/"
+authorimage: "https://github.com/carolynvs.png"
 image: "images/porter-with-docker-twitter-card.png"
 tags: ["docker", "mixins"]
 ---

diff --git a/docs/resources/_gen/assets/scss/sass/styles.scss_b95b077eb505d5c0aff8055eaced30ad.content b/docs/resources/_gen/assets/scss/sass/styles.scss_b95b077eb505d5c0aff8055eaced30ad.content
diff --git a/docs/resources/_gen/assets/scss/sass/styles.scss_f300667da4f5b5f84e1a9e0702b2fdde.content b/docs/resources/_gen/assets/scss/sass/styles.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
@@ -7345,6 +7345,14 @@ nav.home-nav {
         -webkit-box-shadow: none 2px 0 rgba(30, 30, 30, 0.25);
         -moz-box-shadow: none 2px 0 rgba(30, 30, 30, 0.25);
         box-shadow: none 2px 0 rgba(30, 30, 30, 0.25); }
+    .blog-layout .main.blog-single .content-wrap article .author {
+      text-align: center;
+      width: max-content; }
+      .blog-layout .main.blog-single .content-wrap article .author img {
+        max-width: 10rem;
+        display: block;
+        margin: 0;
+        padding: 0; }
 
 html,
 body {

diff --git a/docs/themes/porter/layouts/blog/single.html b/docs/themes/porter/layouts/blog/single.html
@@ -12,7 +12,8 @@
           <h1>{{ .Title }}</h1>
           <p class="date">{{ dateFormat "Jan 2, 2006" .Date }}</p>
           {{ .Content }}
-          <p class="author"><a href="{{ .Params.authorlink }}" target="_blank">{{ .Params.authorname }} - {{ .Params.author }}</a></p>
+
+          {{ partial "author.html" .}}
           {{ partial "tags.html" . }}
         </article>
       </div>

diff --git a/docs/themes/porter/layouts/partials/author.html b/docs/themes/porter/layouts/partials/author.html
@@ -0,0 +1,11 @@
+<figure class="author">
+    <a href="{{ .Params.authorlink }}" target="_blank">
+    {{ if .Params.authorimage }}
+    <img src="{{ .Params.authorimage }}" />
+    {{ end}}
+    <figcaption>
+        {{ .Params.authorname }}<br/>
+        {{ .Params.author }}
+    </figcaption>
+    </a>
+</figure>
diff --git a/docs/themes/porter/layouts/post/single.html b/docs/themes/porter/layouts/post/single.html
diff --git a/docs/themes/porter/static/src/sass/helm-blog.scss b/docs/themes/porter/static/src/sass/helm-blog.scss
@@ -115,6 +115,18 @@
               @include box-shadow(none);
             }
           }
+
+          .author {
+            text-align: center;
+            width: max-content;
+
+            img {
+              max-width: 10rem;
+              display: block;
+              margin: 0;
+              padding: 0;
+            }
+          }
         }
       }
     }