Merge pull request #164 from Lum1104/feat/community-video

feat(readme,homepage): add Community section with Better Stack walkthrough video
2026-06-22 10:58:03 +08:00 · 2026-05-21 20:01:23 +08:00
parent 300056e789 db94d066a8
commit ea4d17b484
10 changed files with 257 additions and 0 deletions
@@ -272,6 +272,20 @@ File analyzers run in parallel (up to 5 concurrent, 20-30 files per batch). Supp

 ---

+## 🎥 Community
+
+A community-made walkthrough by **Better Stack**.
+
+<p align="center">
+  <a href="https://www.youtube.com/watch?v=VmIUXVlt7_I"><img src="https://img.youtube.com/vi/VmIUXVlt7_I/maxresdefault.jpg" alt="Community walkthrough by Better Stack — watch on YouTube" width="480" /></a>
+  <br />
+  <em><a href="https://www.youtube.com/watch?v=VmIUXVlt7_I">Watch on YouTube &rarr;</a></em>
+</p>
+
+Made a video, blog post, or tutorial? Open an issue or PR — happy to feature it here.
+
+---
+
 ## 🤝 Contributing

 Contributions are welcome! Here's how to get started:
@@ -270,6 +270,20 @@ Los analizadores de archivos se ejecutan en paralelo (hasta 5 concurrentes, 20-3

 ---

+## 🎥 Comunidad
+
+Un recorrido en video hecho por la comunidad de **Better Stack**.
+
+<p align="center">
+  <a href="https://www.youtube.com/watch?v=VmIUXVlt7_I"><img src="https://img.youtube.com/vi/VmIUXVlt7_I/maxresdefault.jpg" alt="Recorrido en video por la comunidad de Better Stack — haz clic para ver en YouTube" width="480" /></a>
+  <br />
+  <em><a href="https://www.youtube.com/watch?v=VmIUXVlt7_I">Ver en YouTube &rarr;</a></em>
+</p>
+
+¿Has hecho un video, post o tutorial? Abre un issue o PR — estaremos encantados de mostrarlo aquí.
+
+---
+
 ## 🤝 Contribuir

 ¡Las contribuciones son bienvenidas! Así puedes empezar:
@@ -271,6 +271,20 @@ git add .gitattributes .understand-anything/

 ---

+## 🎥 コミュニティ
+
+**Better Stack** によるコミュニティ製ウォークスルー動画。
+
+<p align="center">
+  <a href="https://www.youtube.com/watch?v=VmIUXVlt7_I"><img src="https://img.youtube.com/vi/VmIUXVlt7_I/maxresdefault.jpg" alt="Better Stack によるコミュニティ製ウォークスルー動画 — クリックして YouTube で視聴" width="480" /></a>
+  <br />
+  <em><a href="https://www.youtube.com/watch?v=VmIUXVlt7_I">YouTube で視聴 &rarr;</a></em>
+</p>
+
+動画、ブログ、チュートリアルを作成しましたか?Issue または PR を開いてください — ここで紹介させていただきます。
+
+---
+
 ## 🤝 コントリビュート

 コントリビュートを歓迎します！始め方は以下の通りです：
@@ -270,6 +270,20 @@ git add .gitattributes .understand-anything/

 ---

+## 🎥 커뮤니티
+
+**Better Stack**에서 만든 커뮤니티 워크스루 영상.
+
+<p align="center">
+  <a href="https://www.youtube.com/watch?v=VmIUXVlt7_I"><img src="https://img.youtube.com/vi/VmIUXVlt7_I/maxresdefault.jpg" alt="Better Stack에서 만든 커뮤니티 워크스루 영상 — 클릭하여 YouTube에서 시청" width="480" /></a>
+  <br />
+  <em><a href="https://www.youtube.com/watch?v=VmIUXVlt7_I">YouTube에서 보기 &rarr;</a></em>
+</p>
+
+영상, 블로그 글, 튜토리얼을 만드셨나요? 이슈나 PR을 열어주세요 — 여기서 소개해드릴게요.
+
+---
+
 ## 🤝 기여하기

 기여를 환영합니다! 시작하는 방법은 다음과 같습니다:
@@ -271,6 +271,20 @@ git add .gitattributes .understand-anything/

 ---

+## 🎥 Сообщество
+
+Обзорное видео от сообщества, созданное **Better Stack**.
+
+<p align="center">
+  <a href="https://www.youtube.com/watch?v=VmIUXVlt7_I"><img src="https://img.youtube.com/vi/VmIUXVlt7_I/maxresdefault.jpg" alt="Обзорное видео от сообщества Better Stack — нажмите, чтобы посмотреть на YouTube" width="480" /></a>
+  <br />
+  <em><a href="https://www.youtube.com/watch?v=VmIUXVlt7_I">Смотреть на YouTube &rarr;</a></em>
+</p>
+
+Сделали видео, статью или руководство? Откройте issue или PR — с удовольствием добавим сюда.
+
+---
+
 ## 🤝 Вклад в проект

 Будем рады вашим контрибьюшенам! Как начать:
@@ -271,6 +271,20 @@ Dosya analizörleri paralel çalışır (en fazla 3 eşzamanlı). Artımlı gün

 ---

+## 🎥 Topluluk
+
+**Better Stack** tarafından hazırlanan topluluk tanıtım videosu.
+
+<p align="center">
+  <a href="https://www.youtube.com/watch?v=VmIUXVlt7_I"><img src="https://img.youtube.com/vi/VmIUXVlt7_I/maxresdefault.jpg" alt="Better Stack tarafından hazırlanan topluluk tanıtım videosu — YouTube'da izlemek için tıklayın" width="480" /></a>
+  <br />
+  <em><a href="https://www.youtube.com/watch?v=VmIUXVlt7_I">YouTube'da izle &rarr;</a></em>
+</p>
+
+Bir video, blog yazısı veya eğitim hazırladınız mı? Issue veya PR açın — burada yer vermekten mutluluk duyarız.
+
+---
+
 ## 🤝 Katkıda Bulunma

 Katkılar memnuniyetle karşılanır! Başlamak için:
@@ -270,6 +270,20 @@ git add .gitattributes .understand-anything/

 ---

+## 🎥 社区
+
+由 **Better Stack** 制作的社区视频教程。
+
+<p align="center">
+  <a href="https://www.youtube.com/watch?v=VmIUXVlt7_I"><img src="https://img.youtube.com/vi/VmIUXVlt7_I/maxresdefault.jpg" alt="Better Stack 制作的社区视频教程 —— 点击在 YouTube 观看" width="480" /></a>
+  <br />
+  <em><a href="https://www.youtube.com/watch?v=VmIUXVlt7_I">在 YouTube 上观看 &rarr;</a></em>
+</p>
+
+写过视频、博客或教程?提个 issue 或 PR —— 我们很乐意把它放在这里。
+
+---
+
 ## 🤝 贡献

 欢迎贡献！以下是贡献指南：
@@ -270,6 +270,20 @@ git add .gitattributes .understand-anything/

 ---

+## 🎥 社群
+
+由 **Better Stack** 製作的社群影片導覽。
+
+<p align="center">
+  <a href="https://www.youtube.com/watch?v=VmIUXVlt7_I"><img src="https://img.youtube.com/vi/VmIUXVlt7_I/maxresdefault.jpg" alt="Better Stack 製作的社群影片導覽 —— 點擊在 YouTube 觀看" width="480" /></a>
+  <br />
+  <em><a href="https://www.youtube.com/watch?v=VmIUXVlt7_I">在 YouTube 上觀看 &rarr;</a></em>
+</p>
+
+寫過影片、部落格或教學?開一個 issue 或 PR —— 我們很樂意將它放在這裡。
+
+---
+
 ## 🤝 貢獻

 歡迎貢獻！以下是貢獻指南：
@@ -0,0 +1,143 @@
+---
+const youTubeId = 'VmIUXVlt7_I';
+const youTubeUrl = `https://www.youtube.com/watch?v=${youTubeId}`;
+const embedUrl = `https://www.youtube.com/embed/${youTubeId}?si=IB3cjpjbq9wis5D7`;
+---
+
+<section class="community-video">
+  <span class="community-video-label reveal">Community</span>
+  <h2 class="community-video-heading reveal">
+    A walkthrough from the
+    <span style="display:inline;background:linear-gradient(135deg,#b8865c,#d4a574);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;">community</span>
+  </h2>
+  <p class="community-video-desc reveal">
+    A community-made video tour by
+    <a class="community-video-credit" href={youTubeUrl} target="_blank" rel="noopener noreferrer">Better Stack</a>.
+  </p>
+  <div class="community-video-frame reveal reveal-delay-1">
+    <div class="community-video-titlebar">
+      <span class="dot red"></span>
+      <span class="dot yellow"></span>
+      <span class="dot green"></span>
+      <span class="community-video-titlebar-text">YouTube · Better Stack</span>
+    </div>
+    <div class="community-video-iframe-wrap">
+      <iframe
+        src={embedUrl}
+        title="Community video by Better Stack — Understand Anything walkthrough"
+        class="community-video-iframe"
+        loading="lazy"
+        frameborder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        referrerpolicy="strict-origin-when-cross-origin"
+        allowfullscreen
+      ></iframe>
+    </div>
+  </div>
+</section>
+
+<style>
+  .community-video {
+    padding: 6rem 2rem 4rem;
+    max-width: 1100px;
+    margin: 0 auto;
+    text-align: center;
+  }
+
+  .community-video-label {
+    display: inline-block;
+    font-family: var(--font-code);
+    font-size: 0.75rem;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: #d4a574;
+    border: 1px solid rgba(212, 165, 116, 0.3);
+    padding: 0.3rem 1rem;
+    border-radius: 100px;
+    margin-bottom: 1.5rem;
+  }
+
+  .community-video-heading {
+    font-family: var(--font-heading);
+    font-size: clamp(1.75rem, 4.5vw, 3rem);
+    color: var(--text);
+    margin-bottom: 1.5rem;
+    line-height: 1.2;
+  }
+
+  .community-video-desc {
+    font-size: clamp(0.95rem, 1.5vw, 1.05rem);
+    color: var(--text-muted);
+    max-width: 640px;
+    margin: 0 auto 2.5rem;
+    line-height: 1.7;
+  }
+
+  .community-video-credit {
+    color: #d4a574;
+    text-decoration: none;
+    border-bottom: 1px dashed rgba(212, 165, 116, 0.4);
+    transition: border-color 0.2s ease;
+  }
+
+  .community-video-credit:hover {
+    border-bottom-color: #d4a574;
+  }
+
+  .community-video-frame {
+    border-radius: 12px;
+    overflow: hidden;
+    background: var(--surface);
+    border: 1px solid rgba(212, 165, 116, 0.2);
+    box-shadow:
+      0 0 60px rgba(212, 165, 116, 0.08),
+      0 25px 50px rgba(0, 0, 0, 0.45);
+  }
+
+  .community-video-titlebar {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 10px 14px;
+    background: rgba(20, 20, 20, 0.8);
+    border-bottom: 1px solid var(--border);
+  }
+
+  .community-video-titlebar-text {
+    flex: 1;
+    text-align: center;
+    font-family: var(--font-code);
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    margin-right: 30px;
+  }
+
+  .dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+  }
+
+  .dot.red { background: #ff5f57; }
+  .dot.yellow { background: #ffbd2e; }
+  .dot.green { background: #28c840; }
+
+  .community-video-iframe-wrap {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    background: #0a0a0a;
+  }
+
+  .community-video-iframe {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    border: none;
+  }
+
+  @media (max-width: 768px) {
+    .community-video { padding: 4rem 1rem 3rem; }
+  }
+</style>
@@ -4,6 +4,7 @@ import Nav from '../components/Nav.astro';
 import Hero from '../components/Hero.astro';
 import Problem from '../components/Problem.astro';
 import Showcase from '../components/Showcase.astro';
+import CommunityVideo from '../components/CommunityVideo.astro';
 import Features from '../components/Features.astro';
 import Install from '../components/Install.astro';
 import Footer from '../components/Footer.astro';
@@ -14,6 +15,7 @@ import Footer from '../components/Footer.astro';
  <Hero />
  <Problem />
  <Showcase />
+  <CommunityVideo />
  <Features />
  <Install />
  <Footer />