docs/theme.config.tsx at main · tangle-network/docs · 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 { useRouter } from "next/router";
import { DocsThemeConfig, ThemeSwitch, useConfig } from "nextra-theme-docs";
import Footer from "./components/Footer";
import HeaderLogo from "./components/HeaderLogo";
import HelpDiscordBtn from "./components/HelpDiscordBtn";
import Navigation from "./components/Navigation";

const SITE_ROOT = "https://docs.tangle.tools";

function Head() {
  const router = useRouter();
  const fullUrl =
    router.asPath === "/" ? SITE_ROOT : `${SITE_ROOT}${router.asPath}`;

  const { frontMatter } = useConfig();

  // Set default values for title and description
  const defaultTitle = "Tangle Docs";
  const tabTitle = "Tangle Docs - Autonomous Work";
  const defaultDescription = "Comprehensive documentation for Tangle Tools";

  // Get the title and description from the front matter, or use the default values
  const title = frontMatter.title
    ? `${frontMatter.title} - ${defaultTitle}`
    : defaultTitle;

  const description = frontMatter.description || defaultDescription;

  return (
    <>
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <link
        rel="apple-touch-icon"
        sizes="180x180"
        href={`/images/favicon/apple-touch-icon.png`}
      />
      <link
        rel="icon"
        type="image/png"
        sizes="32x32"
        href={`/images/favicon/favicon-32x32.png`}
      />
      <link
        rel="icon"
        type="image/png"
        sizes="16x16"
        href={`/images/favicon/favicon-16x16.png`}
      />
      <link
        rel="mask-icon"
        href={`/images/favicon/safari-pinned-tab.svg`}
        color="#000000"
      />
      <link rel="shortcut icon" href={`/images/favicon/favicon.ico`} />
      <meta name="msapplication-TileColor" content="#000000" />
      <meta name="theme-color" content="#1F1D2B" />
      <meta name="twitter:card" content="summary_medium_image" />
      <meta name="twitter:site" content="@tangle_network" />
      <meta name="twitter:creator" content="@tanglenetwork" />
      <title>{tabTitle}</title>
      <meta name="description" content={description} />
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
      <link rel="canonical" href={fullUrl} />
      <meta property="og:type" content="website" />
      <meta
        property="twitter:image"
        content="https://assets-global.website-files.com/6494562b44a28080aafcbad4/6494599436915879aa403230_Tangle%20Logo.png"
      />
      <meta
        property="og:image"
        content="https://assets-global.website-files.com/6494562b44a28080aafcbad4/6494599436915879aa403230_Tangle%20Logo.png"
      />
      <meta property="og:locale" content="en_IE" />
      <meta property="og:site_name" content="Tangle Network" />
      <link rel="prefetch" href="/" as="document" />
    </>
  );
}

const theme: DocsThemeConfig = {
  docsRepositoryBase: "https://github.com/tangle-network/tangle-docs/tree/main",
  toc: {
    float: true,
  },
  logo: HeaderLogo,
  logoLink: false,
  head: Head,
  editLink: {
    content: "Edit this page on GitHub",
  },
  sidebar: {
    defaultMenuCollapseLevel: 1,
    autoCollapse: true,
  },
  navbar: {
    component: Navigation,
    extraContent: (
      <>
        <HelpDiscordBtn className="hidden xs:inline-block" />
        <ThemeSwitch
          lite
          className="hidden border xs:inline-block md:hidden lg:inline-block dark:border-gray-600"
        />
      </>
    ),
  },
  // Remove React warning in console https://github.com/shuding/nextra/issues/1213#issuecomment-1493038320
  search: {
    loading: "Loading...",
  },
  footer: {
    component: Footer,
  },
  nextThemes: {
    defaultTheme: "light",
  },
  color: {
    hue: 236,
    saturation: {
      light: 80,
      dark: 40,
    },
  },
};

export default theme;