adding hypelinks to TryNow pages (#74)

* added hypelinks to TryNow pages

* resolved conflicts in the PR

* formatted StepsToUse.tsx properly

Author: TanmayBansa1

package-lock.json

@@ -19,8 +19,10 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.0.4",
+    "@types/dompurify": "^3.0.5",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "dompurify": "^3.2.4",
     "framer-motion": "^12.5.0",
     "lucide-react": "^0.476.0",
     "react": "^19.0.0",

package.json

@@ -1,14 +1,22 @@
 import React from 'react';
 import { motion } from 'framer-motion';
 import { paragraphAnimations } from '@/styles/Animations';
+import DOMPurify from 'dompurify';
+import { renderContentWithLinks } from '@/utils/renderlinks-utils';
 
 interface ParagraphProps {
   title: string;
   content: string;
   button?: string | null;
+  links?: { text: string; url: string }[] | null;
 }
 
-const Paragraph: React.FC<ParagraphProps> = ({ title, content, button }) => {
+const Paragraph: React.FC<ParagraphProps> = ({
+  title,
+  content,
+  button,
+  links,
+}) => {
   const contentPoints = content.includes('\n')
     ? content.split('\n')
     : [content];
@@ -39,7 +47,13 @@ const Paragraph: React.FC<ParagraphProps> = ({ title, content, button }) => {
               custom={index}
               variants={paragraphAnimations.listItem(index)}
             >
-              {point.trim()}
+              <span
+                dangerouslySetInnerHTML={{
+                  __html: DOMPurify.sanitize(
+                    renderContentWithLinks(point.trim(), links),
+                  ),
+                }}
+              />
             </motion.li>
           ))}
         </ul>
@@ -48,7 +62,13 @@ const Paragraph: React.FC<ParagraphProps> = ({ title, content, button }) => {
           className="text-gray-700 mt-4"
           variants={paragraphAnimations.text}
         >
-          {content}
+          <div
+            dangerouslySetInnerHTML={{
+              __html: DOMPurify.sanitize(
+                renderContentWithLinks(content, links),
+              ),
+            }}
+          />
         </motion.p>
       )}
 

src/components/TryNow/Paragraph.tsx

@@ -3,6 +3,8 @@ import { Carousel } from 'react-responsive-carousel';
 import { ArrowLeft, ArrowRight } from 'lucide-react';
 import { steps } from '@/constants/TryNowData/bootableSoasData';
 import { useState } from 'react';
+import DOMPurify from 'dompurify';
+import { renderContentWithLinks } from '@/utils/renderlinks-utils';
 
 const StepsToUse = () => {
   const [currentStep, setCurrentStep] = useState(0);
@@ -41,7 +43,15 @@ const StepsToUse = () => {
               <h3 className="text-2xl font-semibold text-black mt-1">
                 {step.title}
               </h3>
-              <p className="text-gray-700 mt-2">{step.description}</p>
+              <p
+                className="text-gray-700 mt-2"
+                dangerouslySetInnerHTML={{
+                  __html: DOMPurify.sanitize(
+                    renderContentWithLinks(step.description, step.links),
+                  ),
+                }}
+              />
+
               <img
                 src={step.image}
                 alt={step.title}

src/components/TryNow/StepsToUse.tsx

@@ -13,6 +13,7 @@ interface StepData {
   title: string;
   description: string;
   image: string;
+  links?: { text: string; url: string }[];
 }
 
 export const steps: StepData[] = [
@@ -21,6 +22,12 @@ export const steps: StepData[] = [
     title: 'Sugar On a Stick',
     description:
       'To boot Sugar Labs OS on your computer, you will need a bootable Sugar on Stick setup already. To see how to set it up, visit the wiki.',
+    links: [
+      {
+        text: 'wiki',
+        url: 'https://wiki.sugarlabs.org/go/Sugar_on_a_Stick/Installation',
+      },
+    ],
     image: 'assets/TryNowImages/step1.jpg',
   },
   {
@@ -64,6 +71,12 @@ export const steps: StepData[] = [
     description:
       'After selecting the USB drive, your computer should boot into the Sugar OS interface. If you encounter any issues during the boot process, seek assistance in the Sugar Labs Matrix room. For detailed instructions and additional resources, visit the Sugar Labs Booting SoaS page.',
     image: 'assets/TryNowImages/step7.png',
+    links: [
+      {
+        text: 'Matrix room',
+        url: 'https://matrix.to/#/#sugar:matrix.org',
+      },
+    ],
   },
 ];
 

src/constants/TryNowData/bootableSoasData.ts

@@ -30,12 +30,36 @@ export const musicBlocksSections = [
     content:
       'Music Blocks is designed to run in the browser. It is derived from Turtle Blocks JS which can be found here. You can run the software locally from the index.html file, from the GitHub repository, or by setting up a local server. If you want to run Music Blocks offline, download this repo and point your browser to the index.html file found in the musicblocks directory on your local file system. See Using Music Blocks and Music Blocks Guide',
     button: 'Try Music Blocks Now',
+    links: [
+      {
+        text: 'here',
+        url: 'https://github.com/sugarlabs/turtleblocksjs',
+      },
+      {
+        text: 'Github',
+        url: 'https://github.com/sugarlabs/musicblocks/',
+      },
+      {
+        text: 'Using Music Blocks',
+        url: 'http://github.com/sugarlabs/musicblocks/tree/master/documentation',
+      },
+      {
+        text: 'Music Blocks Guide',
+        url: 'http://github.com/sugarlabs/musicblocks/tree/master/guide',
+      },
+    ],
   },
   {
     title: 'Credits',
     content:
       'Music Blocks is a fork of TurtleArtJS created by Walter Bender. (Turtle Blocks JS has many contributors).\n Devin Ulibarri has contributed functional and user-interface designs. Many of his contributions were inspired by the music education ideas, representations and practices (e.g. aspects of matrix, musical cups) developed and published by Dr. Lawrence Scripp with whom Devin studied at New England Conservatory and for whom he worked at Affron Scripp & Associates, LLC.\n Much of the initial coding of the fork from Turtle Blocks was done by Yash Khandelwal as part of Google Summer of Code (GSoC) 2015. Hemant Kasat contributed to additional widgets as part of GSoC 2016. Additional contributions are being made by Tayba Wasim, Dinuka Tharangi Jayaweera, Prachi Agrawal, Cristina Del Puerto, and Hrishi Patel as part of GSoC 2017. During GSoC 2018, Riya Lohia developed a Temperament Widget. Ritwik Abhishek added a keyboard widget and a pitch-tracking widget.\n Many students contributed to the project as part of Google Code-in (2015–16, 2016–17, and 2017–2018). Sam Parkinson built the Planet during GCI 2016–17. Euan Ong redesigned the Planet code as a series of GCI tasks in 2017–18.',
     button: null,
+    links: [
+      {
+        text: 'contributors',
+        url: 'https://github.com/sugarlabs/turtleblocksjs/graphs/contributors',
+      },
+    ],
   },
 ];
 
@@ -51,6 +75,12 @@ export const foundabug = [
   {
     title: 'Found a Bug?',
     content: 'Report it in the issues section of THIS repository.',
+    links: [
+      {
+        text: 'issues',
+        url: 'https://github.com/sugarlabs/musicblocks/issues',
+      },
+    ],
     button: null,
   },
 ];
@@ -66,6 +96,7 @@ export const musicBlocksLogoCards = [
       {
         text: 'Trying out Music Blocks',
         link: 'https://musicblocks.sugarlabs.org/',
+        target: '_blank',
       },
     ],
   },
@@ -79,6 +110,7 @@ export const musicBlocksLogoCards = [
       {
         text: 'Go to Youtube channel',
         link: 'https://www.youtube.com/channel/UCdXacR2zOXff4XCKRLTSnRw',
+        target: '_blank',
       },
     ],
   },
