Merge pull request #1510 from BishopFox/docs/next

Fix image rendering
BishopFox · Dec 15, 2023 · d8fe33d · d8fe33d
2 parents d3ad2dc + 3a846e4
commit d8fe33d
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/docs/sliver-docs/pages/_document.tsx b/docs/sliver-docs/pages/_document.tsx
@@ -2,7 +2,7 @@ import Document, { Head, Html, Main, NextScript } from "next/document";
 import React from "react";
 
 // This generates the https: and wss: "connect-src" directives based on the above backends list so its a little easier to edit.
-const CSP = `default-src 'none'; script-src 'self' 'unsafe-eval'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; font-src 'self'; connect-src 'self'`;
+const CSP = `default-src 'none'; script-src 'self' 'unsafe-eval'; img-src 'self' data: https://user-images.githubusercontent.com; style-src 'self' 'unsafe-inline'; font-src 'self'; connect-src 'self'`;
 
 class MyDocument extends Document {
   static async getInitialProps(ctx: any) {

diff --git a/docs/sliver-docs/pages/docs/index.tsx b/docs/sliver-docs/pages/docs/index.tsx
@@ -11,6 +11,7 @@ import {
 import { useQuery } from "@tanstack/react-query";
 import { NextPage } from "next";
 import { useTheme } from "next-themes";
+import Image from "next/image";
 import React from "react";
 import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
@@ -111,6 +112,21 @@ const DocsIndexPage: NextPage = () => {
                     </pre>
                   );
                 },
+                img(props) {
+                  const { src, alt, ...rest } = props;
+                  console.log(props);
+                  return (
+                    // @ts-ignore
+                    <Image
+                      {...rest}
+                      src={src || ""}
+                      alt={alt || ""}
+                      width={500}
+                      height={500}
+                      className="w-full rounded-medium"
+                    />
+                  );
+                },
                 code(props) {
                   const { children, className, node, ...rest } = props;
                   const langTag = /language-(\w+)/.exec(className || "");