update 404

docs-build/src/components/HeadSEO.astro

@@ -9,11 +9,14 @@ const { content = {}, canonicalURL } = Astro.props
 const title = content.title || content?.astro?.headers?.[0]?.text
 const formattedContentTitle =
   title && title !== SITE.title ? `${title} 🚀 ${SITE.title}` : SITE.title
+const description = content.description ? content.description : SITE.description
 const imageSrc = content?.image?.src ?? OPEN_GRAPH.image.src
 const canonicalImageSrc = imageSrc && new URL(imageSrc, Astro.site)
 const imageAlt = content?.image?.alt ?? OPEN_GRAPH.image.alt
 ---
 
+<meta name="description" content={description} />
+<meta name="keywords" content={SITE.keywords.join(",")} />
 <!-- Page Metadata -->
 <link rel="canonical" href={canonicalURL} />
 
@@ -28,21 +31,14 @@ const imageAlt = content?.image?.alt ?? OPEN_GRAPH.image.alt
     {imageAlt && <meta property="og:image:alt" content={imageAlt} />}
   </>
 )}
-<meta
-  name="description"
-  property="og:description"
-  content={content.description ? content.description : SITE.description}
-/>
+<meta property="og:description" content={description} />
 <meta property="og:site_name" content={SITE.title} />
 
 <!-- Twitter Tags -->
-<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:card" content="summary" />
 <meta name="twitter:site" content={OPEN_GRAPH.twitter} />
 <meta name="twitter:title" content={formattedContentTitle} />
-<meta
-  name="twitter:description"
-  content={content.description ? content.description : SITE.description}
-/>
+<meta name="twitter:description" content={description} />
 {canonicalImageSrc && (
   <>
     <meta name="twitter:image" content={canonicalImageSrc} />

docs-build/src/components/Stars.astro

@@ -0,0 +1,98 @@
+---
+const starsBoxShadow1 = buildBoxShadow(600)
+const starsBoxShadow2 = buildBoxShadow(200)
+const starsBoxShadow3 = buildBoxShadow(100)
+
+function buildBoxShadow(count: number) {
+  let shadows = []
+  for (let index = 0; index < count; index++) {
+    const x = Math.floor(Math.random() * 2000 - 1000)
+    const y = Math.floor(Math.random() * 2000 - 1000)
+    shadows.push(`${x}px ${y}px var(--theme-star)`)
+  }
+  return shadows.join(",")
+}
+---
+
+<div class="stars-wrapper">
+  <div class="stars1 stars"></div>
+  <div class="stars2 stars"></div>
+  <div class="stars3 stars"></div>
+</div>
+
+<style
+  define:vars={{
+    "stars-box-shadow1": starsBoxShadow1,
+    "stars-box-shadow2": starsBoxShadow2,
+    "stars-box-shadow3": starsBoxShadow3,
+  }}
+>
+  :root {
+    --theme-star: var(--theme-text, #fff);
+  }
+
+  .stars-wrapper {
+    position: absolute;
+    pointer-events: none;
+    z-index: 1000;
+  }
+
+  .stars {
+    border-radius: 50%;
+    background: transparent;
+
+    position: relative;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+  }
+  .stars:after {
+    border-radius: 50%;
+    content: "";
+    position: absolute;
+    top: 2000px;
+    left: 500px;
+    background: transparent;
+  }
+  @keyframes star {
+    from {
+      transform: translate(0, 0);
+    }
+    to {
+      transform: translate(-500px, -2000px);
+    }
+  }
+  .stars1 {
+    width: 1px;
+    height: 1px;
+    animation: star 500s linear infinite;
+    box-shadow: var(--stars-box-shadow1);
+  }
+  .stars1:after {
+    width: 1px;
+    height: 1px;
+    box-shadow: var(--stars-box-shadow1);
+  }
+  .stars2 {
+    width: 2px;
+    height: 2px;
+    animation: star 200s linear infinite;
+    box-shadow: var(--stars-box-shadow2);
+  }
+  .stars2:after {
+    width: 2px;
+    height: 2px;
+    box-shadow: var(--stars-box-shadow2);
+  }
+  .stars3 {
+    width: 3px;
+    height: 3px;
+    animation: star 100s linear infinite;
+    box-shadow: var(--stars-box-shadow3);
+  }
+  .stars3:after {
+    width: 3px;
+    height: 3px;
+    box-shadow: var(--stars-box-shadow3);
+  }
+</style>

docs-build/src/config.ts

@@ -12,6 +12,7 @@ const categories = [
 export const SITE = {
   title: "eslint-plugin-astro",
   description: "ESLint plugin for Astro component.",
+  keywords: ["ESLint", "Astro", "astrojs"],
   defaultLanguage: "en_US",
 }