Skip to content

Commit 46007c0

Browse files
SvenAlHamadSvenAlHamad
committed
Docs UI portal adjustments
1 parent 8d2f881 commit 46007c0

6 files changed

Lines changed: 159 additions & 73 deletions

File tree

‎src/components/page/Footer.js‎

Lines changed: 0 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,4 @@
11
import Link from "next/link";
2-
import { InputFooter } from "./InputFooter";
3-
4-
const ArrowIcon = (
5-
<svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
6-
<path
7-
d="M1 10.374L5.36871 5.57778L1.03281 0.625754"
8-
className="stroke-dark-blue dark:stroke-white"
9-
strokeLinecap="round"
10-
strokeLinejoin="round"
11-
/>
12-
</svg>
13-
);
142

153
export function Footer({ previous, next }) {
164
return (
@@ -49,61 +37,6 @@ export function Footer({ previous, next }) {
4937
)}
5038
</div>
5139
)}
52-
<div className="pt-[1.875rem] grid md:grid-cols-2 gap-y-[1.875rem] md:gap-y-0 md:gap-x-10">
53-
<div className="grid gap-y-1.5 text-[0.875rem] md:text-[1rem] leading-7">
54-
<div className="flex">
55-
<div className="mr-2.5 pt-2.5 h-7 w-1.5">{ArrowIcon}</div>
56-
<p>
57-
Questions? &nbsp;
58-
<a
59-
href="https://www.webiny.com/slack"
60-
target="_blank"
61-
rel="noreferrer"
62-
className="font-source-sans-pro text-orange underline hover:decoration-2"
63-
>
64-
Find us on slack.
65-
</a>
66-
</p>
67-
</div>
68-
<div className="flex">
69-
<div className="mr-2.5 pt-2.5 h-7 w-1.5">{ArrowIcon}</div>
70-
<p>
71-
Found a bug on the page, &nbsp;
72-
<a
73-
href="https://github.com/webiny/docs.webiny.com"
74-
target="_blank"
75-
rel="noreferrer"
76-
className="font-source-sans-pro text-orange underline hover:decoration-2"
77-
>
78-
submit an issue or a PR.
79-
</a>
80-
</p>
81-
</div>
82-
<div className="flex">
83-
<div className="mr-2.5 pt-2.5 h-7 w-1.5">{ArrowIcon}</div>
84-
<p>
85-
Check out our &nbsp;
86-
<a
87-
href="https://www.webiny.com/roadmap"
88-
target="_blank"
89-
rel="noreferrer"
90-
className="font-source-sans-pro text-orange underline hover:decoration-2"
91-
>
92-
roadmap.
93-
</a>
94-
</p>
95-
</div>
96-
</div>
97-
<div>
98-
<p className="text-[0.875rem] md:text-[1rem] leading-7 font-bold">
99-
Join our developer newsletter
100-
</p>
101-
<InputFooter className="mt-2.5 mb-[0.3125rem]" />
102-
<p className="text-[0.75rem] leading-[0.875rem] dark:text-light-grey-5">
103-
You can unsubscribe at any time.
104-
</p>
105-
</div>
106-
</div>
10740
</footer>
10841
);
10942
}

‎src/components/page/SidebarTools.js‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
import { useEffect, useState } from "react";
2+
import clsx from "clsx";
3+
import { InputFooter } from "./InputFooter";
4+
5+
const GITHUB_REPO = "https://github.com/webiny/webiny-js";
6+
7+
const GithubIcon = (
8+
<svg
9+
width="16"
10+
height="16"
11+
viewBox="0 0 16 16"
12+
className="fill-dark-blue dark:fill-white"
13+
aria-hidden="true"
14+
>
15+
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
16+
</svg>
17+
);
18+
19+
const StarIcon = (
20+
<svg
21+
width="14"
22+
height="14"
23+
viewBox="0 0 24 24"
24+
fill="none"
25+
stroke="currentColor"
26+
strokeWidth="2"
27+
strokeLinecap="round"
28+
strokeLinejoin="round"
29+
aria-hidden="true"
30+
>
31+
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
32+
</svg>
33+
);
34+
35+
function formatStars(count) {
36+
if (count >= 1000) {
37+
return `${(count / 1000).toFixed(1).replace(/\.0$/, "")}k`;
38+
}
39+
return `${count}`;
40+
}
41+
42+
function StarOnGithub() {
43+
const [stars, setStars] = useState(null);
44+
45+
useEffect(() => {
46+
let active = true;
47+
fetch("https://api.github.com/repos/webiny/webiny-js")
48+
.then(res => (res.ok ? res.json() : null))
49+
.then(data => {
50+
if (active && data && typeof data.stargazers_count === "number") {
51+
setStars(data.stargazers_count);
52+
}
53+
})
54+
.catch(() => {});
55+
return () => {
56+
active = false;
57+
};
58+
}, []);
59+
60+
return (
61+
<div>
62+
<p className="text-sidebar-right-title font-semibold text-dark-blue dark:text-white mb-2.5">
63+
Star on GitHub
64+
</p>
65+
<a
66+
href={GITHUB_REPO}
67+
target="_blank"
68+
rel="noreferrer"
69+
className="group inline-flex items-stretch overflow-hidden rounded-md border border-neutral-200 dark:border-dark-grey text-nav-link font-roboto text-dark-blue dark:text-white transition-colors duration-300 hover:border-[#fa592885]"
70+
>
71+
<span className="flex items-center gap-x-1.5 px-2.5 py-1.5 group-hover:text-orange">
72+
{StarIcon}
73+
<span className="font-semibold">Star</span>
74+
</span>
75+
<span className="flex items-center px-2.5 py-1.5 border-l border-neutral-200 dark:border-dark-grey font-semibold">
76+
{stars === null ? GithubIcon : formatStars(stars)}
77+
</span>
78+
</a>
79+
</div>
80+
);
81+
}
82+
83+
const links = [
84+
{
85+
label: "Questions?",
86+
linkText: "Find us on Slack.",
87+
href: "https://www.webiny.com/slack"
88+
},
89+
{
90+
label: "Found a bug on the page?",
91+
linkText: "Submit an issue or a PR.",
92+
href: "https://github.com/webiny/docs.webiny.com"
93+
},
94+
{
95+
label: "Check out our",
96+
linkText: "roadmap.",
97+
href: "https://www.webiny.com/roadmap"
98+
}
99+
];
100+
101+
export function SidebarTools({ divider = true }) {
102+
return (
103+
<div
104+
className={clsx(
105+
"flex flex-col gap-y-8",
106+
divider
107+
? "mt-8 pt-6 border-t border-neutral-200 dark:border-dark-grey"
108+
: "mt-[1.725rem]"
109+
)}
110+
>
111+
<StarOnGithub />
112+
113+
<ul className="flex flex-col gap-y-2.5 text-nav-link leading-5 font-roboto text-dark-blue dark:text-white">
114+
{links.map(item => (
115+
<li key={item.href}>
116+
{item.label}{" "}
117+
<a
118+
href={item.href}
119+
target="_blank"
120+
rel="noreferrer"
121+
className="font-source-sans-pro text-orange underline hover:decoration-2"
122+
>
123+
{item.linkText}
124+
</a>
125+
</li>
126+
))}
127+
</ul>
128+
129+
<div>
130+
<p className="text-sidebar-right-title font-semibold text-dark-blue dark:text-white mb-2.5">
131+
Join our developer newsletter
132+
</p>
133+
<InputFooter className="mb-[0.3125rem]" />
134+
<p className="text-[0.75rem] leading-[0.875rem] text-light-grey-4 dark:text-light-grey-5">
135+
You can unsubscribe at any time.
136+
</p>
137+
</div>
138+
</div>
139+
);
140+
}

