everything passes lint

designs/examples/src/index.mjs

@@ -3,9 +3,6 @@ import { pluginBundle } from '@freesewing/plugin-bundle'
 import { gorePlugin } from '@freesewing/plugin-gore'
 import { data } from '../data.mjs'
 
-// Snippet API
-import { snippet, snippet_attr, snippet_clone } from './snippet.mjs'
-
 // Stacks
 import {
   stacks_top,

designs/ursula/src/elastic.mjs

@@ -1,19 +1,6 @@
 import { gusset } from './gusset.mjs'
 
-function ursulaElastic({
+function ursulaElastic({ options, Point, points, Path, paths, store, utils, units, sa, part }) {
-  options,
-  Point,
-  points,
-  Path,
-  paths,
-  store,
-  utils,
-  units,
-  sa,
-  paperless,
-  macro,
-  part,
-}) {
   // Stretch utility method
   store.set('elasticScale', utils.stretchToScale(options.elasticStretch))
 
@@ -35,10 +22,10 @@ function ursulaElastic({
 
   // Draw a box around the text, so the part shows up correctly.
   paths.box = new Path()
-    .move(new Point(-10,-10))
+    .move(new Point(-10, -10))
-    .line(new Point(-10,15))
+    .line(new Point(-10, 15))
-    .line(new Point(200,15))
+    .line(new Point(200, 15))
-    .line(new Point(200,-10))
+    .line(new Point(200, -10))
     .close()
     .setClass('hidden')
 

packages/rehype-highlight-lines/src/index.mjs

@@ -21,7 +21,7 @@ export default (userOptions = {}) => {
     ...userOptions,
   }
 
-  const splitParams = (node, i, parent) => {
+  const splitParams = (node) => {
     if (node.children.length === 1 && node.children[0].type === 'text') {
       const content = node.children[0].value.split('\n')
       node.children = content.map((value) =>
@@ -42,7 +42,6 @@ export default (userOptions = {}) => {
   // Keep track of whether we've opened a highlight block
   let isOpen = 0
   let children = {}
-  let variant
 
   // Detect opening or closing comment
   const isOpeningOrClosingComment = (node) => {
@@ -64,12 +63,6 @@ export default (userOptions = {}) => {
     return [false, 'highlight']
   }
 
-  // Detect opening comment
-  const isOpeningComment = (node) =>
-    node.tagName === options.commentTag && node.properties?.className === options.commentClass
-      ? true
-      : false
-
   // Visitor method
   const visitor = (node, i, parent) => {
     const [type, variant] = isOpeningOrClosingComment(node)

sites/dev/components/header.js

@@ -1,12 +1,8 @@
 import { useState, useEffect } from 'react'
-import FreeSewingIcon from 'shared/components/icons/freesewing.js'
-import Link from 'next/link'
 import ThemePicker from 'shared/components/theme-picker.js'
 import CloseIcon from 'shared/components/icons/close.js'
 import MenuIcon from 'shared/components/icons/menu.js'
 import SearchIcon from 'shared/components/icons/search.js'
-import SwipeRightIcon from 'shared/components/icons/swiperight.js'
-import SwipeLeftIcon from 'shared/components/icons/swipeleft.js'
 import Ribbon from 'shared/components/ribbon.js'
 import { WordMark } from 'shared/components/wordmark.js'
 

sites/dev/components/help-us.js

@@ -1,6 +1,6 @@
 import Popout from 'shared/components/popout.js'
 
-const HelpUs = ({ mdx = false, slug = '/' }) => (
+const HelpUs = ({ slug = '/' }) => (
   <details className="mt-4">
     <summary>Click here to learn how you can help us improve this page</summary>
     <Popout tip className="max-w-prose">

sites/dev/components/layouts/docs.js

@@ -18,7 +18,7 @@ const DefaultLayout = ({ app, title = false, crumbs = false, children = [] }) =>
         app={app}
         slug={slug}
         before={[
-          <div className="flex flex-row items-center justify-between border-b mb-4">
+          <div className="flex flex-row items-center justify-between border-b mb-4" key="home-key">
             <Link href="/">
               <a>
                 <HomeIcon />

sites/dev/components/navigation/primary.js

@@ -204,9 +204,7 @@ const Navigation = ({ app, active, className='' }) => {
 */
 export const Icons = ({
   app,
-  active,
   ulClasses = '',
-  liClasses = '',
   linkClasses = `grow text-lg lg:text-xl py-1 text-base-content sm:text-base-content
   hover:text-secondary sm:hover:text-secondary hover:cursor-pointer
   flex flex-col items-center`,
@@ -242,7 +240,6 @@ const PrimaryMenu = ({ app, active, before=[], after=[] }) => (
 export const MainSections = ({ app, active }) => {
   if (!app.navigation) return null
   const output = []
-  let last
   for (const page of order(app.navigation)) {
     const act = isActive(page.__slug, active)
     const txt = (

sites/dev/components/wrappers/page.js

@@ -27,7 +27,7 @@ const PageWrapper = ({
   const router = useRouter()
   const slug = router.asPath.slice(1)
 
-  useEffect(() => app.setSlug(slug), [slug])
+  useEffect(() => app.setSlug(slug), [slug, app])
 
   // Trigger search with Ctrl+k
   useHotkeys('ctrl+k', (evt) => {

sites/dev/pages/404.js

@@ -6,7 +6,7 @@ import Robot from 'shared/components/robot'
 import Popout from 'shared/components/popout'
 import PageLink from 'shared/components/page-link'
 
-const Page404 = (props) => {
+const Page404 = () => {
   const app = useApp()
 
   return (

sites/dev/pages/contact.js

@@ -16,7 +16,7 @@ const No = () => (
   </span>
 )
 
-const ContactPage = (props) => {
+const ContactPage = () => {
   const app = useApp()
   const title = 'Contact information'
 

sites/dev/pages/index.js

@@ -7,7 +7,6 @@ import { Icons } from 'shared/components/navigation/primary'
 import Highlight from 'shared/components/mdx/highlight'
 import Popout from 'shared/components/popout'
 import WebLink from 'shared/components/web-link'
-import Code from 'shared/components/code'
 import PageLink from 'shared/components/page-link'
 
 const HomePage = () => {
@@ -113,7 +112,10 @@ const HomePage = () => {
                 <h3>What&apos;s changed?</h3>
                 <p>
                   Check{' '}
-                  <PageLink href="/guides/v3/migration" txt="the FreeSewing version 3 migration guide" />{' '}
+                  <PageLink
+                    href="/guides/v3/migration"
+                    txt="the FreeSewing version 3 migration guide"
+                  />{' '}
                   to learn about what is new in version 3 of FreeSewing, and what changes you should
                   make in your own designs to port them to version 3.
                 </p>

sites/org/components/header.js

@@ -1,5 +1,4 @@
 import { useState, useEffect } from 'react'
-import Link from 'next/link'
 import ThemePicker from 'shared/components/theme-picker.js'
 import LocalePicker from 'shared/components/locale-picker.js'
 import CloseIcon from 'shared/components/icons/close.js'

sites/org/components/help-us.js

@@ -1,44 +1,52 @@
 import Popout from 'shared/components/popout.js'
 
-const HelpUs = ({ mdx=false, slug='/' }) => (
+const HelpUs = ({ mdx = false, slug = '/' }) => (
   <details className="mt-4">
     <summary>Click here to learn how you can help us improve this page</summary>
     {mdx && (
-      <Popout tip className='max-w-prose'>
+      <Popout tip className="max-w-prose">
         <h6>Found a mistake?</h6>
-        You can <a
+        You can{' '}
+        <a
           href={`https://github.com/freesewing/freesewing/edit/develop/markdown/dev/${slug}/en.md`}
           className="text-secondary font-bold"
-        >edit this page on Github</a> and help us improve our documentation.
+        >
+          edit this page on Github
+        </a>{' '}
+        and help us improve our documentation.
       </Popout>
     )}
-    <Popout comment by="joost" className='max-w-prose'>
+    <Popout comment by="joost" className="max-w-prose">
       <h6>Does this look ok?</h6>
       <img
         className="my-4 rounded"
         src={`https://canary.backend.freesewing.org/og-img/en/dev${slug}`}
+        alt="auto-generated banner"
       />
       <p>
-        If it looks ok, great! But if not, please let me know about it.
+        If it looks ok, great! But if not, please let me know about it. Either by{' '}
-        Either by <a href="https://discord.freesewing.org/" className="text-secondary">
+        <a href="https://discord.freesewing.org/" className="text-secondary">
           reaching out on Discord
-        </a> or feel free to <a
+        </a>{' '}
+        or feel free to{' '}
+        <a
           href="https://github.com/freesewing/freesewing/issues/new/choose"
           className="text-secondary"
-        >create
+        >
-        an issue on Github</a>.
+          create an issue on Github
+        </a>
+        .
       </p>
       <h6>Why do you ask?</h6>
       <p className="text-base">
-        I recently added a backend endpoint to auto-generate pretty (I hope) Open Graph images.
+        I recently added a backend endpoint to auto-generate pretty (I hope) Open Graph images. They
-        They are those little preview images you see when you paste a link in Discord (for example).
+        are those little preview images you see when you paste a link in Discord (for example).
       </p>
       <p className="text-base">
         This idea is that it will auto-generate an image, but I am certain there are some edge cases
-        where that will not work.
+        where that will not work. There are hundreds of pages on this website and checking them all
-        There are hundreds of pages on this website and checking them all one by one is not something
+        one by one is not something I see myself doing. But since you are here on this page, perhaps
-        I see myself doing. But since you are here on this page, perhaps you could see if the image
+        you could see if the image above looks ok.
-        above looks ok.
       </p>
       <p className="text-base">Thank you, I really appreciate your help with this.</p>
     </Popout>
@@ -46,4 +54,3 @@ const HelpUs = ({ mdx=false, slug='/' }) => (
 )
 
 export default HelpUs
-

sites/org/components/layouts/bare.js

@@ -2,7 +2,7 @@ import { useRouter } from 'next/router'
 import Aside from 'shared/components/navigation/aside'
 import ThemePicker from 'shared/components/theme-picker'
 
-const DefaultLayout = ({ app, title=false, children=[] }) => {
+const DefaultLayout = ({ app, children = [] }) => {
   const router = useRouter()
   const slug = router.asPath.slice(1)
 

sites/org/components/wrappers/layout.js

@@ -1,19 +1,9 @@
-import { useState } from 'react'
 import { useRouter } from 'next/router'
 import Header from 'site/components/header'
 import Footer from 'site/components/footer'
 import Search from 'site/components/search'
 
-const LayoutWrapper = ({
+const LayoutWrapper = ({ app, children = [], search, setSearch, noSearch = false }) => {
-  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
@@ -25,29 +15,31 @@ const LayoutWrapper = ({
   const router = useRouter()
   router.events?.on('routeChangeStart', startNavigation)
   router.events?.on('routeChangeComplete', () => app.stopLoading())
-  const [collapsePrimaryNav, setCollapsePrimaryNav] = useState(workbench || false)
-  const [collapseAltMenu, setCollapseAltMenu] = useState(false)
 
   return (
-    <div className={`
+    <div
+      className={`
     flex flex-col justify-between
     min-h-screen
     bg-base-100
-    `}>
+    `}
+    >
       <Header app={app} setSearch={setSearch} />
       <main className="grow">{children}</main>
       {!noSearch && search && (
         <>
-        <div className={`
+          <div
+            className={`
           fixed w-full max-h-screen bg-base-100 top-0 z-30 pt-0 pb-16 px-8
           md:rounded-lg md:top-24
           md:max-w-xl md:m-auto md:inset-x-12
           md:max-w-2xl
           lg:max-w-4xl
-        `}>
+        `}
-          <Search app={app} search={search} setSearch={setSearch}/>
+          >
-        </div>
+            <Search app={app} search={search} setSearch={setSearch} />
-        <div className="fixed top-0 left-0 w-full min-h-screen bg-neutral z-20 bg-opacity-70"></div>
+          </div>
+          <div className="fixed top-0 left-0 w-full min-h-screen bg-neutral z-20 bg-opacity-70"></div>
         </>
       )}
       <Footer app={app} />

sites/org/components/wrappers/page.js

@@ -9,25 +9,24 @@ import Docs from 'site/components/layouts/docs'
 import Feeds from 'site/components/feeds.js'
 
 /* This component should wrap all page content */
-const PageWrapper= ({
+const PageWrapper = ({
-  title="FIXME: No title set",
+  title = 'FIXME: No title set',
-  noSearch=false,
+  noSearch = false,
-  app=false,
+  app = false,
-  layout=Docs,
+  layout = Docs,
-  crumbs=false,
+  crumbs = false,
-  children=[]
+  children = [],
 }) => {
-
   const swipeHandlers = useSwipeable({
-    onSwipedLeft: evt => (app.primaryMenu) ? app.setPrimaryMenu(false) : null,
+    onSwipedLeft: () => (app.primaryMenu ? app.setPrimaryMenu(false) : null),
-    onSwipedRight: evt => (app.primaryMenu) ? null : app.setPrimaryMenu(true),
+    onSwipedRight: () => (app.primaryMenu ? null : app.setPrimaryMenu(true)),
-    trackMouse: true
+    trackMouse: true,
   })
 
   const router = useRouter()
   const slug = router.asPath.slice(1)
 
-  useEffect(() => app.setSlug(slug), [slug])
+  useEffect(() => app.setSlug(slug), [slug, app])
 
   // Trigger search with Ctrl+k
   useHotkeys('ctrl+k', (evt) => {
@@ -41,7 +40,9 @@ const PageWrapper= ({
     app: app,
     title: title,
     crumbs: crumbs,
-    search, setSearch, toggleSearch: () => setSearch(!search),
+    search,
+    setSearch,
+    toggleSearch: () => setSearch(!search),
     noSearch: noSearch,
   }
 
@@ -56,14 +57,10 @@ const PageWrapper= ({
     >
       <Feeds lang={app.locale} />
       <LayoutWrapper {...childProps}>
-        {Layout
+        {Layout ? <Layout {...childProps}>{children}</Layout> : children}
-          ? <Layout {...childProps}>{children}</Layout>
-          : children
-        }
       </LayoutWrapper>
     </div>
   )
 }
 
 export default PageWrapper
-

sites/org/pages/blog/index.js

@@ -7,45 +7,56 @@ import { strapiImage } from 'shared/utils'
 import { useTranslation } from 'next-i18next'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 
-const strapi = "https://posts.freesewing.org"
+const strapi = 'https://posts.freesewing.org'
 const textShadow = {
   style: {
-    textShadow: "1px 1px 1px #000000, -1px -1px 1px #000000, 1px -1px 1px #000000, -1px 1px 1px #000000, 2px 2px 1px #000000"
+    textShadow:
-  }
+      '1px 1px 1px #000000, -1px -1px 1px #000000, 1px -1px 1px #000000, -1px 1px 1px #000000, 2px 2px 1px #000000',
+  },
 }
 
-const Preview = ({ app, post }) => (
+const Preview = ({ post }) => (
   <div className="shadow rounded-lg">
     <Link href={`/blog/${post.slug}`}>
       <a title={post.title} className="hover:underline">
-        <div className="bg-base-100 w-full aspect-video shadow flex flex-column items-end rounded-lg" style={{
+        <div
-          backgroundImage: `url(${strapi}${post.image.sizes.medium.url})`,
+          className="bg-base-100 w-full aspect-video shadow flex flex-column items-end rounded-lg"
-          backgroundSize: 'cover',
+          style={{
-        }}>
+            backgroundImage: `url(${strapi}${post.image.sizes.medium.url})`,
+            backgroundSize: 'cover',
+          }}
+        >
           <div className="grow"></div>
           <div className="text-right mb-3 lg:mb-8">
-            <div className={`
+            <div
+              className={`
               bg-neutral text-neutral-content bg-opacity-40 text-right
               px-4 py-1
               lg:px-8 lg:py-4
 
-            `}>
+            `}
-              <h5 className={`
+            >
+              <h5
+                className={`
                 text-neutral-content
                 text-xl font-bold
                 md:text-2xl md:font-normal
                 xl:text-3xl
-              `} {...textShadow}
+              `}
+                {...textShadow}
               >
                 {post.title}
               </h5>
-              <p className={`
+              <p
+                className={`
                 hidden md:block
                 m-0 p-1 -mt-2
                 text-neutral-content
                 leading-normal text-sm font-normal
                 opacity-70
-              `}{ ...textShadow}>
+              `}
+                {...textShadow}
+              >
                 <TimeAgo date={post.date} /> by <strong>{post.author}</strong>
               </p>
             </div>
@@ -61,10 +72,11 @@ const BlogIndexPage = (props) => {
   const { t } = useTranslation()
 
   return (
-    <Page app={app} title={t('blog')} slug='blog'>
+    <Page app={app} title={t('blog')} slug="blog">
       <div className="grid grid-cols-1 gap-4 lg:grid-cols-2 max-w-7xl">
-        {props.posts.map(post => <Preview app={app} post={post} key={post.slug}/>)
+        {props.posts.map((post) => (
-        }
+          <Preview app={app} post={post} key={post.slug} />
+        ))}
       </div>
     </Page>
   )
@@ -82,18 +94,15 @@ export default BlogIndexPage
  *
  * To learn more, see: https://nextjs.org/docs/basic-features/data-fetching
  */
-export async function getStaticProps({ params, locale }) {
+export async function getStaticProps({ locale }) {
-
+  const posts = await fetch(`${strapiHost}/blogposts?_locale=${locale}&_sort=date:DESC&dev_ne=true`)
-  const posts = await fetch(
+    .then((response) => response.json())
-    `${strapiHost}/blogposts?_locale=${locale}&_sort=date:DESC&dev_ne=true`
+    .then((data) => data)
-  )
+    .catch((err) => console.log(err))
-  .then(response => response.json())
-  .then(data => data)
-  .catch(err => console.log(err))
 
   return {
     props: {
-      posts: posts.map(post => ({
+      posts: posts.map((post) => ({
         slug: post.slug,
         title: post.title,
         date: post.date,
@@ -101,7 +110,6 @@ export async function getStaticProps({ params, locale }) {
         image: strapiImage(post.image, ['medium']),
       })),
       ...(await serverSideTranslations(locale)),
-    }
+    },
   }
 }
-

sites/org/pages/community/index.js

@@ -22,30 +22,32 @@ const translations = {
   },
 }
 
-const CommunityPage = (props) => {
+const CommunityPage = () => {
   const app = useApp()
 
-
   return (
-    <Page app={app} title='Community'>
+    <Page app={app} title="Community">
       <div className="max-w-7xl text-base-content text-lg lg:text-xl">
-
         <h2>{translations.contributors[app.locale]}</h2>
         <div className="p-4 pb-16 flex flex-row -mt-2 z-0 gap-1 lg:gap-2 flex-wrap justify-around lg:px-24">
-          <Worm list={contributors.map(item => ({
+          <Worm
-            img: item.avatar_url,
+            list={contributors.map((item) => ({
-            title: item.name,
+              img: item.avatar_url,
-            href: item.profile
+              title: item.name,
-          }))} />
+              href: item.profile,
+            }))}
+          />
         </div>
 
         <h2>{translations.patrons[app.locale]}</h2>
         <div className="p-4 pb-16 flex flex-row -mt-2 z-0 gap-1 lg:gap-2 flex-wrap justify-around text-neutral-content lg:px-24">
-          <Worm list={patrons.map(item => ({
+          <Worm
-            img: item.img,
+            list={patrons.map((item) => ({
-            title: item.name,
+              img: item.img,
-            slug: `/users/${item.username}`
+              title: item.name,
-          }))} />
+              slug: `/users/${item.username}`,
+            }))}
+          />
         </div>
       </div>
     </Page>
@@ -53,4 +55,3 @@ const CommunityPage = (props) => {
 }
 
 export default CommunityPage
-

sites/org/pages/designs/index.js

@@ -9,21 +9,17 @@ import Design from 'site/components/design.js'
 // Don't bother with utilities
 delete designs.utilities
 
-const DesignsPage = (props) => {
+const DesignsPage = () => {
   const app = useApp()
   const { t } = useTranslation()
 
-  const allDesigns = [
+  const allDesigns = [...designs.accessories, ...designs.blocks, ...designs.garments].sort()
-    ...designs.accessories,
-    ...designs.blocks,
-    ...designs.garments,
-  ].sort()
 
   return (
     <Page app={app} title={t('designs')}>
       <div className="max-w-4xl m-auto text-center">
         <ul className="flex flex-row flex-wrap gap-4 items-center justify-center leading-tight text-xl">
-          {allDesigns.map(design => (
+          {allDesigns.map((design) => (
             <li key={design}>
               <PageLink href={`/designs/${design}`} txt={design} className="capitalize" />
             </li>
@@ -31,7 +27,9 @@ const DesignsPage = (props) => {
         </ul>
       </div>
       <div className="flex flex-row flex-wrap justify-around px-8 lg:gap-4">
-        {allDesigns.map(design => <Design key={design} design={design} />)}
+        {allDesigns.map((design) => (
+          <Design key={design} design={design} />
+        ))}
       </div>
     </Page>
   )
@@ -43,7 +41,6 @@ export async function getStaticProps({ locale }) {
   return {
     props: {
       ...(await serverSideTranslations(locale)),
-    }
+    },
   }
 }
-

sites/org/pages/docs/index.js

@@ -9,7 +9,7 @@ const DocsPage = ({ title, mdx }) => {
 
   // We don't need all MDX components here, just ReadMore
   const components = {
-    ReadMore: props => <ReadMore {...props} app={app} slug="docs" recurse />,
+    ReadMore: (props) => <ReadMore {...props} app={app} slug="docs" recurse />,
   }
 
   return (
@@ -34,20 +34,14 @@ export default DocsPage
  *
  * To learn more, see: https://nextjs.org/docs/basic-features/data-fetching
  */
-export async function getStaticProps({ params, locale }) {
+export async function getStaticProps({ locale }) {
-
+  const { mdx, frontmatter } = await mdxLoader(locale, 'org', ['docs'])
-  const { mdx, frontmatter } = await mdxLoader(
+  const { title = 'FIXME: Please give this page a title' } = frontmatter
-    locale,
-    'org',
-    ['docs']
-  )
-  const { title='FIXME: Please give this page a title' } = frontmatter
 
   return {
     props: {
       mdx,
       title,
-    }
+    },
   }
 }
-

sites/org/pages/index.js

@@ -8,7 +8,7 @@ import Layout from 'site/components/layouts/bare'
 import { Icons } from 'shared/components/navigation/primary'
 import DownIcon from 'shared/components/icons/down.js'
 
-const HomePage = (props) => {
+const HomePage = () => {
   const app = useApp()
   const { t } = useTranslation(['homepage', 'ograph'])
 
@@ -16,31 +16,35 @@ const HomePage = (props) => {
     <Page app={app} title="Welcome to FreeSewing.org" layout={Layout}>
       <Head>
         <meta property="og:title" content="FreeSewing.org" key="title" />
-        <meta property="og:type" content="article" key='type' />
+        <meta property="og:type" content="article" key="type" />
-        <meta property="og:description" content={t('ograph:orgDesc')} key='description' />
+        <meta property="og:description" content={t('ograph:orgDesc')} key="description" />
-        <meta property="og:article:author" content='Joost De Cock' key='author' />
+        <meta property="og:article:author" content="Joost De Cock" key="author" />
-        <meta property="og:image" content={`https://canary.backend.freesewing.org/og-img/${app.locale}/org/`} key='image' />
+        <meta
+          property="og:image"
+          content={`https://canary.backend.freesewing.org/og-img/${app.locale}/org/`}
+          key="image"
+        />
         <meta property="og:image:type" content="image/png" />
         <meta property="og:image:width" content="1200" />
         <meta property="og:image:height" content="630" />
-        <meta property="og:url" content="https://freesewing.org/" key='url' />
+        <meta property="og:url" content="https://freesewing.org/" key="url" />
-        <meta property="og:locale" content={app.locale} key='locale' />
+        <meta property="og:locale" content={app.locale} key="locale" />
-        <meta property="og:site_name" content="freesewing.org" key='site' />
+        <meta property="og:site_name" content="freesewing.org" key="site" />
       </Head>
-        <section
+      <section
-          style={{
+        style={{
-            backgroundImage: "url('/img/splash.jpg')",
+          backgroundImage: "url('/img/splash.jpg')",
-            backgroundSize: 'cover',
+          backgroundSize: 'cover',
-            backgroundPosition: '40% 50%',
+          backgroundPosition: '40% 50%',
-          }}
+        }}
-          className="m-0 p-0 shadow drop-shadow-lg w-full mb-8"
+        className="m-0 p-0 shadow drop-shadow-lg w-full mb-8"
-        >
+      >
-          <div className="mx-auto px-8 pt-20 flex flex-col items-center justify-between min-h-screen">
+        <div className="mx-auto px-8 pt-20 flex flex-col items-center justify-between min-h-screen">
-            <span>&nbsp;</span>
+          <span>&nbsp;</span>
-            <div>
+          <div>
-              <div className="flex flex-col items-end max-w-4xl">
+            <div className="flex flex-col items-end max-w-4xl">
-                <h1
+              <h1
-                  className={`
+                className={`
                     text-4xl font-black text-right px-4
                     sm:text-6xl
                     md:text-7xl px-6
@@ -48,62 +52,66 @@ const HomePage = (props) => {
                     bg-primary
                     bg-opacity-80
                     `}
-                  style={{ textShadow: '1px 1px 3px #000', color: 'white' }}
+                style={{ textShadow: '1px 1px 3px #000', color: 'white' }}
-                >
+              >
-                  FreeSewing
+                FreeSewing
-                  <span className="font-light">.org</span>
+                <span className="font-light">.org</span>
-                </h1>
+              </h1>
-                <h2
+              <h2
-                  className={`
+                className={`
                     text-right text-xl mr-0
                     sm:text-3xl
                     md:text-4xl
                     lg:max-w-1/2 lg:text-4xl xl:pr-0 `}
-                  style={{ textShadow: '1px 1px 3px #000', color: 'white' }}
+                style={{ textShadow: '1px 1px 3px #000', color: 'white' }}
-                >
+              >
-                  <div>{t('common:sloganCome')}</div>
+                <div>{t('common:sloganCome')}</div>
-                  <div className="inline-block mt-2">
+                <div className="inline-block mt-2">
-                    {t('common:sloganStay')}
+                  {t('common:sloganStay')}
-                    <div className="theme-gradient h-1 lg:h-2" />
+                  <div className="theme-gradient h-1 lg:h-2" />
-                  </div>
+                </div>
-                </h2>
+              </h2>
-              </div>
+            </div>
-              <Icons app={app}  active='/'
+            <Icons
-                ulClasses="flex flex-row flex-wrap mt-4 sm:mt-8 justify-between w-full max-w-7xl"
+              app={app}
-                liClasses="text-neutral-content w-1/3 my-4 lg:mx-2 lg:w-40 overflow-clip"
+              active="/"
-                linkClasses={`
+              ulClasses="flex flex-row flex-wrap mt-4 sm:mt-8 justify-between w-full max-w-7xl"
+              liClasses="text-neutral-content w-1/3 my-4 lg:mx-2 lg:w-40 overflow-clip"
+              linkClasses={`
                   text-sm sm:text-xl lg:text-xl py-1 text-secondary
                   hover:text-secondary sm:hover:text-secondary-focus hover:cursor-pointer
                   flex flex-col items-center capitalize`}
-                linkStyle={{ textShadow: '2px 2px 2px #000, -2px 2px 2px #000, -2px -2px 2px #000, 2px -2px 2px #000',
+              linkStyle={{
-                }}
+                textShadow:
-              />
+                  '2px 2px 2px #000, -2px 2px 2px #000, -2px -2px 2px #000, 2px -2px 2px #000',
-            </div>
+              }}
-            <div className="text-neutral-content text-center mt-8 text-center">
+            />
-              {t('scrollDownToLearnMore')}
-              <DownIcon className="w-12 h-12 sm:w-16 sm:h-16 lg:w-20 lg:h-20 animate-bounce w-full m-auto mt-8"/>
-            </div>
           </div>
-        </section>
+          <div className="text-neutral-content text-center mt-8 text-center">
+            {t('scrollDownToLearnMore')}
+            <DownIcon className="w-12 h-12 sm:w-16 sm:h-16 lg:w-20 lg:h-20 animate-bounce w-full m-auto mt-8" />
+          </div>
+        </div>
+      </section>
       <div>
-      <div className="max-w-xl m-auto my-32 px-6">
+        <div className="max-w-xl m-auto my-32 px-6">
-        <Popout fixme>Create homepage</Popout>
+          <Popout fixme>Create homepage</Popout>
-      </div>
+        </div>
-      <div className="max-w-7xl m-auto my-32">
+        <div className="max-w-7xl m-auto my-32">
-        <div className="px-8 text-base-content">
+          <div className="px-8 text-base-content">
-          <Icons app={app}
+            <Icons
-            active='/'
+              app={app}
-            ulClasses="flex flex-row flex-wrap mt-4 sm:mt-8 justify-between w-full max-w-7xl"
+              active="/"
-            liClasses="text-neutral-content w-1/3 my-4 lg:mx-2 lg:w-40 overflow-clip"
+              ulClasses="flex flex-row flex-wrap mt-4 sm:mt-8 justify-between w-full max-w-7xl"
-            linkClasses={`
+              liClasses="text-neutral-content w-1/3 my-4 lg:mx-2 lg:w-40 overflow-clip"
+              linkClasses={`
               text-sm sm:text-xl lg:text-xl py-1 text-base-content
               hover:text-secondary sm:hover:text-secondary-focus hover:cursor-pointer
               flex flex-col items-center capitalize`}
-          />
+            />
+          </div>
         </div>
       </div>
-    </div>
-
     </Page>
   )
 }
@@ -114,7 +122,6 @@ export async function getStaticProps({ locale }) {
   return {
     props: {
       ...(await serverSideTranslations(locale)),
-    }
+    },
   }
 }
-

sites/org/pages/showcase/designs/index.js

@@ -18,7 +18,7 @@ const PreviewTile = ({ img, slug, title }) => (
     `}
   >
     <Link href={`/showcase/${slug}`}>
-      <a className="w-36 h-36 block" title={title}/>
+      <a className="w-36 h-36 block" title={title} />
     </Link>
   </div>
 )
@@ -26,21 +26,25 @@ const PreviewTile = ({ img, slug, title }) => (
 const DesignPosts = ({ design, posts }) => {
   const { t } = useTranslation(['patterns'])
   return (
-    <div className='py-8'>
+    <div className="py-8">
       <h2 className="bg-clip-text bg-success m-0">
         <PageLink href={`/showcase/designs/${design}`} txt={t(`${design}.t`)} />
       </h2>
-      <div className={`
+      <div
+        className={`
         flex flex-row overflow-visible
         -mr-8 pl-8
         md:-mr-12 md:pl-12
-      `}>
+      `}
-      {posts.slice(0, 10).map(post => <PreviewTile
+      >
-        img={`${strapiHost}${post.image?.sizes?.medium?.url}`}
+        {posts.slice(0, 10).map((post) => (
-        slug={post.slug}
+          <PreviewTile
-        title={post.title}
+            img={`${strapiHost}${post.image?.sizes?.medium?.url}`}
-        key={post.slug}
+            slug={post.slug}
-      />)}
+            title={post.title}
+            key={post.slug}
+          />
+        ))}
       </div>
     </div>
   )
@@ -58,17 +62,22 @@ const ShowcaseIndexPage = (props) => {
   }
 
   return (
-    <Page app={app} title={t('showcase')} slug='showcase'>
+    <Page app={app} title={t('showcase')} slug="showcase">
-      <div className={`
+      <div
+        className={`
         px-8 2xl:pl-16 overflow-visible overscroll-x-hidden
         max-w-sm
         md:max-w-md
         lg:max-w-lg
         xl:max-w-3xl
         2xl:max-w-7xl
-      `}>
+      `}
-        {Object.keys(designs).sort().map(design => <DesignPosts
+      >
-          key={design} design={design} posts={designs[design]} />)}
+        {Object.keys(designs)
+          .sort()
+          .map((design) => (
+            <DesignPosts key={design} design={design} posts={designs[design]} />
+          ))}
       </div>
     </Page>
   )
@@ -86,18 +95,17 @@ export default ShowcaseIndexPage
  *
  * To learn more, see: https://nextjs.org/docs/basic-features/data-fetching
  */
-export async function getStaticProps({ params, locale }) {
+export async function getStaticProps({ locale }) {
-
   const posts = await fetch(
     `${strapiHost}/showcaseposts?_locale=${locale}&_sort=date:DESC&_limit=-1`
   )
-  .then(response => response.json())
+    .then((response) => response.json())
-  .then(data => data)
+    .then((data) => data)
-  .catch(err => console.log(err))
+    .catch((err) => console.log(err))
 
   return {
     props: {
-      posts: posts.map(post => {
+      posts: posts.map((post) => {
         const designs = [post.design1]
         if (post.design2 && post.design2.length > 2) designs.push(post.design2)
         if (post.design3 && post.design3.length > 2) designs.push(post.design3)
@@ -107,11 +115,10 @@ export async function getStaticProps({ params, locale }) {
           date: post.date,
           maker: post.maker.displayname,
           image: strapiImage(post.image, ['medium']),
-          designs
+          designs,
         }
       }),
       ...(await serverSideTranslations(locale)),
-    }
+    },
   }
 }
-

sites/org/pages/showcase/index.js

@@ -18,10 +18,13 @@ export const PreviewTile = ({ img, slug, title }) => (
     `}
   >
     <Link href={`/showcase/${slug}`}>
-      <a className={`
+      <a
+        className={`
         w-42 h-42 block
         md:w-56 md:h-56
-        `} title={title}/>
+        `}
+        title={title}
+      />
     </Link>
   </div>
 )
@@ -29,23 +32,28 @@ export const PreviewTile = ({ img, slug, title }) => (
 const DesignPosts = ({ design, posts }) => {
   const { t } = useTranslation(['patterns'])
   return (
-    <div className='py-2'>
+    <div className="py-2">
       <h2>
         <Link href={`/showcase/designs/${design}`}>
           <a className="hover:text-secondary-focus hover:underline">{t(`${design}.t`)}</a>
         </Link>
       </h2>
-      <div className={`
+      <div
+        className={`
         flex flex-row overflow-cli
         pl-8
         md:-mr-12 md:pl-12
-      `} style={{maxWidth: "calc(100vw - 3rem)"}}>
+      `}
-      {posts.slice(0, 10).map(post => <PreviewTile
+        style={{ maxWidth: 'calc(100vw - 3rem)' }}
-        img={`${strapiHost}${post.image?.sizes?.medium?.url}`}
+      >
-        slug={post.slug}
+        {posts.slice(0, 10).map((post) => (
-        title={post.title}
+          <PreviewTile
-        key={post.slug}
+            img={`${strapiHost}${post.image?.sizes?.medium?.url}`}
-      />)}
+            slug={post.slug}
+            title={post.title}
+            key={post.slug}
+          />
+        ))}
       </div>
     </div>
   )
@@ -64,17 +72,24 @@ const ShowcaseIndexPage = (props) => {
   }
 
   return (
-    <Page app={app} title={t('showcase')} slug='showcase'>
+    <Page app={app} title={t('showcase')} slug="showcase">
       <div className="max-w-4xl m-auto text-center">
         <ul className="flex flex-row flex-wrap gap-4 items-center justify-center leading-tight text-xl">
-          {Object.keys(designs).sort().map(design => (
+          {Object.keys(designs)
-            <li key={design}>
+            .sort()
-              <PageLink href={`/showcase/designs/${design}`} txt={design} className="capitalize" />
+            .map((design) => (
-            </li>
+              <li key={design}>
-          ))}
+                <PageLink
+                  href={`/showcase/designs/${design}`}
+                  txt={design}
+                  className="capitalize"
+                />
+              </li>
+            ))}
         </ul>
       </div>
-      <div className={`
+      <div
+        className={`
         2xl:pl-16 overflow-visible overflow-x-hidden
         -mr-6
         max-w-sm
@@ -82,9 +97,13 @@ const ShowcaseIndexPage = (props) => {
         lg:max-w-lg
         xl:max-w-3xl
         2xl:max-w-7xl
-      `}>
+      `}
-        {Object.keys(designs).sort().map(design => <DesignPosts
+      >
-          key={design} design={design} posts={designs[design]} />)}
+        {Object.keys(designs)
+          .sort()
+          .map((design) => (
+            <DesignPosts key={design} design={design} posts={designs[design]} />
+          ))}
       </div>
     </Page>
   )
@@ -102,18 +121,17 @@ export default ShowcaseIndexPage
  *
  * To learn more, see: https://nextjs.org/docs/basic-features/data-fetching
  */
-export async function getStaticProps({ params, locale }) {
+export async function getStaticProps({ locale }) {
-
   const posts = await fetch(
     `${strapiHost}/showcaseposts?_locale=${locale}&_sort=date:DESC&_limit=-1`
   )
-  .then(response => response.json())
+    .then((response) => response.json())
-  .then(data => data)
+    .then((data) => data)
-  .catch(err => console.log(err))
+    .catch((err) => console.log(err))
 
   return {
     props: {
-      posts: posts.map(post => {
+      posts: posts.map((post) => {
         const designs = [post.design1]
         if (post.design2 && post.design2.length > 2) designs.push(post.design2)
         if (post.design3 && post.design3.length > 2) designs.push(post.design3)
@@ -123,11 +141,10 @@ export async function getStaticProps({ params, locale }) {
           date: post.date,
           maker: post.maker.displayname,
           image: strapiImage(post.image, ['medium']),
-          designs
+          designs,
         }
       }),
       ...(await serverSideTranslations(locale)),
-    }
+    },
   }
 }
-

sites/org/pages/typography.js

@@ -3,41 +3,45 @@ import Page from 'site/components/wrappers/page.js'
 import useApp from 'site/hooks/useApp.js'
 import Popout from 'shared/components/popout.js'
 
-const TypographyPage = (props) => {
+const TypographyPage = () => {
   const app = useApp()
   const { updateNavigation } = app
 
   useEffect(() => {
-    updateNavigation(
+    updateNavigation(['typography'], {
-      ['typography'],
+      __title: 'Typography',
-      {
+      __linktitle: 'Typography',
-        __title: 'Typography',
+      __slug: 'typography',
-        __linktitle: 'Typography',
+      __order: 'typography',
-        __slug: 'typography',
+    })
-        __order: 'typography'
-      })
   }, [updateNavigation])
 
   const p = (
     <p>
-      This paragraph is here to show the vertical spacing between headings and paragraphs.
+      This paragraph is here to show the vertical spacing between headings and paragraphs. In
-      In addition, let&apos;s make it a bit longer so we can see the line height as the text wraps.
+      addition, let&apos;s make it a bit longer so we can see the line height as the text wraps.
     </p>
   )
 
   return (
-    <Page app={app} title='Typography'>
+    <Page app={app} title="Typography">
       <div className="text-primary mdx max-w-prose text-base-content max-w-prose text-lg lg:text-xl">
         <p>This typography page shows an overview of different elements and how they are styled.</p>
         <p>It&apos;s a good starting point for theme development.</p>
         <h2>Headings (this is h2)</h2>
         {p}
-        <h3>This is h3</h3>{p}
+        <h3>This is h3</h3>
-        <h4>This is h4</h4>{p}
+        {p}
-        <h5>This is h5</h5>{p}
+        <h4>This is h4</h4>
-        <h6>This is h6</h6>{p}
+        {p}
+        <h5>This is h5</h5>
+        {p}
+        <h6>This is h6</h6>
+        {p}
         <h2>Links and buttons</h2>
-        <p>A regular link <a href="#">looks like this</a>, whereas buttons look like this:</p>
+        <p>
+          A regular link <a href="#">looks like this</a>, whereas buttons look like this:
+        </p>
         <h3>Main button styles</h3>
         <div className="flex flex-row gap-2 flex-wrap">
           <button className="btn btn-neutral">Neutral button</button>
@@ -77,7 +81,7 @@ const TypographyPage = (props) => {
         </div>
         <h2>Popouts</h2>
         <p>The Popout component is what powers various custom MDX components under the hood:</p>
-        {['note', 'tip', 'warning', 'fixme', 'link', 'related', 'none'].map(type => {
+        {['note', 'tip', 'warning', 'fixme', 'link', 'related', 'none'].map((type) => {
           const props = {}
           props[type] = true
           return (
@@ -96,4 +100,3 @@ const TypographyPage = (props) => {
 }
 
 export default TypographyPage
-