I have collections set up and working properly.
I am looping through a collection of projects
{{#each collections.projects}}
<a href="" class="portfolio-entry">
<div class="info-frame portfolio-title">
<h4>{{this.title}}</h4>
</div>
<div class="info-bits centerContext">
<ul class="centerElement">
<li class="info-bit">{{this.skills}}</li>
<li class="info-bit">{{this.type}}</li>
<li class="info-bit">{{this.platform}}</li>
</ul>
</div>
<div class="project-thumbnail">
<img src="{{this.thumbnail}}" alt="">
</div>
</a>
{{/each}}
I would like to use metalsmith-permalinks in order to resolve each link's url
I tried all kinds of lame things like this
<a href="{{this.permalink}}" class="portfolio-entry">
and this
<a href="{{this.url}}" class="portfolio-entry">
Of course - none of them works.
I struggled to find any detailed information on how to actually use permalinks within your template anywhere online.
The permalinks plugin adds path metadata property that doesn't seem to be documented well. This should be what you need to achieve links.
The Github page notes:
If no pattern is provided, the files won't be remapped, but the path metadata key will still be set, so that you can use it for outputting links to files in the template.
I haven't found anywhere else showing the use of this but I'd assume the above quote means that it is standard behaviour.
You can use it like:
{{#each collections.projects}}
<a href="/{{this.path}}/" class="portfolio-entry">
The first / is so that it resolves to the current host and the trailing / is optional (depending on your http server configuration.
Related
I have this piece of code in my HTML component.
<ul>
<li *ngFor="let item of items">
{{item.name}}
<span *ngIf="item.Description" class="text-muted"> {{item.Description}}</span>
</li>
</ul>
I requested an "item" object from an API and it has the property
item.link and item.name.
My problem is that from the API that I get, the value that I get from item.link might have full URL address to an item (something like "https://stackoverflow.com") or some short URL (like "www.google.com").
My goal is just to be able to handle the differences in link given back by the API, so that when clicked, it goes to the right page.
I would like for the href to update so that it adds the "https://" in front of links like "www.google.com" everytime it goes through items in the for loop.
I tried adding "//" in front of "item.link" in the a tag. It fixes the item.link when it's the short URL without the https but breaks the link with https already in item.link.
Any help would be much appreciated. :)
Thanks in advance.
Why not check if it already has https and then consuming it?
<ul>
<li *ngFor="let item of items">
{{item.name}}
<span *ngIf="item.Description" class="text-muted"> {{item.Description}}</span>
</li>
</ul>
You can extend this, or write a custom function to check for other cases like http or if it already has :// and other edge cases.
I've been struggling with that issue for 2 hours or so and can't find a way to do it.
I would like to update my url hash (#home, #about etc..) when i'm scrolling through those sections and by the same way highlight the current section in my navbar. I've found different answers in Jquery but the thing is that i'm using ReactJS and i've been told that it is not a good idea / useful to use Jquery with ReactJS.
I've also found and tried this package : https://www.npmjs.com/package/react-scrollable-anchor
But the problem is the hash update only when the scrolling is over.
Edit :
<ul>
<li>
<a href="#">Home</Link>
</li>
<li>
<a href="#about">About</Link>
</li>
<li>
<a href="#skills">Skills</Link>
</li>
</ul>
When i'm clicking on About my url then goes as : localhost:3000/#about and automatically scroll to this section, everything is fine from here.
But if I scroll(without clicking anywhere) to the Skills section then i want the url to automatically go to localhost:3000/#skills and the navbar hightlight the Skills.
Hope you can help me through this issue. Thanks !
You should simply use 'react-router-dom' library for routing and handling Url paths. they has very clear documentation https://reactrouter.com/web/example/basic.
For You help
Simply define the path in the to prop of Link where you want to go !
<ul>
<li>
<Link to="/test">Home</Link>
</li>
<li>
<Link to="/dashboard">Dashboard</Link>
</li>
</ul>
Now simply navigate to that declared path by wrapping it in the
<Route exact path="/test">
<Home />
</Route>
By doing all this.Url Hash will not been a problem any more ;)
I am trying to add a Tripadvisor rating widget to my React website (see code below). At the moment, only the Tripadvisor log is loading, and no rating information. I think the script in the widget is not running, and I'm not sure how to get it to run.
I loaded the script using Helmet, and can see it in the head of my document in the browser. In the same component, I try to render the widget.
//Here is the code of the widget:
<div id="TA_cdsratingsonlynarrow350" class="TA_cdsratingsonlynarrow">
<ul id="80bNGet6b" class="TA_links mE4BAE">
<li id="u9nO7YH4pF" class="aWtKBjB9S">
<a target="_blank" href="https://www.tripadvisor.com/">
<img
src="https://www.tripadvisor.com/img/cdsi/img2/branding/tripadvisor_logo_transp_340x80-18034-2.png"
alt="TripAdvisor"
/>
</a>
</li>
</ul>
</div>
<script
async
src="https://www.jscache.com/wejs
wtype=cdsratingsonlynarrow&uniq=350&locationId=17821239&lang=en_US&border=true&display_version=2"
data-loadtrk
onload="this.loadtrk=true">
</script>
//Here is the code of my attempt:
const Home = () => {
return (
<Layout>
<Helmet>
<script
async
src="https://www.jscache.com/wejs?wtype=cdsratingsonlynarrow&uniq=350&locationId=17821239&lang=en_US&border=true&display_version=2"
data-loadtrk
onload="this.loadtrk=true"
></script>
</Helmet>
<div id="TA_cdsratingsonlynarrow350" class="TA_cdsratingsonlynarrow">
<ul id="80bNGet6b" class="TA_links mE4BAE">
<li id="u9nO7YH4pF" class="aWtKBjB9S">
<a target="_blank" href="https://www.tripadvisor.com/">
<img
src="https://www.tripadvisor.com/img/cdsi/img2/branding/tripadvisor_log o_transp_340x80-18034-2.png"
alt="TripAdvisor"
/>
</a>
</li>
</ul>
</div>
</Layout>
I expect the full tripadvisor widget to load, but instead it just loads the Tripadvisor logo image (which does not require the script to be run).
The widget looks fine when I test it in a plain html document, but I can't get it to work in React. Any help much appreciated!
Thanks for the question. Receiving errors in the console (by right clicking and choosing inspect in Chrome) would be helpful to determine the root of the problem.
I think what's happening here is a conflict associated with the security of the site.
In the line that identifies the jscashe.com URL, use this URL instead: https://www.tripadvisor.com/WidgetEmbed-cdsratingsonlynarrow?amp;locationId=17821239&border=true&uniq=350&lang=en_US&display_version=2
It turns out that by doing a gatsby build && gatsby serve the widget works fine. I was previously running gatsby develop and it wasn't working then. If anyone knows why that could be I would be interested to know!
I am building an app using Ember.js with an OAuth system. I have this button for my users to login: http://imgur.com/C8x70ZX
After my user logged in, it changes to this dropdown:
http://imgur.com/cGTsMzA
The problem is, this currently only works after a page reload. Since I am building a single page, dynamic application, this is something I do not want.
This is the implementation I use:
{{#if isNotLoggedIn}}
<li class="has-form" id="logInButton"><button onclick='FBLogin()'>Connect with Facebook</button></li>
{{else}}
<li class='has-dropdown not-click'>
<a href='#'><img class='profilePicture' {{bind-attr src=pictureLinkSquare}} height='25px' width='25px' /> Welcome, {{firstName}} {{lastName}}!</a>
<ul class='dropdown'>
<li>{{#link-to 'profile'}}Profile{{/link-to}}</li>
<li>Sign Out</li>
</ul>
</li>
{{/if}}
So, how would I go about changing that button dynamically, what do I use for that? Can I implement this using ember (I was looking at the {{action}} helper?) or is it better to use something like jQuery to accomplish this task?
This is my first small, single page project, so I feel a bit lost.
Creating a JSBin example would help understand your query better.
However from what I understand, you would have not marked 'isNotLoggedIn' as a computed property that probably would be watching some property in your controller that controls the state of login.
Look at the example #http://emberjs.com/guides/object-model/computed-properties/
In example, pay special attention to how fullName computed property ended by putting a watch on base properties '.property('firstName', 'lastName')'. Usually when this is missed, the computed property does not get 'refreshed' immediately.
Hope this helps!
I'm using jQuery templates to build a tree. It works very well so far, but I came across an issue when trying to determine if an item is at the root level or not.
I use a template similar to that of render tree items:
<script id="tree-row-tmpl" type="text/x-jquery-tmpl">
<li>
<div class="row ${NodeType}">
${Name}
</div>
{{if expanded}}
<ul>
{{tmpl($data.chidren || []) "#tree-row-tmpl"}}
</ul>
{{/if}}
</li>
</script>
Now in the link click handler I try to determine root node using:
if($.tmplItem(this).parent)
It turned out the root tmplItem.parent is not null (as I expected), but contains an object with two properties: {data:{}, key:0}.
I see that I can check item.parent.parent or one of the properties which exist in regular tmplItem and missing in the root object. But this seems like a kind of hack for me - I'd prefer finding an "official" way of verifying a tmplItem whether it's empty or valid.