SanYeCao-blog/src/components/Footer.astro

---
import { getLangFromUrl, getTranslations, type Lang } from "@/i18n";
import BuildHashBlocks from "@/components/BuildHashBlocks.astro";
const commit = import.meta.env.PUBLIC_GIT_COMMIT || "unknown";
const lang = getLangFromUrl(Astro.url);
const t = getTranslations(lang);
---

<footer class="footer">
  <a
    href="https://github.com/ClovertaTheTrilobita/SanYeCao-blog"
    class="github"
    aria-label="GitHub repository"></a>
  <a href="mailto:cloverta@petalmail.com" class="email" aria-label="Email"></a>
  <p class="footer-content-pc">
    © 2026 ClovertaTheTrilobita · <a
      href="https://github.com/ClovertaTheTrilobita/SanYeCao-blog"
      >Source code</a
    > licensed under MIT. Content rights reserved.
    <!-- <code class="build-commit">{commit.slice(0, 7)}</code> -->
  </p>

  <div class="footer-content-mobile">
    <p>© 2026 ClovertaTheTrilobita</p>
    <p>Content rights reserved.</p>
  </div>

  <BuildHashBlocks />

  <div
    id="beian-wrap"
    style="display: flex; flex-direction: column; align-items: center; font-size: 0.7rem; padding-bottom: 12px; width: 100%; overflow: hidden;"
  >
    <div
      id="beian-inner"
      class="beian"
      style="display: flex; gap: 4px; justify-content: center; white-space: nowrap; transform-origin: center;"
    >
      <a href="https://beian.miit.gov.cn" target="_blank" style="color: gray;"
        >赣ICP备2025059789号</a
      >
      <span>|</span>
      <a
        href="https://beian.mps.gov.cn/#/query/webSearch?code=36020002000597"
        target="_blank"
        style="display: flex; gap: 2px; color: gray; white-space: nowrap;"
      >
        <img
          src="/images/beian.png"
          style="height: 1em; vertical-align: middle; margin-top: 4px;"
        />
        <span>赣公网安备36020002000597号</span>
      </a>
    </div>
  </div>
</footer>

<style>
  .footer {
    margin-top: 1rem;
    padding: 1.5rem 0 0;
    font-size: 0.95rem;
    opacity: 0.9;
    position: relative;
  }
  .github {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: #1f2328;
    -webkit-mask: url("/images/github-outline-7.svg") no-repeat center / contain;
    mask: url("/images/github-outline-7.svg") no-repeat center / contain;
    vertical-align: middle;
    margin-bottom: 0.5rem;
    margin-right: 0.5rem;
    transition:
      transform 0.18s ease,
      opacity 0.18s ease;
  }

  .email {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: #1f2328;
    -webkit-mask: url("/images/email.svg") no-repeat center / contain;
    mask: url("/images/email.svg") no-repeat center / contain;
    vertical-align: middle;
    margin-bottom: 0.5rem;
    transition:
      transform 0.18s ease,
      opacity 0.18s ease;
  }

  .github:hover {
    transform: translateY(-2px);
  }
  .email:hover {
    transform: translateY(-2px);
  }

  :global(html.dark .github) {
    background-color: #e6e6e6;
  }

  :global(html.dark .email) {
    background-color: #e6e6e6;
  }

  .footer {
    margin-top: 1rem;
    padding: 1.5rem 0 0;
    font-size: 0.95rem;
    opacity: 0.9;
    position: relative;
    text-align: center;
  }

  .footer::before {
    content: "";
    display: block;
    width: 100%;
    height: 12px;
    margin-bottom: 1rem;
    background: repeating-linear-gradient(
      -45deg,
      var(--deep-red) 0 14px,
      transparent 14px 28px,
      var(--deep-blue) 28px 42px,
      transparent 42px 56px
    );
    pointer-events: none;
  }

  .footer-content-mobile {
    display: none;
  }

  .footer p {
    margin: 0.4rem 0;
    font-size: 0.8rem;
    /* display: inline-flex; */
  }

  :global(.dark) .footer::before {
    background: repeating-linear-gradient(
      -45deg,
      #ff8a8a 0 14px,
      transparent 14px 28px,
      #9ecbff 28px 42px,
      transparent 42px 56px
    );
  }

  @media (max-width: 700px) {
    .footer-content-pc {
      display: none;
    }

    .footer-content-mobile {
      display: block;
    }
  }
</style>

<script>
  function fitBeian() {
    const wrap = document.getElementById("beian-wrap");
    const inner = document.getElementById("beian-inner");
    if (!wrap || !inner) return;

    inner.style.transform = "scale(1)";
    const scale = Math.min(1, wrap.clientWidth / inner.scrollWidth);
    inner.style.transform = `scale(${scale})`;
  }

  window.addEventListener("load", fitBeian);
  window.addEventListener("resize", fitBeian);
</script>