bubble/devthread.ru
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/devthread.ru.git synced 2026-10-11 02:09:04 +03:00
Code Issues Packages Projects Releases Wiki Activity

anchor

Browse Source
This commit is contained in:
Sergey Yarkov 2020-07-03 19:20:09 +03:00
parent 433bf9d525
commit d8c4aef5e9
9 changed files with 137 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
content/articles/2020-07-02-second-article.md
View File

@ -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`
}
]
}
]
}
```

12
gatsby-config.js
View File

@ -35,6 +35,18 @@ module.exports = {
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-autolink-headers`,
options: {
offsetY: `140`,
icon: `<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path class="anchor-icon" fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>`,
className: `anchor-link`,
maintainCase: true,
removeAccents: true,
isIconAfterHeader: true,
elements: [`h1`, `h2`, `h3`, `h4`],
},
},
{
resolve: `gatsby-remark-prismjs`,
options: {

30
package-lock.json generated
View File

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

1
package.json
View File

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

121
src/components/Article/Article.js
View File

@ -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 (
<div className="article">
<article>
<div className="article-info">
<div className="article-info__time">
<span>~ {time} мин</span>
<>
<SEO title={title} description={description} />
<div className="article">
<article>
<div className="article-info">
<div className="left-info">
<div className="article-info__time">
<span>~ {time} мин</span>
</div>
<div className="article-info__views">
<ViewsIcon />
<span>4252</span>
</div>
</div>
<div className="right-info">
<div className="article-info__date">
<span>{new Date(date).toLocaleDateString()}</span>
</div>
</div>
</div>
<div className="article-info__views">
<ViewsIcon />
<span>4252</span>
<div className="article-heading">
<h1>{title}</h1>
</div>
</div>
<div className="article-heading">
<h1>{title}</h1>
</div>
<div className="article-category">
<Link to={`/category/${category}`}>{category}</Link>
</div>
<div className="article-share">
<span>Поделиться:</span>
<div className="article-share__social">
<a href="/">
<VkIcon />
</a>
<a href="/">
<TwitterIcon />
</a>
<a href="/">
<FacebookIcon />
</a>
<div className="article-category">
<Link to={`/category/${category}`}>{category}</Link>
</div>
</div>
<div className="article-description">
<p>
{description}
</p>
</div>
<div className="article-tags">
{tags.map((tag, i) => <div key={i} className="tag-item">
<Link to={`category/${tag}`}>{tag}</Link>
</div>)}
</div>
<div className="article-image">
<img src="https://c.wallhere.com/photos/fb/a1/JavaScript_minimalism-1227036.jpg!d" alt="article" />
</div>
<div className="article-inner inner">
<div dangerouslySetInnerHTML={{__html: html}}></div>
</div>
<div className="article-more">
<span>Смотреть еще в категории <Link to={`/category/${category}`}>{category}</Link></span>
</div>
<div className="article-comments">
<div className="article-comments__heading">
<h2>Комментарии</h2>
<div className="article-share">
<span>Поделиться:</span>
<div className="article-share__social">
<a href="/">
<VkIcon />
</a>
<a href="/">
<TwitterIcon />
</a>
<a href="/">
<FacebookIcon />
</a>
</div>
</div>
<div className="article-comments__content">
<div className="article-description">
<p>
{description}
</p>
</div>
</div>
</article>
</div>
<div className="article-tags">
{tags.map((tag, i) => <div key={i} className="tag-item">
<Link to={`category/${tag}`}>{tag}</Link>
</div>)}
</div>
<div className="article-image">
<img src="https://c.wallhere.com/photos/fb/a1/JavaScript_minimalism-1227036.jpg!d" alt="article" />
</div>
<div className="article-inner inner">
<div dangerouslySetInnerHTML={{__html: html}}></div>
</div>
<div className="article-more">
<span>Смотреть еще в категории <Link to={`/category/${category}`}>{category}</Link></span>
</div>
<div className="article-comments">
<div className="article-comments__heading">
<h2>Комментарии</h2>
</div>
<div className="article-comments__content">
</div>
</div>
</article>
</div>
</>
)
}

11
src/components/Article/Article.scss
View File

@ -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;

2
src/pages/articles.js
View File

@ -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'

2
src/pages/index.js
View File

@ -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'

11
src/styles/global.scss
View File

@ -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%;
}