✨ add SectionContainer for all pages & layouts
This commit is contained in:
Sindre Kjelsrud
parent
693dbbda16
commit
964d609197
6 changed files with 142 additions and 175 deletions
24
src/components/SectionContainer.astro
Normal file
24
src/components/SectionContainer.astro
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
---
|
||||||
|
import BaseHead from '../components/BaseHead.astro';
|
||||||
|
import Header from '../components/Header.astro';
|
||||||
|
import Footer from '../components/Footer.astro';
|
||||||
|
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
|
||||||
|
---
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<section class="mx-auto max-w-3xl px-4 sm:px-6 xl:max-w-2xl xl:px-0">
|
||||||
|
<div class="flex flex-col justify-between h-screen">
|
||||||
|
<Header title={SITE_TITLE} />
|
||||||
|
|
||||||
|
<slot />
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -1,34 +1,26 @@
|
||||||
---
|
---
|
||||||
import type { CollectionEntry } from 'astro:content';
|
import type { CollectionEntry } from 'astro:content';
|
||||||
import BaseHead from '../components/BaseHead.astro';
|
import BaseHead from '../components/BaseHead.astro';
|
||||||
import Header from '../components/Header.astro';
|
|
||||||
import Footer from '../components/Footer.astro';
|
|
||||||
import FormattedDate from '../components/FormattedDate.astro';
|
import FormattedDate from '../components/FormattedDate.astro';
|
||||||
|
import SectionContainer from '../components/SectionContainer.astro';
|
||||||
|
|
||||||
type Props = CollectionEntry<'blog'>['data'];
|
type Props = CollectionEntry<'blog'>['data'];
|
||||||
|
|
||||||
const { title, description, pubDate } = Astro.props;
|
const { title, description, pubDate } = Astro.props;
|
||||||
---
|
---
|
||||||
|
<head>
|
||||||
|
<BaseHead title={title} description={description} />
|
||||||
|
</head>
|
||||||
|
|
||||||
<html lang="en">
|
<SectionContainer>
|
||||||
<head>
|
<main class="mb-auto break-words mt-4">
|
||||||
<BaseHead title={title} description={description} />
|
<article>
|
||||||
</head>
|
<h1 class="text-4xl font-extrabold">{title}</h1>
|
||||||
|
<p class="italic">{description}</p>
|
||||||
<body>
|
<FormattedDate date={pubDate}/>
|
||||||
<div class="flex flex-col">
|
<div class="blog">
|
||||||
<Header />
|
<slot />
|
||||||
<main class="flex flex-col items-center mx-auto mt-8">
|
</div>
|
||||||
<article class="flex flex-col mx-auto mb-32">
|
</article>
|
||||||
<h1 class="text-4xl font-extrabold">{title}</h1>
|
</main>
|
||||||
<p class="italic">{description}</p>
|
</SectionContainer>
|
||||||
<FormattedDate date={pubDate}/>
|
|
||||||
<div class="flex flex-col items-left w-full max-w-prose blog">
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</main>
|
|
||||||
<Footer />
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,26 +1,14 @@
|
||||||
---
|
---
|
||||||
import BaseHead from '../components/BaseHead.astro';
|
import SectionContainer from '../components/SectionContainer.astro';
|
||||||
import Header from '../components/Header.astro';
|
|
||||||
import Footer from '../components/Footer.astro';
|
|
||||||
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<SectionContainer>
|
||||||
<html lang="en">
|
<main class="mb-auto break-words mt-4">
|
||||||
<head>
|
<h1 class="text-4xl font-extrabold">About me</h1>
|
||||||
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
|
<p>Some information about me & stuff I like</p>
|
||||||
</head>
|
<a href="/tools">link to tools</a>
|
||||||
<body>
|
<p>
|
||||||
<div class="flex flex-col fixed w-screen">
|
sidojdjosajoidsajaiodoaisoiasdosiadjoiaskflsdmklmdfsmlkfdskmdjdoasijsadkldsanlndsalnasdnlksadnklsdnlkdoasjdoasidjaoisjdoiasjdoasijdoiasjdoaijdio flex justify-center mx-auto md:gap-64 gap-4 py-5
|
||||||
<Header title={SITE_TITLE} />
|
</p>
|
||||||
<main class="flex flex-col justify-center items-left mx-auto">
|
</main>
|
||||||
<h1 class="text-4xl font-extrabold">About me</h1>
|
</SectionContainer>
|
||||||
<p>Some information about me & stuff I like</p>
|
|
||||||
<div class="mt-4">
|
|
||||||
<a href="/tools">link to tools</a>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<Footer />
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,57 +1,44 @@
|
||||||
---
|
---
|
||||||
import BaseHead from '../../components/BaseHead.astro';
|
|
||||||
import Header from '../../components/Header.astro';
|
|
||||||
import Footer from '../../components/Footer.astro';
|
|
||||||
import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';
|
|
||||||
import { getCollection } from 'astro:content';
|
import { getCollection } from 'astro:content';
|
||||||
import FormattedDate from '../../components/FormattedDate.astro';
|
import FormattedDate from '../../components/FormattedDate.astro';
|
||||||
|
import SectionContainer from '../../components/SectionContainer.astro';
|
||||||
|
|
||||||
const posts = (await getCollection('blog')).sort(
|
const posts = (await getCollection('blog')).sort(
|
||||||
(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
|
(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
|
||||||
);
|
);
|
||||||
---
|
---
|
||||||
|
<SectionContainer>
|
||||||
|
<main class="flex flex-col h-screen gap-4 mt-4">
|
||||||
|
<h1 class="text-4xl font-extrabold">Blog posts</h1>
|
||||||
|
<section class="mt-4">
|
||||||
|
<ul>
|
||||||
|
{
|
||||||
|
posts.map((post) => (
|
||||||
|
<li>
|
||||||
|
<FormattedDate date={post.data.pubDate} />
|
||||||
|
<a href={`/blog/${post.slug}/`}>{post.data.title}</a>
|
||||||
|
</li>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</SectionContainer>
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<style>
|
||||||
<html lang="en">
|
ul {
|
||||||
<head>
|
list-style-type: none;
|
||||||
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
|
padding: unset;
|
||||||
<style>
|
}
|
||||||
ul {
|
ul li {
|
||||||
list-style-type: none;
|
display: flex;
|
||||||
padding: unset;
|
}
|
||||||
}
|
ul li :global(time) {
|
||||||
ul li {
|
flex: 0 0 130px;
|
||||||
display: flex;
|
font-style: italic;
|
||||||
}
|
color: #595959;
|
||||||
ul li :global(time) {
|
}
|
||||||
flex: 0 0 130px;
|
ul li a {
|
||||||
font-style: italic;
|
color: #815B5B;
|
||||||
color: #595959;
|
}
|
||||||
}
|
</style>
|
||||||
ul li a {
|
|
||||||
color: #815B5B;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="flex flex-col fixed w-screen">
|
|
||||||
<Header />
|
|
||||||
<main class="flex flex-col justify-center items-left mx-auto">
|
|
||||||
<h1 class="text-4xl font-extrabold">Blog posts</h1>
|
|
||||||
<section class="mt-4">
|
|
||||||
<ul>
|
|
||||||
{
|
|
||||||
posts.map((post) => (
|
|
||||||
<li>
|
|
||||||
<FormattedDate date={post.data.pubDate} />
|
|
||||||
<a href={`/blog/${post.slug}/`}>{post.data.title}</a>
|
|
||||||
</li>
|
|
||||||
))
|
|
||||||
}
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
<Footer />
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -3,51 +3,40 @@ import BaseHead from '../components/BaseHead.astro';
|
||||||
import Header from '../components/Header.astro';
|
import Header from '../components/Header.astro';
|
||||||
import Footer from '../components/Footer.astro';
|
import Footer from '../components/Footer.astro';
|
||||||
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
|
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
|
||||||
|
import SectionContainer from '../components/SectionContainer.astro';
|
||||||
---
|
---
|
||||||
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
|
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
|
||||||
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
|
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
|
||||||
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
|
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
|
||||||
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
|
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<SectionContainer>
|
||||||
<html lang="en">
|
<main class="flex flex-col justify-center items-center h-screen gap-4 description">
|
||||||
<head>
|
<div class="profile"></div>
|
||||||
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
|
<h1 class="text-3xl font-bold">Sindre Kjelsrud</h1>
|
||||||
</head>
|
<p>Student at Western University of Applied Sciences.</p>
|
||||||
<body>
|
<div class="flex gap-1 social">
|
||||||
<div class="flex flex-col fixed w-screen">
|
<a href="https://www.linkedin.com/in/sindre-kjelsrud-345583218/">
|
||||||
<Header title={SITE_TITLE} />
|
<iconify-icon icon="lucide:linkedin" width="30" height="30" />
|
||||||
<main class="flex flex-col justify-center items-center text-center pt-48 description gap-4">
|
</a>
|
||||||
<div class="profile"></div>
|
<a href="https://github.com/SindreKjelsrud">
|
||||||
<h1 class="text-3xl font-bold">Sindre Kjelsrud</h1>
|
<iconify-icon icon="ri:github-line" width="30" height="30" />
|
||||||
<p class="md:max-w">
|
</a>
|
||||||
Student at Western University of Applied Sciences.
|
<a href="https://www.instagram.com/SindreKjelsrud/">
|
||||||
</p>
|
<iconify-icon icon="mdi:instagram" width="30" height="30" />
|
||||||
<div class="flex gap-1 social">
|
</a>
|
||||||
<a href="https://www.linkedin.com/in/sindre-kjelsrud-345583218/">
|
<a href="https://open.spotify.com/user/kjelsrud!">
|
||||||
<iconify-icon icon="lucide:linkedin" width="30" height="30" />
|
<iconify-icon icon="mdi:spotify" width="30" height="30" />
|
||||||
</a>
|
</a>
|
||||||
<a href="https://github.com/SindreKjelsrud">
|
|
||||||
<iconify-icon icon="ri:github-line" width="30" height="30" />
|
|
||||||
</a>
|
|
||||||
<a href="https://www.instagram.com/SindreKjelsrud/">
|
|
||||||
<iconify-icon icon="mdi:instagram" width="30" height="30" />
|
|
||||||
</a>
|
|
||||||
<a href="https://open.spotify.com/user/kjelsrud!">
|
|
||||||
<iconify-icon icon="mdi:spotify" width="30" height="30" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<Footer />
|
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</main>
|
||||||
</html>
|
</SectionContainer>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.profile {
|
.profile {
|
||||||
width: 10rem;
|
width: 10rem;
|
||||||
height: 10rem;
|
height: 10rem;
|
||||||
background: url("../../public/assets/pb.jpg");
|
background: url("../../assets/pb.jpg");
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
border-radius: 9999px;
|
border-radius: 9999px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,51 +1,38 @@
|
||||||
---
|
---
|
||||||
import BaseHead from '../components/BaseHead.astro';
|
import stackData from '../../data/tools.json'
|
||||||
import Header from '../components/Header.astro';
|
import SectionContainer from '../components/SectionContainer.astro';
|
||||||
import Footer from '../components/Footer.astro';
|
|
||||||
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
|
|
||||||
import stackData from '../../public/data/tools.json'
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<SectionContainer>
|
||||||
<html lang="en">
|
<main class="flex flex-col justify-center items-left mx-auto pt-8">
|
||||||
<head>
|
<h1 class="text-2xl">Tools</h1>
|
||||||
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
|
<p>Tools I use everyday (or at least most days)</p>
|
||||||
</head>
|
<ul class="pt-2">
|
||||||
<body>
|
{stackData.map((data) =>
|
||||||
<div class="flex flex-col fixed w-screen p-5">
|
<div class="p-2 mb-4 cards">
|
||||||
<Header title={SITE_TITLE} />
|
<ul>
|
||||||
<main class="flex flex-col justify-center items-left mx-auto pt-8">
|
<a
|
||||||
<h1 class="text-2xl">Tools</h1>
|
href={data.link}
|
||||||
<p>Tools I use everyday (or at least most days)</p>
|
class="flex gap-2"
|
||||||
<ul class="pt-2">
|
>
|
||||||
{stackData.map((data) =>
|
<img src={data.icon} class="w-20 h-20" />
|
||||||
<div class="p-2 mb-4 cards">
|
<div class="flex flex-col">
|
||||||
<ul>
|
<p>
|
||||||
<a
|
{data.name}
|
||||||
href={data.link}
|
</p>
|
||||||
class="flex gap-2"
|
<div class="description">
|
||||||
>
|
<p>{data.description}</p>
|
||||||
<img src={data.icon} class="w-20 h-20" />
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<p>
|
|
||||||
{data.name}
|
|
||||||
</p>
|
|
||||||
<div class="description">
|
|
||||||
<p>{data.description}</p>
|
|
||||||
</div>
|
|
||||||
<div class="tag">
|
|
||||||
<button class="flex auto border-solid border-2 px-1 rounded-md text-sm">
|
|
||||||
#{data.tag}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
<div class="tag">
|
||||||
</ul>
|
<button class="flex auto border-solid border-2 px-1 rounded-md text-sm">
|
||||||
</div>
|
#{data.tag}
|
||||||
)}
|
</button>
|
||||||
</ul>
|
</div>
|
||||||
</main>
|
</div>
|
||||||
<Footer />
|
</a>
|
||||||
</div>
|
</ul>
|
||||||
</body>
|
</div>
|
||||||
</html>
|
)}
|
||||||
|
</ul>
|
||||||
|
</main>
|
||||||
|
</SectionContainer>
|
||||||
Loading…
Add table
Reference in a new issue