VSinerva/freesewing
1
0
Fork 0
Code Activity

wip(org): Started reworking the home page

Browse source
This commit is contained in:
joostdecock 2023-07-27 21:03:49 +02:00
parent 3b2d0c95bf
commit 8ec48e7db8
17 changed files with 212 additions and 252 deletions
Download patch file Download diff file Expand all files Collapse all files

7
sites/org/components/footer/de.yaml
View file

@ -1,7 +0,0 @@
cc: Content on FreeSewing.org is available under a Creative Commons license
mit: The FreeSewing source code is available on Github under the MIT license
sponsors: FreeSewing is sponsored by these awesome companies
algolia: Suche powered by Algolia
crowdin: Übersetzung powered by Crowdin
bugsnag: Error handling by Bugsnag
vercel: Builds & Hosting by Vercel

7
sites/org/components/footer/en.yaml
View file

@ -1,7 +0,0 @@
cc: Content on FreeSewing.org is available under a Creative Commons license
mit: The FreeSewing source code is available on Github under the MIT license
sponsors: FreeSewing is sponsored by these awesome companies
algolia: Search powered by Algolia
crowdin: Translation powered by Crowdin
bugsnag: Error handling by Bugsnag
vercel: Builds & Hosting by Vercel

7
sites/org/components/footer/es.yaml
View file

@ -1,7 +0,0 @@
cc: Content on FreeSewing.org is available under a Creative Commons license
mit: The FreeSewing source code is available on Github under the MIT license
sponsors: FreeSewing is sponsored by these awesome companies
algolia: Búsqueda con Algolia
crowdin: Traducción realizada por Crowdin
bugsnag: Error handling by Bugsnag
vercel: Builds & Hosting by Vercel

7
sites/org/components/footer/fr.yaml
View file

@ -1,7 +0,0 @@
cc: Content on FreeSewing.org is available under a Creative Commons license
mit: The FreeSewing source code is available on Github under the MIT license
sponsors: FreeSewing is sponsored by these awesome companies
algolia: Recherche alimentée par Algolia
crowdin: Traduction optimisée par Crowdin
bugsnag: Error handling by Bugsnag
vercel: Builds & Hosting by Vercel

158
sites/org/components/footer/index.mjs
View file

