2023-06-26

Astro.js 小ネタ集その4 Tailwind CSSのテーマ拡張とかSVGとか

2023年6月版

前回に引き続きAstro.jsでの小ネタを紹介していきます。

1. TailWind CSSにTwitter色を追加

サイトの"Twitterにシェア"機能の実装でSVGのアイコンなど設置してみましたが、ついでに Tailwind にTiwtterのアイコンカラーを追加して、いろいろ使えるようにしてみたいと思います。

tailwindの設定ファイルに以下のように追加するだけです。

module.exports = {
  ...
    theme: {
    ...
        extend: {
            colors: {
                twitter: '#1DA1F2',
            },
        },
    },
  ...
}

themeの直下に colors を追加すると今のテーマを丸ごと上書きしてしまうので、extends の下に colors を入れています。

ついでに、Github Copilotを有効にしていると、このカラーの#1DA1F2、自動で出てきます。さらにこの下の行で f と打つと、facebook: '#3B5998',が補完候補に挙がってきます。有名どころのSNSやWebサービスの頭文字を入れるとそのサービスが補完校に挙がってきます…

module.exports = {
  ...
    theme: {
    ...
        extend: {
            colors: {
                airbnb: '#FF5A5F',
                google: '#4285F4',
                twitter: '#1DA1F2',
                facebook: '#3B5998',
                instagram: '#E1306C',
                linkedin: '#2867B2',
                github: '#333',
                whatsapp: '#25D366',
                telegram: '#0088cc',
                medium: '#00ab6c',
                youtube: '#FF0000',
            },
        },
    },
  ...
}

こんな感じでガンガンにサービスとアイコンカラーが補完されていきます。めっちゃ便利です。アイコンカラー追加しおくと、Tailwindのイベントと組み合わせアイコンカラーが使えるのでいろいろ便利です。

っていうか Github Copilot スゴイ。

2. SVGの色をTailwind CSSで指定

SVGではfill属性を使えばSVGの塗りがTailwindで指定できます。¹

上記で追加した Twitterのアイコンカラーですが本サイトでは以下のように使用してます。

    <svg
        xmlns="http://www.w3.org/2000/svg"
        class=" fill-white hover:fill-twitter"
        viewBox="0 0 30 30">
        <path ... />
    </svg>

これでSVGでアイコンを描画するだけど、基本は白塗り、マウスオーバーでツイッターカラーに塗る、をやってます。

このように、SVGの色付けもTailwind CSSから制御可能です。

3. Style タグに変数を渡して Tailwind CSSをバリアブル(可変)にする

いろいろコンポーネントを作っていくと、ピンポイントで前景色と背景色を変えたいとか入れ替えたいとか出てきます。

そんな時は、Astro.js の props と CSS の変数を組み合わせてコンポーネントの属性としてCSSに値を渡すことができます。

本サイトでは記事の目次エリアをPC版とモバイル版で色を切り替えてます。たとえば、以下のようにしてます。

---
import type { MarkdownHeading } from 'astro';

export interface Props {
    headings: MarkdownHeading[];
    fgColor : string;
    bgColor : string;
}

const { headings, fgColor, bgColor } = Astro.props;
---

<style define:vars={{ fgColor, bgColor }}>
@tailwind components;

@layer components {
    ...
    .toc-level-0::before {
        @apply bg-[var(--fgColor)] rounded-full content-[''];
    }

    .toc-level-0 > li::before {
        @apply bg-[var(--fgColor)];
        border: 2px solid var(--bgColor);
    }
    .toc-level-0 > li.toc-level-3::before {
        @apply bg-[var(--fgColor)];
        border: 2px solid var(--bgColor);
    }
    ...
}
</style>

手順としては、 1. interface Propsでコンポーネントのプロパティで受け取る設定値の入り口を定義します。 2. const { ... } = Astro.props; でAstroのコンポーネントとして設定値を受け取ります。 3. <style define:vars={{ ... }}> で 変数名 定義してます。これだけで Astroコンポーネントのプロパティ値も渡されてます。 4. CSSの値には var(--{変数名}) で指定します。 5. TailWind CSS のクラスには bg-[var(--変数名)] で指定します。

