From d8c4aef5e96d26ee7dd35b6e6ba20efeb557f20e Mon Sep 17 00:00:00 2001 From: Sergey Yarkov Date: Fri, 3 Jul 2020 19:20:09 +0300 Subject: [PATCH] anchor --- content/articles/2020-07-02-second-article.md | 10 +- gatsby-config.js | 12 ++ package-lock.json | 30 +++++ package.json | 1 + src/components/Article/Article.js | 121 ++++++++++-------- src/components/Article/Article.scss | 11 +- src/pages/articles.js | 2 +- src/pages/index.js | 2 +- src/styles/global.scss | 11 ++ 9 files changed, 137 insertions(+), 63 deletions(-) diff --git a/content/articles/2020-07-02-second-article.md b/content/articles/2020-07-02-second-article.md index 3fcf081..5880c25 100644 --- a/content/articles/2020-07-02-second-article.md +++ b/content/articles/2020-07-02-second-article.md @@ -33,12 +33,12 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non fermentum ligu ![wallpaper](https://wallpaperplay.com/walls/full/2/9/7/164604.jpg) ```js - module.exports = { - plugins: [ - { + module.exports = { + plugins: [ + { resolve: `plugin` - } - ] + } + ] } ``` diff --git a/gatsby-config.js b/gatsby-config.js index 857ee34..871f43f 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -35,6 +35,18 @@ module.exports = { resolve: `gatsby-transformer-remark`, options: { plugins: [ + { + resolve: `gatsby-remark-autolink-headers`, + options: { + offsetY: `140`, + icon: ``, + className: `anchor-link`, + maintainCase: true, + removeAccents: true, + isIconAfterHeader: true, + elements: [`h1`, `h2`, `h3`, `h4`], + }, + }, { resolve: `gatsby-remark-prismjs`, options: { diff --git a/package-lock.json b/package-lock.json index ee13c76..e248380 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7615,6 +7615,36 @@ } } }, + "gatsby-remark-autolink-headers": { + "version": "2.3.10", + "resolved": "https://registry.npmjs.org/gatsby-remark-autolink-headers/-/gatsby-remark-autolink-headers-2.3.10.tgz", + "integrity": "sha512-kSdYaU/rRxWKFfjtFCXFu+3ZG4aR45FTTjpe7murmduN4N8zj7xGNEK8yubecwv882DKJXAS/lTrgcJUJfoW3g==", + "requires": { + "@babel/runtime": "^7.10.3", + "github-slugger": "^1.3.0", + "lodash": "^4.17.15", + "mdast-util-to-string": "^1.1.0", + "unist-util-visit": "^1.4.1" + }, + "dependencies": { + "unist-util-visit": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-1.4.1.tgz", + "integrity": "sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==", + "requires": { + "unist-util-visit-parents": "^2.0.0" + } + }, + "unist-util-visit-parents": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-2.1.2.tgz", + "integrity": "sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==", + "requires": { + "unist-util-is": "^3.0.0" + } + } + } + }, "gatsby-remark-prismjs": { "version": "3.5.9", "resolved": "https://registry.npmjs.org/gatsby-remark-prismjs/-/gatsby-remark-prismjs-3.5.9.tgz", diff --git a/package.json b/package.json index 384c658..92955e0 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "gatsby-plugin-react-helmet": "^3.3.8", "gatsby-plugin-react-svg": "^3.0.0", "gatsby-plugin-sass": "^2.3.7", + "gatsby-remark-autolink-headers": "^2.3.10", "gatsby-remark-prismjs": "^3.5.9", "gatsby-source-filesystem": "^2.3.18", "gatsby-transformer-remark": "^2.8.23", diff --git a/src/components/Article/Article.js b/src/components/Article/Article.js index c44f4a0..55b0b3a 100644 --- a/src/components/Article/Article.js +++ b/src/components/Article/Article.js @@ -1,4 +1,5 @@ import React from 'react'; +import SEO from '../SEO/SEO' import { Link } from 'gatsby' import './Article.scss' @@ -7,67 +8,77 @@ import VkIcon from '../../images/vk-icon.svg' import TwitterIcon from '../../images/twitter-icon__large.svg' import FacebookIcon from '../../images/facebook-icon__large.svg' -const Article = ({ data: { title, description, category, tags, time }, html }) => { +const Article = ({ data: { title, description, category, tags, time, date }, html }) => { return ( -
-
-
-
- ~ {time} мин + <> + +
+
+
+
+
+ ~ {time} мин +
+
+ + 4252 +
+
+
+
+ {new Date(date).toLocaleDateString()} +
+
-
- - 4252 +
+

{title}

-
-
-

{title}

-
-
- {category} -
-
- Поделиться: -
- - - - - - - - - +
+ {category}
-
-
-

- {description} -

-
-
- {tags.map((tag, i) =>
- {tag} -
)} -
-
- article -
-
-
-
-
- Смотреть еще в категории {category} -
-
-
-

Комментарии

+
+ Поделиться: +
-
+
+

+ {description} +

-
-
-
+
+ {tags.map((tag, i) =>
+ {tag} +
)} +
+
+ article +
+
+
+
+
+ Смотреть еще в категории {category} +
+
+
+

Комментарии

+
+
+
+
+
+
+ ) } diff --git a/src/components/Article/Article.scss b/src/components/Article/Article.scss index ce0c7e3..e3c9f69 100644 --- a/src/components/Article/Article.scss +++ b/src/components/Article/Article.scss @@ -4,8 +4,12 @@ & article { & .article-info { display: flex; + justify-content: space-between; margin-bottom: 10px; font-size: 14px; + & .left-info { + display: flex; + } &__views { display: flex; align-items: center; @@ -14,6 +18,10 @@ margin-right: 7px; } } + &__date { + margin-right: 15px; + color: #767676; + } } & .article-heading { margin-bottom: 5px; @@ -32,12 +40,13 @@ } & .article-share { display: flex; + align-items: center; margin-bottom: 15px; &__social{ margin-left: 15px; & a { text-decoration: none; - margin-right: 5px; + margin-right: 10px; } & a:nth-child(3) { margin-right: 0; diff --git a/src/pages/articles.js b/src/pages/articles.js index f86b89a..7535cef 100644 --- a/src/pages/articles.js +++ b/src/pages/articles.js @@ -1,5 +1,5 @@ import React from "react" -import { Link } from 'gatsby' +import { Link, graphql } from 'gatsby' import SEO from '../components/SEO/SEO' import Layout from '../components/Layout/Layout' import Articles from '../components/Articles/Articles' diff --git a/src/pages/index.js b/src/pages/index.js index e6a485d..1114cd2 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,5 +1,5 @@ import React from "react" -import { Link } from 'gatsby' +import { Link, graphql } from 'gatsby' import SEO from '../components/SEO/SEO' import Layout from '../components/Layout/Layout' import Description from '../components/Description/Description' diff --git a/src/styles/global.scss b/src/styles/global.scss index c7e5440..5aa8677 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -119,6 +119,17 @@ border-bottom: 1px solid rgba(153, 153, 153, 0.2); } } + +.dark { + & .anchor-link { + & svg { + & .anchor-icon { + fill: $white-clr; + } + } + } +} + html { height: 100%; }