vscode remark

This commit is contained in:
Sergey Yarkov 2020-07-21 00:14:33 +03:00
parent ff2b6f0aef
commit f375d8dcbf
10 changed files with 209 additions and 127 deletions

View File

@ -37,13 +37,19 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non fermentum ligu
![wallpaper](https://wallpaperplay.com/walls/full/2/9/7/164604.jpg) ![wallpaper](https://wallpaperplay.com/walls/full/2/9/7/164604.jpg)
```js ```js
module.exports = { const { siteMetadata: { title, menuLinks, social: { twitter, telegram } } } = useSiteMetadataQuery() //L1
plugins: [ const [isScrolled, setIsScrolled] = React.useState(false)
{ const [isMobileOpen, setIsMobileOpen] = React.useState(false)
resolve: `plugin` const [isDark, setIsDark] = React.useState(false)
}
] React.useEffect(() => {
} setIsDark(window.__isDarkTheme)
isMobileOpen
? document.body.style.overflowY = 'hidden'
: document.body.style.overflowY = ''
document.body.onscroll = () =>
window.pageYOffset >= 100 ? setIsScrolled(true) : setIsScrolled(false)
}, [setIsDark, isMobileOpen])
``` ```
## List ## List

View File

@ -1,4 +1,7 @@
import 'firebase/database'; import 'firebase/database';
import 'gatsby-remark-vscode/styles.css'
import './src/styles/global.scss' import './src/styles/global.scss'
import './src/components/Header/Header.scss' import './src/components/Header/Header.scss'
import './src/components/About/About.scss' import './src/components/About/About.scss'
@ -14,9 +17,6 @@ import './src/components/Books/Books.scss'
import './src/components/Contacts/Contacts.scss' import './src/components/Contacts/Contacts.scss'
import './src/components/Footer/Footer.scss' import './src/components/Footer/Footer.scss'
import 'prismjs/themes/prism-tomorrow.css'
import 'prismjs/plugins/line-numbers/prism-line-numbers.css'
export const shouldUpdateScroll = ({ export const shouldUpdateScroll = ({
routerProps: { location } routerProps: { location }
}) => { }) => {

View File

@ -1,3 +1,5 @@
const path = require('path');
require('dotenv').config() require('dotenv').config()
module.exports = { module.exports = {
@ -109,46 +111,21 @@ module.exports = {
resolve: `gatsby-remark-images`, resolve: `gatsby-remark-images`,
}, },
{ {
resolve: `gatsby-remark-autolink-headers`, resolve: `gatsby-transformer-remark`,
options: { options: {
offsetY: `140`, plugins: [{
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>`, resolve: `gatsby-remark-vscode`,
className: `anchor-link`,
maintainCase: true,
removeAccents: true,
isIconAfterHeader: false,
elements: [`h1`, `h2`, `h3`, `h4`],
},
},
{
resolve: `gatsby-remark-prismjs`,
options: { options: {
classPrefix: "language-", extensions: ['material-theme'],
inlineCodeMarker: null, theme: {
aliases: {}, default: 'Light+ (default light)',
showLineNumbers: false, parentSelector: {
noInlineHighlight: false, 'body.dark': 'One Dark Pro'
languageExtensions: [ }
{ }
language: "superscript", }
extend: "javascript", }]
definition: { }
superscript_types: /(SuperType)/,
},
insertBefore: {
function: {
superscript_keywords: /(superif|superelse)/,
},
},
},
],
prompt: {
user: "root",
host: "localhost",
global: false,
},
escapeEntities: {},
},
} }
], ],
}, },

115
package-lock.json generated
View File

@ -9551,34 +9551,6 @@
} }
} }
}, },
"gatsby-remark-prismjs": {
"version": "3.5.9",
"resolved": "https://registry.npmjs.org/gatsby-remark-prismjs/-/gatsby-remark-prismjs-3.5.9.tgz",
"integrity": "sha512-Nmc5DayvCJQZ+z8Z44fH3aEvDXsb7daY/cEDW02uecwl0xz4g3B7KGEPfI+EDXWCOoB3X5BzYAk/nMKI0UUt1A==",
"requires": {
"@babel/runtime": "^7.10.3",
"parse-numeric-range": "^0.0.2",
"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-relative-images": { "gatsby-remark-relative-images": {
"version": "0.3.0", "version": "0.3.0",
"resolved": "https://registry.npmjs.org/gatsby-remark-relative-images/-/gatsby-remark-relative-images-0.3.0.tgz", "resolved": "https://registry.npmjs.org/gatsby-remark-relative-images/-/gatsby-remark-relative-images-0.3.0.tgz",
@ -9613,6 +9585,38 @@
} }
} }
}, },
"gatsby-remark-vscode": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/gatsby-remark-vscode/-/gatsby-remark-vscode-3.0.1.tgz",
"integrity": "sha512-CqVROFqSTfQj88t8vnuP/rxJFpKiSL7gSBxNjdsyPZMpNsxTTjJ1jq3xiCqrIW8xh7gyk//+bZ5KJteucxrANw==",
"requires": {
"decompress": "^4.2.0",
"json5": "^2.1.1",
"loglevel": "^1.6.4",
"oniguruma": "^7.2.0",
"plist": "^3.0.1",
"unist-util-visit": "^1.4.1",
"vscode-textmate": "4.2.2"
},
"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-source-filesystem": { "gatsby-source-filesystem": {
"version": "2.3.18", "version": "2.3.18",
"resolved": "https://registry.npmjs.org/gatsby-source-filesystem/-/gatsby-source-filesystem-2.3.18.tgz", "resolved": "https://registry.npmjs.org/gatsby-source-filesystem/-/gatsby-source-filesystem-2.3.18.tgz",
@ -13334,6 +13338,18 @@
"repeat-string": "^1.0.0" "repeat-string": "^1.0.0"
} }
}, },
"marked": {
"version": "0.7.0",
"resolved": "https://registry.npmjs.org/marked/-/marked-0.7.0.tgz",
"integrity": "sha512-c+yYdCZJQrsRjTPhUx7VKkApw9bwDkNbHUKo1ovgcfDjb2kc8rLuRbIFyXL5WOEUwzSSKo3IXpph2K6DqB/KZg=="
},
"material-theme": {
"version": "github:Binaryify/OneDark-Pro#b4b5a1568419d2dc59ef59a1dbe3712e22435b85",
"from": "github:Binaryify/OneDark-Pro",
"requires": {
"marked": "^0.7.0"
}
},
"md5": { "md5": {
"version": "2.2.1", "version": "2.2.1",
"resolved": "https://registry.npmjs.org/md5/-/md5-2.2.1.tgz", "resolved": "https://registry.npmjs.org/md5/-/md5-2.2.1.tgz",
@ -15042,6 +15058,14 @@
"mimic-fn": "^2.1.0" "mimic-fn": "^2.1.0"
} }
}, },
"oniguruma": {
"version": "7.2.1",
"resolved": "https://registry.npmjs.org/oniguruma/-/oniguruma-7.2.1.tgz",
"integrity": "sha512-WPS/e1uzhswPtJSe+Zls/kAj27+lEqZjCmRSjnYk/Z4L2Mu+lJC2JWtkZhPJe4kZeTQfz7ClcLyXlI4J68MG2w==",
"requires": {
"nan": "^2.14.0"
}
},
"open": { "open": {
"version": "6.4.0", "version": "6.4.0",
"resolved": "https://registry.npmjs.org/open/-/open-6.4.0.tgz", "resolved": "https://registry.npmjs.org/open/-/open-6.4.0.tgz",
@ -15412,11 +15436,6 @@
"unist-util-visit-children": "^1.0.0" "unist-util-visit-children": "^1.0.0"
} }
}, },
"parse-numeric-range": {
"version": "0.0.2",
"resolved": "https://registry.npmjs.org/parse-numeric-range/-/parse-numeric-range-0.0.2.tgz",
"integrity": "sha1-tPCdQTx6282Yf26SM8e0shDJOOQ="
},
"parse-passwd": { "parse-passwd": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz", "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
@ -15621,6 +15640,23 @@
"find-up": "^3.0.0" "find-up": "^3.0.0"
} }
}, },
"plist": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/plist/-/plist-3.0.1.tgz",
"integrity": "sha512-GpgvHHocGRyQm74b6FWEZZVRroHKE1I0/BTjAmySaohK+cUn+hZpbqXkc3KWgW3gQYkqcQej35FohcT0FRlkRQ==",
"requires": {
"base64-js": "^1.2.3",
"xmlbuilder": "^9.0.7",
"xmldom": "0.1.x"
},
"dependencies": {
"xmlbuilder": {
"version": "9.0.7",
"resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-9.0.7.tgz",
"integrity": "sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0="
}
}
},
"pngjs": { "pngjs": {
"version": "3.4.0", "version": "3.4.0",
"resolved": "https://registry.npmjs.org/pngjs/-/pngjs-3.4.0.tgz", "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-3.4.0.tgz",
@ -21667,6 +21703,14 @@
"resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz", "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
"integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==" "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ=="
}, },
"vscode-textmate": {
"version": "4.2.2",
"resolved": "https://registry.npmjs.org/vscode-textmate/-/vscode-textmate-4.2.2.tgz",
"integrity": "sha512-1U4ih0E/KP1zNK/EbpUqyYtI7PY+Ccd2nDGTtiMR/UalLFnmaYkwoWhN1oI7B91ptBN8NdVwWuvyUnvJAulCUw==",
"requires": {
"oniguruma": "^7.2.0"
}
},
"warning": { "warning": {
"version": "4.0.3", "version": "4.0.3",
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
@ -22424,6 +22468,11 @@
"lodash": "^4.0.0" "lodash": "^4.0.0"
} }
}, },
"xmldom": {
"version": "0.1.31",
"resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.1.31.tgz",
"integrity": "sha512-yS2uJflVQs6n+CyjHoaBmVSqIDevTAWrzMmjG1Gc7h1qQ7uVozNhEPJAwZXWyGQ/Gafo3fCwrcaokezLPupVyQ=="
},
"xmlhttprequest": { "xmlhttprequest": {
"version": "1.8.0", "version": "1.8.0",
"resolved": "https://registry.npmjs.org/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz", "resolved": "https://registry.npmjs.org/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz",

View File

@ -31,11 +31,12 @@
"gatsby-plugin-sharp": "^2.6.17", "gatsby-plugin-sharp": "^2.6.17",
"gatsby-remark-autolink-headers": "^2.3.10", "gatsby-remark-autolink-headers": "^2.3.10",
"gatsby-remark-images": "^3.3.17", "gatsby-remark-images": "^3.3.17",
"gatsby-remark-prismjs": "^3.5.9",
"gatsby-remark-relative-images": "^0.3.0", "gatsby-remark-relative-images": "^0.3.0",
"gatsby-remark-vscode": "^3.0.1",
"gatsby-source-filesystem": "^2.3.18", "gatsby-source-filesystem": "^2.3.18",
"gatsby-transformer-remark": "^2.8.23", "gatsby-transformer-remark": "^2.8.23",
"gatsby-transformer-sharp": "^2.5.10", "gatsby-transformer-sharp": "^2.5.10",
"material-theme": "github:Binaryify/OneDark-Pro",
"netlify-cms-app": "^2.12.16", "netlify-cms-app": "^2.12.16",
"node-sass": "^4.14.1", "node-sass": "^4.14.1",
"prismjs": "^1.20.0", "prismjs": "^1.20.0",

View File

@ -103,6 +103,17 @@
& .article-share { & .article-share {
&__social { &__social {
& a { & a {
& svg:hover {
& .vk-icon {
fill: #4680C2;
}
& .twitter-icon {
fill: #00acee;
}
& .facebook-icon {
fill: #3b5998;
}
}
& svg { & svg {
& .vk-icon, .twitter-icon, .facebook-icon { & .vk-icon, .twitter-icon, .facebook-icon {
fill: $white-clr; fill: $white-clr;

View File

@ -10,7 +10,7 @@ const Articles = ({ data: { edges }, limit = 6, setLimit = () => null }) => {
<div className="articles"> <div className="articles">
<div className="articles-content"> <div className="articles-content">
{edges.length <= 0 {edges.length <= 0
? <p>Записей нет</p> ? null
: edges.map(({ node }, i) => { : edges.map(({ node }, i) => {
if (i < limit) { if (i < limit) {
return <ArticleCard key={i} data={node.frontmatter} /> return <ArticleCard key={i} data={node.frontmatter} />

View File

@ -34,6 +34,8 @@
& .articles-info { & .articles-info {
margin-bottom: 20px; margin-bottom: 20px;
& p { & p {
display: flex;
align-items: center;
font-size: 18px; font-size: 18px;
} }
} }

View File

@ -44,6 +44,14 @@ header {
align-items: center; align-items: center;
& .header-nav__social { & .header-nav__social {
margin-right: 35px; margin-right: 35px;
& svg:hover {
& .twitter-svg-social {
fill: #00acee;
}
& .telegram-svg-social {
fill: #0088cc;
}
}
& a { & a {
text-decoration: none; text-decoration: none;
} }
@ -112,6 +120,14 @@ header {
} }
& .mobile-social { & .mobile-social {
margin-top: 30px; margin-top: 30px;
& svg:hover {
& .twitter-svg-social {
fill: #00acee;
}
& .telegram-svg-social {
fill: #0088cc;
}
}
& svg { & svg {
& .telegram-svg-social { & .telegram-svg-social {
fill: $white-clr; fill: $white-clr;

View File

@ -121,13 +121,30 @@
& pre { & pre {
border-radius: 7px; border-radius: 7px;
border-top: 4px solid #6394F7;
margin: 0 0 15px; margin: 0 0 15px;
background: #2A2A2A !important; font-size: 16px;
} }
} }
.light-default-light {
background: linear-gradient(135.9deg, #F5F9FF 0%, #F5F9FF 0.01%, #F6F4FB 98.96%);
}
.dark { .dark {
background: #202020;
& .light-default-light {
background: #282c34;
}
& .anchor-link {
& svg {
& .anchor-icon {
fill: $white-clr;
}
}
}
& .error {
color: $white-clr;
}
& .tag-item { & .tag-item {
& a { & a {
color: #5183F5; color: #5183F5;
@ -147,14 +164,12 @@
} }
} }
.dark { .dark::-webkit-scrollbar-track {
& .anchor-link { background: #2A2A2A;
& svg {
& .anchor-icon {
fill: $white-clr;
}
}
} }
.dark pre::-webkit-scrollbar-track {
background: #2A2A2A;
} }
html { html {
@ -223,8 +238,23 @@ p {
} }
::selection { ::selection {
color: $black-clr; color: $white-clr;
background: #f8cc0a; background: #3972f4;;
}
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track {
border-radius: 10px;
background: #EFF1F5;
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
background: rgb(89, 124, 228);
} }
ul { ul {
@ -239,10 +269,6 @@ a {
color: $primary-clr; color: $primary-clr;
} }
.dark {
background: #202020;
}
.error { .error {
text-align: center; text-align: center;
margin-top: 2rem; margin-top: 2rem;
@ -257,12 +283,6 @@ a {
} }
} }
.dark {
& .error {
color: $white-clr;
}
}
@media (max-width: 991px) { @media (max-width: 991px) {
.container-fluid { .container-fluid {
max-width: 880px; max-width: 880px;