diff --git a/website/.env b/website/.env new file mode 100644 index 00000000..6737a79d --- /dev/null +++ b/website/.env @@ -0,0 +1,2 @@ +REACT_APP_CLIENT_ID=cd8f9be2562bfc8d6cfc +REACT_APP_CLIENT_SECRET=4856ebc1101d1228e21b0c9705e8d08105804a3e \ No newline at end of file diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 3ed9b38a..61866f85 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -12,12 +12,10 @@ module.exports = { organizationName: "Dagger", projectName: "Dagger", stylesheets: [ - "https://fonts.gstatic.com", - "https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap", "https://fonts.googleapis.com/css2?family=Karla&family=Poppins:wght@700&display=swap", ], themeConfig: { - sidebarCollapsible: false, + sidebarCollapsible: true, prism: { theme: require("prism-react-renderer/themes/okaidia"), }, @@ -58,5 +56,8 @@ module.exports = { }, ], ], - plugins: ["docusaurus-plugin-sass"], + plugins: [ + "docusaurus-plugin-sass", + "docusaurus2-dotenv" + ], }; diff --git a/website/package.json b/website/package.json index 795dccc3..575a5e80 100644 --- a/website/package.json +++ b/website/package.json @@ -20,9 +20,11 @@ "@svgr/webpack": "^5.5.0", "clsx": "^1.1.1", "docusaurus-plugin-sass": "^0.2.0", + "docusaurus2-dotenv": "^1.4.0", "file-loader": "^6.2.0", "react": "^17.0.1", "react-dom": "^17.0.1", + "react-social-login-buttons": "^3.4.0", "sass": "^1.34.1", "url-loader": "^4.1.1" }, diff --git a/website/src/api/github.js b/website/src/api/github.js new file mode 100644 index 00000000..30ff6bfb --- /dev/null +++ b/website/src/api/github.js @@ -0,0 +1,58 @@ +import axios from 'axios'; + +const AxiosInstance = axios.create({ + headers: { 'Accept': 'application/vnd.github.v3+json' }, +}); + +async function getAccessToken(code) { + + try { + const getAccessToken = await AxiosInstance.get('https://github.com/login/oauth/access_token', { + params: { + code, + client_id: process.env.REACT_APP_CLIENT_ID, + client_secret: process.env.REACT_APP_CLIENT_SECRET, + }, + validateStatus: function (status) { + return status < 500; // Resolve only if the status code is less than 500 + } + }) + + return getAccessToken.data; + } catch (error) { + console.log("error getAccessToken", error.message) + } +} + +export async function getUser(access_token) { + try { + const getUserLogin = await AxiosInstance.get("https://api.github.com/user", { + headers: { Authorization: `token ${access_token}` }, + validateStatus: function (status) { + return status < 500; // Resolve only if the status code is less than 500 + } + }) + + return { + login: getUserLogin.data.login, + status: getUserLogin.status + } + } catch (error) { + console.log("error getUser", error.message) + } +} + +export async function checkUserCollaboratorStatus(code) { + const { access_token } = await getAccessToken(code) + const { login } = await getUser(access_token) + try { + const isUserCollaborator = await AxiosInstance.get(`https://docs-access.dagger.io/u/${login}`) + + return { + status: isUserCollaborator.status, + access_token + } + } catch (error) { + console.log("error checkUserCollaboratorStatus", error.message); + } +} \ No newline at end of file diff --git a/website/src/components/DocAuthentication.js b/website/src/components/DocAuthentication.js new file mode 100644 index 00000000..de2199fa --- /dev/null +++ b/website/src/components/DocAuthentication.js @@ -0,0 +1,13 @@ +import React from "react"; +import { GithubLoginButton } from 'react-social-login-buttons'; +import style from './DocAuthentication.module.css' + +export default function DocAuthentication() { + return ( +
+

Welcome on Dagger documentation

+

Please Sign in to Github in order to get access to the doc

+ window.location.href = `//github.com/login/oauth/authorize?client_id=${process.env.REACT_APP_CLIENT_ID}&scope=user&allow_signup=false`} /> +
+ ) +} \ No newline at end of file diff --git a/website/src/components/DocAuthentication.module.css b/website/src/components/DocAuthentication.module.css new file mode 100644 index 00000000..5fd0ada2 --- /dev/null +++ b/website/src/components/DocAuthentication.module.css @@ -0,0 +1,13 @@ +.container { + background: url("/img/Dagger_Website_Space_Uranus.png") no-repeat; + background-size: cover; + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.btn__github { + width: 240px !important; +} \ No newline at end of file diff --git a/website/src/components/Spinner.js b/website/src/components/Spinner.js new file mode 100644 index 00000000..1cdb3161 --- /dev/null +++ b/website/src/components/Spinner.js @@ -0,0 +1,8 @@ +import React from 'react'; +import styles from './Spinner.module.css'; + +export default function Spinner() { + return ( +
+ ) +} \ No newline at end of file diff --git a/website/src/components/Spinner.module.css b/website/src/components/Spinner.module.css new file mode 100644 index 00000000..15f5d9de --- /dev/null +++ b/website/src/components/Spinner.module.css @@ -0,0 +1,64 @@ +.ellipsis { + display: inline-block; + position: absolute; + top: 50vh; + z-index: 99999; + left: 50vw; + transform: translate(-50%, -50%); + width: 80px; + height: 80px; +} +.ellipsis div { + position: absolute; + top: 33px; + width: 13px; + height: 13px; + border-radius: 50%; + background: var(--ifm-color-primary-dark); + animation-timing-function: cubic-bezier(0, 1, 1, 0); +} + +html[data-theme="dark"] .ellipsis div { + background: var(--ifm-color-primary-light); +} + +.ellipsis div:nth-child(1) { + left: 8px; + animation: lds-ellipsis1 0.6s infinite; +} +.ellipsis div:nth-child(2) { + left: 8px; + animation: lds-ellipsis2 0.6s infinite; +} +.ellipsis div:nth-child(3) { + left: 32px; + animation: lds-ellipsis2 0.6s infinite; +} +.ellipsis div:nth-child(4) { + left: 56px; + animation: lds-ellipsis3 0.6s infinite; +} +@keyframes lds-ellipsis1 { + 0% { + transform: scale(0); + } + 100% { + transform: scale(1); + } +} +@keyframes lds-ellipsis3 { + 0% { + transform: scale(1); + } + 100% { + transform: scale(0); + } +} +@keyframes lds-ellipsis2 { + 0% { + transform: translate(0, 0); + } + 100% { + transform: translate(24px, 0); + } +} diff --git a/website/src/theme/DocPage/index.js b/website/src/theme/DocPage/index.js new file mode 100644 index 00000000..b5d67846 --- /dev/null +++ b/website/src/theme/DocPage/index.js @@ -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 ( + +
+ {sidebar && ( +
{ + if ( + !e.currentTarget.classList.contains(styles.docSidebarContainer) + ) { + return; + } + + if (hiddenSidebarContainer) { + setHiddenSidebar(true); + } + }} + role="complementary"> + + + {hiddenSidebar && ( +
+ +
+ )} +
+ )} +
+
+ {children} +
+
+
+ + ); +} + +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 + + if ((isUserAuthorized?.status && isUserAuthorized?.status === 401)) { + return

Redirection vers dagger.io...

+ } + + if (!isUserAuthorized) { + return ( + + ) + } + + // END CUSTOM DOCPAGE + + if (!currentDocRoute) { + return ; + } + + return ( + + {renderRoutes(docRoutes)} + + ); +} + +export default DocPage; diff --git a/website/src/theme/DocPage/styles.module.css b/website/src/theme/DocPage/styles.module.css new file mode 100644 index 00000000..19bfa5fc --- /dev/null +++ b/website/src/theme/DocPage/styles.module.css @@ -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 + ); + } +} diff --git a/website/static/img/Dagger_Website_Space_Uranus.png b/website/static/img/Dagger_Website_Space_Uranus.png new file mode 100644 index 00000000..b1b3f4bf Binary files /dev/null and b/website/static/img/Dagger_Website_Space_Uranus.png differ diff --git a/website/yarn.lock b/website/yarn.lock index d9d89caf..6c248b52 100644 --- a/website/yarn.lock +++ b/website/yarn.lock @@ -3382,6 +3382,13 @@ docusaurus-plugin-sass@^0.2.0: dependencies: sass-loader "^10.1.1" +docusaurus2-dotenv@^1.4.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/docusaurus2-dotenv/-/docusaurus2-dotenv-1.4.0.tgz#9ab900e29de9081f9f1f28f7224ff63760385641" + integrity sha512-iWqem5fnBAyeBBtX75Fxp71uUAnwFaXzOmade8zAhN4vL3RG9m27sLSRwjJGVVgIkEo3esjGyCcTGTiCjfi+sg== + dependencies: + dotenv-webpack "1.7.0" + dom-converter@^0.2: version "0.2.0" resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768" @@ -3478,6 +3485,25 @@ dot-prop@^5.2.0: dependencies: is-obj "^2.0.0" +dotenv-defaults@^1.0.2: + version "1.1.1" + resolved "https://registry.yarnpkg.com/dotenv-defaults/-/dotenv-defaults-1.1.1.tgz#032c024f4b5906d9990eb06d722dc74cc60ec1bd" + integrity sha512-6fPRo9o/3MxKvmRZBD3oNFdxODdhJtIy1zcJeUSCs6HCy4tarUpd+G67UTU9tF6OWXeSPqsm4fPAB+2eY9Rt9Q== + dependencies: + dotenv "^6.2.0" + +dotenv-webpack@1.7.0: + version "1.7.0" + resolved "https://registry.yarnpkg.com/dotenv-webpack/-/dotenv-webpack-1.7.0.tgz#4384d8c57ee6f405c296278c14a9f9167856d3a1" + integrity sha512-wwNtOBW/6gLQSkb8p43y0Wts970A3xtNiG/mpwj9MLUhtPCQG6i+/DSXXoNN7fbPCU/vQ7JjwGmgOeGZSSZnsw== + dependencies: + dotenv-defaults "^1.0.2" + +dotenv@^6.2.0: + version "6.2.0" + resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-6.2.0.tgz#941c0410535d942c8becf28d3f357dbd9d476064" + integrity sha512-HygQCKUBSFl8wKQZBSemMywRWcEDNidvNbjGVyZu3nbZ8qq9ubiPoGLMdRDpfSrpkkm9BXYFkpKxxFX38o/76w== + duplexer3@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2" @@ -6891,6 +6917,11 @@ react-side-effect@^2.1.0: resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.1.tgz#66c5701c3e7560ab4822a4ee2742dee215d72eb3" integrity sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ== +react-social-login-buttons@^3.4.0: + version "3.4.0" + resolved "https://registry.yarnpkg.com/react-social-login-buttons/-/react-social-login-buttons-3.4.0.tgz#7b3f249c661624435e01881cf163ef4c4a960409" + integrity sha512-bECnTNfRSPKMnwVdfsLNNi0Fv5A8btJw3ANLg1Zj95DCjP11KPKUuhqOj9AQWLmQeyrLjMO7orEFE5M2QiDY9A== + react-textarea-autosize@^8.3.2: version "8.3.2" resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.3.2.tgz#4f9374d357b0a6f6469956726722549124a1b2db"