Feature: Link Twitter handles in the testimonial section

[bdougie]

Type of feature

🍕 Feature

Current behavior

When viewing testimonials, any @ mentioned uses are not linkable.

Suggested solution

Make them linkable through either a service or sanitizing through markdown.

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Contributing Docs

• I agree to follow this project's Contribution Docs

[shamimbinnur]

@bdougie Can I take it over?

[takanome-dev]

@bdougie I used some transformation to replace twitter handles into links :

const regex = /(?<=@)\w+/g

  const transformParagraph = (paragraph: string) => {
    const words = paragraph.split(' ')
    const transformedWords = words.map((word) => {
      if (word.match(regex)) {
        return `<a href="https://twitter.com/${word.replace(
          '@',
          ''
        )}" target="_blank" rel="noopener noreferrer">${word}</a>`
      }
      return word
    })
    return transformedWords.join(' ')
  }

After that I tried to use some libraries like markdown-it, marked and others but they transform the string to html or markdown and it showed up as a string in the browser, so I passed the transformParagraph to the p tag through dangerouslySetInnerHTML attribute and here is the result:

What are your thoughts about it?

[SimranjitKaurMaan]

@takanome-dev Another possible solution could be to show the string content in p tag and show the twitter handle in a tag. This can be done by parsing the entire testimonial content recursively and parse the string content and twitter handle separately. Parse the @content as a tag whereas parse without @ as p tag. Am i clear enough to explain the approach?

[takanome-dev]

Sorry, I'm not sure I understand what you mean.
How about taking this over and open a pr?

[SimranjitKaurMaan]

No worries. Let me open a PR for it.

.take

[wasimapinjari]

.take

[github-actions]

Thanks for being interested in this issue. It looks like this ticket is already assigned to a contributor. Please communicate with the assigned contributor to confirm the status of the issue.

[wasimapinjari]

I fixed it!

[wasimapinjari]

But before that, when I forked the repo and clicked on this file there was an issue already (this is not related to my code):

This is how I set up the project:

npm i
npm run dev

After seeing the error I did the following:

npm run lint
npm ci
npm run dev

It seems like there is some conflict with TypeScript.

My final attempt at solving:

npm i framer-motion
npm run dev

But the error remains:

[a0m0rajab]

Thank you for your work! @wasimapinjari can you open a PR to check it from there?
Plus, you have a great solution! when I first looked at this I thought about RegEx but your solution is simpler.

[wasimapinjari]

@a0m0rajab do you mind fixing this?

[a0m0rajab]

I do not think that this problem would prevent you from opening your PR, but to fix it you can do the next:
take out the

const transition = { duration: 0.5, delay: 0.2, ease: 'easeInOut', type: 'spring', stiffness: 50 };
  return (
    <motion.div
      ref={refCard}
      initial={{ opacity: 0, y: cardInView ? 100 : 0 }}
      animate={{ opacity: cardInView ? 1 : 0 , y: cardInView ? 0 : 100 }}
      transition={transition}
      >

or use as from TS:

transition={{ duration: 0.5, delay: 0.2, ease: 'easeInOut', type: 'spring', stiffness: 50} as Transition}

[wasimapinjari]

@a0m0rajab Thanks, this will surely help me in the future if I encounter this type of error next time. 😀

[a0m0rajab]

You are welcome! it's great to see your contributions!