Notion APIと連携したNext.js用ブログテーマ Awesomeの紹介

https://www.notion.so/73b60eecc10f4e74a4e9e8cd6a8b3a6e?v=ec2d1ecf153146679b44dc21fa54dc7a

$ yarn

$ yarn dev

export default {
  // サイトロゴはここで設定してください👇
  siteLogo: {
    url: "/images/logo.svg",
    width: 201,
    height: 39,
  },
  // サイトの名前や説明はここで設定してください👇
  siteName: "AWESOME",
  title: "AWESOME",
  description:
    "AWESOME Next.js TypeScript MDX Blog Theme",
  // ブログの色の定義など👇
  styles: {
    containerMaxWidth: "1280px",
    colors: {
      primary: "#50C0A1",
      primaryGradient:
        "linear-gradient(to right, #06A9B7, #B0DE87)",
      base: "#F2F4F3",
      border: "",
      bg: "#F7F7F7",
      text: "#2C2C2C",
      grayLighter: "#A0A0A0",
    },
    // ブレイクポイント👇
    breakPoints: {
      huge: "1440px",
      large: "1170px",
      medium: "768px",
      small: "450px",
    },
  },
  // 著者の説明👇
  account: {
    name: "Mr. AWESOME",
    description:
      "profile here profile here profile here profile here",
    image: `/images/me.png`,
    social: {
      twitter:
        "https://twitter.com/steelydylan",
      github:
        "https://github.com/steelydylan",
    },
  },
  // トップページのヒーロー画像👇
  hero: {
    title: "My awesome life",
    image: "/images/plane.jpeg",
    description:
      "AWESOME Next.js TypeScript MDX Blog Theme",
  },
  // ブログのナビゲーションはここで設定してください👇
  navigation: [
    {
      name: "travel",
      url: `/travel`,
    },
    {
      name: "camp",
      url: `/camp`,
    },
  ],
  // 1ページごとの記事数などの設定👇
  article: {
    defaultThumbnail:
      "/images/thumbnail.png",
    articlesPerPage: 6,
  },
  // ブログのカテゴリーはここで増やしてください👇
  categories: [
    {
      // idは半角英数字でNotionのテーブルで設定したカテゴリーのidと一致させてください👇
      id: "camp",
      title: "Camp",
      imagePath: "/images/camp.jpeg",
      description:
        "Look at my awesome camp life",
    },
    {
      id: "travel",
      title: "Travel",
      imagePath: "/images/london.jpeg",
      description:
        "Look at my awesome travel life",
    },
  ],
  // ブログのタグはここで増やしてください👇
  tags: [
    {
      id: "london",
      title: "London",
    },
    {
      id: "boston",
      title: "Boston",
    },
    {
      id: "paris",
      title: "Paris",
    },
    {
      id: "fire",
      title: "Fire",
    },
    {
      id: "sky",
      title: "Sky",
    },
  ],
};