I have a different layout I need for ./routes/login pages...I'm trying to ignore the main ./routes/__layout.svelte file as I dont' need the sidebar.
<script>
import NavBar from '../components/NavBar.svelte';
</script>
<main>
{#if segment === 'login'}
<section>
<slot />
</section>
{:else}
<NavBar />
<section>
<slot />
</section>
{/if}
</main>
<style>
main {
display: flex;
justify-content: flex-start;
}
section {
padding: 2.4rem;
width: 100%;
background-color: #f2f6fa;
}
</style>
I get an error segment is not defined.
The answer I have provided does not work as of October 2022 because of the recent overhaul of the routing system. Please refer to the next answer.
Why not just reset the layout, this is builtin for sveltekit. Just create a file named __layout-foo.svelte inside your /routes routes. Then you can put all the components you want inside the file
https://kit.svelte.dev/docs/layouts#named-layouts
Then address it in your page:
src/routes/my-special-page#foo.svelte
<h1>I am inside __layout-foo</h1>
As of Oct 2022 the accepted answer no longer works, as Named Layouts have been deprecated in favour of Advanced Layouts (https://kit.svelte.dev/docs/advanced-routing#advanced-layouts).
You can group the login route with a directory whose name is wrapped in parentheses, then add a separate layout for pages in this group:
src/routes/
│ (app)/
│ ├ dashboard/
│ ├ item/
│ └ +layout.svelte
│ (marketing)/
│ ├ about/
│ ├ testimonials/
│ └ +layout.svelte
├ admin/
└ +layout.svelte
Group directories don't affect the URL pathname of the routes inside them.
Related
import styled from 'styled-components';
import bannerImage from '../img/bannerImage.jpg';
console.log(bannerImage);
const StyledBanner = styled.div`
margin-top: 55px;
width: 100%;
height: 20px;
background-color: red;
`;
function Banner() {
return (
<StyledBanner>
{/* <img src={`http://github.com/someprofile.png`} /> */}
<img src={require("../img/bannerImage.jpg")} />
<img src={bannerImage} />
</StyledBanner>
);
};
export default Banner;
I have this React Component that I am trying to return a local image, but this image never loads, it show the image is there but it is always broke.
I tried using require method and also the import but nothing works.
When it is an external image it works fine, only when it is local it doesnt work.
Could you please advise me how to correct this issue?
The final element that comes out of this is a DIV and those 2 images there appear as broken images, but if I change the src to a online picture it works fine.
<div class="sc-eDvSVe YFPxO">
<img src="[object Module]">
<img src="[object Object]">
</div>
I think the fix is going to be to use require("../img/bannerImage.jpg").default, because require returns an object with a default property that you have to access.
Example from an old project of mine:
If I set my state like this:
setProfileImg(require("../images/" + res.data.profileImg));
it has the value of this object:
{
"default": "/static/media/1640086164286.e03de477.png"
}
And so by using .default I access the actual image path I want.
i have a sidebar that will disappear on a width of 992px and below using the following media query :
#media only screen and (max-width: 992px) {
.sideBar {
display: none;
}
}
while mobile nav icon also appear through the following code:
<nav class="mobileNav">
<div class="navLink" href="#">
<div></div>
<div></div>
<div></div>
</div>
</nav>
#media only screen and (max-width: 992px) {
.mobileNav {
display: flex;
}
}
now when i click on this nav , sidebar should appear and disappear, so i made the following state :
const [showSidebar, setShowSidebar] = useState(true);
and modified the following code :
{showSidebar ? (
<div className="sideBar">
<SidebarComponent />
</div>
) : null}
and added onClick function to modify the state :
<nav class="mobileNav" onClick={() => setState(!state)>
...
</nav>
when user clicks on nav element, it indeed changes the state, but sidebar will not appear because of the css media query :
#media only screen and (max-width: 992px) {
.sideBar {
display: none;
}
}
so how can i make the state override the media query, or how to solve it in a better way ?
You should aim to use either CSS OR JS for your solution rather than both.
So you can have the sidebar always in the DOM but use CSS to hide/move it off screen and then all the control is in the CSS.
Or you can hide and reveal the sidebar/nav in JS based on screen/window width but this will require you create an event listener so that every time the user adjusts the windows size you check again if you should hide or reveal the sidebar/nav.
Also instead of using your media query on ".sidebar" add an additional class such as "sidebar--active" or similar and then use JS to add/remove the classname as needed and the css to hide or reveal it.
The Goal: I have a Next JS website with lots of pages. Some pages will have specific OG Share images for that page for Facebook etc. but some won't have specific images and will just use a generic or globally set share image.
The Problem: Setting a global share image within _app.js works great and gives every page a share image. Setting a share image for a specific page also works and adds a OG Image tag in Head. The problem now is there are two tags for an image, the global one and page specific one. Obviously Facebook doesn't know which one is best and just uses the first (global) one.
Possible Solutions:
Currently I have removed the global tags and will be setting each page individually which isn't ideal. It would be nice to know a page will always have a share image as a fallback.
When adding a page specific image tag overwrite/remove the globally set one.
Position the page specific image tag above the global tag in Head.
Somehow only add the global tag if a page specific tag isn't found.
Would love know if anyone has had the same issue and what you did!
To prevent duplicate tags, give each meta tag a key as explained here in the documentation. When you do this, Next will prioritize them as your pages load and only include the one from the page, or if none exists on the page with that key, then it will fall back to the one in _app.js.
Consider the following pages:
// pages/_app.js
import Head from 'next/head'
function MyApp({ Component, pageProps }) {
return (
<div>
<Head>
<meta property="og:title" content="Our Company Website" key="title" />
</Head>
<Component {...pageProps} />
</div>
)
}
// pages/about.js
import Head from 'next/head'
export default function AboutPage() {
return (
<div>
<Head>
<meta property="og:title" content="About Us" key="title" />
</Head>
<p>Learn about us</p>
</div>
)
}
// pages/contact.js
import Head from 'next/head'
export default function ContactPage() {
return (
<div>
<p>Send us an email</p>
</div>
)
}
In the above structure, the "contact" page will fallback to and show the "Our Company Website" meta tag found in _app.js because it does not have a meta tag of its own with the same key but the "about" page will have the "About Us" meta tag because it has the title key meta tag which will take priority over the one in _app.js.
I m developing angularJs single page app. Currently my app have four kind of user (guest, student, Instructor, admin). I want to shown different dashboard for each user role mean i want to show different theme for each user. How can i do this in a single page app.
I have seen this" AngularJS switch css theme on user selection
" but i couldn't able to understand the idea.
You can create a single css file having 4 parent classes
.guest, .student, .instructor and .admin
Now in your app use ng-class in your parent div, see syntax below
<div ng-class="{class1 : expression1, class2 : expression2}">
Hello World!
</div>
Let say userType holds the value of the type of user logged in, then
<body ng-class="{guest : userType===guest, student : userType===student, instructor : userType===instructor, admin : userType===admin}">
Hello World!
</body>
OR you can use the if else conditions as
<div ng-class=" ... ? 'class-1' : ( ... ? 'class-2' : 'class-3')">
The simplest way is to develop one css file that will be responsible for layout and basic styling, like:
.component1 {
display: inline-block;
width: 10%;
border-radius: 5px;
}
Then in separate css files develop the styles for specific user, like so:
.theme1 .component1 {
color: red;
background: gray;
}
Another theme like so:
.theme2 .component2 {
color: green;
background: blue;
}
And the last step is to add on tag ng-class="{'theme1': userType== 'instructor', 'theme2': userType =='admin'...}".
That's basically what the question you mentioned explains.
I try to render a raw html (email). This html has an image.
<img src="http://www.gstatic.com/android/market_images/email/play_hydra_logo_email.png" alt="Google Play" style="border:none">
Live demo, showing image
But when I use dangerouslySetInnerHTML, the image is not rendered.
Live demo, not showing image
render() {
const content = `
<img src="http://www.gstatic.com/android/market_images/email/play_hydra_logo_email.png" alt="Google Play" style="border:none">
`;
return (
<div dangerouslySetInnerHTML={{__html: content}} />
);
}
How can I render it correctly? Thanks
UPDATE: I found if I change the image source to https, it will work.
Unfortunately, I don't have the control of the raw html, it is from email. How can I render image with url http?
It shows the error:
Mixed Content: The page at 'https://example.com' was loaded over
HTTPS, but requested an insecure resource
'http://www.gstatic.com/android/market_images/email/play_hydra_logo_email.png'.
This request has been blocked; the content must be served over HTTPS.
From the conversation in the comments, this appears to be linked to JSFiddle and possibly its use of iframes combined with requesting http resources from a https page.
Following the gnudi's reference, the RFC 3986 section 5.2 says:
If the scheme component is defined, indicating that the reference
starts with a scheme name, then the reference is interpreted as an
absolute URI and we are done. Otherwise, the reference URI's scheme is
inherited from the base URI's scheme component.
class App extends React.Component {
render() {
return (
<div>
<img src='//gstatic.com/android/market_images/email/play_hydra_logo_email.png' alt="Google Play"
style={{border: 'none'}}/>
</div>
);
}
}
ReactDOM.render(
<App />,
document.body
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="react"></div>