chore: Linter warnings

sites/dev/components/layouts/bare.mjs

@@ -1,4 +1,3 @@
-import { useRouter } from 'next/router'
 import { AsideNavigation } from 'shared/components/navigation/aside.mjs'
 
 export const ns = []

sites/dev/components/layouts/docs.mjs

@@ -1,12 +1,6 @@
-// Hooks
-import { useRouter } from 'next/router'
 // Components
-import Link from 'next/link'
 import { AsideNavigation } from 'shared/components/navigation/aside.mjs'
-import { ThemePicker } from 'shared/components/theme-picker/index.mjs'
 import { Breadcrumbs } from 'shared/components/breadcrumbs.mjs'
-import { HomeIcon } from 'shared/components/icons.mjs'
-import { useState, useEffect } from 'react'
 
 export const ns = []
 

sites/dev/pages/[...mdxslug].mjs

@@ -6,7 +6,7 @@ import { mdxLoader } from 'shared/mdx/loader.mjs'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 // Components
 import Head from 'next/head'
-import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
+import { PageWrapper } from 'shared/components/wrappers/page.mjs'
 import { MdxWrapper } from 'shared/components/wrappers/mdx.mjs'
 import { TocWrapper } from 'shared/components/wrappers/toc.mjs'
 import { HelpUs } from 'site/components/help-us.mjs'

sites/org/components/header/index.mjs

@@ -1,16 +1,8 @@
 import { useState, useEffect } from 'react'
