adding spline

mobxjs · Dec 29, 2023 · 90e8d66 · 90e8d66
1 parent 6290d7e
commit 90e8d66
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 16 deletions.
diff --git a/docs/design/mobx.afdesign b/docs/design/mobx.afdesign
diff --git a/docs/package.json b/docs/package.json
@@ -16,6 +16,8 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@mdx-js/react": "^3.0.0",
+    "@splinetool/react-spline": "^2.2.6",
+    "@splinetool/runtime": "^1.0.17",
     "axios": "^1.6.3",
     "dotenv": "^16.3.1",
     "lodash.get": "^4.4.2",

diff --git a/docs/pnpm-lock.yaml b/docs/pnpm-lock.yaml
diff --git a/docs/src/images/mobx.png b/docs/src/images/mobx.png
diff --git a/docs/src/images/mobx.svg b/docs/src/images/mobx.svg
diff --git a/docs/src/images/[email protected] b/docs/src/images/[email protected]
diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx
@@ -14,6 +14,7 @@ import { TestimonialList } from '../components/Testimonial';
 import MobXLogo from '../images/mobx.svg';
 import React from 'react';
 import Layout from '@theme/Layout';
+import Spline from '@splinetool/react-spline';
 
 export default function () {
   return (
@@ -70,11 +71,20 @@ function HeroSection() {
         </div>
       </div>
 
-      <MobXLogo className={'order-1 sm:order-2 w-48 sm:w-80 lg:w-96'} />
+      <MobXLogoViewer className={'order-1 sm:order-2 w-full'} />
     </Section>
   );
 }
 
+function MobXLogoViewer({ className }: { className?: string }) {
+  return (
+    <Spline
+      scene="https://prod.spline.design/CB9ncfOuCZuIaUKV/scene.splinecode"
+      className={className}
+    />
+  );
+}
+
 function BadgesSection() {
   return (
     <Section