refactor: forbetra vising av forfattarinformasjon, innleggsmedium

Rakefile

@@ -5,6 +5,15 @@ require 'open-uri'
 require 'json'
 require 'yaml'
 require 'net/http'
+require 'optparse'
+
+def slugify(title)
+  slug = title.downcase
+    .gsub(/\s+|_/, '-')
+    .gsub(/[^a-z0-9\-]/, '')
+    .gsub(/^-|-$/, '')
+  slug
+end
 
 task :default => [:install, :serve, :build]
 
@@ -166,75 +175,118 @@ task :new_post, [:title] do |t, args|
   puts "Created new post: #{filename}"
 end
 
-desc 'Create a new draft'
-task :new_draft, [:title] do |t, args|
-  title = args[:title]
+namespace :draft do |args|
+  desc 'Create a new draft'
+  task :new do
+    title = nil
 
-  if title.nil?
-    puts 'Usage: rake new_draft[title]'
-    exit 1
-  end
+    OptionParser.new do |opts|
+      opts.banner = "Usage: rake draft:new -- -t 'Draft title'"
+      opts.on("-t", "--title TITLE", "Title of the draft") do |t|
+        title = t
+      end
 
-  filename = "_drafts/#{title.downcase.strip.gsub(' ', '-')}.md"
-  if File.exist?(filename)
-    puts 'File already exists'
-    exit 1
-  end
+      args = opts.order!(ARGV) {}
+      opts.parse!(args)
+    end
 
-  FileUtils.mkdir_p('_drafts')
-  File.open(filename, 'w') do |file|
-    file.write("---\n")
-    file.write("layout: post\n")
-    file.write("title: \"#{title}\"\n")
-    file.write("date: #{DateTime.now.strftime('%Y-%m-%d %H:%M:%S %z')}\n")
-    file.write("author: \n")
-    file.write("categories: \n")
-    file.write("summary: \"\"\n")
-    file.write("---\n")
-  end
+    if title.nil?
+      puts 'No title specified'
+      exit 1
+    end
 
-  puts "Created new draft: #{filename}"
-end
+    filename = "_drafts/#{slugify(title)}.md"
+    if File.exist?(filename)
+      puts 'File already exists'
+      exit 1
+    end
 
-desc 'Publish a draft'
-task :publish_draft, [:title] do |t, args|
-  title = args[:title]
+    FileUtils.mkdir_p('_drafts')
+    File.open(filename, 'w') do |file|
+      file.write("---\n")
+      file.write("layout: post\n")
+      file.write("title: \"#{title}\"\n")
+      file.write("date: #{DateTime.now.strftime('%Y-%m-%d %H:%M:%S %z')}\n")
+      file.write("author: \n")
+      file.write("categories: \n")
+      file.write("summary: \"\"\n")
+      file.write("---\n")
+    end
 
-  if title.nil?
-    puts 'Usage: rake publish_draft[title]'
-    exit 1
-  end
+    FileUtils.mkdir_p("assets/attachments/drafts/#{slugify(title)}")
 
-  draft_filename = "_drafts/#{title.downcase.strip.gsub(' ', '-')}.md"
-  if !File.exist?(draft_filename)
-    puts "Draft not found: #{draft_filename}"
-    exit 1
+    puts "Created new draft: #{filename}"
+    exit 0
   end
 
-  now = DateTime.now
-  date = now.strftime('%Y-%m-%d')
-  filename = "_posts/#{date}-#{title.downcase.strip.gsub(' ', '-')}.md"
-  if File.exist?(filename)
-    puts "Post already exists: #{filename}"
-    exit 1
-  end
+  desc 'Publish a draft or all drafts'
+  task :publish do
+    options = {}
+    OptionParser.new do |opts|
+      opts.banner = "Usage: rake draft:publish -- [options]"
 
-  FileUtils.mv(draft_filename, filename)
+      opts.on("-t", "--title TITLE", "Title of the draft to publish") do |t|
+        options[:title] = t
+      end
 
-  content = File.read(filename)
-  content = content.sub(/date: .*/, "date: #{now.strftime('%Y-%m-%d %H:%M:%S %z')}")
-  File.open(filename, 'w') { |file| file.puts content }
+      opts.on("-a", "--all", "Publish all drafts") do |a|
+        options[:all] = a
+      end
 
-  puts "Published draft: #{filename}"
-end
+      args = opts.order!(ARGV) {}
+      opts.parse!(args)
+    end
 
