2022-05-11 17:41:24 +02:00
import Page from 'site/components/wrappers/page.js'
2021-12-11 14:04:05 +01:00
import useApp from 'site/hooks/useApp.js'
2021-12-31 15:35:04 +01:00
import Head from 'next/head'
2021-12-31 13:44:16 +01:00
import HelpUs from 'site/components/help-us.js'
2021-12-28 13:20:42 +01:00
import Link from 'next/link'
2022-02-13 16:00:00 +01:00
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
2022-05-11 17:41:24 +02:00
import Layout from 'site/components/layouts/bare'
2022-05-12 10:27:42 +02:00
import Navigation , { Icons } from 'shared/components/navigation/primary'
2022-07-02 22:56:22 +02:00
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'
2021-12-10 09:56:19 +01:00
2021-12-27 09:55:52 +01:00
const HomePage = ( props ) => {
2021-12-11 14:04:05 +01:00
const app = useApp ( )
2021-12-10 09:56:19 +01:00
return (
2022-05-11 17:41:24 +02:00
< Page app = { app } title = "Welcome to FreeSewing.dev" layout = { Layout } >
2021-12-31 15:35:04 +01:00
< Head >
< meta property = "og:title" content = "FreeSewing.dev" key = "title" / >
< meta property = "og:type" content = "article" key = 'type' / >
2022-01-03 18:21:43 +01:00
< meta property = "og:description" content = "Documentation and tutorials for FreeSewing developers and contributors. Plus our Developers Blog" key = 'description' / >
2021-12-31 15:35:04 +01:00
< meta property = "og:article:author" content = 'Joost De Cock' key = 'author' / >
2021-12-31 16:10:44 +01:00
< meta property = "og:image" content = "https://canary.backend.freesewing.org/og-img/en/dev/" key = 'image' / >
2021-12-31 15:35:04 +01:00
< 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.dev/" key = 'url' / >
< meta property = "og:locale" content = "en_US" key = 'locale' / >
< meta property = "og:site_name" content = "freesewing.dev" key = 'site' / >
< / H e a d >
2022-05-11 17:41:24 +02:00
< section
style = { {
backgroundImage : "url('/img/splash.jpg')" ,
backgroundSize : 'cover' ,
2022-05-12 10:27:42 +02:00
backgroundPosition : '40% 50%' ,
2022-05-11 17:41:24 +02:00
} }
2022-05-12 10:27:42 +02:00
className = "m-0 p-0 shadow drop-shadow-lg w-full mb-8"
2022-05-11 17:41:24 +02:00
>
2022-05-12 10:27:42 +02:00
< div className = "mx-auto px-8 flex flex-col items-center justify-center min-h-screen lg:min-h-0 lg:py-96" >
< div className = "flex flex-col items-end max-w-4xl" >
< h1
className = { `
text - 4 xl font - black text - right px - 4
sm : text - 6 xl
md : text - 7 xl px - 6
lg : px - 8
bg - secondary
` }
style = { { textShadow : '1px 1px 3px #000' , color : 'white' } }
>
FreeSewing
< span className = "font-light" > . dev < / s p a n >
< / h 1 >
< h2
className = { `
text - right text - 2 xl mr - 0
sm : text - 3 xl
md : text - 4 xl
lg : max - w - 1 / 2 lg : text - 4 xl xl : pr - 0 ` }
style = { { textShadow : '1px 1px 3px #000' , color : 'white' } }
>
Documentation for FreeSewing contributors & developers
< / h 2 >
< / d i v >
< Icons app = { app } active = '/'
ulClasses = "flex flex-row flex-wrap mt-8 justify-around w-full max-w-6xl"
liClasses = "text-neutral-content w-1/3 my-4 lg:mx-2 lg:w-24"
linkClasses = { `
text - lg lg : text - xl py - 1 text - secondary
hover : text - secondary sm : hover : text - secondary - focus hover : cursor - pointer
flex flex - col items - center capitalize ` }
/ >
< p className = "text-neutral-content text-center mt-8" >
To learn more about FreeSewing and try our platform
go to < a
href = "https://freesewing.org/"
title = "Go to FreeSewing.org"
className = "text-secondary font-bold"
> freesewing . org < / a >
< / p >
2022-05-11 17:41:24 +02:00
< / d i v >
< / s e c t i o n >
< div >
2022-07-02 22:56:22 +02:00
< div className = "max-w-7xl m-auto my-32" >
< h2 > TL ; DR < / h 2 >
< div className = "flex flex-row flex-wrap gap-4 justify-between" >
< div className = "max-w-xl" >
< h3 > To go fast , go alone < / h 3 >
< p > All you need is < strong > NodeJS < / s t r o n g > ; T h e n r u n : < / p >
< Highlight language = "js" >
npx @ freesewing / new - design
< / H i g h l i g h t >
< p > This command will setup our stand - alone development environment for you < / p >
< Popout tip compact >
Use this if you want to do your own thing , and not contribute to FreeSewing
< / P o p o u t >
< / d i v >
< div className = "max-w-xl" >
< h3 > To go far , go together < / h 3 >
< p >
First , < WebLink
href = "https://github.com/freesewing/freesewing/fork"
txt = "fork our monorepo"
/ > , t h e n r u n :
< / p >
< Highlight language = "shell" >
git clone { ` <url to your fork> ` }
< br / >
cd freesewing
< br / >
yarn kickstart
< / H i g h l i g h t >
< p >
These commands will clone your fork of < WebLink
href = "https://github.com/freesewing/freesewing"
txt = "the freesewing/freesewing repository on Github"
/ > a n d s e t i t u p f o r d e v e l o p m e n t .
< / p >
< Popout tip compact >
Use this if you want to contribute to FreeSewing , for the betterment of all involved
< / P o p o u t >
< Popout note >
< ul className = "list-inside list-disc" >
< li > You need < WebLink href = "https://yarnpkg.com/" txt = "yarn" / > to work with our monorepo < / l i >
< li >
Clone the URL to your own fork :
< Code > { ` https://github.com/your-username-here/freesewing ` } < / C o d e > < / l i >
< / u l >
< / P o p o u t >
< / d i v >
< / d i v >
< / d i v >
2022-05-12 10:27:42 +02:00
< div className = "max-w-7xl m-auto my-32" >
2021-12-28 17:09:45 +01:00
< div className = "bg-cover bg-neutral w-full bg-center rounded-lg shadow p-4 "
style = { { backgroundImage : "url(/support.jpg)" } }
>
< h2 className = "text-neutral-content p-4 text-4xl font-bold sm:font-light sm:text-6xl drop-shadow" > Support FreeSewing < / h 2 >
< p className = "text-neutral-content p-4 font-bold max-w-md text-lg" >
FreeSewing is fuelled by a voluntary subscription model
< / p >
< p className = "text-neutral-content p-4 font-bold max-w-md text-lg" >
If you think what we do is worthwhile ,
and if you can spare a few coins each month without hardship ,
please support our work
< / p >
< a role = "button" className = "btn btn-accent btn-wide ml-4 mb-8" href = "https://freesewing.org/patrons/join" > Become a Patron < / a >
< / d i v >
2022-05-12 10:27:42 +02:00
< / d i v >
< 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-8 justify-around w-full max-w-6xl"
liClasses = "w-1/3 my-4 lg:mx-2 lg:w-24"
linkClasses = { `
text - lg 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 ` }
/ >
< / d i v >
< / d i v >
< div className = "max-w-xl m-auto my-32" >
2021-12-31 13:44:16 +01:00
< HelpUs slug = '/' / >
2021-12-28 17:09:45 +01:00
< / d i v >
2022-05-12 10:27:42 +02:00
< / d i v >
2021-12-11 14:04:05 +01:00
< / P a g e >
2021-12-10 09:56:19 +01:00
)
}
2021-12-11 14:04:05 +01:00
2021-12-27 09:55:52 +01:00
export default HomePage
2022-02-13 16:00:00 +01:00
export async function getStaticProps ( { locale } ) {
return {
props : {
2022-03-29 16:30:14 +02:00
... ( await serverSideTranslations ( 'en' ) ) ,
2022-02-13 16:00:00 +01:00
}
}
}
