Skip to content

Commit

Permalink
fix: add base path to resolve links properly in gh pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@jmiguelv
jmiguelv committed Apr 19, 2024
1 parent 680b015 commit 00e8cee
Show file tree
Hide file tree
Showing 6 changed files with 332 additions and 311 deletions.
177 changes: 90 additions & 87 deletions src/lib/components/footer.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,107 +1,110 @@
<script lang="ts">
import * as config from '$lib/config';
import footerImg from '$images/footer.jpg';
import * as config from "$lib/config";
import footerImg from "$images/footer.jpg";
import * as icons from "lucide-svelte";
import * as icons from 'lucide-svelte';
import { base } from "$app/paths";
</script>

<footer>
<picture>
<img src={footerImg} alt="King's College London stamp from..." />
</picture>
<div class="layout surface-2">
<section class="links">
<a href="/" class="title">
<strong>{config.title}</strong>
</a>
<ul class="project">
{#each config.footer.links as link}
<li><a href={link.url}>{link.title}</a></li>
{/each}
</ul>
<ul class="social">
{#each config.footer.social as link}
<li>
<a href={link.url} aria-label={link.label}
><svelte:component this={icons[link.icon]} {...$$props} /></a
>
</li>
{/each}
</ul>
</section>
</div>
<div class="layout surface-3">
<section class="kdl">
<p>
Design, developed and maintained by <a href="https://kdl.kcl.ac.uk">King's Digital Lab</a>
</p>
</section>
</div>
<picture>
<img src={footerImg} alt="King's College London stamp from..." />
</picture>
<div class="layout surface-2">
<section class="links">
<a href={base} class="title">
<strong>{config.title}</strong>
</a>
<ul class="project">
{#each config.footer.links as link}
<li><a href="{base}{link.url}">{link.title}</a></li>
{/each}
</ul>
<ul class="social">
{#each config.footer.social as link}
<li>
<a href={link.url} aria-label={link.label}
><svelte:component this={icons[link.icon]} {...$$props} /></a
>
</li>
{/each}
</ul>
</section>
</div>
<div class="layout surface-3">
<section class="kdl">
<p>
Design, developed and maintained by <a href="https://kdl.kcl.ac.uk"
>King's Digital Lab</a
>
</p>
</section>
</div>
</footer>

<style>
footer {
border-top: 1px solid var(--border);
display: grid;
grid-template-rows: auto 1fr auto;
}
footer {
border-top: 1px solid var(--border);
display: grid;
grid-template-rows: auto 1fr auto;
}
picture {
align-self: stretch;
height: 100%;
overflow: hidden;
width: 100%;
}
picture {
align-self: stretch;
height: 100%;
overflow: hidden;
width: 100%;
}
.layout {
height: 100%;
padding-inline: var(--header-padding-inline);
}
.layout {
height: 100%;
padding-inline: var(--header-padding-inline);
}
.title {
font-family: var(--font-headings);
font-size: var(--font-size-4);
}
.title {
font-family: var(--font-headings);
font-size: var(--font-size-4);
}
.links {
align-items: center;
display: flex;
justify-content: space-between;
padding-block: var(--size-6);
width: 100%;
}
.links {
align-items: center;
display: flex;
justify-content: space-between;
padding-block: var(--size-6);
width: 100%;
}
.links ul {
align-items: center;
display: flex;
font-size: var(--font-size-1);
gap: var(--size-5);
}
.links ul {
align-items: center;
display: flex;
font-size: var(--font-size-1);
gap: var(--size-5);
}
.links > * {
flex: 1 1 auto;
}
.links > * {
flex: 1 1 auto;
}
.links .project * {
flex: 1 1 auto;
}
.links .project * {
flex: 1 1 auto;
}
.links .social {
justify-content: flex-end;
}
.links .social {
justify-content: flex-end;
}
.kdl {
padding-block: var(--size-4);
text-align: center;
}
.kdl {
padding-block: var(--size-4);
text-align: center;
}
.kdl p {
font-size: var(--font-size-fluid-0);
max-inline-size: none;
}
.kdl p {
font-size: var(--font-size-fluid-0);
max-inline-size: none;
}
.links ul a,
.kdl a {
text-decoration: underline;
}
.links ul a,
.kdl a {
text-decoration: underline;
}
</style>
131 changes: 67 additions & 64 deletions src/lib/components/header.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,82 +1,85 @@
<script lang="ts">
import * as config from '../config';
import kclLogo from '$images/kcl.png';
import * as config from "../config";
import kclLogo from "$images/kcl.png";
import { page } from '$app/stores';
import { base } from "$app/paths";
import { page } from "$app/stores";
</script>

<header>
<div class="layout surface-2">
<nav>
<a href="/" class="title">
<strong>{config.title}</strong>
</a>
<div class="layout surface-2">
<nav>
<a href="{base}/" class="title">
<strong>{config.title}</strong>
</a>

<ul class="links">
{#each config.nav as item}
<li>
<a href={item.url} class:active={$page.url.pathname.startsWith(item.url)}
>{item.title}</a
>
</li>
{/each}
</ul>
</nav>
<img src={kclLogo} alt="King's College London logo" />
</div>
<ul class="links">
{#each config.nav as item}
<li>
<a
href="{base}{item.url}"
class:active={$page.url.pathname.startsWith(item.url)}
>{item.title}</a
>
</li>
{/each}
</ul>
</nav>
<img src={kclLogo} alt="King's College London logo" />
</div>
</header>

<style>
header {
height: var(--header-height);
width: 100%;
}
header {
height: var(--header-height);
width: 100%;
}
.layout {
display: flex;
height: 100%;
justify-content: space-between;
padding-block: var(--header-padding-block);
padding-inline: var(--header-padding-inline);
}
.layout {
display: flex;
height: 100%;
justify-content: space-between;
padding-block: var(--header-padding-block);
padding-inline: var(--header-padding-inline);
}
nav {
display: flex;
justify-content: space-between;
margin-right: var(--size-5);
width: 100%;
}
nav {
display: flex;
justify-content: space-between;
margin-right: var(--size-5);
width: 100%;
}
.title {
font-family: var(--font-headings);
font-size: var(--font-size-5);
}
.title {
font-family: var(--font-headings);
font-size: var(--font-size-5);
}
.links {
align-items: center;
display: flex;
margin-left: auto;
gap: var(--size-5);
}
.links {
align-items: center;
display: flex;
margin-left: auto;
gap: var(--size-5);
}
a {
text-decoration: none;
}
a {
text-decoration: none;
}
img {
height: 8em;
margin-top: calc(-1 * var(--size-2));
z-index: var(--layer-1);
}
img {
height: 8em;
margin-top: calc(-1 * var(--size-2));
z-index: var(--layer-1);
}
@media (max-width: 768px) {
.title {
font-size: var(--font-size-4);
}
@media (max-width: 768px) {
.title {
font-size: var(--font-size-4);
}
img {
height: 4em;
margin-top: calc(-1 * var(--size-1));
}
}
img {
height: 4em;
margin-top: calc(-1 * var(--size-1));
}
}
</style>
Loading

0 comments on commit 00e8cee

Please sign in to comment.