From b895a404163104e517c917867c26a7c2d10697db Mon Sep 17 00:00:00 2001 From: Thomas Hallgren Date: Sat, 31 Aug 2024 15:44:44 +0200 Subject: [PATCH 01/18] Make website buildable without redirects to getambassador labs. Signed-off-by: Thomas Hallgren --- DEVELOPING.md | 14 +----- gatsby-node.js | 49 ++++++++----------- .../InterceptAnimation/InterceptsAnimation.js | 30 ++++++++++++ src/components/InterceptAnimation/index.js | 27 ++++++++++ src/components/MainNav/MainNav.js | 3 +- src/templates/doc-page.js | 43 +++++++++++----- src/templates/doc-page.less | 25 +++++----- yarn.lock | 6 +-- 8 files changed, 124 insertions(+), 73 deletions(-) create mode 100644 src/components/InterceptAnimation/InterceptsAnimation.js create mode 100644 src/components/InterceptAnimation/index.js diff --git a/DEVELOPING.md b/DEVELOPING.md index 4a8789e8..7d71a2c0 100644 --- a/DEVELOPING.md +++ b/DEVELOPING.md @@ -1,19 +1,6 @@ # How to hack on this ## Releasing Docs for new Telepresence Versions -If you are only making changes to the `docs/` directory and those changes -aren't ready to go out immediately (for example, if they are for a future -telepresence release), please make those changes in the -[telepresence repository](https://github.com/telepresenceio/telepresence). - -If you are making changes to more than the `docs/` and those changes are -for a future release, merge those changes into a branch `rel/x.y.z`. - -When it is time to do a telepresence release, the docs will be pushed to -the [docs repo](https://github.com/telepresenceio/docs). From there, you can -create (or checkout if it already exists) a `rel/x.y.z` branch on this repo -and run `make pull-docs`. Once you merge that PR, the website will update -with the docs for the new release. ## Local development quickstart @@ -29,6 +16,7 @@ Commands of interest: yarn install # Install dependencies in to ./node_modules/ # Development + export NODE_OPTIONS=--openssl-legacy-provider yarn run gatsby develop # Serve a hot-reloading development-build at http://localhost:8000/ yarn run gatsby repl # Run a Node.js REPL in the Gatsby environment yarn run eslint . # Run the linter diff --git a/gatsby-node.js b/gatsby-node.js index cfef8dbc..5dd11f0d 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -120,36 +120,27 @@ exports.createPages = async ({ graphql, actions }) => { const urlpath = docsConfig.urlpath(node); - if (urlpath === '/docs/latest/quick-start/') { - actions.createPage({ - // URL-path to create the page at - path: urlpath, - // Absolute filepath of the component to render the page with - component: path.resolve('./src/templates/doc-page.js'), - // Arguments to pass to that component's `query` - context: { - contentFileNodeID: node.id, - variablesFileNodeID: variablesCache[variablesFilepath], - sidebarFileNodeID: sidebarCache[sidebarFilepath], - docinfo: { - docrootURL: docsConfig.docrootURL(node), - canonicalURL: docsConfig.canonicalURL(node), - githubURL: docsConfig.githubURL(node), - - maybeShowReadingTime: docsConfig.maybeShowReadingTime(node), - - peerVersions: docsConfig.peerVersions(urlpath, allURLPaths), - }, + actions.createPage({ + // URL-path to create the page at + path: urlpath, + // Absolute filepath of the component to render the page with + component: path.resolve('./src/templates/doc-page.js'), + // Arguments to pass to that component's `query` + context: { + contentFileNodeID: node.id, + variablesFileNodeID: variablesCache[variablesFilepath], + sidebarFileNodeID: sidebarCache[sidebarFilepath], + docinfo: { + docrootURL: docsConfig.docrootURL(node), + canonicalURL: docsConfig.canonicalURL(node), + githubURL: docsConfig.githubURL(node), + + maybeShowReadingTime: docsConfig.maybeShowReadingTime(node), + + peerVersions: docsConfig.peerVersions(urlpath, allURLPaths), }, - }); - } else { - actions.createRedirect({ - fromPath: urlpath, - toPath: '/docs/latest/quick-start/', - redirectInBrowser: true, - isPermanent: true, - }); - } + }, + }); } // Create up redirects diff --git a/src/components/InterceptAnimation/InterceptsAnimation.js b/src/components/InterceptAnimation/InterceptsAnimation.js new file mode 100644 index 00000000..76755418 --- /dev/null +++ b/src/components/InterceptAnimation/InterceptsAnimation.js @@ -0,0 +1,30 @@ +import React from 'react'; + +import InterceptAnimationSVG from '../../assets/images/intercept-animation.inline.svg'; + +function Animation(props) { + const el = React.useRef(null); + React.useEffect(() => { + const queueAnimation = () => { + setTimeout(() => { + el.current?.getAnimations({ subtree: true })?.forEach((anim) => { + anim.finish(); + anim.play(); + }); + queueAnimation(); + }, 3000); + }; + queueAnimation(); + }, el); + return ( +
+ +
+ ); +} + +export default Animation; diff --git a/src/components/InterceptAnimation/index.js b/src/components/InterceptAnimation/index.js new file mode 100644 index 00000000..c7066c22 --- /dev/null +++ b/src/components/InterceptAnimation/index.js @@ -0,0 +1,27 @@ +import React, { useEffect, lazy, useState, Suspense } from 'react'; + +function InterceptAnimationLazy(props) { + const [Component, setComponent] = useState(null); + const [ReactSuspense, setSuspense] = useState(null); + + const FallBack = () =>
Loading...
; + + useEffect(() => { + const lazyComp = lazy(() => import(`./InterceptsAnimation`)); + setComponent(lazyComp); + setSuspense(Suspense); + }, []); + return ( + <> + {Component && ReactSuspense ? ( + }> + + + ) : ( + + )} + + ); +} + +export default InterceptAnimationLazy; diff --git a/src/components/MainNav/MainNav.js b/src/components/MainNav/MainNav.js index 536eff70..65a533d3 100644 --- a/src/components/MainNav/MainNav.js +++ b/src/components/MainNav/MainNav.js @@ -2,8 +2,7 @@ import React from 'react'; import '../Layout/layout.less'; const LINKS = [ - { label: 'Quick Start', link: '/docs/latest/quick-start/' }, - { label: 'Docs', link: 'https://www.getambassador.io/docs/telepresence-oss/' }, + { label: 'Docs', link: '/docs/latest/quick-start/' }, { label: 'Case Studies', link: '/case-studies' }, { label: 'Community', link: '/community' }, { label: 'About', link: '/about' }, diff --git a/src/templates/doc-page.js b/src/templates/doc-page.js index f81852f7..f12b4f13 100644 --- a/src/templates/doc-page.js +++ b/src/templates/doc-page.js @@ -1,5 +1,5 @@ import React from 'react'; -import { graphql } from 'gatsby'; +import { graphql, navigate } from 'gatsby'; import { Helmet } from 'react-helmet'; import { MDXProvider } from '@mdx-js/react'; import { MDXRenderer } from 'gatsby-plugin-mdx'; @@ -109,6 +109,12 @@ const ReleaseNotesContent = ({ ); }; +const handleVersionChange = (event) => { + if (event.target.value) { + navigate(event.target.value); + } +}; + export default function DocPage({ location, data, pageContext }) { const variables = jsYAML.safeLoad(data.variablesFile.internal.content); @@ -119,19 +125,32 @@ export default function DocPage({ location, data, pageContext }) {
-
-
+ +
+ { + data.contentFile.childMdx + ? + : + }