@ -1,158 +0,0 @@
import Link from 'next/link'
import { FreeSewingLogo } from 'shared/components/logos/freesewing.mjs'
import { OsiLogo } from 'shared/components/logos/osi.mjs'
import { CCLogo } from 'shared/components/logos/cc.mjs'
import { CCByLogo } from 'shared/components/logos/cc-by.mjs'
import { Ribbon } from 'shared/components/ribbon.mjs'
import { WordMark } from 'shared/components/wordmark.mjs'
import { useTranslation } from 'next-i18next'
import { useTheme } from 'shared/hooks/use-theme.mjs'
import { freeSewingConfig } from 'site/freesewing.config.mjs'
import {
HelpIcon,
DiscordIcon,
FacebookIcon,
GithubIcon,
InstagramIcon,
RedditIcon,
TwitterIcon,
} from 'shared/components/icons.mjs'
const icon = { className: 'w-8 lg:w-12 h-8 lg:h-12' }
const social = {
Discord: {
icon: <DiscordIcon {...icon} />,
href: 'https://discord.freesewing.org/',
},
Instagram: {
icon: <InstagramIcon {...icon} />,
href: 'https://instagram.com/freesewing_org',
},
Facebook: {
icon: <FacebookIcon {...icon} />,
href: 'https://www.facebook.com/groups/627769821272714/',
},
Github: {
icon: <GithubIcon {...icon} />,
href: 'https://github.com/freesewing',
},
Reddit: {
icon: <RedditIcon {...icon} />,
href: 'https://www.reddit.com/r/freesewing/',
},
Twitter: {
icon: <TwitterIcon {...icon} />,
href: 'https://twitter.com/freesewing_org',
},
}
export const ns = ['footer']
/*
* Named exports are better than default exports
*/
export const Footer = ({ app }) => {
const { t } = useTranslation(ns)
const { theme } = useTheme()
return (
<footer className="bg-neutral">
<Ribbon loading={app.state.loading} theme={theme} />
<div className="grid grid-cols-1 lg:grid-cols-4 py-12 2xl:py-20 text-neutral-content px-4">
{/* First col - CC & MIT */}
<div className="mb-20 order-1 mt-20 2xl:mt-0 2xl:mb-0">
<div className="max-w-md m-auto">
<div>
<CCLogo className="w-64 m-auto" />
</div>
<div className="flex flex-row gap-2 justify-center items-center mt-8">
<CCByLogo className="w-8 lg:w-12" />
<p className="text-neutral-content text-right basis-4/5 lg:basis-3/4 leading-5">
{t('cc')}
</p>
</div>
<div className="flex flex-row gap-2 justify-center items-center mt-4">
<OsiLogo className="w-8 lg:w-12" />
<p className="text-neutral-content text-right basis-4/5 lg:basis-3/4 leading-5">
<a href={freeSewingConfig.monorepo} className="hover:pointer hover:underline px-1">
{t('mit')}
</a>
</p>
</div>
</div>
</div>
{/* Second col - Social & Sponsors */}
<div className="lg:col-span-2 -order-2 2xl:order-2 px-4 lg:px-0">
{/* Social icons */}
<div className="w-full sm:w-auto flex flex-row flex-wrap gap-4 lg:gap-8 items-center justify-center">
<Link
href="/contact"
className="hover:text-secondary hover:-mt-2 transition-all"
title="Contact information"
>
<HelpIcon {...icon} />
</Link>
{Object.keys(social).map((item) => (
<Link
key={item}
href={social[item].href}
className="hover:text-secondary hover:-mt-2 transition-all"
title={item}
>
{social[item].icon}
</Link>
))}
</div>
{/* Sponsors */}
<div className="border rounded-xl p-8 border-dashed border-base-100/25 mt-20">
<p className="text-center text-neutral-content leading-5">
{t('sponsors')}
<br />
</p>
<div className="py-4 flex flex-row gap-8 flex-wrap 2xl:flex-nowrap justify-around text-neutral-content">
<a title="Search powered by Algolia" href="https://www.algolia.com/">
<img
src="/brands/algolia.svg"
className="h-12 aspect-auto"
alt="Search powered by Algolia"
/>
</a>
<a title="Error handling by Bugsnag" href="https://www.bugsnag.com/">
<img src="/brands/bugsnag.svg" className="h-12" alt="Error handling by bugsnag" />
</a>
<a title="Translation powered by Crowdin" href="https://www.crowdin.com/">
<img
src="/brands/crowdin.svg"
alt="Translation powered by Crowdin"
className="h-12"
/>
</a>
<a
title="Builds & hosting by Vercel"
href="https://www.vercel.com/?utm_source=freesewing&utm_campaign=oss"
>
<img src="/brands/vercel.svg" alt="Builds & Hosting by Vercel" className="h-12" />
</a>
</div>
</div>
</div>
{/* Col 3 - Logo & Slogan */}
<div className="w-full 4xl:w-auto xl:max-w-md mb-8 text-center order-3 mt-0 lg:mt-20 2xl:mt-0 2xl:mb-0">
<div className="max-w-md m-auto">
<FreeSewingLogo stroke="none" size={164} className="w-40 lg:w-64 m-auto m-auto" />
<h5 className="lg:text-3xl mt-4">
<WordMark />
</h5>
<p className="bold text-neutral-content text-normal lg:text-xl leading-5">
Come for the sewing patterns
<br />
Stay for the community
</p>
</div>
</div>
</div>
</footer>
)
}

7
sites/org/components/footer/nl.yaml
View file

@ -1,7 +0,0 @@
cc: Inhoud op FreeSewing.org is beschikbaar onder een Creative Commons licentie
mit: De broncode van FreeSewing is beschikbaar op Github onder de MIT-licentie
sponsors: FreeSewing wordt gesponsord door deze geweldige bedrijven
algolia: Zoekfunctie door Algolia
crowdin: Vertaalsoftware door Crowdin
bugsnag: Fout rapportage door Bugsnag
vercel: Builds & Hosting door Vercel

