diff --git a/packages/freesewing.dev/pages/index.js b/packages/freesewing.dev/pages/index.js index 6d372c00a94..3e66a8ae54f 100644 --- a/packages/freesewing.dev/pages/index.js +++ b/packages/freesewing.dev/pages/index.js @@ -15,7 +15,6 @@ export default (props) => { >Toggle

- 
{JSON.stringify(nav, null ,2)}
) } diff --git a/packages/freesewing.shared/components/icon/icons.js b/packages/freesewing.shared/components/icon/icons.js index bc5adf0a174..f197f7d98ce 100644 --- a/packages/freesewing.shared/components/icon/icons.js +++ b/packages/freesewing.shared/components/icon/icons.js @@ -20,7 +20,7 @@ const github = 'M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6 const google = 'M 12.25009,0 C 7.5567085,0 3.5033589,2.69334 1.530043,6.613315 0.71674427,8.240005 0.25,10.06676 0.25,12.00009 c 0,1.93333 0.46674427,3.759905 1.280043,5.386595 C 3.5033589,21.30666 7.5567085,24 12.25009,24 c 3.239959,0 5.959944,-1.066635 7.94668,-2.906575 2.266629,-2.093365 3.573349,-5.173415 3.573349,-8.826735 0,-0.98666 -0.08023,-1.70661 -0.253496,-2.453265 l -11.266533,0 0,4.45322 6.613137,0 c -0.133283,1.106705 -0.853233,2.77333 -2.453266,3.89327 -1.013315,0.706675 -2.373243,1.199975 -4.159871,1.199975 -3.173318,0 -5.8666835,-2.09327 -6.826777,-4.986605 -0.2533286,-0.746655 -0.399991,-1.54657 -0.399991,-2.373195 0,-0.82672 0.1467055,-1.62672 0.386706,-2.373375 C 6.3834495,6.73338 9.076772,4.63993 12.25009,4.63993 c 2.253301,0 3.773228,0.973465 4.639932,1.786855 L 20.27666,3.12004 C 18.196718,1.186705 15.490049,0 12.25009,0 Z' -const guide = 'M21 3L3 10.53v.98l6.84 2.65L12.48 21h.98L21 3z' +const guides = 'M21 3L3 10.53v.98l6.84 2.65L12.48 21h.98L21 3z' const help = 'M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z' @@ -46,7 +46,7 @@ const support = "M11.5 2C6.81 2 3 5.81 3 10.5S6.81 19 11.5 19h.5v3c4.86-2.34 8-7 const tip = 'M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z' -const tutorial = 'M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z' +const tutorials = 'M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z' const twitter = 'M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z' @@ -74,8 +74,9 @@ export default { freesewing, github, google, - guide, + guides, help, + howtos: help, instagram, language, measurement, @@ -83,11 +84,12 @@ export default { middot, note: down, reddit, + reference: docs, search, showcase, support, tip, - tutorial, + tutorials, twitter, unit, warning, diff --git a/packages/freesewing.shared/components/layouts/default.js b/packages/freesewing.shared/components/layouts/default.js index 59527e0f95d..dbf08b54b6b 100644 --- a/packages/freesewing.shared/components/layouts/default.js +++ b/packages/freesewing.shared/components/layouts/default.js @@ -39,8 +39,9 @@ const DefaultLayout = props => { fixed top-0 right-0 ${props.app.primaryMenu ? '' : 'translate-x-[-100%]'} transition-transform sm:relative sm:transform-none - h-screen - w-screen + h-screen w-screen + bg-base-200 + sm:bg-base-100 sm:max-w-[38.2%] sm:flex sm:flex-row-reverse `}> diff --git a/packages/freesewing.shared/components/navigation/primary.js b/packages/freesewing.shared/components/navigation/primary.js index e9463bb34e0..e3af568b6dc 100644 --- a/packages/freesewing.shared/components/navigation/primary.js +++ b/packages/freesewing.shared/components/navigation/primary.js @@ -1,11 +1,19 @@ import Icon from 'shared/components/icon/index.js' import nav from 'site/prebuild/navigation.js' +import Link from 'next/link' -const TopLevel = ({ icon, title }) => ( -
- - {icon} - {title} +const keepClosed = ['blog', 'showcase', ] + +const TopLevel = ({ icon, title, nav, current }) => ( +
+ + {icon} + {title}
    @@ -18,19 +26,35 @@ const TopLevel = ({ icon, title }) => (
) +// TODO: Get rid of this when markdown has been restructured +const remove = ['contributors', 'developers', 'editors', 'translators'] +const Navigation = ({ nav, app }) => { + const output = [] + for (const key of Object.keys(nav[app.language]).sort()) { + if ( + key.slice(0,1) !== '_' && + remove.indexOf(key) === -1 + ) output.push(} + title={key} + key={key} + nav={nav} + current={nav[app.language][key]} + /> + ) + } + + return output +} + const PrimaryMenu = props => { return ( ) } diff --git a/packages/freesewing.shared/package.json b/packages/freesewing.shared/package.json index bb58ee4837f..be91645111c 100644 --- a/packages/freesewing.shared/package.json +++ b/packages/freesewing.shared/package.json @@ -23,6 +23,7 @@ "autoprefixer": "^10.4.0", "lodash.set": "^4.3.2", "postcss": "^8.4.4", - "tailwindcss": "^3.0.1" + "tailwindcss": "^3.0.1", + "tailwindcss-open-variant": "^1.0.0" } } diff --git a/packages/freesewing.shared/themes/bureaucrats.js b/packages/freesewing.shared/themes/bureaucrats.js index c701fce13c8..428623ca0c0 100644 --- a/packages/freesewing.shared/themes/bureaucrats.js +++ b/packages/freesewing.shared/themes/bureaucrats.js @@ -1,5 +1,5 @@ const colors = require('tailwindcss/colors') -const gray = colors.trueGray +const gray = colors.neutral module.exports = { icon: "👨‍💼", @@ -34,9 +34,9 @@ module.exports = { '--rounded-box': '2px', '--rounded-btn': '2px', - '--pattern-fabric': colors.trueGray['700'], + '--pattern-fabric': colors.neutral['700'], '--pattern-lining': colors.emerald['500'], - '--pattern-interfacing': colors.trueGray['400'], + '--pattern-interfacing': colors.neutral['400'], '--pattern-canvas': colors.amber['600'], '--pattern-various': colors.red['500'], '--pattern-mark': colors.blue['500'], diff --git a/packages/freesewing.shared/themes/dark.js b/packages/freesewing.shared/themes/dark.js index ce5b9627e8b..3f9552be07a 100644 --- a/packages/freesewing.shared/themes/dark.js +++ b/packages/freesewing.shared/themes/dark.js @@ -1,5 +1,5 @@ const colors = require('tailwindcss/colors') -const gray = colors.trueGray +const gray = colors.neutral module.exports = { icon: "🌚", @@ -31,9 +31,9 @@ module.exports = { 'warning': colors.amber['500'], 'error': colors.red['400'], - '--pattern-fabric': colors.trueGray['300'], + '--pattern-fabric': colors.neutral['300'], '--pattern-lining': colors.emerald['700'], - '--pattern-interfacing': colors.trueGray['500'], + '--pattern-interfacing': colors.neutral['500'], '--pattern-canvas': colors.amber['700'], '--pattern-various': colors.red['700'], '--pattern-mark': colors.blue['700'], diff --git a/packages/freesewing.shared/themes/hax0r.js b/packages/freesewing.shared/themes/hax0r.js index c5f550680e4..1ff749e8c2d 100644 --- a/packages/freesewing.shared/themes/hax0r.js +++ b/packages/freesewing.shared/themes/hax0r.js @@ -1,5 +1,5 @@ const colors = require('tailwindcss/colors') -const gray = colors.trueGray +const gray = colors.neutral module.exports = { icon: "👩‍💻", @@ -33,9 +33,9 @@ module.exports = { '--rounded-btn': '0', - '--pattern-fabric': colors.trueGray['700'], + '--pattern-fabric': colors.neutral['700'], '--pattern-lining': colors.emerald['500'], - '--pattern-interfacing': colors.trueGray['400'], + '--pattern-interfacing': colors.neutral['400'], '--pattern-canvas': colors.amber['600'], '--pattern-various': colors.red['500'], '--pattern-mark': colors.blue['500'], diff --git a/packages/freesewing.shared/themes/kindergarten.js b/packages/freesewing.shared/themes/kindergarten.js index d0597e053e9..e7bbfcf372a 100644 --- a/packages/freesewing.shared/themes/kindergarten.js +++ b/packages/freesewing.shared/themes/kindergarten.js @@ -1,5 +1,5 @@ const colors = require('tailwindcss/colors') -const gray = colors.trueGray +const gray = colors.neutral module.exports = { icon: "🐕", @@ -33,9 +33,9 @@ module.exports = { '--rounded-btn': '10rem', - '--pattern-fabric': colors.trueGray['700'], + '--pattern-fabric': colors.neutral['700'], '--pattern-lining': colors.emerald['500'], - '--pattern-interfacing': colors.trueGray['400'], + '--pattern-interfacing': colors.neutral['400'], '--pattern-canvas': colors.amber['600'], '--pattern-various': colors.red['500'], '--pattern-mark': colors.blue['500'], diff --git a/packages/freesewing.shared/themes/light.js b/packages/freesewing.shared/themes/light.js index af78530804d..951a9624bd0 100644 --- a/packages/freesewing.shared/themes/light.js +++ b/packages/freesewing.shared/themes/light.js @@ -40,20 +40,20 @@ module.exports = { */ // base-100: The default background color - 'base-100': colors.trueGray['100'], + 'base-100': colors.neutral['100'], // base-200: A slightly different background color, used for hovers and so on - 'base-200': colors.trueGray['200'], + 'base-200': colors.neutral['200'], // base-300: A shade midway between dark and light - 'base-300': colors.trueGray['400'], + 'base-300': colors.neutral['400'], // base-content: The default text color - 'base-content': colors.trueGray['700'], + 'base-content': colors.neutral['700'], // primary: The main brand color and color of the primary button - 'primary': colors.trueGray['900'], + 'primary': colors.neutral['900'], // primary-focus: The :hover color for the primary button 'primary-focus': colors.violet['600'], // primary-content: The text color for the primary button - 'primary-content': colors.trueGray['200'], + 'primary-content': colors.neutral['200'], // secondary: The link color 'secondary': colors.violet['500'], @@ -69,15 +69,15 @@ module.exports = { // accent-focus: The :hover color for the accent button 'accent-focus': colors.emerald['400'], // accent-content: The text color for the accent button - 'accent-content': colors.trueGray['900'], + 'accent-content': colors.neutral['900'], // neutral: Used as the background for the footer and code blocks. // Should always be dark(ish) because of prism syntax highlighting - 'neutral': colors.trueGray['800'], + 'neutral': colors.neutral['800'], // neutral-focus: Typically a shade lighter than neutral - 'neutral-focus': colors.trueGray['700'], + 'neutral-focus': colors.neutral['700'], // neutral-content: The text color on neutral backgrounds - 'neutral-content': colors.trueGray['200'], + 'neutral-content': colors.neutral['200'], // info: Used rarely, can be another color best somewhat neutral looking // and should work with the default text color @@ -127,11 +127,11 @@ module.exports = { */ // Color for the main fabric - '--pattern-fabric': colors.trueGray['700'], + '--pattern-fabric': colors.neutral['700'], // Color for lining fabric '--pattern-lining': colors.emerald['500'], // Color for interfacing - '--pattern-interfacing': colors.trueGray['400'], + '--pattern-interfacing': colors.neutral['400'], // Color for canvas '--pattern-canvas': colors.amber['600'], // Color for various fabric types