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

feat: Links in bio page

This commit is contained in:
Leni Aniva 2024-09-14 18:06:29 -07:00
parent f4abf5901f
commit 5c51e7acb7
Signed by: aniva
GPG Key ID: 4D9B1C8D10EA4C50
12 changed files with 114 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
package-lock.json generated
View File

@ -8,6 +8,7 @@
"name": "chrysoblog", "name": "chrysoblog",
"version": "0.0.1", "version": "0.0.1",
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-free": "^6.6.0",
"bits-ui": "^0.21.13", "bits-ui": "^0.21.13",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"tailwind-merge": "^2.5.2", "tailwind-merge": "^2.5.2",
@ -567,6 +568,15 @@
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.7.tgz", "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.7.tgz",
"integrity": "sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA==" "integrity": "sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA=="
}, },
"node_modules/@fortawesome/fontawesome-free": {
"version": "6.6.0",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.6.0.tgz",
"integrity": "sha512-60G28ke/sXdtS9KZCpZSHHkCbdsOGEhIUGlwq6yhY74UpTiToIh8np7A8yphhM4BWsvNFtIvLpi4co+h9Mr9Ow==",
"license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)",
"engines": {
"node": ">=6"
}
},
"node_modules/@humanwhocodes/module-importer": { "node_modules/@humanwhocodes/module-importer": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz", "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",

1
package.json
View File

@ -42,6 +42,7 @@
}, },
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-free": "^6.6.0",
"bits-ui": "^0.21.13", "bits-ui": "^0.21.13",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"tailwind-merge": "^2.5.2", "tailwind-merge": "^2.5.2",

1
src/app.css
View File

@ -1,4 +1,5 @@
@import url(./style/content.css); @import url(./style/content.css);
@import '@fortawesome/fontawesome-free/css/all.min.css';
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;

2
src/app.html
View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover" class="font-serif">
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>
</body> </body>
</html> </html>

6
src/content/home.md
View File

@ -10,8 +10,10 @@ Strongest of Gensokyo
## Publications ## Publications
* Perfect Math Class 1. Perfect Math Class
* おてんば恋娘 2. おてんば恋娘
[Arch Wiki](https://archlinux.org)
# Projects # Projects

9
src/content/metadata.json
View File

@ -3,5 +3,12 @@
"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" "avatar": "/favicon.svg",
"links": {
"github": "https://github.com",
"email": "cirno@gensokyo.jp",
"orcid": "cirno",
"instagram": "@",
"open-source": "unknown"
}
} }

7
src/content/post/placeholder1.md
View File

@ -10,3 +10,10 @@ Here is some placeholder text
### 3rd level heading ### 3rd level heading
#### 4th level heading #### 4th level heading
> This is a quote
```python
for i in range(9):
print("this is python")
```

14
src/routes/+layout.svelte
View File

@ -24,16 +24,23 @@
<style> <style>
:global(a) { :global(a) {
font-weight: 500;
color: theme('colors.eucalyptus.400'); color: theme('colors.eucalyptus.400');
&:hover,
&:focus {
color: theme('colors.java.500');
}
}
:global(a):not(.icon) {
font-weight: 500;
text-decoration: inherit; text-decoration: inherit;
font-family: serif; font-family: serif;
position: relative;
&::after { &::after {
content: ""; content: "";
display: block; display: block;
width: 100%; width: 100%;
position: relative; position: absolute;
height: 2px; height: 2px;
bottom: 0; bottom: 0;
left: 0; left: 0;
@ -46,10 +53,9 @@
&:focus { &:focus {
&::after { &::after {
content: ""; content: "";
position: relative; position: absolute;
transform: scaleX(1); transform: scaleX(1);
} }
color: theme('colors.java.500');
} }
} }
#navbar { #navbar {

51
src/routes/+page.svelte
View File

@ -16,6 +16,16 @@
const { name, Content } = data; const { name, Content } = data;
import metadata from '$content/metadata.json'; import metadata from '$content/metadata.json';
const iconMap: Map<string, string> = {
"github": "fa-brands fa-github",
"open-source": "fa-brands fa-osi",
"orcid": "fa-brands fa-orcid",
"instagram": "fa-brands fa-instagram",
"email": "fa-solid fa-envelope",
};
console.log(metadata.links);
const iconLinks: [string, string][] = Object.entries(metadata.links).map(
([key, link]) => [iconMap[key], link]);
</script> </script>
<svelte:head> <svelte:head>
@ -47,18 +57,28 @@
</div> </div>
</div> </div>
</div> </div>
<div id="bio" class="bg-white dark:bg-gray-900" style="">
<div class="p-1"> <div id="main">
<div class="flex"> <div id="bio" class="bg-white dark:bg-gray-900" style="">
<p id="bio-name">{name}</p> <div class="p-1">
<div id="avatar"> <div class="flex">
<img src={metadata.avatar} alt={metadata.name} /> <div id="info flex-col">
<p id="bio-name">{name}</p>
<div class="w-100">
{#each iconLinks as [cl, link]}
<a class="icon m-1" href={link}><i class="fa-xl {cl}"></i></a>
{/each}
</div>
</div>
<div id="avatar">
<img src={metadata.avatar} alt={metadata.name} />
</div>
</div> </div>
</div> </div>
<article class="prose-bio lg:prose-xl dark:prose-invert">
<Content />
</article>
</div> </div>
<article class="prose-bio lg:prose-xl dark:prose-invert">
<Content />
</article>
</div> </div>
<svelte:window <svelte:window
@ -94,19 +114,26 @@
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
#main {
width: 100%;
box-shadow:
0px -5px 10px 10px rgba(200,200,200,0.4);
}
#bio { #bio {
width: 80%; max-width: 100vh;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding-top: 20px; padding-top: 20px;
padding-left: 10px;
padding-right: 10px;
min-height: 100vh; min-height: 100vh;
} }
#bio-name { #bio-name {
font-family: sans-serif; font-family: serif;
font-size: 10vh; font-size: 10vh;
line-height: 10vh; line-height: 10vh;
display: inline-block; display: inline-block;
color: theme('colors.java.800');
} }
#avatar { #avatar {
line-height: 0; line-height: 0;

