From bc4b0c27cfc6a0270eb3a9818c006bbe9970ccbd Mon Sep 17 00:00:00 2001 From: Edcleidson de Souza Cardoso Junior Date: Fri, 19 Jan 2024 22:04:31 -0300 Subject: [PATCH 1/4] chore: adding prismjs to declared modules adding prismjs to declared modules since it will be imported to solve the problem of code blocks loading --- index.d.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/index.d.ts b/index.d.ts index 2fdbb045a..571867b63 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1 +1,2 @@ -declare module 'prismjs/components/prism-*.js'; \ No newline at end of file +declare module 'prismjs/components/prism-*.js'; +declare module 'prismjs/prism'; \ No newline at end of file From 050618ffa7077776d6a0625a69827eb27975819b Mon Sep 17 00:00:00 2001 From: Edcleidson de Souza Cardoso Junior Date: Fri, 19 Jan 2024 22:06:19 -0300 Subject: [PATCH 2/4] feature: adding language highlight imports to the root layout adding language highlight imports to the root layout and starting the highlight from useEffect, it wil make the prism enable the highlight in the code blocks --- src/layouts/RootLayout/index.tsx | 40 +++++++++++++++++++++++++++++++- 1 file changed, 39 insertions(+), 1 deletion(-) diff --git a/src/layouts/RootLayout/index.tsx b/src/layouts/RootLayout/index.tsx index da50df4aa..92b97fee9 100644 --- a/src/layouts/RootLayout/index.tsx +++ b/src/layouts/RootLayout/index.tsx @@ -1,10 +1,44 @@ -import React, { ReactNode } from "react" +import React, { ReactNode, useEffect } from "react" import { ThemeProvider } from "./ThemeProvider" import useScheme from "src/hooks/useScheme" import Header from "./Header" import styled from "@emotion/styled" import Scripts from "src/layouts/RootLayout/Scripts" import useGtagEffect from "./useGtagEffect" +import Prism from "prismjs/prism" +import 'prismjs/components/prism-markup-templating.js' +import 'prismjs/components/prism-markup.js' +import 'prismjs/components/prism-bash.js' +import 'prismjs/components/prism-c.js' +import 'prismjs/components/prism-cpp.js' +import 'prismjs/components/prism-csharp.js' +import 'prismjs/components/prism-docker.js' +import 'prismjs/components/prism-java.js' +import 'prismjs/components/prism-js-templates.js' +import 'prismjs/components/prism-coffeescript.js' +import 'prismjs/components/prism-diff.js' +import 'prismjs/components/prism-git.js' +import 'prismjs/components/prism-go.js' +import 'prismjs/components/prism-kotlin.js' +import 'prismjs/components/prism-graphql.js' +import 'prismjs/components/prism-handlebars.js' +import 'prismjs/components/prism-less.js' +import 'prismjs/components/prism-makefile.js' +import 'prismjs/components/prism-markdown.js' +import 'prismjs/components/prism-objectivec.js' +import 'prismjs/components/prism-ocaml.js' +import 'prismjs/components/prism-python.js' +import 'prismjs/components/prism-reason.js' +import 'prismjs/components/prism-rust.js' +import 'prismjs/components/prism-sass.js' +import 'prismjs/components/prism-scss.js' +import 'prismjs/components/prism-solidity.js' +import 'prismjs/components/prism-sql.js' +import 'prismjs/components/prism-stylus.js' +import 'prismjs/components/prism-swift.js' +import 'prismjs/components/prism-wasm.js' +import 'prismjs/components/prism-yaml.js' +import "prismjs/components/prism-go.js" type Props = { children: ReactNode @@ -13,6 +47,10 @@ type Props = { const RootLayout = ({ children }: Props) => { const [scheme] = useScheme() useGtagEffect() + useEffect(() => { + Prism.highlightAll(); + }, []); + return ( From f0b5ce2c7c3a4bbdba040d99b19d1b42e8ccf861 Mon Sep 17 00:00:00 2001 From: Edcleidson de Souza Cardoso Junior Date: Fri, 19 Jan 2024 22:07:40 -0300 Subject: [PATCH 3/4] fix: removing prismjs imports of promise in code I removed this because seems to me it is taking too much time to load all the components in the promise and not loading the highlight over the code block --- .../components/NotionRenderer/index.tsx | 37 +------------------ 1 file changed, 1 insertion(+), 36 deletions(-) diff --git a/src/routes/Detail/components/NotionRenderer/index.tsx b/src/routes/Detail/components/NotionRenderer/index.tsx index ce47d3a35..8d70fd2b1 100644 --- a/src/routes/Detail/components/NotionRenderer/index.tsx +++ b/src/routes/Detail/components/NotionRenderer/index.tsx @@ -22,42 +22,7 @@ const _NotionRenderer = dynamic( ) const Code = dynamic(() => - import("react-notion-x/build/third-party/code").then(async (m) => { - await Promise.all([ - import("prismjs/components/prism-markup-templating.js"), - import("prismjs/components/prism-markup.js"), - import("prismjs/components/prism-bash.js"), - import("prismjs/components/prism-c.js"), - import("prismjs/components/prism-cpp.js"), - import("prismjs/components/prism-csharp.js"), - import("prismjs/components/prism-docker.js"), - import("prismjs/components/prism-java.js"), - import("prismjs/components/prism-js-templates.js"), - import("prismjs/components/prism-coffeescript.js"), - import("prismjs/components/prism-diff.js"), - import("prismjs/components/prism-git.js"), - import("prismjs/components/prism-go.js"), - import("prismjs/components/prism-graphql.js"), - import("prismjs/components/prism-handlebars.js"), - import("prismjs/components/prism-less.js"), - import("prismjs/components/prism-makefile.js"), - import("prismjs/components/prism-markdown.js"), - import("prismjs/components/prism-objectivec.js"), - import("prismjs/components/prism-ocaml.js"), - import("prismjs/components/prism-python.js"), - import("prismjs/components/prism-reason.js"), - import("prismjs/components/prism-rust.js"), - import("prismjs/components/prism-sass.js"), - import("prismjs/components/prism-scss.js"), - import("prismjs/components/prism-solidity.js"), - import("prismjs/components/prism-sql.js"), - import("prismjs/components/prism-stylus.js"), - import("prismjs/components/prism-swift.js"), - import("prismjs/components/prism-wasm.js"), - import("prismjs/components/prism-yaml.js"), - ]) - return m.Code - }) + import("react-notion-x/build/third-party/code").then(async (m) => m.Code ) ) const Collection = dynamic(() => From 769a718e0b05ff7076fed2cdd72641ffa4000c4b Mon Sep 17 00:00:00 2001 From: Edcleidson de Souza Cardoso Junior Date: Fri, 19 Jan 2024 22:07:50 -0300 Subject: [PATCH 4/4] chore: adding prismjs as a lib --- package.json | 2 ++ yarn.lock | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index b20046020..acbd68cc1 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "notion-client": "^6.16.0", "notion-types": "^6.16.0", "notion-utils": "^6.16.0", + "prismjs": "^1.29.0", "react": "^18.2.0", "react-cusdis": "^2.1.3", "react-dom": "^18.2.0", @@ -42,6 +43,7 @@ "next-sitemap": "^3.1.32", "postcss": "^8.3.11", "prettier": "^2.7.1", + "prismjs": "^1.29.0", "typescript": "^4.9.4" } } diff --git a/yarn.lock b/yarn.lock index 07d110798..0c8fda72e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3135,7 +3135,7 @@ prettier@^2.7.1: resolved "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz" integrity sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g== -prismjs@^1.27.0: +prismjs@^1.27.0, prismjs@^1.29.0: version "1.29.0" resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12" integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==