Repository navigation
Expand file tree
/
Copy pathDocsLayout.tsx
More file actions
116 lines (100 loc) · 3.26 KB
/
Copy pathDocsLayout.tsx
File metadata and controls
116 lines (100 loc) · 3.26 KB
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
import { useRouter } from "next/router";
import React, { useMemo } from "react";
import "twin.macro";
import { Feedback } from "../components/Feedback";
import { Link } from "../components/Link";
import { PageNav } from "../components/PageNav";
import { SEO } from "../components/SEO";
import { sidebarContent } from "../data/sidebar";
import { FrontMatter } from "../types";
import { Props as PageProps } from "./Page";
export interface Props extends PageProps {
frontMatter: FrontMatter;
}
const getOGImage = (title: string) =>
`https://og.railway.app/api/image?fileType=png&layoutName=Docs&Theme=Dark&URL=&Page=${encodeURIComponent(
title,
)}`;
export const DocsLayout: React.FC<Props> = ({
frontMatter,
children,
...props
}) => {
const { pathname } = useRouter();
const gitHubFileLink = useMemo(
() =>
`https://github.com/railwayapp/docs/edit/main/src/pages${pathname}.md`,
[pathname],
);
const { prevPage, nextPage } = useMemo(() => {
const sectionIndex = sidebarContent.findIndex(s =>
s.pages.find(p => p.slug === pathname),
)!;
const pageIndex = sidebarContent[sectionIndex].pages.findIndex(
p => p.slug === pathname,
);
const prevSection = sidebarContent[sectionIndex - 1];
const currentSection = sidebarContent[sectionIndex];
const nextSection = sidebarContent[sectionIndex + 1];
const prevPage =
pageIndex === 0
? prevSection != null
? prevSection.pages[prevSection.pages.length - 1]
: null
: currentSection.pages[pageIndex - 1];
const nextPage =
pageIndex === currentSection.pages.length - 1
? nextSection != null
? nextSection.pages[0]
: null
: currentSection.pages[pageIndex + 1];
return { prevPage, nextPage };
}, [pathname]);
return (
<>
<SEO
title={`${frontMatter.title} | Railway Docs`}
image={getOGImage(frontMatter.title)}
/>
<div tw="max-w-full">
<div tw="flex-auto prose">
<h1>{frontMatter.title}</h1>
<div className="docs-content">{children}</div>
</div>
<Feedback topic={frontMatter.title} />
<hr tw="my-16" />
<div
tw="flex items-center justify-between space-x-4 mb-8 md:mb-16"
className="prev-next-buttons"
>
{prevPage != null ? (
<Link href={prevPage.slug} tw="hover:text-pink-500">
<div tw="max-w-full">
<div tw="text-gray-600 text-sm mb-1">Prev</div>{" "}
<div tw="font-medium text-lg">{prevPage.title}</div>
</div>
</Link>
) : (
<div />
)}
{nextPage != null && (
<Link href={nextPage.slug} tw="hover:text-pink-500">
<div tw="text-right">
<div tw="text-gray-600 text-sm mb-1">Next</div>{" "}
<div tw="font-medium text-lg">{nextPage.title}</div>
</div>
</Link>
)}
</div>
<Link
className="edit-github-link"
tw="text-gray-500 text-sm underline hover:text-pink-500"
href={gitHubFileLink}
>
Edit this file on GitHub
</Link>
</div>
<PageNav title={frontMatter.title} />
</>
);
};