2
src/routes/Footer.svelte
View File

@ -1,5 +1,5 @@
<div id="footer"> <div id="footer">
<p>Created and Designed by Leni Aniva</p> <p>Created and Designed by Leni Aniva based on <a href="https://github.com/heyeshuang/hugo-theme-tokiwa">Tokiwa</a></p>
</div> </div>
<style> <style>

4
svelte.config.js
View File

@ -2,6 +2,8 @@ import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
import { mdsvex } from 'mdsvex'; import { mdsvex } from 'mdsvex';
const contentDir = import.meta.env.CHRYSOBLOG_CONTENT || "src/content";
/** @type {import('@sveltejs/kit').Config} */ /** @type {import('@sveltejs/kit').Config} */
const config = { const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors // Consult https://kit.svelte.dev/docs/integrations#preprocessors
@ -21,7 +23,7 @@ const config = {
// See https://kit.svelte.dev/docs/adapters for more information about adapters. // See https://kit.svelte.dev/docs/adapters for more information about adapters.
adapter: adapter(), adapter: adapter(),
alias: { alias: {
$content: "src/content", $content: contentDir,
"@/*": "./*", "@/*": "./*",
}, },
} }

51
tailwind.config.ts
View File

@ -85,43 +85,50 @@ const config: Config = {
cursive: 'FancyTitleFont,"Source Han Serif SC", "Source Han Serif CN", "Noto Serif CJK SC", "Songti SC", STSong, "AR PL New Sung", "AR PL SungtiL GB", NSimSun, SimSun, "TW\-Sung", "WenQuanYi Bitmap Song", "AR PL UMing CN", "AR PL UMing HK", "AR PL UMing TW", "AR PL UMing TW MBE", PMingLiU, MingLiU, serif', cursive: 'FancyTitleFont,"Source Han Serif SC", "Source Han Serif CN", "Noto Serif CJK SC", "Songti SC", STSong, "AR PL New Sung", "AR PL SungtiL GB", NSimSun, SimSun, "TW\-Sung", "WenQuanYi Bitmap Song", "AR PL UMing CN", "AR PL UMing HK", "AR PL UMing TW", "AR PL UMing TW MBE", PMingLiU, MingLiU, serif',
mono: "'Fira Code','Cascadia Code',Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New','Sarasa Mono SC','Noto Sans CJK SC','monospace', monospace" mono: "'Fira Code','Cascadia Code',Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New','Sarasa Mono SC','Noto Sans CJK SC','monospace', monospace"
}, },
typography: ((theme) => ( typography: ((theme) => {
{ let markdownCommon = {
h2: {
color: theme('colors.eucalyptus.700'),
},
h3: {
color: theme('colors.eucalyptus.800'),
},
h4: {
color: theme('colors.eucalyptus.800'),
},
ul: {
listStyleType: "square",
listStylePosition: "outside",
},
ol: {
listStyleType: "decimal",
listStylePosition: "outside",
},
};
return {
bio: { bio: {
css: { css: {
...markdownCommon,
h1: { h1: {
color: theme('colors.eucalyptus.700'), color: theme('colors.eucalyptus.700'),
"border-bottom": "1px solid", "border-bottom": "1px solid",
}, },
h2: { "*:not(h1):not(h2):not(span):not(code)": {
color: theme('colors.eucalyptus.700'), "margin-left": "50px",
}, },
h3: { },
color: theme('colors.eucalyptus.800'),
},
h4: {
color: theme('colors.eucalyptus.800'),
},
},
}, },
DEFAULT: { DEFAULT: {
css: { css: {
...markdownCommon,
h1: { h1: {
color: theme('colors.eucalyptus.700'), color: theme('colors.eucalyptus.700'),
}, },
h2: {
color: theme('colors.eucalyptus.700'),
},
h3: {
color: theme('colors.eucalyptus.800'),
},
h4: {
color: theme('colors.eucalyptus.800'),
},
}, },
}, },
} };
)), }),
} }
}, },
plugins: [ plugins: [