7
sites/org/components/footer/uk.yaml
View file

@ -1,7 +0,0 @@
cc: Content on FreeSewing.org is available under a Creative Commons license
mit: The FreeSewing source code is available on Github under the MIT license
sponsors: FreeSewing is sponsored by these awesome companies
algolia: Пошук за допомогою Algolia
crowdin: Переклад зроблено за допомогою Crowdin
bugsnag: Error handling by Bugsnag
vercel: Builds & Hosting by Vercel

242
sites/org/pages/index.mjs
View file

@ -1,13 +1,140 @@
// Dependencies
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
//import { useTranslation } from 'next-i18next'
import Head from 'next/head'
import { nsMerge } from 'shared/utils.mjs'
// Hooks
import { useState, useEffect } from 'react'
import { useTranslation } from 'next-i18next'
// Components
import { PageWrapper } from 'shared/components/wrappers/page.mjs'
import Head from 'next/head'
import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
import { Popout } from 'shared/components/popout/index.mjs'
import { PageLink } from 'shared/components/page-link.mjs'
import { BareLayout } from 'site/components/layouts/bare.mjs'
import { ForceAccountCheck } from 'shared/components/account/force-account-check.mjs'
import { DownIcon } from 'shared/components/icons.mjs'
import { logoPath } from 'shared/components/logos/freesewing.mjs'
const ns = nsMerge(pageNs, 'common')
const Animation = ({
className = 'w-6 h-6',
stroke = 2,
slogan1, slogan2
}) => (
<svg
xmlns="http://www.w3.org/2000/svg"
fill='none'
viewBox="0 0 25 25"
strokeWidth={stroke}
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
className={className + ' icon'}
stroke="currentColor"
>
<animate
attributeName="viewBox"
from="0 0 25 25"
to="0 10 25 7"
begin="1.8s"
dur="0.3s"
fill="freeze"
/>
<clipPath id="logo">
<path d={logoPath} stroke="none" fill="none" transform="translate(-0.5,0)" />
</clipPath>
<g>
<g>
<path d='M 20 0 l -10,1 l 10 1 l -11 1 l 13 1 l -15 1 l 16 1 l -16 1 l 15 1 l -15 1 l 16 1 l -16 1 l 17 1 l-16 1 l15 1 l -18 1.3 l 19 0.2 l -15 1 l 6 0.5 l -5 0.5 l 5 0 l 9 -0.5 l -3 1.2 l 2 1 l -3 0 l 2 2 l -3 -0.5 l 1 2 l -3 -1 l1 2 l-3 -1 l -1.5 1.5 l-2 -1.5 l-3 1 l-5 -7 l 2 -2 l-3 -1 l 2 -2'
clipPath="url(#logo)" strokeOpacity="1" strokeDasharray="330 400">
<animate
attributeName="stroke-dashoffset"
from="330"
to="0"
dur="0.8s"
fill="freeze"
/>
<animate
attributeName="stroke-width"
begin="0.8s"
from="0.3"
to="3"
dur="0.6s"
fill="freeze"
/>
<animateTransform
attributeName="transform"
attributeType="XLM"
type="scale"
begin="1.3s"
from="1"
to="0.3"
dur="0.2s"
fill="freeze"
/>
</path>
<animateTransform
attributeName="transform"
attributeType="XLM"
type="translate"
begin="1.3s"
from="0,0"
to="8,2"
dur="0.2s"
fill="freeze"
/>
</g>
<text x="12.5" y="14" stroke="none" fill="currentColor" textAnchor='middle' opacity="0" style={{
fontSize: 4.2,
fontWeight: 'bold',
letterSpacing: '-0.007rem',
}}>FreeSewing
<animate
attributeName="opacity"
begin="1.4s"
from="0"
to="1"
dur="0.3s"
fill="freeze"
/>
</text>
<text x="12.5" y="15.25" stroke="none" fill="currentColor" textAnchor='middle' opacity="0" style={{
fontSize: 1.4,
fontWeight: 'bold',
letterSpacing: '-0.005rem',
}}>{slogan1}
<animate
attributeName="opacity"
begin="2.4s"
from="0"
to="1"
dur="0.2s"
fill="freeze"
/>
</text>
<text x="12.5" y="16.5" stroke="none" fill="currentColor" textAnchor='middle' opacity="0" style={{
fontSize: 1.4,
fontWeight: 'bold',
letterSpacing: '-0.005rem',
}}>{slogan2}
<animate
attributeName="opacity"
begin="3s"
from="0"
to="1"
dur="0.2s"
fill="freeze"
/>
</text>
</g>
</svg>
)
const BoldLink = ({ href, children }) => (
<a href={href} className="font-bold underline hover:decoration-4">
{children}
</a>
)
/*
* Each page MUST be wrapped in the PageWrapper component.
@ -15,45 +142,78 @@ import { ForceAccountCheck } from 'shared/components/account/force-account-check
* when path and locale come from static props (as here)
* or set them manually.
*/
const HomePage = ({ page }) => (
<PageWrapper {...page} layout={BareLayout}>
<Head>
<title>Welcome to FreeSewing.org</title>
</Head>
<div>
<div className="max-w-xl m-auto my-32 px-6">
<ForceAccountCheck />
<Popout fixme>
Create homepage. Meanwhile check <PageLink href="/signup" txt="the signup flow" />
</Popout>
<h2>What is FreeSewing?</h2>
<small>(by ChatGPT)</small>
<p>
Freesewing is an open-source pattern making software that allows users to generate custom
sewing patterns based on their own measurements. It is designed to be flexible and
customizable, and can be used to create a wide range of garments, from simple t-shirts and
skirts to more complex dresses and jackets.
</p>
<p>
Freesewing is available for free, and users can access a wide range of pre-made patterns
or create their own from scratch. The software is designed to be easy to use, with an
intuitive interface that guides users through the process of creating a pattern
step-by-step.
</p>
<p>
In addition to the pattern making software, freesewing also has an active online community
of sewists and pattern makers who share tips, techniques, and advice on all aspects of
sewing. The community also collaborates on creating new patterns and improving existing
ones, and users can contribute their own patterns to the project as well.
</p>
<p>
Overall, freesewing is a powerful tool for anyone interested in sewing and pattern making,
whether they are seasoned professionals or beginners just starting out.
</p>
const HomePage = ({ page }) => {
const [ready, setReady] = useState(false)
const { t } = useTranslation(ns)
useEffect(() => {
setTimeout(() => setReady(true), 4000)
},[])
return (
<PageWrapper {...page} layout={BareLayout}>
<ForceAccountCheck />
<Head>
<title>Welcome to FreeSewing.org</title>
</Head>
<div className={`m-0 p-0 w-full transition-all duration-300 ${ready ? '-translate-y-full h-1 opacity-0' : 'h-screen'}`}>
<div className="flex flex-col items-center justify-between h-screen mt-4 lg:mt-12 max-w-md m-auto pb-32">
<span/>
<Animation className='w-full' stroke={0.3} slogan1={t('common:slogan1')} slogan2={t('common:slogan2')}/>
<DownIcon className="w-12 h-12 animate-bounce"/>
</div>
</div>
</div>
</PageWrapper>
)
<div className="max-w-7xl m-auto px-0 my-24">
<div className="flex flex-col gap-8 md:grid md:grid-cols-2 md:gap-4 mt-12 md:px-4">
<div className="p-1 bg-gradient-to-tr from-accent to-primary rounded-none md:rounded-xl md:shadow -mx-2 px-2 md:mx-auto md:px-1 flex flex-col">
<div className="bg-base-100 px-4 md:px-8 py-10 rounded-none md:rounded-lg grow">
<h2 className="mb-4">What is FreeSewing?</h2>
<p className="font-medium">
FreeSewing is open source software to generate made-to-measure sewing patterns, loved by home sewers and fashion entrepreneurs alike.
</p>
<p className="font-medium">
FreeSewing.org makes this software available to you as an online tool with unmatched custimization and flexibility.
We have over 50 designs, and regularly add new ones.
You can pick any design and generate a pattern to your exact measurements.
</p>
<p className="font-medium">
Because made-to-measure lies at the heart of what we do, we strongly suggest you take accurate measurements.
Industry sizing is a bunch of lies. Join the slow fashion revolution and enjoy clothes that fit you.
</p>
</div>
</div>
<div className="p-1 bg-gradient-to-tr from-info to-neutral rounded-none md:rounded-xl md:shadow -mx-2 px-2 md:mx-auto md:px-1 flex flex-col">
<div className="bg-base-100 px-4 md:px-8 py-10 rounded-none md:rounded-lg grow">
<h2 className="mb-4">What is FreeSewing not?</h2>
<p className="font-medium">
FreeSewing is not a company. We do not sell anything. We do not have staff or employees. We do not have an office. We do not get paid.
</p>
<p className="font-medium">
Our websites do not contain any advertising.
We do not track you or sell your personal data. We do not violate your privacy.
</p>
<p className="font-medium">
FreeSewing is not gendered. We do not exclude or discriminate. Nor do we tolerate discrimination in our community.
</p>
<p className="font-medium">
FreeSewing is not perfect. But we try our best.
When we come up short, we will not be upset when you point it out.
<br />
In fact, that is how we got to where we are today.
</p>
</div>
</div>
</div>
</div>
</PageWrapper>
)
}
export default HomePage

