Updated

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

components/Element.tsx

@@ -37,7 +37,11 @@ export default class Element extends React.Component<Props, {}> {
 			<div>
 				<Link href="/[category]/[slug]" as={this.props.link}>
 					{this.props.image ? (
-						<a><img src={this.props.image} alt={this.props.alt}/></a>
+						<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}/>
 					) : (
 						<div></div>
 					)}

components/Navbar.tsx

@@ -27,9 +27,6 @@ export default class Navbar extends React.Component<Props, States> {
 	}
 
 	public componentDidMount() {
-		if (window.location.origin !== config.domain) {
-			window.location.replace(`${config.domain}${window.location.pathname}`)
-		}
 		window.addEventListener('scroll', this.onScroll)
 	}
 

config.ts

@@ -5,7 +5,7 @@ const config = {
 		500: '#6200EE',
 		600: '#3700B3',
 	},
-	domain: 'https://blog.dzeio.com',
+	domain: 'https://www.avior.me',
 	// domain: 'http://localhost:5000',
 	og: {
 		description: 'Markblog - Simple Markdown blog CMS',

next.config.js

@@ -1,10 +1,11 @@
 const withCSS = require('@zeit/next-stylus')
 const glob = require('glob')
 const withOffline = require('next-offline')
+const withOptimizedImages = require('next-optimized-images');
 const matter = require('gray-matter')
 const fs = require('fs')
 
-module.exports = withOffline(withCSS({
+module.exports = withOptimizedImages(withOffline(withCSS({
 	/* config options here */
 	exportTrailingSlash: true,
 	webpack: function(config) {
@@ -38,4 +39,4 @@ module.exports = withOffline(withCSS({
 
 		return paths
 	}
-}))
+})))

package.json

@@ -9,14 +9,24 @@
 		"start": "next start",
 		"move_next": "mv out/_next out/assets",
 		"serve": "serve out",
+		"prod": "yarn build && yarn export && yarn serve",
 		"lint": "tslint -c tslint.json --project tsconfig.json"
 	},
 	"dependencies": {
 		"@zeit/next-stylus": "^1.0.1",
+		"file-loader": "^5.0.2",
 		"glob": "^7.1.6",
 		"gray-matter": "^4.0.2",
+		"image-trace-loader": "^1.0.2",
+		"imagemin-cli": "^5.1.0",
+		"imagemin-mozjpeg": "^8.0.0",
+		"imagemin-optipng": "^7.1.0",
+		"imagemin-svgo": "^7.0.0",
+		"jimp": "^0.9.3",
+		"lqip-loader": "^2.2.0",
 		"next": "^9.1.7",
 		"next-offline": "^4.0.6",
+		"next-optimized-images": "^2.5.4",
 		"node-emoji": "^1.10.0",
 		"raw-loader": "^4.0.0",
 		"react": "^16.12.0",
@@ -24,10 +34,14 @@
 		"react-feather": "^2.0.3",
 		"react-markdown": "^4.3.0",
 		"replace-in-file": "^5.0.2",
+		"responsive-loader": "^1.2.0",
 		"serve": "^11.3.0",
 		"stylus": "^0.54.7",
+		"svg-sprite-loader": "^4.1.6",
 		"typescript": "^3.7.4",
-    "webpack": "^4.41.5"
+		"webp-loader": "^0.6.0",
+		"webpack": "^4.41.5",
+		"webpack-cli": "^3.3.10"
 	},
 	"devDependencies": {
 		"@types/node": "^13.1.4",

pages/[category]/[slug].tsx

@@ -42,6 +42,7 @@ export default class PostPage extends Component<Props, States> {
 					/>
 
 					<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"
 						property="og:description"
@@ -50,12 +51,17 @@ export default class PostPage extends Component<Props, States> {
 					{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>
 				</Head>
 				{this.props.post === undefined ? (
 					<Error statusCode={404} />
 				) : (
 					<div>
-						<img src={this.props.post.header.image} alt={this.props.post.header.imageAlt} />
+						<picture>
+							<source srcSet={require(`../../images${this.props.post.header.image}?webp`)} type="image/webp" />
+							<source srcSet={require(`../../images${this.props.post.header.image}`)} type="image/png" />
+							<img src={require(`../../images${this.props.post.header.image}`)} alt={this.props.post.header.imageAlt} />
+						</picture>
 						<ReactMarkdown escapeHtml={false} source={emoji.emojify(this.props.post.content, null, (code, name) => `<span class="emoji">${code}</span>`)}/>
 						<h2>Détails</h2>
 						<p>Tags:</p>
@@ -73,6 +79,7 @@ export default class PostPage extends Component<Props, States> {
 						) : undefined}
 					</div>
 				)}
+				<section id="hashover"></section>
 				<style jsx global>{`
 					main h1 {
 						font-size: 50px;
@@ -99,6 +106,9 @@ export default class PostPage extends Component<Props, States> {
 					}
 				`}</style>
 				<style jsx>{`
+					#hashover {
+						padding: 40px 10% 0;
+					}
 					main div {
 						margin-top: -150px;
 						display: flex;

pages/_app.tsx

@@ -16,6 +16,7 @@ class MyApp extends App {
 					<meta key="description" name="description" content={config.og.description}/>
 
 					<meta key="og:url" property="og:url" content={config.domain + this.props.router.asPath} />
+					<title key="title">{config.og.title}</title>
 					<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" />

pages/_document.tsx

@@ -1,4 +1,5 @@
 import Document, { Head, Html, Main, NextScript } from 'next/document'
+import config from '../config'
 
 class MyDocument extends Document {
 	public static async getInitialProps(ctx) {
@@ -6,6 +7,12 @@ class MyDocument extends Document {
 		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>

public/manifest.json

@@ -1,34 +1,14 @@
 {
-	"short_name": "Gitea",
-	"name": "Gitea - Git with a cup of tea",
+	"short_name": "Markblog",
+	"name": "Markblog - Simple Markdown blog CMS",
 	"icons": [
-		{
-			"src": "/img/gitea-lg.png",
-			"type": "image/png",
-			"sizes": "880x880"
-		},
-		{
-			"src": "/img/gitea-sm.png",
-			"type": "image/png",
-			"sizes": "120x120"
-		},
-		{
-			"src": "/img/gitea-512.png",
-			"type": "image/png",
-			"sizes": "512x512"
-		},
-		{
-			"src": "/img/gitea-192.png",
-			"type": "image/png",
-			"sizes": "192x192"
-		}
 	],
 	"serviceworker": {
 		"src": "/service-worker.js"
 	},
 	"start_url": "/",
 	"scope": "/",
-	"background_color": "#FAFAFA",
+	"background_color": "#6200EE",
 	"display": "standalone",
-	"theme_color": "#6cc644"
+	"theme_color": "#6200EE"
 }

public/sea.jpg

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:d5197e04bffa1c569493dc626804404f3e8f113a186ea8114a7711e00f26c51a
-size 108177