website/app/layout.tsx at main · runmedev/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
import "@/styles/globals.css";

import {
  IBM_Plex_Mono,
  IBM_Plex_Sans,
  Inter,
  JetBrains_Mono,
  Lato,
  Roboto_Slab,
} from "next/font/google";
// import { Analytics } from "@vercel/analytics/react";

import Tags from "@/components/Tags";
import { Providers } from "@/components/Providers";
import type { ReactNode } from "react";
import type { Metadata } from "next";

const description = "Execute your runbooks, docs, and READMEs.";
const defaultTitle = `RUNME runs Markdown `;

export const metadata: Metadata = {
  metadataBase: new URL("https://runme.dev"),
  manifest: "/site.webmanifest",
  title: {
    default: defaultTitle,
    template: "%s • RUNME",
  },
  description: description,
  keywords: ["Runbook", "Workflow", "Task", "Operations", "docs as code", "VS Code", "DevOps"],
  icons: {
    icon: "/favicon.ico",
    apple: "/",
    other: [
      { rel: "apple-touch-icon", url: "/apple-touch-icon.png" },
      { rel: "icon", type: "image/png", sizes: "32x32", url: "/favicon-32x32.png" },
      { rel: "icon", type: "image/png", sizes: "16x16", url: "/favicon-16x16.png" },
    ],
  },
  openGraph: {
    images: [
      {
        url: "https://runme.dev/img/intro.png",
        width: 1540,
        height: 866,
      },
      {
        url: "https://runme.dev/img/intro.gif",
        width: 1400,
        height: 788,
      },
    ],
    locale: "en-US",
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title: "RUNME",
    description: description,
    siteId: "10765432100123456789",
    creator: "@runmedev",
    creatorId: "10765432100123456789",
    images: ["https://runme.dev/img/intro.png"],
  },
};

const ibm_plex_mono = IBM_Plex_Mono({
  subsets: ["latin"],
  display: "swap",
  weight: ["100", "200", "300", "400", "500"],
  variable: "--font-ibm-plex-mono",
});

const ibm_plex_sans = IBM_Plex_Sans({
  subsets: ["latin"],
  display: "swap",
  weight: ["100", "200", "300", "400", "500"],
  variable: "--font-ibm-plex-sans",
});

const roboto_slab = Roboto_Slab({
  subsets: ["latin"],
  display: "swap",
  weight: ["100", "200", "300", "400", "500"],
  variable: "--font-roboto-slab",
});

const jetbrains_mono = JetBrains_Mono({
  subsets: ["latin"],
  display: "swap",
  weight: ["100", "200", "300", "400", "500"],
  variable: "--font-jetbrains-mono",
});

const lato = Lato({
  subsets: ["latin"],
  display: "swap",
  weight: ["100", "300", "400", "700", "900"],
  variable: "--font-lato",
});

const inter = Inter({
  subsets: ["latin"],
  display: "swap",
  weight: ["100", "200", "300", "400", "500"],
  variable: "--font-inter",
});

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html
      lang="en"
      className={`${ibm_plex_mono.variable} ${ibm_plex_sans.variable} ${roboto_slab.variable} ${jetbrains_mono.variable} ${lato.variable} ${inter.variable}`}
    >
      <head>
        <Tags />
      </head>
      <body className="flex flex-col w-full min-h-screen">
        <div className="bg-background-dark text-text-dark">
          <Providers>
            <main className="flex-1">{children}</main>
            {/* <Analytics /> */}
          </Providers>
        </div>
      </body>
    </html>
  );
}