Tailwind のクラス名ではカスタム値の [] を使って変数で渡した値を有効にしてます。

https://tailwindcss.com/docs/adding-custom-styles

これでAstoコンポーネントの属性値でCSSの設定を指定することができます。

本日はここまでといたします。引き続きよろしくお願いいたします。

個人ブログでも記事をあげています。こちらもあわせてご覧ください！

Astro.js、Tailwind CSSの入門にぜひ！

https://tailwindcss.com/docs/fill ↩

2023-06-26

Astro.js 小ネタ集その3 Alpine.jsでコンポーネント作成

2023年6月版

前回に引き続きAstro.jsでの小ネタを紹介していきます。

1. Alpine.js でコンポーネント作成

自分のブログサイトはブログ記事がメインのためあんまりガッツリと"機能"を作りこむ予定はありません。そのためできるだけ薄くてイージーな、モリモリのフレームワークよりは軽めのライブラリのようなUI用の軽量フレームワークを探していました。そこで、Astro.jsでサポートされているUIフレームワークで一番軽めな Alpine.js を使ってみました。

ちなみに Astro.js のプラグイン集？から連携可能なフレームワークが検索可能です。

https://astro.build/integrations?search=&categories%5B%5D=frameworks

で、alpine.js 連携のガイドは以下です。

https://docs.astro.build/en/guides/integrations-guide/alpinejs/

1-1. セットアップ

セットアップは非常に簡単です。(Astro.jsは他のフレームワークもセットアップが劇的に簡単ですが…というかReactなんか普通にサイトのセットアップするよりAstro.jsでサイト設定してコンポーネントでReact使ったほうが楽なんじゃない？)

以下のコマンドでサクッと追加します。

$ npx astro add alpinejs

で、このコマンドで astro.config.mjs に設定を追加してくれるので、セットアップは以上です！！

ちなみに…

...
export default defineConfig({
  ...
  integrations: [
    tailwind(),
    sitemap(),
    alpinejs()
  ],
  ...

});

みたいな感じで設定を追加してくれます。いや、これで設定は終了で、あとは使うだけです。

1-2. コンポーネントの作成

自分のブログサイトではスマホ用の記事の目次の表示切替にAlpine.jsを使ってます。

以下のような感じです。

<aside x-data="{ open: false }">
    <div class="w-full flex flex-row justify-end my-auto px-6 py-3 gap-2">
        <div class="text-sm my-auto font-bold text-gray-400">
            <button @click="open = true">目次</button>
            <span class="open_area cursor-pointer" x-show="!open" @click="open = true">▽</span>
            <span class="close_area cursor-pointer" x-show="open" @click="open = false">△</span>
        </div>
        <TwShare entry={entry} url={url} />
    </div>
    <div x-show="open" class="float-menu" @click.outside="open = false">
        <Toc headings={headings} />
    </div>
</aside>

とくに import などせずともいきなり Alpine.js の属性が利用可能です。

x-data で表示切替用のフラグを初期化します。
@click="open = true" でクリックしたらフラグを true にする、の設定。
@click="open = false" はその逆。
x-show="open" でフラグに従って表示・非表示の切り替え。
@click.outside="open = false" でその領域外をクリックしたら、フラグを false にする、の設定。

これだけですがやりたいことは120%実現できているので大満足です。とくに、@click.outside ってすごくない？○○であるの設定は普通ですが、○○じゃないの設定ってなかなか大変なんすよ。 領域外のイベントを設定できるのスゴイです。

ミニマルなセットアップでミニマルに実装できる。。。今のところほしかったのは Alpine.js です。

今回はここまでといたします。引き続きよろしくお願いいたします。

Astro.js、Tailwind CSSの入門にぜひ！

2023-06-23

Astro.js 小ネタ集その2 Markdownの表示カスタマイズいろいろ

2023年6月版

前回に引き続きAstro.jsでの小ネタを紹介していきます。

1. Markdown の"脚注"

