1
1
mirror of https://github.com/theoludwig/theoludwig.git synced 2024-09-09 17:45:53 +02:00

feat: usage of VSCode Dark+ syntax highlighting in posts

This commit is contained in:
Divlo 2022-02-23 00:38:50 +01:00
parent 0e0036b737
commit a467ea7aff
No known key found for this signature in database
GPG Key ID: 8F9478F220CE65E9
11 changed files with 380 additions and 187 deletions

View File

@ -15,6 +15,7 @@
"preset": "lighthouse:recommended",
"assertions": {
"csp-xss": "warning",
"non-composited-animations": "warning",
"unused-javascript": "warning",
"image-size-responsive": "warning",
"unsized-images": "warning",

View File

@ -3,7 +3,6 @@ describe('Page /blog/[slug]', () => {
cy.visit('/blog/hello-world')
cy.get('[data-cy=language-flag-text]').should('not.exist')
cy.get('h1').should('have.text', '👋 Hello, world!')
cy.get('[data-cy=blog-post-date]').should('have.text', '06/10/2021')
cy.get('.prose a').should('have.attr', 'target', '_blank')
})

View File

@ -10,15 +10,11 @@ describe('Page /blog', () => {
'have.text',
'First post of the blog, introduction and explanation of how this blog is made.'
)
cy.get('[data-cy=blog-posts] [data-cy=blog-post-date]')
.last()
.should('have.text', '06/10/2021')
})
it('should redirect the user to the right blog post', () => {
cy.visit('/blog')
cy.get('[data-cy=blog-posts]')
.last()
cy.get('[data-cy=hello-world]')
.click()
.location('pathname')
.should('eq', '/blog/hello-world')

461
package-lock.json generated
View File

@ -17,7 +17,6 @@
"classnames": "2.3.1",
"date-and-time": "2.1.2",
"gray-matter": "4.0.3",
"highlight.js": "11.4.0",
"html-react-parser": "1.4.8",
"next": "12.1.0",
"next-mdx-remote": "4.0.0",
@ -27,10 +26,13 @@
"react": "17.0.2",
"react-dom": "17.0.2",
"read-pkg": "7.1.0",
"rehype-highlight": "5.0.2",
"rehype-raw": "6.1.1",
"rehype-slug": "5.0.1",
"remark-gfm": "3.0.1",
"sharp": "0.30.1",
"shiki": "0.10.1",
"unified": "10.1.1",
"unist-util-visit": "4.1.0",
"universal-cookie": "4.0.4"
},
"devDependencies": {
@ -46,6 +48,7 @@
"@types/jest": "27.4.0",
"@types/node": "17.0.19",
"@types/react": "17.0.39",
"@types/unist": "2.0.6",
"@typescript-eslint/eslint-plugin": "5.12.1",
"autoprefixer": "10.4.2",
"cypress": "9.5.0",
@ -72,7 +75,7 @@
"semantic-release": "19.0.2",
"start-server-and-test": "1.14.0",
"tailwindcss": "3.0.23",
"typescript": "4.5.5",
"typescript": "4.4.4",
"vercel": "24.0.0"
},
"engines": {
@ -4369,9 +4372,9 @@
}
},
"node_modules/@rollup/plugin-babel": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.0.tgz",
"integrity": "sha512-9uIC8HZOnVLrLHxayq/PTzw+uS25E14KPUBh5ktF+18Mjo5yK0ToMMx6epY0uEgkjwJw0aBW4x2horYXh8juWw==",
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
"integrity": "sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==",
"dependencies": {
"@babel/helper-module-imports": "^7.10.4",
"@rollup/pluginutils": "^3.1.0"
@ -5134,6 +5137,11 @@
"integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
"dev": true
},
"node_modules/@types/parse5": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-6.0.3.tgz",
"integrity": "sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g=="
},
"node_modules/@types/prettier": {
"version": "2.4.4",
"resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.4.4.tgz",
@ -11220,18 +11228,6 @@
"reusify": "^1.0.4"
}
},
"node_modules/fault": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/fault/-/fault-2.0.1.tgz",
"integrity": "sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==",
"dependencies": {
"format": "^0.2.0"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/wooorm"
}
},
"node_modules/fb-watchman": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.1.tgz",
@ -11465,14 +11461,6 @@
"node": ">= 0.12"
}
},
"node_modules/format": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
"integrity": "sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=",
"engines": {
"node": ">=0.4.x"
}
},
"node_modules/formidable": {
"version": "1.2.6",
"resolved": "https://registry.npmjs.org/formidable/-/formidable-1.2.6.tgz",
@ -12285,6 +12273,43 @@
"node": ">=8"
}
},
"node_modules/hast-to-hyperscript": {
"version": "10.0.1",
"resolved": "https://registry.npmjs.org/hast-to-hyperscript/-/hast-to-hyperscript-10.0.1.tgz",
"integrity": "sha512-dhIVGoKCQVewFi+vz3Vt567E4ejMppS1haBRL6TEmeLeJVB1i/FJIIg/e6s1Bwn0g5qtYojHEKvyGA+OZuyifw==",
"dependencies": {
"@types/unist": "^2.0.0",
"comma-separated-tokens": "^2.0.0",
"property-information": "^6.0.0",
"space-separated-tokens": "^2.0.0",
"style-to-object": "^0.3.0",
"unist-util-is": "^5.0.0",
"web-namespaces": "^2.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
}
},
"node_modules/hast-util-from-parse5": {
"version": "7.1.0",
"resolved": "https://registry.npmjs.org/hast-util-from-parse5/-/hast-util-from-parse5-7.1.0.tgz",
"integrity": "sha512-m8yhANIAccpU4K6+121KpPP55sSl9/samzQSQGpb0mTExcNh2WlvjtMwSWFhg6uqD4Rr6Nfa8N6TMypQM51rzQ==",
"dependencies": {
"@types/hast": "^2.0.0",
"@types/parse5": "^6.0.0",
"@types/unist": "^2.0.0",
"hastscript": "^7.0.0",
"property-information": "^6.0.0",
"vfile": "^5.0.0",
"vfile-location": "^4.0.0",
"web-namespaces": "^2.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
}
},
"node_modules/hast-util-has-property": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/hast-util-has-property/-/hast-util-has-property-2.0.0.tgz",
@ -12306,13 +12331,34 @@
"url": "https://opencollective.com/unified"
}
},
"node_modules/hast-util-is-element": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-2.1.2.tgz",
"integrity": "sha512-thjnlGAnwP8ef/GSO1Q8BfVk2gundnc2peGQqEg2kUt/IqesiGg/5mSwN2fE7nLzy61pg88NG6xV+UrGOrx9EA==",
"node_modules/hast-util-parse-selector": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-3.1.0.tgz",
"integrity": "sha512-AyjlI2pTAZEOeu7GeBPZhROx0RHBnydkQIXlhnFzDi0qfXTmGUWoCYZtomHbrdrheV4VFUlPcfJ6LMF5T6sQzg==",
"dependencies": {
"@types/hast": "^2.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
}
},
"node_modules/hast-util-raw": {
"version": "7.2.1",
"resolved": "https://registry.npmjs.org/hast-util-raw/-/hast-util-raw-7.2.1.tgz",
"integrity": "sha512-wgtppqXVdXzkDXDFclLLdAyVUJSKMYYi6LWIAbA8oFqEdwksYIcPGM3RkKV1Dfn5GElvxhaOCs0jmCOMayxd3A==",
"dependencies": {
"@types/hast": "^2.0.0",
"@types/unist": "^2.0.0"
"@types/parse5": "^6.0.0",
"hast-util-from-parse5": "^7.0.0",
"hast-util-to-parse5": "^7.0.0",
"html-void-elements": "^2.0.0",
"parse5": "^6.0.0",
"unist-util-position": "^4.0.0",
"unist-util-visit": "^4.0.0",
"vfile": "^5.0.0",
"web-namespaces": "^2.0.0",
"zwitch": "^2.0.0"
},
"funding": {
"type": "opencollective",
@ -12344,26 +12390,29 @@
"url": "https://opencollective.com/unified"
}
},
"node_modules/hast-util-to-string": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-2.0.0.tgz",
"integrity": "sha512-02AQ3vLhuH3FisaMM+i/9sm4OXGSq1UhOOCpTLLQtHdL3tZt7qil69r8M8iDkZYyC0HCFylcYoP+8IO7ddta1A==",
"node_modules/hast-util-to-parse5": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/hast-util-to-parse5/-/hast-util-to-parse5-7.0.0.tgz",
"integrity": "sha512-YHiS6aTaZ3N0Q3nxaY/Tj98D6kM8QX5Q8xqgg8G45zR7PvWnPGPP0vcKCgb/moIydEJ/QWczVrX0JODCVeoV7A==",
"dependencies": {
"@types/hast": "^2.0.0"
"@types/hast": "^2.0.0",
"@types/parse5": "^6.0.0",
"hast-to-hyperscript": "^10.0.0",
"property-information": "^6.0.0",
"web-namespaces": "^2.0.0",
"zwitch": "^2.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
}
},
"node_modules/hast-util-to-text": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-3.1.1.tgz",
"integrity": "sha512-7S3mOBxACy8syL45hCn3J7rHqYaXkxRfsX6LXEU5Shz4nt4GxdjtMUtG+T6G/ZLUHd7kslFAf14kAN71bz30xA==",
"node_modules/hast-util-to-string": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-2.0.0.tgz",
"integrity": "sha512-02AQ3vLhuH3FisaMM+i/9sm4OXGSq1UhOOCpTLLQtHdL3tZt7qil69r8M8iDkZYyC0HCFylcYoP+8IO7ddta1A==",
"dependencies": {
"@types/hast": "^2.0.0",
"hast-util-is-element": "^2.0.0",
"unist-util-find-after": "^4.0.0"
"@types/hast": "^2.0.0"
},
"funding": {
"type": "opencollective",
@ -12379,12 +12428,20 @@
"url": "https://opencollective.com/unified"
}
},
"node_modules/highlight.js": {
"version": "11.4.0",
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.4.0.tgz",
"integrity": "sha512-nawlpCBCSASs7EdvZOYOYVkJpGmAOKMYZgZtUqSRqodZE0GRVcFKwo1RcpeOemqh9hyttTdd5wDBwHkuSyUfnA==",
"engines": {
"node": ">=12.0.0"
"node_modules/hastscript": {
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/hastscript/-/hastscript-7.0.2.tgz",
"integrity": "sha512-uA8ooUY4ipaBvKcMuPehTAB/YfFLSSzCwFSwT6ltJbocFUKH/GDHLN+tflq7lSRf9H86uOuxOFkh1KgIy3Gg2g==",
"dependencies": {
"@types/hast": "^2.0.0",
"comma-separated-tokens": "^2.0.0",
"hast-util-parse-selector": "^3.0.0",
"property-information": "^6.0.0",
"space-separated-tokens": "^2.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
}
},
"node_modules/hook-std": {
@ -12524,6 +12581,15 @@
"node": ">=14.18.1"
}
},
"node_modules/html-void-elements": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-2.0.1.tgz",
"integrity": "sha512-0quDb7s97CfemeJAnW9wC0hw78MtW7NU3hqtCD75g2vFlDLt36llsYD7uB7SUzojLMP24N5IatXf7ylGXiGG9A==",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/wooorm"
}
},
"node_modules/html-w3c-validator": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/html-w3c-validator/-/html-w3c-validator-1.0.0.tgz",
@ -15375,8 +15441,7 @@
"node_modules/jsonc-parser": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.0.0.tgz",
"integrity": "sha512-fQzRfAbIBnR0IQvftw9FJveWiHp72Fg20giDrHz6TdfB12UH/uue0D3hm57UB5KgAVuniLMCaS8P1IMj9NR7cA==",
"dev": true
"integrity": "sha512-fQzRfAbIBnR0IQvftw9FJveWiHp72Fg20giDrHz6TdfB12UH/uue0D3hm57UB5KgAVuniLMCaS8P1IMj9NR7cA=="
},
"node_modules/jsonfile": {
"version": "6.1.0",
@ -16548,20 +16613,6 @@
"node": ">=0.10.0"
}
},
"node_modules/lowlight": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/lowlight/-/lowlight-2.5.0.tgz",
"integrity": "sha512-OXGUch9JZu4q5r4Ir6QlUp5pBXMxS7NHaclhRiUlxNRcOSK0gtXZcVrsGP4eM7bv0/KDHg/TXQagx/X35EULsA==",
"dependencies": {
"@types/hast": "^2.0.0",
"fault": "^2.0.0",
"highlight.js": "~11.4.0"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/wooorm"
}
},
"node_modules/lru-cache": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@ -21912,8 +21963,7 @@
"node_modules/parse5": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
"integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==",
"dev": true
"integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw=="
},
"node_modules/parseqs": {
"version": "0.0.6",
@ -23731,16 +23781,14 @@
"jsesc": "bin/jsesc"
}
},
"node_modules/rehype-highlight": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/rehype-highlight/-/rehype-highlight-5.0.2.tgz",
"integrity": "sha512-ZNm8V8BQUDn05cJPzAu/PjiloaFFrh+Pt3bY+NCcdCggI7Uyl5mW0FGR7RATeIz5/ECUd1D8Kvjt4HaLPmnOMw==",
"node_modules/rehype-raw": {
"version": "6.1.1",
"resolved": "https://registry.npmjs.org/rehype-raw/-/rehype-raw-6.1.1.tgz",
"integrity": "sha512-d6AKtisSRtDRX4aSPsJGTfnzrX2ZkHQLE5kiUuGOeEoLpbEulFF4hj0mLPbsa+7vmguDKOVVEQdHKDSwoaIDsQ==",
"dependencies": {
"@types/hast": "^2.0.0",
"hast-util-to-text": "^3.0.0",
"lowlight": "^2.0.0",
"unified": "^10.0.0",
"unist-util-visit": "^4.0.0"
"hast-util-raw": "^7.2.0",
"unified": "^10.0.0"
},
"funding": {
"type": "opencollective",
@ -24696,6 +24744,16 @@
"node": ">=8"
}
},
"node_modules/shiki": {
"version": "0.10.1",
"resolved": "https://registry.npmjs.org/shiki/-/shiki-0.10.1.tgz",
"integrity": "sha512-VsY7QJVzU51j5o1+DguUd+6vmCmZ5v/6gYu4vyYAhzjuNQU6P/vmSy4uQaOhvje031qQMiW0d2BwgMH52vqMng==",
"dependencies": {
"jsonc-parser": "^3.0.0",
"vscode-oniguruma": "^1.6.1",
"vscode-textmate": "5.2.0"
}
},
"node_modules/side-channel": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
@ -27138,9 +27196,9 @@
}
},
"node_modules/typescript": {
"version": "4.5.5",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.5.tgz",
"integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==",
"version": "4.4.4",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.4.4.tgz",
"integrity": "sha512-DqGhF5IKoBl8WNf8C1gu8q0xZSInh9j1kJJMqT3a94w1JzVaBU4EXOSMrz9yDqMT0xt3selp83fuFMQ0uzv6qA==",
"dev": true,
"bin": {
"tsc": "bin/tsc",
@ -27343,19 +27401,6 @@
"url": "https://opencollective.com/unified"
}
},
"node_modules/unist-util-find-after": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/unist-util-find-after/-/unist-util-find-after-4.0.0.tgz",
"integrity": "sha512-gfpsxKQde7atVF30n5Gff2fQhAc4/HTOV4CvkXpTg9wRfQhZWdXitpyXHWB6YcYgnsxLx+4gGHeVjCTAAp9sjw==",
"dependencies": {
"@types/unist": "^2.0.0",
"unist-util-is": "^5.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
}
},
"node_modules/unist-util-generated": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/unist-util-generated/-/unist-util-generated-2.0.0.tgz",
@ -28235,6 +28280,19 @@
"url": "https://opencollective.com/unified"
}
},
"node_modules/vfile-location": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-4.0.1.tgz",
"integrity": "sha512-JDxPlTbZrZCQXogGheBHjbRWjESSPEak770XwWPfw5mTc1v1nWGLB/apzZxsx8a0SJVfF8HK8ql8RD308vXRUw==",
"dependencies": {
"@types/unist": "^2.0.0",
"vfile": "^5.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
}
},
"node_modules/vfile-matter": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/vfile-matter/-/vfile-matter-3.0.1.tgz",
@ -28322,6 +28380,16 @@
"node": ">=4"
}
},
"node_modules/vscode-oniguruma": {
"version": "1.6.1",
"resolved": "https://registry.npmjs.org/vscode-oniguruma/-/vscode-oniguruma-1.6.1.tgz",
"integrity": "sha512-vc4WhSIaVpgJ0jJIejjYxPvURJavX6QG41vu0mGhqywMkQqulezEqEQ3cO3gc8GvcOpX6ycmKGqRoROEMBNXTQ=="
},
"node_modules/vscode-textmate": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/vscode-textmate/-/vscode-textmate-5.2.0.tgz",
"integrity": "sha512-Uw5ooOQxRASHgu6C7GVvUxisKXfSgW4oFlO+aa+PAkgmH89O3CXxEEzNRNtHSqtXFTl0nAC1uYj0GMSH27uwtQ=="
},
"node_modules/w3c-hr-time": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
@ -28423,6 +28491,15 @@
"integrity": "sha512-DEAoo25RfSYMuTGc9vPJzZcZullwIqRDSI9LOy+fkCJPi6hykCnfKaXTuPBDuXAUcqHXyOgFtHNp/kB2FjYHbw==",
"dev": true
},
"node_modules/web-namespaces": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz",
"integrity": "sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/wooorm"
}
},
"node_modules/webidl-conversions": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz",
@ -32221,9 +32298,9 @@
}
},
"@rollup/plugin-babel": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.0.tgz",
"integrity": "sha512-9uIC8HZOnVLrLHxayq/PTzw+uS25E14KPUBh5ktF+18Mjo5yK0ToMMx6epY0uEgkjwJw0aBW4x2horYXh8juWw==",
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
"integrity": "sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==",
"requires": {
"@babel/helper-module-imports": "^7.10.4",
"@rollup/pluginutils": "^3.1.0"
@ -32881,6 +32958,11 @@
"integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
"dev": true
},
"@types/parse5": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-6.0.3.tgz",
"integrity": "sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g=="
},
"@types/prettier": {
"version": "2.4.4",
"resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.4.4.tgz",
@ -37580,14 +37662,6 @@
"reusify": "^1.0.4"
}
},
"fault": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/fault/-/fault-2.0.1.tgz",
"integrity": "sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==",
"requires": {
"format": "^0.2.0"
}
},
"fb-watchman": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.1.tgz",
@ -37761,11 +37835,6 @@
"mime-types": "^2.1.12"
}
},
"format": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
"integrity": "sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs="
},
"formidable": {
"version": "1.2.6",
"resolved": "https://registry.npmjs.org/formidable/-/formidable-1.2.6.tgz",
@ -38390,6 +38459,35 @@
"integrity": "sha512-UqBRqi4ju7T+TqGNdqAO0PaSVGsDGJUBQvk9eUWNGRY1CFGDzYhLWoM7JQEemnlvVcv/YEmc2wNW8BC24EnUsw==",
"dev": true
},
"hast-to-hyperscript": {
"version": "10.0.1",
"resolved": "https://registry.npmjs.org/hast-to-hyperscript/-/hast-to-hyperscript-10.0.1.tgz",
"integrity": "sha512-dhIVGoKCQVewFi+vz3Vt567E4ejMppS1haBRL6TEmeLeJVB1i/FJIIg/e6s1Bwn0g5qtYojHEKvyGA+OZuyifw==",
"requires": {
"@types/unist": "^2.0.0",
"comma-separated-tokens": "^2.0.0",
"property-information": "^6.0.0",
"space-separated-tokens": "^2.0.0",
"style-to-object": "^0.3.0",
"unist-util-is": "^5.0.0",
"web-namespaces": "^2.0.0"
}
},
"hast-util-from-parse5": {
"version": "7.1.0",
"resolved": "https://registry.npmjs.org/hast-util-from-parse5/-/hast-util-from-parse5-7.1.0.tgz",
"integrity": "sha512-m8yhANIAccpU4K6+121KpPP55sSl9/samzQSQGpb0mTExcNh2WlvjtMwSWFhg6uqD4Rr6Nfa8N6TMypQM51rzQ==",
"requires": {
"@types/hast": "^2.0.0",
"@types/parse5": "^6.0.0",
"@types/unist": "^2.0.0",
"hastscript": "^7.0.0",
"property-information": "^6.0.0",
"vfile": "^5.0.0",
"vfile-location": "^4.0.0",
"web-namespaces": "^2.0.0"
}
},
"hast-util-has-property": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/hast-util-has-property/-/hast-util-has-property-2.0.0.tgz",
@ -38403,13 +38501,30 @@
"@types/hast": "^2.0.0"
}
},
"hast-util-is-element": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-2.1.2.tgz",
"integrity": "sha512-thjnlGAnwP8ef/GSO1Q8BfVk2gundnc2peGQqEg2kUt/IqesiGg/5mSwN2fE7nLzy61pg88NG6xV+UrGOrx9EA==",
"hast-util-parse-selector": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-3.1.0.tgz",
"integrity": "sha512-AyjlI2pTAZEOeu7GeBPZhROx0RHBnydkQIXlhnFzDi0qfXTmGUWoCYZtomHbrdrheV4VFUlPcfJ6LMF5T6sQzg==",
"requires": {
"@types/hast": "^2.0.0"
}
},
"hast-util-raw": {
"version": "7.2.1",
"resolved": "https://registry.npmjs.org/hast-util-raw/-/hast-util-raw-7.2.1.tgz",
"integrity": "sha512-wgtppqXVdXzkDXDFclLLdAyVUJSKMYYi6LWIAbA8oFqEdwksYIcPGM3RkKV1Dfn5GElvxhaOCs0jmCOMayxd3A==",
"requires": {
"@types/hast": "^2.0.0",
"@types/unist": "^2.0.0"
"@types/parse5": "^6.0.0",
"hast-util-from-parse5": "^7.0.0",
"hast-util-to-parse5": "^7.0.0",
"html-void-elements": "^2.0.0",
"parse5": "^6.0.0",
"unist-util-position": "^4.0.0",
"unist-util-visit": "^4.0.0",
"vfile": "^5.0.0",
"web-namespaces": "^2.0.0",
"zwitch": "^2.0.0"
}
},
"hast-util-to-estree": {
@ -38433,6 +38548,19 @@
"zwitch": "^2.0.0"
}
},
"hast-util-to-parse5": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/hast-util-to-parse5/-/hast-util-to-parse5-7.0.0.tgz",
"integrity": "sha512-YHiS6aTaZ3N0Q3nxaY/Tj98D6kM8QX5Q8xqgg8G45zR7PvWnPGPP0vcKCgb/moIydEJ/QWczVrX0JODCVeoV7A==",
"requires": {
"@types/hast": "^2.0.0",
"@types/parse5": "^6.0.0",
"hast-to-hyperscript": "^10.0.0",
"property-information": "^6.0.0",
"web-namespaces": "^2.0.0",
"zwitch": "^2.0.0"
}
},
"hast-util-to-string": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-2.0.0.tgz",
@ -38441,25 +38569,22 @@
"@types/hast": "^2.0.0"
}
},
"hast-util-to-text": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-3.1.1.tgz",
"integrity": "sha512-7S3mOBxACy8syL45hCn3J7rHqYaXkxRfsX6LXEU5Shz4nt4GxdjtMUtG+T6G/ZLUHd7kslFAf14kAN71bz30xA==",
"requires": {
"@types/hast": "^2.0.0",
"hast-util-is-element": "^2.0.0",
"unist-util-find-after": "^4.0.0"
}
},
"hast-util-whitespace": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-2.0.0.tgz",
"integrity": "sha512-Pkw+xBHuV6xFeJprJe2BBEoDV+AvQySaz3pPDRUs5PNZEMQjpXJJueqrpcHIXxnWTcAGi/UOCgVShlkY6kLoqg=="
},
"highlight.js": {
"version": "11.4.0",
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.4.0.tgz",
"integrity": "sha512-nawlpCBCSASs7EdvZOYOYVkJpGmAOKMYZgZtUqSRqodZE0GRVcFKwo1RcpeOemqh9hyttTdd5wDBwHkuSyUfnA=="
"hastscript": {
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/hastscript/-/hastscript-7.0.2.tgz",
"integrity": "sha512-uA8ooUY4ipaBvKcMuPehTAB/YfFLSSzCwFSwT6ltJbocFUKH/GDHLN+tflq7lSRf9H86uOuxOFkh1KgIy3Gg2g==",
"requires": {
"@types/hast": "^2.0.0",
"comma-separated-tokens": "^2.0.0",
"hast-util-parse-selector": "^3.0.0",
"property-information": "^6.0.0",
"space-separated-tokens": "^2.0.0"
}
},
"hook-std": {
"version": "2.0.0",
@ -38563,6 +38688,11 @@
"valid-url": "1.0.9"
}
},
"html-void-elements": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-2.0.1.tgz",
"integrity": "sha512-0quDb7s97CfemeJAnW9wC0hw78MtW7NU3hqtCD75g2vFlDLt36llsYD7uB7SUzojLMP24N5IatXf7ylGXiGG9A=="
},
"html-w3c-validator": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/html-w3c-validator/-/html-w3c-validator-1.0.0.tgz",
@ -40722,8 +40852,7 @@
"jsonc-parser": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.0.0.tgz",
"integrity": "sha512-fQzRfAbIBnR0IQvftw9FJveWiHp72Fg20giDrHz6TdfB12UH/uue0D3hm57UB5KgAVuniLMCaS8P1IMj9NR7cA==",
"dev": true
"integrity": "sha512-fQzRfAbIBnR0IQvftw9FJveWiHp72Fg20giDrHz6TdfB12UH/uue0D3hm57UB5KgAVuniLMCaS8P1IMj9NR7cA=="
},
"jsonfile": {
"version": "6.1.0",
@ -41639,16 +41768,6 @@
"integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==",
"dev": true
},
"lowlight": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/lowlight/-/lowlight-2.5.0.tgz",
"integrity": "sha512-OXGUch9JZu4q5r4Ir6QlUp5pBXMxS7NHaclhRiUlxNRcOSK0gtXZcVrsGP4eM7bv0/KDHg/TXQagx/X35EULsA==",
"requires": {
"@types/hast": "^2.0.0",
"fault": "^2.0.0",
"highlight.js": "~11.4.0"
}
},
"lru-cache": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@ -45415,8 +45534,7 @@
"parse5": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
"integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==",
"dev": true
"integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw=="
},
"parseqs": {
"version": "0.0.6",
@ -46719,16 +46837,14 @@
}
}
},
"rehype-highlight": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/rehype-highlight/-/rehype-highlight-5.0.2.tgz",
"integrity": "sha512-ZNm8V8BQUDn05cJPzAu/PjiloaFFrh+Pt3bY+NCcdCggI7Uyl5mW0FGR7RATeIz5/ECUd1D8Kvjt4HaLPmnOMw==",
"rehype-raw": {
"version": "6.1.1",
"resolved": "https://registry.npmjs.org/rehype-raw/-/rehype-raw-6.1.1.tgz",
"integrity": "sha512-d6AKtisSRtDRX4aSPsJGTfnzrX2ZkHQLE5kiUuGOeEoLpbEulFF4hj0mLPbsa+7vmguDKOVVEQdHKDSwoaIDsQ==",
"requires": {
"@types/hast": "^2.0.0",
"hast-util-to-text": "^3.0.0",
"lowlight": "^2.0.0",
"unified": "^10.0.0",
"unist-util-visit": "^4.0.0"
"hast-util-raw": "^7.2.0",
"unified": "^10.0.0"
}
},
"rehype-slug": {
@ -47485,6 +47601,16 @@
"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
"dev": true
},
"shiki": {
"version": "0.10.1",
"resolved": "https://registry.npmjs.org/shiki/-/shiki-0.10.1.tgz",
"integrity": "sha512-VsY7QJVzU51j5o1+DguUd+6vmCmZ5v/6gYu4vyYAhzjuNQU6P/vmSy4uQaOhvje031qQMiW0d2BwgMH52vqMng==",
"requires": {
"jsonc-parser": "^3.0.0",
"vscode-oniguruma": "^1.6.1",
"vscode-textmate": "5.2.0"
}
},
"side-channel": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
@ -49388,9 +49514,9 @@
}
},
"typescript": {
"version": "4.5.5",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.5.tgz",
"integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==",
"version": "4.4.4",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.4.4.tgz",
"integrity": "sha512-DqGhF5IKoBl8WNf8C1gu8q0xZSInh9j1kJJMqT3a94w1JzVaBU4EXOSMrz9yDqMT0xt3selp83fuFMQ0uzv6qA==",
"dev": true
},
"ua-parser-js": {
@ -49517,15 +49643,6 @@
"@types/unist": "^2.0.0"
}
},
"unist-util-find-after": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/unist-util-find-after/-/unist-util-find-after-4.0.0.tgz",
"integrity": "sha512-gfpsxKQde7atVF30n5Gff2fQhAc4/HTOV4CvkXpTg9wRfQhZWdXitpyXHWB6YcYgnsxLx+4gGHeVjCTAAp9sjw==",
"requires": {
"@types/unist": "^2.0.0",
"unist-util-is": "^5.0.0"
}
},
"unist-util-generated": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/unist-util-generated/-/unist-util-generated-2.0.0.tgz",
@ -50205,6 +50322,15 @@
}
}
},
"vfile-location": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-4.0.1.tgz",
"integrity": "sha512-JDxPlTbZrZCQXogGheBHjbRWjESSPEak770XwWPfw5mTc1v1nWGLB/apzZxsx8a0SJVfF8HK8ql8RD308vXRUw==",
"requires": {
"@types/unist": "^2.0.0",
"vfile": "^5.0.0"
}
},
"vfile-matter": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/vfile-matter/-/vfile-matter-3.0.1.tgz",
@ -50244,6 +50370,16 @@
"unist-util-stringify-position": "^3.0.0"
}
},
"vscode-oniguruma": {
"version": "1.6.1",
"resolved": "https://registry.npmjs.org/vscode-oniguruma/-/vscode-oniguruma-1.6.1.tgz",
"integrity": "sha512-vc4WhSIaVpgJ0jJIejjYxPvURJavX6QG41vu0mGhqywMkQqulezEqEQ3cO3gc8GvcOpX6ycmKGqRoROEMBNXTQ=="
},
"vscode-textmate": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/vscode-textmate/-/vscode-textmate-5.2.0.tgz",
"integrity": "sha512-Uw5ooOQxRASHgu6C7GVvUxisKXfSgW4oFlO+aa+PAkgmH89O3CXxEEzNRNtHSqtXFTl0nAC1uYj0GMSH27uwtQ=="
},
"w3c-hr-time": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
@ -50335,6 +50471,11 @@
"integrity": "sha512-DEAoo25RfSYMuTGc9vPJzZcZullwIqRDSI9LOy+fkCJPi6hykCnfKaXTuPBDuXAUcqHXyOgFtHNp/kB2FjYHbw==",
"dev": true
},
"web-namespaces": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz",
"integrity": "sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ=="
},
"webidl-conversions": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz",

