feat: add animated background options and new DotBackground component

keksiqc · Dec 4, 2024 · e2ba172 · e2ba172
1 parent 99adf2e
commit e2ba172
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 3 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.465.0",
+    "mini-svg-data-uri": "^1.4.4",
     "p5i": "^0.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

diff --git a/shako.config.ts b/shako.config.ts
@@ -9,6 +9,7 @@ const config: Config = {
   // },
   discordID: '527147599942385674', // Discord user ID for Lanyard integration (can be omitted if 'user' is defined)
   lanyardUrl: 'https://api.lanyard.rest/', // Custom Lanyard API URL (optional, for self-hosted instances) (WIP)
+  animatedBackground: false, // Whether to use the animated background (default: false)
   iconButtons: [
     {
       icon: 'patreon',

diff --git a/src/components/DotBackground.tsx b/src/components/DotBackground.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+
+export function DotBackground() {
+  return (
+    <div className="pointer-events-none fixed inset-0 z-[-1] flex size-full items-center  justify-center bg-white bg-dot-black/[0.2] dark:bg-black dark:bg-dot-white/[0.2]">
+    </div>
+  )
+}
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -1,5 +1,4 @@
 ---
-import { WaveBackground } from '@/components/WaveBackground'
 import '@fontsource/geist-sans'
 import '@fontsource/geist-mono'
 
@@ -45,7 +44,6 @@ const { title } = Astro.props
     <title>{title}</title>
   </head>
   <body>
-    <WaveBackground client:only="react" />
     <slot />
   </body>
 </html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,8 +1,10 @@
 ---
 import { ButtonContainer } from '@/components/ButtonContainer'
+import { DotBackground } from '@/components/DotBackground'
 import { Footer } from '@/components/Footer'
 import { ModeToggle } from '@/components/ModeToggle'
 import { UserContainer } from '@/components/UserContainer'
+import { WaveBackground } from '@/components/WaveBackground'
 import { getConfig } from '@/lib/config'
 import Layout from '../layouts/Layout.astro'
 
@@ -12,6 +14,14 @@ const config = await getConfig() // eslint-disable-line keksiqc/no-top-level-awa
 ---
 
 <Layout title={config.title}>
+  {config.animatedBackground
+? (
+    <WaveBackground client:only="react" />
+  )
+: (
+    <DotBackground client:only="react" />
+  )}
+
   <!-- main container -->
   <main class="items-center justify-center p-4">
     <!-- mode toggle -->

diff --git a/src/types.d.ts b/src/types.d.ts
@@ -0,0 +1,4 @@
+declare module 'tailwindcss/lib/util/flattenColorPalette' {
+  const flattenColorPalette: (colors: any) => Record<string, string>
+  export default flattenColorPalette
+} 
diff --git a/src/types.ts b/src/types.ts
@@ -9,6 +9,7 @@ export const configSchema = z.object({
   }).optional(),
   discordID: z.custom<Snowflake>().optional(),
   lanyardUrl: z.string().url().optional(),
+  animatedBackground: z.boolean().optional().default(false),
   iconButtons: z.array(
     z.object({
       icon: z.string(),

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,6 +1,21 @@
 import type { Config } from 'tailwindcss'
+import svgToDataUri from 'mini-svg-data-uri'
+import colors from 'tailwindcss/colors'
+import defaultTheme from 'tailwindcss/defaultTheme'
+import flattenColorPalette from 'tailwindcss/lib/util/flattenColorPalette'
 import animate from 'tailwindcss-animate'
 
+function addVariablesForColors({ addBase, theme }: any) {
+  const allColors = flattenColorPalette(theme('colors'))
+  const newVars = Object.fromEntries(
+    Object.entries(allColors).map(([key, val]) => [`--${key}`, val]),
+  )
+
+  addBase({
+    ':root': newVars,
+  })
+}
+
 const config: Config = {
   darkMode: ['class'],
   content: ['./src/**/*.{astro,ts,tsx}'],
@@ -70,7 +85,32 @@ const config: Config = {
       },
     },
   },
-  plugins: [animate],
+  plugins: [
+    animate,
+    addVariablesForColors,
+    function ({ matchUtilities, theme }: any) {
+      matchUtilities(
+        {
+          'bg-grid': (value: any) => ({
+            backgroundImage: `url("${svgToDataUri(
+              `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`,
+            )}")`,
+          }),
+          'bg-grid-small': (value: any) => ({
+            backgroundImage: `url("${svgToDataUri(
+              `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="8" height="8" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`,
+            )}")`,
+          }),
+          'bg-dot': (value: any) => ({
+            backgroundImage: `url("${svgToDataUri(
+              `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="none"><circle fill="${value}" id="pattern-circle" cx="10" cy="10" r="1.6257413380501518"></circle></svg>`,
+            )}")`,
+          }),
+        },
+        { values: flattenColorPalette(theme('backgroundColor')), type: 'color' },
+      )
+    },
+  ],
 }
 
 export default config