MarkdownからHTML生成のメインのプラグイン？は remark-rehype でやってます。

https://github.com/remarkjs/remark-rehype

"脚注"のカスタマイズは主にこのプラグインのオプションです。以下のようなオプションがあります。

それぞれの説明は上記のリンクを参照ください。 Astro.js でこのオプションを指定するには以下のようになります。

export default defineConfig({
...
  markdown: {
...
    remarkRehype: {
      footnoteLabel: "脚注"
    },
...
  }
...
});

この例では"Footnote"の表記を"脚注"に変えてます。デフォルトでタグがh2になってるのもちょっと扱いずらいかもですね～。。。

2. Markdown の目次を表示

そもそもの"Markdownの目次"ですが、これはMarkdownの中で # ～ ######## などで指定した"見出し"のコレクションが目次になります。見出しを抽出してリストにし、見た目を整えたものが目次となります。

Astro.js の CollectionEntry は render() メソッドの戻り値で見出しのリストが返ってきます。

  ...
  export async function getStaticPaths() {
    return (await getCollection('blog')).map(entry => ({
      params: { id: entry.slug },
      props: { entry },
    }))
  }

  interface Props {
    entry: CollectionEntry<'blog'>;
  }
  const { entry } = Astro.props;
  const { Content } = await entry.render();
  const { Content, headings } = await entry.render();
...

このような感じで const { Content, headings } = await entry.render(); でheadingsに見出しのリストが返ってきます。このクラスはMarkdownHeading型で、これの定義は以下です。

export interface MarkdownHeading {
    depth: number;
    slug: string;
    text: string;
}

depth が見出しの深さでslugがリンク用のアンカー、textが見出しの文言です。

例えば以下のような感じでサクッと見出しを作成できます。

<article ...>
  <aside class="toc">
    <ol class="toc-level-0">
    {headings.filter(h => h.depth < 3).map((h,i) => {
    return (
        <li class={`toc-level-${h.depth} toc-item`}><a href={`#${h.slug}`}>{h.text}</a></li>
        )})}
    </ol>

  </aside>
  <slot/>
</article>

ここの例では .filter(h => h.depth < 3) で深さが1,2だけの2段の見出しに絞っています。あとは、スタイルシートで toc-level-1 toc-level-2 toc-level-3 などやっていけばいろいろ凝った段組みも可能ですね。

別出しにせずに本文内に入れ込んで簡単に目次を表示したい場合はremarkのプラグイン remark-toc を使うのもありかと思います。

3. Markdown のコードブロックにタイトルをつける

Markdown のコードブロックでよくある、

  ```ts:ファイル名

みたいなファイル形式とファイル名を指定できるの、よくあるじゃないですか？あれは Remark ではできなくて、プラグインでタイトルタグを生成して、スタイルシートで見た目を修正してます。自分のブログサイトで使ってるプラグインは以下です。

https://github.com/ipikuka/remark-flexible-code-titles

まずはコイツをインストールします。

$ npm install remark-flexible-code-titles

続いて Astro.js の設定ファイルでプラグインを有効にします。

import remarkCodeTitles from "remark-flexible-code-titles";

export default defineConfig({
...
  markdown: {
    ...
    remarkPlugins: [remarkCodeTitles],
...
  }
...
});

で、準備は完了です。これで、

  ```ts:filename

というMarkdwon だと以下のようなHTMLを生成してくれるようになります。

<div class="remark-code-container">
    <div class="remark-code-title">filename</div>
    <pre class="astro-code" tabindex="0">
      <code>
...

このようにタイトル付きのコードタグ、みたいなブロックを生成してくれます。

で、これを上記であげたように、カスタムのタグを当てればOKです。

...
<style is:global>
@tailwind components;

  @layer components {
    .remark-code-title {
      @apply text-base pl-3 rounded-t-lg font-bold;
    }
    .remark-code-title+pre {
      @apply mt-0 rounded-t-none;
    }
  }
</style>

のような感じで、このサイトのコードブロック部分は作成してます。その他にも remark-code-title などがあります。生成されるタグは異なると思いますが、だいたいこんな流れでOKでしょう。(?)

