VSinerva/freesewing
1
0
Fork 0
Code Activity

everything passes lint

Browse source
This commit is contained in:
Enoch Riese 2022-12-03 11:25:02 -06:00
parent e28ca4ea86
commit 477a4d93f5
24 changed files with 304 additions and 303 deletions
Download patch file Download diff file Expand all files Collapse all files

3
designs/examples/src/index.mjs
View file

@ -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,

15
designs/ursula/src/elastic.mjs
View file

@ -1,19 +1,6 @@
import { gusset } from './gusset.mjs'
function ursulaElastic({
options,
Point,
points,
Path,
paths,
store,
utils,
units,
sa,
paperless,
macro,
part,
}) {
function ursulaElastic({ options, Point, points, Path, paths, store, utils, units, sa, part }) {
// Stretch utility method
store.set('elasticScale', utils.stretchToScale(options.elasticStretch))

9
packages/rehype-highlight-lines/src/index.mjs
View file

@ -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)

4
sites/dev/components/header.js
View file

@ -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'

2
sites/dev/components/help-us.js
View file

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

2
sites/dev/components/layouts/docs.js
View file

@ -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 />

3
sites/dev/components/navigation/primary.js
View file

@ -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 = (

2
sites/dev/components/wrappers/page.js
View file

@ -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) => {

2
sites/dev/pages/404.js
View file

@ -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 (

2
sites/dev/pages/contact.js
View file

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

6
sites/dev/pages/index.js
View file

@ -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>

1
sites/org/components/header.js
View file

@ -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'

39
sites/org/components/help-us.js
View file

@ -4,41 +4,49 @@ 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.
Either by <a href="https://discord.freesewing.org/" className="text-secondary">
If it looks ok, great! But if not, please let me know about it. Either by{' '}
<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.
They are those little preview images you see when you paste a link in Discord (for example).
I recently added a backend endpoint to auto-generate pretty (I hope) Open Graph images. They
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.
There are hundreds of pages on this website and checking them all one by one is not something
I see myself doing. But since you are here on this page, perhaps you could see if the image
above looks ok.
where that will not work. There are hundreds of pages on this website and checking them all
one by one is not something I see myself doing. But since you are here on this page, perhaps
you could see if the image 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

2
sites/org/components/layouts/bare.js
View file

@ -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)

26
sites/org/components/wrappers/layout.js
View file

@ -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 = ({
app,
title=false,
children=[],
search,
setSearch,
noSearch=false,
workbench=false,
AltMenu=null,
}) => {
const LayoutWrapper = ({ app, children = [], search, setSearch, noSearch = false }) => {
const startNavigation = () => {
app.startLoading()
// Force close of menu on mobile if it is open
@ -25,26 +15,28 @@ 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>
<div className="fixed top-0 left-0 w-full min-h-screen bg-neutral z-20 bg-opacity-70"></div>

23
sites/org/components/wrappers/page.js
View file

@ -10,24 +10,23 @@ import Feeds from 'site/components/feeds.js'
/* This component should wrap all page content */
const PageWrapper = ({
title="FIXME: No title set",
title = 'FIXME: No title set',
noSearch = false,
app = false,
layout = Docs,
crumbs = false,
children=[]
children = [],
}) => {
const swipeHandlers = useSwipeable({
onSwipedLeft: evt => (app.primaryMenu) ? app.setPrimaryMenu(false) : null,
onSwipedRight: evt => (app.primaryMenu) ? null : app.setPrimaryMenu(true),
trackMouse: true
onSwipedLeft: () => (app.primaryMenu ? app.setPrimaryMenu(false) : null),
onSwipedRight: () => (app.primaryMenu ? null : app.setPrimaryMenu(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 {...childProps}>{children}</Layout>
: children
}
{Layout ? <Layout {...childProps}>{children}</Layout> : children}
</LayoutWrapper>
</div>
)
}
export default PageWrapper

60
sites/org/pages/blog/index.js
View file

@ -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
className="bg-base-100 w-full aspect-video shadow flex flex-column items-end rounded-lg"
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 }) {
const posts = await fetch(
`${strapiHost}/blogposts?_locale=${locale}&_sort=date:DESC&dev_ne=true`
)
.then(response => response.json())
.then(data => data)
.catch(err => console.log(err))
export async function getStaticProps({ locale }) {
const posts = await fetch(`${strapiHost}/blogposts?_locale=${locale}&_sort=date:DESC&dev_ne=true`)
.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)),
},
}
}
}

23
sites/org/pages/community/index.js
View file

@ -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
list={contributors.map((item) => ({
img: item.avatar_url,
title: item.name,
href: item.profile
}))} />
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
list={patrons.map((item) => ({
img: item.img,
title: item.name,
slug: `/users/${item.username}`
}))} />
slug: `/users/${item.username}`,
}))}
/>
</div>
</div>
</Page>
@ -53,4 +55,3 @@ const CommunityPage = (props) => {
}
export default CommunityPage

