mirror of
https://github.com/dzeiocom/markblog.git
synced 2025-04-22 02:42:14 +00:00
v1
Signed-off-by: Avior <florian.bouillon@delta-wings.net>
This commit is contained in:
parent
a0f1799114
commit
c2dbe618c7
23
LICENSE.md
Normal file
23
LICENSE.md
Normal file
@ -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.
|
||||
29
README.md
29
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
|
||||
|
||||
@ -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>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -16,6 +16,8 @@ export interface PostHeader {
|
||||
date: Date
|
||||
url?: string
|
||||
tags?: string[]
|
||||
modifiedDate?: Date
|
||||
short?: string
|
||||
}
|
||||
|
||||
export default class Post implements PostInterface {
|
||||
|
||||
35
config.ts
Normal file
35
config.ts
Normal file
@ -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
|
||||
*/
|
||||
@ -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$/,
|
||||
|
||||
29
package.json
29
package.json
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "website",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"name": "@dzeio/markblog",
|
||||
"version": "1.0.0",
|
||||
"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-dom": "16.12.0",
|
||||
"react": "^16.12.0",
|
||||
"react-dom": "^16.12.0",
|
||||
"react-feather": "^2.0.3",
|
||||
"react-markdown": "^4.2.2",
|
||||
"replace-in-file": "^4.2.0",
|
||||
"serve": "^11.2.0",
|
||||
"stylus": "^0.54.7"
|
||||
"react-markdown": "^4.3.0",
|
||||
"replace-in-file": "^5.0.2",
|
||||
"serve": "^11.3.0",
|
||||
"stylus": "^0.54.7",
|
||||
"typescript": "^3.7.4",
|
||||
"webpack": "^4.41.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^12.12.17",
|
||||
"@types/react": "^16.9.16",
|
||||
"typescript": "^3.7.3"
|
||||
"@types/node": "^13.1.4",
|
||||
"@types/react": "^16.9.17"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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>
|
||||
)
|
||||
|
||||
@ -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 />
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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"]
|
||||
|
||||
@ -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
|
||||
|
||||
1
public/.htaccess
Normal file
1
public/.htaccess
Normal file
@ -0,0 +1 @@
|
||||
ErrorDocument 404 /404.html
|
||||
@ -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>
|
||||
|
||||
|
Before Width: | Height: | Size: 390 B After Width: | Height: | Size: 390 B |
@ -1,10 +1,10 @@
|
||||
$color = #4285F4
|
||||
$hover = #70A8F8
|
||||
$active = #3066D1
|
||||
$color = #6200EE
|
||||
$hover = #BB86FC
|
||||
$active = #3700B3
|
||||
|
||||
$outline-shadow = inset 0 0 0 2px $color
|
||||
$outline-hover = rgba(179, 216, 253, 0.3)
|
||||
$outline-active = rgba(66, 133, 244, 0.3)
|
||||
$outline-hover = rgba($hover, 0.3)
|
||||
$outline-active = rgba($active, 0.3)
|
||||
|
||||
$active-shadow = 0 0 0 3px rgba(204,204,204,.75)
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user