本日はここまでといたします。引き続きよろしくお願いいたします。

Astro.js、Tailwind CSSの入門にぜひ！

2023-06-23

Astro.js 小ネタ集その1 ビルドログとMarkdownのスタイリング

2023年6月版

初めに

自分のブログサイトは Astro.js + Vercel でサイトを構築＆公開しております。

立ち上げの時点での顛末については以下の Zenn の記事をご覧いただければ幸いです。

https://zenn.dev/asopitech/articles/20230221-213231_1

Markdown形式で記事を書きつつ、Astro.js そのものの構造について理解を深めてまいりましたが、サイトを立ち上げていろいろと見た目や機能などぼちぼち整備を進めているところでございます。

主な記事はMarkdown形式なのでメインのコンテンツである記事を作成することについてはまったく問題はないです。というかそのあたりの機能がそろっていたので Astro.js はかなり強力なSSGであります。ただし、やはり見た目の部分や機能の部分は当然のことながら、自前で実装するといか手を入れていく必要がございます。

ところが、この Astro.js はとにかくかなりの機能をプラグインで揃えておりまして、VueやReact, Svelteにも対応できるしTailwindは積んでるしMarkdownやMDXもできるってわけで各種フレームワーク、ライブラリの組み合わせが爆発的に多いわけでございまして。

なんせ本格的なHTML+CSSはもう何十年振りなもんでさらにはハイカラなTailwind CSSを本格的に触るってなことでいろいろと四苦八苦しながら汗かき汗かきサイトをなんとか仕上げているところでございます。

正直、細かすぎてどう記事に切り出したもんか困っているのではございますが、そこそこノウハウがたまってきたのでこれまでの振り返りを含めてまとめて見たいと思った次第でございます。

それでは本日もよろしくお願いいたします。

技術スタック

自分のブログサイトのざっくりな技術スタックは以下のような感じです。

Astro.js
Tailwind CSS
Alpine.js
Vercel

Astro.jsが様々な技術スタックのハブでありプラグイン集であり統合ビルダーであるのでどこまで技術スタックにカウントするか微妙ではありまして… 特に MarkdownからのHTMLの生成については、Markdown → HTML にremark、HTML→HTMLの整形にrehype、コードブロックのシンタックスハイライトにShiki、HTMLの色付けは Tailwind プラグイン@tailwindcss/typography のように多重のフレームワークが折り重なっており、remark,rehype,shikiそれぞれに設定やらプラグインでの追加機能などが盛りだくさんでございます。

さらに今回は超シンプルなUIライブラリとしてAlpine.jsを採用してみてます。ブログ記事メインのサイトでがっつりの機能はいらないので鬼シンプルにAlpine.jsを初採用してみましたのでそのあたりもご確認いただければと。

また、すでに Google アナリティクスのJSを仕込む記事も上げておりますので、以下の記事もよろしくお願いします。

https://asopi.tech/blog/20230507_3

それでは細かいネタをご紹介いたします。

1. ビルドのログを細かく出す。

ビルド時のエラーメッセージというかエラーの進捗状況をより詳しく出すには --verbose を渡します。

$ npm run build - --verbose

はい、こんな感じで npm runから中のコマンドに引数渡すには-です。

2. Markdown で生成した後のHTMLにTailwind CSSを適応する

MarkdownのドキュメントはあとからHTMLが生成されてくるため、直接 Tailwindのクラスを当てることはできません。ベースの整形は Tailwind CSS の公式プラグイン @tailwindcss/typography がやってくれます。

https://tailwindcss.com/docs/typography-plugin

まずはこのプラグインのセットアップから開始します。

2-1. @tailwindcss/typography

Tailwind CSSのプラグインをセットアップ。

$ npm install -D @tailwindcss/typography

Tailwindの設定ファイルにプラグインを追加します。

