Zenn
Open7

Lume でWebサイトを作ってみる

Deno
lume
leviosa42leviosa42

motivation

  • 記事ネタによっては投稿先を選ぶものがある(大学や私生活など)
  • フロントエンドやりたい
  • Lume を選んだ理由として
    • Deno が好きだからそれのフレームワークでやる
    • 某JPや某青鳥でよく見る方のブログ 経由で知った

bookmark

leviosa42leviosa42

helpers の使い方 (vento -> jsxへ)

tl;dr

こうかかれていたら

vento
<h1>{{ title |> uppercase }}</h1>
jsx
export default function (data, filters) {
  const text = filters.uppercase(data.title);

  return `<h1>${text}</h1>`;
}

これに相当する。

_config.ts
export default function() {
    return (site: Lume.Site) => {
        site.use(simpleIcons())
    }
}
_include/layout/base.jsx
export default (data, heplers) => {
    return (
        <html lang="ja">
            <head>
                ...
            </head>
            <body>
+                {helpers.simpleicons(ICONNAME, OPTIONAL_ICONINFO)}
            </body>
        </html>
    );
        
}

ref:

leviosa42leviosa42

(https://github.com/lumeland/theme-simple-me での話)

plugins.ts
    site.data("textColor", (hex: string) => {
      const color = new Color(`#${hex}`);
      const onWhite = Math.abs(color.contrastWCAG21("white"));
      const onBlack = Math.abs(color.contrastWCAG21("black"));
      return (onWhite + 0.5) > onBlack ? "white" : "black";
    });

は、layoutsにおいて data引数のプロパティへtextColor として渡される。

_include/layouts/base.jsx
export default (data, helpers) => {
  const color = data.textColor("fff");
  // ...
}
leviosa42leviosa42

所感: コンポーネントの扱い

_components/以下に配置してdata.comp: Lume.Dataから使うよりも、自分でimportして使った方がPropsの型補完が効くから使いやすい気がする

leviosa42leviosa42

deno task serveでコンポーネントの自動更新が反映されない

https://lume.land/docs/core/components/ に書いてあるけど、コンポーネントのファイル内で定義した型が反映されないので自分でimport ... from ...していた。
これだとdeno task serveによるプレビューで自動更新が反映されなかった。

解決

-import MyComponent from "./components/MyComponent.tsx";
// _components/MyComponent.tsx に置く。

export default (data: Lume.Data) => {
    return (
-        <MyComponent />
+        <data.comp.MyComponent />
    )
}

公式通り_components/ディレクトリを作り、data.comp プロパティからコンポーネントを使うようにする。コンポーネント内で定義したPropsの型は反映されないけど仕方がない...