Migration

Author: eandreeva-twr

astro.config.mjs

@@ -12,19 +12,15 @@ import { remarkTransformRequire } from './src/plugins/remark-transform-require.m
 import { remarkTransformDetails } from './src/plugins/remark-transform-details.mjs';
 import { remarkHeadingId } from './src/plugins/remark-heading-id.mjs';
 import { remarkTransformLinks } from './src/plugins/remark-transform-links.mjs';
+import { remarkStripImports } from './src/plugins/remark-strip-imports.mjs';
 
 // https://astro.build/config
 export default defineConfig({
+  site: 'https://adapty.io',
+  base: '/docs',
   outDir: './build',
-  image: {
-    service: {
-      entrypoint: 'astro/assets/services/sharp',
-      config: {
-        limitInputPixels: false,
-      },
-    },
-  },
   build: {
+    assets: '_astro',
     inlineStylesheets: 'never',
   },
   vite: {
@@ -44,7 +40,7 @@ export default defineConfig({
   },
 
   markdown: {
-    remarkPlugins: [remarkHeadingId, remarkDirective, remarkAside, remarkTransformRequire, remarkTransformDetails, remarkTransformLinks],
+    remarkPlugins: [remarkHeadingId, remarkDirective, remarkAside, remarkStripImports, remarkTransformRequire, remarkTransformDetails, remarkTransformLinks],
     shikiConfig: {
       theme: 'github-light',
       wrap: true,
@@ -73,7 +69,7 @@ export default defineConfig({
   integrations: [
     react(),
     mdx({
-      remarkPlugins: [remarkHeadingId, remarkDirective, remarkAside, remarkTransformRequire, remarkTransformDetails, remarkTransformLinks],
+      remarkPlugins: [remarkHeadingId, remarkDirective, remarkAside, remarkStripImports, remarkTransformRequire, remarkTransformDetails, remarkTransformLinks],
       shikiConfig: {
         theme: 'github-light',
         wrap: true,

src/components/Header.astro

@@ -16,8 +16,8 @@ const links = [
 
     <div class="flex items-center gap-12">
         <!-- Logo -->
-        <a href="/" class="flex-shrink-0 block hover:opacity-80 transition-opacity">
-          <img src="/logo.svg" alt="Adapty" class="h-6 w-auto header-logo" />
+        <a href={import.meta.env.BASE_URL} class="flex-shrink-0 block hover:opacity-80 transition-opacity">
+          <img src={`${import.meta.env.BASE_URL}/logo.svg`} alt="Adapty" class="h-6 w-auto header-logo" />
         </a>
 
         <!-- Desktop Navigation -->

src/components/MDXImage.astro

@@ -1,6 +1,5 @@
 ---
-import { Image } from 'astro:assets';
-
+// MDXImage.astro - custom image resolution
 interface Props {
   src: string;
   alt?: string;
@@ -37,19 +36,19 @@ if (src.startsWith('http') || src.startsWith('/_astro/') || src.startsWith('/@fs
 
     if (id) {
         // Priority 1: Article-specific
-        const articleSpecificPrefix = `/src/assets/${articleName}/`;
+        const articleSpecificPart = `/assets/${articleName}/`;
         for (const [path, module] of Object.entries(allImages)) {
-            if (path.includes(articleSpecificPrefix) && path.split('/').pop() === id) {
+            if (path.includes(articleSpecificPart) && path.split('/').pop() === id) {
                 imageSrc = module.default;
                 break;
             }
         }
 
         // Priority 2: Shared
         if (!imageSrc) {
-            const sharedPrefix = `/src/assets/shared/`;
+            const sharedPart = `/assets/shared/`;
             for (const [path, module] of Object.entries(allImages)) {
-                if (path.includes(sharedPrefix) && path.split('/').pop() === id) {
+                if (path.includes(sharedPart) && path.split('/').pop() === id) {
                     imageSrc = module.default;
                     break;
                 }
@@ -60,9 +59,9 @@ if (src.startsWith('http') || src.startsWith('/_astro/') || src.startsWith('/@fs
         if (!imageSrc) {
             const legacyFolders = ['img', 'FF_img', 'img_webhook_flows'];
             for (const folder of legacyFolders) {
-                const legacyPathPart = `/src/content/docs/version-3.0/${folder}/`;
+                const legacyPart = `/version-3.0/${folder}/`;
                 for (const [path, module] of Object.entries(allImages)) {
-                    if (path.includes(legacyPathPart) && path.split('/').pop() === id) {
+                    if (path.includes(legacyPart) && path.split('/').pop() === id) {
                         imageSrc = module.default;
                         break;
                     }
@@ -115,8 +114,8 @@ if (width) {
 ---
 
 {imageSrc ? (
-  <Image 
-    src={imageSrc} 
+  <img 
+    src={imageSrc.src} 
     alt={alt || id || ''} 
     width={finalWidth}
     height={finalHeight}

src/components/ZoomImage.astro

@@ -1,5 +1,4 @@
 ---
-import { Image } from 'astro:assets';
 import Zoom from './Zoom.astro';
 
 interface Props {
@@ -38,9 +37,9 @@ let resolvedPath: string | undefined;
  */
 
 // Priority 1: Article-specific images
-const articleSpecificPrefix = `/src/assets/${articleName}/`;
+const articleSpecificPart = `/assets/${articleName}/`;
 for (const [path, module] of Object.entries(allImages)) {
-    if (path.includes(articleSpecificPrefix) && path.split('/').pop() === normalizedId) {
+    if (path.includes(articleSpecificPart) && path.split('/').pop() === normalizedId) {
         imageSrc = module.default;
         resolvedPath = path;
         break;
@@ -49,9 +48,9 @@ for (const [path, module] of Object.entries(allImages)) {
 
 // Priority 2: Shared images
 if (!imageSrc) {
-    const sharedPrefix = `/src/assets/shared/`;
+    const sharedPart = `/assets/shared/`;
     for (const [path, module] of Object.entries(allImages)) {
-        if (path.includes(sharedPrefix) && path.split('/').pop() === normalizedId) {
+        if (path.includes(sharedPart) && path.split('/').pop() === normalizedId) {
             imageSrc = module.default;
             resolvedPath = path;
             break;
@@ -64,9 +63,9 @@ if (!imageSrc) {
     const legacyFolders = ['img', 'FF_img', 'img_webhook_flows'];
     
     for (const folder of legacyFolders) {
-        const legacyPathPart = `/src/content/docs/version-3.0/${folder}/`;
+        const legacyPart = `/version-3.0/${folder}/`;
         for (const [path, module] of Object.entries(allImages)) {
-            if (path.includes(legacyPathPart) && path.split('/').pop() === normalizedId) {
+            if (path.includes(legacyPart) && path.split('/').pop() === normalizedId) {
                 imageSrc = module.default;
                 resolvedPath = path;
                 break;
@@ -110,8 +109,8 @@ if (!imageSrc) {
 
 {imageSrc ? (
   <Zoom>
-    <Image 
-      src={imageSrc} 
+    <img 
+      src={imageSrc.src} 
       alt={alt || id} 
       width={parseInt(width.replace('px', '')) || 700}
       class:list={[

src/components/reusable/AddAudience.md

@@ -1,8 +1,5 @@
 
 
-import Zoom from 'react-medium-image-zoom';
-import 'react-medium-image-zoom/dist/styles.css';
-
 :::note
 To proceed, ensure that you created a paywall, onboarding, or A/B test you want to run and an audience, you'd like to specify.
 :::
@@ -11,7 +8,7 @@ To proceed, ensure that you created a paywall, onboarding, or A/B test you want
 2. If you want to use more than one audience in the placement to create personalized paywalls tailored to different user groups, click the **Add audience** button and choose the desired user segment from the list.
 
 <Zoom>
-  <img src="/img/placement-add-audience.webp"
+  <img src="placement-add-audience.webp"
   style={{
     border: '1px solid #727272', /* border width and color */
     width: '700px', /* image width */

src/components/reusable/ProvideBundleID.md

@@ -1,8 +1,6 @@
 ---
 no_index: true 
 ---
-import Zoom from 'react-medium-image-zoom';
-import 'react-medium-image-zoom/dist/styles.css';
 
 1. Open [App Store Connect](https://appstoreconnect.apple.com/apps). Select your app and proceed to **General** → **App Information** section.
 
@@ -11,7 +9,7 @@ import 'react-medium-image-zoom/dist/styles.css';
 
 
 <Zoom>
-  <img src="/img/afd5012-bundle_id_apple.webp"
+  <img src="afd5012-bundle_id_apple.webp"
   style={{
     border: '1px solid #727272', /* border width and color */
     width: '700px', /* image width */
@@ -29,7 +27,7 @@ import 'react-medium-image-zoom/dist/styles.css';
 
 
 <Zoom>
-  <img src="/img/2d64163-bundle_id.webp"
+  <img src="2d64163-bundle_id.webp"
   style={{
     border: '1px solid #727272', /* border width and color */
     width: '700px', /* image width */

src/layouts/DocsLayout.astro

@@ -34,7 +34,7 @@ const keywordsString = Array.isArray(keywords) ? keywords.join(', ') : keywords;
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width" />
-    <link rel="icon" type="image/svg+xml" href="/favicon_black.svg" />
+    <link rel="icon" type="image/svg+xml" href={`${import.meta.env.BASE_URL}/favicon_black.svg`} />
     <meta name="generator" content={Astro.generator} />
     <title>{derivedTitle}</title>