トップHero画面にStarを飛ばす (#214)

* トップHero画面にStarを飛ばす

* fix

Author: ota-meshi

.vitepress/theme/components/FutureStar.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="future-star__container" :class="['future-star--kind-' + kind]">
+    <div class="future-star"></div>
+  </div>
+</template>
+
+<script setup>
+const { kind } = defineProps({ kind: { type: String, required: true } });
+const starSize = 10;
+const lengthRate = 32; /* 正確には22程度だが動いていると短く見えるので長めに設定する */
+const starWidth = starSize * (lengthRate + 0.5);
+const starPath = `path("M 0 ${starSize / 2} l ${starSize * lengthRate} -${starSize / 2} a 1 1 0 0 1 0 ${starSize} Z")`;
+</script>
+
+<style scoped>
+:global(.standards-home .clip) {
+  /* タイトルをアンカーにする */
+  anchor-name: --future-title;
+}
+
+.future-star__container {
+  position: fixed;
+  width: calc(100vw + v-bind(starWidth * 2 + "px"));
+  min-width: calc(800px + v-bind(starWidth * 2 + "px"));
+  bottom: calc(100vh - 160px); /* fallback */
+  z-index: -1; /* fallback の場合にコンテンツの後ろに配置したいので-1 */
+  position-anchor: --future-title;
+  bottom: calc(anchor(top) - 10px);
+  left: v-bind(-starWidth + "px");
+  filter: blur(3px);
+  transform-origin: left 50%;
+  opacity: 0.1;
+}
+.dark .future-star__container {
+  opacity: 0.2;
+}
+.future-star--kind-1 {
+  transform: rotate(-6deg);
+}
+.future-star--kind-2 {
+  transform: rotate(-4deg);
+}
+.future-star {
+  position: absolute;
+  background-color: #da0058;
+  height: v-bind(starSize + "px");
+  width: v-bind(starWidth + "px");
+  clip-path: v-bind(starPath);
+
+  animation-composition: add;
+  animation-name: slide-to-right;
+  animation-duration: 10s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  animation-timeline:;
+}
+.future-star--kind-2 .future-star {
+  animation-delay: 250ms;
+}
+@keyframes slide-to-right {
+  0% {
+    left: 0;
+  }
+  50% {
+    left: 100%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+</style>

.vitepress/theme/index.mjs

@@ -2,6 +2,7 @@ import DefaultTheme from "vitepress/theme";
 import "./style.css";
 import PageInfo from "./components/PageInfo.vue";
 import PageTitle from "./components/PageTitle.vue";
+import FutureStar from "./components/FutureStar.vue";
 
 /**
  * @typedef {import('vitepress').EnhanceAppContext} EnhanceAppContext
@@ -17,5 +18,6 @@ export default {
 
     ctx.app.component("PageInfo", PageInfo);
     ctx.app.component("PageTitle", PageTitle);
+    ctx.app.component("FutureStar", FutureStar);
   },
 };

index.md

@@ -34,6 +34,7 @@ features:
     details: エンタープライズ領域では、社員・パートナーの方々を合わせて、数百人が同時に開発することも珍しくありません。 ちょっとした悩み、失敗も、人数が集まれば大変なコスト・リスクになります。 誰もが引っかかる落とし穴、悩みの種をあらかじめ排除します。
   - title: Performance
     details: 時に読みやすいソースコードはパフォーマンス劣化を招くことがあります。 しかし、常にパフォーマンスを優先したソースコードは人間の読めないソースコードになりがちです。 今、書こうとしているソースコードが、どの程度のパフォーマンスになるのか、指標を示すことで、ソフトウェア開発プロジェクトごとに最適なソースコードを選択することができます。
+pageClass: standards-home
 ---
 
 [![GitHub last commit](https://img.shields.io/github/last-commit/future-architect/coding-standards.svg)](https://github.com/future-architect/coding-standards)
@@ -42,3 +43,6 @@ features:
 ## License
 
 [![CC-By-4.0](https://licensebuttons.net/l/by/4.0/88x31.png)](https://creativecommons.org/licenses/by/4.0/deed.ja)
+
+<FutureStar kind="1"/>
+<FutureStar kind="2" />