View File

@ -42,7 +42,6 @@
"classnames": "2.3.1",
"date-and-time": "2.1.2",
"gray-matter": "4.0.3",
"highlight.js": "11.4.0",
"html-react-parser": "1.4.8",
"next": "12.1.0",
"next-mdx-remote": "4.0.0",
@ -52,10 +51,13 @@
"react": "17.0.2",
"react-dom": "17.0.2",
"read-pkg": "7.1.0",
"rehype-highlight": "5.0.2",
"rehype-raw": "6.1.1",
"rehype-slug": "5.0.1",
"remark-gfm": "3.0.1",
"sharp": "0.30.1",
"shiki": "0.10.1",
"unified": "10.1.1",
"unist-util-visit": "4.1.0",
"universal-cookie": "4.0.4"
},
"devDependencies": {
@ -71,6 +73,7 @@
"@types/jest": "27.4.0",
"@types/node": "17.0.19",
"@types/react": "17.0.39",
"@types/unist": "2.0.6",
"@typescript-eslint/eslint-plugin": "5.12.1",
"autoprefixer": "10.4.2",
"cypress": "9.5.0",
@ -97,7 +100,7 @@
"semantic-release": "19.0.2",
"start-server-and-test": "1.14.0",
"tailwindcss": "3.0.23",
"typescript": "4.5.5",
"typescript": "4.4.4",
"vercel": "24.0.0"
}
}

