sebsn86
/
nx-guitar-school
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add dark mode compatibility

Browse Source
feature/homepage
Näser 3 years ago
parent 8c28b6e25a
commit 90b2218b5a
14 changed files with 159 additions and 72 deletions
Show Stats Download Patch File Download Diff File

4
apps/website/components/blog-search/blog-search.tsx
Unescape View File

@ -55,7 +55,9 @@ export function BlogSearch(props: BlogSearchProps) {
const onSearchChange = (e) => subject.next(e.target.value); const onSearchChange = (e) => subject.next(e.target.value);
return ( return (
<div className={styles['container'] + " bg-white rounded-lg mx-2 lg:mx-0 mt-5 lg:mt-0 p-5 mb-5 shadow-sm"}> <div className={styles['container'] + " rounded-lg mx-2 lg:mx-0 mt-5 lg:mt-0 p-5 mb-5 shadow-sm" +
" bg-white" +
" dark:bg-gray-800"}>
<form> <form>
<label htmlFor="default-search" <label htmlFor="default-search"
className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label> className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>

54
apps/website/components/card-blog-details/card-blog-details.tsx
Unescape View File

@ -13,9 +13,8 @@ import {
WhatsappShareButton WhatsappShareButton
} from "react-share"; } from "react-share";
import {environment} from "../../environments/environment";
import styles from './card-blog-details.module.scss'; import styles from './card-blog-details.module.scss';
import {getCategoryUrl, getPostUrl, getStrapiImage} from "../../libs/utils";
/* eslint-disable-next-line */ /* eslint-disable-next-line */
export interface CardBlogDetailsProps { export interface CardBlogDetailsProps {
@ -23,70 +22,78 @@ export interface CardBlogDetailsProps {
} }
export function CardBlogDetails({item}: CardBlogDetailsProps) { export function CardBlogDetails({item}: CardBlogDetailsProps) {
const {alternativeText, width, height} = item.image.data.attributes; const {width, height} = item.image.data.attributes;
const {slug} = item.category.data.attributes;
const {title} = item; const {title} = item;
const shareUrl = `${environment.appUrl}/blog/${slug}/${item.slug}`; const shareUrl = getPostUrl(item);
return ( return (
<div className={styles['container'] + " bg-white rounded-l p-8 overflow-hidden shadow-sm"}> <div className={styles['container'] + " rounded-l p-8 overflow-hidden shadow-sm" +
" bg-white" +
" dark:bg-gray-800"}>
<header className="md:flex flex-col"> <header className="md:flex flex-col">
<h2 className="text-3xl mb-5 text-bold"> <h2 className="text-3xl mb-5 text-bold">
{delve(item, 'title', 'N/A')} {delve(item, 'title', 'N/A')}
</h2> </h2>
<section className="flex items-center justify-between"> <section className="flex items-center justify-between">
<div className="flex"> <div className="flex">
<a href="#" className="flex items-center"> <a href="#"
className="flex items-center">
<img <img
src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=731&amp;q=80" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=731&amp;q=80"
alt="avatar" className="mr-4 w-10 h-10 object-cover rounded-full hidden sm:block"/> alt="avatar"
className="mr-4 w-10 h-10 object-cover rounded-full hidden sm:block" />
<h3 className="text-gray-700 text-normal font-bold hover:underline text-slate-400">Par Alex John</h3> <h3 className="text-gray-700 text-normal font-bold hover:underline text-slate-400">Par Alex John</h3>
</a> </a>
</div> </div>
<div className="flex flex-col"> <div className="flex flex-col">
<a href={'/blog/' + delve(item, 'category.data.attributes.slug', '')} <a href={getCategoryUrl(item)}
className="px-2 py-1 text-sm bg-gray-600 text-gray-100 font-bold rounded hover:bg-gray-500"> className="px-2 py-1 text-sm bg-gray-600 text-gray-100 font-bold rounded hover:bg-gray-500">
{delve(item, 'category.data.attributes.name', 'N/A')} {delve(item, 'category.data.attributes.name', 'N/A')}
</a> </a>
</div> </div>
</section> </section>
</header> </header>
<hr className="border-gray-100 my-5 sm:mx-auto dark:border-gray-700 container mx-auto"/> <hr className="border-gray-100 my-5 sm:mx-auto dark:border-gray-700 container mx-auto" />
<main> <main>
<section> <section>
<div className="whitespace-pre-wrap text-lg font-bold text-slate-500" <div className="whitespace-pre-wrap text-lg font-bold text-slate-500
dangerouslySetInnerHTML={{__html: delve(item, 'description', 'N/A')}}/> text-gray-600
dark:text-gray-300"
dangerouslySetInnerHTML={{__html: delve(item, 'description', 'N/A')}} />
<NextImage <NextImage
layout="responsive" layout="responsive"
width={width} width={width}
height={height} height={height}
objectFit="contain" objectFit="contain"
className="rounded-lg my-5" className="rounded-lg my-5"
src={environment.strapiUrl + delve(item, 'image.data.attributes.url', '')} src={getStrapiImage(item, "default")}
alt={delve(item, 'title', 'N/A')}/> alt={delve(item, 'title', 'N/A')} />
</section> </section>
<section className="whitespace-pre-wrap text-lg text-slate-400" <section className="whitespace-pre-wrap text-lg text-slate-400"
dangerouslySetInnerHTML={{__html: delve(item, 'content', 'N/A')}}/> dangerouslySetInnerHTML={{__html: delve(item, 'content', 'N/A')}} />
<hr className="border-gray-100 my-5 sm:mx-auto dark:border-gray-700 container mx-auto"/> <hr className="border-gray-100 my-5 sm:mx-auto dark:border-gray-700 container mx-auto" />
<section className="flex justify-between"> <section className="flex justify-between">
<div> <div>
<h4 className="font-bold text-lg text-gray-400 mb-2">Partager cet article</h4> <h4 className="font-bold text-lg text-gray-400 mb-2">Partager cet article</h4>
<div className="grid grid-cols-5 gap-2"> <div className="grid grid-cols-5 gap-2">
<FacebookShareButton url={shareUrl}> <FacebookShareButton url={shareUrl}>
<FacebookIcon size={32} round/> <FacebookIcon size={32}
round />
</FacebookShareButton> </FacebookShareButton>
<FacebookMessengerShareButton <FacebookMessengerShareButton
url={shareUrl} url={shareUrl}
appId="521270401588372" appId="521270401588372"
className="Demo__some-network__share-button" className="Demo__some-network__share-button"
> >
<FacebookMessengerIcon size={32} round/> <FacebookMessengerIcon size={32}
round />
</FacebookMessengerShareButton> </FacebookMessengerShareButton>
<TwitterShareButton <TwitterShareButton
url={shareUrl} url={shareUrl}
title={title} title={title}
className="Demo__some-network__share-button" className="Demo__some-network__share-button"
> >
<TwitterIcon size={32} round/> <TwitterIcon size={32}
round />
</TwitterShareButton> </TwitterShareButton>
<WhatsappShareButton <WhatsappShareButton
url={shareUrl} url={shareUrl}
@ -94,10 +101,13 @@ export function CardBlogDetails({item}: CardBlogDetailsProps) {
separator=":: " separator=":: "
className="Demo__some-network__share-button" className="Demo__some-network__share-button"
> >
<WhatsappIcon size={32} round/> <WhatsappIcon size={32}
round />
</WhatsappShareButton> </WhatsappShareButton>
<LinkedinShareButton url={shareUrl} className="Demo__some-network__share-button"> <LinkedinShareButton url={shareUrl}
<LinkedinIcon size={32} round/> className="Demo__some-network__share-button">
<LinkedinIcon size={32}
round />
</LinkedinShareButton> </LinkedinShareButton>
</div> </div>
</div> </div>

42
apps/website/components/card-blog/card-blog.tsx
Unescape View File

@ -1,9 +1,8 @@
import delve from 'dlv'; import delve from 'dlv';
import { format } from 'date-fns'; import {format} from 'date-fns';
import {environment} from '../../environments/environment';
import styles from './card-blog.module.scss'; import styles from './card-blog.module.scss';
import {getCategoryUrl, getPostUrl} from "../../libs/utils"; import {getCategoryUrl, getPostUrl, getStrapiImage} from "../../libs/utils";
/* eslint-disable-next-line */ /* eslint-disable-next-line */
export interface CardBlogProps { export interface CardBlogProps {
@ -12,38 +11,53 @@ export interface CardBlogProps {
export function CardBlog({item}: CardBlogProps) { export function CardBlog({item}: CardBlogProps) {
return ( return (
<div className={styles['card-blog-container'] + " bg-white rounded-l overflow-hidden shadow-sm"}> <div className={styles['card-blog-container'] + " rounded-l overflow-hidden shadow-sm" +
" bg-white" +
" dark:bg-gray-800"}>
<div className="md:flex"> <div className="md:flex">
<div className="md:shrink-0"> <div className="md:shrink-0">
<img className="h-48 w-full object-cover md:h-full md:w-48" <img className="h-48 w-full object-cover md:h-full md:w-48"
src={environment.strapiUrl + delve(item, 'attributes.image.data.attributes.formats.medium.url', '')} src={getStrapiImage(item, 'medium')}
alt="Modern building architecture"/> alt="Modern building architecture" />
</div> </div>
<div className="p-8 w-full"> <div className="p-8 w-full">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<span <span
className="font-light text-gray-600 text-sm">{format(new Date(delve(item, 'attributes.publishedAt', 'Jun 1, 2020')),'dd/MM/yyyy')}</span> className="font-light text-sm
text-gray-600
dark:text-gray-300">{format(new Date(delve(item, 'attributes.publishedAt', 'Jun 1, 2020')), 'dd/MM/yyyy')}</span>
<a href={getCategoryUrl(item)} <a href={getCategoryUrl(item)}
className="px-2 py-1 text-sm bg-gray-600 text-gray-100 font-bold rounded hover:bg-gray-500"> className="px-2 py-1 text-sm font-bold rounded
bg-gray-600 text-gray-100
hover:bg-gray-500">
{delve(item, 'attributes.category.data.attributes.name', 'N/A')} {delve(item, 'attributes.category.data.attributes.name', 'N/A')}
</a> </a>
</div> </div>
<div className="mt-2"> <div className="mt-2">
<a <a
href={getPostUrl(item)} href={getPostUrl(item)}
className="text-xl text-gray-700 font-bold hover:underline"> className="text-xl font-bold hover:underline
text-gray-700
dark:text-gray-200">
{delve(item, 'attributes.title', 'N/A')} {delve(item, 'attributes.title', 'N/A')}
</a> </a>
<p className="mt-2 font-light text-sm text-gray-600">{delve(item, 'attributes.description', 'N/A')}</p> <p className="mt-2 font-light text-sm
text-gray-600
dark:text-gray-300">{delve(item, 'attributes.description', 'N/A')}</p>
</div> </div>
<div className="flex justify-between items-center mt-4"> <div className="flex justify-between items-center mt-4">
<a href={getPostUrl(item)} className="text-blue-500 text-sm hover:underline">Lire l'article</a> <a href={getPostUrl(item)}
className="text-blue-500 text-sm hover:underline">Lire l'article</a>
<div> <div>
<a href="#" className="flex items-center"> <a href="#"
className="flex items-center">
<img <img
src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=731&amp;q=80" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=731&amp;q=80"
alt="avatar" className="mx-4 w-10 h-10 object-cover rounded-full hidden sm:block"/> alt="avatar"
<h3 className="text-gray-700 text-normal font-bold hover:underline">Alex John</h3> className="mx-4 w-10 h-10 object-cover rounded-full hidden sm:block" />
<h3 className="text-normal font-bold hover:underline
text-gray-700
dark:text-gray-300">Alex John</h3>
</a> </a>
</div> </div>
</div> </div>

4
apps/website/components/categories/categories.tsx
Unescape View File

@ -15,7 +15,9 @@ export interface CategoriesProps {
export function Categories({items = []}: CategoriesProps) { export function Categories({items = []}: CategoriesProps) {
return ( return (
<div <div
className={styles['container'] + " bg-white rounded-lg mx-2 lg:mx-0 mt-5 lg:mt-0 p-5 mb-5 shadow-sm"}> className={styles['container'] + " rounded-lg mx-2 lg:mx-0 mt-5 lg:mt-0 p-5 mb-5 shadow-sm" +
" bg-white" +
" dark:bg-gray-800"}>
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<h5 className="text-xl font-bold leading-none text-gray-900 dark:text-white">Catégories</h5> <h5 className="text-xl font-bold leading-none text-gray-900 dark:text-white">Catégories</h5>
</div> </div>

4
apps/website/components/header/header.tsx
Unescape View File

@ -176,7 +176,7 @@ export function Header({items = []}) {
<div className="flex mx-auto"> <div className="flex mx-auto">
<main className="w-full"> <main className="w-full">
<section <section
className="bg-white dark:bg-gray-900 w-full md:w-auto p-2 md:p-4" className="bg-white dark:bg-gray-800 w-full md:w-auto p-2 md:p-4"
id="navbar-default"> id="navbar-default">
<div className="container max-w-screen-xl flex flex-wrap items-center justify-between mx-auto"> <div className="container max-w-screen-xl flex flex-wrap items-center justify-between mx-auto">
<a href="/" className="flex items-center"> <a href="/" className="flex items-center">
@ -207,7 +207,7 @@ export function Header({items = []}) {
</div> </div>
</div> </div>
</section> </section>
<hr className="border-gray-100 sm:mx-auto dark:border-gray-700 container mx-auto"/> <hr className="border-gray-100 dark:border-gray-700 container max-w-screen-xl mx-auto"/>
<section className="hidden w-full md:block md:w-auto" id="navbar-dropdown"> <section className="hidden w-full md:block md:w-auto" id="navbar-dropdown">
<div className="container max-w-screen-xl mx-auto"> <div className="container max-w-screen-xl mx-auto">
<ul className="flex flex-col md:p-4 font-medium md:flex-row md:space-x-8 md:mt-0"> <ul className="flex flex-col md:p-4 font-medium md:flex-row md:space-x-8 md:mt-0">

32
apps/website/components/home-section-blog/home-section-blog.tsx
Unescape View File

@ -13,7 +13,6 @@ export interface HomeSectionBlogProps {
export function HomeSectionBlog({posts}: HomeSectionBlogProps) { export function HomeSectionBlog({posts}: HomeSectionBlogProps) {
const firstArticle = posts.length > 0 ? posts.slice(0, 1) : []; const firstArticle = posts.length > 0 ? posts.slice(0, 1) : [];
const otherArticles = posts.length > 0 ? posts.slice(1, posts.length) : []; const otherArticles = posts.length > 0 ? posts.slice(1, posts.length) : [];
console.log(firstArticle, otherArticles);
const [width, height] = getStrapiImageSize(firstArticle[0]); const [width, height] = getStrapiImageSize(firstArticle[0]);
return ( return (
<> <>
@ -21,11 +20,10 @@ export function HomeSectionBlog({posts}: HomeSectionBlogProps) {
<div className="w-12/12 md:w-6/12 px-4 mb-4 md:mb-0 md:px-0 md:pr-2"> <div className="w-12/12 md:w-6/12 px-4 mb-4 md:mb-0 md:px-0 md:pr-2">
<div className="block border rounded-lg shadow-sm h-full my-2 mx-2 sm:my-0 sm:mx-0 relative <div className="block border rounded-lg shadow-sm h-full my-2 mx-2 sm:my-0 sm:mx-0 relative
bg-white border-gray-200 bg-white border-gray-200
hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-800 dark:hover:bg-gray-800">
dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
<div className="flex justify-between items-center absolute left-5 top-5"> <div className="flex justify-between items-center absolute left-5 top-5">
<span <span
className="font-bold shadow text-white text-sm">{format(new Date(delve(firstArticle[0], 'attributes.publishedAt', 'Jun 1, 2020')),'dd/MM/yyyy')}</span> className="font-bold shadow text-white text-sm">{format(new Date(delve(firstArticle[0], 'attributes.publishedAt', 'Jun 1, 2020')), 'dd/MM/yyyy')}</span>
</div> </div>
<div className="flex justify-between items-center absolute right-5 top-5"> <div className="flex justify-between items-center absolute right-5 top-5">
<a href={getCategoryUrl(firstArticle[0])} <a href={getCategoryUrl(firstArticle[0])}
@ -46,21 +44,30 @@ export function HomeSectionBlog({posts}: HomeSectionBlogProps) {
<main className="p-5"> <main className="p-5">
<div className="mt-2"> <div className="mt-2">
<a <a
href={'/blog/' + delve(firstArticle[0], 'attributes.category.data.attributes.slug', '') + '/' + delve(firstArticle[0], 'attributes.slug', '')} href={getPostUrl(firstArticle[0])}
className="text-xl text-gray-700 font-bold hover:underline"> className="text-xl font-bold hover:underline
text-gray-700
dark:text-gray-200">
{delve(firstArticle[0], 'attributes.title', 'N/A')} {delve(firstArticle[0], 'attributes.title', 'N/A')}
</a> </a>
<p className="mt-2 font-light text-sm text-gray-600">{delve(firstArticle[0], 'attributes.description', 'N/A')}</p> <p className="mt-2 font-light text-sm
text-gray-600
dark:text-gray-300">{delve(firstArticle[0], 'attributes.description', 'N/A')}</p>
</div> </div>
<div className="flex justify-between items-center mt-4"> <div className="flex justify-between items-center mt-4">
<a href={getPostUrl(firstArticle[0])} className="text-blue-500 text-sm hover:underline">Lire l'article</a> <a href={getPostUrl(firstArticle[0])}
className="text-blue-500 text-sm hover:underline">Lire l'article</a>
<div> <div>
<a href="#" className="flex items-center"> <a href="#"
className="flex items-center">
<img <img
src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=731&amp;q=80" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=731&amp;q=80"
alt="avatar" className="mx-4 w-10 h-10 object-cover rounded-full hidden sm:block"/> alt="avatar"
<h3 className="text-gray-700 text-normal font-bold hover:underline">Alex John</h3> className="mx-4 w-10 h-10 object-cover rounded-full hidden sm:block" />
<h3 className="text-normal font-bold hover:underline
text-gray-700
dark:text-gray-300">Alex John</h3>
</a> </a>
</div> </div>
</div> </div>
@ -68,7 +75,8 @@ export function HomeSectionBlog({posts}: HomeSectionBlogProps) {
</div> </div>
</div> </div>
<div className="w-12/12 md:w-6/12 px-4 md:px-0 md:pl-2"> <div className="w-12/12 md:w-6/12 px-4 md:px-0 md:pl-2">
{otherArticles.map((item: object, index: number) => (<CardBlog key={"home-card-blog-" + index} item={item} />))} {otherArticles.map((item: object, index: number) => (<CardBlog key={"home-card-blog-" + index}
item={item} />))}
</div> </div>
</section> </section>
</> </>

16
apps/website/components/home-section-comments/home-section-comments.tsx
Unescape View File

@ -5,14 +5,18 @@ export interface HomeSectionCommentsProps {
export function HomeSectionComments(props: HomeSectionCommentsProps) { export function HomeSectionComments(props: HomeSectionCommentsProps) {
return ( return (
<> <>
<section className="w-full bg-white py-10 my-10"> <section className="w-full py-10 my-10
bg-white
dark:bg-gray-800">
<div className="container max-w-6xl relative mx-auto relative flex-col mb-10 h-auto"> <div className="container max-w-6xl relative mx-auto relative flex-col mb-10 h-auto">
<h3 className="w-full mb-10 text-xl text-center font-extrabold tracking-tight leading-none md:text-2xl xl:text-3xl dark:text-white"> <h3 className="w-full mb-10 text-xl text-center font-extrabold tracking-tight leading-none md:text-2xl xl:text-3xl dark:text-white">
Ce que nos étudiants en pense Ce que nos étudiants en pense
</h3> </h3>
<div className="w-full grid md:grid-cols-3 md:px-4 xl:px-0 gap-5"> <div className="w-full grid md:grid-cols-3 md:px-4 xl:px-0 gap-5">
<div className="bg-gray-100 rounded-lg p-7 mx-5 md:mx-0"> <div className="rounded-lg p-7 mx-5 md:mx-0
bg-gray-100
dark:bg-gray-700">
<header> <header>
<div className="flex items-center"> <div className="flex items-center">
<svg aria-hidden="true" <svg aria-hidden="true"
@ -64,7 +68,9 @@ export function HomeSectionComments(props: HomeSectionCommentsProps) {
<h3 className="text-gray-700 text-normal font-bold hover:underline text-slate-400">Par Alex John</h3> <h3 className="text-gray-700 text-normal font-bold hover:underline text-slate-400">Par Alex John</h3>
</footer> </footer>
</div> </div>
<div className="bg-gray-100 rounded-lg p-7 mx-5 md:mx-0"> <div className="rounded-lg p-7 mx-5 md:mx-0
bg-gray-100
dark:bg-gray-700">
<header> <header>
<div className="flex items-center"> <div className="flex items-center">
<svg aria-hidden="true" <svg aria-hidden="true"
@ -116,7 +122,9 @@ export function HomeSectionComments(props: HomeSectionCommentsProps) {
<h3 className="text-gray-700 text-normal font-bold hover:underline text-slate-400">Par Alex John</h3> <h3 className="text-gray-700 text-normal font-bold hover:underline text-slate-400">Par Alex John</h3>
</footer> </footer>
</div> </div>
<div className="bg-gray-100 rounded-lg p-7 mx-5 md:mx-0"> <div className="rounded-lg p-7 mx-5 md:mx-0
bg-gray-100
dark:bg-gray-700">
<header> <header>
<div className="flex items-center"> <div className="flex items-center">
<svg aria-hidden="true" <svg aria-hidden="true"

18
apps/website/components/home-section-grid/home-section-grid.tsx
Unescape View File

@ -5,15 +5,23 @@ export interface HomeSectionGridProps {
export function HomeSectionGrid(props: HomeSectionGridProps) { export function HomeSectionGrid(props: HomeSectionGridProps) {
return ( return (
<> <>
<section className="w-full bg-white p-5 sm:p-10 lg:pt-0 lg:py-10 lg:my-10"> <section className="w-full p-5 sm:p-10 lg:pt-0 lg:py-10 lg:my-10
bg-white
dark:bg-gray-800">
<div className="container max-w-6xl relative mx-auto relative flex row lg:mb-10 h-auto"> <div className="container max-w-6xl relative mx-auto relative flex row lg:mb-10 h-auto">
<div className="place-self-center lg:col-span-7 md:px-5 md:px-0 md:pr-10"> <div className="place-self-center lg:col-span-7 md:px-5 md:px-0 md:pr-10">
<h3 className="lg:max-w-2xl mb-4 text-xl font-extrabold tracking-tight leading-none md:text-2xl xl:text-3xl dark:text-white"> <h3 className="lg:max-w-2xl mb-4 lg:my-10 text-xl font-extrabold tracking-tight leading-none md:text-2xl xl:text-3xl
dark:text-white">
Méthode révolutionnaire pour apprendre à jouer Méthode révolutionnaire pour apprendre à jouer
</h3> </h3>
<p className="lg:max-w-2xl mb-6 font-light text-gray-500 lg:mb-8 md:text-lg dark:text-gray-400"> <p className="lg:max-w-2xl mb-6 font-light text-gray-500 lg:mb-8 md:text-lg
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat nulla lorem, at consectetur ligula pulvinar nec. Fusce dictum aliquet tellus id aliquam. Praesent feugiat tincidunt ante. Aliquam non lectus est. Suspendisse porta, dolor vel aliquet pharetra, ipsum diam laoreet ante, a feugiat nisi justo eu est. </p> dark:text-gray-400">
<p className="lg:max-w-2xl font-light text-gray-500 lg:mb-8 md:text-lg dark:text-gray-400">Suspendisse in eros nisl. Vivamus eu convallis massa. Phasellus sit amet felis ut velit semper sagittis eget vitae arcu. Nunc leo est, vulputate sed libero non, efficitur lobortis odio. Proin fermentum massa non metus bibendum imperdiet.</p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat nulla lorem, at consectetur ligula pulvinar nec. Fusce dictum aliquet tellus id aliquam. Praesent feugiat tincidunt ante. Aliquam non lectus est. Suspendisse porta, dolor vel aliquet pharetra, ipsum diam laoreet ante, a feugiat nisi justo eu est.
</p>
<p className="lg:max-w-2xl font-light text-gray-500 lg:mb-8 md:text-lg
dark:text-gray-400">
Suspendisse in eros nisl. Vivamus eu convallis massa. Phasellus sit amet felis ut velit semper sagittis eget vitae arcu. Nunc leo est, vulputate sed libero non, efficitur lobortis odio. Proin fermentum massa non metus bibendum imperdiet.
</p>
</div> </div>
<div className="hidden relative md:mt-10 lg:col-span-5 lg:flex grow justify-around"> <div className="hidden relative md:mt-10 lg:col-span-5 lg:flex grow justify-around">
<div className="md:w-2/5 relative bg-gray-200 rounded-lg h-[350px]"></div> <div className="md:w-2/5 relative bg-gray-200 rounded-lg h-[350px]"></div>

4
apps/website/components/last-articles/last-articles.tsx
Unescape View File

@ -12,7 +12,9 @@ export interface LastArticlesProps {
export function LastArticles({items = []}: LastArticlesProps) { export function LastArticles({items = []}: LastArticlesProps) {
return ( return (
<div <div
className={styles['container'] + " bg-white rounded-lg mx-2 lg:mx-0 mt-5 lg:mt-0 p-5 mb-5 shadow-sm"}> className={styles['container'] + "rounded-lg mx-2 lg:mx-0 mt-5 lg:mt-0 p-5 mb-5 shadow-sm" +
" bg-white" +
" dark:bg-gray-800"}>
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<h5 className="text-xl font-bold leading-none text-gray-900 dark:text-white">Derniers articles publiés</h5> <h5 className="text-xl font-bold leading-none text-gray-900 dark:text-white">Derniers articles publiés</h5>
</div> </div>

10
apps/website/libs/utils.ts
Unescape View File

@ -5,14 +5,18 @@ import {environment} from "../environments/environment";
export type ImageFormatType = "default" | "thumbnail" | "medium" | "small"; export type ImageFormatType = "default" | "thumbnail" | "medium" | "small";
export const getCategoryUrl = (item): string => { export const getCategoryUrl = (item): string => {
return '/blog/' + delve(item, 'attributes.category.data.attributes.slug', ''); const categorySlug = !delve(item, 'attributes', null) ? delve(item, 'category.data.attributes.slug', '') : delve(item, 'attributes.category.data.attributes.slug', '');
return '/blog/' + categorySlug;
} }
export const getPostUrl = (item): string => { export const getPostUrl = (item): string => {
return '/blog/' + getCategoryUrl(item) + '/' + delve(item, 'attributes.slug', ''); const categorySlug = !delve(item, 'attributes', null) ? delve(item, 'category.data.attributes.slug', '') : delve(item, 'attributes.category.data.attributes.slug', '');
const postSlug = !delve(item, 'attributes', null) ? delve(item, 'slug', '') : delve(item, 'attributes.slug', '');
return '/blog/' + categorySlug + '/' + postSlug;
} }
export const getStrapiImage = (item, format: ImageFormatType = 'default') => { export const getStrapiImage = (item, format: ImageFormatType = 'default') => {
const image = delve(item, 'attributes.image.data.attributes', {}); const image = !delve(item, 'attributes', null) ? delve(item, 'image.data.attributes', {}) : delve(item, 'attributes.image.data.attributes', {});
console.log(item, image);
switch (format) { switch (format) {
case "default": case "default":
return environment.strapiUrl + delve(image, "url", "/images/default.png"); return environment.strapiUrl + delve(image, "url", "/images/default.png");

17
apps/website/pages/_app.tsx
Unescape View File

@ -3,14 +3,20 @@ import {SessionProvider} from "next-auth/react";
import {config, library} from "@fortawesome/fontawesome-svg-core"; import {config, library} from "@fortawesome/fontawesome-svg-core";
import '@fortawesome/fontawesome-svg-core/styles.css'; import '@fortawesome/fontawesome-svg-core/styles.css';
import { import {
faBagShopping, faChalkboardUser, faBagShopping,
faGraduationCap, faGuitar, faLinesLeaning, faChalkboardUser,
faRightToBracket, faScrewdriverWrench, faGraduationCap,
faGuitar,
faLinesLeaning,
faRightToBracket,
faScrewdriverWrench,
faTabletScreenButton, faTabletScreenButton,
faUserPlus faUserPlus
} from "@fortawesome/free-solid-svg-icons"; } from "@fortawesome/free-solid-svg-icons";
import axios from "axios"; import axios from "axios";
import delve from 'dlv'; import delve from 'dlv';
import {ThemeProvider} from "next-themes";
import {wrapper} from "../store/store"; import {wrapper} from "../store/store";
import {environment} from "../environments/environment"; import {environment} from "../environments/environment";
@ -49,7 +55,10 @@ const CustomApp = ({Component, pageProps: {session, ...pageProps}, menuFooter, m
pageProps = {...pageProps, menuFooter, menuHeader, seo}; pageProps = {...pageProps, menuFooter, menuHeader, seo};
return ( return (
<SessionProvider session={session}> <SessionProvider session={session}>
<Component {...pageProps} /> <ThemeProvider enableSystem={true}
attribute="class">
<Component {...pageProps} />
</ThemeProvider>
</SessionProvider> </SessionProvider>
); );
} }

20
apps/website/pages/index.tsx
Unescape View File

@ -1,18 +1,32 @@
import SeoConfig from "../components/seo-config/seo-config"; import axios from "axios";
import delve from 'dlv';
import {environment} from "../environments/environment";
import SeoConfig from "../components/seo-config/seo-config";
import Layout from "../components/layout/layout"; import Layout from "../components/layout/layout";
import HomeContent from "../components/home/home"; import HomeContent from "../components/home/home";
import styles from "./blog/index.module.scss"; import styles from "./blog/index.module.scss";
export function Index({menuHeader, menuFooter, page, seo}) { export async function getServerSideProps(context) {
const postsUrl = `${environment.strapiApiUrl}/articles?populate=deep&sort=publishedAt:DESC&pagination[limit]=3`;
const posts = await axios.get(postsUrl);
return {
props: {
posts: delve(posts, 'data.data', []),
}
}
}
export function Index({menuHeader, menuFooter, posts, seo}) {
return ( return (
<> <>
<SeoConfig {...seo} /> <SeoConfig {...seo} />
<Layout menuHeader={menuHeader} <Layout menuHeader={menuHeader}
menuFooter={menuFooter}> menuFooter={menuFooter}>
<main className={styles['blog-container'] + " w-full"}> <main className={styles['blog-container'] + " w-full"}>
<HomeContent /> <HomeContent posts={posts} />
</main> </main>
</Layout> </Layout>
</> </>

5
package-lock.json generated
Unescape View File

@ -10124,6 +10124,11 @@
"resolved": "https://registry.npmjs.org/next-redux-wrapper/-/next-redux-wrapper-8.1.0.tgz", "resolved": "https://registry.npmjs.org/next-redux-wrapper/-/next-redux-wrapper-8.1.0.tgz",
"integrity": "sha512-2hIau0hcI6uQszOtrvAFqgc0NkZegKYhBB7ZAKiG3jk7zfuQb4E7OV9jfxViqqojh3SEHdnFfPkN9KErttUKuw==" "integrity": "sha512-2hIau0hcI6uQszOtrvAFqgc0NkZegKYhBB7ZAKiG3jk7zfuQb4E7OV9jfxViqqojh3SEHdnFfPkN9KErttUKuw=="
}, },
"next-themes": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.2.1.tgz",
"integrity": "sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A=="
},
"node-abort-controller": { "node-abort-controller": {
"version": "3.1.1", "version": "3.1.1",
"resolved": "https://registry.npmjs.org/node-abort-controller/-/node-abort-controller-3.1.1.tgz", "resolved": "https://registry.npmjs.org/node-abort-controller/-/node-abort-controller-3.1.1.tgz",

1
package.json
Unescape View File

@ -27,6 +27,7 @@
"next": "13.1.1", "next": "13.1.1",
"next-auth": "4.18.8", "next-auth": "4.18.8",
"next-redux-wrapper": "^8.1.0", "next-redux-wrapper": "^8.1.0",
"next-themes": "^0.2.1",
"react": "18.2.0", "react": "18.2.0",
"react-dom": "18.2.0", "react-dom": "18.2.0",
"react-helmet": "6.0.0", "react-helmet": "6.0.0",

Write Preview
Loading…
Cancel
Save