17
sites/org/pages/designs/index.js
View file

@ -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 = [
...designs.accessories,
...designs.blocks,
...designs.garments,
].sort()
const allDesigns = [...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)),
},
}
}
}

14
sites/org/pages/docs/index.js
View file

@ -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 }) {
const { mdx, frontmatter } = await mdxLoader(
locale,
'org',
['docs']
)
export async function getStaticProps({ locale }) {
const { mdx, frontmatter } = await mdxLoader(locale, 'org', ['docs'])
const { title = 'FIXME: Please give this page a title' } = frontmatter
return {
props: {
mdx,
title,
},
}
}
}

37
sites/org/pages/index.js
View file

@ -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,16 +16,20 @@ 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:description" content={t('ograph:orgDesc')} key='description' />
<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:type" content="article" key="type" />
<meta property="og:description" content={t('ograph:orgDesc')} key="description" />
<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: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:locale" content={app.locale} key='locale' />
<meta property="og:site_name" content="freesewing.org" key='site' />
<meta property="og:url" content="https://freesewing.org/" key="url" />
<meta property="og:locale" content={app.locale} key="locale" />
<meta property="og:site_name" content="freesewing.org" key="site" />
</Head>
<section
style={{
@ -68,14 +72,18 @@ const HomePage = (props) => {
</div>
</h2>
</div>
<Icons app={app} active='/'
<Icons
app={app}
active="/"
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>
@ -91,8 +99,9 @@ const HomePage = (props) => {
</div>
<div className="max-w-7xl m-auto my-32">
<div className="px-8 text-base-content">
<Icons app={app}
active='/'
<Icons
app={app}
active="/"
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={`
@ -103,7 +112,6 @@ const HomePage = (props) => {
</div>
</div>
</div>
</Page>
)
}
@ -114,7 +122,6 @@ export async function getStaticProps({ locale }) {
return {
props: {
...(await serverSideTranslations(locale)),
},
}
}
}

45
sites/org/pages/showcase/designs/index.js
View file

@ -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
`}
>
{posts.slice(0, 10).map((post) => (
<PreviewTile
img={`${strapiHost}${post.image?.sizes?.medium?.url}`}
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'>
<div className={`
<Page app={app} title={t('showcase')} slug="showcase">
<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(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) => {
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)),
},
}
}
}

63
sites/org/pages/showcase/index.js
View file

@ -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)' }}
>
{posts.slice(0, 10).map((post) => (
<PreviewTile
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)
.sort()
.map((design) => (
<li key={design}>
<PageLink href={`/showcase/designs/${design}`} txt={design} className="capitalize" />
<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(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) => {
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)),
},
}
}
}

33
sites/org/pages/typography.js
View file

@ -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(
['typography'],
{
updateNavigation(['typography'], {
__title: 'Typography',
__linktitle: 'Typography',
__slug: 'typography',
__order: 'typography'
__order: 'typography',
})
}, [updateNavigation])
const p = (
<p>
This paragraph is here to show the vertical spacing between headings and paragraphs.
In addition, let&apos;s make it a bit longer so we can see the line height as the text wraps.
This paragraph is here to show the vertical spacing between headings and paragraphs. In
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}
<h4>This is h4</h4>{p}
<h5>This is h5</h5>{p}
<h6>This is h6</h6>{p}
<h3>This is h3</h3>
{p}
<h4>This is h4</h4>
{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