I'm completely new to Svelte; I actually started with some documentation and ChatGPT!
I created a blog using QWER and added a section for my certificates. However, when I navigate from the my-certificates section to other sections (e.g., about), a large gap appears before the content! (Reloading the page fixes the issue; it only happens when navigating from the certificates section to other sections).
The index.md
file is converted to .svelte
using this code > processFile.js
.
How can I fix this bug?
My code (from the my-certificates
folder > index.md
):
---title: "My Certificates"published: "2024-06-03T19:35:46.000+08:00"---<script> const images = [ { src: '/my_certs/cert1.png', caption: 'cert1-caption', link: 'https://issuer.com/verify/123' }, ... ]function handleImageClick(event) { event.stopPropagation(); }</script><style> .gallery { display: flex; flex-wrap: wrap; gap: 10px; } .gallery-item { position: relative; width: calc(25% - 10px); /* Four columns with 10px gap */ box-sizing: border-box; } .image-container { position: relative; width: 100%; } .gallery-item img { width: 100%; height: auto; display: block; transition: filter 0.3s ease; } .gallery-item:hover img { filter: blur(5%); } .icon-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; /* Default opacity of icon */ opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .gallery-item:hover .icon-overlay { opacity: 1; pointer-events: all; } .gallery-item:hover .icon-overlay a { opacity: 0.70; /* Increase opacity of icon on hover */ } .icon-overlay a { font-size: 24px; color: white; text-decoration: none; background-color: rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 50%; /* Default opacity of icon link */ opacity: 0.5; } .caption { text-align: center; margin-top: 5px; } @media (max-width: 768px) { .gallery-item { width: calc(50% - 10px); } } @media (max-width: 480px) { .gallery-item { width: calc(100% - 10px); } }</style><div class="gallery"> {#each images as { src, caption, link }}<div class="gallery-item"><div class="image-container"> {#if link !== ''}<button class="icon-overlay" aria-label="Opens the link to certificate" on:click|stopPropagation={() => handleImageClick(event)} on:keypress={(event) => { if(event.key === 'Enter') handleImageClick(event); }} tabindex="0" style="all: unset; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"><a href={link} target="_blank" rel="noopener noreferrer">🔗</a></button> {/if}<ImgZoom src={src} alt={caption} class="h-full object-cover" /></div><div class="caption">{@html caption}</div></div> {/each}</div>