Merge pull request #7946 from maiieul/fix-docs-images-not-loading

docs: fix images not loading

Author: wmertens

packages/docs/src/routes/examples/[...id]/index!.tsx

@@ -9,6 +9,7 @@ import { type DocumentHead, useLocation } from '@builder.io/qwik-city';
 import { PanelToggle } from '../../../components/panel-toggle/panel-toggle';
 import { isBrowser } from '@builder.io/qwik';
 import { createPlaygroundShareUrl, parsePlaygroundShareUrl } from '../../../repl/ui/repl-share-url';
+import { setReplCorsHeaders } from '~/utils/utils';
 
 export default component$(() => {
   useStyles$(styles);
@@ -172,11 +173,12 @@ interface ExamplesStore extends ReplAppInput {
 
 type ActivePanel = 'Examples' | 'Input' | 'Output' | 'Console';
 
-export const onGet: RequestHandler = ({ cacheControl }) => {
+export const onGet: RequestHandler = ({ cacheControl, headers }) => {
   cacheControl({
     public: true,
     maxAge: 3600,
   });
+  setReplCorsHeaders(headers);
 };
 
 export const onStaticGenerate: StaticGenerateHandler = () => {

packages/docs/src/routes/playground/index!.tsx

@@ -8,6 +8,7 @@ import type { ReplAppInput } from '../../repl/types';
 import { createPlaygroundShareUrl, parsePlaygroundShareUrl } from '../../repl/ui/repl-share-url';
 import { PanelToggle } from '../../components/panel-toggle/panel-toggle';
 import { isBrowser } from '@builder.io/qwik';
+import { setReplCorsHeaders } from '~/utils/utils';
 
 export default component$(() => {
   useStyles$(styles);
@@ -129,9 +130,11 @@ export interface PlaygroundStore extends ReplAppInput {
   shareUrlTmr: any;
 }
 
-export const onGet: RequestHandler = ({ cacheControl }) => {
+export const onGet: RequestHandler = ({ cacheControl, headers }) => {
   cacheControl({
     public: true,
     maxAge: 3600,
   });
+
+  setReplCorsHeaders(headers);
 };

packages/docs/src/routes/[email protected]

@@ -10,6 +10,7 @@ import { PanelToggle } from '../../components/panel-toggle/panel-toggle';
 import { Header } from '../../components/header/header';
 import type { ReplAppInput, ReplModuleInput } from '../../repl/types';
 import { EditIcon } from '../../components/svgs/edit-icon';
+import { setReplCorsHeaders } from '~/utils/utils';
 
 export default component$(() => {
   useStyles$(styles);
@@ -167,9 +168,10 @@ export interface TutorialStore extends ReplAppInput {
 }
 
 export const PANELS = ['Tutorial', 'Input', 'Output'];
-export const onGet: RequestHandler = ({ cacheControl }) => {
+export const onGet: RequestHandler = ({ cacheControl, headers }) => {
   cacheControl({
     public: true,
     maxAge: 3600,
   });
+  setReplCorsHeaders(headers);
 };

packages/docs/src/routes/tutorial/layout.tsx

@@ -4,3 +4,9 @@ export const toSnakeCase = (str: string) =>
     .split(/\.?(?=[A-Z])/)
     .join('-')
     .toLowerCase();
+
+export const setReplCorsHeaders = (headers: Headers) => {
+  // Needed for SharedArrayBuffer in the REPL
+  headers.set('Cross-Origin-Opener-Policy', 'same-origin');
+  headers.set('Cross-Origin-Embedder-Policy', 'require-corp');
+};