blog.tomoya.dev

Slackからの引用をいい感じに表示するHugoショートコード

2021-04-22T23:29:59+0900
Hugo

hobby-gadget オススメ、コーヒーショップまとめの記事で、Slackの投稿を引用する際、それなりにいい感じに表示させるためのHugo shortcodeを書いたので共有しておきます。

ショートコード #

Shortcodes | Hugoを参考にして、layouts/shortcodes/slack.htmlに、下記の内容のshortcodeファイルを作成しました。

{{- $who := .Get "who" -}}
{{- $githubName := .Get "githubName" -}}
{{- $time := .Get "time" -}}
{{- $link := .Get "link" -}}
{{- $content := .Get "content" -}}
<blockquote class="slack-widget" {{- if $link -}}cite="{{ $link }}"{{- end -}}>
  <div class="slack-widget-header">
    <div class="slack-widget-avatar">
      {{- if $githubName -}}
      <img src="https://avatars.githubusercontent.com/{{ $githubName }}" alt="{{ $who }} Avatar" />
      {{ else }}
      <img src="https://avatars.githubusercontent.com/{{ $who }}" alt="{{ $who }} Avatar" />
      {{- end -}}
    </div>
    <div class="slack-widget-info">
    <div class="slack-widget-name">{{ $who }}</div>
    <div class="slack-widget-timestamp">
      {{- if $link -}}<a href="{{ $link }}">{{- end -}}
      {{ $time }}
      {{- if $link -}}</a>{{- end -}}
    </div>
    </div>
  </div>
  <div class="slack-widget-content">
    {{- $content | markdownify -}}
  </div>
</blockquote>

githubNameとlinkはオプションの値です。アバターの取得はGitHubから取ってくるのが楽そうだったのですが、Slackの表示名とGitHubのユーザー名が異なる人もいるので、そういう場合はgithubNameにGitHubのユーザー名を指定してアバターを取得しています。

スタイルシート #

このブログはBook Themeを利用しているので、スタイルシートはCSSではなくSassを使ってassets/_custom.scssに下記のコードを追加しました。

// Slack widget
.slack-widget {

  .slack-widget-header {
    display: flex;
    line-height: 1;
    margin: 0 0 6px 0;

    .slack-widget-avatar {
      margin: 0 8px 0 0;

      img {
        width: 50px;
      }
    }

    .slack-widget-info {
      line-height: 1.5;

      .slack-widget-name {
        font-size: large;
        font-weight: bold;
      }
    }
  }

  .slack-widget-content {
    word-break: break-all;
  }
}

SlackではURLが貼られることが多いので、スマホでも改行されるようにword-break: break-all;を仕込んでおきました。

使い方 #

作成したショートコードは次のようにして利用します。

{{< slack who="yutkat" time="14:15"
    link="https://vim-jp.slack.com/archives/C016J5KFARM/p1617858931202300"
    content=`コーヒー豆みんなどこで買ってます？？
引っ越したらコーヒー豆屋さんちょっと遠くなったんでできれば通販したい。ちなみに挽くのはめんどくさいから挽いたやつがいいです。
以前は100g 600円くらいのやつ飲んでました` >}}

これは次のように表示されます。

yutkat Avatar
yutkat
14:15
コーヒー豆みんなどこで買ってます？？
引っ越したらコーヒー豆屋さんちょっと遠くなったんでできれば通販したい。ちなみに挽くのはめんどくさいから挽いたやつがいいです。
以前は100g 600円くらいのやつ飲んでました

最小構成だと、このようにして利用します。

{{< slack who="tomoya" time="14:15" content="メッセージ" >}}

すると、次のように表示されます。

tomoya Avatar
tomoya
14:15
メッセージ

なお、改行で改行タグを入れて欲しい場合は、以下の設定をconfig.tomlに書く必要があります。

[markup.goldmark.renderer]
  hardWraps = true

ライセンス #

こちらのショートコードはMITライセンスで公開しておきます。

MIT License

Copyright (c) 2021 Tomoya Otake

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

まとめ #

Hugoのショートコードを自分で作成するのは何気に初めてだったのですが、特に困ることなく約1時間くらい書けました。

そして、PHPを書いたときの気持ちを思い出したのでした。

Calendar 2024-10-09T11:22:20Z