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

feat: add PWA support

Browse Source
This commit is contained in:
divlo
2020-12-28 13:07:21 +01:00
parent c594577415
commit c285d3b69e
72 changed files with 2892 additions and 1339 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
website/components/Footer.jsx Normal file
View File

@@ -0,0 +1,33 @@
import Link from 'next/link'
export default function Footer() {
return (
<>
<footer className="footer">
<p className="footer-text text-center">
<Link href="/about">
<a>FunctionProject</a>
</Link>
&nbsp;- Version 2.3 <br />
<a href="https://divlo.fr/" target="_blank" rel="noopener noreferrer">
Divlo
</a>{' '}
| Tous droits réservés
</p>
</footer>
<style jsx>{`
.footer {
border-top: var(--border-header-footer);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.footer-text {
line-height: 2.5;
}
`}</style>
</>
)
}

10
website/components/Footer/Footer.css
View File

@@ -1,10 +0,0 @@
.footer {
border-top: var(--border-header-footer);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.footer-text {
line-height: 2.5;
}

19
website/components/Footer/Footer.jsx
View File

@@ -1,19 +0,0 @@
import Link from 'next/link'
import './Footer.css'
export default function Footer () {
return (
<footer className='footer'>
<p className='footer-text text-center'>
<Link href='/about'>
<a>FunctionProject</a>
</Link>
&nbsp;- Version 2.3 <br />
<a href='https://divlo.fr/' target='_blank' rel='noopener noreferrer'>
Divlo
</a>{' '}
| Tous droits réservés
</p>
</footer>
)
}

1
website/components/FunctionAdmin/AddEditFunction.jsx
View File

@@ -3,7 +3,6 @@ import htmlParser from 'html-react-parser'
import Loader from '../Loader'
import useAPI from '../../hooks/useAPI'
import api from '../../utils/api'
import '../../public/css/pages/admin.css'
const AddEditFunction = props => {
const [, categories] = useAPI('/categories')

2
website/components/FunctionAdmin/EditArticleFunction.jsx
View File

@@ -3,8 +3,6 @@ import dynamic from 'next/dynamic'
import { complex } from '../../utils/sunEditorConfig'
import api from '../../utils/api'
import FunctionArticle from '../FunctionPage/FunctionArticle'
import 'notyf/notyf.min.css'
import '../../public/css/suneditor.min.css'
const SunEditor = dynamic(() => import('suneditor-react'), { ssr: false })

1
website/components/FunctionAdmin/EditFormFunction.jsx
View File

@@ -1,6 +1,5 @@
import { useState } from 'react'
import api from '../../utils/api'
import 'notyf/notyf.min.css'
const EditFormFunction = props => {
const [inputsArray, setInputsArray] = useState(

67
website/components/FunctionCard/FunctionCard.css
View File

@@ -1,67 +0,0 @@
.FunctionCard {
display: flex;
align-items: center;
position: relative;
flex-direction: column;
word-wrap: break-word;
box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, 0.25);
border: 1px solid black;
border-radius: 1rem;
margin: 0 0 50px 0;
cursor: pointer;
transition: all 0.3s;
color: var(--text-color);
text-decoration: none !important;
}
.FunctionCard__container {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
.FunctionCard:hover {
transform: translateY(-7px);
}
/* col-md */
@media (min-width: 768px) {
.FunctionCard {
margin: 0 30px 50px 30px;
}
}
/* col-xl */
@media (min-width: 1200px) {
.FunctionCard {
margin: 0 20px 50px 20px;
}
}
.FunctionCard__top {
display: flex;
flex-direction: column;
align-items: center;
flex-grow: 1;
}
.FunctionCard__image {
width: 150px;
}
.FunctionCard__title {
font-size: 1.4em;
margin: 0;
color: var(--important);
font-weight: 300;
}
.FunctionCard__description {
margin: 20px 0 10px 0;
}
.FunctionCard__info {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.FunctionCard__category {
border-radius: 0.5em;
padding: 0.5em;
margin-right: 20px;
font-size: 16.4px;
}

175
website/components/FunctionCard/FunctionCard.jsx
View File

@@ -3,7 +3,6 @@ import { useState, forwardRef, memo } from 'react'
import date from 'date-and-time'
import Loader from '../Loader'
import { API_URL } from '../../utils/api'
import './FunctionCard.css'
const FunctionCard = memo(
forwardRef((props, ref) => {
@@ -13,66 +12,138 @@ const FunctionCard = memo(
setIsLoading(false)
}
const handleError = event => {
const handleError = (event) => {
event.target.src = API_URL + '/images/functions/default.png'
}
const isFormOrArticle = props.type === 'form' || props.type === 'article'
return (
<Link
{...(props.isAdmin
? {
href: '/admin/[slug]',
as: `/admin/${props.slug}`
}
: {
href: isFormOrArticle
? '/functions/[slug]'
: `/functions/${props.slug}`,
as: `/functions/${props.slug}`
})}
>
{/* FunctionCard a une hauteur pendant chargement */}
<a
ref={ref}
style={
isLoading ? { height: '360px', justifyContent: 'center' } : null
}
className='FunctionCard col-sm-24 col-md-10 col-xl-7'
<>
<Link
{...(props.isAdmin
? {
href: '/admin/[slug]',
as: `/admin/${props.slug}`
}
: {
href: isFormOrArticle
? '/functions/[slug]'
: `/functions/${props.slug}`,
as: `/functions/${props.slug}`
})}
>
{isLoading && <Loader width='125px' height='125px' />}
<div
className={`FunctionCard__container ${isLoading ? 'd-none' : ''}`}
{/* FunctionCard a une hauteur pendant chargement */}
<a
ref={ref}
style={
isLoading ? { height: '360px', justifyContent: 'center' } : null
}
className="FunctionCard col-sm-24 col-md-10 col-xl-7"
>
<div className='FunctionCard__top'>
<img
onLoad={handleLoad}
onError={handleError}
className='FunctionCard__image'
alt={props.title}
src={API_URL + props.image}
/>
<h2 className='FunctionCard__title'>{props.title}</h2>
<p className='FunctionCard__description text-center'>
{props.description}
</p>
{isLoading && <Loader width="125px" height="125px" />}
<div
className={`FunctionCard__container ${isLoading ? 'd-none' : ''}`}
>
<div className="FunctionCard__top">
<img
onLoad={handleLoad}
onError={handleError}
className="FunctionCard__image"
alt={props.title}
src={API_URL + props.image}
/>
<h2 className="FunctionCard__title">{props.title}</h2>
<p className="FunctionCard__description text-center">
{props.description}
</p>
</div>
<div className="FunctionCard__info">
<p
className="FunctionCard__category"
style={{ backgroundColor: props.categorie.color }}
>
{props.categorie.name}
</p>
<p className="FunctionCard__publication-date">
{date.format(new Date(props.createdAt), 'DD/MM/YYYY', false)}
</p>
</div>
</div>
<div className='FunctionCard__info'>
<p
className='FunctionCard__category'
style={{ backgroundColor: props.categorie.color }}
>
{props.categorie.name}
</p>
<p className='FunctionCard__publication-date'>
{date.format(new Date(props.createdAt), 'DD/MM/YYYY', false)}
</p>
</div>
</div>
</a>
</Link>
</a>
</Link>
<style jsx>{`
.FunctionCard {
display: flex;
align-items: center;
position: relative;
flex-direction: column;
word-wrap: break-word;
box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, 0.25);
border: 1px solid black;
border-radius: 1rem;
margin: 0 0 50px 0;
cursor: pointer;
transition: all 0.3s;
color: var(--text-color);
text-decoration: none !important;
}
.FunctionCard__container {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
.FunctionCard:hover {
transform: translateY(-7px);
}
/* col-md */
@media (min-width: 768px) {
.FunctionCard {
margin: 0 30px 50px 30px;
}
}
/* col-xl */
@media (min-width: 1200px) {
.FunctionCard {
margin: 0 20px 50px 20px;
}
}
.FunctionCard__top {
display: flex;
flex-direction: column;
align-items: center;
flex-grow: 1;
}
.FunctionCard__image {
width: 150px;
}
.FunctionCard__title {
font-size: 1.4em;
margin: 0;
color: var(--important);
font-weight: 300;
}
.FunctionCard__description {
margin: 20px 0 10px 0;
}
.FunctionCard__info {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.FunctionCard__category {
border-radius: 0.5em;
padding: 0.5em;
margin-right: 20px;
font-size: 16.4px;
}
`}</style>
</>
)
})
)

33
website/components/FunctionPage/CommentCard/CommentCard.css
View File

@@ -1,33 +0,0 @@
.CommentCard {
display: flex;
flex-direction: column;
word-wrap: break-word;
box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, 0.25);
border: 1px solid black;
border-radius: 0.7em;
margin: 15px 0 15px 0;
}
.CommentCard__container {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
padding: 20px;
}
.CommentCard__user-logo {
border-radius: 50%;
object-fit: cover;
width: 50px;
height: 50px;
cursor: pointer;
}
.CommentCard__message-info {
display: flex;
align-items: center;
margin-left: 10px;
font-size: 16px;
}
.CommentCard__message {
line-height: 1.8;
margin: 15px 0 0 0;
}

1
website/components/FunctionPage/CommentCard/CommentCard.jsx
View File

@@ -6,7 +6,6 @@ import { UserContext } from '../../../contexts/UserContext'
import ReactMarkdown from 'react-markdown'
import CodeBlock from '../../CodeBlock'
import api, { API_URL } from '../../../utils/api'
import './CommentCard.css'
const CommentCard = forwardRef((props, ref) => {
const { isAuth, user } = useContext(UserContext)

7
website/components/FunctionPage/FunctionComments/FunctionComments.css
View File

@@ -1,7 +0,0 @@
.FunctionComments__row {
margin-bottom: 20px;
}
.FunctionComments__textarea {
height: auto;
resize: vertical;
}

1
website/components/FunctionPage/FunctionComments/FunctionComments.jsx
View File

@@ -4,7 +4,6 @@ import { UserContext } from '../../../contexts/UserContext'
import CommentCard from '../CommentCard/CommentCard'
import Loader from '../../Loader'
import api from '../../../utils/api'
import './FunctionComments.css'
const FunctionComments = ({ functionId }) => {
// State pour poster un commentaire

1
website/components/FunctionPage/FunctionComponentTop.jsx
View File

@@ -6,7 +6,6 @@ import { faStar as farStar } from '@fortawesome/free-regular-svg-icons'
import date from 'date-and-time'
import { UserContext } from '../../contexts/UserContext'
import api, { API_URL } from '../../utils/api'
import '../FunctionCard/FunctionCard.css'
const FunctionComponentTop = props => {
const { isAuth, user } = useContext(UserContext)

1
website/components/FunctionPage/FunctionForm.jsx
View File

@@ -6,7 +6,6 @@ import api from '../../utils/api'
import fr from 'date-fns/locale/fr'
import { registerLocale } from 'react-datepicker'
import date from 'date-and-time'
import 'react-datepicker/dist/react-datepicker.css'
registerLocale('fr', fr)

41
website/components/FunctionPage/FunctionTabs.css
View File

@@ -1,41 +0,0 @@
.FunctionTabs__nav {
display: flex;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
border-bottom: 1px solid #d9e2ef;
margin-bottom: -1px;
margin-top: 30px;
}
.FunctionTabs__nav-item {
margin-bottom: -1px;
cursor: pointer;
}
.FunctionTabs__nav-link {
color: var(--text-color);
border: 1px solid #0c0b0b38;
border-bottom: 0px;
border-top-left-radius: 0.375rem;
border-top-right-radius: 0.375rem;
display: block;
padding: 0.5rem 1rem;
transition: 0.2s;
}
.FunctionTabs__nav-link-active {
border-color: #d9e2ef #d9e2ef #fff;
color: var(--important);
}
.FunctionTabs__nav-link:hover {
border-color: #f1f4f8 #f1f4f8 #d9e2ef;
text-decoration: none;
}
@media (max-width: 490px) {
.FunctionTabs__nav {
flex-direction: column;
}
.FunctionTabs__nav-link {
border-color: #f1f4f8 #f1f4f8 #d9e2ef;
}
}

1
website/components/FunctionPage/FunctionTabs.jsx
View File

@@ -1,5 +1,4 @@
import SwipeableViews from 'react-swipeable-views'
import './FunctionTabs.css'
const FunctionTabs = props => {
return (

40
website/components/FunctionsList/FunctionsList.css
View File

@@ -1,40 +0,0 @@
.Functions__title {
padding: 20px 0 20px 0;
margin-bottom: 0;
}
.Functions__form-control {
display: block;
height: calc(1.5em + 0.75rem + 2px);
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.5em;
}
.Functions__search-container {
margin-bottom: 50px;
}
.Functions__select-option {
color: rgb(221, 220, 220);
}
.Functions__search-input {
width: 40%;
}
/* col-sm */
@media (max-width: 576px) {
.Functions__search-container {
flex-direction: column;
align-items: center;
}
.Functions__select {
width: 90%;
margin-bottom: 5px;
}
.Functions__search-input {
width: 90%;
}
}

1
website/components/FunctionsList/FunctionsList.jsx
View File

@@ -4,7 +4,6 @@ import FunctionCard from '../FunctionCard/FunctionCard'
import Loader from '../Loader'
import api from '../../utils/api'
import useAPI from '../../hooks/useAPI'
import './FunctionsList.css'
let pageFunctions = 1
const FunctionsList = props => {

73
website/components/HeadTag.jsx
View File

@@ -1,44 +1,49 @@
import Head from 'next/head'
const HeadTag = ({ title, image, description }) => (
<Head>
<title>{title || ''}</title>
<link rel='icon' type='image/png' href={image} />
const HeadTag = (props) => {
const {
title = 'FunctionProject',
image = '/images/FunctionProject_icon_small.png',
description = "Apprenez la programmation grâce à l'apprentissage par projet alias fonction.",
url = 'https://function.divlo.fr/'
} = props
{/* Meta Tag */}
<meta name='viewport' content='width=device-width, initial-scale=1' />
<meta name='description' content={description} />
<link rel='canonical' href='function.divlo.fr' />
<meta name='Language' content='fr' />
<meta name='theme-color' content='#ffd800' />
return (
<Head>
<title>{title}</title>
<link rel="icon" type="image/png" href={image} />
{/* Open Graph Metadata */}
<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={image} />
<meta property='og:description' content={description} />
<meta property='og:locale' content='fr_FR' />
<meta property='og:site_name' content='FunctionProject' />
{/* Meta Tag */}
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content={description} />
<meta name="Language" content="fr" />
<meta name="theme-color" content="#ffd800" />
{/* Twitter card Metadata */}
<meta name='twitter:card' content='summary' />
<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={image} />
<meta name='twitter:creator' content='@Divlo_FR' />
{/* Open Graph Metadata */}
<meta property="og:title" content={title} />
<meta property="og:type" content="website" />
<meta property="og:url" content={url} />
<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={title} />
{/* Preloader script */}
<script src='/js/preloader.js' />
</Head>
)
{/* Twitter card Metadata */}
<meta name="twitter:card" content="summary" />
<meta name="twitter:description" content={description} />
<meta name="twitter:title" content={title} />
<meta name="twitter:image:src" content={image} />
HeadTag.defaultProps = {
title: 'FunctionProject',
description:
"Apprenez la programmation grâce à l'apprentissage par projet alias fonction.",
image: '/images/FunctionProject_icon_small.png'
{/* PWA Data */}
<link rel="manifest" href="/manifest.json" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<link rel="apple-touch-icon" href={image} />
{/* Preloader script */}
<script src="/js/preloader.js" />
</Head>
)
}
export default HeadTag

167
website/components/Header/Header.css
View File

@@ -1,167 +0,0 @@
/* HEADER */
.Header {
position: fixed;
width: 100%;
top: 0;
left: 0;
right: 0;
z-index: 100;
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-between;
padding: 0.5rem 1rem;
border-bottom: var(--border-header-footer);
background-color: var(--background-color);
}
@media (min-width: 992px) {
.Header {
flex-flow: row nowrap;
justify-content: flex-start;
}
}
.Header > .container {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
@media (min-width: 992px) {
.Header > .container {
flex-wrap: nowrap;
}
}
/* Brand */
.Header__brand-link {
display: inline-block;
padding-top: 0.3125rem;
padding-bottom: 0.3125rem;
margin-right: 1rem;
font-size: 1.25rem;
line-height: inherit;
white-space: nowrap;
}
#brand-link__logo-small-screen {
display: none;
}
@media (max-width: 496px) {
#brand-link__logo {
display: none;
}
.Header__brand-link {
width: 30%;
}
#brand-link__logo-small-screen {
display: inline-block;
}
}
@media (min-width: 992px) {
.Header .Header__navbar {
display: flex;
flex-basis: auto;
}
}
.Header__navbar {
flex-basis: 100%;
flex-grow: 1;
align-items: center;
}
.navbar__list {
display: flex;
flex-direction: row;
margin-left: auto;
}
.navbar__list.navbar__list-active {
margin: 0 !important;
display: flex;
}
@media (max-width: 992px) {
.navbar__list {
display: none;
flex-direction: column;
align-items: center;
padding-left: 0;
list-style: none;
}
}
.navbar-link {
display: block;
padding: 0.5rem 1rem;
}
/* Details Styling */
.navbar-link:hover {
text-decoration: none;
color: rgba(255, 255, 255, 0.75);
}
.navbar-link,
.navbar-link-active {
color: rgba(255, 255, 255, 0.5);
}
.navbar-link-active,
.navbar-link-active:hover,
.Header__brand-link {
color: var(--text-color);
}
.navbar-item {
list-style: none;
}
.navbar-link {
font-size: 16px;
padding: 0.5rem;
}
/* Hamburger Icon */
.Header__hamburger {
display: none;
width: 56px;
height: 40px;
cursor: pointer;
background-color: transparent;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0.25rem;
position: relative;
}
.Header__hamburger > span,
.Header__hamburger > span::before,
.Header__hamburger > span::after {
position: absolute;
width: 22px;
height: 1.3px;
background-color: rgba(255, 255, 255);
}
.Header__hamburger > span {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: background-color 0.3s ease-in-out;
}
.Header__hamburger > span::before,
.Header__hamburger > span::after {
content: '';
transition: transform 0.3s ease-in-out;
}
.Header__hamburger > span::before {
transform: translateY(-8px);
}
.Header__hamburger > span::after {
transform: translateY(8px);
}
.Header__hamburger-active span {
background-color: transparent;
}
.Header__hamburger-active > span::before {
transform: translateY(0px) rotateZ(45deg);
}
.Header__hamburger-active > span::after {
transform: translateY(0px) rotateZ(-45deg);
}
/* Apparition du hamburger */
@media (max-width: 992px) {
.Header__hamburger {
display: flex;
}
}

1
website/components/Header/Header.jsx
View File

@@ -3,7 +3,6 @@ import { UserContext } from '../../contexts/UserContext'
import Link from 'next/link'
import { useRouter } from 'next/router'
import NavigationLink from './NavigationLink'
import './Header.css'
export default function Header () {
const { isAuth, logoutUser, user } = useContext(UserContext)

1
website/components/Header/NavigationLink.jsx
View File

@@ -1,6 +1,5 @@
import Link from 'next/link'
import { useRouter } from 'next/router'
import './Header.css'
export default function NavigationLink (props) {
const { pathname } = useRouter()

47
website/components/UserCard/UserCard.css
View File

@@ -1,47 +0,0 @@
.UserCard {
display: flex;
align-items: center;
position: relative;
flex-direction: column;
word-wrap: break-word;
box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, 0.25);
border: 1px solid black;
border-radius: 1rem;
margin: 0 0 50px 0;
cursor: pointer;
transition: all 0.3s;
padding: 10px;
}
.UserCard__container {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
color: var(--text-color);
text-decoration: none !important;
}
.UserCard:hover {
transform: translateY(-7px);
}
/* col-md */
@media (min-width: 768px) {
.UserCard {
margin: 0 30px 50px 30px;
}
}
/* col-xl */
@media (min-width: 1200px) {
.UserCard {
margin: 0 20px 50px 20px;
}
}
.UserCard__logo {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
}
.UserCard__name {
margin: 30px 0 10px 0;
}

1
website/components/UserCard/UserCard.jsx
View File

@@ -1,7 +1,6 @@
import Link from 'next/link'
import { forwardRef, memo } from 'react'
import { API_URL } from '../../utils/api'
import './UserCard.css'
const UserCard = memo(
forwardRef((props, ref) => {