+
@@ -188,9 +192,9 @@ useHomeHeroFilterBackground(canvas, computed(() => props.background === 'filter-
top: 0;
left: 0;
width: 100%;
- height: 20%;
+ height: 100%;
content: "";
- background: linear-gradient(var(--vp-c-bg) 0, transparent 100%);
+ background: linear-gradient(to bottom, var(--vp-c-bg) 0, transparent 40%, transparent 60%, var(--vp-c-bg) 140%);
}
.bg-filter canvas {
diff --git a/theme/src/client/composables/home.ts b/theme/src/client/composables/home.ts
index 24132e04..93537c77 100644
--- a/theme/src/client/composables/home.ts
+++ b/theme/src/client/composables/home.ts
@@ -1,10 +1,30 @@
import type { Ref } from 'vue'
import { computed, onMounted, onUnmounted } from 'vue'
+import type { PlumeThemeHomeHero } from '../../shared/index.js'
import { useDarkMode } from './darkMode.js'
-export function useHomeHeroFilterBackground(
+export interface TintPlate {
+ r: { value: number, offset: number }
+ g: { value: number, offset: number }
+ b: { value: number, offset: number }
+}
+
+const lightTint = {
+ r: { value: 200, offset: 36 },
+ g: { value: 200, offset: 36 },
+ b: { value: 200, offset: 36 },
+}
+
+const darkTint = {
+ r: { value: 32, offset: 36 },
+ g: { value: 32, offset: 36 },
+ b: { value: 32, offset: 36 },
+}
+
+export function useHomeHeroTintPlate(
canvas: Ref
,
enable: Ref,
+ tintPlate: Ref,
) {
const isDark = useDarkMode()
@@ -12,7 +32,61 @@ export function useHomeHeroFilterBackground(
let t = 0
let timer: number
- const F = computed(() => isDark.value ? 32 : 220)
+ const plate = computed(() => {
+ const defaultTint = isDark.value ? darkTint : lightTint
+ if (!tintPlate.value)
+ return defaultTint
+
+ const plate = tintPlate.value
+ if (typeof plate === 'string' || typeof plate === 'number') {
+ if (isDark.value)
+ return darkTint
+ const values = toPlate(plate)
+ return values.length !== 3 ? lightTint : toTint(values)
+ }
+
+ if (typeof plate === 'object') {
+ if ('r' in plate) {
+ if (isDark.value)
+ return darkTint
+ return toNumber({ ...lightTint, ...plate })
+ }
+ const key = isDark.value ? 'dark' : 'light'
+ if (key in plate) {
+ const _plate = plate[key]
+ if (typeof _plate === 'string' || typeof _plate === 'number') {
+ const values = toPlate(_plate)
+ return values.length !== 3 ? lightTint : toTint(values)
+ }
+ return toNumber({ ...defaultTint, ...plate })
+ }
+ }
+ return defaultTint
+ })
+
+ function toPlate(plate: number | string) {
+ return typeof plate === 'number' || Number(plate) === Number.parseInt(plate)
+ ? [plate, plate, plate].map(n => Number(n))
+ : plate.includes(',') ? plate.replace(/\s/g, '').split(',').map(n => Number(n)) : []
+ }
+
+ function toTint([r, g, b]: number[]) {
+ return { r: toColor(r), g: toColor(g), b: toColor(b) }
+ }
+
+ function toColor(num: number) {
+ const offset = 256 - num
+ return { value: num, offset: offset > 64 ? 64 : offset }
+ }
+
+ function toNumber(tint: TintPlate): TintPlate {
+ Object.keys(tint).forEach((key) => {
+ const p = tint[key]
+ p.value = Number(p.value)
+ p.offset = Number(p.offset)
+ })
+ return tint
+ }
onMounted(() => {
if (canvas.value && enable.value) {
@@ -43,14 +117,17 @@ export function useHomeHeroFilterBackground(
}
function R(x: number, y: number, t: number) {
- return (Math.floor(F.value + 36 * Math.cos((x * x - y * y) / 300 + t)))
+ const r = plate.value.r
+ return (Math.floor(r.value + r.offset * Math.cos((x * x - y * y) / 300 + t)))
}
function G(x: number, y: number, t: number) {
- return (Math.floor(F.value + 36 * Math.sin((x * x * Math.cos(t / 4) + y * y * Math.sin(t / 3)) / 300)))
+ const g = plate.value.g
+ return (Math.floor(g.value + g.offset * Math.sin((x * x * Math.cos(t / 4) + y * y * Math.sin(t / 3)) / 300)))
}
function B(x: number, y: number, t: number) {
- return (Math.floor(F.value + 36 * Math.sin(5 * Math.sin(t / 9) + ((x - 100) * (x - 100) + (y - 100) * (y - 100)) / 1100)))
+ const b = plate.value.b
+ return (Math.floor(b.value + b.offset * Math.sin(5 * Math.sin(t / 9) + ((x - 100) * (x - 100) + (y - 100) * (y - 100)) / 1100)))
}
}
diff --git a/theme/src/shared/frontmatter.ts b/theme/src/shared/frontmatter.ts
index 5a4ff0ff..0778f061 100644
--- a/theme/src/shared/frontmatter.ts
+++ b/theme/src/shared/frontmatter.ts
@@ -36,11 +36,22 @@ export interface PlumeThemeHomeBanner extends Pick