Amy/Blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: added rose pine theme from prism syntax

Browse Source
This commit is contained in:
Amy Retzerau
2025-09-10 12:21:53 +02:00
parent 21da2114ac
commit eb4fe3b595
16 changed files with 567 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
2 Normal file
View File

@@ -0,0 +1,135 @@
@import '/node_modules/@rose-pine/palette/dist/css/rose-pine-hsl.css';
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap');
.fraunces-me {
}
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: 2rem;
max-width: 60rem;
width: calc(100%-4rem);
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-text);
}
.main {
background: var(--rp-moon-surface);
padding: 1rem;
margin: auto;
margin-top: 1rem;
max-width: 60rem;
width: calc(100%-4rem);
box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.85));
border-radius: 0.5rem;
}
hr {
color: var(--rp-moon-muted);
}
.blog-entry{
background: var(--rp-moon-overlay);
padding-left: 0.5rem;
border-radius: 0.5rem;
#display: block;
#height:10rem;
width:100%;
color: var(--rp-moon-text) !important;
text-decoration : none !important;
display: flex;
}
.blog-entry:hover{
box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-surface) h s calc(l * 0.85));
transition: 0.15s;
}
.blog-entry div {
width: calc(100% - 15rem);
min-width: 20rem;
}
.blog-entry img{
#height:100%;
width:15rem;
object-fit: cover;
border-radius: 0 0.5rem 0.5rem 0;
}
@media only screen and (max-width: 600px) {
.blog-entry div {
width: 100%;
}
.blog-entry img {
width: 100%;
}
}
.blog-entry h4{
margin-top:1rem;
}
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;
}

165
package-lock.json generated
View File