View File

@ -1,7 +1,6 @@
import { GetStaticProps, GetStaticPaths, NextPage } from 'next'
import { MDXRemote } from 'next-mdx-remote'
import date from 'date-and-time'
import 'highlight.js/styles/github-dark.css'
import { Head } from 'components/Head'
import { Header } from 'components/Header'

View File

@ -26,7 +26,7 @@ const BlogPage: NextPage<BlogPageProps> = (props) => {
<main className='flex flex-1 flex-col flex-wrap items-center'>
<div className='mt-10 flex flex-col items-center'>
<h1 className='text-4xl font-semibold'>Blog</h1>
<p className='mt-6' data-cy='blog-post-date'>
<p className='mt-6 text-center' data-cy='blog-post-date'>
{blogDescription}
</p>
</div>
@ -39,7 +39,7 @@ const BlogPage: NextPage<BlogPageProps> = (props) => {
)
return (
<Link href={`/blog/${post.slug}`} key={index} locale='en'>
<a data-cy='blog-post'>
<a data-cy={post.slug}>
<ShadowContainer className='cursor-pointer p-6 transition duration-200 ease-in-out hover:-translate-y-2'>
<h2
data-cy='blog-post-title'

View File

@ -1,7 +1,7 @@
---
title: '🧼 Clean Code'
description: 'What is "Clean Code", what are "Design Patterns", and why is it so important today ? Tips and tricks to make your code more readable and maintainable in the long term.'
isPublished: false
isPublished: true
publishedOn: '2021-11-06T22:06:33.818Z'
---

View File

@ -23,17 +23,28 @@
@apply mt-1 text-gray dark:text-gray-dark;
}
.prose code:not(.hljs) {
color: hsl(286, 60%, 67%);
.prose code {
color: #ce9178;
}
.prose pre {
background-color: transparent !important;
.prose :where(code):not(:where([class~='not-prose'] *))::before,
.prose :where(code):not(:where([class~='not-prose'] *))::after {
content: '';
}
.prose pre code {
border-radius: 10px;
}
.hljs {
.shiki {
white-space: pre-wrap !important;
word-break: break-word !important;
word-wrap: normal;
}
code {
counter-reset: step;
counter-increment: step 0;
}
code .line::before {
content: counter(step);
counter-increment: step;
width: 1rem;
margin-right: 1.5rem;
display: inline-block;
text-align: right;
color: rgba(133, 133, 133, 0.8);
}

View File

@ -2,13 +2,17 @@ import fs from 'node:fs'
import path from 'node:path'
import type { MDXRemoteSerializeResult } from 'next-mdx-remote'
import { nodeTypes } from '@mdx-js/mdx'
import rehypeRaw from 'rehype-raw'
import { serialize } from 'next-mdx-remote/serialize'
import remarkGfm from 'remark-gfm'
import rehypeSlug from 'rehype-slug'
import rehypeHighlight from 'rehype-highlight'
import matter from 'gray-matter'
import { getHighlighter } from 'shiki'
export const postsPath = path.join(process.cwd(), 'posts')
import { remarkSyntaxHighlightingPlugin } from './remarkSyntaxHighlightingPlugin'
export const POSTS_PATH = path.join(process.cwd(), 'posts')
export type MDXSource = MDXRemoteSerializeResult<Record<string, unknown>>
@ -30,11 +34,11 @@ export interface Post extends PostMetadata {
}
export const getPosts = async (): Promise<PostMetadata[]> => {
const posts = await fs.promises.readdir(postsPath)
const posts = await fs.promises.readdir(POSTS_PATH)
const postsWithTime = await Promise.all(
posts.map(async (postFilename) => {
const [slug] = postFilename.split('.')
const blogPostPath = path.join(postsPath, `${slug}.mdx`)
const blogPostPath = path.join(POSTS_PATH, `${slug}.mdx`)
const blogPostContent = await fs.promises.readFile(blogPostPath, {
encoding: 'utf8'
})
@ -62,10 +66,19 @@ export const getPostBySlug = async (
if (post == null) {
return undefined
}
const highlighter = await getHighlighter({
theme: 'dark-plus'
})
const source = await serialize(post.content, {
mdxOptions: {
remarkPlugins: [remarkGfm as any],
rehypePlugins: [rehypeSlug as any, rehypeHighlight]
remarkPlugins: [
remarkGfm as any,
[remarkSyntaxHighlightingPlugin, { highlighter }]
],
rehypePlugins: [
rehypeSlug as any,
[rehypeRaw, { passThrough: nodeTypes }]
]
}
})
return { ...post, source }

View File

@ -0,0 +1,30 @@
import { Plugin, Transformer } from 'unified'
import { Literal } from 'unist'
import { visit } from 'unist-util-visit'
import { Highlighter } from 'shiki'
export interface RemarkSyntaxHighlightingPluginOptions {
highlighter: Highlighter
}
export type RemarkSyntaxHighlightingNode = Literal<string> & {
lang: string
meta: string
children: undefined
}
export const remarkSyntaxHighlightingPlugin: Plugin<
[RemarkSyntaxHighlightingPluginOptions],
Literal<string, RemarkSyntaxHighlightingNode>
> = (options) => {
const transformer: Transformer<RemarkSyntaxHighlightingNode> = (tree) => {
visit<RemarkSyntaxHighlightingNode, string>(tree, 'code', (node) => {
node.type = 'html'
node.children = undefined
node.value = options.highlighter.codeToHtml(node.value, {
lang: node.lang
})
})
}
return transformer
}