wix-incubator · nitayneeman · Jan 21, 2025 · Jan 21, 2025 · Jan 22, 2025 · Jan 22, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,4 +5,4 @@
   "workspaces": [
     "packages/*"
   ]
-}
+}
diff --git a/packages/astro-blog-loader/src/loader.ts b/packages/astro-blog-loader/src/loader.ts
@@ -1,6 +1,7 @@
 import { posts } from "@wix/blog";
 import { createClient, media, OAuthStrategy } from "@wix/sdk";
 import type { Loader, LoaderContext } from "astro/loaders";
+import { renameKeysFromSDKRequestToRESTRequest } from "@wix/sdk-runtime/rename-all-nested-keys";
 
 const getWixClient = () => {
   const { PUBLIC_WIX_CLIENT_ID } = import.meta.env;
@@ -46,6 +47,9 @@ export function wixBlogLoader(): Loader {
             ...(item.media?.wixMedia?.image && {
               mediaUrl: media.getImageUrl(item.media?.wixMedia?.image).url,
             }),
+            richContent: renameKeysFromSDKRequestToRESTRequest(
+              item.richContent
+            ),
           },
         });
 

diff --git a/packages/astro-blog-template/astro.config.mjs b/packages/astro-blog-template/astro.config.mjs
@@ -1,10 +1,11 @@
 // @ts-check
-import { defineConfig } from "astro/config";
 import mdx from "@astrojs/mdx";
 import sitemap from "@astrojs/sitemap";
+import { defineConfig } from "astro/config";
+import react from "@astrojs/react";
 
 // https://astro.build/config
 export default defineConfig({
   site: "https://example.com",
-  integrations: [mdx(), sitemap()],
+  integrations: [mdx(), sitemap(), react()],
 });
diff --git a/packages/astro-blog-template/package.json b/packages/astro-blog-template/package.json
@@ -10,12 +10,16 @@
   },
   "dependencies": {
     "@astrojs/mdx": "^4.0.7",
+    "@astrojs/react": "^4.1.6",
     "@astrojs/rss": "^4.0.11",
     "@astrojs/sitemap": "^3.2.1",
-    "@wix/blog": "^1.0.340",
-    "@wix/sdk": "^1.15.9",
-    "@wix/astro-blog-loader": "^0.0.1",
-    "astro": "^5.1.8"
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@wix/ricos": "^10.116.0",
+    "astro": "^5.1.8",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "@wix/astro-blog-loader": "^0.0.1"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

diff --git a/packages/astro-blog-template/src/content.config.ts b/packages/astro-blog-template/src/content.config.ts
@@ -17,6 +17,7 @@ export function blogLoader(): Loader {
           pubDate: new Date(`${item.data.firstPublishedDate}`),
           updatedDate: new Date(`${item.data.lastPublishedDate}`),
           heroImage: item.data.mediaUrl,
+          richContent: item.data.richContent,
         };
 
         const digest = context.generateDigest(data);

diff --git a/packages/astro-blog-template/src/layouts/BlogPost.astro b/packages/astro-blog-template/src/layouts/BlogPost.astro
@@ -12,6 +12,11 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 
 <html lang="en">
 	<head>
+		<script is:inline>
+			if (global === undefined) {
+			var global = window;
+			}
+ 		</script>
 		<BaseHead title={title} description={description} />
 		<style>
 			main {
@@ -55,6 +60,7 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 	</head>
 
 	<body>
+
 		<Header />
 		<main>
 			<article>

diff --git a/packages/astro-blog-template/src/pages/blog/[...slug].astro b/packages/astro-blog-template/src/pages/blog/[...slug].astro
@@ -1,7 +1,10 @@
 ---
 import { type CollectionEntry, getCollection } from 'astro:content';
 import BlogPost from '../../layouts/BlogPost.astro';
-import { render } from 'astro:content';
+// import { render } from 'astro:content';
+import Ricos from '@wix/ricos';
+// import {media} from '@wix/sdk'
+import '@wix/ricos/css/all-plugins-viewer.css';
 
 export async function getStaticPaths() {
 	const posts = await getCollection('blog');
@@ -13,9 +16,14 @@ export async function getStaticPaths() {
 type Props = CollectionEntry<'blog'>;
 
 const post = Astro.props;
-const { Content } = await render(post);
+// const { Content } = await render(post);
 ---
 
 <BlogPost {...post.data}>
-	<Content />
+	<!-- <Content /> -->
+	<Ricos.RicosViewer client:load content={post.data.richContent} plugins={Ricos.quickStartViewerPlugins()} _rcProps={{
+		helpers: {
+			getImageUrl: (fileName) => `https://static.wixstatic.com/media/${fileName}`
+		}
+	}} />
 </BlogPost>
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,8 +1,15 @@
 {
   "extends": "astro/tsconfigs/strict",
-  "include": [".astro/types.d.ts", "**/*"],
-  "exclude": ["dist"],
+  "include": [
+    ".astro/types.d.ts",
+    "**/*"
+  ],
+  "exclude": [
+    "dist"
+  ],
   "compilerOptions": {
-    "strictNullChecks": true
+    "strictNullChecks": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
   }
-}
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,4 +5,4 @@ @@
       "workspaces": [
         "packages/*"
       ]
-    }
+    }