1
sites/shared/components/footer/de.yaml
View file

@ -1 +0,0 @@
sponsors: bla bla

1
sites/shared/components/footer/en.yaml
View file

@ -1 +0,0 @@
sponsors: bla bla

1
sites/shared/components/footer/es.yaml
View file

@ -1 +0,0 @@
sponsors: bla bla

1
sites/shared/components/footer/fr.yaml
View file

@ -1 +0,0 @@
sponsors: bla bla

11
sites/shared/components/footer/index.mjs
View file

@ -3,6 +3,7 @@ import orderBy from 'lodash.orderby'
import { NavigationContext } from 'shared/context/navigation-context.mjs'
// Hooks
import { useContext } from 'react'
import { useTranslation } from 'next-i18next'
// Components
import Link from 'next/link'
import { Ribbon } from 'shared/components/ribbon.mjs'
@ -10,13 +11,15 @@ import { WordMark } from 'shared/components/wordmark.mjs'
import { SocialIcons } from 'shared/components/social/icons.mjs'
import { Sponsors, ns as sponsorsNs } from 'shared/components/sponsors/index.mjs'
import { FreeSewingIcon } from 'shared/components/icons.mjs'
export const ns = ['footer', ...sponsorsNs]
export const ns = ['common', ...sponsorsNs]
const onlyFooterLinks = (tree) => orderBy(tree, ['t'], ['asc']).filter((entry) => entry.f)
export const Footer = () => {
// Grab siteNav from the navigation context
const { siteNav } = useContext(NavigationContext)
const { t } = useTranslation(ns)
return (
<footer className="bg-neutral">
@ -26,10 +29,10 @@ export const Footer = () => {
<div className="mt-4">
<WordMark />
</div>
<p className="text-neutral-content text-normal leading-5 text-center -mt-2 opacity-70">
Come for the sewing patterns
<p className="text-neutral-content text-normal leading-5 text-center -mt-2 opacity-70 font-normal">
{t('common:slogan1')}
<br />
Stay for the community
{t('common:slogan2')}
</p>
</div>

1
sites/shared/components/footer/nl.yaml
View file

@ -1 +0,0 @@
sponsors: bla bla

1
sites/shared/components/footer/uk.yaml
View file

@ -1 +0,0 @@
sponsors: бла-бла-бла.

2
sites/shared/i18n/common/en.yaml
View file

@ -1,3 +1,5 @@
freesewing: FreeSewing
sitemap: Sitemap
youAreHere: You are here
slogan1: Come for the sewing patterns
slogan2: Stay for the community

3
sites/shared/i18n/common/nl.yaml
View file

@ -1,3 +1,4 @@
freesewing: FreeSewing
sitemap: Sitemap
youAreHere: U bevindt zich hier
slogan1: Kom voor de naaipatronen op maat
slogan2: Blijf voor je nieuwe naai-maten