Skip to content

Commit 757db45

Browse files
flacombeGllmR
flacombe
and
GllmR
authored
Make blog static (#487)
Passage du blog en statique, suppression de la pagination, des références à ghost et reprise des images --------- Co-authored-by: Guillaume <guillaume@livingdata.co>
1 parent 3849b21 commit 757db45

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+1342
-400
lines changed

‎data/blog.json

Lines changed: 852 additions & 0 deletions
Large diffs are not rendered by default.

‎data/blog_tags.json

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
{
2+
"tags": [
3+
{
4+
"id": "63b446ee8b91f914686b849f",
5+
"name": "PCRS",
6+
"slug": "pcrs",
7+
"description": null,
8+
"feature_image": null,
9+
"visibility": "public",
10+
"og_image": null,
11+
"og_title": null,
12+
"og_description": null,
13+
"twitter_image": null,
14+
"twitter_title": null,
15+
"twitter_description": null,
16+
"meta_title": null,
17+
"meta_description": null,
18+
"codeinjection_head": null,
19+
"codeinjection_foot": null,
20+
"canonical_url": null,
21+
"accent_color": null,
22+
"url": "https://pcrs.beta.gouv.fr/blog?tags=pcrs"
23+
},
24+
{
25+
"id": "63d14c948b91f914686b8551",
26+
"name": "gouvernance",
27+
"slug": "gouvernance",
28+
"description": null,
29+
"feature_image": null,
30+
"visibility": "public",
31+
"og_image": null,
32+
"og_title": null,
33+
"og_description": null,
34+
"twitter_image": null,
35+
"twitter_title": null,
36+
"twitter_description": null,
37+
"meta_title": null,
38+
"meta_description": null,
39+
"codeinjection_head": null,
40+
"codeinjection_foot": null,
41+
"canonical_url": null,
42+
"accent_color": null,
43+
"url": "https://pcrs.beta.gouv.fr/blog?tags=gouvernance"
44+
},
45+
{
46+
"id": "63d14c948b91f914686b8550",
47+
"name": "opendata",
48+
"slug": "opendata",
49+
"description": null,
50+
"feature_image": null,
51+
"visibility": "public",
52+
"og_image": null,
53+
"og_title": null,
54+
"og_description": null,
55+
"twitter_image": null,
56+
"twitter_title": null,
57+
"twitter_description": null,
58+
"meta_title": null,
59+
"meta_description": null,
60+
"codeinjection_head": null,
61+
"codeinjection_foot": null,
62+
"canonical_url": null,
63+
"accent_color": null,
64+
"url": "https://pcrs.beta.gouv.fr/blog?tags=opendata"
65+
},
66+
{
67+
"id": "63b446ee8b91f65464586b849f",
68+
"name": "Témoignage",
69+
"slug": "temoignage",
70+
"description": null,
71+
"feature_image": null,
72+
"visibility": "public",
73+
"og_image": null,
74+
"og_title": null,
75+
"og_description": null,
76+
"twitter_image": null,
77+
"twitter_title": null,
78+
"twitter_description": null,
79+
"meta_title": null,
80+
"meta_description": null,
81+
"codeinjection_head": null,
82+
"codeinjection_foot": null,
83+
"canonical_url": null,
84+
"accent_color": null,
85+
"url": "/blog?tags=temoignage"
86+
}
87+
]
88+
}

‎lib/blog-static.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import blogData from '../data/blog.json'
2+
import blogTags from '../data/blog_tags.json'
3+
4+
const LIMIT = 9
5+
6+
export function getStaticPosts() {
7+
return blogData.posts
8+
}
9+
10+
export async function getPosts(props) {
11+
let posts;
12+
({posts} = blogData.posts)
13+
14+
if (props?.tags) {
15+
const tagsList = props.tags.split(',')
16+
posts = posts.filter(post => post.tags.some(tag => tagsList.includes(tag)).length > 0)
17+
}
18+
19+
if (props?.page) {
20+
posts = posts.slice(LIMIT * (props.page - 1), LIMIT * props.page)
21+
}
22+
23+
return posts
24+
}
25+
26+
export async function getSinglePost(slug) {
27+
const posts = blogData.posts.filter(post => post.slug === slug)
28+
29+
if (posts) {
30+
return posts[0]
31+
}
32+
33+
return null
34+
}
35+
36+
export function getTags() {
37+
return blogTags.tags
38+
}

‎pages/blog/[slug].js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
33
import dynamic from 'next/dynamic'
44
import Image from 'next/image'
55

6-
import {getSinglePost} from '@/lib/blog.js'
6+
import {getSinglePost} from '@/lib/blog-static.js'
77
import {dateWithDay} from '@/lib/date-utils.js'
88

99
import Page from '@/layouts/main.js'

‎pages/blog/index.js

Lines changed: 95 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,119 +1,116 @@
1-
import PropTypes from 'prop-types'
1+
import {useRouter} from 'next/router'
22
import Image from 'next/image'
33

4-
import {getPosts, getTags} from '@/lib/blog.js'
4+
import {getStaticPosts, getTags} from '@/lib/blog-static.js'
55

66
import colors from '@/styles/colors.js'
77

88
import Page from '@/layouts/main.js'
99

10-
import Pagination from '@/components/pagination.js'
10+
// Pas de pagination dans le fichier JSON // import Pagination from '@/components/pagination.js'
1111
import BlogCard from '@/components/post-card.js'
1212
import BlogTags from '@/components/blog/blog-tags.js'
1313

14-
const Blog = ({posts, tags, tagsList, pagination}) => (
15-
<Page title='Blog du PCRS' description='La liste complète des billets du blog autour du PCRS'>
16-
{posts ? (
17-
<div>
18-
<div className='blog-header fr-my-5w'>
14+
const Blog = () => {
15+
const router = useRouter()
16+
const {query} = router
17+
const tagsList = getTags()
18+
const tags = query.tags?.split(',') || []
19+
const posts = getStaticPosts().filter(post => tags.length === 0 || post.tags.some(tag => tags.includes(tag.name.toLowerCase().replace('é', 'e'))))
20+
21+
return (
22+
<Page title='Blog du PCRS' description='La liste complète des billets du blog autour du PCRS'>
23+
{posts ? (
24+
<div>
25+
<div className='blog-header fr-my-5w'>
26+
<Image
27+
src='/images/illustrations/blog_illustration.svg'
28+
height={200}
29+
width={200}
30+
alt=''
31+
aria-hidden='true'
32+
/>
33+
<h2 className='fr-mt-5w fr-mb-0'>Blog du PCRS</h2>
34+
</div>
35+
36+
<div className='fr-grid-row fr-grid-row--center'>
37+
{tagsList.length > 0 && <BlogTags selectedTags={tags} tagsList={tagsList} />}
38+
<div className='fr-grid-row fr-mb-6w fr-px-1w fr-px-md-5w'>
39+
{posts.length > 0 && posts.map(post => (
40+
<div key={post.id} className='fr-col-12 fr-col-md-6 fr-col-lg-3 fr-col-lg-4 fr-p-md-3w'>
41+
<BlogCard post={post} />
42+
</div>
43+
))}
44+
{(posts.length === 0 && tags.length === 0) && <div className='no-article'>Aucun article de blog n’est disponible</div>}
45+
{(posts.length === 0 && tags.length > 0) && <div className='no-article'>Aucun article ne contient ces tags</div>}
46+
</div>
47+
48+
{/* Pas de pagination dans le fichier JSON */}
49+
{/* <Pagination {...pagination} /> */}
50+
</div>
51+
</div>
52+
) : (
53+
<div className='unavailable fr-p-5w'>
1954
<Image
20-
src='/images/illustrations/blog_illustration.svg'
21-
height={200}
22-
width={200}
55+
src='/images/illustrations/500.png'
56+
height={456}
57+
width={986}
2358
alt=''
24-
aria-hidden='true'
59+
style={{
60+
width: '100%',
61+
maxWidth: '500px',
62+
height: 'auto'
63+
}}
2564
/>
26-
<h2 className='fr-mt-5w fr-mb-0'>Blog du PCRS</h2>
27-
</div>
2865

29-
<div className='fr-grid-row fr-grid-row--center'>
30-
{tagsList.length > 0 && <BlogTags selectedTags={tags} tagsList={tagsList} />}
31-
<div className='fr-grid-row fr-mb-6w fr-px-1w fr-px-md-5w'>
32-
{posts.length > 0 && posts.map(post => (
33-
<div key={post.id} className='fr-col-12 fr-col-md-6 fr-col-lg-3 fr-col-lg-4 fr-p-md-3w'>
34-
<BlogCard post={post} />
35-
</div>
36-
))}
37-
{(posts.length === 0 && tags.length === 0) && <div className='no-article'>Aucun article de blog n’est disponible</div>}
38-
{(posts.length === 0 && tags.length > 0) && <div className='no-article'>Aucun article ne contient ces tags</div>}
66+
<div className='fr-pt-8w'>
67+
<p>
68+
<b className='fr-h3'>Le blog est actuellement inaccessible</b><br />
69+
<i>Merci de réessayer ultérieurement</i>
70+
</p>
3971
</div>
40-
41-
<Pagination {...pagination} />
42-
</div>
43-
</div>
44-
) : (
45-
<div className='unavailable fr-p-5w'>
46-
<Image
47-
src='/images/illustrations/500.png'
48-
height={456}
49-
width={986}
50-
alt=''
51-
style={{
52-
width: '100%',
53-
maxWidth: '500px',
54-
height: 'auto'
55-
}}
56-
/>
57-
58-
<div className='fr-pt-8w'>
59-
<p>
60-
<b className='fr-h3'>Le blog est actuellement inaccessible</b><br />
61-
<i>Merci de réessayer ultérieurement</i>
62-
</p>
6372
</div>
64-
</div>
65-
)}
66-
67-
<style jsx>{`
68-
.blog-header {
69-
text-align: center;
70-
}
71-
72-
.blog-cards-list {
73-
display: grid;
74-
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
75-
gap: 6em;
76-
justify-items: center;
77-
}
78-
79-
.no-article {
80-
font-style: italic;
81-
}
82-
83-
.unavailable {
84-
text-align: center;
85-
color: ${colors.darkgrey};
86-
}
73+
)}
74+
75+
<style jsx>{`
76+
.blog-header {
77+
text-align: center;
78+
}
79+
80+
.blog-cards-list {
81+
display: grid;
82+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
83+
gap: 6em;
84+
justify-items: center;
85+
}
86+
87+
.no-article {
88+
font-style: italic;
89+
}
90+
91+
.unavailable {
92+
text-align: center;
93+
color: ${colors.darkgrey};
94+
}
8795
`}</style>
88-
</Page>
89-
)
90-
91-
export async function getServerSideProps({query}) {
92-
const data = await getPosts(query)
93-
const tags = query?.tags || null
94-
const tagsList = await getTags()
95-
96-
return {
97-
props: {
98-
posts: data?.posts || null,
99-
pagination: data?.meta.pagination || null,
100-
tags: tags?.split(',') || [],
101-
tagsList
102-
}
103-
}
104-
}
105-
106-
Blog.propTypes = {
107-
posts: PropTypes.array,
108-
pagination: PropTypes.object,
109-
tags: PropTypes.array,
110-
tagsList: PropTypes.array.isRequired
96+
</Page>
97+
)
11198
}
11299

113-
Blog.defaultProps = {
114-
posts: null,
115-
pagination: null,
116-
tags: null
117-
}
100+
// Au revoir blog dynamique !
101+
// export async function getServerSideProps({query}) {
102+
// const data = await getPosts(query)
103+
// const tags = query?.tags || null
104+
// const tagsList = await getTags()
105+
//
106+
// return {
107+
// props: {
108+
// posts: data?.posts || null,
109+
// pagination: data?.meta.pagination || null,
110+
// tags: tags?.split(',') || [],
111+
// tagsList
112+
// }
113+
// }
114+
// }
118115

119116
export default Blog

0 commit comments

Comments
 (0)