-desc 'Publish all drafts'
-task :publish_all_drafts do
-  drafts = Dir.glob('_drafts/*.md')
+    publish_draft = lambda do |title|
+      slug = title.downcase.strip.gsub(' ', '-')
+      draft_filename = "_drafts/#{slug}.md"
+      if !File.exist?(draft_filename)
+        puts "Draft not found: #{draft_filename}"
+        return
+      end
+
+      now = DateTime.now
+      date = now.strftime('%Y-%m-%d')
+      filename = "_posts/#{date}-#{slug}.md"
+      if File.exist?(filename)
+        puts "Post already exists: #{filename}"
+        return
+      end
+
+      FileUtils.mv(draft_filename, filename)
+      content = File.read(filename)
+      content = content.sub(/date: .*/, "date: #{now.strftime('%Y-%m-%d %H:%M:%S %z')}")
+      File.open(filename, 'w') { |file| file.puts content }
+
+      draft_attachments_dir = "assets/attachments/drafts/#{slug}"
+      post_attachments_dir = "assets/attachments/#{now.strftime('%Y/%m/%d')}/#{slug}"
+      if Dir.exist?(draft_attachments_dir)
+        # only move the files if the post has attachments
+        if Dir.glob("#{draft_attachments_dir}/*").length > 0
+          FileUtils.mkdir_p(post_attachments_dir)
+          FileUtils.mv(Dir.glob("#{draft_attachments_dir}/*"), post_attachments_dir)
+        end
+
+        FileUtils.remove_dir(draft_attachments_dir)
+      end
+
+      puts "Published draft: #{filename}"
+    end
 
-  drafts.each do |draft|
-    title = File.basename(draft, '.md')
-    Rake::Task['publish_draft'].invoke(title)
+    if options[:all]
+      drafts = Dir.glob('_drafts/*.md')
+      drafts.each do |draft|
+        title = File.basename(draft, '.md')
+        publish_draft.call(title)
+      end
+    elsif options[:title]
+      publish_draft.call(options[:title])
+    else
+      puts 'Error: No title specified and --all not set. Use --title to specify a draft or --all to publish all drafts.'
+      exit 1
+    end
+
+    exit 0
   end
 end
 

_data/authors.yml

@@ -1,6 +1,9 @@
 asimonian:
   name: Adaline Simonian
+  bio: Adaline er grunnleggjaren av Ordbok API-prosjektet. Hen er ein full-stack utviklar og har ein lidenskap for språk og teknologi.
   picture: '/assets/img/avatars/asimonian.jpg'
   social:
     - title: GitHub
       url: https://github.com/adalinesimonian
+    - title: Bluesky
+      url: https://bsky.app/profile/adaline.bsky.social

_includes/author-blurb.html

@@ -0,0 +1,39 @@
+<span
+  class="d-inline-flex justify-center align-items-center ps-1 pe-2 py-1 mx-1 my-3"
+>
+  <span class="me-2">
+    {%- include avatar.html author=include.author size="4em" -%}
+  </span>
+  <span class="d-flex flex-column align-items-start justify-content-center">
+    <span
+      itemprop="author"
+      itemscope
+      itemtype="http://schema.org/Person"
+      class="d-flex align-items-center mb-1 fw-bolder"
+      ><span class="p-author h-card" itemprop="name">
+        {{- site.data.authors[include.author].name | default: include.author -}}
+      </span></span
+    >
+    <span class="text-deemphasize small mb-1">
+      {%- if site.data.authors[include.author].bio -%}
+        <span itemprop="description">{{- site.data.authors[include.author].bio -}}</span>
+      {%- endif -%}
+    </span>
+
+    {%- if site.data.authors[include.author].social -%}
+      <span class="d-flex flex-row align-items-center justify-content-start">
+        {%- for social in site.data.authors[include.author].social -%}
+          <a
+            href="{{- social.url -}}"
+            class="small me-2"
+            itemprop="sameAs"
+            target="_blank"
+            rel="noopener"
+          >
+            {{- social.title -}}
+          </a>
+        {%- endfor -%}
+      </span>
+    {%- endif -%}
+  </span>
+</span>

_includes/avatar.html

@@ -1,36 +1,31 @@
-<style>
-  .author-avatar,
-  .author-avatar-placeholder {
-    width: {{ include.size | default: "32px" }};
-    height: {{ include.size | default: "32px" }};
-  }
-
-  .author-avatar {
-    object-fit: cover;
-  }
-
-  .author-avatar-placeholder {
-    line-height: {{ include.size | default: "32px" }};
-    text-align: center;
-    color: white;
-    background-color: #6c757d;
-    border-radius: 50%;
-    display: inline-block;
-  }
-</style>
-
+{% assign size = include.size | default: '32px' %}
 {% assign pictureUrl = site.data.authors[include.author].picture %}
 {% if pictureUrl %}
   <img
     src="{{ pictureUrl }}"
-    class="rounded-circle img-fluid author-avatar"
+    class="rounded-circle object-fit-cover author-avatar"
+    style="width: {{ size }}; height: {{ size }}"
     alt="{{ include.author }}'s avatar"
   >
 {% else %}
-  <div
-    class="rounded-circle bg-secondary d-inline-block author-avatar-placeholder"
+  <span
+    class="rounded-circle bg-secondary d-inline-flex justify-content-center align-items-center author-avatar"
+    style="width: 1em; height: 1em; font-size: {{ size }}"
   >