‎src/components/page/TableOfContents.js‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { createContext, Fragment, useCallback, useEffect, useState, useContext } from "react";
22
import clsx from "clsx";
33
import { scroll } from "@/css/scroll.module.css";
4+
import { SidebarTools } from "./SidebarTools";
45

56
const TableOfContentsContext = createContext();
67

@@ -84,11 +85,18 @@ export function TableOfContents() {
8485

8586
let pageHasSubsections = section => section.children.length > 0;
8687

88+
const hasTableOfContents = tableOfContents.length > 0;
89+
8790
return (
8891
<div
89-
className={`fixed z-20 top-[4.15rem] bottom-0 right-[max(0px,calc(50%-48.5rem))] 3xl:right-[max(0px,calc(50%-50rem))] w-[19.5rem] 3xl:w-[22rem] pl-[4.3125rem] pr-[1.8125rem] overflow-y-auto hidden xl:block ${scroll}`}
92+
className={`fixed z-20 top-[4.15rem] bottom-0 right-[max(0px,calc(50%-48.5rem))] 3xl:right-[max(0px,calc(50%-50rem))] w-[19.5rem] 3xl:w-[22rem] pl-[4.3125rem] pr-[1.8125rem] pb-10 overflow-y-auto hidden xl:block ${scroll}`}
9093
>
91-
<div className="border-l-2 border-orange pl-5 pt-[0.3125rem] pb-2.5 mt-[1.725rem]">
94+
{hasTableOfContents && (
95+
<>
96+
<p className="text-sidebar-right-title font-semibold text-dark-blue dark:text-white mt-[1.725rem] mb-3">
97+
On this page
98+
</p>
99+
<div className="border-l-2 border-orange pl-5 pt-[0.3125rem] pb-2.5">
92100
<ul className="text-nav-link not-prose font-roboto">
93101
{tableOfContents.map((section, index) => (
94102
<Fragment key={section.slug}>
@@ -142,7 +150,11 @@ export function TableOfContents() {
142150
</Fragment>
143151
))}
144152
</ul>
145-
</div>
153+
</div>
154+
</>
155+
)}
156+
157+
<SidebarTools divider={hasTableOfContents} />
146158
</div>
147159
);
148160
}

‎src/hooks/usePrevNext.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ function flatPages(links, pages = []) {
55
for (const link of links) {
66
if (link.type === "page") {
77
pages.push(link);
8-
} else if (link.type === "collapsable" || link.type === "section") {
8+
} else if (Array.isArray(link.items)) {
9+
// Recurse into any container node (group, collapsable, section, ...).
910
flatPages(link.items, pages);
1011
}
1112
}

‎src/layouts/NonVersionedLayout.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export function NonVersionedLayout({ titleSuffix, children }) {
5353
<SourceFile />
5454
</Footer>
5555

56-
{page.tableOfContents.length > 0 && <TableOfContents />}
56+
<TableOfContents />
5757
</div>
5858
</TableOfContentsProvider>
5959
</SidebarLayout>

‎src/layouts/VersionedLayout.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export function VersionedLayout({ titleSuffix, children, ...props }) {
5959
</Link>
6060
</Footer>
6161

62-
{page.tableOfContents.length > 0 && <TableOfContents />}
62+
<TableOfContents />
6363
</div>
6464
</TableOfContentsProvider>
6565
</VersionedSidebarLayout>

0 commit comments

Comments
 (0)