diff --git a/lib/home73k/blog.ex b/lib/home73k/blog.ex index 0ab0f05..6e9f0a4 100644 --- a/lib/home73k/blog.ex +++ b/lib/home73k/blog.ex @@ -13,7 +13,8 @@ defmodule Home73k.Blog do end def __mix_recompile__?() do - Path.wildcard("#{Home73k.app_blog_content()}/**/*.md") |> :erlang.md5() != unquote(post_paths_hash) + Path.wildcard("#{Home73k.app_blog_content()}/**/*.md") + |> :erlang.md5() != unquote(post_paths_hash) end @posts Enum.sort_by(posts, & &1.date, {:desc, NaiveDateTime}) diff --git a/priv/content/2020/08/2020-08-01_enable-vs-cli-env-in-ps.md b/priv/content/2020/08/2020-08-01_enable-vs-cli-env-in-ps.md index 5f4da38..dcc3e37 100644 --- a/priv/content/2020/08/2020-08-01_enable-vs-cli-env-in-ps.md +++ b/priv/content/2020/08/2020-08-01_enable-vs-cli-env-in-ps.md @@ -3,7 +3,7 @@ title: "Enable Visual Studio CLI environment in PowerShell", date: ~N[2020-08-01 15:00:00], author: "Adam Piontek", - tags: ["coding", "tech", "elixir", "windows", "powershell", "scripting"], + tags: ["coding", "tech", "elixir", "windows", "powershell", "scripting"] } --- diff --git a/priv/content/2021/04/2021-04-05_blog-incorporated.md b/priv/content/2021/04/2021-04-05_blog-incorporated.md new file mode 100644 index 0000000..1f5a5d4 --- /dev/null +++ b/priv/content/2021/04/2021-04-05_blog-incorporated.md @@ -0,0 +1,64 @@ +--- +%{ + title: "Blog, Incorporated", + id: "blog-incorporated-2021", + date: ~N[2021-04-05 23:49:00], + author: "Adam Piontek", + tags: ["blog", "tech", "coding", "web", "fun", "markdown"] +} +--- + +After a few months working with [Writefreely, (kept separate from a static webpack-generated front page)](/blog/new-front-page-internet-home), I just really didn't like the feel of keeping a blog in separate software with a database, when the content itself was just markdown. Probably the thing to do would be to hop on the static site bandwagon, but I've been spending so much time learning elixir & phoenix for other projects, I didn't relish spending time learning a whole new toolchain. + +Luckily, there are [good](http://www.sebastianseilund.com/static-markdown-blog-posts-with-elixir-phoenix) [resources](https://dashbit.co/blog/welcome-to-our-blog-how-it-was-made) on basing a blog off markdown files in Elixir Phoenix, in a manner basically as speedy as a static site. So... + + + +I set to incorporating my blog posts and previous static webpack-based design into a Phoenix site. Had to do a few additions and customizations to get things working just right. + +For one, as much as I love Elxiir, the only server-side syntax-highlighting package out there doesn't support enough languages for my needs. I didn't like the idea of using client-side javascript, so I decided to leverage [Pygments' `pygmentize` cli](https://pygments.org/docs/cmdline/). Hooking elixir's System.cmd/3 in with a trimmed & modified version of [the ExDoc syntax highlighter code](https://github.com/elixir-lang/ex_doc/blob/d5cde30f55c7e0cde486ec3878067aee82ccc924/lib/ex_doc/highlighter.ex), after parsing the markdown to html, I'm able to isolate all fenced code in a post, write each code fragment to a temp file, pygmentize it, and replace the post's code with the pygmentized version. + +I also found code hot-reloading wasn't working great if I added or removed a file, even if I canceled all elixir processes and started it up again. I had to get this fixed because the plan was to deploy new content and other changes via git repository post-receive hook, and while I can script the recompilation, and probably add in a `--force` flag or something, I wanted it cleaner. Plus I just wanted the convenience of writing posts in dev mode with a preview. + +The Dashbit posts referenced above on basing an elixir site off markdown files both cover basic live reloading, but I found I needed to add the following to my Blog module to ensure it was recompiled: + +```elixir +post_paths_hash = :erlang.md5(post_paths) + +def __mix_recompile__?() do + Path.wildcard("content/**/*.md") + |> :erlang.md5() != unquote(post_paths_hash) +end +``` + +Following that change, new markdown files are recognized and included as expected. + +And, FWIW, here's the meat of my modified highlighter using pygments (NOTE: the CSS styles were exported separately (like so: `pygmentize -S material -f html -a pre.pygments > _pygments.css`) and are included in my app.scss file. And since I use purgecss, I had to safelist the pygments class.) + +```elixir +def highlight_code_blocks(html) do + ~r/
([^<]*)<\/code><\/pre>/
+  |> Regex.replace(html, &highlight_code_block(&1, &2, &3))
+end
+
+defp highlight_code_block(_full_block, lang, code) do
+  # unescape the code
+  unescaped_code = unescape_html(code) |> IO.iodata_to_binary()
+
+  # write code to temp file
+  tmp_file = Temp.file()
+  File.write!(tmp_file, unescaped_code)
+
+  # pygmentize the code via temp file
+  pyg_args = ["-l", lang, "-f", "html", "-O", "cssclass=pygments", tmp_file]
+  {highlighted, _} = System.cmd(@pygments_cmd, pyg_args)
+
+  # correct pygment wrapping markup
+  highlighted
+  |> String.replace("", "")
+  |> String.replace(
+    "
",
+    "
")
+  |> String.replace("
", "
") +end +``` \ No newline at end of file