Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
Commit 1ac74571 authored by Hugues's avatar Hugues
Browse files

WIP

parent c8502e0a
No related branches found
No related tags found
1 merge request!29Draft: Resolve "create blog page"
Pipeline #2265 passed
......@@ -11,7 +11,7 @@ cover: ./cover.jpeg
imageShare: ./cover.jpeg
tags: ['fake']
translations:
- link: 'http://lydra.test/category/devops/feed'
- link: 'http://lydra.fr'
language: 'french'
hreflang: fr
---
......
......@@ -10,7 +10,7 @@ module.exports = {
`,
//siteUrl: "https://maxpou.github.io/",
//siteUrl: "https://lydra.fr/blog/",
siteUrl: "http://lydra.test/category/podcast/feed",
siteUrl: "https://lydra.fr/tag/froggit/feed/",
//disqusSiteUrl: "https://www.maxpou.fr/",
// Prefixes all links. For cases when deployed to maxpou.fr/gatsby-starter-morning-dew/
pathPrefix: "/froggit.fr", // Note: it must *not* have a trailing slash.
......@@ -19,7 +19,7 @@ module.exports = {
background_color: "#ffffff",
theme_color: "#222222",
display: "standalone",
icon: "content/images/baymax.png",
icon: "content/images/logo_froggit.png",
postsPerPage: 4,
disqusShortname: "maxpou",
headerTitle: "Froggit",
......
......@@ -31,6 +31,7 @@ module.exports = {
options: {
name: "posts",
path: "content/posts",
//path: "src/page/blog",
},
},
{
......@@ -44,6 +45,7 @@ module.exports = {
resolve: `gatsby-plugin-page-creator`,
options: {
path: path.join(__dirname, `src`, `pages`),
//path: path.join(__dirname, `src`, `pages`, ),
// ignore: [`blog.(js|ts)?(x)`],
},
},
......@@ -60,6 +62,7 @@ module.exports = {
defaultLayouts: {
default: require.resolve("./src/templates/page.js"),
default: require.resolve("./src/pages/blog/index.js"),
},
gatsbyRemarkPlugins: [
......@@ -97,21 +100,8 @@ module.exports = {
trackingId: config.googleAnalyticsId,
},
},
/* {
resolve: `gatsby-source-rss-feed`,
options: {
url: `http://lydra.test/category/devops/feed/rss.xml`,
name: `LydraBlog`,
// Optional
// Read parser document: https://github.com/bobby-brennan/rss-parser#readme
parserOption: {
customFields: {
item: ['itunes:duration']
}
}
}
},
*/
{
resolve: `gatsby-plugin-feed`,
options: {
......@@ -160,9 +150,9 @@ module.exports = {
}
`,
output: "/rss.xml",
//output: "http://lydra.test/category/devops/feed/rss.xml",
//output: "/rss.xml",
//title: "Your Site's RSS Feed",
title: "Lydra blog RSS Feed",
title: "https://lydra.fr/tag/froggit/feed",
// optional configuration to insert feed reference in pages:
//if `string` is used, it will be used to create RegExp and then test if pathname of
//current page satisfied this regular expression;
......
const { createFilePath } = require("gatsby-source-filesystem")
exports.createPages = async ({ graphql, actions, reporter }) => {
const { createPage } = actions
......
import React from 'react'
import PropTypes from 'prop-types'
import { Link, graphql, StaticQuery } from 'gatsby'
//import PreviewCompatibleImage from './PreviewCompatibleImage'
class BlogRoll extends React.Component {
render() {
const { data } = this.props
const { edges: posts } = data.allMarkdownRemark
return (
<div className="columns is-multiline">
{posts &&
posts.map(({ node: post }) => (
<div className="is-parent column is-6" key={post.id}>
<article
className={`blog-list-item tile is-child box notification ${
post.frontmatter.featuredpost ? 'is-featured' : ''
}`}
>
<header>
{post.frontmatter.featuredimage ? (
<div className="featured-thumbnail">
<PreviewCompatibleImage
imageInfo={{
image: post.frontmatter.featuredimage,
alt: `featured image thumbnail for post ${post.frontmatter.title}`,
}}
/>
</div>
) : null}
<p className="post-meta">
<Link
className="title has-text-primary is-size-4"
to={post.fields.slug}
>
{post.frontmatter.title}
</Link>
<span> &bull; </span>
<span className="subtitle is-size-5 is-block">
{post.frontmatter.date}
</span>
</p>
</header>
<p>
{post.excerpt}
<br />
<br />
<Link className="button" to={post.fields.slug}>
Keep Reading
</Link>
</p>
</article>
</div>
))}
</div>
)
}
}
BlogRoll.propTypes = {
data: PropTypes.shape({
allMarkdownRemark: PropTypes.shape({
edges: PropTypes.array,
}),
}),
}
export default () => (
<StaticQuery
query={graphql`
query BlogRollQuery {
allMarkdownRemark(
sort: { order: DESC, fields: [frontmatter___date] }
filter: { frontmatter: { slug: { eq: "slug" } } }
) {
edges {
node {
excerpt(pruneLength: 400)
id
fields {
slug
}
frontmatter {
title
date(formatString: "MMMM DD, YYYY")
}
}
}
}
}
`}
render={(data, count) => <BlogRoll data={data} count={count} />}
/>
)
......@@ -4,16 +4,7 @@ import useSiteMetadata from "../hooks/use-site-config"
import useSiteImages from "../hooks/use-site-images"
import { colors } from "../tokens"
const HeroContainer = styled.div`
position: relative;
display: table;
width: 100%;
height: 400px;
overflow: hidden;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
`
const TitleContainer = styled.div`
display: table-cell;
......@@ -43,12 +34,12 @@ const Hero = props => {
const heroImg = props.heroImg || fluid.src
return (
<HeroContainer >
<TitleContainer>
<HeroTitle>{props.title}</HeroTitle>
{props.subTitle && <HeroSubTitle>{props.subTitle}</HeroSubTitle>}
</TitleContainer>
</HeroContainer>
)
}
......
......@@ -6,6 +6,10 @@ import Footer from "./Footer"
import "prismjs/themes/prism-tomorrow.css"
import { GlobalStyle } from "./Commons"
import { media } from "../tokens"
import { Container, ContainerIcon, TitleTagline, TitleIcon } from "../components"
import { IconSecurite } from "../components"
import { IconFreedom } from "../components"
import { IconGdpr } from "../components"
const SiteContent = styled.div`
margin: 0 0;
......@@ -29,7 +33,42 @@ class Template extends React.Component {
</Helmet>
<GlobalStyle />
<Header />
<Container>
<TitleTagline>
Froggit aide les Dev, les Ops et les entreprises du numérique
à protéger leurs codes sources de lespionnage industriel
</TitleTagline>
</Container>
<ContainerIcon>
<TitleIcon>
<div>
<IconSecurite />
<h2>Sécurité</h2>
<p>Vos données sont en lieu sûr et sauvegardées toutes les nuits</p>
</div>
</TitleIcon>
<TitleIcon>
<div>
<IconFreedom />
<h2>Souverain</h2>
<p>Nous sommes hébergés en France et conformes au RGPD</p>
</div>
</TitleIcon>
<TitleIcon>
<div>
<IconGdpr />
<h2>Libre</h2>
<p>Notre solution s'appuie sur des logiciels libres et nos conditions générales sont éthiques.</p>
</div>
</TitleIcon>
</ContainerIcon>
<SiteContent>{children}</SiteContent>
<Footer />
</>
)
......
---
title: this post the first Froggit's post test
slug: froggit-post-test
date: 2020-07-27
# optional fields
generate-card: false
cover: ./logo_froggit.png
language: fr
tags: ['fake']
translations:
- link: '/froggit-post-test'
language: 'french'
hreflang: fr
---
# Froggit's blog
Our first post
import React from 'react'
import Layout from '../../components/layout'
//import BlogRoll from '../../components/BlogRoll'
//import Article from '../../components/Article'
//import Wrapper from '../../components/Wrapper'
export default class BlogIndexPage extends React.Component {
render() {
return (
<Layout>
<div
className="full-width-image-container margin-top-0"
// style={{
// backgroundImage: `url('/img/blog-index.jpg')`,
//</Layout> }}
>
<h1
className="has-text-weight-bold is-size-1"
style={{
boxShadow: '0.5rem 0 0 #f40, -0.5rem 0 0 #f40',
backgroundColor: '#E07931',
color: 'white',
padding: '1rem',
textAlign: 'center',
}}
>
Bienvenue sur le blog de Froggit
</h1>
</div>
<section className="section">
<div className="container">
</div>
</section>
</Layout>
)
}
}
......@@ -19,9 +19,9 @@ class BlogPostTemplate extends React.Component {
title={post.frontmatter.title}
description={post.excerpt}
cover={post.frontmatter.cover && post.frontmatter.cover.publicURL}
// imageShare={
// post.frontmatter.imageShare && post.frontmatter.imageShare.publicURL
// }
imageShare={
post.frontmatter.imageShare && post.frontmatter.imageShare.publicURL
}
lang={post.frontmatter.language}
translations={post.frontmatter.translations}
path={post.frontmatter.slug}
......
File moved
......@@ -7,10 +7,7 @@ import Wrapper from "../components/Wrapper"
import Hero from "../components/Hero"
import SEO from "../components/SEO"
import Disqus from "../components/Disqus"
import { Container, ContainerIcon, TitleTagline, TitleIcon } from "../components"
import { IconSecurite } from "../components"
import { IconFreedom } from "../components"
import { IconGdpr } from "../components"
......@@ -26,40 +23,6 @@ export default props => {
cover={page.frontmatter.cover && page.frontmatter.cover.publicURL}
/>
<Container>
<TitleTagline>
Froggit aide les Dev, les Ops et les entreprises du numérique
à protéger leurs codes sources de lespionnage industriel
</TitleTagline>
</Container>
<ContainerIcon>
<TitleIcon>
<div>
<IconSecurite />
<h2>Sécurité</h2>
<p>Vos données sont en lieu sûr et sauvegardées toutes les nuits</p>
</div>
</TitleIcon>
<TitleIcon>
<div>
<IconFreedom />
<h2>Souverain</h2>
<p>Nous sommes hébergés en France et conformes au RGPD</p>
</div>
</TitleIcon>
<TitleIcon>
<div>
<IconGdpr />
<h2>Libre</h2>
<p>Notre solution s'appuie sur des logiciels libres et nos conditions générales sont éthiques.</p>
</div>
</TitleIcon>
</ContainerIcon>
<Wrapper>
<article>
......@@ -67,7 +30,7 @@ export default props => {
</article>
</Wrapper>
>
</Layout>
)
......@@ -90,3 +53,5 @@ export const pageQuery = graphql`
}
}
`
import React from "react"
import { graphql } from "gatsby"
import { graphql, useStaticQuery } from "gatsby"
import Layout from "../components/layout"
import Content from "../components/Content"
import Wrapper from "../components/Wrapper"
import Hero from "../components/Hero"
import SEO from "../components/SEO"
import Disqus from "../components/Disqus"
import { Container, ContainerIcon, TitleTagline, TitleIcon } from "../components"
import Content from "../components/Content"
import RelatedPosts from "../components/RelatedPosts"
import { Text } from "../components/Commons"
import { Container, TitleTagline, TitleIcon, ContainerIcon } from "../components"
import { iconWrapper, TitleTaglineElements } from "../elements"
import { IconSecurite } from "../components"
import { IconFreedom } from "../components"
import { IconGdpr } from "../components"
import { media, colors } from "../tokens"
const MainTitle = styled.h1`
line-height: 1.5;
text-align: center;
font-size: 3rem;
`
export default props => {
const page = props.data.page
return (
<Layout location={props.location}>
<SEO
title={page.frontmatter.title}
description={page.excerpt}
path={page.frontmatter.slug}
cover={page.frontmatter.cover && page.frontmatter.cover.publicURL}
/>
import useSiteMetadata from "../hooks/use-site-config"
const IndexPage = () => {
const data = useStaticQuery(graphql`
query {
posts: allMdx(
sort: { fields: [frontmatter___date], order: DESC }
filter: {
fileAbsolutePath: { regex: "//content/posts//" }
frontmatter: { published: { ne: false }, unlisted: { ne: true } }
}
limit: 4
) {
edges {
node {
excerpt
frontmatter {
date(formatString: "DD MMMM, YYYY")
title
tags
language
slug
}
}
}
}
}
`)
const posts = data.posts.edges
return (
<Layout>
<Container>
<MainTitle>
Froggit's blog
</MainTitle>
<TitleTagline>
Froggit aide les Dev, les Ops et les entreprises du numérique
à protéger leurs codes sources de lespionnage industriel
</TitleTagline>
</Container>
<ContainerIcon>
<TitleIcon>
<div>
<IconSecurite />
<h2>Sécurité</h2>
<p>Vos données sont en lieu sûr et sauvegardées toutes les nuits</p>
</div>
<TitleIcon>
<div>
<IconSecurite />
<h2>Sécurité</h2>
<p>Vos données sont en lieu sûr et sauvegardées toutes les nuits</p>
</div>
</TitleIcon>
<TitleIcon>
<div>
<IconFreedom />
<h2>Souverain</h2>
<p>Nous sommes hébergés en France et conformes au RGPD</p>
</div>
</TitleIcon>
<div>
<IconFreedom />
<h2>Souverain</h2>
<p>Nous sommes hébergés en France et conformes au RGPD</p>
</div>
</TitleIcon>
<TitleIcon>
<div>
<IconGdpr />
<h2>Libre</h2>
<p>Notre solution s'appuie sur des logiciels libres et nos conditions générales sont éthiques.</p>
</div>
</TitleIcon>
<div >
<IconGdpr />
<h2>Libre</h2>
<p>Notre solution s'appuie sur des logiciels libres et nos conditions générales sont éthiques.</p>
</div>
</TitleIcon>
</ContainerIcon>
<Wrapper>
<article>
<Content content={page.body} date={page.frontmatter.date} />
</article>
<RelatedPosts posts={posts} />
</Wrapper>
{page.frontmatter.disqus && (
<Wrapper>
<Disqus slug={page.frontmatter.slug} title={page.frontmatter.title} />
</Wrapper>
)}
</Layout>
)
}
export const pageQuery = graphql`
query($slug: String!) {
page: mdx(frontmatter: { slug: { eq: $slug } }) {
body
excerpt
frontmatter {
title
date(formatString: "MMMM DD, YYYY")
slug
disqus
cover {
publicURL
}
}
}
}
`
export default IndexPage
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment