Add DevOps forkable

* Add forkable Backend roadmap

* Add `(Fork)` at title

src/components/CreateTeam/UpdateTeamResourceModal.tsx

@@ -8,6 +8,7 @@ import { useOutsideClick } from '../../hooks/use-outside-click';
 import { useKeydown } from '../../hooks/use-keydown';
 import type { TeamResourceConfig } from './RoadmapSelector';
 import { useToast } from '../../hooks/use-toast';
+import {replaceChildren} from "../../lib/dom.ts";
 
 export type ProgressMapProps = {
   teamId: string;
@@ -81,7 +82,8 @@ export function UpdateTeamResourceModal(props: ProgressMapProps) {
       fontURL: '/fonts/balsamiq.woff2',
     });
 
-    containerEl.current?.replaceChildren(svg);
+    replaceChildren(containerEl.current!, svg);
+    // containerEl.current?.replaceChildren(svg);
 
     // Render team configuration
     removedItems.forEach((topicId: string) => {

src/components/FrameRenderer/renderer.ts

@@ -10,6 +10,7 @@ import {
 import type { ResourceProgressType, ResourceType } from '../../lib/resource-progress';
 import { pageProgressMessage } from '../../stores/page';
 import { showLoginPopup } from '../../lib/popup';
+import {replaceChildren} from "../../lib/dom.ts";
 
 export class Renderer {
   resourceId: string;
@@ -88,7 +89,8 @@ export class Renderer {
         });
       })
       .then((svg) => {
-        this.containerEl?.replaceChildren(svg);
+        replaceChildren(this.containerEl!, svg);
+        // this.containerEl?.replaceChildren(svg);
       })
       .then(() => {
         return renderResourceProgress(

src/components/TeamProgress/MemberProgressModal.tsx

@@ -17,6 +17,7 @@ import { useToast } from '../../hooks/use-toast';
 import { useAuth } from '../../hooks/use-auth';
 import { pageProgressMessage } from '../../stores/page';
 import { MemberProgressModalHeader } from './MemberProgressModalHeader';
+import {replaceChildren} from "../../lib/dom.ts";
 
 export type ProgressMapProps = {
   member: TeamMember;
@@ -91,7 +92,8 @@ export function MemberProgressModal(props: ProgressMapProps) {
       fontURL: '/fonts/balsamiq.woff2',
     });
 
-    containerEl.current?.replaceChildren(svg);
+    replaceChildren(containerEl.current!, svg);
+    // containerEl.current?.replaceChildren(svg);
   }
 
   useKeydown('Escape', () => {

src/data/roadmaps/devops/devops.md

@@ -7,6 +7,7 @@ briefDescription: 'Step by step guide for DevOps or operations role in 2023'
 title: 'DevOps Roadmap'
 description: 'Step by step guide for DevOps, SRE or any other Operations Role in 2023'
 hasTopics: true
+isForkable: true
 tnsBannerLink: 'https://thenewstack.io?utm_source=roadmap.sh&utm_medium=Referral&utm_campaign=Alert'
 question:
   title: 'What is DevOps?'

src/lib/dom.ts

@@ -0,0 +1,8 @@
+export function replaceChildren(parentNode: Element, newChild: Element) {
+  if (parentNode.replaceChildren) {
+    return parentNode.replaceChildren(newChild);
+  }
+
+  parentNode.innerHTML = '';
+  parentNode.append(newChild);
+}