Fixed linting 😃

Signed-off-by: Avior <florian.bouillon@delta-wings.net>

.eslintrc.js

@@ -87,7 +87,6 @@ module.exports = {
 		"@typescript-eslint/no-namespace": "error",
 		"@typescript-eslint/no-parameter-properties": "off",
 		"@typescript-eslint/no-use-before-define": "off",
-		"@typescript-eslint/no-var-requires": "error",
 		"@typescript-eslint/prefer-for-of": "error",
 		"@typescript-eslint/prefer-function-type": "error",
 		"@typescript-eslint/prefer-namespace-keyword": "error",
@@ -134,8 +133,7 @@ module.exports = {
 			"string",
 			"Boolean",
 			"boolean",
-			"Undefined",
+			"Undefined"
-			"undefined"
 		],
 		"id-match": "error",
 		"max-classes-per-file": [

components/Element.tsx

@@ -38,7 +38,13 @@ export default class Element extends React.Component<Props, {}> {
 			<div>
 				<Link href="/[category]/[slug]" as={this.props.link}>
 					{this.props.image ? (
-						<a aria-label={this.props.title}><Picture src={this.props.image} alt={this.props.alt} style={{height: 250, borderRadius: 10}} /></a> //<img src={require(`../images${this.props.image}`/*this.props.image*/)} alt={this.props.alt}/>
+						<a aria-label={this.props.title}>
+							<Picture
+								src={this.props.image}
+								alt={this.props.alt}
+								style={{height: 250, borderRadius: 10}}
+							/>
+						</a>
 					) : (
 						<div></div>
 					)}

components/Filters.tsx

@@ -1,5 +1,5 @@
 import Link from 'next/link'
-import React from 'react'
+import React, { RefObject, FormEvent } from 'react'
 import { ChevronDown, ChevronRight } from 'react-feather'
 
 import config from '../config'
@@ -18,7 +18,13 @@ interface States {
 
 export default class Filters extends React.Component<Props, States> {
 
-	private input = undefined
+	private input: RefObject<HTMLInputElement>
+
+	public constructor(props: Props) {
+		super(props)
+
+		this.input = React.createRef()
+	}
 
 	public render() {
 		return (
@@ -35,14 +41,20 @@ export default class Filters extends React.Component<Props, States> {
 				</div>
 				<label htmlFor="sidebar-filter">Filtrer</label>
 				<div className="input icon-right inline">
-					<input id="sidebar-filter" placeholder="ex: dzeio.com" type="text" ref={this.setInput} onKeyDownCapture={this.onKeyDown} />
+					<input
+						id="sidebar-filter"
+						placeholder="ex: dzeio.com"
+						type="text"
+						ref={this.input}
+						onKeyDownCapture={this.onKeyDown}
+					/>
 					<i>
 						<ChevronRight onClick={this.onClick} />
 					</i>
 				</div>
 				<p>Languages :</p>
 				<span>
-					{this.props.categories.map((cat) => (
+					{this.props.categories?.map(cat => (
 						<Link key={cat} href="/tag/[tag]" as={`/tag/${cat.toLowerCase()}`}>
 							<a className="button">{cat}</a>
 						</Link>
@@ -93,10 +105,6 @@ export default class Filters extends React.Component<Props, States> {
 		)
 	}
 
-	private setInput = (element) => {
-		this.input = element
-	}
-
 	private onKeyDown = (ev: React.KeyboardEvent<HTMLInputElement>) => {
 		setTimeout(() => {
 			this.submit()
@@ -104,20 +112,20 @@ export default class Filters extends React.Component<Props, States> {
 	}
 
 	private onClick = () => {
-		if (this.input.value !== '') {
+		if (this.input.current?.value !== '') {
 			this.submit()
 			return
 		}
-		this.input.focus()
+		this.input.current.focus()
 	}
 
-	private onChange = (ev) => {
+	private onChange = (ev: React.KeyboardEvent<HTMLInputElement>|FormEvent<HTMLSelectElement>) => {
-		this.submit(ev.target.value === 'true')
+		this.submit((ev.target as HTMLInputElement).value === 'true')
 	}
 
 	private submit = (sort?: boolean) => {
-		if (this.props.onQuery) {
+		if (this.props.onQuery && this.input.current?.value) {
-			this.props.onQuery(this.input.value, sort)
+			this.props.onQuery(this.input.current.value, sort)
 		}
 	}
 }

components/Footer.tsx

@@ -10,19 +10,39 @@ export default class Footer extends React.Component<{}, {}> {
 				<div className="pre"></div>
 				<div className="footer">
 					<span>
-						<a aria-label="Email Address" href="mailto:contact@avior.me" target="_blank">
+						<a
+							aria-label="Email Address"
+							rel="noopener noreferrer"
+							href="mailto:contact@avior.me"
+							target="_blank"
+						>
 							<Mail color={config.colors[500]} />
 						</a>
-						<a aria-label="Phone Number" href="tel:+33672292683" target="_blank">
+						<a aria-label="Phone Number" rel="noopener noreferrer" href="tel:+33672292683" target="_blank">
 							<PhoneCall color={config.colors[500]} />
 						</a>
-						<a aria-label="Git" rel="noopener noreferrer" href="https://git.delta-wings.net" target="_blank">
+						<a
+							aria-label="Git"
+							rel="noopener noreferrer"
+							href="https://git.delta-wings.net"
+							target="_blank"
+						>
 							<GitHub color={config.colors[500]} />
 						</a>
-						<a aria-label="Twitter" rel="nofollow noopener noreferrer" href="https://twitter.com/aviortheking" target="_blank">
+						<a
+							aria-label="Twitter"
+							rel="nofollow noopener noreferrer"
+							href="https://twitter.com/aviortheking"
+							target="_blank"
+						>
 							<Twitter color={config.colors[500]} />
 						</a>
-						<a aria-label="linkdedin" rel="nofollow noopener noreferrer" href="https://www.linkedin.com/in/florian-bouillon/" target="_blank">
+						<a
+							aria-label="linkdedin"
+							rel="nofollow noopener noreferrer"
+							href="https://www.linkedin.com/in/florian-bouillon/"
+							target="_blank"
+						>
 							<Linkedin color={config.colors[500]} />
 						</a>
 					</span>

components/Header.tsx

@@ -4,13 +4,14 @@ import config from '../config'
 
 export default class Header extends React.Component<{}, {}> {
 	public render() {
+		const t = `linear-gradient(90deg, ${config.colors[400]} 0%, ${config.colors[600]} 92.19%)`
 		return (
 			<div>
 				{/* <p>Bienvenue sur le Portfolio de Florian BOUILLON !</p> */}
 				<style jsx>{`
 					div {
 						position: relative;
-						background: url('/clouds.svg'), linear-gradient(90deg, ${config.colors[400]} 0%, ${config.colors[600]} 92.19%);
+						background: url('/clouds.svg'), ${t};
 						background-repeat: repeat-x;
 						background-position: bottom;
 						min-height: 207px;
@@ -22,12 +23,6 @@ export default class Header extends React.Component<{}, {}> {
 						font-size: 35px;
 						text-transform: uppercase;
 					}
-					img {
-						position: absolute;
-						bottom: 0;
-						min-width: 100%;
-						height: 50px;
-					}
 				`}</style>
 			</div>
 		)

components/Navbar.tsx

@@ -1,5 +1,5 @@
 import Link from 'next/link'
-import React from 'react'
+import React, { RefObject } from 'react'
 import { Menu } from 'react-feather'
 
 import config from '../config'
@@ -16,11 +16,13 @@ export default class Navbar extends React.Component<Props, States> {
 
 	private height = 80
 
-	private menuRef = undefined
+	private menuRef: RefObject<any>
 
 	public constructor(props: Props) {
 		super(props)
 
+		this.menuRef = React.createRef()
+
 		if (this.props.height) {
 			this.height = this.props.height
 		}
@@ -60,12 +62,12 @@ export default class Navbar extends React.Component<Props, States> {
 					<Link href="/">
 						<a><img src="/logo.svg" alt="logo"/></a>
 					</Link>
-					<span onClick={this.onClick} data-menu={this.refs.menu}>
+					<span onClick={this.onClick} data-menu={this.menuRef}>
 						<Menu size={30} />
 					</span>
 				</div>
 
-				<div ref={this.setRef} className="menu">
+				<div ref={this.menuRef} className="menu">
 					{this.props.children}
 				</div>
 
@@ -129,10 +131,6 @@ export default class Navbar extends React.Component<Props, States> {
 		)
 	}
 
-	private setRef = (element) => {
-		this.menuRef = element
-	}
-
 	private onScroll = () => {
 		this.setState({
 			scrolled: window.pageYOffset > 207,
@@ -140,6 +138,6 @@ export default class Navbar extends React.Component<Props, States> {
 	}
 
 	private onClick = () => {
-		this.menuRef.classList.toggle('shown')
+		this.menuRef.current.classList.toggle('shown')
 	}
 }

components/Picture.tsx

@@ -1,19 +1,25 @@
-import { Component, CSSProperties } from "react"
+import React, { Component, CSSProperties } from 'react'
 
-interface props {
+interface Props {
-	src: string,
+	src: string
-	alt?: string,
+	alt?: string
 	style?: CSSProperties
 	parentStyle?: CSSProperties
 }
 
-export default class Picture extends Component<props, {}> {
+export default class Picture extends Component<Props, {}> {
 	public render() {
 		const sets = require(`../images${this.props.src}?resize&sizes[]=300&sizes[]=600&sizes[]=1000`)
 		return (
 			<picture style={this.props.parentStyle}>
 				<source srcSet={require(`../images${this.props.src}?webp`).default} type="image/webp" />
-				<img srcSet={sets.srcSet} src={sets.src} alt={this.props.alt} style={Object.assign({width: "100%", objectFit: "cover"}, this.props.style)} />
+				<img
+					srcSet={sets.srcSet}
+					src={sets.src}
+					alt={this.props.alt}
+					style={
+						Object.assign({width: '100%', objectFit: 'cover'}, this.props.style)
+					} />
 			</picture>
 		)
 	}

components/Post.ts

@@ -21,6 +21,17 @@ export interface PostHeader {
 
 export default class Post implements PostInterface {
 
+	public slug: string
+	public title: string = ''
+	public content: string = ''
+	public isStarted = false
+
+	public header?: PostHeader
+
+	public constructor(slug: string) {
+		this.slug = slug
+	}
+
 	public static async fetchAll(): Promise<Array<Post>> {
 		const files: Array<string> = ((require as any).context('../posts', true, /\.md$/)).keys()
 		const posts: Array<Post> = []
@@ -30,16 +41,6 @@ export default class Post implements PostInterface {
 		return posts
 	}
 
-	public slug: string
-	public title: string
-	public content: string
-	public isStarted = false
-
-	public header: PostHeader
-
-	constructor(slug: string) {
-		this.slug = slug
-	}
 
 	public async fetch() {
 		if (!this.slug.endsWith('.md')) {

components/default.tsx

@@ -1,15 +1,13 @@
 import React from 'react'
 
-/* tslint:disable:no-empty-interface */
+/* eslint-disable @typescript-eslint/no-empty-interface */
 interface Props {}
 
 interface States {}
-/* tslint:enable:no-empty-interface */
+/* eslint-enable @typescript-eslint/no-empty-interface */
 
 export default class Name extends React.Component<Props, States> {
-	constructor(props: Props) {
+
-		super(props)
-	}
 	public render() {
 		return (
 			<span></span>

pages/[category]/[slug].tsx

@@ -1,3 +1,5 @@
+import React from 'react'
+
 import { NextPageContext } from 'next'
 import Head from 'next/head'
 import Link from 'next/link'
@@ -32,6 +34,11 @@ export default class PostPage extends Component<Props, States> {
 	}
 
 	public render() {
+		if (!this.props.post.header) {
+			return (
+				<Error statusCode={404} />
+			)
+		}
 		return (
 			<main>
 				<Head>
@@ -42,7 +49,11 @@ export default class PostPage extends Component<Props, States> {
 						content={this.props.post.header.short || this.props.post.header.title}
 					/>
 
-					<meta key="og:title" property="og:title" content={`${this.props.post.header.title} - ${config.og.title}`} />
+					<meta
+						key="og:title"
+						property="og:title"
+						content={`${this.props.post.header.title} - ${config.og.title}`}
+					/>
 					<title key="title">{`${this.props.post.header.title} - ${config.og.title}`}</title>
 					<meta
 						key="og:description"
@@ -50,25 +61,46 @@ export default class PostPage extends Component<Props, States> {
 						content={this.props.post.header.short || this.props.post.header.title}
 					/>
 					{this.props.post.header.image ? (
-						<meta key="og:image" property="og:image" content={`${config.domain}${this.props.post.header.image}`}/>
+						<meta
+							key="og:image"
+							property="og:image"
+							content={`${config.domain}${this.props.post.header.image}`}
+						/>
 					) : undefined}
-					<script type="application/javascript" async defer src="https://hashover.dzeio.com/comments.php"></script>
+					<script
+						type="application/javascript"
+						async
+						defer
+						src="https://hashover.dzeio.com/comments.php"
+					></script>
 				</Head>
 				{this.props.post === undefined ? (
 					<Error statusCode={404} />
 				) : (
 					<div>
-						<Picture src={this.props.post.header.image} alt={this.props.post.header.imageAlt} parentStyle={{zIndex: 999}} style={{
+						<Picture
-							maxWidth: "100%",
+							src={this.props.post.header.image || ''}
+							alt={this.props.post.header.imageAlt}
+							parentStyle={{zIndex: 999}}
+							style={{
+								maxWidth: '100%',
 								borderRadius: 10,
 								maxHeight: 300,
-							boxShadow: "0px 0px 4px rgba(0, 0, 0, 0.4)"
+								boxShadow: '0px 0px 4px rgba(0, 0, 0, 0.4)',
-						}}/>
+							}}
-						<ReactMarkdown escapeHtml={false} source={emoji.emojify(this.props.post.content, null, (code, name) => `<span class="emoji">${code}</span>`)}/>
+						/>
+						<ReactMarkdown
+							escapeHtml={false}
+							source={emoji.emojify(
+								this.props.post.content,
+								undefined,
+								(code: string, name: string) => `<span class="emoji">${code}</span>`,
+							)}
+						/>
 						<h2>Détails</h2>
 						<p>Tags:</p>
 						<ul>
-							{this.props.post.header.tags.map((el) => (
+							{this.props.post.header.tags?.map(el => (
 								<li key={el}>
 									<Link href="/tag/[tag]" as={'/tag/' + el.toLowerCase()}>
 										<a className="button">{el}</a>

pages/_app.tsx

@@ -9,7 +9,7 @@ import '../styl/styl.styl'
 class MyApp extends App {
 
 	public componentDidMount() {
-		if (window.location.origin !== config.domain && window.location.hostname !== "localhost") {
+		if (window.location.origin !== config.domain && window.location.hostname !== 'localhost') {
 			window.location.replace(`${config.domain}${window.location.pathname}`)
 		}
 	}

pages/_document.tsx

@@ -1,18 +1,14 @@
-import Document, { Head, Html, Main, NextScript } from 'next/document'
+import  React from 'react'
+
+import Document, { Head, Html, Main, NextScript, DocumentContext } from 'next/document'
 import config from '../config'
 
 class MyDocument extends Document {
-	public static async getInitialProps(ctx) {
+	public static async getInitialProps(ctx: DocumentContext) {
 		const initialProps = await Document.getInitialProps(ctx)
 		return { ...initialProps }
 	}
 
-	public componentDidMount() {
-		if (window.location.origin !== config.domain && window.location.hostname !== "localhost") {
-			window.location.replace(`${config.domain}${window.location.pathname}`)
-		}
-	}
-
 	public render() {
 		return (
 			<Html lang="en">

pages/_error.tsx

@@ -5,13 +5,21 @@ import React, { Component } from 'react'
 interface Props {
 	statusCode: number
 }
-
+interface Arr {
-const codesTexts = {
+	[key: string]: string
+}
+const codesTexts: Arr = {
 	404: 'Page non trouvé !',
-	500: "Le serveur n'a pas pu répondre a ta demande :O",
+	500: 'Le serveur n\'a pas pu répondre a ta demande :O',
 }
 
 export default class Error extends Component<Props, {}> {
+
+	public static getInitialProps({ res, err }: NextPageContext) {
+		const statusCode = res ? res.statusCode : err ? err.statusCode : 404
+		return { statusCode }
+	}
+
 	public render = () => {
 		const statusCode = this.props.statusCode
 		return (
@@ -45,9 +53,4 @@ export default class Error extends Component<Props, {}> {
 			</main>
 		)
 	}
-
-	public static getInitialProps({ res, err }: NextPageContext) {
-		const statusCode = res ? res.statusCode : err ? err.statusCode : 404
-		return { statusCode }
-	}
 }

pages/index.tsx

@@ -1,3 +1,5 @@
+import React from 'react'
+
 import { Component } from 'react'
 import Element from '../components/Element'
 import Filters from '../components/Filters'
@@ -24,14 +26,15 @@ export default class Page extends Component<Props, States> {
 		const posts = await Post.fetchAll()
 		const header: Array<PostHeader> = []
 		const cats: Array<string> = []
-		posts.forEach((el) => {
+		posts.forEach(el => {
 			el.fetchSync()
+			if (!el.header) {
+				return
+			}
 			header.push(el.header)
-			cats.push(...el.header.tags)
+			cats.push(...el.header.tags || [])
-		})
-		header.sort((a, b) => {
-			return (a.date < b.date) ? 1 : -1
 		})
+		header.sort((a, b) => (a.date < b.date) ? 1 : -1)
 
 		cats.sort((a, b) => (a < b) ? -1 : 1)
 
@@ -44,10 +47,17 @@ export default class Page extends Component<Props, States> {
 	}
 
 	public render() {
+		const asideHeight = this.state?.asideHeight ? this.state.asideHeight + 100 : 600
 		return (
 			<main>
 				<span>
-					{this.state && this.state.elements && this.state.elements.length !== 0 ? this.state.elements.map((el, index) => (
+					{!this.state || !this.state.elements && (
+						<div>Chargement en cours... <span className="emoji">😃</span></div>
+					)}
+					{this.state && this.state.loaded && this.state.elements.length === 0 && (
+						<div>La recherche n&apos;a rien donnée <span className="emoji">😢</span></div>
+					)}
+					{this.state && this.state.elements && this.state.elements.map((el, index) => (
 						<Element
 							key={index}
 							link={`/${el.category.toLowerCase()}/${el.id}`}
@@ -56,13 +66,13 @@ export default class Page extends Component<Props, States> {
 							alt={el.imageAlt}
 							date={el.date || new Date()}
 						/>
-					)) : this.state && this.state.loaded ? (
+					))}
-						<div>La recherche n'a rien donnée <span className="emoji">😢</span></div>
-					) : (
-						<div>Chargement en cours... <span className="emoji">😃</span></div>
-					)}
 				</span>
-				<Filters categories={this.state && this.state.categories || []} onQuery={this.onQuery} onHeight={this.onHeight}/>
+				<Filters
+					categories={this.state && this.state.categories || []}
+					onQuery={this.onQuery}
+					onHeight={this.onHeight}
+				/>
 				<style jsx>{`
 					span:not(.emoji) {
 						display: flex;
@@ -85,7 +95,7 @@ export default class Page extends Component<Props, States> {
 						justify-content: center;
 					}
 
-					@media (min-width: 820px) and (min-height: ${this.state && this.state.asideHeight ? this.state.asideHeight + 100 : 600}px) {
+					@media (min-width: 820px) and (min-height: ${asideHeight}px) {
 						span {
 							max-width: calc(100% - 400px);
 						}
@@ -101,17 +111,11 @@ export default class Page extends Component<Props, States> {
 
 	private onQuery = async (query: string, recent: boolean = true) => {
 		// console.log(`query: ${query}`)
-		const t = elements.filter( (el) => {
+		const t = elements.filter( el => el.title.toLowerCase().includes(query.toLowerCase()))
-			return el.title.toLowerCase().includes(query.toLowerCase())
-		})
 		if (recent) {
-			t.sort((a, b) => {
+			t.sort((a, b) => (a.date < b.date) ? 1 : -1)
-				return (a.date < b.date) ? 1 : -1
-			})
 		} else {
-			t.sort((a, b) => {
+			t.sort((a, b) => (a.date > b.date) ? 1 : -1)
-				return (a.date > b.date) ? 1 : -1
-			})
 		}
 		this.setState({
 			elements: t,
@@ -124,3 +128,27 @@ export default class Page extends Component<Props, States> {
 		})
 	}
 }
+
+/*
+Email configuration :D
+
+                                  IN MX     10 srv1.dzeio.com.
+                                  IN TXT    "mailconf=https://autoconfig.avior.me/mail/config-v1.1.xml"
+                                  IN TXT    "v=spf1 mx ~all"
+_autodiscover._tcp                IN SRV    0 0 443 autodiscover.avior.me.
+_imaps._tcp                       IN SRV    0 0 143 srv1.dzeio.com.
+_submission._tcp                  IN SRV    0 0 587 srv1.dzeio.com.
+autoconfig                        IN CNAME  srv1.dzeio.com.
+autodiscover                      IN CNAME  srv1.dzeio.com.
+imap                              IN CNAME  srv1.dzeio.com.
+mail                              IN CNAME  srv1.dzeio.com.
+pop3                              IN CNAME  srv1.dzeio.com.
+smtp                              IN CNAME  srv1.dzeio.com.
+
+mail._domainkey                   IN TXT    ( "DKIM" )
+
+HestiaCP
+
+webmail                           IN CNAME srv1.dzeio.com.
+
+*/

pages/tag/[tag].tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import { NextPage, NextPageContext } from 'next'
 
 import Element from '../../components/Element'
@@ -6,18 +7,12 @@ import Post from '../../components/Post'
 import Error from '../_error'
 
 interface Props {
-	files: Array<Post>,
+	files: Array<Post>
 	tag: string
 }
 
 const PortfolioIndex: NextPage<Props> = (props: Props) => {
 
-	const el: Array<JSX.Element> = []
-	for (const post of props.files) {
-		el.push(
-		)
-	}
-
 	if (props.files.length === 0) {
 		return (
 			<Error statusCode={404} />
@@ -28,7 +23,11 @@ const PortfolioIndex: NextPage<Props> = (props: Props) => {
 		<div>
 			<h2>Tag: {props && props.tag}</h2>
 			<div>
-				{props.files.map((post, index) => (
+				{props.files.map((post, index) => {
+					if (!post.header) {
+						return
+					}
+					return (
 						<Element
 							key={index}
 							link={`/${post.header.category.toLowerCase()}/${post.header.id}`}
@@ -36,7 +35,8 @@ const PortfolioIndex: NextPage<Props> = (props: Props) => {
 							image={post.header.image}
 							date={post.header.date || new Date()}
 						/>
-				))}
+					)
+				})}
 			</div>
 			<style jsx>{`
 			span:not(.emoji) {
@@ -81,7 +81,10 @@ PortfolioIndex.getInitialProps = async (context: NextPageContext) => {
 			await post.fetch()
 		}
 		const tags = []
-		for (const tg of post.header.tags) {
+		if (!post.header) {
+			continue
+		}
+		for (const tg of post.header.tags || []) {
 			tags.push(tg.toLowerCase())
 		}
 		if (!tags.includes(tag)) {