diff --git a/packages/freesewing.dev/components/header.js b/packages/freesewing.dev/components/header.js index ddabd24548f..aebcf39f258 100644 --- a/packages/freesewing.dev/components/header.js +++ b/packages/freesewing.dev/components/header.js @@ -55,7 +55,7 @@ const Header = ({ app, setSearch }) => { text-neutral-content bg-transparent border border-transparent hover:bg-transparent hover:border-base-100 - sm:hidden + md:hidden h-12 `} onClick={app.togglePrimaryMenu}> @@ -79,14 +79,14 @@ const Header = ({ app, setSearch }) => { ) } -
+
-
+
diff --git a/packages/freesewing.dev/components/layouts/docs.js b/packages/freesewing.dev/components/layouts/docs.js new file mode 100644 index 00000000000..366176ee904 --- /dev/null +++ b/packages/freesewing.dev/components/layouts/docs.js @@ -0,0 +1,150 @@ +import React from 'react' +import { useState } from 'react' +import { useRouter } from 'next/router' +import Link from 'next/link' +// Shared components +import Logo from 'shared/components/logos/freesewing.js' +import PrimaryNavigation from 'shared/components/navigation/primary' +import get from 'lodash.get' +import Right from 'shared/components/icons/right.js' +import Left from 'shared/components/icons/left.js' +// Site components +import Header from 'site/components/header' +import Footer from 'site/components/footer' +import Search from 'site/components/search' + +const PageTitle = ({ app, slug, title }) => { + if (title) return

{title}

+ if (slug) return

{get(app.navigation, slug.split('/')).__title}

+ + return

FIXME: This page has no title

+} + +const Breadcrumbs = ({ app, slug=false, title }) => { + if (!slug) return null + const crumbs = [] + const chunks = slug.split('/') + for (const i in chunks) { + const j = parseInt(i)+parseInt(1) + const page = get(app.navigation, chunks.slice(0,j)) + if (page) crumbs.push([page.__linktitle, '/'+chunks.slice(0,j).join('/'), (j < chunks.length)]) + } + + return ( + + ) +} + +const DefaultLayout = ({ + app, + title=false, + children=[], + search, + setSearch, + noSearch=false, + workbench=false, + AltMenu=null, +}) => { + const startNavigation = () => { + app.startLoading() + // Force close of menu on mobile if it is open + if (app.primaryNavigation) app.setPrimaryNavigation(false) + // Force close of search modal if it is open + if (search) setSearch(false) + } + + const router = useRouter() + router.events?.on('routeChangeStart', startNavigation) + router.events?.on('routeChangeComplete', () => app.stopLoading()) + const slug = router.asPath.slice(1) + const [collapsePrimaryNav, setCollapsePrimaryNav] = useState(workbench || false) + const [collapseAltMenu, setCollapseAltMenu] = useState(false) + + return ( +
+
+
+
+ + + +
+
+ {title && ( +
+ + +
+ )} + {children} +
+
+ +
+ +
+ {!noSearch && search && ( + <> +
+ +
+
+ + )} +
+ ) +} + +export default DefaultLayout diff --git a/packages/freesewing.dev/components/wrappers/page.js b/packages/freesewing.dev/components/wrappers/page.js new file mode 100644 index 00000000000..478875b4d39 --- /dev/null +++ b/packages/freesewing.dev/components/wrappers/page.js @@ -0,0 +1,65 @@ +import React, { useState, useEffect } from 'react' +import { useSwipeable } from 'react-swipeable' +import { useRouter } from 'next/router' +import { useHotkeys } from 'react-hotkeys-hook' +// Layouts components +import Docs from 'site/components/layouts/docs' + +const layouts = { + docs: Docs, +} + +/* This component should wrap all page content */ +const PageWrapper= ({ + title="FIXME: No title set", + noSearch=false, + app=false, + layout=false, + children=[] +}) => { + + const swipeHandlers = useSwipeable({ + onSwipedLeft: evt => (app.primaryMenu) ? app.setPrimaryMenu(false) : null, + onSwipedRight: evt => (app.primaryMenu) ? null : app.setPrimaryMenu(true), + trackMouse: true + }) + + const router = useRouter() + const slug = router.asPath.slice(1) + + useEffect(() => app.setSlug(slug), [slug]) + + // Trigger search with Ctrl+k + useHotkeys('ctrl+k', (evt) => { + evt.preventDefault() + setSearch(true) + }) + + const [search, setSearch] = useState(false) + + const childProps = { + app: app, + title: title, + search, setSearch, toggleSearch: () => setSearch(!search), + noSearch: noSearch, + } + + const Layout = layouts[layout] + + return ( +
+ {layout + ? {children} + : children + } +
+ ) +} + +export default PageWrapper + diff --git a/packages/freesewing.dev/pages/[...mdxslug].js b/packages/freesewing.dev/pages/[...mdxslug].js index 9a898f1bd98..64138aec636 100644 --- a/packages/freesewing.dev/pages/[...mdxslug].js +++ b/packages/freesewing.dev/pages/[...mdxslug].js @@ -1,8 +1,9 @@ -import Page from 'shared/components/wrappers/page.js' +import Page from 'site/components/wrappers/page.js' import useApp from 'site/hooks/useApp.js' import mdxMeta from 'site/prebuild/mdx.en.js' import mdxLoader from 'shared/mdx/loader' import MdxWrapper from 'shared/components/wrappers/mdx' +import TocWrapper from 'shared/components/wrappers/toc' import Head from 'next/head' import HelpUs from 'site/components/help-us.js' import { serverSideTranslations } from 'next-i18next/serverSideTranslations' @@ -22,7 +23,7 @@ const MdxPage = props => { * active state */ return ( - + @@ -36,8 +37,17 @@ const MdxPage = props => { - - +
+ {props.toc && ( +
+ +
+ )} +
+ + +
+
) } @@ -61,11 +71,12 @@ export default MdxPage */ export async function getStaticProps({ params, locale }) { - const { mdx, intro } = await mdxLoader('en', 'dev', params.mdxslug.join('/')) + const { mdx, intro, toc } = await mdxLoader('en', 'dev', params.mdxslug.join('/')) return { props: { mdx, + toc, intro: intro.join(' '), page: { slug: params.mdxslug.join('/'), diff --git a/packages/freesewing.shared/components/icons/docs.js b/packages/freesewing.shared/components/icons/docs.js index 65053ce741b..89e7f8bfba1 100644 --- a/packages/freesewing.shared/components/icons/docs.js +++ b/packages/freesewing.shared/components/icons/docs.js @@ -1,6 +1,6 @@ /* Sourced from heroicons.com - Thanks guys! */ -const Docs = () => ( - +const Docs = ({ className="h-6 w-6" }) => ( + ) diff --git a/packages/freesewing.shared/components/icons/guide.js b/packages/freesewing.shared/components/icons/guide.js index 910bacf2127..0456eaa3768 100644 --- a/packages/freesewing.shared/components/icons/guide.js +++ b/packages/freesewing.shared/components/icons/guide.js @@ -1,5 +1,5 @@ -const Guides = () => ( - +const Guides = ({ className="h-6 w-6" }) => ( + ) diff --git a/packages/freesewing.shared/components/icons/help.js b/packages/freesewing.shared/components/icons/help.js index 92d7723d790..edf0c6e6bd3 100644 --- a/packages/freesewing.shared/components/icons/help.js +++ b/packages/freesewing.shared/components/icons/help.js @@ -1,6 +1,6 @@ /* Sourced from heroicons.com - Thanks guys! */ -const Help = () => ( - +const Help = ({ className="w-6 h-6" }) => ( + ) diff --git a/packages/freesewing.shared/components/icons/rss.js b/packages/freesewing.shared/components/icons/rss.js index 0b5b77e7532..cf3c03fca90 100644 --- a/packages/freesewing.shared/components/icons/rss.js +++ b/packages/freesewing.shared/components/icons/rss.js @@ -1,6 +1,6 @@ /* Sourced from heroicons.com - Thanks guys! */ -const Rss = () => ( - +const Rss = ({ className='h-6 w-6' }) => ( + ) diff --git a/packages/freesewing.shared/components/icons/tutorial.js b/packages/freesewing.shared/components/icons/tutorial.js index ea49dcfa350..3f642bc80dc 100644 --- a/packages/freesewing.shared/components/icons/tutorial.js +++ b/packages/freesewing.shared/components/icons/tutorial.js @@ -1,5 +1,5 @@ -const Tutorial = () => ( - +const Tutorial = ({ className="w-6 h-6" }) => ( + diff --git a/packages/freesewing.shared/components/layouts/default.js b/packages/freesewing.shared/components/layouts/default.js index 18c33ab486e..7c946d1e4ab 100644 --- a/packages/freesewing.shared/components/layouts/default.js +++ b/packages/freesewing.shared/components/layouts/default.js @@ -74,8 +74,9 @@ const asideClasses = ` overflow-y-scroll z-20 bg-base-100 text-base-content - sm:bg-neutral sm:bg-opacity-95 sm:text-neutral-content - transition-all ` + transition-all + xl:w-1/4 +` const DefaultLayout = ({ @@ -110,53 +111,58 @@ const DefaultLayout = ({ bg-base-100 `}>
-
-
- -
- )} - - -
-
- {title && ( - <> - - - +
+
+ + + +
+
+
+ {title && ( + <> + + + + )} + {children} +
+
-
+ + + {workbench && AltMenu && (