feat: update code blocks colors

gr-qft · Nov 29, 2022 · d79b3bd · d79b3bd
1 parent 9b9590a
commit d79b3bd
Show file tree

Hide file tree

Showing 10 changed files with 46 additions and 27 deletions.
diff --git a/components/docs/mdx.tsx b/components/docs/mdx.tsx
@@ -144,7 +144,7 @@ const components = {
   pre: ({ className, ...props }) => (
     <pre
       className={cn(
-        "mt-6 mb-4 overflow-x-auto rounded-lg bg-slate-50 py-4",
+        "mt-6 mb-4 overflow-x-auto rounded-lg bg-slate-900 py-4",
         className
       )}
       {...props}

diff --git a/content/blog/deploying-next-apps.mdx b/content/blog/deploying-next-apps.mdx
@@ -68,7 +68,12 @@ Something a wise person once told me about typography is:
 
 It's probably important that images look okay here by default as well:
 
-![](/images/blog/blog-post-4.jpg)
+<Image
+  src="/images/blog/blog-post-4.jpg"
+  width="718"
+  height="404"
+  alt="Image"
+/>
 
 Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
 

diff --git a/content/blog/dynamic-routing-static-regeneration.mdx b/content/blog/dynamic-routing-static-regeneration.mdx
@@ -68,7 +68,12 @@ Something a wise person once told me about typography is:
 
 It's probably important that images look okay here by default as well:
 
-![](/images/blog/blog-post-4.jpg)
+<Image
+  src="/images/blog/blog-post-4.jpg"
+  width="718"
+  height="404"
+  alt="Image"
+/>
 
 Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
 

diff --git a/content/blog/preview-mode-headless-cms.mdx b/content/blog/preview-mode-headless-cms.mdx
@@ -68,7 +68,12 @@ Something a wise person once told me about typography is:
 
 It's probably important that images look okay here by default as well:
 
-![](/images/blog/blog-post-4.jpg)
+<Image
+  src="/images/blog/blog-post-4.jpg"
+  width="718"
+  height="404"
+  alt="Image"
+/>
 
 Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
 

diff --git a/content/blog/server-client-components.mdx b/content/blog/server-client-components.mdx
@@ -68,7 +68,12 @@ Something a wise person once told me about typography is:
 
 It's probably important that images look okay here by default as well:
 
-![](/images/blog/blog-post-4.jpg)
+<Image
+  src="/images/blog/blog-post-4.jpg"
+  width="718"
+  height="404"
+  alt="Image"
+/>
 
 Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
 

diff --git a/content/docs/documentation/style-guide.mdx b/content/docs/documentation/style-guide.mdx
@@ -65,7 +65,12 @@ Something a wise person once told me about typography is:
 
 It's probably important that images look okay here by default as well:
 
-![](/images/blog/blog-post-4.jpg)
+<Image
+  src="/images/blog/blog-post-4.jpg"
+  width="718"
+  height="404"
+  alt="Image"
+/>
 
 Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
 

diff --git a/content/guides/build-blog-using-contentlayer-mdx.mdx b/content/guides/build-blog-using-contentlayer-mdx.mdx
@@ -71,7 +71,12 @@ Something a wise person once told me about typography is:
 
 It's probably important that images look okay here by default as well:
 
-![](/images/blog/blog-post-4.jpg)
+<Image
+  src="/images/blog/blog-post-4.jpg"
+  width="718"
+  height="404"
+  alt="Image"
+/>
 
 Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
 

diff --git a/content/guides/using-next-auth-next-13.mdx b/content/guides/using-next-auth-next-13.mdx
@@ -71,7 +71,12 @@ Something a wise person once told me about typography is:
 
 It's probably important that images look okay here by default as well:
 
-![](/images/blog/blog-post-4.jpg)
+<Image
+  src="/images/blog/blog-post-4.jpg"
+  width="718"
+  height="404"
+  alt="Image"
+/>
 
 Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
 

diff --git a/contentlayer.config.js b/contentlayer.config.js
@@ -151,7 +151,7 @@ export default makeSource({
       [
         rehypePrettyCode,
         {
-          theme: "css-variables",
+          theme: "github-dark",
           onVisitLine(node) {
             // Prevent lines from collapsing in `display: grid` mode, and allow empty
             // lines to be copy/pasted

diff --git a/styles/mdx.css b/styles/mdx.css
@@ -1,19 +1,3 @@
-:root {
-  --shiki-color-text: #414141;
-  --shiki-color-background: transparent;
-  --shiki-token-constant: #114b84;
-  --shiki-token-string: #0e7226;
-  --shiki-token-comment: #aaa;
-  --shiki-token-keyword: #d32f2f;
-  --shiki-token-parameter: #ff9800;
-  --shiki-token-function: #6f42c1;
-  --shiki-token-string-expression: #0e7226;
-  --shiki-token-punctuation: #212121;
-  --shiki-token-link: #0e7226;
-  --nextra-shiki-deleted: #f00;
-  --nextra-shiki-inserted: #0e7226;
-}
-
 [data-rehype-pretty-code-fragment] code {
   @apply grid min-w-full break-words rounded-none border-0 bg-transparent p-0 text-sm text-black;
   counter-reset: line;
@@ -32,13 +16,13 @@
   color: gray;
 }
 [data-rehype-pretty-code-fragment] .line--highlighted {
-  @apply bg-slate-500 bg-opacity-10;
+  @apply bg-slate-300 bg-opacity-10;
 }
 [data-rehype-pretty-code-fragment] .line-highlighted span {
   @apply relative;
 }
 [data-rehype-pretty-code-fragment] .word--highlighted {
-  @apply rounded-md bg-slate-500 bg-opacity-10 p-1;
+  @apply rounded-md bg-slate-300 bg-opacity-10 p-1;
 }
 [data-rehype-pretty-code-title] {
   @apply mt-4 py-2 px-4 text-sm font-medium;