Closed2024/02/03にクローズ2

memo @240203

GitHub

React

Astro

monaspace

nakamoto

GitHub Monaspace

monaspaceはGitHubがプログラミング用途に開発したモダンな等幅フォント。
monaspaceはコーディングフォントのトレンドを抑えながら、これまでにない要素を含んでいる。
なかでも注目はTexture healingと呼ばれる技術。

コーディングフォントは、それぞれのグリフが同じ幅をもつ等幅フォントとなっている。しかし、
たとえば「i」と「m」では文字の幅が大きく異なる。そのため、単純に同じグリフ幅を割り当てると「i」は余白が間延びして見え、逆に「m」は窮屈で委縮した感じを与える。文字の幅を同じにすることによって桁を美しく揃えたいというニーズは満されるものの、単語単位でみるとそれぞれの字の存在感に濃淡があり、ちぐはぐした印象を否めず、視覚的なデザインとしてはよくない。

そこでグリフの幅はそのまま、前後の文字に応じてレンダリングを調整したのがTexture healing。具体的には「i」に続き「m」があると「i」の描画位置を左へ少しずらし「m」を少し幅広に描画する。このように競合する文字が隣同士にあることを検出すると、代替グリフを用いてその競合を解消し、より自然なレンダリングを行う。

nakamoto

Astro 4.3

https://astro.build/blog/astro-430/

Astro 4.3よりi18n対応のためのドメインサポートが追加される。
（この言語ならこのドメイン名を使用するみたいな）

astro.config.mjs

import {defineConfig} from "astro/config"

export default defineConfig({
    site: "https://example.com",
    output: "server", // required, with no prerendered pages
    adapter: node({
      mode: 'standalone',
    }),
    i18n: {
        defaultLocaLe: 'en',
        locales: ['en', 'es', 'pt_BR', 'pt', 'fr'],
        domains: {
            fr: "https://fr.example.com",
            es: "https://example.es"
        },
        routing: {
          prefixDefaultLocale: true,
        }
    },
    experimental: {
        i18nDomains: true
    },
})

ComponentPropsという新しい型が追加される。
Reactにも実はあってそのコンポーネントのプロパティ（Props）を取れる。
カスタムコンポーネントならtypeofを使ったら取れる。

import type { ComponentProps } from 'astro/types';
import Button from "./Button.astro";

type MyButtonProps = ComponentProps<typeof Button>;

このスクラップは2024/02/03にクローズされました