theoludwig/FunctionProject
Archived
1
1
Fork 0
Code Pull Requests Actions Releases Activity

frontend: Preloader & 404 Error page

Browse Source
This commit is contained in:
Divlo
2020-03-21 23:03:30 +01:00
parent 3debd85a70
commit fd7fc44fe7
12 changed files with 98 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/components/FunctionCard/FunctionCard.js
View File

@ -1,6 +1,6 @@
import Link from 'next/link';
import { useState, forwardRef } from 'react';
import Loader from '../Loader/Loader';
import Loader from '../Loader';
import './FunctionCard.css';
const FunctionCard = forwardRef((props, ref) => {

23
frontend/components/HeadTag.js
View File

@ -1,33 +1,36 @@
import Head from 'next/head';
const HeadTag = (props) => (
const HeadTag = ({ title, image, description }) => (
<Head>
<title>{props.title}</title>
<link rel="icon" type="image/png" href={props.image} />
<title>{title}</title>
<link rel="icon" type="image/png" href={image} />
{/* Meta Tag */}
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content={props.description} />
<meta name="description" content={description} />
<link rel="canonical" href="function.divlo.fr"/>
<meta name="Language" content="fr" />
<meta name="theme-color" content="#ffd800" />
{/* Open Graph Metadata */}
<meta property="og:title" content={props.title} />
<meta property="og:title" content={title} />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://function.divlo.fr/" />
<meta property="og:image" content={props.image} />
<meta property="og:description" content={props.description} />
<meta property="og:image" content={image} />
<meta property="og:description" content={description} />
<meta property="og:locale" content="fr_FR" />
<meta property="og:site_name" content="FunctionProject" />
{/* Twitter card Metadata */}
<meta name="twitter:card" content="summary" />
<meta name="twitter:description" content={props.description} />
<meta name="twitter:title" content={props.title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:title" content={title} />
<meta name="twitter:site" content="@Divlo_FR" />
<meta name="twitter:image:src" content={props.image} />
<meta name="twitter:image:src" content={image} />
<meta name="twitter:creator" content="@Divlo_FR" />
{/* Preloader script */}
<script src="/js/preloader.js"></script>
</Head>
);

15
frontend/components/Loader.js Normal file
View File

@ -0,0 +1,15 @@
const Loader = ({ width, height, speed }) => (
<svg width={width} height={height} viewBox="0 0 100 100">
<g transform="translate(50 50) rotate(0) scale(1 1) translate(-50 -50)">
<image style={{transformOrigin: "50% 50%", animation: `${speed} linear 0s infinite normal forwards running Loader__spin`}} x="0" y="0" width="100" height="100" href="/images/FunctionProject_icon.png"></image>
</g>
</svg>
);
Loader.defaultProps = {
width: "100px",
height: "100px",
speed: ".9s"
}
export default Loader;

13
frontend/components/Loader/Loader.css
View File

@ -1,13 +0,0 @@
.Loader {
transform-origin: 50% 50%; animation: .9s linear 0s infinite normal forwards running Loader__spin;
}
@keyframes Loader__spin {
0% {
animation-timing-function: cubic-bezier(0.5856,0.0703,0.4143,0.9297);
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

11
frontend/components/Loader/Loader.js
View File

@ -1,11 +0,0 @@
import './Loader.css';
const Loader = ({ width, height }) => (
<svg width={width} height={height} viewBox="0 0 100 100">
<g transform="translate(50 50) rotate(0) scale(1 1) translate(-50 -50)">
<image className="Loader" x="0" y="0" width="100" height="100" href="/images/FunctionProject_icon.png"></image>
</g>
</svg>
);
export default Loader;