module.exports = {
// ...
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

で、Markdown記事のレイアウトを指定するastroファイルでproseクラスを指定します。

...
<article class="prose">
    <slot/>
</article>
...

proseクラス指定のみでその下のMarkdownから生成されるHTMLにはがばっとスタイルが当たります。だいたい、これでOKです。

で、proseに対してさらにカスタマイズを加えたい場合は次の手順となります。

2-2. prose でざっくり指定

prose-xxで様々なカスタマイズが可能です。

カラーテーマ: prose-gray (default), prose-slate, prose-zinc, prose-neutral, prose-stone
文字サイズ: prose-sm, prose-base (default), prose-lg, prose-xl, prose-2xl
ダークモード: dark:prose-invert

でさらにMarkdownで生成されるHTML要素に対してカスタマイズは以下のように記述できます。

...
<article class="prose prose-img:rounded-xl prose-headings:underline prose-a:text-blue-600">
    <slot/>
</article>
...

このように prose- の後ろに要素名を指定することでそのタグに対して一括で装飾が可能です。使用可能な要素のリストは以下の公式ドキュメントをご覧ください。

https://tailwindcss.com/docs/typography-plugin#element-modifiers

要素名ではなく、いつものクラス名でスタイルを当てたい場合は、以下の @layer component 定義でどうにかします。

2-3. @layer component でがっつり

remark,rehypeのプラグインでしっかり組まれたHTMLが生成されることも多々あります。そのような場合には prose-h1 程度じゃ太刀打ちできないので以下のようにカスタムのコンポーネントを追加することになります。

<style>
@tailwind components;

@layer components {
    .remark-code-container > .remark-code-title+pre {
        @apply mt-0 rounded-t-none;
    }

    .remark-code-title {
        @apply text-base text-gray-200 dark:text-gray-800 bg-slate-900 dark:bg-slate-100 pl-3 rounded-t-lg font-bold;
    }
}

</style>
...
<article class="prose">
    <slot/>
</article>
...

こんな感じで@layer components {}内にクラスを定義することでいつも通りのCSSが利用可能です。

2-4. Markdown にHTML直貼り

そして、さらにガッツリCSSというかデザイン当てたい場合には、HTMLをMarkdownに直書きしたいです… が、@tailwindcss/typographyが邪魔なのでコイツを無効にする必要があります。

<div class="not-prose">
...
</div>

このように not-prose クラスをつけるとその中身は@tailwindcss/typographyが効かなくなります。これでOKです。

このサイトの広告枠の箇所もMarkdownにアフィリエイトタグを直貼りしてます。

今回はここまでといたします。引き続きよろしくお願いいたします。

個人ブログでも記事をあげています。こちらもあわせてご覧ください！

Astro.js、Tailwind CSSの入門にぜひ！

2023-06-21

WSLだけ外に出れない？

2023年6月版 WSL

WSLからだけインターネットに接続できない現象に遭遇したので対処法をメモっておきます。

対象環境

手元の環境は以下です。

OS: Windows 11 Pro

WSL は以下の環境です。

> wsl -l -v
  NAME            STATE           VERSION
* Ubuntu-22.04    Running         2

WSL 2 の Ubuntu-22.04 ですね。

状態

ホストのWindows 11 では普通にブラウザなどでインターネットにつながっている状態。しかし、Ubuntu のターミナルで curl 叩いても応答ない状態となってしまいました。

$ curl https://wwww.google.com

このまま応答せず・・・

調査

ネットで検索してみると以下のようなページを見つけました。

ここに記載のコマンドでよいのかな・・・？ netsh コマンドを使ってホストのネットワーク系の設定？をリセットすればよいようです。

対応

管理者権限 で"コマンドプロンプト"を開き以下のコマンドを叩きました。

> netsh winsock reset
> netsh int ip reset all
> netsh winhttp reset proxy
> ipconfig /flushdns

で、PC本体を再起動いたします。

確認

PC再起動後、WSL Ubuntuのターミナルを開き、curl してみます。

$ curl https://www.google.com
<!doctype html><html itemscope="" itemtype="http://schema.org/WebPage" lang="ja"><head><meta content="&#19990;&#30028;&#2...

はい、無事に Google のサイトのHTMLが取得できました。よかったー！

原因は不明ですが、WSLでインターネットに接続できなくなったら netsh コマンドでリセットすればOKなんですね？！

本日は以上です！

Zenn にも記事を挙げております。個人でも技術ブログ書いてます。こちらも併せてご愛顧よろしくお願いいたします！

2023-06-20

グラボなくても余裕でStable Diffusion WebUI デビュー前編

2023年6月版 stablediffusion Automatic1111 asdf python3 WSL Ubuntu22

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

ローカル環境のご紹介

手元のローカル環境をご紹介します。

OS: Windows 11 Pro
グラフィック: Intel Iris Xe Graphics
メモリ: 32 GB

さらに WSL で動かしてます。

WSL 2
Ubuntu 22.04.2 LTS

ですので、以下の手順はグラボ積んでない Linux でも同じかと思います。

さらに Python 環境の構築には asdfコマンドを使ってます。

1. 事前準備

必要なものは以下です。

Python 3.10.6
git
wget

以上！

git や wget コマンドのインストールについては手順を割愛します。

1-1. Python 3.10.6 のインストール

いろいろインストール方法はあるかと思いますが、今回は asdf コマンド使います。

そもそも asdf に python プラグインがない場合は以下のコマンドでasdfにpython プラグインを追加します。

$ asdf plugin add python

python プラグインがと撮った来夏のコマンドで 10.3.6 をインストールします。

$ asdf install python 3.10.6

初めて python を入れる場合はインストール後に 3.10.6 が有効になります。すでに他バージョンの python がインストールされている場合は、後ほど有効にしましょう。

python のインストールで`モジュールが足りない`エラーで詰まったら

python3 のインストール中、必要なパッケージがない場合はエラーが出ます。自分の場合には sqlite3 のモジュールがない、とのエラーがでました。

この時に、sqlite3 のパッケージを apt で追加すればよいのですが、ことのとき開発用のパッケージをインストールしてください。実行用のバイナリやコマンドラインツールではなく、Pythonからこのパッケージを叩くには、開発用のパッケージが必要です。

以下のコマンドで sqlite3 のパッケージを検索します。

$ apt search sqlite3
...
libsqlite3-dev/jammy-updates,jammy-security,now 3.37.2-2ubuntu0.1 amd64 [installed]
  SQLite 3 development files
...
sqlite3/jammy-updates,jammy-security,now 3.37.2-2ubuntu0.1 amd64 [installed]
  Command line interface for SQLite 3
...

と出てきます。この時、インストールが必要なパッケージは libsqlite3-dev のほうです。sqlite3ではエラーが解消されません。以下のコマンドで sqlite3 の開発パッケージをインストールします。

$ sudo apt install libsqlite3-dev

で、asdf にインストールされてしまった python 3.10.6 はいったん削除し、もう一度インストールします。

$ asdf unintall python 3.10.6
$ asdf install python 3.10.6

ちなみに、WSL+UbuntuでPython 3.10.6のインストール字時にGTKのモジュールでエラーが出ましたが GUIは使わないのでそれは無視してOKです。

1-2. Git でクローン

以下のコマンドでGitをクローンします。

$ git clone https://github.com/AUTOMATIC1111/stable-diffusion-webui.git

ghコマンド使ってる場合は以下です。

$ gh repo clone AUTOMATIC1111/stable-diffusion-webui

で、clone したディレクトリで明示的に python 3.10.6 を有効にする場合は以下のコマンドです

$ cd stable-diffusion-webui
$ asdf local python 3.10.6

ついでに pip もアップグレードしておきましょう。

$ pip install --upgrade pip

準備は以上です！

2. Stable Diffusion Web UI の起動

いよいよ起動です。

2-1. 引数の設定

GPUを積んでないPCではそのままでは動きませんので webui-user.shもしくはwebui-user.batを編集して起動オプションを追加します。

...
export COMMANDLINE_ARGS="--skip-torch-cuda-test --upcast-sampling --no-half-vae --use-cpu interrogate --precision full --no-half"
...

もしくは、

...
set COMMANDLINE_ARGS="--skip-torch-cuda-test --upcast-sampling --no-half-vae --use-cpu interrogate --precision full --no-half"
...

でOKです。

2-2. 起動！

WSL環境の場合は webui.sh、コマンドプロンプトなどWindows環境の場合は webui-user.bat を起動します。

$ ./webui.sh

> webui-user.bat

ここで必要なものは大体、インストールしてくれます。無事に必要なもののダウンロードやセットアップが完了するとWEBサーバーが起動します。

...
Running on local URL:  http://127.0.0.1:7860

...

とログができたら起動完了です。ブラウザで http://localhost:7860 を開けば画面が立ち上がります。

ハイ、いってらっしゃい！！

後半は Zenn の記事: グラボなくても余裕でStable Diffusion WebUI デビューその② もしくは、全編本家 ITごった煮ブログ: グラボなくても余裕でStable Diffusion WebUI デビューよりご覧ください。

ありがとうございました。

2023-06-20

あそぴテックの技術ブログはじめます

これまで Zenn.com や独自のサイト(ITごった煮ブログ) で運営しておりましたあそぴテックの技術ブログですが、はてなブログでも投稿を始めます！

Zennの投稿記事とGithub Actionsでうまいこと連携できればと思ってますが。。。また本家サイトもはてなブログに負けないようにデザイン頑張っていければと。。。

よろしくお願いいたします。

ITごった煮はてブ版

あそぴテック技術ぶろぐ

Astro.js 小ネタ集その4 Tailwind CSSのテーマ拡張とかSVGとか

1. TailWind CSSにTwitter色を追加

2. SVGの色をTailwind CSSで指定

3. Style タグに変数を渡して Tailwind CSSをバリアブル(可変)にする

Astro.js 小ネタ集その3 Alpine.jsでコンポーネント作成

1. Alpine.js でコンポーネント作成

1-1. セットアップ

1-2. コンポーネントの作成

Astro.js 小ネタ集その2 Markdownの表示カスタマイズいろいろ

1. Markdown の"脚注"

2. Markdown の目次を表示

3. Markdown のコードブロックにタイトルをつける

Astro.js 小ネタ集その1 ビルドログとMarkdownのスタイリング

初めに

技術スタック

1. ビルドのログを細かく出す。

2. Markdown で生成した後のHTMLにTailwind CSSを適応する

2-1. @tailwindcss/typography

2-2. prose でざっくり指定

2-3. @layer component でがっつり

2-4. Markdown にHTML直貼り

WSLだけ外に出れない？

対象環境

状態

調査

対応

確認

グラボなくても余裕でStable Diffusion WebUI デビュー前編

ローカル環境のご紹介

1. 事前準備

1-1. Python 3.10.6 のインストール

python のインストールで`モジュールが足りない`エラーで詰まったら

1-2. Git でクローン

2. Stable Diffusion Web UI の起動

2-1. 引数の設定

2-2. 起動！

あそぴテックの技術ブログはじめます

1. TailWind CSSにTwitter色を追加

2. SVGの色をTailwind CSSで指定

3. Style タグに変数を渡して Tailwind CSSをバリアブル(可変)にする

1. Alpine.js でコンポーネント作成

1-1. セットアップ

1-2. コンポーネントの作成

1. Markdown の"脚注"

2. Markdown の目次を表示

3. Markdown のコードブロックにタイトルをつける

初めに

技術スタック

1. ビルドのログを細かく出す。

2. Markdown で生成した後のHTMLにTailwind CSSを適応する

2-1. @tailwindcss/typography

2-2. prose でざっくり指定

2-3. @layer component でがっつり

2-4. Markdown にHTML直貼り

対象環境

状態

調査

対応

確認

ローカル環境のご紹介

1. 事前準備

1-1. Python 3.10.6 のインストール

python のインストールでモジュールが足りないエラーで詰まったら

1-2. Git でクローン

2. Stable Diffusion Web UI の起動

2-1. 引数の設定

2-2. 起動！

python のインストールで`モジュールが足りない`エラーで詰まったら