vscode remark

2026-10-11 10:19:13 +03:00 · 2020-07-21 00:14:33 +03:00 · 2020-07-21 00:14:33 +03:00 · f375d8dcbf
commit f375d8dcbf
parent ff2b6f0aef
10 changed files with 209 additions and 127 deletions
--- 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
--- 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 }
 }) => {
--- 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: `<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: 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'
+                    }
+                  }
+                }
+              }]
+            }
          }
        ],
      },
--- 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",
--- 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",
--- 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;
--- a/src/components/Articles/Articles.js
+++ b/src/components/Articles/Articles.js
@ -10,7 +10,7 @@ const Articles = ({ data: { edges }, limit = 6, setLimit = () => null }) => {
      <div className="articles">
        <div className="articles-content">
          {edges.length <= 0
-            ? <p>Записей нет</p>
+            ? null
            : edges.map(({ node }, i) => {
                if (i < limit) {
                  return <ArticleCard key={i} data={node.frontmatter} />
--- 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;
    }
  }
--- 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;
--- 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;