@@ -7,6 +7,11 @@
"": {
"name": "blog",
"version": "0.0.1",
"dependencies": {
"@rose-pine/palette": "github:rose-pine/rose-pine-palette",
"prism-rose-pine": "github:rose-pine/prism#main",
"svelte-preprocess": "^6.0.3"
},
"devDependencies": {
"@eslint/compat": "^1.2.5",
"@eslint/js": "^9.18.0",
@@ -698,7 +703,6 @@
"version": "0.3.13",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
"integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.5.0",
@@ -709,7 +713,6 @@
"version": "2.3.5",
"resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
"integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/gen-mapping": "^0.3.5",
@@ -720,7 +723,6 @@
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6.0.0"
@@ -730,14 +732,12 @@
"version": "1.5.5",
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
"integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
"dev": true,
"license": "MIT"
},
"node_modules/@jridgewell/trace-mapping": {
"version": "0.3.30",
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.30.tgz",
"integrity": "sha512-GQ7Nw5G2lTu/BtHTKfXhKHok2WGetd4XYcVKGx00SjAk8GMwgJM3zr6zORiPGuOE+/vkc90KtTosSSvaCjKb2Q==",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/resolve-uri": "^3.1.0",
@@ -1083,6 +1083,17 @@
"win32"
]
},
"node_modules/@rose-pine/palette": {
"version": "4.0.1",
"resolved": "git+ssh://git@github.com/rose-pine/rose-pine-palette.git#20998b7abfc40a47d73586140e01d71f53e7e405",
"license": "MIT",
"engines": {
"node": ">=16"
},
"funding": {
"url": "https://github.com/rose-pine/palette?sponsor=1"
}
},
"node_modules/@standard-schema/spec": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.0.0.tgz",
@@ -1094,7 +1105,6 @@
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.5.tgz",
"integrity": "sha512-IwQk4yfwLdibDlrXVE04jTZYlLnwsTT2PIOQQGNLWfjavGifnk1JD1LcZjZaBTRcxZu2FfPfNLOE04DSu9lqtQ==",
"dev": true,
"license": "MIT",
"peerDependencies": {
"acorn": "^8.9.0"
@@ -1121,9 +1131,9 @@
}
},
"node_modules/@sveltejs/kit": {
"version": "2.37.1",
"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.37.1.tgz",
"integrity": "sha512-4T9rF2Roe7RGvHfcn6+n92Yc2NF88k7ljFz9+wE0jWxyencqRpadr2/CvlcQbbTXf1ozmFxgMO6af+qm+1mPFw==",
"version": "2.38.0",
"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.38.0.tgz",
"integrity": "sha512-iLmykJOv4PAZvuC0niq1HUoK/LZdfsTW1CpkPAAnroYeYiV7Bp73Eeh/As8u0Y1n/2IDM+p9cdoHYufcpvkXkQ==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -1209,7 +1219,6 @@
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
"integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
"dev": true,
"license": "MIT"
},
"node_modules/@types/json-schema": {
@@ -1498,7 +1507,6 @@
"version": "8.15.0",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
"dev": true,
"license": "MIT",
"bin": {
"acorn": "bin/acorn"
@@ -1561,7 +1569,6 @@
"version": "5.3.2",
"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
"integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
"dev": true,
"license": "Apache-2.0",
"engines": {
"node": ">= 0.4"
@@ -1571,7 +1578,6 @@
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
"integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
"dev": true,
"license": "Apache-2.0",
"engines": {
"node": ">= 0.4"
@@ -1655,7 +1661,6 @@
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6"
@@ -1968,7 +1973,6 @@
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
"integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==",
"dev": true,
"license": "MIT"
},
"node_modules/espree": {
@@ -2006,7 +2010,6 @@
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/esrap/-/esrap-2.1.0.tgz",
"integrity": "sha512-yzmPNpl7TBbMRC5Lj2JlJZNPml0tzqoqP5B1JXycNUwtqma9AKCO0M2wHrdgsHcy1WRW7S9rJknAMtByg3usgA==",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.4.15"
@@ -2320,7 +2323,6 @@
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
"integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/estree": "^1.0.6"
@@ -2412,7 +2414,7 @@
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
"integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
"dev": true,
"devOptional": true,
"license": "MIT",
"engines": {
"node": ">=10"
@@ -2422,7 +2424,6 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
"dev": true,
"license": "MIT"
},
"node_modules/locate-path": {
@@ -2452,7 +2453,6 @@
"version": "0.30.19",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.19.tgz",
"integrity": "sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.5.5"
@@ -2557,7 +2557,7 @@
"version": "3.3.11",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
"integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
"dev": true,
"devOptional": true,
"funding": [
{
"type": "github",
@@ -2666,7 +2666,7 @@
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
"dev": true,
"devOptional": true,
"license": "ISC"
},
"node_modules/picomatch": {
@@ -2686,7 +2686,7 @@
"version": "8.5.6",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
"integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
"dev": true,
"devOptional": true,
"funding": [
{
"type": "opencollective",
@@ -2715,7 +2715,7 @@
"version": "3.1.4",
"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
"integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
"dev": true,
"devOptional": true,
"license": "MIT",
"dependencies": {
"lilconfig": "^2.0.5",
@@ -2745,7 +2745,7 @@
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
"integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
"dev": true,
"devOptional": true,
"license": "ISC",
"engines": {
"node": ">= 6"
@@ -2856,6 +2856,45 @@
"svelte": "^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0"
}
},
"node_modules/prism-rose-pine": {
"version": "0.0.0",
"resolved": "git+ssh://git@github.com/rose-pine/prism.git#df6985ddb1e34ba12965552b7040cae9cbd97493",
"license": "MIT",
"dependencies": {
"@rose-pine/palette": "^2.1.0",
"prettier": "^2.3.2"
},
"engines": {
"node": ">=12"
}
},
"node_modules/prism-rose-pine/node_modules/@rose-pine/palette": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/@rose-pine/palette/-/palette-2.1.0.tgz",
"integrity": "sha512-CVts9RNQU2wCn5rnWJ3QVlLQdjbxJktoGT+U5K8k+9HDgmC8n25C+QjrQ8l4XNTPCl1YzKCdpTy7H8qHutkC5w==",
"license": "MIT",
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/rose-pine/palette?sponsor=1"
}
},
"node_modules/prism-rose-pine/node_modules/prettier": {
"version": "2.8.8",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
"integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
"license": "MIT",
"bin": {
"prettier": "bin-prettier.js"
},
"engines": {
"node": ">=10.13.0"
},
"funding": {
"url": "https://github.com/prettier/prettier?sponsor=1"
}
},
"node_modules/prism-svelte": {
"version": "0.4.7",
"resolved": "https://registry.npmjs.org/prism-svelte/-/prism-svelte-0.4.7.tgz",
@@ -3079,7 +3118,7 @@
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
"dev": true,
"devOptional": true,
"license": "BSD-3-Clause",
"engines": {
"node": ">=0.10.0"
@@ -3115,7 +3154,6 @@
"version": "5.38.7",
"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.38.7.tgz",
"integrity": "sha512-1ld9TPZSdUS3EtYGQzisU2nhwXoIzNQcZ71IOU9fEmltaUofQnVfW5CQuhgM/zFsZ43arZXS1BRKi0MYgUV91w==",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/remapping": "^2.3.4",
@@ -3190,6 +3228,61 @@
}
}
},
"node_modules/svelte-preprocess": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-6.0.3.tgz",
"integrity": "sha512-PLG2k05qHdhmRG7zR/dyo5qKvakhm8IJ+hD2eFRQmMLHp7X3eJnjeupUtvuRpbNiF31RjVw45W+abDwHEmP5OA==",
"hasInstallScript": true,
"license": "MIT",
"engines": {
"node": ">= 18.0.0"
},
"peerDependencies": {
"@babel/core": "^7.10.2",
"coffeescript": "^2.5.1",
"less": "^3.11.3 || ^4.0.0",
"postcss": "^7 || ^8",
"postcss-load-config": ">=3",
"pug": "^3.0.0",
"sass": "^1.26.8",
"stylus": ">=0.55",
"sugarss": "^2.0.0 || ^3.0.0 || ^4.0.0",
"svelte": "^4.0.0 || ^5.0.0-next.100 || ^5.0.0",
"typescript": "^5.0.0"
},
"peerDependenciesMeta": {
"@babel/core": {
"optional": true
},
"coffeescript": {
"optional": true
},
"less": {
"optional": true
},
"postcss": {
"optional": true
},
"postcss-load-config": {
"optional": true
},
"pug": {
"optional": true
},
"sass": {
"optional": true
},
"stylus": {
"optional": true
},
"sugarss": {
"optional": true
},
"typescript": {
"optional": true
}
}
},
"node_modules/tinyglobby": {
"version": "0.2.15",
"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -3260,7 +3353,7 @@
"version": "5.9.2",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.2.tgz",
"integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
"dev": true,
"devOptional": true,
"license": "Apache-2.0",
"bin": {
"tsc": "bin/tsc",
@@ -3503,21 +3596,6 @@
"node": ">=0.10.0"
}
},
"node_modules/yaml": {
"version": "2.8.1",
"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz",
"integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==",
"dev": true,
"license": "ISC",
"optional": true,
"peer": true,
"bin": {
"yaml": "bin.mjs"
},
"engines": {
"node": ">= 14.6"
}
},
"node_modules/yocto-queue": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
@@ -3535,7 +3613,6 @@
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz",
"integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==",
"dev": true,
"license": "MIT"
}
}

5
package.json
View File

@@ -32,5 +32,10 @@
"typescript": "^5.0.0",
"typescript-eslint": "^8.20.0",
"vite": "^7.0.4"
},
"dependencies": {
"@rose-pine/palette": "github:rose-pine/rose-pine-palette",
"prism-rose-pine": "github:rose-pine/prism#main",
"svelte-preprocess": "^6.0.3"
}
}

12
src/routes/+layout.svelte
View File

@@ -1,5 +1,8 @@
<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>

27
src/routes/+page.svelte
View File

@@ -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
View File

32
src/routes/blogs/blog.svelte Normal file
View 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
View 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
View 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;
}

