docs: ✨ swizzle doc page to implement github auth access
Signed-off-by: slumbering <slumbering.pierrot@gmail.com>
This commit is contained in:
slumbering
195
website/src/theme/DocPage/index.js
Normal file
195
website/src/theme/DocPage/index.js
Normal file
@@ -0,0 +1,195 @@
|
||||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import { MDXProvider } from '@mdx-js/react';
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
||||
import renderRoutes from '@docusaurus/renderRoutes';
|
||||
import Layout from '@theme/Layout';
|
||||
import DocSidebar from '@theme/DocSidebar';
|
||||
import MDXComponents from '@theme/MDXComponents';
|
||||
import NotFound from '@theme/NotFound';
|
||||
import IconArrow from '@theme/IconArrow';
|
||||
import { matchPath } from '@docusaurus/router';
|
||||
import { translate } from '@docusaurus/Translate';
|
||||
import clsx from 'clsx';
|
||||
import styles from './styles.module.css';
|
||||
import { ThemeClassNames, docVersionSearchTag } from '@docusaurus/theme-common';
|
||||
import { Redirect } from "react-router";
|
||||
import qs from 'querystringify';
|
||||
import isEmpty from 'lodash/isEmpty';
|
||||
import { checkUserCollaboratorStatus, getUser } from '../../api/github'
|
||||
import { GithubLoginButton } from 'react-social-login-buttons';
|
||||
import Spinner from '../../components/Spinner';
|
||||
import DocAuthentication from '../../components/DocAuthentication';
|
||||
|
||||
function DocPageContent({ currentDocRoute, versionMetadata, children }) {
|
||||
const { siteConfig, isClient } = useDocusaurusContext();
|
||||
const { pluginId, permalinkToSidebar, docsSidebars, version } = versionMetadata;
|
||||
const sidebarName = permalinkToSidebar[currentDocRoute.path];
|
||||
const sidebar = docsSidebars[sidebarName];
|
||||
const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false);
|
||||
const [hiddenSidebar, setHiddenSidebar] = useState(false);
|
||||
const toggleSidebar = useCallback(() => {
|
||||
if (hiddenSidebar) {
|
||||
setHiddenSidebar(false);
|
||||
}
|
||||
|
||||
setHiddenSidebarContainer(!hiddenSidebarContainer);
|
||||
}, [hiddenSidebar]);
|
||||
return (
|
||||
<Layout
|
||||
key={isClient}
|
||||
wrapperClassName={ThemeClassNames.wrapper.docPages}
|
||||
pageClassName={ThemeClassNames.page.docPage}
|
||||
searchMetadatas={{
|
||||
version,
|
||||
tag: docVersionSearchTag(pluginId, version),
|
||||
}}>
|
||||
<div className={styles.docPage}>
|
||||
{sidebar && (
|
||||
<div
|
||||
className={clsx(styles.docSidebarContainer, {
|
||||
[styles.docSidebarContainerHidden]: hiddenSidebarContainer,
|
||||
})}
|
||||
onTransitionEnd={(e) => {
|
||||
if (
|
||||
!e.currentTarget.classList.contains(styles.docSidebarContainer)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (hiddenSidebarContainer) {
|
||||
setHiddenSidebar(true);
|
||||
}
|
||||
}}
|
||||
role="complementary">
|
||||
<DocSidebar
|
||||
key={
|
||||
// Reset sidebar state on sidebar changes
|
||||
// See https://github.com/facebook/docusaurus/issues/3414
|
||||
sidebarName
|
||||
}
|
||||
sidebar={sidebar}
|
||||
path={currentDocRoute.path}
|
||||
sidebarCollapsible={
|
||||
siteConfig.themeConfig?.sidebarCollapsible ?? true
|
||||
}
|
||||
onCollapse={toggleSidebar}
|
||||
isHidden={hiddenSidebar}
|
||||
/>
|
||||
|
||||
{hiddenSidebar && (
|
||||
<div
|
||||
className={styles.collapsedDocSidebar}
|
||||
title={translate({
|
||||
id: 'theme.docs.sidebar.expandButtonTitle',
|
||||
message: 'Expand sidebar',
|
||||
description:
|
||||
'The ARIA label and title attribute for expand button of doc sidebar',
|
||||
})}
|
||||
aria-label={translate({
|
||||
id: 'theme.docs.sidebar.expandButtonAriaLabel',
|
||||
message: 'Expand sidebar',
|
||||
description:
|
||||
'The ARIA label and title attribute for expand button of doc sidebar',
|
||||
})}
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
onKeyDown={toggleSidebar}
|
||||
onClick={toggleSidebar}>
|
||||
<IconArrow className={styles.expandSidebarButtonIcon} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<main
|
||||
className={clsx(styles.docMainContainer, {
|
||||
[styles.docMainContainerEnhanced]:
|
||||
hiddenSidebarContainer || !sidebar,
|
||||
})}>
|
||||
<div
|
||||
className={clsx(
|
||||
'container padding-vert--lg',
|
||||
styles.docItemWrapper,
|
||||
{
|
||||
[styles.docItemWrapperEnhanced]: hiddenSidebarContainer,
|
||||
},
|
||||
)}>
|
||||
<MDXProvider components={MDXComponents}>{children}</MDXProvider>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
function DocPage(props) {
|
||||
const {
|
||||
route: { routes: docRoutes },
|
||||
versionMetadata,
|
||||
location,
|
||||
} = props;
|
||||
const currentDocRoute = docRoutes.find((docRoute) =>
|
||||
matchPath(location.pathname, docRoute),
|
||||
);
|
||||
|
||||
// CUSTOM DOCPAGE
|
||||
const [isUserAuthorized, setIsUserAuthorized] = useState()
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [redirectState, setRedirectState] = useState()
|
||||
const authQuery = qs.parse(location.search);
|
||||
const [userAccessToken, setUserAccessToken] = useState((() => {
|
||||
if (typeof window !== "undefined") return window.localStorage.getItem('user-github-key')
|
||||
})())
|
||||
|
||||
useEffect(async () => {
|
||||
if (userAccessToken) {
|
||||
const user = await getUser(userAccessToken)
|
||||
setIsUserAuthorized(user)
|
||||
} else {
|
||||
if (!isEmpty(authQuery)) { //callback after successful auth with github)
|
||||
const isUserCollaborator = await checkUserCollaboratorStatus(authQuery.code);
|
||||
if (isUserCollaborator?.status === 200) {
|
||||
setUserAccessToken(isUserCollaborator.access_token)
|
||||
if (typeof window !== "undefined") window.localStorage.setItem('user-github-key', isUserCollaborator.access_token);
|
||||
} else {
|
||||
setIsUserAuthorized({ status: 401 })
|
||||
}
|
||||
}
|
||||
}
|
||||
setIsLoading(false)
|
||||
}, [userAccessToken])
|
||||
|
||||
|
||||
if (isLoading) return <Spinner />
|
||||
|
||||
if ((isUserAuthorized?.status && isUserAuthorized?.status === 401)) {
|
||||
return <p>Redirection vers dagger.io...</p>
|
||||
}
|
||||
|
||||
if (!isUserAuthorized) {
|
||||
return (
|
||||
<DocAuthentication />
|
||||
)
|
||||
}
|
||||
|
||||
// END CUSTOM DOCPAGE
|
||||
|
||||
if (!currentDocRoute) {
|
||||
return <NotFound {...props} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<DocPageContent
|
||||
currentDocRoute={currentDocRoute}
|
||||
versionMetadata={versionMetadata}>
|
||||
{renderRoutes(docRoutes)}
|
||||
</DocPageContent>
|
||||
);
|
||||
}
|
||||
|
||||
export default DocPage;
|
||||
98
website/src/theme/DocPage/styles.module.css
Normal file
98
website/src/theme/DocPage/styles.module.css
Normal file
@@ -0,0 +1,98 @@
|
||||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--doc-sidebar-width: 300px;
|
||||
}
|
||||
|
||||
:global(.docs-wrapper) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.docPage,
|
||||
.docMainContainer {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 997px) {
|
||||
.docMainContainer {
|
||||
flex-grow: 1;
|
||||
max-width: calc(100% - var(--doc-sidebar-width));
|
||||
}
|
||||
|
||||
.docMainContainerEnhanced {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.docSidebarContainer {
|
||||
width: var(--doc-sidebar-width);
|
||||
margin-top: calc(-1 * var(--ifm-navbar-height));
|
||||
border-right: 1px solid var(--ifm-toc-border-color);
|
||||
will-change: width;
|
||||
transition: width var(--ifm-transition-fast) ease;
|
||||
clip-path: inset(0);
|
||||
}
|
||||
|
||||
.docSidebarContainerHidden {
|
||||
width: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.collapsedDocSidebar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
max-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background-color var(--ifm-transition-fast) ease;
|
||||
}
|
||||
|
||||
.collapsedDocSidebar:hover,
|
||||
.collapsedDocSidebar:focus {
|
||||
background-color: var(--ifm-color-emphasis-200);
|
||||
}
|
||||
|
||||
.expandSidebarButtonIcon {
|
||||
transform: rotate(0);
|
||||
}
|
||||
html[dir='rtl'] .expandSidebarButtonIcon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .collapsedDocSidebar:hover,
|
||||
html[data-theme='dark'] .collapsedDocSidebar:focus {
|
||||
background-color: var(--collapse-button-bg-color-dark);
|
||||
}
|
||||
|
||||
.docItemWrapperEnhanced {
|
||||
max-width: calc(var(--ifm-container-width) + var(--doc-sidebar-width));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 996px) {
|
||||
.docSidebarContainer {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 997px) and (max-width: 1320px) {
|
||||
.docItemWrapper {
|
||||
max-width: calc(
|
||||
var(--ifm-container-width) - var(--doc-sidebar-width) -
|
||||
var(--ifm-spacing-horizontal) * 2
|
||||
);
|
||||
}
|
||||
|
||||
.docItemWrapperEnhanced {
|
||||
max-width: calc(
|
||||
var(--ifm-container-width) - var(--ifm-spacing-horizontal) * 2
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user