I’m trying to make a simple slide transition in sveltekit when switching between routes. The effect consist a overlay div, when route is changing, the overlay shows from bottom of the screen, it stays full screen for 1s, then moves up to reveal the next route. A library for doing this is barba.js but so… Read More It is possible to make a slide overlay page transition in sveltekit with barbajs
I’m using svelte to create a blog about cooking. I am getting data from a CMS that is returning HTML. I know that part of that html will be an unordered list. I’d like to style that list but my attempts are not working. Here is my div. Here is my css selector. And finally… Read More Svelte template syntax: How can I target nested DOM elements inside an html expression with css?
I am trying to set tailwind classes dynamically, but ran into an issue where colors defined in tailwind.config.cjs won’t be loaded if I call them from a function. Here is a simplified example. +page.svelte <script> const getTeamName = () => { return ‘team1’; }; </script> <div class={`bg-white text-teams-${getTeamName()}`}>Team 1</div> <div class={`bg-white text-teams-team2`}>Team 2</div> tailwind.config.cjs const… Read More Why am I unable to dynamically get tailwind colors from tailwind.config? (With SvelteKit)
If I have a global CSS file which defines some basic colors and fonts and all that, and include it in my top-level layout file with a simple import "$lib/assets/app.css", then how can I reference local fonts and images from within that css file, which are also in the /lib/assets folder? Currently it seems I… Read More SvelteKit: use local assets inside of global css file?
I’m looking to create a text input that formats the inputted value as the user inputs it. As the formatting function strips additional characters from the string the input value doesn’t update. A bit of a contrived example, repl link <script> let value = "[hello]" const parse = (value) => value.replace(/[\[\]&]+/g, ”); let parsed =… Read More Svelte format text input
I’m new to Svelte (and Web Dev as a whole), and I’m trying to change the value of a store from another page. The value of the store is shown on the first page, while there is a button to change the value from a separate page. However, when I hit the button, it does… Read More Svelte Stores are not updating value when updated from another page
Currently working on my first SvelteKit project. I have created a "+layout.svelte" file which uses a navbar and footer component from my lib folder. When I add content to a page, it’s currently overlapping the navbar. +layout.svelte <script> import Nav from "$lib/nav.svelte"; import Footer from "$lib/footer.svelte" </script> <body> <Nav /> <Footer /> </body> <slot></slot> <style>… Read More CSS outside of '+layout.svelte' applies to its components
I’m struggling with the latest version of SvelteKit, the docs available only works with SSR, and I’m developing SPA app (static page), so, what is the way to pass data from my +layout.svelte to +page.svelte?. The documentation says that with load function from page.js (I’ve already set the SSR=false, and I understood that page.js is… Read More SvelteKit: Pass Data From +Layout.svelte To +page.svelte SPA (static) application
I know user’s preferred language in cookie and I am able to init locales with it (using server hook). And I would like to also render correct lang attribute which matches selected locale. >Solution : There are docs on specifically that. If your content is available in multiple languages, you should set the lang attribute… Read More How to set lang attribute on <html> tag in SSR mode with SvetleKit
I have a form that is passing a string to a search page that uses that string to query an API and display results. When I submit the form, the URL is x/search/string?slug=string. I am looking for a way to keep the URL cleaner and have it be x/search/string. My form code: <script lang="ts"> let… Read More Dynamic Route Params from Form Submit