p5.js-website/src/layouts/BaseLayout.astro at 4d4a2f31d5ef622eeedfec61f781835264ccbcda · processing/p5.js-website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
---
import Footer from "@components/Footer/index.astro";
import Nav from "@components/Nav/index.astro";
import Settings from "@components/Settings/index.astro";
import RootPageHeader from "@/src/components/PageHeader/RootPage.astro";
import ItemPageHeader from "@/src/components/PageHeader/ItemPage.astro";
import HomePageHeader from "@/src/components/PageHeader/HomePage.astro";
import { getCurrentLocale, getUiTranslator } from "@i18n/utils";
import { capitalize, getTopicInfo, type PageTopic } from "../pages/_utils";
import "@styles/base.scss";
import type { CollectionEntry } from "astro:content";
import { getCollectionInLocaleWithFallbacks } from "@pages/_utils";
import { removeLocalePrefix } from "@i18n/utils";

interface Props {
  title: string;
  titleAuthor?: string;
  titleClass?: string;
  subtitle?: string | null;
  className?: string;
  variant?: "root" | "item" | "search" | "homepage";
  topic?: PageTopic;
  mainContentParentClass?: string;
  /* Only needed for the homepage */
  homepageConfig?: CollectionEntry<"homepage">;
}

const {
  title,
  titleAuthor,
  titleClass = title,
  subtitle,
  className = "",
  variant = "root",
  mainContentParentClass = "mx-5 md:mx-lg mt-md",
  homepageConfig,
} = Astro.props;

const currentLocale = getCurrentLocale(Astro.url.pathname);

const slug = title.toLowerCase().split(/\s+|\./).join('-');
const pages = await getCollectionInLocaleWithFallbacks("pages", currentLocale);
const headerPage = pages.find((page) => removeLocalePrefix(page.slug).slice(1) === slug);
let HeaderContent: any = undefined;
if (headerPage) {
  const { Content } = await headerPage.render();
  HeaderContent = Content;
}

const t = await getUiTranslator(currentLocale);
const localizedTitle = t(title);
const localizedSubtitle = subtitle
  ? t(subtitle)
  : subtitle === undefined
    ? t("briefPageDescriptions", title)
    : undefined;
const topic = getTopicInfo(Astro.props.topic);
const splitPathname = Astro.url.pathname.split("/");
const fallbackTopic = splitPathname[splitPathname.length - 2];
const headerTopic = topic
  ? { name: t(topic.name) as string, url: topic.url }
  : { name: t(capitalize(fallbackTopic)) as string, url: `/${fallbackTopic}` };
---

<html
  class={`${titleClass.toLowerCase()} ${className} scroll-smooth`}
  lang={currentLocale}
>
  <head>
    <script is:inline>
      // Get any theme settings and apply before load
      const settings = [
        "dark-theme",
        "monochrome-theme",
        "show-alt-text",
        "reduced-motion",
      ];
      const storedSettings = settings.filter(
        (setting) => localStorage.getItem(setting) === "true"
      );
      if (storedSettings.length === 0) {
        storedSettings.push("light-theme");
      }
      const htmlElement = document.documentElement;
      htmlElement.className = `${storedSettings.join(" ")} ${htmlElement.className}`;
    </script>
  </head>
  <body>
    <div class="top-layout-grid">
      <Nav />
      <Settings hideSearch={variant === "search"} />
      <header class={homepageConfig && "h-[100vh] md:min-h-[calc(378px+50vh)]"}>
        {
          variant === "root" ? (
            <RootPageHeader
              title={localizedTitle}
              subtitle={localizedSubtitle}
            />
          ) : variant === "item" ? (
            <ItemPageHeader
              title={localizedTitle as string}
              titleAuthor={titleAuthor}
              subtitle={localizedSubtitle as string}
              topic={headerTopic}
            />
          ) : (
            variant === "homepage" && (
              <HomePageHeader config={homepageConfig!} />
            )
          )
        }
      </header>
      <main id="main-content" class="relative">
        <div id="processing-banner" style="margin-left: var(--nav-offset-x);">
        </div>
        {
          HeaderContent && (
            <div class="px-5 md:px-lg pt-sm pb-lg">
              <div class="rendered-markdown">
                <HeaderContent />
              </div>
            </div>
        )}
        <div class={mainContentParentClass}>
          <slot />
        </div>
      </main>
      <Footer />
    </div>
  </body>
</html>