PR changes

unkeyed · Aug 14, 2024 · 8c14615 · 8c14615
1 parent 98ca689
commit 8c14615
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 28 deletions.
diff --git a/apps/www/app/templates/[slug]/page.tsx b/apps/www/app/templates/[slug]/page.tsx
@@ -156,7 +156,7 @@ export default async function Templates(props: Props) {
             ) : null}
           </div>
           <ReactMarkdown
-            className="flex flex-col gap-10 mt-16 xl:px-10 sm:mt-20 sm:mx-4"
+            className="flex flex-col gap-10 mt-16 xl:px-1 sm:mt-20 sm:mx-4"
             remarkPlugins={[remarkGfm]}
             //  @ts-ignore
             rehypePlugins={[rehypeRaw]}

diff --git a/apps/www/components/blog/blog-code-block.tsx b/apps/www/components/blog/blog-code-block.tsx
@@ -69,12 +69,6 @@ export function BlogCodeBlock({ className, children }: any) {
                 showLineNumbers={true}
                 wrapLongLines={true}
                 wrapLines={true}
-                lineProps={(lineNumber) => ({
-                  style: { display: "block", cursor: "pointer" },
-                  onClick() {
-                    alert(`Line Number Clicked: ${lineNumber}`);
-                  },
-                })}
               >
                 {block}
               </SyntaxHighlighter>
@@ -115,13 +109,7 @@ export function BlogCodeBlockSingle({ className, children }: any) {
         style={darkTheme}
         showLineNumbers={true}
         highlighter={"hljs"}
-        wrapLines={true}
-        lineProps={(lineNumber) => ({
-          style: { display: "block", cursor: "pointer" },
-          onClick() {
-            alert(`Line Number Clicked: ${lineNumber}`);
-          },
-        })}
+        s
       >
         {block.children}
       </SyntaxHighlighter>

diff --git a/apps/www/components/blog/darkTheme.ts b/apps/www/components/blog/darkTheme.ts
@@ -151,7 +151,7 @@ export default {
     display: "block",
     overflow: "auto",
     color: "#F8F8F2",
-    padding: "0.5em",
+    backgroundColor: "transparent",
   },
   "hljs-emphasis": {
     fontStyle: "italic",

diff --git a/apps/www/components/template/codeblock.tsx b/apps/www/components/template/codeblock.tsx
@@ -12,10 +12,10 @@ export function CodeBlock(props: any) {
   if (!language) {
     language = ["language-jsx"];
   }
+
   const block =
-    props.node.children[0].properties?.value || props.node.children[0].children[0].value;
+    props.node.children[0].properties?.value || props.node.children[0].children[0].value.trim();
   const [copyData, _setCopyData] = useState(block);
-
   function handleDownload() {
     const element = document.createElement("a");
     const file = new Blob([copyData], { type: "text/plain" });
@@ -27,11 +27,11 @@ export function CodeBlock(props: any) {
   return (
     <div
       className={cn(
-        "flex flex-col bg-gradient-to-t from-[rgba(255,255,255,0.1)] to-[rgba(255,255,255,0.07)] rounded-[20px] border-[.5px] border-[rgba(255,255,255,0.1)]",
+        "flex flex-col bg-gradient-to-t from-[rgba(255,255,255,0.1)] to-[rgba(255,255,255,0.07)] rounded-[20px] border-[.5px] border-[rgba(255,255,255,0.1)] my-4 w-full mx-0",
         props.className,
       )}
     >
-      <div className="flex flex-row justify-end gap-4 mt-2 mr-4 border-white/10">
+      <div className="flex flex-row justify-end gap-4 mt-2 border-white/10 pr-3">
         <CopyButton value={copyData} />
         <button
           type="button"
@@ -43,17 +43,14 @@ export function CodeBlock(props: any) {
         </button>
       </div>
       <SyntaxHighlighter
-        language={language}
+        language={language.toString().replace(/language-/, "")}
         style={darkTheme}
         showLineNumbers={true}
-        wrapLongLines={true}
-        wrapLines={true}
-        lineProps={(lineNumber) => ({
-          style: { display: "block", cursor: "pointer" },
-          onClick() {
-            alert(`Line Number Clicked: ${lineNumber}`);
-          },
-        })}
+        wrapLongLines={false}
+        customStyle={{ margin: 0, padding: "1rem" }}
+        codeTagProps={{
+          style: { backgroundColor: "transparent", margin: 0, paddingLeft: 0, fontSize: ".8rem" },
+        }}
       >
         {block}
       </SyntaxHighlighter>