chore(fs.dev): Work on navigation menu

packages/freesewing.dev/pages/index.js

@@ -15,7 +15,6 @@ export default (props) => {
         >Toggle</button>
       </p>
       <ThemePicker app={app} />
-      <pre>{JSON.stringify(nav, null ,2)}</pre>
     </Page>
   )
 }

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,

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
+          h-screen w-screen
-          w-screen
+          bg-base-200
+          sm:bg-base-100
           sm:max-w-[38.2%]
           sm:flex sm:flex-row-reverse
         `}>

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 }) => (
+const keepClosed = ['blog', 'showcase', ]
-  <details className='p-3'>
+
-    <summary className='flex flex-row uppercase font-bold text-lg gap-6'>
+const TopLevel = ({ icon, title, nav, current }) => (
-      {icon}
+  <details className='p-2' open={((keepClosed.indexOf(current._slug) === -1) ? 1 : 0)}>
-      {title}
+    <summary className={`
+      flex flex-row uppercase gap-4 font-bold text-lg
+      hover:cursor-row-resize
+      hover:bg-base-200
+      p-2
+    `}>
+      <Link href={`/${current._slug}/`} className='hover:cursor-pointer'>{icon}</Link>
+      <Link href={`/${current._slug}/`} className='hover:cursor-pointer'>{title}</Link>
     </summary>
     <div className='pl-4'>
       <ul>
@@ -18,19 +26,35 @@ const TopLevel = ({ icon, title }) => (
   </details>
 )
 
+// 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(<TopLevel
+        icon={<Icon icon={key}/>}
+        title={key}
+        key={key}
+        nav={nav}
+        current={nav[app.language][key]}
+      />
+    )
+  }
+
+  return output
+}
+
 const PrimaryMenu = props => {
 
   return (
     <nav className={`
       sm:max-w-sm
-      bg-base-200
       grow
     `}>
-      <TopLevel icon={<Icon icon='tutorial' size={28}/>} title='tutorials' />
+      <Navigation nav={nav} app={props.app}/>
-      <TopLevel icon={<Icon icon='guide' size={28}/>} title='guides' />
-      <TopLevel icon={<Icon icon='help' size={28}/>} title='howtos' />
-      <TopLevel icon={<Icon icon='docs' size={28}/>} title='reference' />
-      <pre>{Object.keys(nav[props.app.language])}</pre>
     </nav>
   )
 }

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"
   }
 }

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'],

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'],

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'],

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'],

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