Merge pull request #4 from jordan-dalby/markdown-syntax

Add Markdown formatting to code blocks
jordan-dalby · Oct 27, 2024 · db73b99 · db73b99
2 parents 42f1b29 + b15ec07
commit db73b99
Show file tree

Hide file tree

Showing 10 changed files with 1,768 additions and 161 deletions.
diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml
@@ -0,0 +1,37 @@
+name: Build and Push Docker Image for Pull Request Testing
+
+on:
+  pull_request:
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: jordan-dalby/bytestash-dev
+
+jobs:
+  docker:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Set Docker tag with PR number
+        id: docker_tag
+        run: echo "TAG=${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:pr-${{ github.event.pull_request.number }}" >> $GITHUB_ENV
+
+      - name: Build and Push Docker image for Testing
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          push: true
+          tags: ${{ env.TAG }}
diff --git a/.github/workflows/docker-build.yml → .github/workflows/release.yml b/.github/workflows/docker-build.yml → .github/workflows/release.yml
@@ -1,4 +1,4 @@
-name: Build and Push Docker Image
+name: Build and Push Docker Image on Release
 
 on:
   release:
@@ -27,11 +27,11 @@ jobs:
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Build and push
+      - name: Build and Push Docker image
         uses: docker/build-push-action@v5
         with:
           context: .
           push: true
           tags: |
             ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest
-            ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ github.event.release.tag_name }}
+            ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ github.event.release.tag_name }}
diff --git a/client/package.json b/client/package.json
@@ -8,11 +8,12 @@
     "lucide-react": "^0.452.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-markdown": "^9.0.1",
     "react-syntax-highlighter": "^15.6.1"
   },
   "devDependencies": {
-    "@types/prismjs": "^1.26.4",
     "@types/node": "^20.11.28",
+    "@types/prismjs": "^1.26.4",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
     "@types/react-syntax-highlighter": "^15.5.13",
@@ -29,4 +30,4 @@
     "build": "tsc && vite build",
     "preview": "vite preview"
   }
-}
+}
diff --git a/client/src/components/snippets/CodeBlock.tsx b/client/src/components/snippets/CodeBlock.tsx
diff --git a/client/src/components/snippets/FullCodeBlock.tsx b/client/src/components/snippets/FullCodeBlock.tsx
@@ -0,0 +1,148 @@
+import React, { useState, useEffect } from 'react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { getLanguageLabel, normalizeLanguage } from '../../utils/languageUtils';
+import CopyButton from '../common/CopyButton';
+import ReactMarkdown, { Components } from 'react-markdown';
+import { FullCodeBlockProps } from '@/types/types';
+
+const FullCodeBlock: React.FC<FullCodeBlockProps> = ({ 
+  code, 
+  language = 'plaintext'
+}) => {
+  const [normalizedLang, setNormalizedLang] = useState<string>('plaintext');
+  const isMarkdown = getLanguageLabel(language) === 'markdown';
+
+  useEffect(() => {
+    const normalized = normalizeLanguage(language);
+    setNormalizedLang(normalized);
+  }, [language]);
+
+  const components: Components = {
+    code: ({ className, children }) => (
+      <code className={className}>
+        {children}
+      </code>
+    ),
+    pre: ({ children }) => {
+      const codeElement = React.Children.toArray(children).find(
+        (child) => React.isValidElement(child) && child.type === 'code'
+      );
+
+      if (!React.isValidElement(codeElement)) {
+        return <pre>{children}</pre>;
+      }
+
+      const className = codeElement.props.className || '';
+      const match = /language-(\w+)/.exec(className);
+      const lang = match ? match[1] : normalizedLang;
+      const code = String(codeElement.props.children).replace(/\n$/, '');
+
+      return (
+        <SyntaxHighlighter
+          language={lang}
+          style={vscDarkPlus}
+          className="syntax-highlighter-full"
+        >
+          {code}
+        </SyntaxHighlighter>
+      );
+    }
+  };
+
+  return (
+    <div className="relative">
+      <style>
+        {`
+          .syntax-highlighter-full {
+            overflow: auto !important;
+          }
+
+          .syntax-highlighter-full ::selection {
+            background-color: rgba(255, 255, 255, 0.3) !important;
+            color: inherit !important;
+          }
+
+          .markdown-content-full {
+            color: white;
+            background-color: #1E1E1E;
+            padding: 1rem;
+            border-radius: 0.5rem;
+            position: relative;
+          }
+
+          .markdown-content-full p,
+          .markdown-content-full li {
+            font-size: 0.875rem;
+            line-height: 1.5;
+            margin-bottom: 0.5rem;
+          }
+
+          .markdown-content-full h1 {
+            font-size: 1.5rem;
+            line-height: 2rem;
+            margin-bottom: 1rem;
+            font-weight: 600;
+          }
+
+          .markdown-content-full h2 {
+            font-size: 1.25rem;
+            line-height: 1.75rem;
+            margin-bottom: 0.75rem;
+            font-weight: 600;
+          }
+
+          .markdown-content-full h3 {
+            font-size: 1.125rem;
+            line-height: 1.5rem;
+            margin-bottom: 0.75rem;
+            font-weight: 600;
+          }
+
+          .markdown-content-full h4,
+          .markdown-content-full h5,
+          .markdown-content-full h6 {
+            font-size: 1rem;
+            line-height: 1.5rem;
+            margin-bottom: 0.5rem;
+            font-weight: 600;
+          }
+
+          .markdown-content-full ul,
+          .markdown-content-full ol {
+            margin-left: 1.5rem;
+            margin-bottom: 1rem;
+          }
+
+          .markdown-content-full code {
+            background-color: rgba(255, 255, 255, 0.1);
+            padding: 0.2rem 0.4rem;
+            border-radius: 0.25rem;
+            font-size: 0.875em;
+          }
+        `}
+      </style>
+      <div className="relative">
+        {isMarkdown ? (
+          <div className="markdown-content-full">
+            <ReactMarkdown components={components}>
+              {code}
+            </ReactMarkdown>
+          </div>
+        ) : (
+          <SyntaxHighlighter
+            language={normalizedLang}
+            style={vscDarkPlus}
+            wrapLines={true}
+            className="syntax-highlighter-full"
+          >
+            {code}
+          </SyntaxHighlighter>
+        )}
+        <CopyButton text={code} />
+      </div>
+    </div>
+  );
+};
+
+export default FullCodeBlock;