dzeio/markblog
1
0
Fork 0
mirror of https://github.com/dzeiocom/markblog.git synced 2025-07-28 23:49:50 +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-01-04 17:35:30 +01:00
parent e5fb01eea8
commit a0f1799114
51 changed files with 879 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
pages/index.tsx
View File

@ -1,124 +1,119 @@
import { NextPage } from 'next'
import Head from 'next/head'
import Link from 'next/link'
import '../styl/styl.styl'
import Element from '../components/Element'
import Navbar from '../components/Navbar'
import Header from '../components/Header'
import Menu from '../components/Menu'
import Filters from '../components/Filters'
import Category from '../components/interfaces/Category'
import { Component } from 'react'
import Post, { PostHeader } from '../components/Post'
interface Props {
userAgent?: string
}
interface el {
link: string,
title: string,
img: string,
date: Date
}
interface el extends PostHeader {}
interface States {
elements: el[]
loaded: boolean
asideHeight: number
categories: string[]
}
// export const config = {amp: 'hybrid'}
const categories: Category[] = [
{
name: "test",
slug: "pouet"
}
]
const elements: el[] = [
{link:"/studiomoto", title:"Studiomoto, Site de référencement d'événement moto en France", img:"/uploads/stm.png", date: new Date()},
{link:"/studiomoto", title:"Studiomoto, Site de référencement d'événement moto en France", img:"/uploads/stm.png", date: new Date()},
{link:"/studiomoto", title:"Studiomoto, Site de référencement d'événement moto en France", img:"/uploads/stm.png", date: new Date()},
{link:"/studiomoto", title:"Studiomoto, Site de référencement d'événement moto en France", img:"/uploads/stm.png", date: new Date()},
{link:"/studiomoto", title:"Studiomoto, Site de référencement d'événement moto en France", img:"/uploads/stm.png", date: new Date()},
{link:"/studiomoto", title:"Studiomoto, Site de référencement d'événement moto en France", img:"/uploads/stm.png", date: new Date()},
{link:"/studiomoto", title:"Dzeio.io, Services en ligne pour vous simplifier la vie !", img:"/sea.jpg", date: new Date()},
{link:"/studiomoto", title:"Loram ipsum dolor sit amet", img:"/uploads/stm.png", date: new Date()},
{link:"/studiomoto", title:"j'aime les licornes et leurs jolie corne", img:"/uploads/stm.png", date: new Date()},
{link:"/studiomoto", title:"Pokémon ! attrapez les tous !", img:"/uploads/stm.png", date: new Date()},
{link:"/studiomoto", title:"abcde", img:"/uploads/stm.png", date: new Date()},
{link:"/studiomoto", title:"def", img:"/uploads/stm.png", date: new Date()},
{link:"/studiomoto", title:"abc", img:"/uploads/stm.png", date: new Date()},
{link:"/studiomoto", title:"Studiomoto, Site de référencement d'événement moto en France", img:"/uploads/stm.png", date: new Date()},
{link:"/studiomoto", title:"Studiomoto, Site de référencement d'événement moto en France", img:"/uploads/stm.png", date: new Date()},
{link:"/studiomoto", title:"Studiomoto, Site de référencement d'événement moto en France", img:"/uploads/stm.png", date: new Date()},
{link:"/studiomoto", title:"Studiomoto, Site de référencement d'événement moto en France", img:"/uploads/stm.png", date: new Date()}
]
let elements: PostHeader[] = []
export default class Page extends Component<Props, States> {
onQuery = (query: string) => {
console.log(`query: ${query}`)
onQuery = async (query: string, recent: boolean = true) => {
// console.log(`query: ${query}`)
const t= elements.filter(el => {
return el.title.toLowerCase().includes(query.toLowerCase())
})
if (recent) {
t.sort((a, b) => {
return (a.date < b.date) ? 1 : -1
})
} else {
t.sort((a, b) => {
return (a.date > b.date) ? 1 : -1
})
}
this.setState({
elements: t
})
}
onHeight = (height: number) => {
onHeight = async (height: number) => {
this.setState({
asideHeight: height
})
}
componentDidMount() {
async componentDidMount() {
const posts = await Post.fetchAll()
const header: Array<PostHeader> = []
let cats: Array<string> = []
posts.forEach(el => {
el.fetchSync()
header.push(el.header)
cats.push(...el.header.tags)
})
header.sort((a, b) => {
return (a.date < b.date) ? 1 : -1
})
cats.sort((a, b) => (a < b) ? -1 : 1)
elements = header
this.setState({
elements
elements: header,
loaded: true,
categories: cats.filter((item, pos) => {return cats.indexOf(item) === pos})
})
}
render() {
return (
<div>
<Head>
<link rel="manifest" href="/manifest.json" />
</Head>
<Navbar>
<Menu />
</Navbar>
<Header />
<main>
<span>
{this.state && this.state.elements.map((el, index) => (
<Element key={index} link={el.link} title={el.title} image={el.img} date={el.date} />
))}
</span>
<Filters categories={categories} onQuery={this.onQuery} onHeight={this.onHeight}/>
</main>
<main>
<span>
{this.state && this.state.elements && this.state.elements.length !== 0 ? this.state.elements.map((el, index) => (
<Element key={index} link={"/"+el.category.toLowerCase() + "/" + el.id} title={el.title} image={el.image} 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}/>
<style jsx>{`
span {
span:not(.emoji) {
display: flex;
flex-wrap: wrap;
justify-content: center;
flex-grow: 1;
}
main {
display: flex;
flex-direction: column-reverse;
}
div {
font-size: 36px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
main span {
flex-grow: 1;
}
@media (min-width: 820px) and (min-height: ${this.state && this.state.asideHeight ? this.state.asideHeight+100 : 600}px) {
main span {
@media (min-width: 820px) and (min-height: ${this.state && this.state.asideHeight ? this.state.asideHeight+100 : 600}px) {
span {
max-width: calc(100% - 400px);
}
main {
flex-direction: row;
}
}
`}</style>
</div>
</main>
)
}
}