1
1
mirror of https://github.com/theoludwig/theoludwig.git synced 2025-05-29 22:37:44 +02:00

chore: usage of prettier, eslint and lint-staged instead of ts-standard

This commit is contained in:
divlo
2021-04-27 19:09:33 +02:00
parent 2a24af7c47
commit 0901b07611
34 changed files with 1574 additions and 1152 deletions

View File

@ -17,15 +17,11 @@ export const FormResult: React.FC<FormResultProps> = (props) => {
if (state === 'loading' || state === 'success') {
return (
<FormState state={state}>
{t(`home:contact.result.${state}`)}
</FormState>
<FormState state={state}>{t(`home:contact.result.${state}`)}</FormState>
)
}
return (
<FormState state='error'>
{t(`home:contact.result.${state}`)}
</FormState>
<FormState state='error'>{t(`home:contact.result.${state}`)}</FormState>
)
}

View File

@ -5,7 +5,7 @@ export interface FormStateProps extends React.ComponentPropsWithRef<'p'> {
children: string
}
export const FormState: React.FC<FormStateProps> = props => {
export const FormState: React.FC<FormStateProps> = (props) => {
const { state, children, ...rest } = props
const { t } = useTranslation()
@ -15,24 +15,28 @@ export const FormState: React.FC<FormStateProps> = props => {
<p className={state} {...rest}>
{['error', 'success'].includes(state) && (
<b>
{state === 'error' ? t('home:contact.error') : t('home:contact.success')}:
{state === 'error'
? t('home:contact.error')
: t('home:contact.success')}
:
</b>
)}{' '}
{children}
</p>
</div>
<style jsx>{`
.form-result {
margin: 30px;
}
.success {
color: #90ee90;
}
.error {
color: #ff7f7f;
}
`}
<style jsx>
{`
.form-result {
margin: 30px;
}
.success {
color: #90ee90;
}
.error {
color: #ff7f7f;
}
`}
</style>
</>
)

View File

@ -6,7 +6,7 @@ export interface ErrorPageProps {
message: string
}
export const ErrorPage: React.FC<ErrorPageProps> = props => {
export const ErrorPage: React.FC<ErrorPageProps> = (props) => {
const { message, statusCode } = props
const { t } = useTranslation()
@ -19,19 +19,20 @@ export const ErrorPage: React.FC<ErrorPageProps> = props => {
{message} <Link href='/'>{t('errors:returnToHomePage')}</Link>
</p>
<style jsx global>{`
.content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-width: 100vw;
min-height: 100%;
}
#__next {
padding-top: 0;
}
`}
<style jsx global>
{`
.content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-width: 100vw;
min-height: 100%;
}
#__next {
padding-top: 0;
}
`}
</style>
</>
)

View File

@ -7,7 +7,8 @@ export const Footer: React.FC = () => {
<>
<footer className='Footer text-center'>
<p>
<span className='important'>Divlo</span> | {t('common:allRightsReserved')}
<span className='important'>Divlo</span> |{' '}
{t('common:allRightsReserved')}
</p>
</footer>

View File

@ -7,7 +7,7 @@ interface HeadProps {
url?: string
}
export const Head: React.FC<HeadProps> = props => {
export const Head: React.FC<HeadProps> = (props) => {
const {
title = 'Divlo',
image = '/images/icons/icon-96x96.png',

View File

@ -7,7 +7,7 @@ interface InterestItemProps {
fontAwesomeIcon: IconDefinition
}
export const InterestItem: React.FC<InterestItemProps> = props => {
export const InterestItem: React.FC<InterestItemProps> = (props) => {
const { fontAwesomeIcon, title } = props
return (

View File

@ -6,9 +6,13 @@ import { InterestsList } from './InterestsList'
export const Interests: React.FC = () => {
const { t } = useTranslation()
const paragraphs: InterestParagraphProps[] = t('home:interests.paragraphs', {}, {
returnObjects: true
})
const paragraphs: InterestParagraphProps[] = t(
'home:interests.paragraphs',
{},
{
returnObjects: true
}
)
return (
<>

View File

@ -7,7 +7,7 @@ export interface PortfolioItemProps {
image: string
}
export const PortfolioItem: React.FC<PortfolioItemProps> = props => {
export const PortfolioItem: React.FC<PortfolioItemProps> = (props) => {
const { title, description, link, image } = props
return (
@ -32,15 +32,15 @@ export const PortfolioItem: React.FC<PortfolioItemProps> = props => {
<style jsx global>
{`
.portfolio-figure img[alt='${title}'] {
max-height: 300px;
max-width: 300px;
transition: opacity 0.5s ease;
}
.portfolio-grid:hover img[alt='${title}'] {
opacity: 0.05;
}
`}
.portfolio-figure img[alt='${title}'] {
max-height: 300px;
max-width: 300px;
transition: opacity 0.5s ease;
}
.portfolio-grid:hover img[alt='${title}'] {
opacity: 0.05;
}
`}
</style>
<style jsx>

View File

@ -5,9 +5,13 @@ import { PortfolioItem, PortfolioItemProps } from './PortfolioItem'
export const Portfolio: React.FC = () => {
const { t } = useTranslation('home')
const items: PortfolioItemProps[] = t('home:portfolio.items', {}, {
returnObjects: true
})
const items: PortfolioItemProps[] = t(
'home:portfolio.items',
{},
{
returnObjects: true
}
)
return (
<>

View File

@ -4,7 +4,7 @@ interface ProfileItemProps {
link?: string
}
export const ProfileItem: React.FC<ProfileItemProps> = props => {
export const ProfileItem: React.FC<ProfileItemProps> = (props) => {
const { title, value, link } = props
return (

View File

@ -8,10 +8,7 @@ export const ProfileList: React.FC = () => {
return (
<>
<ul className='profile-list'>
<ProfileItem
title={t('home:about.birthDate')}
value='31/03/2003'
/>
<ProfileItem title={t('home:about.birthDate')} value='31/03/2003' />
<ProfileItem
title={t('home:about.nationality')}
value='Alsace, France'

View File

@ -14,12 +14,13 @@ export const ProfileLogo: React.FC = () => {
</div>
</div>
<style jsx>{`
.profile-logo {
margin-right: 10px;
margin-left: 10px;
}
`}
<style jsx>
{`
.profile-logo {
margin-right: 10px;
margin-left: 10px;
}
`}
</style>
</>
)

View File

@ -6,7 +6,7 @@ interface SocialMediaItemProps {
socialMedia: 'Email' | 'GitHub' | 'Twitch' | 'Twitter' | 'YouTube'
}
export const SocialMediaItem: React.FC<SocialMediaItemProps> = props => {
export const SocialMediaItem: React.FC<SocialMediaItemProps> = (props) => {
const { link, socialMedia } = props
return (

View File

@ -25,16 +25,17 @@ export const SocialMediaList: React.FC = () => {
</ul>
</div>
<style jsx>{`
.social-media-list {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
padding: 15px 0;
margin-top: 10px;
}
`}
<style jsx>
{`
.social-media-list {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
padding: 15px 0;
margin-top: 10px;
}
`}
</style>
</>
)

View File

@ -6,7 +6,7 @@ export interface SkillProps {
skill: keyof typeof skills
}
export const Skill: React.FC<SkillProps> = props => {
export const Skill: React.FC<SkillProps> = (props) => {
const { skill } = props
const skillProperties = skills[skill]
@ -29,15 +29,16 @@ export const Skill: React.FC<SkillProps> = props => {
</div>
</a>
<style jsx>{`
.skills-link {
max-width: 120px;
margin: 0px 10px 0 10px;
}
.skills-text {
margin-top: 5px;
}
`}
<style jsx>
{`
.skills-link {
max-width: 120px;
margin: 0px 10px 0 10px;
}
.skills-text {
margin-top: 5px;
}
`}
</style>
</>
)

View File

@ -5,7 +5,7 @@ export interface SkillsSectionProps {
children: React.ReactNode
}
export const SkillsSection: React.FC<SkillsSectionProps> = props => {
export const SkillsSection: React.FC<SkillsSectionProps> = (props) => {
const { title, children } = props
return (
@ -23,21 +23,22 @@ export const SkillsSection: React.FC<SkillsSectionProps> = props => {
</div>
</ShadowContainer>
<style jsx>{`
.skills-header {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 15px;
}
.skills-header > h3 {
margin-bottom: 15px;
}
.skills-body {
display: flex;
justify-content: space-around;
flex-flow: row wrap;
padding-top: 1.5rem;
}
`}
<style jsx>
{`
.skills-header {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 15px;
}
.skills-header > h3 {
margin-bottom: 15px;
}
.skills-body {
display: flex;
justify-content: space-around;
flex-flow: row wrap;
padding-top: 1.5rem;
}
`}
</style>
</>
)

View File

@ -16,59 +16,60 @@ export const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
</label>
</div>
<style jsx>{`
.form-group-animation {
position: relative;
margin-top: 10px;
margin-bottom: 30px;
overflow: hidden;
}
.form-group-animation input {
width: 100%;
height: 100%;
padding-top: 35px;
color: var(--color-text-1);
border: none;
background: transparent;
outline: none;
}
.form-group-animation label {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
border-bottom: 1px solid #fff;
}
.form-group-animation label::after {
content: '';
position: absolute;
left: 0;
bottom: -1px;
height: 100%;
width: 100%;
border-bottom: 3px solid var(--color-primary);
transform: translateX(-100%);
transition: transform 0.2s ease;
}
.label-content {
position: absolute;
bottom: 5px;
left: 0px;
transition: all 0.3s ease;
}
.form-group-animation input:focus + .label .label-content,
.form-group-animation input:valid + .label .label-content {
transform: translateY(-150%);
font-size: 14px;
color: var(--color-primary);
}
.form-group-animation input:focus + .label::after,
.form-group-animation input:valid + .label::after {
transform: translateX(0%);
}
`}
<style jsx>
{`
.form-group-animation {
position: relative;
margin-top: 10px;
margin-bottom: 30px;
overflow: hidden;
}
.form-group-animation input {
width: 100%;
height: 100%;
padding-top: 35px;
color: var(--color-text-1);
border: none;
background: transparent;
outline: none;
}
.form-group-animation label {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
border-bottom: 1px solid #fff;
}
.form-group-animation label::after {
content: '';
position: absolute;
left: 0;
bottom: -1px;
height: 100%;
width: 100%;
border-bottom: 3px solid var(--color-primary);
transform: translateX(-100%);
transition: transform 0.2s ease;
}
.label-content {
position: absolute;
bottom: 5px;
left: 0px;
transition: all 0.3s ease;
}
.form-group-animation input:focus + .label .label-content,
.form-group-animation input:valid + .label .label-content {
transform: translateY(-150%);
font-size: 14px;
color: var(--color-primary);
}
.form-group-animation input:focus + .label::after,
.form-group-animation input:valid + .label::after {
transform: translateX(0%);
}
`}
</style>
</>
)

View File

@ -1,6 +1,6 @@
import { useEffect, useRef } from 'react'
export const RevealFade: React.FC = props => {
export const RevealFade: React.FC = (props) => {
const { children } = props
const htmlElement = useRef<HTMLDivElement>(null)
@ -8,7 +8,7 @@ export const RevealFade: React.FC = props => {
useEffect(() => {
const observer = new window.IntersectionObserver(
(entries, observer) => {
entries.forEach(entry => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('reveal-visible')
observer.unobserve(entry.target)
@ -30,19 +30,20 @@ export const RevealFade: React.FC = props => {
{children}
</div>
<style jsx>{`
.reveal {
opacity: 0;
visibility: hidden;
transform: translateY(-30px);
}
.reveal-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: all 500ms ease-out 100ms;
}
`}
<style jsx>
{`
.reveal {
opacity: 0;
visibility: hidden;
transform: translateY(-30px);
}
.reveal-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: all 500ms ease-out 100ms;
}
`}
</style>
</>
)

View File

@ -3,8 +3,8 @@ import { forwardRef } from 'react'
type SectionHeadingProps = React.ComponentPropsWithRef<'h2'>
export const SectionHeading = forwardRef<
HTMLHeadingElement,
SectionHeadingProps
HTMLHeadingElement,
SectionHeadingProps
>((props, ref) => {
const { children, ...rest } = props

View File

@ -1,6 +1,6 @@
type ShadowContainerProps = React.ComponentPropsWithRef<'div'>
export const ShadowContainer: React.FC<ShadowContainerProps> = props => {
export const ShadowContainer: React.FC<ShadowContainerProps> = (props) => {
const { children, className, ...rest } = props
return (

View File

@ -16,22 +16,23 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
<textarea id={name} name={name} ref={ref} {...rest} />
</div>
<style jsx>{`
.form-group {
padding-top: 15px;
margin-bottom: 30px;
}
.form-group textarea {
background: transparent;
color: var(--color-text);
outline: none;
width: 100%;
height: auto;
padding: 10px;
resize: vertical;
margin-top: 8px;
}
`}
<style jsx>
{`
.form-group {
padding-top: 15px;
margin-bottom: 30px;
}
.form-group textarea {
background: transparent;
color: var(--color-text);
outline: none;
width: 100%;
height: auto;
padding: 10px;
resize: vertical;
margin-top: 8px;
}
`}
</style>
</>
)

View File

@ -3,7 +3,7 @@ interface TooltipProps extends React.ComponentPropsWithRef<'div'> {
children: React.ReactNode
}
export const Tooltip: React.FC<TooltipProps> = props => {
export const Tooltip: React.FC<TooltipProps> = (props) => {
const { title, children, ...rest } = props
return (
<>
@ -12,37 +12,38 @@ export const Tooltip: React.FC<TooltipProps> = props => {
<span className='title'>{title}</span>
</span>
<style jsx>{`
.title {
color: #fff;
font-size: 11px;
font-weight: 400;
line-height: 1;
display: inline-block;
background-color: #222222;
padding: 5px 8px;
white-space: nowrap;
position: absolute;
top: 100%;
margin-top: 10px;
z-index: 1;
opacity: 0;
visibility: hidden;
border-radius: 3px;
transition: all 0.15s ease-in;
transform: translate3d(0, -15px, 0);
backface-visibility: hidden;
}
.tooltip ~ .tooltip:hover .title,
.tooltip:first-child:hover .title {
opacity: 1;
visibility: visible;
transition: all 0.35s ease-out;
transform: translate3d(0, 0, 0);
margin: 0;
backface-visibility: hidden;
}
`}
<style jsx>
{`
.title {
color: #fff;
font-size: 11px;
font-weight: 400;
line-height: 1;
display: inline-block;
background-color: #222222;
padding: 5px 8px;
white-space: nowrap;
position: absolute;
top: 100%;
margin-top: 10px;
z-index: 1;
opacity: 0;
visibility: hidden;
border-radius: 3px;
transition: all 0.15s ease-in;
transform: translate3d(0, -15px, 0);
backface-visibility: hidden;
}
.tooltip ~ .tooltip:hover .title,
.tooltip:first-child:hover .title {
opacity: 1;
visibility: visible;
transition: all 0.35s ease-out;
transform: translate3d(0, 0, 0);
margin: 0;
backface-visibility: hidden;
}
`}
</style>
</>
)