pagination

gatsby-node.js

@@ -3,9 +3,9 @@ const path = require('path')
 exports.createPages = async ({ actions, graphql }) => {
     const {createPage} = actions;
     
-    const courseTemplate = path.resolve(`./src/components/courseTemplate.js`);
+    const result = await graphql(`
-    const result = await graphql(`{
+    {
-        allMarkdownRemark(
+    courses: allMarkdownRemark(
         filter: {frontmatter: {
             content_type: {eq: "page_education"}, 
             published: {eq: true}}}
@@ -20,16 +20,71 @@ exports.createPages = async ({ actions, graphql }) => {
                     }
                 }
             }
+            
+    news: allMarkdownRemark(
+        filter: {frontmatter: {content_type: {eq: "post"}, published: {eq: true}}},
+        sort: {fields: [frontmatter___date], order: DESC}
+        ) {
+            edges{
+                node{
+                    frontmatter{
+                        title
+                        slug
+                        date(formatString: "DD.MM.YYYY")
+                    }
+                    html
+                }
+            }
+        }
     }`)
             
     if( result.errors ){ throw result.errors; }
                 
-    const courses = result.data.allMarkdownRemark.edges;
+    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(),
+        },
       })
     }
+} 

package-lock.json

@@ -1084,9 +1084,9 @@
       "integrity": "sha512-1dVNHT76Uu5N3eJNTYcvxee+jzX4Z9lfciqRRHCU27ihbUcYi+iSc2iml5Ke1LXe1SyJCLA0+14Jh4tXJgOppA=="
     },
     "@hapi/hoek": {
-      "version": "8.5.0",
+      "version": "8.5.1",
-      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-8.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-8.5.1.tgz",
-      "integrity": "sha512-7XYT10CZfPsH7j9F1Jmg1+d0ezOux2oM2GfArAzLwWe4mE2Dr3hVjsAL6+TFY49RRJlCdJDMw3nJsLFroTc8Kw=="
+      "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",

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",

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;

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 (
+    <>
+    <Header/>
+      <Timeline lineColor={'#ddd'} animate={false}>
+        {/* <h2>Все новости</h2> */}
+        {news.map(newsItem => (
+          <TimelineItem
+            key={newsItem.frontmatter.date}
+            dateText={newsItem.frontmatter.date}
+            style={{ color: '#e86971' }} >
+            <h2>{newsItem.frontmatter.title}</h2>
+            <p dangerouslySetInnerHTML={{__html: newsItem.html}}/>
+          </TimelineItem>
+        ))}
+      </Timeline>
+      <nav style={{ display: 'flex', justifyContent: 'space-between', marginLeft: `15%` }}>
+        <div>
+          {prev &&<Link to={prev}><h1 style={{padding: 10, color: `red`}}>{`<`}---</h1> </Link>}
+        </div>
+
+        <div style={{ justifySelf: 'flex-end', marginRight: `10%`}}>
+          {next && <Link to={next} ><h1 style={{padding: 10, color: `red`}}>---></h1></Link>}
+        </div>
+      </nav>
+    <Footer/>
+    </>
+  )
+}
+
+export const query = graphql`
+  query NewsQuery($limit: Int!, $skip: Int!) {
+    news: allMarkdownRemark(
+      filter: {frontmatter: {content_type: {eq: "post"}, published: {eq: true}}},
+      sort: {fields: [frontmatter___date], order: DESC},
+      limit: $limit
+      skip: $skip
+    ) {
+      edges {
+        node {
+          frontmatter {
+            title
+            slug
+            date(formatString: "DD.MM.YYYY")
+          }
+          html
+        }
+      }
+    }
+  }
+`

src/pages/content/ru/news/2018_09_21_lab-intro.md

@@ -3,6 +3,7 @@ content_type: post
 title: Пособие по проведению и обработке лабораторных работ
 date: 2018-09-21
 published: true
+slug: /intro
 ---
 Добавлено пособие по проведению и обработке лабораторных работ (рабочая версия).
 

src/pages/content/ru/news/2019_01_18.md

@@ -3,7 +3,8 @@ content_type: post
 title: Публикации и курс по научному программированию
 date: 2019-01-17
 published: true
+slug: /programming
 ---
-Добавлена [страница с публикациями](publications).
+Добавлена [страница с публикациями](/publications).
 
-Добавлена страница [курса по научному программированию на kotlin](pages/kotlin).
+Добавлена страница [курса по научному программированию на kotlin](/pages/kotlin).

src/pages/content/ru/news/2019_02_27_conference.md

@@ -3,6 +3,7 @@ content_type: post
 title: Физика элементарных частици и космология - 2019
 date: 2019-02-26
 published: true
+slug: /conference
 ---
 Открыта регистрация на молодежную конференцию «Физика элементарных частиц и космология - 2019». Конференция посвящена физике частиц, космологии, а также широкому кругу смежных тем, таких как математическая физика, астрофизика, ядерная медицина, и так далее.
 Конференция проводится в восьмой раз и несмотря на небольшое количество докладов, зарекомендовала себя как одна из самых представительных русскоязычных молодежных конференций по этой тематике.

src/pages/content/ru/news/2019_05_15.md

@@ -3,6 +3,7 @@ content_type: post
 title: Новые проекты
 date: 2019-05-15
 published: true
+slug: /projects
 ---
 
 Открыто финансирование лаборатории. В связи с этим мы запускаем несколько новых проектов.

src/pages/content/ru/news/2019_06_10_prog_seminar.md

@@ -3,6 +3,7 @@ content_type: post
 title: Семинар по программированию
 date: 2019-06-10
 published: true
+slug: /prog_seminar
 ---
 Лаборатория совместно с ОИЯИ и при поддержке [JetBrains Research](https://research.jetbrains.org/groups/npm) 
 запускает серию семинаров по программированию в

src/pages/content/ru/news/2019_11_13.md

@@ -3,6 +3,7 @@ content_type: post
 title: Новости - осень 2019
 date: 2019-11-13
 published: true
+slug: /autumn
 ---
 
 ### Добавлена страница конференции QUARKS-2020

src/pages/content/ru/news/2019_12_24_results_2019.md

@@ -3,6 +3,7 @@ content_type: post
 title: Итоги 2019 года
 date: 2019-12-24
 published: true
+slug: /results_2019
 ---
 
 ### Краткий отчет по достижениям за 2019 год

src/pages/content/ru/news/2020_02_07_kotlin-course.md

@@ -3,6 +3,7 @@ content_type: post
 title: Научное программирование на Kotlin - 2020
 date: 2020-02-07
 published: true
+slug: /kotlin_2020
 ---
 
 Открыта регистрация на курс "Введение в научное программирование на языке Kotlin". В этом году курс проходит при официальном участии JetBrains и поддержке [JetBrains Research](https://research.jetbrains.org/groups/npm).

src/pages/content/ru/news/Site update 20_01_2017.md

@@ -3,5 +3,6 @@ content_type: post
 title: Обновление 20.01.2017
 date: 2017-01-20
 published: true
+slug: /update
 ---
-Обновлены некоторые разделы сайта. Создан [внутренний раздел](http://npm.mipt.ru/confluence).
+<p>Обновлены некоторые разделы сайта. Создан <a href="http://npm.mipt.ru/confluence">внутренний раздел</a>.</p>

src/pages/content/ru/news/autumn_2018.md

@@ -3,6 +3,7 @@ content_type: post
 title: Осенний семестр 2018
 date: 2018-09-07
 published: true
+slug: /autumn_2018
 ---
 Поздравляем всех с началом ного учебного года! 
 
@@ -10,7 +11,7 @@ published: true
 
 <hr>
 
-## [Неускорительные эксперименты по физике частиц и астрофизике](pages/subterranean)
+## [Неускорительные эксперименты по физике частиц и астрофизике](/pages/subterranean)
 **Первая лекция — 19 сентября 2018 г.**
 
 Лектор: Лев Владиславович Инжечик, к. ф.-м. н., участник международных коллабораций GERDA, LEGEND, EMMA и Mu-MONITOR.
@@ -21,7 +22,7 @@ published: true
 
 <hr> 
 
-## [Статистические методы в экспериментальной физике](pages/stat-methods)
+## [Статистические методы в экспериментальной физике](/pages/stat-methods)
 **Первая лекция — 26 сентября 2018 г.**
 
 Лектор: Александр Аркадьевич Нозик, к. ф.-м. н.
@@ -41,7 +42,7 @@ published: true
 
 Приглашаем всех желающих на научные собрания, которые будут проходить **каждую среду, в 12.20, в 403 ЛК**. 
 
-По всем вопросам пожалуйста пишите на [электронный адрес группы или в телеграм канал](about).
+По всем вопросам пожалуйста пишите на [электронный адрес группы или в телеграм канал](/about).
 
 <hr>
 

src/pages/content/ru/news/conference_2017.md

@@ -3,6 +3,7 @@ content_type: post
 title: Молодежная конференция 2017
 date: 2017-01-31
 published: true
+slug: /conf_2017
 ---
 
 <img class="img-fluid" src="/images/index/conference_2017_header.png" class="img-responsive" alt="conference slider">

src/pages/content/ru/news/new_partners.md

@@ -3,6 +3,7 @@ content_type: post
 title: Новые партнеры
 date: 2016-11-21
 published: true
+slug: /partners
 ---
 19 норября прошла очередная рабочая встреча группы. В рамках встречи в частности обсуждали два новых соглашения о сотрудничестве.
 
@@ -10,4 +11,4 @@ published: true
 
 Также в рамках сотрудничества с ИКИ РАН создана рабочая группа по моделированию электрических разрядов в верхних слоях атмосферы.
 
-Обновлен раздел ["Партнеры"](partners)
+Обновлен раздел ["Партнеры"](/partners)

src/pages/content/ru/news/seminar_05_11_2016.md

@@ -3,6 +3,7 @@ content_type: post
 title: Окончание сеанса на "Троицк ню-масс" и очередная рабочая встреча
 date: 2016-11-04
 published: true
+slug: /seminar_2016
 ---
 После небольшой паузы, произошедшей из-за очередного сеанса работы эксперимента "Троицк ню-масс", мы возобновляем регулярные научные собрания группы.
 

src/pages/content/ru/news/seminar_19_10_2016.md

@@ -3,6 +3,7 @@ content_type: post
 title: Семинар по фону солнечных нейтрино
 date: 2016-10-18
 published: true
+slug: /seminar_2016_2
 ---
 
 19 октября в 15:30 в Курчатовском институте, Пехотная, 20 состоится семинар, посвященный теме: "**Фон солнечных нейтрино в эксперименте по двойному бета-распаду германия GERDA**." 

src/pages/content/ru/news/site_start.md

@@ -3,6 +3,7 @@ content_type: post
 title: Запущена официальная версия сайта
 date: 2016-09-25
 published: true
+slug: /develop
 ---
 
 Запущена официальная версия сайта группы. Некоторые разделы пока находятся в разработке.

src/pages/content/ru/news/subterranean_2017.md

@@ -3,6 +3,7 @@ content_type: post
 title: Низкофоновые эксперименты по физике ядра, частиц и астрофизике
 date: 2017-02-06
 published: true
+slug: /subterranean
 ---
 <p class="lead">
 Cеместровый курс по выбору

src/pages/content/ru/news/update_06_02_2018.md

@@ -3,8 +3,9 @@ content_type: post
 title: Обновления
 date: 2018-02-06
 published: true
+slug: /update_2
 ---
 
-* Добавлено описание [лабораторной работы по двулучепреломлению](pages/biref).
+* Добавлено описание [лабораторной работы по двулучепреломлению](/pages/biref).
 * Обновление дизайна сайта (теперь Bootstrap 4).
 * Добавлена контактная информация.

src/pages/content/ru/news/update_11_10_2016.md

@@ -3,9 +3,10 @@ content_type: post
 title: Обновления 11.10.2016
 date: 2016-10-11
 published: true
+slug: /update_3
 ---
 
-Добавлены контакты в разделе ["Группа"](about).
+Добавлены контакты в разделе ["Группа"](/about).
 
 На кафдере общей физики прошел [семинар](https://mipt.ru/education/chair/physics/news/Nauchno_metodicheskiy_seminar_6_10_2016) по мюонному монитору.
 

src/pages/content/ru/news/update_29_08_2017.md

@@ -3,7 +3,8 @@ content_type: post
 title: Обновления
 date: 2017-08-29
 published: true
+slug: /update_4
 ---
 
-* Обновлена инфомрация [о группе](about).
+* Обновлена инфомрация [о группе](/about).
-* Добавлена информация о курсе по выбору Л. В. Инжечика об [истории атомного проекта](pages/atom).
+* Добавлена информация о курсе по выбору Л. В. Инжечика об [истории атомного проекта](/pages/atom).

src/pages/index.js

@@ -60,7 +60,7 @@ const IndexPage = ({data}) => (
     </div>
     <hr style={{marginBottom: `50px`}}/>
     {/* --------------------------------- */}
-    <h1 style={{textAlign: `center`}}>Новости</h1>
+    <h1 style={{textAlign: `center`}}>Последние новости</h1>
       { data.posts.nodes.map(post => {
           const title = post.frontmatter.title;
           const date = post.frontmatter.date;
@@ -87,7 +87,8 @@ export default IndexPage
 export const query = graphql`
   query {
     posts: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "post"}, published: {eq: true}}},
-                      sort: {fields: [frontmatter___date], order: DESC}) {
+                      sort: {fields: [frontmatter___date], order: DESC},
+                      limit: 3) {
       nodes{
             html
             frontmatter {

src/styles/main.css

@@ -2,6 +2,8 @@ main { margin-top: 75px; }
 
 /* ---- projects navbar ---------------------- */
 ul.nav.nav-tabs { margin-top: 75px; }
+a { font-size: 0.9rem; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
+a#partner{ font-size: 1.8rem; }
 a.nav-link#project:hover { 
   padding-bottom: 7px;
   color: rgb(0, 0, 0); 
@@ -20,6 +22,7 @@ h2 { font-size: 1.75rem; }
 h3 { font-size: 1.5rem; }
 div.container main a { color: rgb(0, 86, 179); }
 div.container main a:hover { color: rgb(1, 66, 136); text-decoration: underline; }
+div.container main p a:visited {color: rgb(0, 86, 179); text-decoration: none; }
 
 .jumbotron { 
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
@@ -63,7 +66,7 @@ span#date {
   right: 26px; }
 
 p { 
-  font-size: 20px; 
+  font-size: 0.95rem; 
   margin-top: 15px; 
   margin-bottom: 20px; 
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
@@ -74,6 +77,7 @@ hr {
   margin: 10px 0px 20px 0px; }
 
 img.center-block { margin-bottom: 0; }
+ol li { font-size: 0.9rem; }
 li { margin-bottom: 0; font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
   Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; }
 ul { margin: 0 0 20px 0; padding-left: 40px; }
@@ -88,6 +92,20 @@ span.badge.badge-info {
   background-color: rgb(20,142,161); }
 
 span.katex-html{color: rgb(0, 0, 0); font-weight: 500;}  
+
+/* timeline */
+div.timeline { max-width: 1400px; }
+div.timeline--wrapper { margin-top: 60px; }
+div.entry div.title{ width: 20% }
+div.entry div.body { width: 80% }
+div.timeline::before { left: calc(20% - 6px) }
+
+div.body div.body-container.bounce-in p p a{ color: rgb(0, 86, 179) }
+div.body div.body-container.bounce-in p h2 a{ color: rgb(0, 86, 179) }
+div.body div.body-container.bounce-in p ul li a{ color: rgb(0, 86, 179) }
+
+nav div a:hover { text-decoration: none; }
+
 /* -------------------------------------------------------- */
 
 /* --- media --------------------------------------------- */
@@ -103,5 +121,8 @@ span.katex-html{color: rgb(0, 0, 0); font-weight: 500;}
     margin-right: 0;
     border: 1px solid rgb(202, 202, 202); }
   a.nav-link#project.active { color: black; }
+  div.entry div.title{ width: 40% }
+  div.entry div.body { width: 80% }
+  div.timeline::before { left: calc(12% - 6px) }
  }
 /* ------------------------------------------------------- */