Section 7
フックを使う
Astro SarkaraではAstroコンポーネントだけではなくフックを用意しています。
よく使うフック
useLink(href, options)
リンクの種別を自動に判別し、ベースパスの自動的な付与と属性を取得するフック。
例えばサイト内リンクのとき、href="/posts/"、サイトのベースパスが/base-pathとすると、useLink(href)の返り値は{ href: "/base-path/posts/" }となる。
外部リンクの場合、href="https://panda-css.com/"とすると、useLink(href)の返り値は{ href: "https://panda-css.com/", target: "_blank", rel: "noreferrer noopener" }となる。
---
import type { HTMLAttributes } from "astro/types";
import { useLink } from "@cieloazul310/astro-sarkara";
type Props = HTMLAttributes<"a">;
const { href, ...props } = Astro.props;
const link = useLink(href);
/*
=> {
  href: string | URL | null;
  target?: "_blank";
  rel?: "noreferrer noopener";
}
*/
---
<a {...props} {...link}>
  <slot />
</a>
  TypeScript  
 docs.astro.build