v1

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

LICENSE.md

@@ -0,0 +1,23 @@
+
+MIT License
+
+Copyright (c) 2020-present Florian Bouillon and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -2,4 +2,31 @@
 
 My personnal Portfolio and blog
 
-_Instructions will come later here 😄_
+## INSTALL
+
+```sh
+git clone https://git.delta-wings.net/dzeio/markblog.git
+cd markblog
+```
+
+## Editing the Website
+
+### Config
+
+you can simply edit the `config.ts` file to change basic elements
+
+### Posts
+
+```sh
+yarn dev
+```
+then start editing the files in the `posts` folder
+
+## Deploy
+
+```sh
+yarn build
+yarn export
+```
+
+then upload the content of the `out` folder on your website

components/Button.tsx

@@ -1,32 +0,0 @@
-import { Component } from "react";
-import { type } from "os";
-
-import '../styl/styl.styl'
-
-
-export enum ButtonType {
-	NORMAL = "",
-	OUTLINE = "outline",
-	GHOST = "ghost"
-}
-
-interface Props {
-	text: string
-	type?: ButtonType
-	// src: string
-	// alt?: string
-	// layout?: string
-}
-
-export default class DWButton extends Component<Props, {}> {
-
-	constructor(props: Props) {
-		super(props)
-	}
-
-	render() {
-		return (
-			<button className={this.props.type}>{this.props.text}</button>
-		)
-	}
-}

components/Element.tsx

