fix(fs.dev): Linter warnings

packages/freesewing.dev/'

@@ -1,93 +0,0 @@
-const colors = require('tailwindcss/colors')
-
-const bg = '#002808'
-module.exports = {
-  'fontFamily': `ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;`,
-  'primary': colors.lime['700'],
-  'primary-focus': colors.lime['600'],
-  'primary-content': colors.lime['50'],
-
-  'secondary': colors.lime['200'],
-  'secondary-focus': colors.lime['600'],
-  'secondary-content': bg,
-
-  'accent': colors.lime['700'],
-  'accent-focus': colors.lime['600'],
-  'accent-content': colors.yellow['200'],
-
-  'neutral': colors.lime['700'],
-  'neutral-focus': colors.lime['600'],
-  'neutral-content': colors.lime['200'],
-
-  'base-100': bg,
-  'base-200': colors.lime['900'],
-  'base-300': colors.lime['800'],
-  'base-content': colors.lime['500'],
-
-  'info': colors.lime['700'],
-  'success': colors.lime['700'],
-  'warning': colors.lime['700'],
-  'error': colors.lime['700'],
-
-  '--btn-info-content': colors.teal[300],
-  '--btn-success-content': colors.green[300],
-  '--btn-warning-content': colors.orange[300],
-  '--btn-error-content': colors.red[300],
-  '--rounded-btn': '0',
-
-  '--theme-gradient': `repeating-linear-gradient(
-    -45deg,
-    ${colors.lime['700']},
-    ${colors.lime['700']} 15px,
-    ${bg} 15px,
-    ${bg} 30px
-  )`,
-
-  '--code-background-color': '#002407',
-  '--code-border-color': colors.lime['900'],
-  '--code-color': colors.lime['600'],
-  '--code-font-family': `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`,
-  '--code-border-radius': 0,
-  '--code-border-style': 'solid',
-  '--code-border-width': 1,
-  '--code-outer-padding': '0 0.5rem',
-  '--code-inner-padding': '1rem',
-  '--code-color-keyword': colors.lime['400'],
-  '--code-font-weight-keyword': 'bold',
-  '--code-color-entity': colors.lime['400'],
-  '--code-font-weight-entity': 'bold',
-  '--code-color-constant': colors.lime['200'],
-  '--code-color-string': colors.lime['200'],
-  '--code-font-style-string': 'italic',
-  '--code-color-variable': colors.lime['400'],
-  '--code-color-comment': colors.lime['600'],
-  '--code-color-tag': colors.lime['400'],
-  '--code-color-property': colors.lime['200'],
-  '--code-font-weight-property': 'bold',
-
-  '--pattern-bg': colors.lime['900'],
-  '--pattern-fabric': colors.neutral['700'],
-  '--pattern-lining': colors.emerald['500'],
-  '--pattern-interfacing': colors.neutral['400'],
-  '--pattern-canvas': colors.amber['600'],
-  '--pattern-various': colors.red['500'],
-  '--pattern-mark': colors.blue['500'],
-  '--pattern-contrast': colors.pink['500'],
-  '--pattern-note': colors.violet['500'],
-  '--pattern-fabric': colors.neutral['700'],
-  '--pattern-lining': colors.emerald['500'],
-  '--pattern-interfacing': colors.neutral['400'],
-  '--pattern-canvas': colors.amber['600'],
-  '--pattern-various': colors.red['500'],
-  '--pattern-mark': colors.blue['500'],
-  '--pattern-contrast': colors.pink['500'],
-  '--pattern-note': colors.violet['500'],
-
-  '--pattern-scale': 1,
-  '--pattern-stroke-xs': "0.2",
-  '--pattern-stroke-sm': "0.4",
-  '--pattern-stroke': "0.7",
-  '--pattern-stroke-lg': "1.3",
-  '--pattern-stroke-xl': "2",
-  '--pattern-stroke-xxl': "4",
-}

packages/freesewing.dev/components/footer.js

