everything passes lint
This commit is contained in:
Enoch Riese
parent
e28ca4ea86
commit
477a4d93f5
24 changed files with 304 additions and 303 deletions
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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))
|
||||
|
||||
|
|
@ -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))
|
||||
.line(new Point(-10,15))
|
||||
.line(new Point(200,15))
|
||||
.line(new Point(200,-10))
|
||||
.move(new Point(-10, -10))
|
||||
.line(new Point(-10, 15))
|
||||
.line(new Point(200, 15))
|
||||
.line(new Point(200, -10))
|
||||
.close()
|
||||
.setClass('hidden')
|
||||
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
|
|||
|
|
@ -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 = (
|
||||
|
|
|
|||
|
|
@ -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) => {
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ const No = () => (
|
|||
</span>
|
||||
)
|
||||
|
||||
const ContactPage = (props) => {
|
||||
const ContactPage = () => {
|
||||
const app = useApp()
|
||||
const title = 'Contact information'
|
||||
|
||||
|
|
|
|||
|
|
@ -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'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,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'
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
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,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)
|
||||
|
||||
|
|
|
|||
|
|
@ -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,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>
|
||||
<div className="fixed top-0 left-0 w-full min-h-screen bg-neutral z-20 bg-opacity-70"></div>
|
||||
`}
|
||||
>
|
||||
<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>
|
||||
</>
|
||||
)}
|
||||
<Footer app={app} />
|
||||
|
|
|
|||
|
|
@ -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= ({
|
||||
title="FIXME: No title set",
|
||||
noSearch=false,
|
||||
app=false,
|
||||
layout=Docs,
|
||||
crumbs=false,
|
||||
children=[]
|
||||
const PageWrapper = ({
|
||||
title = 'FIXME: No title set',
|
||||
noSearch = false,
|
||||
app = false,
|
||||
layout = Docs,
|
||||
crumbs = false,
|
||||
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
|
||||
|
||||
|
|
|
|||
|
|
@ -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={{
|
||||
backgroundImage: `url(${strapi}${post.image.sizes.medium.url})`,
|
||||
backgroundSize: 'cover',
|
||||
}}>
|
||||
<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)),
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 => ({
|
||||
img: item.avatar_url,
|
||||
title: item.name,
|
||||
href: item.profile
|
||||
}))} />
|
||||
<Worm
|
||||
list={contributors.map((item) => ({
|
||||
img: item.avatar_url,
|
||||
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 => ({
|
||||
img: item.img,
|
||||
title: item.name,
|
||||
slug: `/users/${item.username}`
|
||||
}))} />
|
||||
<Worm
|
||||
list={patrons.map((item) => ({
|
||||
img: item.img,
|
||||
title: item.name,
|
||||
slug: `/users/${item.username}`,
|
||||
}))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Page>
|
||||
|
|
@ -53,4 +55,3 @@ const CommunityPage = (props) => {
|
|||
}
|
||||
|
||||
export default CommunityPage
|
||||
|
||||
|
|
|
|||
|
|
@ -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)),
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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']
|
||||
)
|
||||
const { title='FIXME: Please give this page a title' } = frontmatter
|
||||
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,
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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: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={{
|
||||
backgroundImage: "url('/img/splash.jpg')",
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: '40% 50%',
|
||||
}}
|
||||
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">
|
||||
<span> </span>
|
||||
<div>
|
||||
<div className="flex flex-col items-end max-w-4xl">
|
||||
<h1
|
||||
className={`
|
||||
<section
|
||||
style={{
|
||||
backgroundImage: "url('/img/splash.jpg')",
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: '40% 50%',
|
||||
}}
|
||||
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">
|
||||
<span> </span>
|
||||
<div>
|
||||
<div className="flex flex-col items-end max-w-4xl">
|
||||
<h1
|
||||
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' }}
|
||||
>
|
||||
FreeSewing
|
||||
<span className="font-light">.org</span>
|
||||
</h1>
|
||||
<h2
|
||||
className={`
|
||||
style={{ textShadow: '1px 1px 3px #000', color: 'white' }}
|
||||
>
|
||||
FreeSewing
|
||||
<span className="font-light">.org</span>
|
||||
</h1>
|
||||
<h2
|
||||
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' }}
|
||||
>
|
||||
<div>{t('common:sloganCome')}</div>
|
||||
<div className="inline-block mt-2">
|
||||
{t('common:sloganStay')}
|
||||
<div className="theme-gradient h-1 lg:h-2" />
|
||||
</div>
|
||||
</h2>
|
||||
</div>
|
||||
<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={`
|
||||
style={{ textShadow: '1px 1px 3px #000', color: 'white' }}
|
||||
>
|
||||
<div>{t('common:sloganCome')}</div>
|
||||
<div className="inline-block mt-2">
|
||||
{t('common:sloganStay')}
|
||||
<div className="theme-gradient h-1 lg:h-2" />
|
||||
</div>
|
||||
</h2>
|
||||
</div>
|
||||
<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',
|
||||
}}
|
||||
/>
|
||||
</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>
|
||||
linkStyle={{
|
||||
textShadow:
|
||||
'2px 2px 2px #000, -2px 2px 2px #000, -2px -2px 2px #000, 2px -2px 2px #000',
|
||||
}}
|
||||
/>
|
||||
</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">
|
||||
<Popout fixme>Create homepage</Popout>
|
||||
</div>
|
||||
<div className="max-w-7xl m-auto my-32">
|
||||
<div className="px-8 text-base-content">
|
||||
<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={`
|
||||
<div className="max-w-xl m-auto my-32 px-6">
|
||||
<Popout fixme>Create homepage</Popout>
|
||||
</div>
|
||||
<div className="max-w-7xl m-auto my-32">
|
||||
<div className="px-8 text-base-content">
|
||||
<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-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)),
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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}`}
|
||||
slug={post.slug}
|
||||
title={post.title}
|
||||
key={post.slug}
|
||||
/>)}
|
||||
`}
|
||||
>
|
||||
{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)),
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
img={`${strapiHost}${post.image?.sizes?.medium?.url}`}
|
||||
slug={post.slug}
|
||||
title={post.title}
|
||||
key={post.slug}
|
||||
/>)}
|
||||
`}
|
||||
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 => (
|
||||
<li key={design}>
|
||||
<PageLink href={`/showcase/designs/${design}`} txt={design} className="capitalize" />
|
||||
</li>
|
||||
))}
|
||||
{Object.keys(designs)
|
||||
.sort()
|
||||
.map((design) => (
|
||||
<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(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)),
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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'],
|
||||
{
|
||||
__title: 'Typography',
|
||||
__linktitle: 'Typography',
|
||||
__slug: 'typography',
|
||||
__order: 'typography'
|
||||
})
|
||||
updateNavigation(['typography'], {
|
||||
__title: 'Typography',
|
||||
__linktitle: 'Typography',
|
||||
__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.
|
||||
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.
|
||||
</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'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
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue