前回に引き続きAstro.jsでの小ネタを紹介していきます。 ここでは前回生成したOGP画像にQRコードなどを追加してみたいと思います。 QRコードも追加したい OG画像、このままでもよいのですが、せっかくなのでサイトのリンクが含まれたQRコード画像を追加して…

前回に引き続きAstro.jsでの小ネタを紹介していきます。 ここではAstroの画像生成エンドポイントと、satoriでのSVG画像生成についてご紹介いたします。 Satori で OGP画像を動的に生成したい 今回はTwitterやZennなどで埋め込まれるOGPメタタグ用に画像エン…

前回に引き続きAstro.jsでの小ネタを紹介していきます。 ここではAstroのExperimental機能である画像最適化サービスと'sharp'モジュールについてご紹介いたします。 また背景画像に対しての画像最適化サービスの適応についてもご紹介いたします。 画像サービ…

前回に引き続きAstro.jsでの小ネタを紹介していきます。 ここでは文字数から読書時間を計算してくれる 'reading-time' モジュールについてご紹介いたします。 読書時間 公式のチュートリアルに従ってブログのコンテンツに対する簡単な読書時間を表示する機能…

前回に引き続きAstro.jsでの小ネタを紹介していきます。 ここでは前回紹介したJSON コレクションを使ったブログ記事のタグ検索機能についてご紹介いたします。 タグ検索機能の追加 タグのコレクションが定義できましたので、続いてタグでの検索機能を追加し…

前回に引き続きAstro.jsでの小ネタを紹介していきます。 ここでは Astro 2.5 で追加された JSON コレクションについてご紹介いたします。 JSON コレクション Astro 2.5 からコレクションでJSON、yaml形式のファイルがサポートされました。 これでタグとカテ…

前回に引き続きAstro.jsでの小ネタを紹介していきます。 ここでは astro-iconify と Iconify サイトについてご紹介いたします。 絵文字・アイコンを簡単に扱う Astroで絵文字やアイコンを簡単に扱うには astro-iconify が便利です。 astro-iconify :https://…

前回に引き続きAstro.jsでの小ネタを紹介していきます。 1. TailWind CSSにTwitter色を追加 サイトの"Twitterにシェア"機能の実装でSVGのアイコンなど設置してみましたが、ついでに Tailwind にTiwtterのアイコンカラーを追加して、いろいろ使えるようにして…

前回に引き続きAstro.jsでの小ネタを紹介していきます。 1. Alpine.js でコンポーネント作成 自分のブログサイトはブログ記事がメインのためあんまりガッツリと"機能"を作りこむ予定はありません。 そのためできるだけ薄くてイージーな、モリモリのフレーム…

前回に引き続きAstro.jsでの小ネタを紹介していきます。 1. Markdown の"脚注" MarkdownからHTML生成のメインのプラグイン？は remark-rehype でやってます。 https://github.com/remarkjs/remark-rehype "脚注"のカスタマイズは主にこのプラグインのオプシ…

初めに 自分のブログサイトは Astro.js + Vercel でサイトを構築＆公開しております。 立ち上げの時点での顛末については以下の Zenn の記事をご覧いただければ幸いです。 https://zenn.dev/asopitech/articles/20230221-213231_1 Markdown形式で記事を書き…

WSLからだけインターネットに接続できない現象に遭遇したので対処法をメモっておきます。 対象環境 手元の環境は以下です。 OS: Windows 11 Pro WSL は以下の環境です。 > wsl -l -v NAME STATE VERSION * Ubuntu-22.04 Running 2 WSL 2 の Ubuntu-22.04 で…

Stable Diffusionが便利に使えるで有名な AUTOMATIC1111/stable-diffusion-webui ですが、nVidiaなどの専用グラボなしのIntelのオンボードグラフィックのノートPCでもちゃんと Stable Diffusion Web UI が動作しますのでその手順をご紹介します。 ローカル環…