Блог на Gatsby + Obsidian from scratch ч.1

---
date: MONTH/DAY/YEAR
---

[image alt]('./images/name-of-image.(jpeg|gif|png)')

![[some-image.(jpeg|gif|png)]]

[[Some post title]]

npx gatsby new blog https://github.com/gatsbyjs/gatsby-starter-hello-world
cd blog

ln -s /Users/yourUsername/Documents/knowledgebase/ ./content

npm i gatsby-source-filesystem gatsby-transformer-remark gatsby-remark-obsidian

/**
 * Configure your Gatsby site with this file.
 *
 * See: https://www.gatsbyjs.com/docs/reference/config-files/gatsby-config/
 */

/**
 * @type {import('gatsby').GatsbyConfig}
 */
module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/knowledgebase`,
        name: `blog`,
        ignore: [`**/\.obsidian`]
      },
    },
    {
        resolve: "gatsby-transformer-remark",
        options: {
            plugins: [
                {
                    resolve: 'gatsby-remark-obsidian',
                    options: {
                        titleToURL: (title) => `/${title}`, // optional
                        markdownFolder: `${__dirname}/content/knowledgebase`, // optional
                        highlightClassName: 'highlight', // optional
                    },
                },
            ]
        }
    },
  ],
}```

### Проверяем, как выглядят данные в /graphql

Запускаем

```sh
npm run develop

You can now view gatsby-starter-hello-world in the browser.
⠀
  http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
  http://localhost:8000/___graphql
⠀

query MyQuery {
  allMarkdownRemark {
    edges {
      node {
        excerpt(format: HTML)
        html
        frontmatter {
          date
          title
        }
        id
      }
    }
  }
}

module.exports = {
	siteMetadata: {
	    social: {
	      twitter: 'https://twitter.com/the_strange_dev',
	      siteUrl: 'https://thestrangeadventurer.com',
	      twitterUsername: '@the_strange_dev',
	      profileImage: '/profile.jpg'
	    },
	    title: 'Блог беспечного авантюриста',
	    description: 'Яндексойд, путешественник, авантюрист, беспечный и непредсказуемый. Люблю путешествовать, писать и делиться своими историями. Все мои путешествия и истории о них вы можете найти здесь (шутка, тут только про код).',
	},
	// ...остальной код

const path = require("path")
const { createFilePath } = require("gatsby-source-filesystem")

/*
 * npm install slugify - пакет нужен чтобы превращать заголовки в слаги на латинице
 * Например "Привет мир" => "privet-mir"
 */ 
const slugify = require("slugify");


/**
 * Создаем поля slug и title для каждого поста
 * slug - это путь к посту, например /privet-mir
 * title - это заголовок поста, например "Привет мир"
 * Функция вызывается при создании каждого поста
 */
exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions
  if (node.internal.type === `MarkdownRemark`) {
    const value = createFilePath({ node, getNode });

    createNodeField({
      name: `slug`,
      node,
      value: slugify(value, { lower: true }),
    })
    
    createNodeField({
      name: `title`,
      node,
      value: value,
    })
  }
}

/**
 * Создаем все необходимые страницы на основе файлов
 * которые лежат в папке src/templates
 */
exports.createPages = async function ({ actions, graphql }) {
  /**
   * Получаем слаги, которые необходимы
   * чтобы построить ссылки на все посты
   * и понять сколько будет всего страниц
   */
  const { data } = await graphql(`
    query {
      allMarkdownRemark {
        edges {
          node {
            fields {
              slug
            }
          }
        }
      }
    }
  `)

  const posts = data.allMarkdownRemark.edges
  const POSTS_PER_PAGE = 5 // Определяем сколько постов будет на одной странице
  const numPages = Math.ceil(posts.length / POSTS_PER_PAGE) // Считаем сколько всего страниц

  /**
   * Создаем страницу для каждого поста
   * в качестве компонента, который будет отвечать за рендеринг
   * указываем src/templates/BlogPost.js
   */
  data.allMarkdownRemark.edges.forEach((edge) => {
    const { slug, title } = edge.node.fields

    actions.createPage({
      path: slug,
      component: path.resolve(process.cwd(), `src/templates/BlogPost.js`),
      context: { slug, title },
    })
  })

  /**
   * Создаем страницы для пагинации
   * если страница 1, то путь будет /
   * если страница 2, то путь будет /page/2 и т.д.
   * в качестве компонента, который будет отвечать за рендеринг
   * указываем src/templates/BlogList.js
   */
  Array.from({ length: numPages }).forEach((_, i) => {
    actions.createPage({
      path: i === 0 ? `/` : `/page/${i + 1}`,
      component: path.resolve(process.cwd(), `src/templates/BlogList.js`),
      /**
       * Передаем в контекст данные для построения пагинации
       */
      context: {
        limit: POSTS_PER_PAGE,
        skip: i * POSTS_PER_PAGE,
        numPages,
        currentPage: i + 1,
      },
    })
  })

}

// src/templates/BlogList.js
import React from "react"
import { graphql, Link } from "gatsby"

/**
 * Запрос для получения списка постов, отсортированных по дате
 * 
 * Так как Gatsby это фреймворк - он предоставляет нам определенный API
 * Если мы экспортируем из файла graphql запрос - то Gatsby автоматически
 * будет его выполнять во время сборки и передавать результат
 * в компонент в props.data
 */
export const blogListQuery = graphql`
  query BlogListQuery($skip: Int!, $limit: Int!) {
    allMarkdownRemark(
      sort: { frontmatter: { date: DESC }}
      limit: $limit
      skip: $skip
    ) {
      edges {
        node {
          fields {
            slug
            title
          }
          frontmatter {
            title
            date
          }
        }
      }
    }
  }
`

/**
 * Рендерим список постов со ссылками на них
 */
export default function BlogList(props) {
    const { allMarkdownRemark } = props.data;
    const { edges } = allMarkdownRemark;

    return (
        <div>
            <h1>Blog List</h1>
            {edges.map(({ node }) => {
                const { slug, title } = node.fields;
                const { date } = node.frontmatter;
                return (
                    <div key={slug}>
                        <h2>
                            <Link to={`/${slug}/`}>{title}</Link>
                        </h2>
                        <p>{date}</p>
                    </div>
                )
            })}
        </div>
    )
}

import React from 'react';
import { graphql } from 'gatsby';

/**
 * Запрос для получения одного поста по его slug
 * slug - это часть URL, которая идет после домена
 * slug передается в компонент через контекст, который мы задали в 
 * gatsby-node.js (module.exports = { createPages })
 */
export const query = graphql`
    query BlogPageQuery($slug: String!) {
        markdownRemark(fields: {slug: {eq: $slug}}) {
            html
        }
        site {
            siteMetadata {
                description
                social {
                    siteUrl
                    twitter
                    twitterUsername
                }
                title
            }
        }
    }
`

/**
 * Рендерим пост, используя данные gql запроса
 */
export default function BlogPage(props) {
    const { markdownRemark } = props.data;
    const { html } = markdownRemark;
    return <div dangerouslySetInnerHTML={{ __html: html }}></div>
}

import React from "react"

export default function NotFoundPage() {
    return (
        <div>
            <h1>404</h1>
            <p>Page not found</p>
        </div>
    )
}