Merge pull request #9279 from backstage/techdocs/support-relative-source-src

[TechDocs] Add support for source tags pointing to relative assets

.changeset/techdocs-lets-call-the-whole-thing-off.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs': patch
+---
+
+Added support for documentation using the raw `<source>` tag to point to relative resources like audio or video files.

plugins/techdocs/src/reader/transformers/addBaseUrl.test.ts

@@ -42,6 +42,10 @@ const fixture = `
       <img src="test.jpg" />
       <script type="javascript" src="script.js"></script>
       <a href="afile.pdf" download>Download Now</a>
+      <video width="800" height="450" controls preload="auto">
+        <source src="avideo.mp4" type="video/mp4">
+        Your browser does not support the video tag.
+      </video>
     </body>
   </html>
 `;
@@ -88,12 +92,18 @@ describe('addBaseUrl', () => {
     );
     expect(techdocsStorageApi.getBaseUrl).toHaveBeenNthCalledWith(
       3,
-      'astyle.css',
+      'avideo.mp4',
       mockEntityId,
       '',
     );
     expect(techdocsStorageApi.getBaseUrl).toHaveBeenNthCalledWith(
       4,
+      'astyle.css',
+      mockEntityId,
+      '',
+    );
+    expect(techdocsStorageApi.getBaseUrl).toHaveBeenNthCalledWith(
+      5,
       'afile.pdf',
       mockEntityId,
       '',

plugins/techdocs/src/reader/transformers/addBaseUrl.ts

@@ -84,6 +84,7 @@ export const addBaseUrl = ({
     await Promise.all([
       updateDom<HTMLImageElement>(dom.querySelectorAll('img'), 'src'),
       updateDom<HTMLScriptElement>(dom.querySelectorAll('script'), 'src'),
+      updateDom<HTMLSourceElement>(dom.querySelectorAll('source'), 'src'),
       updateDom<HTMLLinkElement>(dom.querySelectorAll('link'), 'href'),
       updateDom<HTMLAnchorElement>(dom.querySelectorAll('a[download]'), 'href'),
     ]);