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",
"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",

1
package.json
View File

@ -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
src/app.css
View File

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

2
src/app.html
View File

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

6
src/content/home.md
View File

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

9
src/content/metadata.json
View File

@ -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"
}
}

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

@ -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")
```

14
src/routes/+layout.svelte
View File

@ -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 {

51
src/routes/+page.svelte
View File

@ -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,18 +57,28 @@
</div>
</div>
</div>
<div id="bio" class="bg-white dark:bg-gray-900" style="">
<div class="p-1">
<div class="flex">
<p id="bio-name">{name}</p>
<div id="avatar">
<img src={metadata.avatar} alt={metadata.name} />
<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>
</div>
</div>
<article class="prose-bio lg:prose-xl dark:prose-invert">
<Content />
</article>
</div>
<article class="prose-bio lg:prose-xl dark:prose-invert">
<Content />
</article>
</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;

2
src/routes/Footer.svelte
View File

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

4
svelte.config.js
View File

@ -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,
"@/*": "./*",
},
}

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',
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: {
css: {
...markdownCommon,
h1: {
color: theme('colors.eucalyptus.700'),
"border-bottom": "1px solid",
},
h2: {
color: theme('colors.eucalyptus.700'),
"*:not(h1):not(h2):not(span):not(code)": {
"margin-left": "50px",
},
h3: {
color: theme('colors.eucalyptus.800'),
},
h4: {
color: theme('colors.eucalyptus.800'),
},
},
},
},
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: [