61
src/routes/blogs/test/+page.svx
View File

@@ -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";
}
```
![Tasd|20rem](/blog-1.png)
## 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 `![some alt text|<width>](/some-image.png)`.
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.

7
src/routes/blogs/test2/+page.svx
View File

@@ -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
View File

47
src/routes/style-entries.css Normal file
View 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
View 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);
}

BIN
static/blog-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

44
svelte.config.js
View File

@@ -2,24 +2,36 @@ import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
import { mdsvex } from 'mdsvex';
import { join, dirname } from 'path';
import { fileURLToPath } from 'url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const path_to_layout = join(__dirname, './src/routes/blogs/blog.svelte');
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://svelte.dev/docs/kit/integrations
// for more information about preprocessors
preprocess: [vitePreprocess(), mdsvex()],
kit: {
// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
// See https://svelte.dev/docs/kit/adapters for more information about adapters.
adapter: adapter({
pages: 'build',
assets: 'build',
fallback: undefined,
precompress: false,
strict: true
})
},
extensions: ['.svelte', '.svx']
// Consult https://svelte.dev/docs/kit/integrations
// for more information about preprocessors
preprocess: [vitePreprocess(), mdsvex({
layout: {
blog: path_to_layout
}
})],
kit: {
// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
// See https://svelte.dev/docs/kit/adapters for more information about adapters.
adapter: adapter({
pages: 'build',
assets: 'build',
fallback: undefined,
precompress: false,
strict: true
})
},
extensions: ['.svelte', '.svx']
};
export default config;