src/layouts/Layout.astro

---
import { SEO, type Props as SEOProps } from "astro-seo";
import { GoogleAnalytics } from "@astrolib/analytics";
import Header from "./Header/index.astro";
import Footer from "./Footer/index.astro";
import Toc from "./Toc.astro";
import "@styles/layout.scss";
import type { MDXLayoutProps, MarkdownHeading } from "astro";
import Author, { type Author as AuthorProps } from "./Author.astro";
import Breadcrumb from "./Breadcrumb.astro";
import type { Breadcrumb as BreadcrumbProps } from "./resolve-breadcrumb";
import Markdown from "@components/utils/Markdown.astro";
import type { Lang } from "@components/types";
import { parse as parsePath } from "path";
import "@fontsource/material-icons";
import "@fontsource-variable/open-sans";
import resolveBreadcrumb from "./resolve-breadcrumb";
import Emergency from "./Emergency.astro";

interface Props extends MDXLayoutProps<Frontmatter> {}

export interface Frontmatter {
  title: string;
  description?: string;
  lang: Lang;
  toc?: boolean;
  h1?: string;
  top?: boolean;
  support?: boolean;
  layout?: boolean;
  sitemap?: boolean;
  redirect_to?: string;
  author?: AuthorProps;
  breadcrumb?: BreadcrumbProps;
}

function createDefaultDescription(
  lang: Lang,
  headings: MarkdownHeading[],
): string {
  return (
    (
      {
        ja: "目次: ",
        en: "Table of Contents: ",
      }[lang] +
      headings
        .filter(({ depth }) => depth === 2)
        .map(({ text }) => text)
        .join("; ")
    ).slice(0, 97) + "..."
  );
}

const { frontmatter, headings, file } = Astro.props;
const {
  title,
  description = createDefaultDescription(frontmatter.lang, headings),
  lang,
  h1,
  top,
  support,
  author,
  breadcrumb,
} = frontmatter;

const displayToc = !top && (frontmatter.toc ?? true) && headings.length > 0;

const htmlAttributes = {
  en: {
    lang: "en",
    class: "en",
  },
  ja: {
    lang: "ja",
  },
}[lang];

const locale = {
  en: "en_US",
  ja: "ja_JP",
}[lang];

const gaid = "G-ZM6H96EWBD";

const canonicalUrl = new URL(Astro.url);
if (parsePath(file).name !== "index") {
  canonicalUrl.pathname = canonicalUrl.pathname.replace(/\/$/, "");
}

const seoProps: SEOProps = {
  title,
  titleTemplate: "%s | utelecon",
  titleDefault: "utelecon",
  description,
  charset: "UTF-8",
  canonical: canonicalUrl.href,
};
if (title) {
  seoProps.openGraph = {
    basic: {
      title,
      type: "website",
      url: canonicalUrl.href,
      image: new URL("/assets/images/ogp.png", Astro.site).href,
    },
    optional: {
      description,
      locale,
      siteName: "utelecon",
    },
    image: {
      alt: "utelecon",
    },
  };
  seoProps.twitter = {
    title,
    description,
  };
}

const resolvedBreadcrumb =
  breadcrumb && (await resolveBreadcrumb(Astro.url, breadcrumb));
---

<!doctype html>
<html {...htmlAttributes}>
  <head>
    <SEO {...seoProps} />

    <GoogleAnalytics id={gaid} partytown />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#157878" />
    <meta
      name="apple-mobile-web-app-status-bar-style"
      content="black-translucent"
    />

    <meta name="generator" content={Astro.generator} />

    <link rel="icon" href="/assets/images/favicon.png" />

    <script
      async
      src="https://cse.google.com/cse.js?cx=000989064976317806194:6h5uropjuyu"
    ></script>
  </head>
  <body>
    <Header lang={lang} top={top} canonicalUrl={canonicalUrl} />
    <main data-toc={displayToc} class="mark-external-link">
      {
        resolvedBreadcrumb && resolvedBreadcrumb.length > 1 && (
          <Breadcrumb breadcrumb={resolvedBreadcrumb} />
        )
      }
      {
        !top && (
          <h1 class="title">
            <Markdown content={h1 ?? title} />
          </h1>
        )
      }
      <div id="article">
        {displayToc && <Toc headings={headings} lang={lang} />}
        <div id="content">
          <Emergency />
          <slot />
          {
            author && (
              <>
                <hr />
                <Author lang={lang} author={author} />
              </>
            )
          }
        </div>
      </div>
    </main>
    <Footer lang={lang} support={support} />
    <style lang="scss">
      @import "../styles/color.scss";
      .title {
        margin-bottom: 2rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid $white-gray-dark;
        font-size: 2rem;
        font-weight: bold;
        color: black;
      }
    </style>
  </body>
</html>

<style lang="scss">
  @import "@styles/color.scss";
  @import "@styles/toc.scss";
  .title {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid $white-gray-dark;
    font-size: 2rem;
    font-weight: bold;
    color: black;
  }
  main[data-toc] {
    #article {
      display: flex;
      flex-direction: row-reverse;
      gap: $article-gap;
    }
    #content {
      /* so that the content does not overflow the viewport */
      min-width: 0;
      flex-grow: 1;
    }
  }
  @media screen and (max-width: calc(768px + $toc-width + $article-gap)) {
    main[data-toc] {
      #article {
        flex-direction: column;
      }
    }
  }
</style>