Amadeus
/
blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: post styles and transition improvements 

(cherry picked from commit 53d2c803be5c9bc81ed1705d7053a8fde8bafe27)
This commit is contained in:
saicaca 2023-10-06 03:02:46 +08:00
parent cf0bf8d606
commit cd01149f7e
8 changed files with 1312 additions and 443 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
package.json
View File

@ -12,21 +12,24 @@
"dependencies": { "dependencies": {
"@astrojs/check": "^0.2.0", "@astrojs/check": "^0.2.0",
"@astrojs/tailwind": "^4.0.0", "@astrojs/tailwind": "^4.0.0",
"@astrojs/vue": "^3.0.1",
"@fontsource/roboto": "^5.0.8", "@fontsource/roboto": "^5.0.8",
"astro": "^3.0.10", "astro": "^3.2.3",
"astro-icon": "^1.0.0-next.2", "astro-icon": "1.0.0-next.2",
"colorjs.io": "^0.4.5", "colorjs.io": "^0.4.5",
"mdast-util-to-string": "^4.0.0", "mdast-util-to-string": "^4.0.0",
"reading-time": "^1.5.0", "reading-time": "^1.5.0",
"rehype-katex": "^7.0.0",
"remark-math": "^6.0.0",
"tailwindcss": "^3.3.3", "tailwindcss": "^3.3.3",
"typescript": "^5.2.2" "typescript": "^5.2.2"
}, },
"devDependencies": { "devDependencies": {
"@astrojs/ts-plugin": "^1.1.3", "@astrojs/ts-plugin": "^1.1.3",
"@iconify-json/fa6-brands": "^1.1.13", "@iconify-json/fa6-brands": "^1.1.13",
"@iconify-json/material-symbols": "^1.1.57", "@iconify-json/material-symbols": "^1.1.59",
"@rollup/plugin-yaml": "^4.1.1", "@rollup/plugin-yaml": "^4.1.2",
"@tailwindcss/typography": "^0.5.9", "@tailwindcss/typography": "^0.5.10",
"stylus": "^0.59.0" "stylus": "^0.59.0"
} }
} }

1582
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

7
src/components/GlobalStyles.astro
View File

