[Snyk] Upgrade sass from 1.57.0 to 1.69.5

.gitignore

@@ -2,6 +2,7 @@
 
 # dependencies
 /node_modules
+/analyze
 
 # testing
 /coverage

src/views/BlogPost.js → components/BlogPost.js

@@ -1,65 +1,51 @@
-import MDX from "@mdx-js/runtime"
-import config from "../../blog.config"
-import { DiscussionEmbed } from "disqus-react"
-import { Box, Text, Heading } from "theme-ui"
-import Link from "next/link"
+import config from "../blog.config"
 import Image from "next/image"
-import Container from "../ui/Container"
-import CodeBlock from "../ui/CodeBlock"
-import DraftBadge from "../ui/DraftBadge"
 import styl from "styl/Post.module.scss"
 
 const BlogPost = ({ post }) => {
   const isLocal = process.env.NODE_ENV === "development"
 
   const components = {
-    Box: (props) => <Box {...props} />,
+    div: (props) => <div {...props} />,
     pre: (props) => <div {...props} />,
     code: CodeBlock,
     script: (props) => <script {...props}>{props.children}</script>,
     Image,
   }
 
   return (
-    <Container className={styl.container}>
+    <div className={styl.container}>
       {!isLocal && post.draft ? (
-        <Text sx={{ fontSize: 2, color: "#666" }}>
+        <p sx={{ fontSize: 2, color: "#666" }}>
           This post has not yet been published. Please try again later.
-        </Text>
+        </p>
       ) : (
         <>
-          <Box sx={{ pb: [3, 4] }} className={styl.postTitle}>
-            <Heading
-              as="h1"
-              sx={{ fontSize: [5, 7], position: "relative" }}
+          <div sx={{ pb: [3, 4] }} className={styl.postTitle}>
+            <h1
               className={styl.heading}
             >
-              {post.draft && (
-                <Box sx={{ top: "10px", right: 1, position: "relative" }}>
-                  <DraftBadge />
-                </Box>
-              )}
               {post.title}
-            </Heading>
+            </h1>
             {config.showDate && (
               <>
-                <Text
+                <p
                   sx={{ fontStyle: "italic", fontSize: [2], color: "#777" }}
                 >
                   {new Date(post.date).toDateString()}
-                </Text>
+                </p>
                 <p>
-                  <Text
+                  <p
                     sx={{ fontStyle: "italic", fontSize: [1], color: "#777" }}
                   >
                     - D. K. Dhabale
-                  </Text>
+                  </p>
                 </p>
               </>
             )}
-          </Box>
+          </div>
           {post.coverImage && (
-            <Box
+            <div
               sx={{
                 mb: 3,
                 // border: "1px solid",
@@ -88,13 +74,13 @@ const BlogPost = ({ post }) => {
                 alt={post.coverImageAlt || ""}
               />
               {/* </div> */}
-            </Box>
+            </div>
           )}
           <MDX components={components}>{post.content}</MDX>
           <div id="graphcomment"></div>
         </>
       )}
-    </Container>
+    </div>
   )
 }
 

components/Header.js

@@ -4,7 +4,6 @@ import { MDXProvider } from "@mdx-js/react"
 import Logo from "comp/Logo"
 import styl from "./Header.module.scss"
 import { useState, useEffect, useContext } from "react"
-import ThemeToggler from 'comp/ThemeToggler'
 import { ThemeContext } from "comp/ThemeContext"
 
 const Header = (props) => {
@@ -60,7 +59,6 @@ const Header = (props) => {
                 youtube
               </Link>
             </li>
-            {/* <ThemeToggler /> */}
           </ul>
         )}
       </div>

src/views/Posts.js → components/Posts.js

@@ -1,7 +1,4 @@
-import MDX from "@mdx-js/runtime"
-import { Flex, Box, Heading, Text } from "theme-ui"
 import Image from "next/image"
-import DraftBadge from "../ui/DraftBadge"
 import Link from "next/link"
 import styl from "styl/Posts.module.scss"
 import { useState } from "react"
@@ -48,22 +45,22 @@ const Posts = ({ posts, prevPosts, nextPosts }) => {
             .map((post) => <Post post={post} />)}
       </div>
 
-      <Flex sx={{ fontStyle: "italic" }}>
-        <Box sx={{ width: "50%", py: 3, textAlign: "left" }}>
+      <div sx={{ fontStyle: "italic" }}>
+        <div sx={{ width: "50%", py: 3, textAlign: "left" }}>
           {prevPosts !== null && (
             <Link href={"/blog/" + prevPosts}>
               « see newer posts
             </Link>
           )}
-        </Box>
-        <Box sx={{ width: "50%", py: 3, pr: 3, textAlign: "right" }}>
+        </div>
+        <div sx={{ width: "50%", py: 3, pr: 3, textAlign: "right" }}>
           {nextPosts !== null && (
             <Link href={"/blog/" + nextPosts} passHref>
               see older posts »
             </Link>
           )}
-        </Box>
-      </Flex>
+        </div>
+      </div>
     </div>
   )
 }