dzeio/markblog
1
0
Fork 0
mirror of https://github.com/dzeiocom/markblog.git synced 2025-04-22 02:42:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed linting 😃

Browse Source 
Signed-off-by: Avior <florian.bouillon@delta-wings.net>
This commit is contained in:
Florian Bouillon 2020-02-06 21:18:11 +01:00
parent c4775134de
commit fee40613f1
No known key found for this signature in database
GPG Key ID: B143FF27EF555D16
16 changed files with 249 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.eslintrc.js
View File

@ -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": [

8
components/Element.tsx
View File

@ -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>
)}

36
components/Filters.tsx
View File

@ -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) => {
this.submit(ev.target.value === 'true')
private onChange = (ev: React.KeyboardEvent<HTMLInputElement>|FormEvent<HTMLSelectElement>) => {
this.submit((ev.target as HTMLInputElement).value === 'true')
}
private submit = (sort?: boolean) => {
if (this.props.onQuery) {
this.props.onQuery(this.input.value, sort)
if (this.props.onQuery && this.input.current?.value) {
this.props.onQuery(this.input.current.value, sort)
}
}
}

30
components/Footer.tsx
View File

@ -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>

9
components/Header.tsx
View File

@ -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>
)

60
components/Menu.tsx
View File

@ -6,37 +6,37 @@ import config from '../config'
export default class Menu extends React.Component<{}, {}> {
public render() {
return (
<ul>
<li>
<Link href="/">
<a>Home</a>
</Link>
</li>
<style jsx>{`
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
background: white;
width: calc(100% - 10px);
padding: 5px;
}
a {
color: black;
display: block;
text-decoration: none;
padding: 10px;
border-radius: 10px;
transition: background 200ms
}
<ul>
<li>
<Link href="/">
<a>Home</a>
</Link>
</li>
<style jsx>{`
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
background: white;
width: calc(100% - 10px);
padding: 5px;
}
a {
color: black;
display: block;
text-decoration: none;
padding: 10px;
border-radius: 10px;
transition: background 200ms
}
a:hover {
background: ${config.colors[500]}20
}
`}</style>
</ul>
a:hover {
background: ${config.colors[500]}20
}
`}</style>
</ul>
)
}
}

16
components/Navbar.tsx
View File

@ -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')
}
}

18
components/Picture.tsx
View File

@ -1,19 +1,25 @@
import { Component, CSSProperties } from "react"
import React, { Component, CSSProperties } from 'react'
interface props {
src: string,
alt?: string,
interface Props {
src: 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>
)
}

21
components/Post.ts
View File

@ -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')) {

8
components/default.tsx
View File

@ -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>

54
pages/[category]/[slug].tsx
View File

@ -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={{
maxWidth: "100%",
borderRadius: 10,
maxHeight: 300,
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>`)}/>
<Picture
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)',
}}
/>
<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>

2
pages/_app.tsx
View File

@ -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}`)
}
}

12
pages/_document.tsx
View File

@ -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">

19
pages/_error.tsx
View File

@ -5,13 +5,21 @@ import React, { Component } from 'react'
interface Props {
statusCode: number
}
const codesTexts = {
interface Arr {
[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 }
}
}

72
pages/index.tsx
View File

@ -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)
})
header.sort((a, b) => {
return (a.date < b.date) ? 1 : -1
cats.push(...el.header.tags || [])
})
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) => {
return el.title.toLowerCase().includes(query.toLowerCase())
})
const t = elements.filter( el => el.title.toLowerCase().includes(query.toLowerCase()))
if (recent) {
t.sort((a, b) => {
return (a.date < b.date) ? 1 : -1
})
t.sort((a, b) => (a.date < b.date) ? 1 : -1)
} else {
t.sort((a, b) => {
return (a.date > b.date) ? 1 : -1
})
t.sort((a, b) => (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.
*/

37
pages/tag/[tag].tsx
View File

@ -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,15 +23,20 @@ const PortfolioIndex: NextPage<Props> = (props: Props) => {
<div>
<h2>Tag: {props && props.tag}</h2>
<div>
{props.files.map((post, index) => (
<Element
key={index}
link={`/${post.header.category.toLowerCase()}/${post.header.id}`}
title={post.header.title}
image={post.header.image}
date={post.header.date || new Date()}
/>
))}
{props.files.map((post, index) => {
if (!post.header) {
return
}
return (
<Element
key={index}
link={`/${post.header.category.toLowerCase()}/${post.header.id}`}
title={post.header.title}
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)) {