-    {% assign initials = include.author | split: ' ' | map: 'first' | join: '' %}
-    {{ initials }}
-  </div>
+    {% assign name = site.data.authors[include.author].name | default: include.author %}
+    {% assign initials = name | initials %}
+    {% comment %}
+      determine text size based on how many characters long the initials are
+      the longer the initials, the smaller the font size
+      2-character initials will have a font size of 0.5em
+
+      y=-\frac{1}{8}x+0.75
+
+      where x is the number of characters in the initials
+    {% endcomment %}
+    {% assign fontSize = -0.125 | times: initials.size | plus: 0.75 %}
+    <span class="text-center" style="font-size: {{ fontSize }}em">
+      {{ initials }}
+    </span>
+  </span>
 {% endif %}

_includes/post-image.html

@@ -2,29 +2,17 @@
 {% assign caption = include.caption %}
 {% assign alt = include.alt %}
 
-{% if image_path contains 'http' %}
+{% assign starts_with_http = image_path | starts_with: 'http' %}
+{% if starts_with_http %}
   {% assign image_path = image_path %}
 {% else %}
-  {% comment %}
-    Images are stored relative to the post they are in, e.g. a post with the
-    filename 2024-01-01-my-post.md would have images stored in
-    /assets/attachments/2024/01/01/my-post/
-  {% endcomment %}
-
-  {%
-    assign image_path = '/assets/attachments/'
-    | append: (page.date | date: '%Y/%m/%d')
-    | append: '/'
-    | append: page.slug
-    | append: '/'
-    | append: image_path
-  %}
+  {% assign image_path = image_path | post_asset_path | relative_url %}
 {% endif %}
 
 <div class="container position-relative popout-md px-0 py-1 py-md-3 py-lg-3 py-xl-5">
   <div class="row">
     <div class="col text-center">
-      <img src="/assets/attachments/{{ image_path }}" class="img-fluid" alt="{{ alt }}">
+      <img src="{{ image_path }}" class="img-fluid" alt="{{ alt }}">
       {% if caption %}
         <div class="caption py-3 small text-deemphasize">{{ caption }}</div>
       {% endif %}

_layouts/home.html

@@ -57,7 +57,7 @@ <h2 class="post-list-heading py-2">{{ page.list_title | default: 'Siste innlegg'
                 <div class="row g-0">
                   <div class="col m-auto p-3">
                     <img
-                      src="{{ post.image | default: '/assets/img/card-image-placeholder.png' }}"
+                      src="{{ post.image | post_asset_path: post | fallback_path: '/assets/img/card-image-placeholder.png' | relative_url }}"
                       class="img-fluid"
                       alt="Biletet til innlegget"
                     >

_layouts/post.html

@@ -18,7 +18,7 @@ <h1 class="post-title p-name" itemprop="name headline">{{ page.title | escape }}
   <div class="container position-relative popout-md px-0 py-1 py-md-3 py-lg-3 py-xl-5 text-center">
     <img
       class="u-featured img-fluid"
-      src="{{ page.image | default: '/assets/img/card-image-placeholder.png' | relative_url }}"
+      src="{{ page.image | post_asset_path | fallback_path: '/assets/img/card-image-placeholder.png' | relative_url }}"
       alt=""
     >
   </div>
@@ -27,6 +27,43 @@ <h1 class="post-title p-name" itemprop="name headline">{{ page.title | escape }}
     {{ content }}
   </div>
 
+  <hr class="my-5">
+
+  {%- if post.tags -%}
+    {%- for tag in post.tags -%}
+      <a class="p-category" href="{{ '/tags/' | relative_url }}{{ tag | slugify }}/">{{ tag }}</a>
+    {%- endfor -%}
+  {%- endif -%}
+
+  {%- include author-blurb.html author=page.author -%}
+
+  Har du spørsmål eller kommentarar? <a href="{{ site.data.contact.link }}">Send oss ei melding</a>.
+
+  <hr class="my-5">
+
+  {%- if site.related_posts.size > 0 -%}
+    <h3>Relaterte innlegg</h3>
+    <div class="row flex-nowrap overflow-auto p-2">
+      {% assign related_posts = site.related_posts | limit: 3 %}
+      {%- for related_post in related_posts -%}
+        {%- if related_post.url != page.url -%}
+          <a class="card text-dark bg-dark-card m-1" style="width: 18rem;" href="{{ related_post.url | relative_url }}">
+            <img
+              class="card-img-top"
+              src="{{ related_post.image | post_asset_path | fallback_path: '/assets/img/card-image-placeholder.png' | relative_url }}"
+              alt="Bilete for {{ related_post.title | escape }}"
+            >
+            <div class="card-body">
+              <h5 class="card-title">{{ related_post.title | escape }}</h5>
+              <p class="card-text">{{ related_post.summary | escape }}</p>
+              {%- include post-byline.html author=related_post.author date=related_post.date -%}
+            </div>
+          </a>
+        {%- endif -%}
+      {%- endfor -%}
+    </div>
+  {%- endif -%}
+
   {%- if site.disqus.shortname -%}
     {%- include disqus_comments.html -%}
   {%- endif -%}