@@ -92,6 +124,7 @@ export const musicBlocksLogoCards = [
       {
         text: 'Go to Youtube channel',
         link: 'https://www.youtube.com/channel/UCdXacR2zOXff4XCKRLTSnRw',
+        target: '_blank',
       },
     ],
   },
@@ -105,6 +138,7 @@ export const musicBlocksLogoCards = [
       {
         text: 'Download PDF file',
         link: 'https://gakken-steam.jp/music_blocks/common/pdf/challengeprint.zip',
+        target: '_blank',
       },
     ],
   },

src/constants/TryNowData/musicBlocksData.ts

@@ -14,17 +14,51 @@ export const raspberrySections = [
     content:
       'As of August 2017, the best to use is Sugar on a Stick, as it has many activities and has regular security updates. See Sugar on a Stick/Raspberry Pi for how to download and install it. Sugar on a Stick is a spin of Fedora.',
     button: '',
+    links: [
+      {
+        text: 'Sugar on a Stick/Raspberry Pi',
+        url: 'https://wiki.sugarlabs.org/go/Sugar_on_a_Stick/Raspberry_Pi',
+      },
+    ],
   },
   {
     title: 'Other methods to get Sugar on Raspberry Pi?',
     content:
       'using Raspbian, the most common operating system on a Raspberry Pi, a derivative of Debian\n using Fedora\n using Debian\n using Ubuntu',
     button: '',
+    links: [
+      {
+        text: 'Raspbian',
+        url: 'https://wiki.sugarlabs.org/go/Raspbian',
+      },
+      {
+        text: 'Fedora',
+        url: 'https://github.com/sugarlabs/sugar/blob/master/docs/fedora.md',
+      },
+      {
+        text: 'Debian',
+        url: 'https://github.com/sugarlabs/sugar/blob/master/docs/debian.md',
+      },
+      {
+        text: 'Ubuntu',
+        url: 'https://github.com/sugarlabs/sugar/blob/master/docs/ubuntu.md',
+      },
+    ],
   },
   {
     title: 'Developers',
     content:
       'Developers may focus on Fedora or Debian when setting up a development environment for Sugar on Raspberry Pi, because Sugar development on generic computers is focused on those operating systems.',
     button: '',
+    links: [
+      {
+        text: 'Fedora',
+        url: 'https://github.com/sugarlabs/sugar/blob/master/docs/fedora.md',
+      },
+      {
+        text: 'Debian',
+        url: 'https://github.com/sugarlabs/sugar/blob/master/docs/debian.md',
+      },
+    ],
   },
 ];