diff --git a/gatsby-node.js b/gatsby-node.js index 4e4e7b6..c8d934c 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -2,34 +2,89 @@ const path = require('path') exports.createPages = async ({ actions, graphql }) => { const {createPage} = actions; - - const courseTemplate = path.resolve(`./src/components/courseTemplate.js`); - const result = await graphql(`{ - allMarkdownRemark( - filter: {frontmatter: { - content_type: {eq: "page_education"}, - published: {eq: true}}} - ){ + + const result = await graphql(` + { + courses: allMarkdownRemark( + filter: {frontmatter: { + content_type: {eq: "page_education"}, + published: {eq: true}}} + ){ + edges{ + node{ + html + frontmatter{ + title + path + } + } + } + } + + news: allMarkdownRemark( + filter: {frontmatter: {content_type: {eq: "post"}, published: {eq: true}}}, + sort: {fields: [frontmatter___date], order: DESC} + ) { edges{ node{ - html frontmatter{ title - path + slug + date(formatString: "DD.MM.YYYY") } + html } } } }`) - - if(result.errors){throw result.errors;} - - const courses = result.data.allMarkdownRemark.edges; + + if( result.errors ){ throw result.errors; } + + const courseTemplate = path.resolve(`./src/components/templates/courseTemplate.js`); + const courses = result.data.courses.edges; courses.forEach(({node}) => { createPage({ path: node.frontmatter.path, component: courseTemplate }) - }) + }); + + /////////////////////////////////////////////////////////////////// + + const newsTemplate = path.resolve(`./src/components/templates/news.js`); + const posts = result.data.news.edges; + + const postsPerPage = 5; + const numberOfNewsItems = posts.length; + const numberOfNewsPages = Math.ceil(numberOfNewsItems / postsPerPage); + + + for (let pageIndex = 0; pageIndex < numberOfNewsPages; pageIndex++) { + const pageNumber = pageIndex + 1; + const path = pageIndex === 0 ? '/news' : `/news/${pageNumber}`; + const skip = pageIndex * postsPerPage; + + function getPreviousPageLink() { + if (!pageIndex) return null + if (pageIndex === 1) return '/news' + return `/news/${pageIndex}` + } + + function getNextPageLink() { + if (pageNumber < numberOfNewsPages) return `news/${pageNumber + 1}` + return null + } + + createPage({ + path, + component: newsTemplate, + context: { + limit: postsPerPage, + skip, + next: getNextPageLink(), + prev: getPreviousPageLink(), + }, + }) + } } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 83cc4a5..0c26481 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1084,9 +1084,9 @@ "integrity": "sha512-1dVNHT76Uu5N3eJNTYcvxee+jzX4Z9lfciqRRHCU27ihbUcYi+iSc2iml5Ke1LXe1SyJCLA0+14Jh4tXJgOppA==" }, "@hapi/hoek": { - "version": "8.5.0", - "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-8.5.0.tgz", - "integrity": "sha512-7XYT10CZfPsH7j9F1Jmg1+d0ezOux2oM2GfArAzLwWe4mE2Dr3hVjsAL6+TFY49RRJlCdJDMw3nJsLFroTc8Kw==" + "version": "8.5.1", + "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-8.5.1.tgz", + "integrity": "sha512-yN7kbciD87WzLGc5539Tn0sApjyiGHAJgKvG9W8C7O+6c7qmoQMfVs0W4bX17eqz6C78QJqqFrtgdK5EWf6Qow==" }, "@hapi/joi": { "version": "15.1.1", @@ -8992,6 +8992,14 @@ } } }, + "gatsby-awesome-pagination": { + "version": "0.3.5", + "resolved": "https://registry.npmjs.org/gatsby-awesome-pagination/-/gatsby-awesome-pagination-0.3.5.tgz", + "integrity": "sha512-rYBaGDgNtG6/+dHlM6XS2HtKodv/Y32AuysJMsZ39xIhn48UtRuYd8fmqJYc99V1dQFCPIJElNhg8fp1eOj05g==", + "requires": { + "lodash": "^4.17.15" + } + }, "gatsby-cli": { "version": "2.8.22", "resolved": "https://registry.npmjs.org/gatsby-cli/-/gatsby-cli-2.8.22.tgz", @@ -17425,6 +17433,14 @@ "resolved": "https://registry.npmjs.org/react-use-gesture/-/react-use-gesture-6.0.14.tgz", "integrity": "sha512-d9cnZJ0DOFd3FIO76J776DyhtbODgbxGKu19lvc1aSNTnRV5EKr9V4Uda188l2Qh0Va3pqWGxEQlw72r2cmnFQ==" }, + "react-visibility-sensor": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/react-visibility-sensor/-/react-visibility-sensor-5.1.1.tgz", + "integrity": "sha512-cTUHqIK+zDYpeK19rzW6zF9YfT4486TIgizZW53wEZ+/GPBbK7cNS0EHyJVyHYacwFEvvHLEKfgJndbemWhB/w==", + "requires": { + "prop-types": "^15.7.2" + } + }, "react-waypoint": { "version": "8.1.0", "resolved": "https://registry.npmjs.org/react-waypoint/-/react-waypoint-8.1.0.tgz", @@ -21337,6 +21353,16 @@ "extsprintf": "^1.2.0" } }, + "vertical-timeline-component-for-react": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/vertical-timeline-component-for-react/-/vertical-timeline-component-for-react-1.0.6.tgz", + "integrity": "sha512-qhCIAcIkwUH19NwwaX/Ln5uJL5VycI/T4c5iICDbDrL9Efvu19HWR/TSf2t3oEpHfeINpInScuMiwcM/Z9EgCw==", + "requires": { + "classnames": "^2.2.5", + "prop-types": "^15.6.1", + "react-visibility-sensor": "^5.0.2" + } + }, "vfile": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/vfile/-/vfile-3.0.1.tgz", diff --git a/package.json b/package.json index a9ee28e..8ae0449 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "@types/bootstrap": "^4.3.1", "bootstrap": "^4.4.1", "gatsby": "^2.18.12", + "gatsby-awesome-pagination": "^0.3.5", "gatsby-cli": "^2.8.22", "gatsby-image": "^2.2.34", "gatsby-plugin-manifest": "^2.2.31", @@ -32,7 +33,8 @@ "react-dom": "^16.12.0", "react-helmet": "^5.2.1", "react-use": "^13.21.0", - "react-use-gesture": "^6.0.14" + "react-use-gesture": "^6.0.14", + "vertical-timeline-component-for-react": "^1.0.6" }, "devDependencies": { "@types/jquery": "^3.3.31", diff --git a/src/components/courseTemplate.js b/src/components/templates/courseTemplate.js similarity index 97% rename from src/components/courseTemplate.js rename to src/components/templates/courseTemplate.js index 0ebb789..210c2e9 100644 --- a/src/components/courseTemplate.js +++ b/src/components/templates/courseTemplate.js @@ -1,6 +1,6 @@ import React from "react" import { Link, graphql } from "gatsby" -import Layout from "./layout" +import Layout from "../layout" export default function Template({data}){ const {markdownRemark: course} = data; diff --git a/src/components/templates/news.js b/src/components/templates/news.js new file mode 100644 index 0000000..428ffd9 --- /dev/null +++ b/src/components/templates/news.js @@ -0,0 +1,63 @@ +import React from 'react' +import { Link, graphql } from 'gatsby' + +import { Timeline, TimelineItem } from 'vertical-timeline-component-for-react' + +import Header from "../header" +import Footer from "../footer" + +export default function(props) { + const news = props.data.news.edges.map(newsItem => newsItem.node) + const next = props.pageContext.next + const prev = props.pageContext.prev + + return ( + <> +
+ + {/*

Все новости

*/} + {news.map(newsItem => ( + +

{newsItem.frontmatter.title}

+

+ + ))} + +

+