On the latest sveltekit I am trying to refer to my about page but no success.
Tried
{# if $page.url.pathname === '/about'}{/if}
{# if $page.route === '/about'}{/if}
Which is correct line?
It should be {#if $page.route.id === '/about'}, for more details consult the docs.
Worth noting that, $page.route.id is the literal directory path relative to src/routes.
For example, with route src/routes/blog/[postId]/+page.svelte, when visit https://example.com/blog/42, the $page.route.id would literally be /blog/[postId], instead of /blog/42. If you need the value 42, you get it from $page.params.postId.
Related
I'm new to Angular and I just put in place an i18n (2 languages) system for a website I am creating. Everything works properly but in order to switch from one language to another in my header, I feel stuck.
I followed the Angular documentation to transfer my variables from child to parent component and I ended with this:
<input type="text" id="item-input" #lang>
<button type="button" (click)="changeChosenLang(lang.value)">
{{ 'global.lang' | translate }}
</button>
As you can see, I write my language in the input form and I send it to the proper component with a button. What I wanted was to click on my 'global.lang' text and to be able to send its value to the parent component, since the value is the language which is not actually used.
I don't know how to put my 'global.lang' text in a variable, neither what kind of balise I can use. Also I didn't know how to summarize my problem to search for it on StackOverflow so if you know a similar post, don't hesitate to post the link.
Thank you for your reading!
I found a less tortured way (poor brain) to have the result I wanted:
<span (click)="changeChosenLang()">
{{ 'global.lang' | translate }}
</span>
First I temporary changed my button to a span balise and I deleted the parameter from my changeChosenLang() function. Then, I transferred a variable 'lang' from my parent component to this one, witch contains the value of the language chosen in my app constructor. At each click, I change its value in my changeChosenLang() function and everything works great!
I hope it can help someone someday. The moral of this post is: the simpler, the better! Have a good day.
At the moment, I am trying to list projects on a website in a grid. Some of them link to another page on the site and others link to another domain page. At the moment I am using React-Router's 'Link' to go from one page to another, however this doesn't work when going to a page outside of the domain. In the JSON file, I check for the 'url' variable which returns either the URL if its public or 'project-page' if it is local. I can't figure out how to differentiate between the two in JSX; is there a work around while still utilizing the JSON file?
<div className="projects">
{projectData.map((projectDetail, index) => {
return(
<div className='project-card'>
<Link to={projectDetail.url}>
<img src={require('./images/icons/' + projectDetail.alt + '.jpg')} alt={projectDetail.title}/>
<h3>{projectDetail.title}</h3>
<p>{projectDetail.subtext}</p>
</Link>
</div>
)
})}
</div>
Well, to differentiate you can check the content of the projectDetail.url you are retrieving from that JSON in your javascript file, if that matches your domain (your website - having a project-page as you mention) or is it an external domain. You can also set a flag value in your json file. For each project set a value (e.g externalUrl: 1 or 0) and then check if projectDetail.externalUrl is 1 (it contains an external link). Then, maybe try the following for external domains:
<Link to={{ pathname: "external URL" }} target="_blank" />
In your case:
<Link to={{ pathname: projectDetail.url }} target="_blank" />
See this answer for detailed information: React-Router External link
Edit 1
If Link does not work for external websites, this would probably be related to the version of react-router you are using. Actually, to navigate to external websites you can as well use anchort tags <a> to redirect. Check what URL your project has and then conditional render a <Link> or <a>.
<a href="www.example.com" target=_blank></a>
How would I get all 10 comments located in this page with a loop or a Puppeteer function https://www.tripadvisor.com/Restaurant_Review-g294308-d3937445-Reviews-Maki-Quito_Pichincha_Province.html using innerText property?
The only solution I have come up with is getting the outerHTML of the whole container of comments and then try to substring to get all the comments, but that is not optimal and I think its a more difficult approach. Maybe there is an easier solution in Puppeteer I cant find?
I am doing this for educational purposes. The comments are in class="partial_entry" and I want to get the innerText of a Dynamic Html tag (I want all 10), like the ones you see here:
If I where to open the div that contains <div class="review-container" data-reviewid="606551292" data-collapsed="true" data-deferred="false"><!--trkN:3-->, I would get another with id="review_582693262". Getting to the point, If I get to a <div> that has class="partial_entry" this would be where my comment is located. I have tried a few things but I get null, because it is not found since the parent <div> for each comment has a unique id like id="review_xxxxxxxxx".
Its kind of difficult since the review id is autogenerated like id="review_xxxxxxxxx" and cant iterate with a loop copying the CSS path since I dont have a static parent .
Why not just select those elements which have partial_entry class? This works:
let comments = await page.evaluate(() =>
[...document.querySelectorAll(".partial_entry")].map(item => item.textContent)
);
I have a simple image viewer webpage on gitpages but before I push the next group of images I want to condense all of my images into an array using angular.
The test I have made here uses only 4 photos that are in the same folder as every other file.(they are jpegs)
my js file is set up like this with a factory for the array and a controller.
angular.module('beamModule',[])
.factory('imageFactory', function(){
return {
getImages: function(){
return ['beam1.jpg','beam2.jpg','beam3.jpg','beam4.jpg'];
}
}
})
.controller('Photos', function(imageFactory){
this.images = imageFactory.getImages();
});
I don't think anything is wrong with this array but maybe I am overlooking something?
The HTML that I am using and the section that is giving me trouble when I check the developer tools is below.
<div class="imgcontainer" ng-controller="Photos as photosController">
<img ng-repeat="src in photosController.images"
ng-src="beamModule.js/{{images}}">
</div>
I am not sure if I am supposed to be using an ng-class attribute in the css or if there is something else that needs removed?
The developer tools are returning this value for each of the images (they are repeating just not showing)
<img ng-repeat="src in photosController.images" class="ng-scope">
Why is the ng-scope class being put in here and the ng-src is being removed?
EDIT FIXED
Ok to the person who answered so quickly and simply you are the real mvp here.
You said to change the ng-src="beamModule.js/{{images}}" to read {{src}} instead.
Once I tried this it still didnt work but then I checked the dev tools and noticed it was attempting to pull the files from the js file and not the actual file so I just changed it to this and now it works great! Thank you.
ng-src="{{src}}"
The ng-src attribute needed to point to the repeat instead of the js file.
ng-src="{{src}}"
So in app.blade.php I am including a snippet with html which is actually my footer:
</body>
#include('inc.ftr')
</html>
There are, though, specific views that I want to load without this footer, which is included automatically in every view.
Is there a way to exclude it on a view level?
There are many ways. You can check URI. For example, if you want to include the view for all requests except admin/* URIs:
#unless (request()->is('admin/*'))
#include('inc.ftr')
#endunless
Or you could check specific route names:
#unless (Route::currentRouteName() === 'some.route')
#include('inc.ftr')
#endunless