Merge branch 'main' of github.com:githubnext/composable-github-viewer…

…-examples into main

package.json

@@ -55,8 +55,6 @@
       "description": "A block for 3d files",
       "entry": "/src/blocks/file-blocks/3d-files.tsx",
       "extensions": [
-        "obj",
-        "fbx",
         "gltf",
         "glb"
       ]
@@ -108,7 +106,7 @@
       "id": "simple-markdown-block",
       "title": "Markdown block",
       "description": "A simple markdown block",
-      "entry": "/src/blocks/file-blocks/markdown.tsx",
+      "entry": "/src/blocks/file-blocks/simple-markdown/markdown.tsx",
       "extensions": [
         "md"
       ]
@@ -118,7 +116,7 @@
       "id": "live-markdown-block",
       "title": "Live Markdown",
       "description": "View rich markdown files",
-      "entry": "/src/blocks/file-blocks/markdown/index.tsx",
+      "entry": "/src/blocks/file-blocks/live-markdown/index.tsx",
       "extensions": [
         "md"
       ]

src/blocks/file-blocks/3d-files.tsx

@@ -1,5 +1,5 @@
 import { Suspense, useRef } from "react";
-import { useGLTF } from "@react-three/drei";
+import { PerspectiveCamera, useGLTF } from "@react-three/drei";
 import { Canvas, useStore } from "@react-three/fiber";
 import { OrbitControls } from "@react-three/drei";
 import { FileBlockProps } from "@githubnext/utils";
@@ -21,13 +21,23 @@ function Model({ url }: { url: string }) {
 export default function (props: FileBlockProps) {
   const { context } = props;
 
+  const url = `https://raw.githubusercontent.com/${context.owner}/${context.repo}/${context.sha}/${context.path}`;
+
   return (
-    <Canvas style={{ height: "100vh" }} >
+    <Canvas style={{ height: "100vh" }}>
+      {/*
+        // @ts-ignore */}
+      <PerspectiveCamera
+        makeDefault
+        position={[0, 0, 0.3]}
+        near={0.01}
+        far={1000}
+      />
       <ambientLight />
       <LControl />
       <pointLight position={[10, 10, 10]} />
       <Suspense fallback={null}>
-        <Model url={context.download_url} />
+        <Model url={url} />
       </Suspense>
     </Canvas>
   );

src/blocks/file-blocks/markdown.tsx → src/blocks/file-blocks/simple-markdown/markdown.tsx

@@ -2,10 +2,12 @@ import { FileBlockProps } from '@githubnext/utils';
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 
+import './markdown.css';
+
 export default function (props: FileBlockProps) {
   const { content } = props;
 
   return (
-    <ReactMarkdown children={content} remarkPlugins={[remarkGfm]} />
+    <ReactMarkdown className="markdown-body" children={content} remarkPlugins={[remarkGfm]} />
   );
 }