Does anyone know how to add a target="_blank" to external hyperlinks within the Rich Text in Contentful?
This is one way I was able to get it to work
[INLINES.HYPERLINK]: (node, children) => {
if (node.data.uri.includes('https://')) {
return (
<a target="_blank" rel="noopener noreferrer" href={node.data.uri}>
{children}
</a>
)
}
return <Link to={node.data.uri}>{children}</Link>
},
Related
I want to populate the dropdown list with data from the database, disastertype is an array with all the details, however when I map through it to display the disaster_type it does not work, the page does not even renders a blank page is shown. Please guide as I am a beginner with REACTJS.
const [disastertype,Setdisastertype] = useState([]);
useEffect(()=>{
Axios.get("http://localhost:3001/api/disasterinfo").then((response)=>{
Setdisastertype(response)
console.log(response)
})
},[])
--------------------------------------------------------------------
<td><div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Disaster Type</button>
<ul class="dropdown-menu">
{disastertype.map((val)=>(
<li><a class="dropdown-item" key={val.disaster_type}>{val.disaster_type}</a></li>
))}
</ul>
</div></td>
Result from console.log(response)
console.log
You have just simply missed a field , you have two options here :
change Setdisastertype(response) to Setdisastertype(response.data)
change disastertype.map to disastertype.data.map
First solution is recommended.
In res.data.tweets i am fetching tweets from server and storing values for every tweet in tweetData obj. In tweet_text, i would like to add a link to the tagged twitter users(clickin on tag will redirect to twitter profile). I figured out how do i find tagged users but i am not able to add a link either with .link or .href attribbute.
axios.post(API_URL, null, { params }).then(res => {
this.currentPage = res.data.page
this.numberOfPages = res.data.numberOfPages
res.data.tweets.forEach(tweet => {
const tweetData = {
id: tweet.id,
tweet_text: tweet.tweet_text,
twitter_name: tweet.twitter_name,
twitter_username: tweet.twitter_username,
added_at: moment(String(tweet.added_at)).format('MM/DD/YYYY hh:mm'),
}
this.tweets.push(tweetData)
// Below this line i am trying to achieve something by adding a link
this.tweets.forEach(el => {
el.tweet_text.split(' ').forEach(word => {
if (word.includes('#')) {
// word = 'this is tag'
word.link('https://twitter.com')
console.log(word.link)
}
})
})
})
})
This is component where data is shown
<div class="tweets-container">
<div
v-for="tweet in tweets"
:key="tweet.id"
>
<div class="tweet-card">
<div class="username-time">
<div class="user-info">
<p class="name">
{{ tweet.twitter_name }}
</p>
<p class="user-info-p">
#
</p>
<p class="username">
<a
:href="'https://twitter.com/' + tweet.twitter_username"
class="twitter_link"
target="_blank"
>
{{ tweet.twitter_username }}
</a>
</p>
</div>
<div class="time">
<p>{{ tweet.added_at }}</p>
</div>
</div>
<div class="text">
<p>{{ tweet.tweet_text }}</p>
</div>
</div>
</div>
</div>
I don't think it's going to work this way.
You should use a computed property which will append the username to the twitter base link. Then, in your template, you can link the href property to the computed property.
computed: {
userLink: function () {
return "http://twitter.com/" + this.tweet.twitter_username
}
}
You can now use this "userLink" directly in your template.
<p class="username">
<a
:href="userLink"
class="twitter_link"
target="_blank"
>
{{ tweet.twitter_username }}
</a>
</p>
I didn't test the code I wrote, feel free to let me know if you need further advice ;)
I have a string of text that contains a number. I just wanted to make the number bold, not the rest of the text. is there an easy way to make this possible in vue js?
<a :href="detailUrl">
{{ content }}
<span v-if="detailText && detailUrl" class="notification-detail-link"
>{{ detailText }} >></span
>
</a>
The content variable comes in as a prop. This variable contains the string of text with a number that I would like to make bold
Use a computed property textBoldNumbers based on your prop the use v-html directive to render it :
props:["detailText "],
computed:{
textBoldNumbers(){
return this.detailText.replace(/([0-9])/g, "<b>$1</b>")
}
}
template :
<a :href="detailUrl">
{{ content }}
<span v-if="detailText && detailUrl"
class="notification-detail-link"
v-html="textBoldNumbers"
> </span
>
</a>
EXAMPLE
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',
data() {
return {
detailText: "aaa 98 vvv ddd 7 98"
}
},
computed: {
textBoldNumbers() {
return this.detailText.replace(/([0-9])/g, "<b>$1</b>")
}
}
})
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app" class="container">
<span v-html="textBoldNumbers"> </span>
</div>
I have a basical layout with a sidebar. I want to hide the sidebar when I am on /users/profile. How can I do it using the if helper? Is there a way to get the current file name?
Here is the code:
<div class="wrapper">
{{#if user}}
<nav id="sidebar">
<div class="sidebar-header">
<h3>Options</h3>
</div>
<ul class="list-unstyled components">
<li class="active">
<h1>
Home
</h1>
</li>
<li>
<h1>
Chat
</h1>
</li>
<li>
<h1>
About us
</h1>
</li>
</ul>
</nav>
{{else}}
{{/if}}
With the current code if a user is logged in the sidebar is showed , otherwise it is hidden. I want the same behaviour also if I am on users/profile.
Your routing is handled by Node.js. Somewhere in your Node.js you probably have instructions on what to do when the user opens /users/chatlist or /users/search, e.g. you select which template to render. Once you know the request is for route /users/profile, you use a JSON payload for your handlebars to properly render the page. You can customize that payload as you wish, including adding some helper fields. For example it may look like:
{
user: { ... },
sidebar: {
visible: false
}
}
Then inside your template, you may use it for a conditional check, like:
{{#if sidebar.visible}}
<nav id="sidebar">
...
</nav>
{{/if}}
I am trying to achieve keeping the menu open on the tab selected as the page reloads to the link clicked.
Here is the html code:
<nav>
<ul id="nav">
<li><img id="icon" src="icons/setup(48).png" />Setup
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</li>
<li><img id="icon" src="icons/userProfile_48.png" />User Maintenance
</li>
<li><img id="icon" src="icons/projects.png" />Projects
<ul>
<li>Project Title</li>
<li>Project Title</li>
<li>Project Title</li>
<li>Project Title</li>
<li>Project Title</li>
<li>Project Title</li>
<li>Project Title</li>
<li>Project Title</li>
</ul>
</li>
</ul>
</nav>
Here is the jQuery:
$(document).ready(function(){
$("#nav > li > a").on("click", function(e){
if($(this).parent().has("ul")) {
e.preventDefault();
}
if(!$(this).hasClass("open")) {
// hide any open menus and remove all other classes
$("#nav li ul").slideUp(300);
$("#nav li a").removeClass("open");
// open our new menu and add the open class
$(this).next("ul").slideDown(300);
$(this).addClass("open");
}
else if($(this).hasClass("open")) {
$(this).removeClass("open");
$(this).next("ul").slideUp(300);
}
});
});
At the moment it is working as it should when selecting a link and redirecting to that page but it just does not keep the menu tab open on the new page it loaded.
Some help will be great. Thanks
This part is to assist with keeping the menu open on page load.
<script>
$(document).ready(function () {
$("#nav li a").click(function (e) {
if ($(this).next("ul").length > 0) {
e.preventDefault();
var navInner = $(this).next("ul");
if (navInner.is(":visible")) {
}
}
});
});
You will need to pass the information which tab was open to the new page and reopen the tab once the page has loaded.
Two options come to mind:
Attach the information to the link by registering an onclick-Event to modify it before the browser starts navigating to the target URL.
Save the information in a session cookie you can access from Javascript.
I use the same script.
This is how I've solved this:
<li>Articles
<ul>
<li>Manager</li>
<li>Categories</li>
<li>Featured</li>
<li>Add</li>
</ul>
</li>
And add the line to JQuery script:
$(document).ready(function(){
$("#nav > li > a.open").next("ul").show(); // add this line here
$("#nav > li > a").on("click", function(e){ ............
You can also add some class to parent <li> containing <ul> you want to have expanded
for expample articles, and then in head:
<script type="text/javascript">
$(document).ready(function(){
$(".menu-list > li > a.articles").next("ul").show();
});
</script>
I dont know if this is correct way, but it works ;)