-import { ThemePicker, ns as themeNs } from 'shared/components/theme-picker/index.mjs'
-import { LocalePicker, ns as localeNs } from 'shared/components/locale-picker/index.mjs'
 import {
-  CloseIcon,
   CommunityIcon,
   DesignIcon,
-  DiscordIcon,
   DocsIcon,
-  GithubIcon,
-  HeartIcon,
-  HelpIcon,
-  HomeIcon,
   MenuIcon,
   RssIcon,
   SearchIcon,
@@ -20,14 +12,11 @@ import {
   I18nIcon,
 } from 'shared/components/icons.mjs'
 import { Ribbon } from 'shared/components/ribbon.mjs'
-import { WordMark } from 'shared/components/wordmark.mjs'
 import Link from 'next/link'
 import { useTranslation } from 'next-i18next'
 import { ModalThemePicker } from 'shared/components/modal/theme-picker.mjs'
 import { ModalLocalePicker } from 'shared/components/modal/locale-picker.mjs'
-import { Search, ns as searchNs } from 'site/components/search.mjs'
 import { ModalMenu } from 'site/components/navigation/modal-menu.mjs'
-import { ModalWrapper } from 'shared/components/wrappers/modal.mjs'
 
 export const ns = [...new Set(['header', ...themeNs, ...localeNs])]
 

sites/org/components/layouts/bare.mjs

@@ -1,4 +1,3 @@
-import { useRouter } from 'next/router'
 import { AsideNavigation } from 'shared/components/navigation/aside.mjs'
 
 export const ns = []

sites/org/components/layouts/docs.mjs

@@ -1,12 +1,6 @@
-// Hooks
-import { useRouter } from 'next/router'
 // Components
-import Link from 'next/link'
 import { AsideNavigation, ns as navNs } from 'shared/components/navigation/aside.mjs'
-import { ThemePicker } from 'shared/components/theme-picker/index.mjs'
 import { Breadcrumbs } from 'shared/components/breadcrumbs.mjs'
-import { HomeIcon } from 'shared/components/icons.mjs'
-import { useState, useEffect } from 'react'
 
 export const ns = navNs
 

sites/org/components/navigation/sections-menu.mjs

@@ -1,5 +1,5 @@
 import Link from 'next/link'
-import { icons, isActive, ns as sectionsNs } from 'shared/components/navigation/primary.mjs'
+import { icons, ns as sectionsNs } from 'shared/components/navigation/primary.mjs'
 import { useTranslation } from 'next-i18next'
 import orderBy from 'lodash.orderby'
 import { colors } from 'site/components/header/index.mjs'
@@ -14,8 +14,6 @@ export const SectionsMenu = ({ app }) => {
   const sortableSections = app.state.sections.map((s) => ({ ...s, o: s.o ? s.o : s.t }))
   const output = []
   for (const page of orderBy(sortableSections, ['o', 't'])) {
-    const act = isActive(page.s, app.state.slug)
-
     const item = (
       <Link
         key={page.s}

sites/org/hooks/use-navigation.mjs

@@ -17,7 +17,7 @@ import { freeSewingConfig as conf } from 'site/freesewing.config.mjs'
 
 const ns = ['account', 'sections']
 
-const sitePages = (locale, t = false) => {
+const sitePages = (t = false) => {
   // Handle t not being present
   if (!t) t = (string) => string
   const pages = {
@@ -96,12 +96,11 @@ const createSections = (nav) => {
 export const useNavigation = (path = [], locale = 'en') => {
   const { t } = useTranslation(ns)
 
-  const nav = { ...pbn[locale], ...sitePages(locale, t) }
+  const nav = { ...pbn[locale], ...sitePages(t) }
 
   // Creat crumbs array
   const crumbs = createCrumbs(path, nav)
   const sections = createSections(nav)
-  const pages = sitePages(locale)
 
   return {
     path,

sites/org/pages/account/index.mjs

@@ -8,7 +8,7 @@ import { PageWrapper } from 'shared/components/wrappers/page.mjs'
 import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
 
 // Translation namespaces used on this page
-const namespaces = ['account', ...authNs]
+const ns = ['account', ...authNs]
 
 /*
  * Some things should never generated as SSR
@@ -41,7 +41,7 @@ export default AccountPage
 export async function getStaticProps({ locale }) {
   return {
     props: {
-      ...(await serverSideTranslations(locale)),
+      ...(await serverSideTranslations(locale, ns)),
       page: {
         path: ['account'],
       },

sites/org/pages/confirm/emailchange/[...confirmation].mjs

@@ -36,12 +36,12 @@ const ConfirmSignUpPage = (props) => {
     // Async inside useEffect requires this approach
     const confirmEmail = async () => {
       app.startLoading()
-      const result = await backend.loadConfirmation({ id, check })
+      const confirmation = await backend.loadConfirmation({ id, check })
-      if (result?.result === 'success' && result.confirmation) {
+      if (confirmation?.result === 'success' && confirmation.confirmation) {
-        const result = await backend.updateAccount({
+        const result2 = await backend.updateAccount({
           confirm: 'emailchange',
-          confirmation: result.confirmation.id,
+          confirmation: confirmation.confirmation.id,
-          check: result.confirmation.check,
+          check: confirmation.confirmation.check,
         })
         if (result.success) {
           setAccount(result.data.account)

sites/org/pages/confirm/signin/[...confirmation].mjs

@@ -10,7 +10,6 @@ import Link from 'next/link'
 // Components
 import { PageWrapper } from 'shared/components/wrappers/page.mjs'
 import { BareLayout } from 'site/components/layouts/bare.mjs'
-import { WelcomeWrapper } from 'site/components/wrappers/welcome.mjs'
 import { Spinner } from 'shared/components/spinner.mjs'
 import { Robot } from 'shared/components/robot/index.mjs'
 import { FlexButtonText } from 'site/components/buttons/flex-button-text.mjs'
@@ -46,7 +45,7 @@ const Wrapper = ({ app, t, children }) => (
 )
 
 const ConfirmSignInPage = (props) => {
-  const account = ({ setAccount, setToken } = useAccount())
+  const { setAccount, setToken } = useAccount()
   const app = useApp(props)
   const backend = useBackend()
   const { t } = useTranslation(ns)

sites/org/pages/docs/[...mdxslug].mjs

@@ -78,7 +78,7 @@ export default MdxPage
  */
 export async function getStaticProps({ params, locale }) {
   const path = ['docs', ...params.mdxslug]
-  const { mdx, intro, toc, frontmatter } = await mdxLoader(
+  const { mdx, intro, toc } = await mdxLoader(
     locale,
     'org',
     ['docs', ...params.mdxslug].join('/'),

sites/org/pages/docs/index.mjs

@@ -5,7 +5,6 @@ import Head from 'next/head'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import { mdxLoader } from 'shared/mdx/loader.mjs'
 import { jargon } from 'site/jargon.mjs'
-import { mdxPaths } from 'site/prebuild/mdx.paths.mjs'
 import mdxMeta from 'site/prebuild/mdx.js'
 // Components
 import { MdxWrapper } from 'shared/components/wrappers/mdx.mjs'
@@ -77,7 +76,7 @@ export default MdxPage
  * To learn more, see: https://nextjs.org/docs/basic-features/data-fetching
  */
 export async function getStaticProps({ locale }) {
-  const { mdx, intro, toc, frontmatter } = await mdxLoader(locale, 'org', 'docs', jargon[locale])
+  const { mdx, intro, toc } = await mdxLoader(locale, 'org', 'docs', jargon[locale])
 
   return {
     props: {

sites/org/pages/profile.mjs

@@ -31,9 +31,8 @@ const DynamicAccountProfile = dynamic(
 
 const AccountPage = (props) => {
   const app = useApp(props)
-  const { account, token } = useAccount()
+  const { account } = useAccount()
   const { t } = useTranslation(namespaces)
-  const crumbs = [[t('profile'), 'profile']]
 
   return (
     <PageWrapper app={app}>

sites/org/pages/signin/index.mjs

@@ -8,7 +8,6 @@ import { useToast } from 'shared/hooks/use-toast.mjs'
 import { useRouter } from 'next/router'
 // Dependencies
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
-import { validateEmail, validateTld } from 'shared/utils.mjs'
 // Components
 import Link from 'next/link'
 import { PageWrapper } from 'shared/components/wrappers/page.mjs'
@@ -71,7 +70,6 @@ const SignInPage = (props) => {
   const [signInFailed, setSignInFailed] = useState(false)
   const [magicLinkSent, setMagicLinkSent] = useState(false)
 
-  const updatePassword = (evt) => setPassword(evt.target.value)
   const clearUsername = () => app.setUsername(false)
 
   useEffect(() => {

sites/org/pages/signup/index.mjs

@@ -13,8 +13,7 @@ import { BareLayout } from 'site/components/layouts/bare.mjs'
 import { SusiWrapper } from 'site/components/wrappers/susi.mjs'
 import { Robot } from 'shared/components/robot/index.mjs'
 import { EmailValidButton } from 'site/components/buttons/email-valid-button.mjs'
-import { ButtonText } from '../signin/index.mjs'
+import { LeftIcon, HelpIcon } from 'shared/components/icons.mjs'
-import { EmailIcon, LeftIcon, RightIcon, WarningIcon, HelpIcon } from 'shared/components/icons.mjs'
 import { ModalWrapper } from 'shared/components/wrappers/modal.mjs'
 
 // Translation namespaces used on this page

sites/shared/components/account/apikeys.mjs

@@ -266,7 +266,7 @@ const Apikey = ({ apikey, t, account, backend, keyAdded, app }) => {
 }
 
 export const Apikeys = ({ app }) => {
-  const { account, setAccount, token } = useAccount()
+  const { account, token } = useAccount()
   const backend = useBackend(token)
   const { t } = useTranslation(ns)
   const toast = useToast()

sites/shared/components/account/consent.mjs

@@ -39,7 +39,7 @@ const Checkbox = ({ value, setter, label, children = null }) => (
 )
 
 export const ConsentSettings = ({ app, title = false }) => {
-  const { account, setAccount, token } = useAccount()
+  const { account, token } = useAccount()
   const backend = useBackend(token)
   const toast = useToast()
   const { t } = useTranslation(ns)

sites/shared/components/account/control.mjs

@@ -12,7 +12,7 @@ import { ContinueButton } from 'site/components/buttons/continue-button.mjs'
 export const ns = ['account', 'toast']
 
 export const ControlSettings = ({ app, title = false, welcome = false }) => {
-  const { account, setAccount, token } = useAccount()
+  const { account, token } = useAccount()
   const backend = useBackend(token)
   const toast = useToast()
   const { t } = useTranslation(ns)

sites/shared/components/account/profile.mjs

@@ -2,7 +2,6 @@
 import { useTranslation } from 'next-i18next'
 // Hooks
 import { useAccount } from 'shared/hooks/use-account.mjs'
-import { useBackend } from 'shared/hooks/use-backend.mjs'
 // Components
 import Link from 'next/link'
 import Markdown from 'react-markdown'
@@ -31,13 +30,7 @@ const Avatar = ({ img, app = false }) => (
 )
 
 export const AccountProfile = ({ app }) => {
-  const { account, setAccount, token } = useAccount()
+  const { account } = useAccount()
-  const { t } = useTranslation(ns)
-
-  const toggleModal = () => {
-    if (modal) setModal(false)
-    else setModal(<img src={account.img} />)
-  }
 
   if (!account) return null
 

sites/shared/components/account/reload.mjs

@@ -1,5 +1,4 @@
 // Dependencies
-import { useState } from 'react'
 import { useTranslation } from 'next-i18next'
 // Hooks
 import { useAccount } from 'shared/hooks/use-account.mjs'
@@ -11,7 +10,7 @@ import { BackToAccountButton } from './shared.mjs'
 export const ns = ['account', 'toast']
 
 export const ReloadAccount = ({ app, title = false }) => {
-  const { account, setAccount, token } = useAccount()
+  const { setAccount, token } = useAccount()
   const backend = useBackend(token)
   const { t } = useTranslation(ns)
   const toast = useToast()

sites/shared/components/breadcrumbs.mjs

@@ -11,17 +11,15 @@ export const Breadcrumbs = ({ crumbs, title }) =>
         </Link>
       </li>
       {crumbs.map((crumb) => (
-        <>
+        <li key={crumb.s} className="flex flex-row flex-wrap items-center">
-          <li key={crumb.s} className="flex flex-row flex-wrap items-center">
+          <RightIcon className="w-4 h-4 opacity-50" stroke={3} />
-            <RightIcon className="w-4 h-4 opacity-50" stroke={3} />
+          <PageLink
-            <PageLink
+            href={`/${crumb.s}`}
-              href={`/${crumb.s}`}
+            title={crumb.t}
-              title={crumb.t}
+            className="text-secondary-focus font-bold px-1"
-              className="text-secondary-focus font-bold px-1"
+            txt={crumb.t}
-              txt={crumb.t}
+          />
-            />
+        </li>
-          </li>
-        </>
       ))}
     </ul>
   ) : null

sites/shared/components/footer/index.mjs

@@ -1,37 +1,32 @@
-import { useTranslation } from 'next-i18next'
 import { Ribbon } from 'shared/components/ribbon.mjs'
-import { WordMark, colors } from 'shared/components/wordmark.mjs'
+import { WordMark } from 'shared/components/wordmark.mjs'
 import { SocialIcons } from 'shared/components/social/icons.mjs'
 import { Sponsors, ns as sponsorsNs } from 'shared/components/sponsors/index.mjs'
 import { FreeSewingIcon } from 'shared/components/icons.mjs'
 export const ns = ['footer', ...sponsorsNs]
 
-export const Footer = ({ app }) => {
+export const Footer = ({ app }) => (
-  const { t } = useTranslation(ns)
+  <footer className="bg-neutral">
+    <Ribbon loading={app.loading} theme={app.theme} />
 
-  return (
+    <div className="w-full sm:w-auto flex flex-col gap-2 items-center justify-center pt-12">
-    <footer className="bg-neutral">
+      <FreeSewingIcon className="w-24 lg:w-40 m-auto m-auto text-neutral-content" />
-      <Ribbon loading={app.loading} theme={app.theme} />
+      <div className="mt-4">
-
+        <WordMark />
-      <div className="w-full sm:w-auto flex flex-col gap-2 items-center justify-center pt-12">
-        <FreeSewingIcon className="w-24 lg:w-40 m-auto m-auto text-neutral-content" />
-        <div className="mt-4">
-          <WordMark />
-        </div>
-        <p className="text-neutral-content text-normal leading-5 text-center -mt-2 opacity-70">
-          Come for the sewing patterns
-          <br />
-          Stay for the community
-        </p>
       </div>
+      <p className="text-neutral-content text-normal leading-5 text-center -mt-2 opacity-70">
+        Come for the sewing patterns
+        <br />
+        Stay for the community
+      </p>
+    </div>
 
-      <div className="w-full sm:w-auto flex flex-row flex-wrap gap-6 lg:gap-8 items-center justify-center px-8 py-14">
+    <div className="w-full sm:w-auto flex flex-row flex-wrap gap-6 lg:gap-8 items-center justify-center px-8 py-14">
-        <SocialIcons />
+      <SocialIcons />
-      </div>
+    </div>
 
-      <div className="mt-8 py-8 px-8 flex flex-row gap-8 flex-wrap 2xl:flex-nowrap justify-around text-neutral-content py-10 border border-solid border-l-0 border-r-0 border-b-0 border-base-300">
+    <div className="mt-8 py-8 px-8 flex flex-row gap-8 flex-wrap 2xl:flex-nowrap justify-around text-neutral-content py-10 border border-solid border-l-0 border-r-0 border-b-0 border-base-300">
-        <Sponsors />
+      <Sponsors />
-      </div>
+    </div>
-    </footer>
+  </footer>
-  )
+)
-}

sites/shared/components/mdx/prev-next.mjs

@@ -2,6 +2,7 @@ import get from 'lodash.get'
 import orderBy from 'lodash.orderby'
 import Link from 'next/link'
 import { LeftIcon, RightIcon } from 'shared/components/icons.mjs'
+import { Popout } from 'shared/components/popout.mjs'
 
 // helper method to order nav entries
 const order = (obj) => orderBy(obj, ['__order', '__title'], ['asc', 'asc'])
@@ -96,10 +97,15 @@ const renderNext = (node) =>
   )
 
 export const PrevNext = ({ app }) => {
-  return <p>fixme: prevnext</p>
   return (
     <div className="grid grid-cols-2 gap-4 border-t mt-12 py-2">
       {renderPrevious(previous(app))}
+      <Popout fixme>
+        <h5>Not yet implemented</h5>
+        <p>
+          Fix it in <code>site/shared/components/mdx/prev-next.mjs</code>
+        </p>
+      </Popout>
       {renderNext(next(app))}
     </div>
   )

sites/shared/components/modal/locale-picker.mjs

@@ -1,11 +1,8 @@
 // Dependencies
-import { Fragment } from 'react'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
-import { Popover, Transition } from '@headlessui/react'
 import Link from 'next/link'
 // Components
-import { I18nIcon, DownIcon } from 'shared/components/icons.mjs'
 import { ModalWrapper } from 'shared/components/wrappers/modal.mjs'
 // Languages
 import en from 'site/public/locales/en/locales.json'

sites/shared/components/modal/theme-picker.mjs

@@ -1,5 +1,4 @@
 import themes from 'shared/themes/index.js'
-import { ThemeIcon, DownIcon } from 'shared/components/icons.mjs'
 import { useTranslation } from 'next-i18next'
 import { useTheme } from 'shared/hooks/use-theme.mjs'
 import { ModalWrapper } from 'shared/components/wrappers/modal.mjs'
@@ -15,7 +14,7 @@ export const ModalThemePicker = ({ app, iconOnly = false, bottom = false }) => {
       <div className="grid gap-2 p-4 grid-cols-1 max-w-lg w-full">
         <h2>{t('themes:chooseYourTheme')}</h2>
         {Object.keys(themes).map((theme) => (
-          <div className="flex flex-row gap-2">
+          <div className="flex flex-row gap-2" key={theme}>
             <button
               data-theme={theme}
               key={theme}
@@ -26,7 +25,11 @@ export const ModalThemePicker = ({ app, iconOnly = false, bottom = false }) => {
               <span className="grow"></span>
               <div className="flex flex-shrink-0 flex-wrap gap-1 items-center">
                 {['primary', 'secondary', 'accent', 'neutral'].map((color) => (
-                  <div key={color} className={`bg-${color} w-8 h-8 rounded-full border-2 `}></div>
+                  <div
+                    key={color}
+                    className={`bg-${color} w-8 h-8 rounded-full border-2 `}
+                    key={theme}
+                  ></div>
                 ))}
               </div>
             </button>

sites/shared/components/navigation/aside.mjs

@@ -1,5 +1,4 @@
 import { MainSections, ActiveSection, ns as navNs } from './primary.mjs'
-import Link from 'next/link'
 
 export const ns = navNs
 

sites/shared/components/navigation/primary.mjs

@@ -1,6 +1,5 @@
 import Link from 'next/link'
 import orderBy from 'lodash.orderby'
-import get from 'lodash.get'
 import {
   CommunityIcon,
   DesignIcon,

sites/shared/components/wrappers/auth/index.mjs

@@ -1,6 +1,5 @@
 import Link from 'next/link'
 import { useTranslation } from 'next-i18next'
-import { Loader } from 'shared/components/loader.mjs'
 import { useAccount } from 'shared/hooks/use-account.mjs'
 
 export const ns = ['auth']

sites/shared/hooks/use-app.mjs

@@ -24,7 +24,7 @@ export function useApp(props = {}) {
 
   if (!path) throw 'You MUST pass a page.path prop to the useApp hook'
 
-  const reportError = useBugsnag(props?.bugsnag)
+  const reportError = useBugsnag(bugsnag)
   const navState = useNavigation(path)
 
   // React state

sites/shared/hooks/use-theme.mjs

@@ -1,4 +1,3 @@
-import { useEffect } from 'react'
 import createPersistedState from 'use-persisted-state'
 
 const usePersistedTheme = createPersistedState('fs-theme')
@@ -12,21 +11,4 @@ const preferredTheme = () => {
   return prefersDarkMode ? 'dark' : 'light'
 }
 
-export const useTheme = () => {
+export const useTheme = () => usePersistedTheme(preferredTheme)
-  // (persisted) State (saved to local storage)
-  const [theme, setTheme] = usePersistedTheme(preferredTheme)
-
-  //useEffect(() => {
-  //  // set the default theme based on user prefence
-  //  if (theme === undefined) {
-  //    const prefersDarkMode =
-  //      typeof window !== 'undefined' && typeof window.matchMedia === 'function'
-  //        ? window.matchMedia(`(prefers-color-scheme: dark`).matches
-  //        : undefined
-
-  //    setTheme(prefersDarkMode ? 'dark' : 'light')
-  //  }
-  //}, [theme, setTheme])
-
-  return [theme, setTheme]
-}

sites/shared/prebuild/navigation.mjs

@@ -8,7 +8,6 @@ const future = new Date('10-12-2026').getTime()
 
 // We need to load the translation for blog + showcase
 const loadTranslation = (locale) => {
-  const file = `${folders.shared}/navigation/sections.${locale}.yaml`
   let data
   try {
     data = loadYaml(`${folders.shared}/navigation/sections.${locale}.yaml`, false)