Emacs skeleton for hugo, updated

A followup to this post on emacs and hugo. One thing that bugged me about that script was that I couldn’t get the timestamp right. It turns out the reason is described by Xah in this post at ergoemacs.

Note, for the time zone offset, both the formats 「hhmm」 and 「hh:mm」 are valid ISO 8601. However, Atom Webfeed spec seems to require 「hh:mm」.

Here’s the correct timestamp function from Xah:

(defun current-date-time-string ()
  "Returns current date-time string in full ISO 8601 format.
Example: 「2012-04-05T21:08:24-07:00」.

Note, for the time zone offset, both the formats 「hhmm」 and 「hh:mm」 are valid ISO 8601. However, Atom Webfeed spec seems to require 「hh:mm」."
  (concat
   (format-time-string "%Y-%m-%dT%T")
   ((lambda (ξx) (format "%s:%s" (substring ξx 0 3) (substring ξx 3 5))) (format-time-string "%z")) )
   )

And the corrected skeleton:

(define-skeleton kjs/yaml-skeleton
  ""
  ""
  "---
title: \"\"
description: \"\"
date: \""
(current-date-time-string)
"\"
tags: []
---

")

Programming: More Emacs for Hugo Scripting

Converting Youtube WordPress Links to iframe Embeds

Yesterday’s DIY involved converting posts from dreamwidth to hugo (actually jekyl). Most of the heavy lifting was done by Thomas Frössm’s exitwp. Once everything was exported into jekyll-flavored markdown, one minor gap was youtube embeds. First, a skeleton for wrapping the iframe around a youtube movie code.

Code on pastebin to get around wordpress sanitation

Then, a function to do it automatically.

(defun kjs/youtube-convert ()
  (interactive)
  (re-search-forward "^http.://.*youtube.*v=")
  (let (p1 p2 myLine code)
    (setq p1 (line-beginning-position) )
    (setq p2 (line-end-position) )
    (setq myLine (buffer-substring-no-properties p1 p2))
    (setq code (replace-regexp-in-string ".*v=" "" myLine))
    (forward-line 2)
    (kjs/youtube-embed)
    (insert code)
    (beginning-of-line)))

Back/Next Page Navigation

How to do back/next pagination came from a snippit by Justin Dunham.

Create a Tag List on a Post

How to create a tag list on a post. Here is the template code in /layouts/_defaults/single.html:

More pastebin

And the css:

.tags ul {
    padding-left: .5rem;
}

.tags {
    display: inline;
    font-size: 70%;
    background-color: #ddd;
}

.tags li {
    display: inline;
}

Archive Page by Date

Figuring out exactly how to get an archive page working took a lot of frustrating searches. I finally found the right template at: /layouts/_defaults/list.html:

More pastebin (see second listing)

Downloading Images from WordPress

exitwp doesn’t grab images. So use grep to get all of the image urls and curl to download them into the images folder.

egrep -oh "https://[^)]+files.wordpress.com/[^)]+.jpg" ~/Dropbox/hugo-blog-test/content/post/*.markdown | xargs -n 1 curl -O

Bulk Edit Files to Point to the Image Folder

Run in the posts folder.

perl -p -i.bak -e 's/https:\/\/[^)]+files.wordpress.com\/[^)]+\//\/images\//' *.markdown 

Emacs Functions for Blogging with Hugo

I’ve been thinking a bit about moving my blog yet again. This time to hugo for a variety of reasons:

  1. I don’t use more than 10% of the features offered by WordPress.
  2. I have very mixed feelings about blog-hosted discussions these days.
  3. WordPress seems to be an easy target for hacks these days.

Most of my personal writing gets composed in emacs as markdown first anyway, so the first set of functions are intended to ease conversion by generating yaml front matter (title and date) for a post from the filename and the first heading. My filenames tend to start with a date stamp YYYYMMDD for ease of searching.

;;functions for compiling blog posts with hugo. 
;;convert dates from YYYYMMDD to YYYY-MM-DD
(defun kjs/date-convert (str)
  (let ((year (substring str 0 4))
    (month (substring str 4 6))
    (day (substring str 6 8)))
    (concat year "-" month "-" day)))

;;get the title from the first header.
(defun kjs/get-title ()
  ;;(interactive)
  (save-excursion
    (re-search-forward "^#")
    (substring (thing-at-point 'line) 2)))

;;add yaml front matter. 
(defun kjs/yaml-add ()
  (interactive)
  (goto-char (point-min))
  (let ((date (kjs/date-convert (buffer-name)))
    (title (kjs/get-title)))
    (insert (concat "---
title: \"" title "\"
description: \"" title "\"
date: \"" date "\"
---" )))
  (re-search-forward "^#")
  (move-beginning-of-line nil)
  (kill-line))

Next, a skeleton and abbreviation for creating new posts:

(defvar current-date-time-format "%F"
  "Format of date to insert with `insert-current-date-time' func
See help of `format-time-string' for possible replacements")

(define-skeleton kjs/yaml-skeleton
  ""
  ""
  "---
title: \"\"
description: \"\"
date: \""
(format-time-string current-date-time-format (current-time))
"\"
tags: []
---

")

(use-package markdown-mode 
  :config
  (define-abbrev markdown-mode-abbrev-table 
    "yamhead" "" 'kjs/yaml-skeleton))

And, a function for using ido completion to insert images:

(defun kjs/insert-image ()
  ""
  (interactive)
  (let ((f (ido-read-file-name "Filename: "
               "~/Dropbox/hugo-blog-test/static/images/")))
    (insert (concat
         "![]("
         (replace-regexp-in-string ".*images" "/images" f)
         ")"))))
 

Passwords: length over arbitrary rules

Here is a nice post on the perils of arbitrary password rules. I’m grabbing the images from my Pocket archive.

w704

Abcd1234 fails because it’s already in a dictionary.

w704chilidog

The key is that passphrases need to be random. For that, there’s diceware, or you can hire a young woman to do it for you. I have an emacs function that generates passphrases from text buffers. I suggest something big from Project Gutenberg. https://howsecureismypassword.net/ checks against a frequently cracked password list.

pandoc markdown and org-mode: a comparison

I’ve been experimenting a bit with both markdown and org-mode for doing writing and blog markup. These are just some notes. I’ve been using markdown for general writing, and org-mode for project management for a while.

Markdown

Markdown was originally developed by John Gruber as a lightweight markup language. Since then it’s been adopted by dozens of different implementations and possibly hundreds of web sites as an alternative to html or ubb code. Some of the typical constructs look like the following:

# A Heading 1

## A Heading 2

1. A numbered list.

* A bulleted list.

A regular paragraph.

[A link to google](http://google.com)

![An image](http://....jpg)

This is just a sample. One of the problems faced with Markdown has been the lack of a clear standard. The original specification was ambiguous on some key points. Various implementations added their own expansions. CommonMark is an attempt to bring some order to this. Pandoc is one of the more useful tools for converting to just about any format.

org-mode

Org-mode is an organizer and outlining tool for GNU emacs. The emacs mode includes todo lists, complex organizing, and tag searching. It also has a number of export functions, including to HTML, and is used as a blogging tool. The markup used above in org-mode:

* A Heading 1

** A Heading 2

1. A numbered list.

- A bulleted list.

A regular paragraph.

[[http://google.com][A link to google]]

[[http://....jpg]] (an image)

For most of the rest of the discussion I’ll use markup syntax as the base example.

structural markup

Markdown tends to produce minimal html while org-mode defaults to adding tags needed for features such as a table of contents or section folding. Here’s an example of header-paragraph markup:

# Heading 1

The quick brown fox jumped over the lazy dog.

Using markdown I get:

<h1>Heading 1</h1>
<p>The quick brown fox jumped over the lazy dog.</p>

Using org-mode I get:

<div id="outline-container-sec-1" class="outline-2">
<h2 id="sec-1"><span class="section-number-2">1</span> Heading 1</h2>
<div class="outline-text-2" id="text-1">
<p>
The quick brown fox jumped over the lazy dog.
</p>
</div>
</div>

Markdown by default gives me minimal html sections that can be inserted into any page or CMS. org-mode html output defaults to a full page with table of contents, footer information, and stylesheet.

images

Org-mode seems to recognize images only if they’re local to the file. The html output filter didn’t recognize images served over http at all.

Markdown wasn’t much better due to ambiguities and extensions in the handling of images. Markdown specification for a stand-alone image tag would be:

![This is the caption](/url/of/image.png)

Depending on how you use markdown, “This is the caption” is converted to alt tag and optionally a caption. The resulting HTML is.

<div class="figure">
<img src="/url/of/image.png" alt="This is the caption" />
<p class="caption">This is the caption</p>
</div>

This is glossing over where the image is actually served from. So in the end, it might just be easier to replace those links in the wordpress than to try to style them, or pass raw html.

overall

I think that org-mode really shines when you need the advanced folding, to-do tracking, or are working on a page with multiple sections. For most other tasks, I’m finding markdown sufficient.