From f375d8dcbfc868cb2841a98dab1b61509f499668 Mon Sep 17 00:00:00 2001 From: Sergey Yarkov Date: Tue, 21 Jul 2020 00:14:33 +0300 Subject: [PATCH] vscode remark --- content/articles/статья-12.md | 62 +++++++------- gatsby-browser.js | 6 +- gatsby-config.js | 55 ++++-------- package-lock.json | 115 ++++++++++++++++++-------- package.json | 3 +- src/components/Article/Article.scss | 11 +++ src/components/Articles/Articles.js | 2 +- src/components/Articles/Articles.scss | 2 + src/components/Header/Header.scss | 16 ++++ src/styles/global.scss | 64 +++++++++----- 10 files changed, 209 insertions(+), 127 deletions(-) diff --git a/content/articles/статья-12.md b/content/articles/статья-12.md index 849a8a5..a5dddc0 100644 --- a/content/articles/статья-12.md +++ b/content/articles/статья-12.md @@ -1,24 +1,24 @@ ---- -templateKey: article -slug: article-12 -keywords: - - art -time: "4" -title: Статья 12 -popular: true -image: /assets/reactjs.jpg -category: Новости -date: 2020-07-14T20:22:30.393Z -description: |- - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim - veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea - commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit - esse cillum dolore eu fugiat nulla pariatur. -tags: - - reactjs - - javascript ---- +--- +templateKey: article +slug: article-12 +keywords: + - art +time: "4" +title: Статья 12 +popular: true +image: /assets/reactjs.jpg +category: Новости +date: 2020-07-14T20:22:30.393Z +description: |- + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit + esse cillum dolore eu fugiat nulla pariatur. +tags: + - reactjs + - javascript +--- ## this is second article Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non fermentum ligula. Aenean et ex nec magna faucibus congue eu ac justo. Cras malesuada diam lectus, vitae feugiat nulla condimentum id. Duis interdum sodales eros ornare mattis. Nunc id viverra ante. Maecenas suscipit est sed rhoncus condimentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur vehicula risus nisi, quis hendrerit magna tincidunt eu. Phasellus fringilla accumsan viverra. Mauris a cursus orci. @@ -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) ```js - module.exports = { - plugins: [ - { - resolve: `plugin` - } - ] - } + const { siteMetadata: { title, menuLinks, social: { twitter, telegram } } } = useSiteMetadataQuery() //L1 + const [isScrolled, setIsScrolled] = React.useState(false) + const [isMobileOpen, setIsMobileOpen] = React.useState(false) + 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 diff --git a/gatsby-browser.js b/gatsby-browser.js index dd24a3c..de51aac 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -1,4 +1,7 @@ import 'firebase/database'; + +import 'gatsby-remark-vscode/styles.css' + import './src/styles/global.scss' import './src/components/Header/Header.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/Footer/Footer.scss' -import 'prismjs/themes/prism-tomorrow.css' -import 'prismjs/plugins/line-numbers/prism-line-numbers.css' - export const shouldUpdateScroll = ({ routerProps: { location } }) => { diff --git a/gatsby-config.js b/gatsby-config.js index 1822095..285be52 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -1,3 +1,5 @@ +const path = require('path'); + require('dotenv').config() module.exports = { @@ -109,46 +111,21 @@ module.exports = { resolve: `gatsby-remark-images`, }, { - resolve: `gatsby-remark-autolink-headers`, + resolve: `gatsby-transformer-remark`, options: { - offsetY: `140`, - icon: ``, - className: `anchor-link`, - maintainCase: true, - removeAccents: true, - isIconAfterHeader: false, - elements: [`h1`, `h2`, `h3`, `h4`], - }, - }, - { - resolve: `gatsby-remark-prismjs`, - options: { - classPrefix: "language-", - inlineCodeMarker: null, - aliases: {}, - showLineNumbers: false, - noInlineHighlight: false, - languageExtensions: [ - { - language: "superscript", - extend: "javascript", - definition: { - superscript_types: /(SuperType)/, - }, - insertBefore: { - function: { - superscript_keywords: /(superif|superelse)/, - }, - }, - }, - ], - prompt: { - user: "root", - host: "localhost", - global: false, - }, - escapeEntities: {}, - }, + plugins: [{ + resolve: `gatsby-remark-vscode`, + options: { + extensions: ['material-theme'], + theme: { + default: 'Light+ (default light)', + parentSelector: { + 'body.dark': 'One Dark Pro' + } + } + } + }] + } } ], }, diff --git a/package-lock.json b/package-lock.json index b7e63e3..bd2cf42 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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": { "version": "0.3.0", "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": { "version": "2.3.18", "resolved": "https://registry.npmjs.org/gatsby-source-filesystem/-/gatsby-source-filesystem-2.3.18.tgz", @@ -13334,6 +13338,18 @@ "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": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/md5/-/md5-2.2.1.tgz", @@ -15042,6 +15058,14 @@ "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": { "version": "6.4.0", "resolved": "https://registry.npmjs.org/open/-/open-6.4.0.tgz", @@ -15412,11 +15436,6 @@ "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": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz", @@ -15621,6 +15640,23 @@ "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": { "version": "3.4.0", "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", "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": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", @@ -22424,6 +22468,11 @@ "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": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz", diff --git a/package.json b/package.json index 4d90536..5cc1bae 100644 --- a/package.json +++ b/package.json @@ -31,11 +31,12 @@ "gatsby-plugin-sharp": "^2.6.17", "gatsby-remark-autolink-headers": "^2.3.10", "gatsby-remark-images": "^3.3.17", - "gatsby-remark-prismjs": "^3.5.9", "gatsby-remark-relative-images": "^0.3.0", + "gatsby-remark-vscode": "^3.0.1", "gatsby-source-filesystem": "^2.3.18", "gatsby-transformer-remark": "^2.8.23", "gatsby-transformer-sharp": "^2.5.10", + "material-theme": "github:Binaryify/OneDark-Pro", "netlify-cms-app": "^2.12.16", "node-sass": "^4.14.1", "prismjs": "^1.20.0", diff --git a/src/components/Article/Article.scss b/src/components/Article/Article.scss index 8e00552..e759129 100644 --- a/src/components/Article/Article.scss +++ b/src/components/Article/Article.scss @@ -103,6 +103,17 @@ & .article-share { &__social { & a { + & svg:hover { + & .vk-icon { + fill: #4680C2; + } + & .twitter-icon { + fill: #00acee; + } + & .facebook-icon { + fill: #3b5998; + } + } & svg { & .vk-icon, .twitter-icon, .facebook-icon { fill: $white-clr; diff --git a/src/components/Articles/Articles.js b/src/components/Articles/Articles.js index ce8ef1a..2ad75c1 100644 --- a/src/components/Articles/Articles.js +++ b/src/components/Articles/Articles.js @@ -10,7 +10,7 @@ const Articles = ({ data: { edges }, limit = 6, setLimit = () => null }) => {
{edges.length <= 0 - ?

Записей нет

+ ? null : edges.map(({ node }, i) => { if (i < limit) { return diff --git a/src/components/Articles/Articles.scss b/src/components/Articles/Articles.scss index 1ffdf3e..ad4b7aa 100644 --- a/src/components/Articles/Articles.scss +++ b/src/components/Articles/Articles.scss @@ -34,6 +34,8 @@ & .articles-info { margin-bottom: 20px; & p { + display: flex; + align-items: center; font-size: 18px; } } diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss index 656dcb6..794a28c 100644 --- a/src/components/Header/Header.scss +++ b/src/components/Header/Header.scss @@ -44,6 +44,14 @@ header { align-items: center; & .header-nav__social { margin-right: 35px; + & svg:hover { + & .twitter-svg-social { + fill: #00acee; + } + & .telegram-svg-social { + fill: #0088cc; + } + } & a { text-decoration: none; } @@ -112,6 +120,14 @@ header { } & .mobile-social { margin-top: 30px; + & svg:hover { + & .twitter-svg-social { + fill: #00acee; + } + & .telegram-svg-social { + fill: #0088cc; + } + } & svg { & .telegram-svg-social { fill: $white-clr; diff --git a/src/styles/global.scss b/src/styles/global.scss index dd7ec0c..1d1124d 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -121,13 +121,30 @@ & pre { border-radius: 7px; - border-top: 4px solid #6394F7; 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 { + background: #202020; + & .light-default-light { + background: #282c34; + } + & .anchor-link { + & svg { + & .anchor-icon { + fill: $white-clr; + } + } + } + & .error { + color: $white-clr; + } & .tag-item { & a { color: #5183F5; @@ -147,14 +164,12 @@ } } -.dark { - & .anchor-link { - & svg { - & .anchor-icon { - fill: $white-clr; - } - } - } +.dark::-webkit-scrollbar-track { + background: #2A2A2A; +} + +.dark pre::-webkit-scrollbar-track { + background: #2A2A2A; } html { @@ -223,8 +238,23 @@ p { } ::selection { - color: $black-clr; - background: #f8cc0a; + color: $white-clr; + 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 { @@ -239,10 +269,6 @@ a { color: $primary-clr; } -.dark { - background: #202020; -} - .error { text-align: center; margin-top: 2rem; @@ -257,12 +283,6 @@ a { } } -.dark { - & .error { - color: $white-clr; - } -} - @media (max-width: 991px) { .container-fluid { max-width: 880px;