aniva/Chrysoblog
aniva
/
Chrysoblog
1
1
Fork 0
Code Issues 9 Pull Requests 2 Packages Projects Releases Wiki Activity

feat: Externalize picture and front cover paths

This commit is contained in:
Leni Aniva 2024-09-17 16:06:42 -05:00
parent e41d5b2136
commit 6a0198f6c6
Signed by: aniva
GPG Key ID: 4D9B1C8D10EA4C50
2 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/content/metadata.json
View File

@ -3,7 +3,7 @@
"blogName": "Cirno's Blog", "blogName": "Cirno's Blog",
"frontDescription": "This is a very long description.", "frontDescription": "This is a very long description.",
"frontCover": "/favicon.svg", "frontCover": "/favicon.svg",
"avatar": "/favicon.svg", "picture": "/favicon.svg",
"links": { "links": {
"github": "https://github.com", "github": "https://github.com",
"email": "cirno@gensokyo.jp", "email": "cirno@gensokyo.jp",

18
src/routes/+page.svelte
View File

@ -16,8 +16,6 @@
const { name, Content } = data; const { name, Content } = data;
import metadata from '$content/metadata.json'; import metadata from '$content/metadata.json';
const pathFrontCover = metadata.frontCover;
const pathAvatar = metadata.avatar;
const iconMap: Map<string, string> = { const iconMap: Map<string, string> = {
"bitbucket": "fa-brands fa-bitbucket", "bitbucket": "fa-brands fa-bitbucket",
"discord": "fa-brands fa-discord", "discord": "fa-brands fa-discord",
@ -39,7 +37,7 @@
<div <div
id="background" id="background"
style="opacity: {1 - progress}; background-image: url('{pathFrontCover}')" style="opacity: {1 - progress}; background-image: url('{metadata.frontCover}')"
> >
</div> </div>
@ -80,8 +78,7 @@
</div> </div>
</div> </div>
<div id="avatar"> <div id="avatar">
<img id="avatar-img" src={metadata.picture} alt={metadata.name} />
<img id="avatar-img" src={pathAvatar} alt={metadata.name} />
</div> </div>
</div> </div>
</div> </div>
@ -152,14 +149,17 @@
line-height: 0; line-height: 0;
display: inline-block; display: inline-block;
margin: 5px; margin: 5px;
border: 4px solid rgba(100,100,100,0.4);
border-radius: 50%;
margin-right: auto; margin-right: auto;
border: 4px solid theme('colors.eucalyptus.500');
border-radius: 50%;
aspect-ratio: 1;
width: 20vh;
@apply ml-auto mr-0; @apply ml-auto mr-0;
} }
#avatar-img { #avatar-img {
width: 20vh; min-height: 100%;
height: 20vh; min-width: 100%;
object-fit: cover;
border-radius: 50%; border-radius: 50%;
} }
#bio-core { #bio-core {