Commit 46859118 authored by alain's avatar alain 🐙
Browse files

add meta data fields to articles

parent 1671cede
{
"latest": "3.5.2",
"lastUpdateCheck": 1614871713090
"lastUpdateCheck": 1615299825663
}
\ No newline at end of file
......@@ -31,6 +31,12 @@
"network",
"programme"
]
},
"date": {
"type": "date"
},
"author": {
"type": "string"
}
}
}
......@@ -5,7 +5,6 @@
"version": "0.1.0",
"author": "Alain Otjens <alain@waag.org>",
"dependencies": {
"babel-preset-gatsby": "^1.0.0",
"gatsby": "^3.0.2",
"gatsby-cli": "^3.0.0",
"gatsby-image": "^3.0.0",
......@@ -28,6 +27,7 @@
"text-clipper": "^2.1.0"
},
"devDependencies": {
"babel-preset-gatsby": "^1.0.0",
"prettier": "2.2.1"
},
"keywords": [
......
import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"
/*
* This component is built using `gatsby-image` to automatically serve optimized
* images with lazy loading and reduced file sizes. The image is loaded using a
* `useStaticQuery`, which allows us to load the image from directly within this
* component, rather than having to pass the image data down from pages.
*
* For more information, see the docs:
* - `gatsby-image`: https://gatsby.dev/gatsby-image
* - `useStaticQuery`: https://www.gatsbyjs.org/docs/use-static-query/
*/
const Image = () => {
const data = useStaticQuery(graphql`
query {
placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
childImageSharp {
fluid(maxWidth: 300) {
...GatsbyImageSharpFluid
}
}
}
}
`)
return <Img fluid={data.placeholderImage.childImageSharp.fluid} />
}
export default Image
import React, { useState } from "react"
import { useStaticQuery, graphql } from "gatsby"
import { useNavigate } from "@reach/router"
import { navigate } from "@reach/router"
const Layers = ({ location }) => {
const navigate = useNavigate()
const [active, setActive] = useState("0")
const handleClick = (e, l) => {
......
......@@ -10,15 +10,20 @@ const DepsPage = ({ data }) => {
<Layout>
<SEO title="Deps" />
<div className="row">
<h1 className="page-title">Deps</h1>
<h3>{data.strapiDepsPage.subtitle}</h3>
<div dangerouslySetInnerHTML={{ __html: data.strapiDepsPage.introduction }} />
<h1 className="page-title">DEPS</h1>
<h2>{data.strapiDepsPage.subtitle}</h2>
<div className="page-introduction" dangerouslySetInnerHTML={{ __html: data.strapiDepsPage.introduction }} />
<h3 style={{ marginBottom: "2rem" }}>articles</h3>
<div className="items">
{ data.allStrapiArticle.nodes.map(node => {
const excerpt = node.excerpt ? node.excerpt : clip(node.body, 150, { html: true })
const date = new Date(node.date)
return (
<div key={node.id} className="item">
<div className="meta">{ date.toLocaleDateString("en-GB", { day: 'numeric', month: 'short', year: 'numeric' }) } / <em>{ node.author }</em></div>
<h2><Link to={`/articles/${node.slug}`}>{ node.title }</Link></h2>
<div dangerouslySetInnerHTML={{ __html: excerpt }} />
<Link className="button" to={`/articles/${node.slug}`}>Read more...</Link>
......@@ -43,6 +48,8 @@ export const pageQuery = graphql`
nodes {
id
slug
date
author
title
excerpt
body
......
......@@ -5,10 +5,13 @@ import Layout from '../components/layout'
const ArticleTemplate = ({ data }) => {
const date = new Date(data.strapiArticle.date)
return (
<Layout>
<section>
<div className="row">
<div className="meta">{ date.toLocaleDateString("en-GB", { day: 'numeric', month: 'short', year: 'numeric' }) } / <em>{ data.strapiArticle.author }</em></div>
<h1>{data.strapiArticle.title}</h1>
<div className="content" dangerouslySetInnerHTML={{ __html:data.strapiArticle.body }} />
<Link to="/deps/" className="back">&laquo; all articles</Link>
......@@ -25,6 +28,8 @@ export const query = graphql`
strapiArticle(id: {eq: $id}) {
id
title
date
author
body
}
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment