diff --git a/packages/freesewing.lab/components/header.js b/packages/freesewing.lab/components/header.js index 38a364c4aa4..05192791ae9 100644 --- a/packages/freesewing.lab/components/header.js +++ b/packages/freesewing.lab/components/header.js @@ -4,6 +4,7 @@ import Link from 'next/link' import ThemePicker from 'shared/components/theme-picker.js' import LocalePicker from 'shared/components/locale-picker.js' import PatternPicker from 'site/components/pattern-picker.js' +import VersionPicker from 'site/components/version-picker.js' import CloseIcon from 'shared/components/icons/close.js' import MenuIcon from 'shared/components/icons/menu.js' @@ -67,6 +68,7 @@ const Header = ({ app }) => {
+
diff --git a/packages/freesewing.lab/components/pattern-picker.js b/packages/freesewing.lab/components/pattern-picker.js index b006d577f5f..7de30101ecc 100644 --- a/packages/freesewing.lab/components/pattern-picker.js +++ b/packages/freesewing.lab/components/pattern-picker.js @@ -2,9 +2,12 @@ import React from 'react' import DesignIcon from 'shared/components/icons/design.js' import Link from 'next/link' import { useTranslation } from 'next-i18next' +import useVersion from 'site/hooks/useVersion.js' +import { formatVersionUri } from './version-picker.js' const PatternPicker = ({ app }) => { const { t } = useTranslation(['common']) + const version = useVersion() return (
@@ -27,7 +30,7 @@ const PatternPicker = ({ app }) => { {app.patterns[section].map(pattern => (
  • - + + +
  • + ))} + +
    + ) +} + +export default PatternPicker diff --git a/packages/freesewing.lab/hooks/useApp.js b/packages/freesewing.lab/hooks/useApp.js index 5e5e219cd6b..1b93a207705 100644 --- a/packages/freesewing.lab/hooks/useApp.js +++ b/packages/freesewing.lab/hooks/useApp.js @@ -6,9 +6,10 @@ import patterns from 'site/patterns.json' // Locale and translation import { useTranslation } from 'next-i18next' import { capitalize } from 'shared/utils' +import useVersion from 'site/hooks/useVersion.js' // Initial navigation -const initialNavigation = (t) => { +const initialNavigation = (t, version) => { const base = { accessories: { __title: t('accessoryPatterns'), @@ -41,7 +42,7 @@ const initialNavigation = (t) => { __title: capitalize(design), __order: design, __linktitle: capitalize(design), - __slug: `${type}/${design}` + __slug: `v/${version}/${design}` } } } @@ -51,6 +52,9 @@ const initialNavigation = (t) => { function useApp(full = true) { + // Version + const version = useVersion() + // Locale (aka language) const { t } = useTranslation(['app']) @@ -65,7 +69,7 @@ function useApp(full = true) { // React State const [primaryMenu, setPrimaryMenu] = useState(false) - const [navigation, setNavigation] = useState(initialNavigation(t)) + const [navigation, setNavigation] = useState(initialNavigation(t, version)) const [slug, setSlug] = useState('/') const [pattern, setPattern] = useState(false) const [loading, setLoading] = useState(false) diff --git a/packages/freesewing.lab/hooks/useVersion.js b/packages/freesewing.lab/hooks/useVersion.js new file mode 100644 index 00000000000..5f8b8069c38 --- /dev/null +++ b/packages/freesewing.lab/hooks/useVersion.js @@ -0,0 +1,16 @@ +import { useRouter } from 'next/router' + +export const defaultVersion = 'next' + +const useVersion = () => { + const { pathname } = useRouter() + const chunks = pathname.split('/') + const version = (chunks[1] === 'v') + ? chunks[2] + : defaultVersion + + return version +} + +export default useVersion + diff --git a/packages/freesewing.lab/next.config.mjs b/packages/freesewing.lab/next.config.mjs index d2036a9883d..bf491431424 100644 --- a/packages/freesewing.lab/next.config.mjs +++ b/packages/freesewing.lab/next.config.mjs @@ -26,7 +26,7 @@ const config = { // Aliases config.resolve.alias.shared = path.resolve('../freesewing.shared/') config.resolve.alias.site = path.resolve(`.`) - //config.resolve.alias.markdown = path.resolve(`../../markdown/${site}/`) + config.resolve.alias.lib = path.resolve(`./lib`) config.resolve.alias.pkgs = path.resolve(`../`) // This forces webpack to load the code from source, rather than compiled bundle for (const pkg of pkgs) { diff --git a/packages/freesewing.lab/package.json b/packages/freesewing.lab/package.json index 4fd63ff1c6f..b1a6b766d16 100644 --- a/packages/freesewing.lab/package.json +++ b/packages/freesewing.lab/package.json @@ -54,5 +54,6 @@ }, "engines": { "node": ">=14.18.1" - } + }, + "browserslist": [ "last 2 versions" ] } diff --git a/packages/freesewing.lab/page-templates/pattern-list.js b/packages/freesewing.lab/page-templates/pattern-list.js index f20e129123f..8dd3c65feff 100644 --- a/packages/freesewing.lab/page-templates/pattern-list.js +++ b/packages/freesewing.lab/page-templates/pattern-list.js @@ -4,22 +4,23 @@ import Head from 'next/head' import Link from 'next/link' import About from 'site/components/about.js' import { useTranslation } from 'next-i18next' +import { defaultVersion, formatVersionTitle, formatVersionUri } from 'site/components/version-picker.js' -const links = (section, list) => list.map(design => ( +const links = (section, list, version) => list.map(design => (
  • - + {design}
  • )) -const PatternListPageTemplate = ({ sections=false }) => { +const PatternListPageTemplate = ({ sections=false, version=false }) => { const app = useApp() const { t } = useTranslation(['app']) if (sections === false) sections = Object.keys(app.patterns) return ( - + @@ -39,7 +40,7 @@ const PatternListPageTemplate = ({ sections=false }) => {

    {t(app.navigation[section].__title)}

      - {links(section, app.patterns[section])} + {links(section, app.patterns[section], version)}
    ) diff --git a/packages/freesewing.lab/pages/utilities/index.js b/packages/freesewing.lab/pages/utilities/index.js deleted file mode 100644 index 1730faf1952..00000000000 --- a/packages/freesewing.lab/pages/utilities/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import Template from 'site/page-templates/pattern-list.js' - -const Page = props =>