wip
This commit is contained in:
@@ -1,6 +1,9 @@
|
||||
<script lang="ts">
|
||||
import favicon from '$lib/assets/favicon.svg';
|
||||
import '/node_modules/@rose-pine/palette/dist/css/rose-pine-hsl.css';
|
||||
import 'prism-rose-pine/dist/prism-rose-pine-moon.css';
|
||||
import './style.css';
|
||||
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
@@ -8,4 +11,11 @@
|
||||
<link rel="icon" href={favicon} />
|
||||
</svelte:head>
|
||||
|
||||
{@render children?.()}
|
||||
<div class="nav">
|
||||
<a class="nav" href="/">Home</a>
|
||||
<a class="nav" href="/about">About</a>
|
||||
</div>
|
||||
|
||||
<div class="main">
|
||||
{@render children?.()}
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import type { MDsveXComponent } from '$lib/types';
|
||||
import type { SvelteComponent } from 'svelte';
|
||||
import './style-entries.css';
|
||||
|
||||
const blog_entries: [string, SvelteComponent][] = Object.entries(
|
||||
import.meta.glob('/src/routes/blogs/**/+page.svx', { eager: true })
|
||||
@@ -11,9 +12,23 @@
|
||||
console.log(blog_entries);
|
||||
</script>
|
||||
|
||||
<h1>Welcome to SvelteKit</h1>
|
||||
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
|
||||
{#each blog_entries as [href, page]}
|
||||
<a {href}>{page.metadata?.title}</a><br />
|
||||
<svelte:component this={page.default} />
|
||||
{/each}
|
||||
<main>
|
||||
<h1>Welcome to SvelteKit</h1>
|
||||
<p>
|
||||
Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation
|
||||
</p>
|
||||
{#each blog_entries as [href, page]}
|
||||
<a {href}>
|
||||
<div class="blog-entry" {href}>
|
||||
<div>
|
||||
<h4>{page.metadata?.title}</h4>
|
||||
<p>{page.metadata?.desc}</p>
|
||||
<p class="date">{new Date(Date.parse(page.metadata?.date)).toDateString()}</p>
|
||||
</div>
|
||||
<img src="blog-1.png" class="blog-image" />
|
||||
</div>
|
||||
</a>
|
||||
<br />
|
||||
<!-- svelte:component this={page.default} /-->
|
||||
{/each}
|
||||
</main>
|
||||
|
||||
0
src/routes/about/+page.svelte
Normal file
0
src/routes/about/+page.svelte
Normal file
32
src/routes/blogs/blog.svelte
Normal file
32
src/routes/blogs/blog.svelte
Normal file
@@ -0,0 +1,32 @@
|
||||
<script context="module">
|
||||
import img from './img.svelte';
|
||||
export { img };
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export let title;
|
||||
export let date;
|
||||
export let desc;
|
||||
|
||||
let ddate = new Date(Date.parse(date));
|
||||
import './style-blog.css';
|
||||
</script>
|
||||
|
||||
export let alt;
|
||||
|
||||
<h1>{title}</h1>
|
||||
<main>
|
||||
<p class="date">Last updated {ddate.toDateString()}</p>
|
||||
<div class="blog-text">
|
||||
<p>{desc}</p>
|
||||
<slot>
|
||||
<!-- the mdsvex content will be slotted in here -->
|
||||
</slot>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
main {
|
||||
background-color: var(--rp-moon-surface);
|
||||
}
|
||||
</style>
|
||||
9
src/routes/blogs/img.svelte
Normal file
9
src/routes/blogs/img.svelte
Normal file
@@ -0,0 +1,9 @@
|
||||
<script lang="ts">
|
||||
export let src;
|
||||
export let alt;
|
||||
|
||||
let width;
|
||||
[alt, width = '20rem'] = alt.split('|');
|
||||
</script>
|
||||
|
||||
<img {src} style="width:{width}; max-width:100%; margin:auto; display:block" {alt} />
|
||||
10
src/routes/blogs/style-blog.css
Normal file
10
src/routes/blogs/style-blog.css
Normal file
@@ -0,0 +1,10 @@
|
||||
.blog-text{
|
||||
border-radius: 0.5rem;
|
||||
background: var(--rp-moon-surface);
|
||||
box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.85));
|
||||
margin: -1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -1,18 +1,55 @@
|
||||
---
|
||||
title: "Blog Entry #1"
|
||||
title: "The creation of this Blog"
|
||||
layout: blog
|
||||
date: 2025-09-12
|
||||
desc: "The goal was to create an easy to maintain blog with while the main focus relays on keeping the effort
|
||||
to write new posts minimal. This is more a ressource summery with tips, than an full tutorial."
|
||||
---
|
||||
|
||||
# Title
|
||||
|
||||
---
|
||||
## Static side generation
|
||||
The stack consists of:
|
||||
- [svelte + svelte-kit](https://svelte.dev/docs/kit/introduction)
|
||||
- [mdsvex](https://mdsvex.pngwn.io/)
|
||||
- [static adapter](https://svelte.dev/docs/kit/adapter-static)
|
||||
|
||||
1. asd
|
||||
2. asd
|
||||
3. asd
|
||||
The core functionallity provides which allow you to combine svelte and markdown.
|
||||
|
||||
```js
|
||||
{..., lib}:
|
||||
{
|
||||
"hello" = "world";
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## Image sizing
|
||||
|
||||
I want to be able to rezise an image in markdown without using HTML,
|
||||
just like in obsidian, by declaring the width after the alt text ``.
|
||||
To archive that I replace every img that that mdsvex creates with some new written `img` component:
|
||||
|
||||
```ts
|
||||
//img.svelte
|
||||
<script lang="ts">
|
||||
export let src;
|
||||
export let alt;
|
||||
|
||||
let width;
|
||||
[alt, width = '20rem'] = alt.split('|');
|
||||
</script>
|
||||
|
||||
<img {src} style="width:{width}; max-width:100%; margin:auto; display:block" {alt} />
|
||||
```
|
||||
|
||||
And then needs to be imported in the mdsvex layout:
|
||||
```ts
|
||||
<script context="module">
|
||||
import img from './img.svelte';
|
||||
export { img };
|
||||
</script>
|
||||
```
|
||||
|
||||
This is desctibed in furhter details by the [mdsvex docs](https://mdsvex.pngwn.io/docs#custom-components)
|
||||
and this [issue](https://github.com/pngwn/MDsveX/discussions/292).
|
||||
|
||||
## Colors
|
||||
|
||||
I love the [rose pine](https://rosepinetheme.com/) color palette. I use it privatly for some applications,
|
||||
and think it improves this blog too.
|
||||
Both the [prism theme](https://github.com/rose-pine/prism) and [color palette](https://github.com/rose-pine/rose-pine-palette)
|
||||
can be added as npm package and used without compications.
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: "FemDev GameJam - Catrastrophe"
|
||||
date: 2024-11-10
|
||||
src: "https://elkortes.itch.io/catastrophe"
|
||||
desc: "I took part in the amazing FemDev Game and helped to creathe this little game.
|
||||
My work are the animations, 3d Models and some texturing"
|
||||
---
|
||||
|
||||
0
src/routes/main.svelte
Normal file
0
src/routes/main.svelte
Normal file
47
src/routes/style-entries.css
Normal file
47
src/routes/style-entries.css
Normal file
@@ -0,0 +1,47 @@
|
||||
|
||||
.blog-entry{
|
||||
background: var(--rp-moon-surface);
|
||||
border-radius: 0.5rem;
|
||||
width:100%;
|
||||
color: var(--rp-moon-text) !important;
|
||||
text-decoration : none !important;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.85));
|
||||
}
|
||||
|
||||
|
||||
|
||||
.blog-entry:hover{
|
||||
box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.75));
|
||||
background: var(--rp-moon-overlay);
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.blog-entry div {
|
||||
width: calc(100% - 17rem);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.blog-entry img{
|
||||
width:15rem;
|
||||
object-fit: cover;
|
||||
border-radius: 0 0.5rem 0.5rem 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 700px) {
|
||||
.blog-entry div {
|
||||
width: calc( 100% - 2rem);
|
||||
}
|
||||
|
||||
.blog-entry img {
|
||||
width: 100%;
|
||||
max-height: 15rem;
|
||||
border-radius: 0 0rem 0.5rem 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.blog-entry h4{
|
||||
margin-top:0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
92
src/routes/style.css
Normal file
92
src/routes/style.css
Normal file
@@ -0,0 +1,92 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap');
|
||||
|
||||
|
||||
body {
|
||||
color: var(--rp-moon-text);
|
||||
background: var(--rp-moon-base);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: var(--rp-moon-base);
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--rp-moon-iris);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: hsl(from var(--rp-moon-iris) h s calc(l * 0.85))
|
||||
}
|
||||
|
||||
|
||||
.nav {
|
||||
margin: auto;
|
||||
margin-top: 1rem;
|
||||
|
||||
padding: 1rem;
|
||||
max-width: 60rem;
|
||||
width: calc(100% - 2rem);
|
||||
|
||||
font-family: "Fraunces", serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-variation-settings:
|
||||
"SOFT" 0,
|
||||
"WONK" 0;
|
||||
font-size:1.728rem;
|
||||
}
|
||||
|
||||
a.nav{
|
||||
margin: 1rem;
|
||||
margin-left: 0rem;
|
||||
padding-left: 0rem;
|
||||
color: var(--rp-moon-foam);
|
||||
#text-decoration: underline;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 1rem;
|
||||
margin: auto;
|
||||
#margin-top: 1rem;
|
||||
max-width: 60rem;
|
||||
width: calc(100% - 2rem);
|
||||
#box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.85));
|
||||
}
|
||||
|
||||
.date{
|
||||
text-align: right;
|
||||
color: var(--rp-moon-subtle)
|
||||
}
|
||||
|
||||
hr {
|
||||
color: var(--rp-moon-muted);
|
||||
}
|
||||
|
||||
|
||||
h1{font-size: 2.986rem}
|
||||
h2{font-size: 2.488rem}
|
||||
h3{font-size: 2.074rem}
|
||||
h4{font-size: 1.728rem}
|
||||
|
||||
h1, h2, h3, h4{
|
||||
font-family: "Fraunces", serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
text-align: left;
|
||||
font-variation-settings:
|
||||
"SOFT" 0,
|
||||
"WONK" 0;
|
||||
}
|
||||
|
||||
h4{
|
||||
color: var(--rp-moon-rose);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user