Comments (14)
No worries. Let me open a PR for it.
.take
from landing-page.
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.
from landing-page.
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}
from landing-page.
You are welcome! it's great to see your contributions!
from landing-page.
@bdougie Can I take it over?
from landing-page.
@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?
from landing-page.
@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?
from landing-page.
Sorry, I'm not sure I understand what you mean.
How about taking this over and open a pr?
from landing-page.
.take
from landing-page.
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.
from landing-page.
I fixed it!
from landing-page.
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:
from landing-page.
@a0m0rajab do you mind fixing this?
from landing-page.
@a0m0rajab Thanks, this will surely help me in the future if I encounter this type of error next time. 😀
from landing-page.
Related Issues (20)
- Feature: Move current index page to /contributors url
- chore: mixed content check never completes
- chore: update the project to Node 18.x on Netlify HOT 1
- Feature: Students landing page HOT 5
- fix: mobile menu does layout shift on open/close
- Feature: Add categories to blog HOT 1
- chore: remove mixed content check from CI/CD HOT 1
- chore: Revisit linting/styling HOT 7
- landing page action test
- Feature: Create an OG image for students landing page HOT 2
- Feature: Create an OG image for company landing page HOT 1
- Feature: Add links to our content to the landing page
- Feature: Update Maintainer Langing Page
- Feature: Update Copy and Images for Contributor Landing Page
- Feature: Add date to Blog Posts HOT 4
- Feature: Add author bios to blog posts HOT 1
- remove rel="noreferrer"
- Bug: Update footer with app.opensauced.pizza
- Feature: Outdated "Press" Page, Replace OG Logos With Updated Logo/Brand
- Feature: Mouse Hover / Hover Box Feature for 'Use Cases'
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from landing-page.