Section 2

レイアウトを利用する

Astro Sarkaraにはデフォルトのレイアウトコンポーネントを用意しています。これを利用するにはAstroコンポーネント内のフロントマターでインポートを行います。

---
// src/page/hoge.astro
import { SarkaraLayout, defineSiteMetadata, defineMenu } from "@cieloazul310/astro-sarkara";

const siteMetadata = defineSiteMetadata({
  title: "Site title",
  description: "Site description",
});
const menu = defineMenu([
  { title: "Top", href: "/" },
]);
---

<SarkaraLayout siteMetadata={siteMetadata} menu={menu}>
  <!-- contents -->
</SarkaraLayout>

Astro Sarkaraレイアウトの機能

レスポンシブデザイン
ドロワー
ダークモード
拡張性
SEOの設定済

基本的な使い方

`src/pages/*.astro`内で直接利用

Astroページコンポーネントで直接利用する方法です。

---
// src/pages/hoge.astro
import { SarkaraLayout } from "@cieloazul310/astro-sarkara";
import { menu, siteMetadata } from "../data";
---

<SarkaraLayout 
  title="Page title" 
  description="Page description" 
  image="Page opengraph image"
  siteMetadata={siteMetadata}
  menu={menu}
>
  <!-- Page contents -->
</SarkaraLayout>

Markdown/MDXのテンプレートとして利用

Markdown/MDXのテンプレートとして利用する方法です。この場合<slot />にMarkdownのコンテンツが描写されます。

---
// .src/template/markdown.astro
import { SarkaraLayout, Paper } from "@cieloazul310/astro-sarkara";
import { menu, siteMetadata } from "../data";

interface Props {
  frontmatter: {
    title: string;
    description?: string;
    featuredImage: string; 
  } | null;
}
const { frontmatter } = Astro.props;
---

<SarkaraLayout 
  title={frontmatter?.title} 
  description={frontmatter?.description} 
  image={frontmatter?.featuredImage} 
  siteMetadata={siteMetadata} 
  menu={menu}
>
  <Paper>
    <slot />
  </Paper>
</SarkaraLayout>

src/pagesに配置したMarkdown/MDXコンテンツのフロントマターにレイアウトのパスを記述することで、コンテンツがレイアウト内に描写されます。

---
# src/pages/hoge.md
title: Markdown contents
description: Markdown contents example
layout: ../layout/markdown.astro
---

Markdown contents.

サイトメタデータ、メニューの作成

Astro SarkaraレイアウトにはmenuとsiteMetadataの属性が必須です。これらのデータは src/data/index.tsに作成することを推奨します。サイトメタデータとメニューの内容は、レイアウトコンポーネントを経由してサイドバーやドロワーに描写されます。

// src/data/index.ts
import { defineSiteMetadata, defineMenu } from "@cieloazul310/astro-sarkara";

export const siteMetadata = defineSiteMetadata({
  title: "Astro Sarkara",
  description: "Astro components library built with Panda CSS.",
  image: "/ogimage.jpeg", // for opengraph (optional)
  // favicon: "/favicon.ico", for original favicon (optional)
};)

export const menu = defineMenu([
  { title: "Top", href: "/" },
  { title: "Posts", href: "/posts" },
  {
    title: "Link",
    items: [
      { title: "Astro", href: "https://astro.build/" },
      { title: "Panda CSS", href: "https://panda-css.com/" },
    ],
  },
]);

Full-widthレイアウト

Full-widthレイアウトを使用することができます。Full-widthレイアウトではサイドバーは非表示になり、Floating Action Buttonが常に表示されます。

<SarkaraLayout variant="fullWidth">
  <Content />
</SarkaraLayout>

Full-width Layout

Tutorial Top