wip(org): Tweaks to the design & showcase pages

packages/freesewing.org/components/design.js

@@ -29,13 +29,6 @@ const Design = ({ design }) => {
     code="Anonymous",
     difficulty=3,
   } = configs[design]
-  const designer = configs[design].design || "Anonymous"
-  const people = new Set()
-  for (const contrib of ['design', 'code']) {
-    if (Array.isArray(configs[design][contrib])) {
-      for (const person of configs[design][contrib]) people.add(person)
-    } else people.add(configs[design][contrib])
-  }
 
   const [examples, setExamples] = useState([])
 
@@ -45,7 +38,7 @@ const Design = ({ design }) => {
       `&_where[_or][0][design1_eq]=${design}` +
       `&_where[_or][1][design2_eq]=${design}` +
       `&_where[_or][2][design3_eq]=${design}` +
-      `&_limit=6`
+      `&_limit=5`
     await fetch(url)
       .then(response => response.json())
       .then(data => setExamples(data.map(post => ({
@@ -59,8 +52,7 @@ const Design = ({ design }) => {
   return (
     <div className={`
       my-8
-      aspect-[9/16]
+      w-full sm:w-96
-      w-96
       shadow-lg
       border
       rounded-lg
@@ -68,12 +60,8 @@ const Design = ({ design }) => {
       text-center
       overflow-clip
       relative
-      `} style={{
+      `}
-      backgroundImage: `url('/img/designs/${design}.png')`,
+    >
-      backgroundSize: 'contain',
-      backgroundPosition: '50% 50%',
-      backgroundRepeat: 'no-repeat',
-    }}>
       {/* Link over the entire card */}
       <Link href={`/designs/${design}`}>
         <a className="absolute top-0 right-0 w-full h-full" title={t(`${design}.t`)} />
@@ -86,21 +74,20 @@ const Design = ({ design }) => {
           <Difficulty score={difficulty} />
         </div>
       </div>
-      {/* People who did the Design/Code */}
+      <h6 className="text-base-content m-0 pt-4 pl-4 text-left capitalize">{design}</h6>
-      <div className="flex flex-row items-center justify-start max-w-2/3 pt-2 pl-1">
+      <div className={`grow aspect-[9/16] -mt-4
-        <span className="text-base-content font-sm talic ml-2 p-2 bg-base-100 rounded-lg bg-opacity-60 p-0 m-0 px-1">
+        `} style={{
-          {[...people].map(person => person).join(' / ')}
+        backgroundImage: `url('/img/designs/${design}.png')`,
-        </span>
+        backgroundSize: 'contain',
-      </div>
+        backgroundPosition: '50% 50%',
-      <div className="grow"></div>
+        backgroundRepeat: 'no-repeat',
-      <div className="bg-neutral bg-opacity-50 p-4 text-neutral-content" style={{
-        textShadow: "1px 1px 2px black",
-        color: 'white'
       }}>
-        <h2 className="text-neutral-content m-0 p-0">{t(`${design}.t`)}</h2>
-        <div className="text-neutral-content m-0 p-0 font-bold text-lg">{t(`${design}.d`)}</div>
       </div>
-      <div className="my-4 z-10">
+      <div className="px-4 text-base-content">
+        <h2 className="text-base-content m-0 p-0 z-30">{t(`${design}.t`)}</h2>
+        <div className="text-base-content m-0 p-0 font-bold text-lg">{t(`${design}.d`)}</div>
+      </div>
+      <div className="py-4 z-10">
         <Worm list={examples} fixed/>
       </div>
     </div>

packages/freesewing.org/pages/designs/index.js

@@ -2,6 +2,7 @@ import Page from 'site/components/wrappers/page.js'
 import useApp from 'site/hooks/useApp.js'
 import Popout from 'shared/components/popout.js'
 import Link from 'next/link'
+import PageLink from 'shared/components/page-link'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import { useTranslation } from 'next-i18next'
 import designs from 'shared/config/designs.json'
@@ -18,11 +19,20 @@ const DesignsPage = (props) => {
     ...designs.accessories,
     ...designs.blocks,
     ...designs.garments,
-  ]
+  ].sort()
 
   return (
     <Page app={app} title={t('designs')}>
-      <div className="flex flex-row flex-wrap gap-4">
+      <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 => (
+            <li key={design}>
+              <PageLink href={`/designs/${design}`} txt={design} className="capitalize" />
+            </li>
+          ))}
+        </ul>
+      </div>
+      <div className="flex flex-row flex-wrap justify-around px-8 lg:gap-4">
         {allDesigns.map(design => <Design key={design} design={design} />)}
       </div>
     </Page>

packages/freesewing.org/pages/showcase/index.js

@@ -13,7 +13,7 @@ export const PreviewTile = ({ img, slug, title }) => (
     style={{ backgroundImage: `url(${img})`, backgroundSize: 'cover' }}
     className={`
       rounded-full inline-block border-base-100 shrink-0
-      w-42 h-42 -ml-8 border-8
+      w-40 h-40 -ml-8 border-8
       md:w-56 md:h-56 md:-ml-12
       theme-gradient
     `}
@@ -30,9 +30,11 @@ export const PreviewTile = ({ img, slug, title }) => (
 const DesignPosts = ({ design, posts }) => {
   const { t } = useTranslation(['patterns'])
   return (
-    <div className='py-8'>
+    <div className='py-2'>
-      <h2 className="bg-clip-text bg-success m-0">
+      <h2>
-        <PageLink href={`/showcase/designs/${design}`} txt={t(`${design}.t`)} />
+        <Link href={`/showcase/designs/${design}`}>
+          <a className="hover:text-secondary-focus hover:underline">{t(`${design}.t`)}</a>
+        </Link>
       </h2>
       <div className={`
         flex flex-row overflow-visible
@@ -64,6 +66,15 @@ const ShowcaseIndexPage = (props) => {
 
   return (
     <Page app={app} title={t('showcase')} slug='showcase'>
+      <div className="max-w-4xl m-auto text-center px-8">
+        <ul className="flex flex-row flex-wrap gap-4 items-center justify-center leading-tight text-xl">
+          {Object.keys(designs).sort().map(design => (
+            <li key={design}>
+              <PageLink href={`/showcase/design/${design}`} txt={design} className="capitalize" />
+            </li>
+          ))}
+        </ul>
+      </div>
       <div className={`
         px-8 2xl:pl-16 overflow-visible overscroll-x-hidden
         max-w-sm

packages/freesewing.shared/components/pinked-ribbon.js

@@ -18,7 +18,7 @@ const topSvg = (color) => svg(color, "M0,0 L0,2 L 5,7 L 10,2 L10,0 z", 1)
 const bottomSvg = (color) => svg(color, "M0,8 L0,6 L 5,1 L 10,6 L10,8 z", -1)
 const style = { backgroundRepeat: 'repeat-x' }
 
-const PinkedRibbon = ({ top='base', bottom='dark', loading=false, theme }) => {
+const PinkedRibbon = ({ top='base', bottom='dark', loading=false, theme='light' }) => {
 
   if (top === 'base') top = themes[theme].base
   else if (top === 'dark') top = themes[theme].dark