dzeio/markblog
1
0
Fork 0
mirror of https://github.com/dzeiocom/markblog.git synced 2025-06-19 14:09:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated

Browse Source 
Signed-off-by: Avior <florian.bouillon@delta-wings.net>
This commit is contained in:
Florian Bouillon
2020-02-06 00:39:09 +01:00
parent 32e09522bc
commit a5db5b9dbe
24 changed files with 1476 additions and 953 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
components/Element.tsx
View File

@ -1,6 +1,7 @@
import Link from 'next/link'
import React from 'react'
import { ChevronRight } from 'react-feather'
import Picture from './Picture'
interface Props {
title: string
@ -37,11 +38,7 @@ export default class Element extends React.Component<Props, {}> {
<div>
<Link href="/[category]/[slug]" as={this.props.link}>
{this.props.image ? (
<a><picture>
<source srcSet={require(`../images${this.props.image}?webp`)} type="image/webp" />
<source srcSet={require(`../images${this.props.image}`)} type="image/png" />
<img src={require(`../images${this.props.image}`)} />
</picture></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> //<img src={require(`../images${this.props.image}`/*this.props.image*/)} alt={this.props.alt}/>
) : (
<div></div>
)}
@ -53,7 +50,7 @@ export default class Element extends React.Component<Props, {}> {
<a>{this.props.title}</a>
</Link>
<Link href="/[category]/[slug]" as={this.props.link}>
<a><ChevronRight size={48}/></a>
<a aria-label={this.props.title}><ChevronRight size={48}/></a>
</Link>
</span>
<style jsx>{`
@ -67,12 +64,7 @@ export default class Element extends React.Component<Props, {}> {
min-width: 400px;
}
}
img {
width: 100%;
border-radius: 10px;
height: 250px;
object-fit: cover;
}
span {
display: flex;
justify-content: space-between;

10
components/Filters.tsx
View File

@ -23,9 +23,9 @@ export default class Filters extends React.Component<Props, States> {
public render() {
return (
<aside>
<div>Trier</div>
<label htmlFor="sidebar-sort">Trier</label>
<div className="input icon-right">
<select onChangeCapture={this.onChange}>
<select onChangeCapture={this.onChange} id="sidebar-sort">
<option value="true">plus récent au moins récent</option>
<option value="false">moins récent au plus récent</option>
</select>
@ -33,9 +33,9 @@ export default class Filters extends React.Component<Props, States> {
<ChevronDown />
</i>
</div>
<div>Filtrer</div>
<label htmlFor="sidebar-filter">Filtrer</label>
<div className="input icon-right inline">
<input placeholder="ex: dzeio.com" type="text" ref={this.setInput} onKeyDownCapture={this.onKeyDown} />
<input id="sidebar-filter" placeholder="ex: dzeio.com" type="text" ref={this.setInput} onKeyDownCapture={this.onKeyDown} />
<i>
<ChevronRight onClick={this.onClick} />
</i>
@ -72,7 +72,7 @@ export default class Filters extends React.Component<Props, States> {
flex-grow: 1;
}
div:not(.input) {
div:not(.input), label {
display: block;
padding: 20px;
margin: 10px 0;

16
components/Footer.tsx
View File

@ -10,19 +10,19 @@ export default class Footer extends React.Component<{}, {}> {
<div className="pre"></div>
<div className="footer">
<span>
<a href="mailto:contact@avior.me" target="_blank">
<a aria-label="Email Address" href="mailto:contact@avior.me" target="_blank">
<Mail color={config.colors[500]} />
</a>
<a href="tel:+33672292683" target="_blank">
<a aria-label="Phone Number" href="tel:+33672292683" target="_blank">
<PhoneCall color={config.colors[500]} />
</a>
<a 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 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 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>
@ -64,3 +64,9 @@ export default class Footer extends React.Component<{}, {}> {
)
}
}
/*
rel="nofollow noopener noreferrer"
nofollow links not endorsed by the website
noopener target can't use `window.opener` but still send the HTTP Header Referer
noreferrer dont send the HTTP Header Referer
*/

2
components/Navbar.tsx
View File

@ -58,7 +58,7 @@ export default class Navbar extends React.Component<Props, States> {
<hr />
<div className="head">
<Link href="/">
<a><img src="/logo.svg" alt=""/></a>
<a><img src="/logo.svg" alt="logo"/></a>
</Link>
<span onClick={this.onClick} data-menu={this.refs.menu}>
<Menu size={30} />

20
components/Picture.tsx Normal file
View File

@ -0,0 +1,20 @@
import { Component, CSSProperties } from "react"
interface props {
src: string,
alt?: string,
style?: CSSProperties
parentStyle?: CSSProperties
}
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)} />
</picture>
)
}
}