feat: Links in bio page
This commit is contained in:
parent
f4abf5901f
commit
5c51e7acb7
GPG Key ID:
4D9B1C8D10EA4C50
|
|
@ -8,6 +8,7 @@
|
|||
"name": "chrysoblog",
|
||||
"version": "0.0.1",
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-free": "^6.6.0",
|
||||
"bits-ui": "^0.21.13",
|
||||
"clsx": "^2.1.1",
|
||||
"tailwind-merge": "^2.5.2",
|
||||
|
|
@ -567,6 +568,15 @@
|
|||
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.7.tgz",
|
||||
"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": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
|
||||
|
|
|
|||
|
|
@ -42,6 +42,7 @@
|
|||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-free": "^6.6.0",
|
||||
"bits-ui": "^0.21.13",
|
||||
"clsx": "^2.1.1",
|
||||
"tailwind-merge": "^2.5.2",
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@import url(./style/content.css);
|
||||
@import '@fortawesome/fontawesome-free/css/all.min.css';
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<body data-sveltekit-preload-data="hover" class="font-serif">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -10,8 +10,10 @@ Strongest of Gensokyo
|
|||
|
||||
## Publications
|
||||
|
||||
* Perfect Math Class
|
||||
* おてんば恋娘
|
||||
1. Perfect Math Class
|
||||
2. おてんば恋娘
|
||||
|
||||
[Arch Wiki](https://archlinux.org)
|
||||
|
||||
# Projects
|
||||
|
||||
|
|
|
|||
|
|
@ -3,5 +3,12 @@
|
|||
"blogName": "Cirno's Blog",
|
||||
"frontDescription": "This is a very long description.",
|
||||
"frontCover": "/favicon.svg",
|
||||
"avatar": "/favicon.svg"
|
||||
"avatar": "/favicon.svg",
|
||||
"links": {
|
||||
"github": "https://github.com",
|
||||
"email": "cirno@gensokyo.jp",
|
||||
"orcid": "cirno",
|
||||
"instagram": "@",
|
||||
"open-source": "unknown"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,3 +10,10 @@ Here is some placeholder text
|
|||
|
||||
### 3rd level heading
|
||||
#### 4th level heading
|
||||
|
||||
> This is a quote
|
||||
|
||||
```python
|
||||
for i in range(9):
|
||||
print("this is python")
|
||||
```
|
||||
|
|
|
|||
|
|
@ -24,16 +24,23 @@
|
|||
|
||||
<style>
|
||||
:global(a) {
|
||||
font-weight: 500;
|
||||
color: theme('colors.eucalyptus.400');
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: theme('colors.java.500');
|
||||
}
|
||||
}
|
||||
:global(a):not(.icon) {
|
||||
font-weight: 500;
|
||||
text-decoration: inherit;
|
||||
font-family: serif;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
position: absolute;
|
||||
height: 2px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
|
@ -46,10 +53,9 @@
|
|||
&:focus {
|
||||
&::after {
|
||||
content: "";
|
||||
position: relative;
|
||||
position: absolute;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
color: theme('colors.java.500');
|
||||
}
|
||||
}
|
||||
#navbar {
|
||||
|
|
|
|||
|
|
@ -16,6 +16,16 @@
|
|||
const { name, Content } = data;
|
||||
|
||||
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>
|
||||
|
||||
<svelte:head>
|
||||
|
|
@ -47,10 +57,19 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bio" class="bg-white dark:bg-gray-900" style="">
|
||||
|
||||
<div id="main">
|
||||
<div id="bio" class="bg-white dark:bg-gray-900" style="">
|
||||
<div class="p-1">
|
||||
<div class="flex">
|
||||
<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>
|
||||
|
|
@ -59,6 +78,7 @@
|
|||
<article class="prose-bio lg:prose-xl dark:prose-invert">
|
||||
<Content />
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svelte:window
|
||||
|
|
@ -94,19 +114,26 @@
|
|||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
#main {
|
||||
width: 100%;
|
||||
box-shadow:
|
||||
0px -5px 10px 10px rgba(200,200,200,0.4);
|
||||
}
|
||||
#bio {
|
||||
width: 80%;
|
||||
max-width: 100vh;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-top: 20px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
#bio-name {
|
||||
font-family: sans-serif;
|
||||
font-family: serif;
|
||||
font-size: 10vh;
|
||||
line-height: 10vh;
|
||||
display: inline-block;
|
||||
color: theme('colors.java.800');
|
||||
}
|
||||
#avatar {
|
||||
line-height: 0;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<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>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@ import adapter from '@sveltejs/adapter-auto';
|
|||
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
|
||||
import { mdsvex } from 'mdsvex';
|
||||
|
||||
const contentDir = import.meta.env.CHRYSOBLOG_CONTENT || "src/content";
|
||||
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
const config = {
|
||||
// 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.
|
||||
adapter: adapter(),
|
||||
alias: {
|
||||
$content: "src/content",
|
||||
$content: contentDir,
|
||||
"@/*": "./*",
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -85,14 +85,8 @@ 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',
|
||||
mono: "'Fira Code','Cascadia Code',Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New','Sarasa Mono SC','Noto Sans CJK SC','monospace', monospace"
|
||||
},
|
||||
typography: ((theme) => (
|
||||
{
|
||||
bio: {
|
||||
css: {
|
||||
h1: {
|
||||
color: theme('colors.eucalyptus.700'),
|
||||
"border-bottom": "1px solid",
|
||||
},
|
||||
typography: ((theme) => {
|
||||
let markdownCommon = {
|
||||
h2: {
|
||||
color: theme('colors.eucalyptus.700'),
|
||||
},
|
||||
|
|
@ -102,26 +96,39 @@ const config: Config = {
|
|||
h4: {
|
||||
color: theme('colors.eucalyptus.800'),
|
||||
},
|
||||
ul: {
|
||||
listStyleType: "square",
|
||||
listStylePosition: "outside",
|
||||
},
|
||||
ol: {
|
||||
listStyleType: "decimal",
|
||||
listStylePosition: "outside",
|
||||
},
|
||||
};
|
||||
|
||||
return {
|
||||
bio: {
|
||||
css: {
|
||||
...markdownCommon,
|
||||
h1: {
|
||||
color: theme('colors.eucalyptus.700'),
|
||||
"border-bottom": "1px solid",
|
||||
},
|
||||
"*:not(h1):not(h2):not(span):not(code)": {
|
||||
"margin-left": "50px",
|
||||
},
|
||||
},
|
||||
},
|
||||
DEFAULT: {
|
||||
css: {
|
||||
...markdownCommon,
|
||||
h1: {
|
||||
color: theme('colors.eucalyptus.700'),
|
||||
},
|
||||
h2: {
|
||||
color: theme('colors.eucalyptus.700'),
|
||||
},
|
||||
h3: {
|
||||
color: theme('colors.eucalyptus.800'),
|
||||
},
|
||||
h4: {
|
||||
color: theme('colors.eucalyptus.800'),
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
)),
|
||||
};
|
||||
}),
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
|
|
|
|||
Loading…
Reference in New Issue