@ -50,7 +50,7 @@ rainbow-dark = linear-gradient(to right, oklch(0.70 0.10 0), oklch(0.70 0.10 30)
--radius-large 16px --radius-large 16px
--banner-height-home 60vh --banner-height-home 60vh
--banner-height 50vh --banner-height 40vh
color_set({ color_set({
--primary: oklch(0.70 0.14 var(--hue)) oklch(0.75 0.14 var(--hue)) --primary: oklch(0.70 0.14 var(--hue)) oklch(0.75 0.14 var(--hue))
@ -78,7 +78,12 @@ color_set({
--line-color: black(0.1) white(0.1) --line-color: black(0.1) white(0.1)
--meta-divider: black(0.2) white(0.2) --meta-divider: black(0.2) white(0.2)
--inline-code-bg: var(--btn-regular-bg)
--inline-code-color: var(--btn-content)
--selection-bg: oklch(0.90 0.05 var(--hue)) oklch(0.40 0.08 var(--hue)) --selection-bg: oklch(0.90 0.05 var(--hue)) oklch(0.40 0.08 var(--hue))
--codeblock-selection: oklch(0.40 0.08 var(--hue))
--codeblock-bg: oklch(0.2 0.015 var(--hue)) oklch(0.17 0.015 var(--hue))
--link-hover: oklch(0.95 0.025 var(--hue)) oklch(0.40 0.08 var(--hue)) --link-hover: oklch(0.95 0.025 var(--hue)) oklch(0.40 0.08 var(--hue))
--link-active: oklch(0.90 0.05 var(--hue)) oklch(0.35 0.07 var(--hue)) --link-active: oklch(0.90 0.05 var(--hue)) oklch(0.35 0.07 var(--hue))

6
src/components/TitleCardNew.astro
View File

@ -28,19 +28,19 @@ import I18nKey from "../i18n/i18nKey";
// cover = null; // cover = null;
const hasCover = cover !== undefined && cover !== null && cover !== ''; const hasCover = cover !== undefined && cover !== null && cover !== '';
const coverWidth = "30%"; const coverWidth = "28%";
const { remarkPluginFrontmatter } = await entry.render(); const { remarkPluginFrontmatter } = await entry.render();
--- ---
<div class:list={["card-base flex flex-col-reverse md:flex-col w-full rounded-[var(--radius-large)] overflow-hidden relative", className]}> <div class:list={["card-base flex flex-col-reverse md:flex-col w-full rounded-[var(--radius-large)] overflow-hidden relative", className]}>
<div class:list={[" px-10 pt-4 md:pt-7 pb-6 relative", {"w-full md:w-[calc(100%_-_52px)]": !hasCover, "w-full md:w-[calc(100%_-_var(--coverWidth))]": hasCover}]}> <div class:list={["pl-9 pr-9 md:pr-2 pt-4 md:pt-7 pb-6 relative", {"w-full md:w-[calc(100%_-_52px_-_12px)]": !hasCover, "w-full md:w-[calc(100%_-_var(--coverWidth)_-_12px)]": hasCover}]}>
<a href={url} <a href={url}
class="transition w-full block font-bold mb-3 text-3xl class="transition w-full block font-bold mb-3 text-3xl
text-black/90 dark:text-white/90 text-black/90 dark:text-white/90
hover:text-[var(--primary)] dark:hover:text-[var(--primary)] hover:text-[var(--primary)] dark:hover:text-[var(--primary)]
before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)] before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
before:absolute md:before:top-[35px] before:left-5 before:absolute md:before:top-[35px] before:left-[18px]
"> ">
{title} {title}
</a> </a>

4
src/components/widget/DisplaySetting.astro
View File

@ -72,6 +72,10 @@ const enableBanner = getConfig().banner.enable;
border-radius: 4px; border-radius: 4px;
background: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.7);
box-shadow: none; box-shadow: none;
.banner-closed
#display-setting
border-width: 3px
</style> </style>
<style> <style>

26
src/layouts/Layout.astro
View File

@ -83,16 +83,15 @@ if (title) {
<style define:vars={{ configHue }}></style> <!-- defines global css variables. This will be applied to <html> <body> and some other elements idk why --> <style define:vars={{ configHue }}></style> <!-- defines global css variables. This will be applied to <html> <body> and some other elements idk why -->
<title>{title}</title>
</head> </head>
<body class="bg-[oklch(0.95_0.01_var(--hue))] dark:bg-[oklch(0.16_0.014_var(--hue))] min-h-screen transition "> <body class="bg-[oklch(0.95_0.01_var(--hue))] dark:bg-[oklch(0.16_0.014_var(--hue))] min-h-screen transition ">
<GlobalStyles> <GlobalStyles>
<div class="absolute w-full" <div id="banner-wrapper" class="absolute w-full transition-all"
class:list={{'banner-home': isHomePage, 'banner-else': !isHomePage}} class:list={{'banner-home': isHomePage, 'banner-else': !isHomePage}}
id="banner-wrapper"
> >
<!-- TODO the transition here is not correct --> <!-- TODO the transition here is not correct -->
<ImageBox id="boxtest" class:list={["object-center object-cover h-full", {"hidden": !viConf.banner.enable}]} <ImageBox id="boxtest" class:list={["object-center object-cover h-full", {"hidden": !viConf.banner.enable}]}
src={banner} transition:animate="fade" src={banner} transition:animate="fade"
> >
</ImageBox> </ImageBox>
@ -151,12 +150,6 @@ html::view-transition-new(banner-ani) {
overflow: clip; overflow: clip;
object-fit: none; object-fit: none;
} }
.banner-home {
}
</style> </style>
<script is:inline> <script is:inline>
/* Preload fonts */ /* Preload fonts */
@ -290,4 +283,15 @@ document.addEventListener('astro:after-swap', () => {
activateDisplaySettings(); activateDisplaySettings();
fb(); fb();
}); });
</script> </script>
<style is:global lang="stylus">
#banner-wrapper
top: 0
opacity: 1
.banner-closed
#banner-wrapper
top: -120px
opacity: 0
</style>

20
src/layouts/MainGridLayout.astro
View File

@ -23,17 +23,19 @@ const sidebarWidth = "280px";
const enableBanner = getConfig().banner.enable; const enableBanner = getConfig().banner.enable;
--- ---
<Layout title={title} banner={banner}> <Layout title={title} banner={banner}>
<div class=`max-w-[1200px] min-h-screen grid grid-cols-[280px_auto] grid-rows-[auto_auto_1fr_auto] lg:grid-rows-[auto_1fr_auto] mx-auto gap-4 relative overflow-hidden ` <div class=`max-w-[1200px] min-h-screen grid grid-cols-[280px_auto] grid-rows-[auto_auto_1fr_auto] lg:grid-rows-[auto_1fr_auto]
mx-auto gap-4 relative md:px-4 lg:px-0`
transition:animate="none" transition:animate="none"
> >
<div id="top-row" class="col-span-2 grid-rows-1 z-50" class:list={{ <div id="top-row" class="col-span-2 grid-rows-1 z-50" class:list={["transition-all", {
'min-h-[calc(var(--banner-height-home)_-_72px)]': enableBanner && isHomePage, 'h-[calc(var(--banner-height-home)_-_72px)]': enableBanner && isHomePage,
'min-h-[calc(var(--banner-height)_-_72px)]': enableBanner && !isHomePage,}} 'h-[calc(var(--banner-height)_-_72px)]': enableBanner && !isHomePage,}]}
> >
<Navbar transition:animate="fade" transition:persist></Navbar> <Navbar transition:animate="fade" transition:persist></Navbar>
</div> </div>
<SideBar class="row-start-3 row-end-4 col-span-2 lg:row-start-2 lg:row-end-3 lg:col-span-1 lg:max-w-[280px] overflow-hidden" transition:persist></SideBar> <SideBar class="row-start-3 row-end-4 col-span-2 lg:row-start-2 lg:row-end-3 lg:col-span-1 lg:max-w-[280px] " transition:persist></SideBar>
<div class="row-start-2 row-end-3 col-span-2 lg:col-span-1 overflow-hidden" transition:animate="slide"> <div class="row-start-2 row-end-3 col-span-2 lg:col-span-1 overflow-hidden" transition:animate="slide">
<!-- the overflow-hidden here prevent long text break the layout--> <!-- the overflow-hidden here prevent long text break the layout-->
@ -46,8 +48,6 @@ const enableBanner = getConfig().banner.enable;
</div> </div>
<BackToTop></BackToTop> <BackToTop></BackToTop>
</div> </div>
</Layout> </Layout>
<style> <style>
@ -69,5 +69,9 @@ html::view-transition-new(rrrr) {
overflow: clip; overflow: clip;
object-fit: none; object-fit: none;
} }
</style>
<style lang="stylus" is:global>
.banner-closed
#top-row
height: 72px;
</style> </style>

97
src/pages/posts/[slug].astro
View File

@ -1,10 +1,8 @@
--- ---
import { getCollection } from 'astro:content'; import { getCollection } from 'astro:content';
import MainGridLayout from "../../layouts/MainGridLayout.astro"; import MainGridLayout from "../../layouts/MainGridLayout.astro";
import ButtonTag from "../../components/control/ButtonTag.astro";
import ImageBox from "../../components/misc/ImageBox.astro"; import ImageBox from "../../components/misc/ImageBox.astro";
import {Icon} from "astro-icon/components"; import {Icon} from "astro-icon/components";
import {formatDateToYYYYMMDD} from "../../utils/date-utils";
import PostMetadata from "../../components/PostMetadata.astro"; import PostMetadata from "../../components/PostMetadata.astro";
import {getPostUrlBySlug} from "../../utils/content-utils"; import {getPostUrlBySlug} from "../../utils/content-utils";
import Button from "../../components/control/Button.astro"; import Button from "../../components/control/Button.astro";
@ -24,12 +22,10 @@ const { Content } = await entry.render();
const { remarkPluginFrontmatter } = await entry.render(); const { remarkPluginFrontmatter } = await entry.render();
const enableBanner = getConfig().banner.enable;
--- ---
<MainGridLayout banner={entry.data.cover} title={entry.data.title}> <MainGridLayout banner={entry.data.cover} title={entry.data.title}>
<div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative mb-4"> <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative mb-4">
<div class:list={["card-base z-10 px-9 py-6 relative w-full ", <div class:list={["card-base z-10 px-4 md:px-9 py-6 relative w-full ",
{} {}
]}> ]}>
<!-- word count and reading time --> <!-- word count and reading time -->
@ -51,10 +47,11 @@ const enableBanner = getConfig().banner.enable;
<!-- title --> <!-- title -->
<div class="relative"> <div class="relative">
<div <div
class="transition w-full block font-bold mb-3 text-[40px]/[44px] class="transition w-full block font-bold mb-3
text-black/90 dark:text-white/90 text-3xl md:text-[40px]/[44px]
before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)] text-black/90 dark:text-white/90
before:absolute before:top-[12px] before:left-[-18px] md:before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
before:absolute before:top-[12px] before:left-[-18px]
"> ">
{entry.data.title} {entry.data.title}
</div> </div>
@ -76,27 +73,30 @@ const enableBanner = getConfig().banner.enable;
{!entry.data.cover && <div class="border-[var(--line-divider)] border-dashed border-b-[1px] mb-5"></div>} {!entry.data.cover && <div class="border-[var(--line-divider)] border-dashed border-b-[1px] mb-5"></div>}
<div class="prose dark:prose-invert max-w-none prose-h1:text-3xl"> <div class="prose dark:prose-invert prose-sm md:prose-base max-w-none custom-md
">
<!--<div class="prose dark:prose-invert max-w-none custom-md">-->
<!--<div class="max-w-none custom-md">-->
<Content /> <Content />
</div> </div>
</div> </div>
</div> </div>
<div class="flex justify-between gap-4 overflow-hidden w-full"> <div class="flex flex-col md:flex-row justify-between gap-4 overflow-hidden w-full">
<a href={getPostUrlBySlug(entry.data.prevSlug)} class="w-full font-bold overflow-hidden"> <a href={getPostUrlBySlug(entry.data.nextSlug)} class="w-full font-bold overflow-hidden">
{entry.data.prevSlug && <Button class="w-full max-w-full h-10 px-4 rounded-2xl flex items-center justify-start gap-4" card height="60px"> {entry.data.nextSlug && <Button class="w-full max-w-full h-10 px-4 rounded-2xl flex items-center justify-start gap-4" card height="60px">
<Icon name="material-symbols:chevron-left-rounded" size={32} class="text-[var(--primary)]" /> <Icon name="material-symbols:chevron-left-rounded" size={32} class="text-[var(--primary)]" />
<div class="overflow-hidden overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_48px)] text-black/75 dark:text-white/75"> <div class="overflow-hidden overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_48px)] text-black/75 dark:text-white/75">
{entry.data.prevTitle} {entry.data.nextTitle}
</div> </div>
</Button>} </Button>}
</a> </a>
<a href={getPostUrlBySlug(entry.data.nextSlug)} class="w-full font-bold overflow-hidden"> <a href={getPostUrlBySlug(entry.data.prevSlug)} class="w-full font-bold overflow-hidden">
{entry.data.nextSlug && <Button class="w-full max-w-full h-10 px-4 rounded-2xl flex items-center justify-end gap-4" card height="60px"> {entry.data.prevSlug && <Button class="w-full max-w-full h-10 px-4 rounded-2xl flex items-center justify-end gap-4" card height="60px">
<div class="overflow-hidden overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_48px)] text-black/75 dark:text-white/75"> <div class="overflow-hidden overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_48px)] text-black/75 dark:text-white/75">
{entry.data.nextTitle} {entry.data.prevTitle}
</div> </div>
<Icon name="material-symbols:chevron-right-rounded" size={32} class="text-[var(--primary)]" /> <Icon name="material-symbols:chevron-right-rounded" size={32} class="text-[var(--primary)]" />
</Button>} </Button>}
@ -104,3 +104,66 @@ const enableBanner = getConfig().banner.enable;
</div> </div>
</MainGridLayout> </MainGridLayout>
<style lang="stylus" is:global>
.custom-md
a
background: none
margin: -4px
padding: 4px
border-radius: 6px
color: var(--primary)
text-decoration none
&:hover
background: var(--link-hover)
&:active
background: var(--link-active)
code
font-family: monospace
background: var(--inline-code-bg)
color: var(--inline-code-color)
padding: 2px 4px
border-radius: 4px
overflow: hidden
&:before
content: none
&:after
content: none
pre
background: var(--codeblock-bg) !important
code
padding: 0
background: none
::selection
background: var(--codeblock-selection)
span.br::selection
background: var(--codeblock-selection)
ul
li
&::marker
color: var(--primary)
ol
li
&::marker
color: var(--primary)
blockquote
font-style: normal
border-left-color: rgba(0,0,0,0)
position: relative;
&:before
content: ''
position: absolute
left: -0.25rem
display: block
background: var(--btn-regular-bg)
height: 100%
width: 0.25rem
border-radius: 1rem
p
&:before
content: none
&:after
content: none
</style>