syntax highlighting working now

vineet-codes · Aug 9, 2021 · fc7918c · fc7918c · vercel · Aug 9, 2021
1 parent 0777c80
commit fc7918c
Show file tree

Hide file tree

Showing 10 changed files with 455 additions and 6 deletions.
diff --git a/data/blog/postgress_notes.mdx b/data/blog/postgress_notes.mdx
@@ -49,7 +49,7 @@ There are many different types of indexes in Postgress. Most of the time you nee
 
 There are some indexes created by Postgress automatically. Postgress automatically creates an index for the `primary key` of every table. It also creates an index for any `UNIQUE` constraint. These don't get listed in pgAdmin. So, how do we find them ? `pg_class` table to the rescue.
 
-```sql
+```sql showLineNumbers
 SELECT relname, relkind
 FROM pg_class
 WHERE relkind='i';

diff --git a/lib/mdx-bundle.js b/lib/mdx-bundle.js
@@ -100,7 +100,6 @@ export const getCompiledMDX = async (source) => {
   ];
 
   const rehypePlugins = [rehypeMetaAttribute, rehypeHighlightCode];
-  //console.log(POSTS_PATH);
 
   const { code, frontmatter } = await bundleMDX(source, {
     cwd: ComponentsInMdxPATH,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,8 @@
     "clean": "rm -rf ./node_modules"
   },
   "dependencies": {
+    "@radix-ui/react-collapsible": "0.0.17",
+    "@stitches/react": "^0.2.4",
     "esbuild": "^0.12.19",
     "framer-motion": "^3.3.0",
     "gray-matter": "^4.0.3",

diff --git a/pages/_document.js b/pages/_document.js
@@ -1,6 +1,8 @@
 import Document, { Html, Head, Main, NextScript } from 'next/document';
 import { ServerStyleSheet } from 'styled-components';
 
+import { getCssString } from 'stitches.config';
+
 export default class MyDocument extends Document {
   static async getInitialProps(ctx) {
     const sheet = new ServerStyleSheet();
@@ -32,6 +34,10 @@ export default class MyDocument extends Document {
     return (
       <Html>
         <Head>
+          <style
+            id='stitches'
+            dangerouslySetInnerHTML={{ __html: getCssString() }}
+          />
           <link
             href='https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,800;1,900&display=swap'
             rel='stylesheet'

diff --git a/pages/blog.js b/pages/blog.js
@@ -119,10 +119,10 @@ export async function getStaticProps() {
     return post;
   });
 
-  console.log(allPosts);
+  // console.log(allPosts);
 
   // show only non-draft posts in the catalog
-  const posts = allPosts; // .filter((post) => post.frontmatter.draft === false);
+  const posts = allPosts.filter((post) => post.frontmatter.draft === false);
 
   return { props: { posts } };
 }
diff --git a/pages/blog/[slug].js b/pages/blog/[slug].js
@@ -7,7 +7,7 @@ import { Page } from '@/styles/globalStyles';
 
 import styled from 'styled-components';
 
-import { components } from '@/components/custom-mdx-components';
+import { components } from '@/styles/mdxCompSub';
 
 const BlogTitle = styled.h1`
   padding-bottom: 0;
@@ -103,7 +103,7 @@ export default function Blog({ code, frontMatter }) {
           {frontMatter.publishedAt}
         </BlogStats>
         <Content>
-          <Component compoents={components} />
+          <Component components={components} />
         </Content>
       </Main>
     </Page>

diff --git a/stitches.config.js b/stitches.config.js
@@ -0,0 +1,35 @@
+import { createCss } from '@stitches/react';
+
+const stitchesConfig = createCss({
+  theme: {
+    fonts: {
+      mono: 'Fira Mono, monospace',
+    },
+    fontSizes: {
+      1: '12px',
+      2: '14px',
+    },
+    colors: {
+      black: 'rgba(19, 19, 21, 1)',
+      white: 'rgba(255, 255, 255, 1)',
+      gray: 'rgba(128, 128, 128, 1)',
+      blue: 'rgba(3, 136, 252, 1)',
+      red: 'rgba(249, 16, 74, 1)',
+      yellow: 'rgba(255, 221, 0, 1)',
+      pink: 'rgba(232, 141, 163, 1)',
+      turq: 'rgba(0, 245, 196, 1)',
+      orange: 'rgba(255, 135, 31, 1)',
+    },
+    space: {
+      1: '4px',
+      2: '8px',
+      3: '16px',
+    },
+    radii: {
+      1: '2px',
+      2: '4px',
+    },
+  },
+});
+
+export const { styled, getCssString } = stitchesConfig;