@@ -39,7 +39,7 @@ export default class Element extends React.Component<Props, {}> {
 		const t = `${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()}`
 		return (
 			<div>
-				<Link href={this.props.link}>
+				<Link href="/[category]/[slug]" as={this.props.link}>
 					{this.props.image ? (
 						<a><img src={this.props.image} alt={this.props.alt}/></a>
 					) : (
@@ -49,10 +49,10 @@ export default class Element extends React.Component<Props, {}> {
 
 				<i>Le {t}</i>
 				<span>
-					<Link href={this.props.link}>
+					<Link href="/[category]/[slug]" as={this.props.link}>
 						<a>{this.props.title}</a>
 					</Link>
-					<Link as={this.props.link} href="/[category]/[slug]">
+					<Link href="/[category]/[slug]" as={this.props.link}>
 						<a><ChevronRight size={48}/></a>
 					</Link>
 				</span>

components/Filters.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import Link from 'next/link'
 import '../styl/styl.styl'
 import { ChevronRight, ChevronDown } from 'react-feather'
+import config from '../config'
 
 interface Props {
 	categories?: string[]
@@ -106,7 +107,7 @@ export default class Filters extends React.Component<Props, States> {
 						display: block;
 						padding: 20px;
 						margin: 10px 0;
-						background: linear-gradient(90deg, #45CAFC 0%, #4285F4 92.19%);
+						background: linear-gradient(90deg, ${config.colors[400]} 0%, ${config.colors[600]} 92.19%);
 						color: white;
 						font-size: 24px;
 						text-transform: uppercase;

components/Footer.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { PhoneCall, Mail, GitHub, Twitter, Linkedin } from 'react-feather'
 import Link from 'next/link'
+import config from '../config'
 
 interface Props {}
 
@@ -17,19 +18,19 @@ export default class Footer extends React.Component<Props, States> {
 				<div className="footer">
 					<span>
 						<a href="mailto:contact@avior.me" target="_blank">
-							<Mail color="#4285F4" />
+							<Mail color={config.colors[500]} />
 						</a>
 						<a href="tel:+33672292683" target="_blank">
-							<PhoneCall color="#4285F4" />
+							<PhoneCall color={config.colors[500]} />
 						</a>
 						<a href="https://git.delta-wings.net" target="_blank">
-							<GitHub color="#4285F4" />
+							<GitHub color={config.colors[500]} />
 						</a>
 						<a href="https://twitter.com/aviortheking" target="_blank">
-							<Twitter color="#4285F4" />
+							<Twitter color={config.colors[500]} />
 						</a>
 						<a href="https://www.linkedin.com/in/florian-bouillon/" target="_blank">
-							<Linkedin color="#4285F4" />
+							<Linkedin color={config.colors[500]} />
 						</a>
 					</span>
 				</div>

components/Header.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import config from '../config'
 
 interface Props {
 }
@@ -14,7 +15,7 @@ export default class Header extends React.Component<Props, {}> {
 				<style jsx>{`
 					div {
 						position: relative;
-						background: url('/clouds.svg'), linear-gradient(90deg, #45CAFC 0%, #4285F4 92.19%);
+						background: url('/clouds.svg'), linear-gradient(90deg, ${config.colors[400]} 0%, ${config.colors[600]} 92.19%);
 						background-repeat: repeat-x;
 						background-position: bottom;
 						min-height: 207px;

components/Layout.tsx

@@ -3,6 +3,7 @@ import Navbar from './Navbar'
 import Menu from './Menu'
 import Header from './Header'
 import Footer from './Footer'
+import config from '../config'
 
 interface Props {
 	hasHeader?: boolean
@@ -37,7 +38,7 @@ export default class Layout extends React.Component<Props, {}> {
 						height: 100%;
 					}
 					::selection {
-						background: #4285F4;
+						background: ${config.colors[500]};
 						color: #FFF;
 					}
 					body {

components/Menu.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import Link from 'next/link'
+import config from '../config'
 
 interface Props {
 }
@@ -37,7 +38,7 @@ export default class Menu extends React.Component<Props, {}> {
 				}
 
 				a:hover {
-					background: #45CAFC20
+				background: ${config.colors[500]}20
 				}
 		`}</style>
 		</ul>

components/Navbar.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Menu } from 'react-feather'
-import { timingSafeEqual } from 'crypto'
 import Link from 'next/link'
+import config from '../config'
 
 interface Props {
 	height?: number
@@ -36,6 +36,9 @@ export default class Navbar extends React.Component<Props, States> {
 	}
 
 	componentDidMount() {
+		if (window.location.origin !== config.domain) {
+			window.location.replace(`${config.domain}${window.location.pathname}`)
+		}
 		window.addEventListener('scroll', this.onScroll)
 	}
 
@@ -103,7 +106,7 @@ export default class Navbar extends React.Component<Props, States> {
 						height: 10px;
 						margin: 0;
 						border: none;
-						background: linear-gradient(90deg, #45CAFC 0%, #4285F4 92.19%);
+						background: linear-gradient(90deg, ${config.colors[400]} 0%, ${config.colors[600]} 92.19%);
 					}
 					.menu {
 						opacity: 0;

components/Post.ts

@@ -16,6 +16,8 @@ export interface PostHeader {
 	date: Date
 	url?: string
 	tags?: string[]
+	modifiedDate?: Date
+	short?: string
 }
 
 export default class Post implements PostInterface {

config.ts

@@ -0,0 +1,35 @@
+const config = {
+	domain: "https://www.avior.me",
+	og: {
+		title: "Avior.me",
+		description: "Avior.me, Site du portfolio de Avior :D"
+	},
+	colors: {
+		400: "#BB86FC",
+		500: "#6200EE",
+		rgb500: "98, 0, 238",
+		600: "#3700B3"
+	}
+}
+
+export default config
+
+/*
+	"@zeit/next-stylus": "^1.0.1",	MIT
+	"glob": "^7.1.6",				ISC
+	"gray-matter": "^4.0.2",		MIT
+	"next": "^9.1.7",				MIT
+	"next-offline": "^4.0.6",		MIT
+	"raw-loader": "^4.0.0",			MIT
+	"react": "^16.12.0",			MIT
+	"react-dom": "^16.12.0",		MIT
+	"react-feather": "^2.0.3",		MIT
+	"react-markdown": "^4.3.0",		MIT
+	"replace-in-file": "^5.0.2",	MIT
+	"serve": "^11.3.0",				APACHE-2.0
+	"stylus": "^0.54.7",			MIT
+	"typescript": "^3.7.4",			APACHE-2.0
+	"webpack": "^4.41.5",			MIT
+	"@types/node": "^13.1.4",		MIT
+	"@types/react": "^16.9.17"		MIT
+*/

next.config.js

@@ -3,14 +3,10 @@ const glob = require('glob')
 const withOffline = require('next-offline')
 const matter = require('gray-matter')
 const fs = require('fs')
-// import posts from './posts/pages.json.ts'
+
-// const posts = require('./posts/pages.json.ts')
-// const t = require('./pages/portfolio/')
 module.exports = withOffline(withCSS({
 	/* config options here */
 	exportTrailingSlash: true,
-	// cssModules: true,
-	// target: 'serverless',
 	webpack: function(config) {
 		config.module.rules.push({
 			test: /\.md$/,

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "website",
+  "name": "@dzeio/markblog",
-  "version": "0.1.0",
+  "version": "1.0.0",
-  "private": true,
+  "license": "MIT",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -11,25 +11,24 @@
     "serve": "serve out"
   },
   "dependencies": {
-    "@zeit/next-css": "^1.0.1",
     "@zeit/next-stylus": "^1.0.1",
-    "fs": "^0.0.1-security",
     "glob": "^7.1.6",
     "gray-matter": "^4.0.2",
-    "next": "9.1.5",
+    "next": "^9.1.7",
     "next-offline": "^4.0.6",
     "raw-loader": "^4.0.0",
-    "react": "16.12.0",
+    "react": "^16.12.0",
-    "react-dom": "16.12.0",
+    "react-dom": "^16.12.0",
     "react-feather": "^2.0.3",
-    "react-markdown": "^4.2.2",
+    "react-markdown": "^4.3.0",
-    "replace-in-file": "^4.2.0",
+    "replace-in-file": "^5.0.2",
-    "serve": "^11.2.0",
+    "serve": "^11.3.0",
-    "stylus": "^0.54.7"
+    "stylus": "^0.54.7",
+    "typescript": "^3.7.4",
+    "webpack": "^4.41.5"
   },
   "devDependencies": {
-    "@types/node": "^12.12.17",
+    "@types/node": "^13.1.4",
-    "@types/react": "^16.9.16",
+    "@types/react": "^16.9.17"
-    "typescript": "^3.7.3"
   }
 }

pages/[category]/[slug].tsx

@@ -5,6 +5,8 @@ import Post from "../../components/Post"
 import ReactMarkdown from 'react-markdown'
 import Error from "../_error"
 import Link from "next/link"
+import Head from "next/head"
+import config from "../../config"
 
 interface Props {
 	post: Post
@@ -18,6 +20,16 @@ export default class PostPage extends Component<Props, States> {
 	public render() {
 		return (
 			<main>
+				<Head>
+					<title key="title">{`${this.props.post.title} - ${config.og.title}`}</title>
+					<meta key="description" name="og:description" 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:description" property="og:description" 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}`}/>
+					) : undefined}
+				</Head>
 				{this.props.post === undefined ? (
 					<Error statusCode={404} />
 				) : (
@@ -48,7 +60,7 @@ export default class PostPage extends Component<Props, States> {
 					main h2 {
 						font-size: 40px;
 						text-align: center;
-						text-shadow: 4px 4px 0px rgba(66, 133, 244, 0.5);
+						text-shadow: 4px 4px 0px rgba(${config.colors.rgb500}, 0.5);
 					}
 					main h2::selection {
 						text-shadow: 4px 4px 0px rgba(255, 255, 255, 0.5);

pages/_app.tsx

@@ -2,12 +2,23 @@ import React from 'react'
 import App from 'next/app'
 import '../styl/styl.styl'
 import Layout from '../components/Layout'
+import Head from 'next/head'
+import config from '../config'
 
 class MyApp extends App {
 	render() {
 		const { Component, pageProps } = this.props
+
 		return(
 			<Layout>
+				<Head>
+					<meta key="description" name="description" content={config.og.description}/>
+
+					<meta key="og:url" property="og:url" content={config.domain + this.props.router.asPath} />
+					<meta key="og:title" property="og:title" content={config.og.title}/>
+					<meta key="og:description" property="og:description" content={config.og.description}/>
+					<meta key="og:type" property="og:type" content="website" />
+				</Head>
 				<Component {...pageProps} />
 			</Layout>
 		)

pages/_document.tsx

@@ -3,6 +3,7 @@
 
 // ./pages/_document.js
 import Document, { Html, Head, Main, NextScript } from 'next/document'
+import config from '../config'
 
 class MyDocument extends Document {
 	static async getInitialProps(ctx) {
@@ -15,6 +16,11 @@ class MyDocument extends Document {
 			<Html>
 				<Head>
 					<link rel="manifest" href="/manifest.json" />
+
+					<meta property="twitter:card" content="summary" />
+					<meta property="twitter:site" content="aviortheking" />
+					<meta property="twitter:creator" content="aviortheking" />
+					<meta property="twitter:site:id" content="3240791182" />
 				</Head>
 				<body>
 					<Main />

pages/index.tsx

@@ -90,9 +90,11 @@ export default class Page extends Component<Props, States> {
 						justify-content: center;
 						flex-grow: 1;
 					}
+
 					main {
 						display: flex;
-						flex-direction: column-reverse;
+						flex-direction: column;
+						align-items: center;
 					}
 
 					div {
@@ -109,6 +111,7 @@ export default class Page extends Component<Props, States> {
 						}
 						main {
 							flex-direction: row;
+							align-items: stretch;
 						}
 					}
 				`}</style>

posts/portfolio/dzeio.md

@@ -3,7 +3,8 @@ title: DZE.IO
 id: dzeio
 image: /uploads/dzeio.png
 imageAlt: Logo & Description de dze.io
-date: 2020-06-01
+date: 2019-05-12
+modifiedDate: 2020-01-04
 category: Portfolio
 url: https://dze.io/
 tags: ["Golang", "Javascript", "Typescript", "CSS", "Stylus"]

posts/portfolio/studiomoto.md

@@ -1,12 +1,14 @@
 ---
-title: Studiomoto
+title: Studiomoto, Site de référencement d’événement Moto en France
 id: studiomoto
 image: /uploads/stm.png
 imageAlt: Logo & Description de studiomoto
 date: 2018-10-10
+modifiedDate: 2020-01-04
 category: Portfolio
 url: https://www.studiomoto.fr/
 tags: ["PHP", "Symfony", "Javascript", "Typescript", "CSS", "Stylus"]
+short: "Studiomoto, Site de référencement d’événement Moto en France"
 ---
 
 # Studiomoto, Site de référencement d’événement Moto en France

public/.htaccess

@@ -0,0 +1 @@
+ErrorDocument 404 /404.html

public/logo.svg

@@ -1,3 +1,3 @@
 <svg width="150" height="150" viewBox="0 0 150 150" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M72.8109 101.066L25 128.807L44.2174 84.4441L72.8109 101.066ZM79.7067 24.0024L125 128.807L45.0697 82.3519L70.2925 24.0024C71.8679 22.4526 73.4308 21.8064 74.9806 22.0652C76.556 21.7808 78.1321 22.427 79.7067 24.0024Z" fill="#4285F4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M72.8109 101.066L25 128.807L44.2174 84.4441L72.8109 101.066ZM79.7067 24.0024L125 128.807L45.0697 82.3519L70.2925 24.0024C71.8679 22.4526 73.4308 21.8064 74.9806 22.0652C76.556 21.7808 78.1321 22.427 79.7067 24.0024Z" fill="#6200EE"/>
 </svg>

styl/include/_button.styl

@@ -1,10 +1,10 @@
-$color = #4285F4
+$color = #6200EE
-$hover = #70A8F8
+$hover = #BB86FC
-$active = #3066D1
+$active = #3700B3
 
 $outline-shadow = inset 0 0 0 2px $color
-$outline-hover = rgba(179, 216, 253, 0.3)
+$outline-hover = rgba($hover, 0.3)
-$outline-active = rgba(66, 133, 244, 0.3)
+$outline-active = rgba($active, 0.3)
 
 $active-shadow = 0 0 0 3px rgba(204,204,204,.75)
 

styl/include/_input.styl

@@ -1,4 +1,4 @@
-$color = #4285F4
+$color = #6200EE
 
 .input
 	position relative
@@ -16,6 +16,7 @@ $color = #4285F4
 		border-radius 10px
 		background-color #EEE
 		border none
+		color black
 		padding 15px 20px
 		margin 3px
 		box-shadow inset 0 0 0 2px #BDBDBD
@@ -72,11 +73,19 @@ $color = #4285F4
 		height 24px
 		position absolute
 		left 20px
-		top 18px
+		top 50%
+		transform translateY(-50%)
 		// pointer-events none
 		color #666
 		transition color 200ms cubic-bezier(.2,0,.6,1)
 
+	select + i {
+		pointer-events none
+	}
+
+	select option:hover
+		box-shadow 0 0 10px 100px $color inset
+
 	&.icon-right i
 		left initial
 		right 20px