@@ -72,8 +72,8 @@ const Footer = ({ app }) => (
         <div className="theme-gradient h-1 mb-2"></div>
         <p className="text-sm text-neutral-content">
           <a className={link} href={social.discord}>Our Discord server</a> is
-          the best place to ask questions and get help. It's where our community hangs out
+          the best place to ask questions and get help. It&apos;s where our community hangs out
-          so you'll get the fastest response and  might even make a few new friends along the way.
+          so you&apos;ll get the fastest response and  might even make a few new friends along the way.
         </p>
         <p className="text-sm text-neutral-content">
           You can also <a href={social.twitter} className={link} >reach out on Twitter</a> or <a
@@ -108,8 +108,11 @@ const Footer = ({ app }) => (
     </p>
     <div className="p-4 pb-16 flex flex-row bg-neutral -mt-2 z-0 gap-1 lg:gap-2 flex-wrap justify-around text-neutral-content lg:px-24">
       {contributors.map(person => (
-        <a title={person.name} href={person.profile} className="m-auto">
+        <a title={person.name} href={person.profile} className="m-auto" key={person.name}>
-          <img src={person.avatar_url} className="w-12 h-12 lg:w-16 lg:h-16 rounded-full border-2 border-secondary hover:border-accent"/>
+          <img
+            src={person.avatar_url} alt={`Avatar of ${person.name}`}
+            className="w-12 h-12 lg:w-16 lg:h-16 rounded-full border-2 border-secondary hover:border-accent"
+          />
         </a>
       ))}
     </div>
@@ -121,8 +124,17 @@ const Footer = ({ app }) => (
     </p>
     <div className="p-4 pb-16 flex flex-row bg-neutral -mt-2 z-0 gap-1 lg:gap-2 flex-wrap justify-around text-neutral-content lg:px-24">
       {patrons.map(person => (
-        <a title={person.name} href={`https://freesewing.org/users/${person.username}`} className="m-auto">
+        <a
-          <img src={person.img} className="w-12 h-12 lg:w-16 lg:h-16 rounded-full border-2 border-secondary hover:border-accent"/>
+          title={person.name}
+          href={`https://freesewing.org/users/${person.username}`}
+          className="m-auto"
+          key={person.name}
+        >
+          <img
+            src={person.img}
+            alt={`Avatar of ${person.name}`}
+            className="w-12 h-12 lg:w-16 lg:h-16 rounded-full border-2 border-secondary hover:border-accent"
+          />
         </a>
       ))}
     </div>
@@ -134,16 +146,16 @@ const Footer = ({ app }) => (
     </p>
     <div className="p-4 py-16 flex flex-row bg-neutral -mt-2 z-0 gap-8 flex-wrap justify-center items-center text-neutral-content">
       <a title="Search powered by Algolia" href="https://www.algolia.com/">
-        <img src="/brands/algolia.svg" className="w-64 mx-12 sm:mx-4"/>
+        <img src="/brands/algolia.svg" className="w-64 mx-12 sm:mx-4" alt="Search powered by Algolia"/>
       </a>
-      <a title="Translation powered by Algolia" href="https://www.crowdin.com/">
+      <a title="Translation powered by Crowdin" href="https://www.crowdin.com/">
-        <img src="/brands/crowdin.svg" className="w-64 mx-12 sm:mx-4"/>
+        <img src="/brands/crowdin.svg" className="w-64 mx-12 sm:mx-4" alt="Translation powered by Crowdin" />
       </a>
-      <a title="Website hosted by Netligy" href="https://www.netlify.com/">
+      <a title="Deploys & hosting by Netlify" href="https://www.netlify.com/">
-        <img src="/brands/netlify.svg" className="w-44 mx-12 sm:mx-4"/>
+        <img src="/brands/netlify.svg" className="w-44 mx-12 sm:mx-4" alt="Deploys & hosting by Netlify" />
       </a>
       <a title="Error handling by Bugsnag" href="https://www.bugsnag.com/">
-        <img src="/brands/bugsnag.svg" className="h-36 mx-12 sm:mx-4"/>
+        <img src="/brands/bugsnag.svg" className="h-36 mx-12 sm:mx-4" alt="Error handling by bugsnag" />
       </a>
     </div>
 

packages/freesewing.dev/components/header.js

@@ -20,7 +20,7 @@ const Header = ({ app }) => {
         sm:hidden
         z-30
       `}>
-        <div className="p-2 flex flex-row gap-2 justify-between">
+        <div className="p-2 flex flex-row gap-2 justify-between text-neutral-content">
         <button
           className={`
             btn border-base-100 text-base-100 btn-sm border border-transparent bg-transparent
@@ -32,11 +32,11 @@ const Header = ({ app }) => {
               : <>Show menu &nbsp;<Right /></>
             }
         </button>
-        <Logo size={32} color="#fff"/>
+        <Logo size={32} fill="currentColor" stroke={false} />
         <Link href="/">
-          <button className="btn btn-link btn-sm">
+          <a role="button" className="btn btn-link btn-sm text-neutral-content">
             freesewing.dev
-          </button>
+          </a>
         </Link>
         </div>
         <div className={`theme-gradient h-2 w-full z-10 relative -mb-2 ${app.loading ? 'loading' : ''}`}></div>

packages/freesewing.dev/package.json

@@ -9,6 +9,7 @@
     "build": "next build",
     "export": "next build && next export",
     "start": "next start -p 3002",
+    "lint": "next lint",
     "serve": "pm2 start npm --name 'freesewing.dev' -- run start"
   },
   "dependencies": {
@@ -22,6 +23,7 @@
     "lodash.get": "^4.4.2",
     "lodash.orderby": "^4.6.0",
     "lodash.set": "^4.3.2",
+    "netlify-cli": "^8.4.2",
     "next": "latest",
     "react-markdown": "^7.1.1",
     "react-swipeable": "^6.2.0",
@@ -33,6 +35,7 @@
   },
   "devDependencies": {
     "autoprefixer": "^10.4.0",
+    "eslint-config-next": "12.0.7",
     "js-yaml": "^4.1.0",
     "postcss": "^8.4.4",
     "tailwindcss": "^3.0.1"

packages/freesewing.dev/pages/blog/[slug].js

@@ -5,6 +5,7 @@ import { posts } from 'site/prebuild/strapi.blog.en.js'
 import TimeAgo from 'react-timeago'
 import MdxWrapper from 'shared/components/wrappers/mdx'
 import Markdown from 'react-markdown'
+import Image from 'next/image'
 
 const strapi = "https://posts.freesewing.org"
 

packages/freesewing.dev/pages/blog/index.js

@@ -45,17 +45,18 @@ const Preview = ({ app, post }) => (
   </div>
 )
 
-export default (props) => {
+const BlogIndexPage = (props) => {
   const app = useApp()
 
   return (
     <Page app={app} title='FreeSewing Development Blog' slug='blog'>
       <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
         {Object.values(orderBy(posts, ['date'], ['desc']))
-          .map(post => <Preview app={app} post={post} />)
+          .map(post => <Preview app={app} post={post} key={post.slug}/>)
         }
       </div>
     </Page>
   )
 }
 
+export default BlogIndexPage

packages/freesewing.dev/pages/index.js

@@ -3,7 +3,7 @@ import useApp from 'site/hooks/useApp.js'
 import Logo from 'shared/components/logos/freesewing.js'
 import Popout from 'shared/components/popout.js'
 
-export default (props) => {
+const HomePage = (props) => {
   const app = useApp()
   return (
     <Page app={app} >
@@ -32,3 +32,4 @@ export default (props) => {
   )
 }
 
+export default HomePage

packages/freesewing.dev/pages/typography.js

@@ -3,11 +3,12 @@ import Page from 'shared/components/wrappers/page.js'
 import useApp from 'site/hooks/useApp.js'
 import Popout from 'shared/components/popout.js'
 
-export default (props) => {
+const TypographyPage = (props) => {
   const app = useApp()
+  const { updateNavigation } = app
 
   useEffect(() => {
-    app.updateNavigation(
+    updateNavigation(
       ['typography'],
       {
         __title: 'Typography',
@@ -15,12 +16,12 @@ export default (props) => {
         __slug: 'typography',
         __order: 'typography'
       })
-  }, [])
+  }, [updateNavigation])
 
   const p = (
     <p>
       This paragraph is here to show the vertical spacing between headings and paragraphs.
-      In addition, let's make it a bit longer so we can see the line height as the text wraps.
+      In addition, let&apos;s make it a bit longer so we can see the line height as the text wraps.
     </p>
   )
 
@@ -28,7 +29,7 @@ export default (props) => {
     <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's a good starting point for theme development.</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}
@@ -94,3 +95,5 @@ export default (props) => {
   )
 }
 
+export default TypographyPage
+