lucide/docs/.vitepress/theme/components/overrides/VPFooter.vue

<script setup lang="ts">
import { useData } from 'vitepress';
import { useSidebar } from 'vitepress/dist/client/theme-default/composables/sidebar';
import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue';
import { computed } from 'vue';

const { theme } = useData();
const { hasSidebar } = useSidebar();

const githubLink = computed(
  () => theme.value.socialLinks.find(({ icon }) => icon === 'github').link,
);

const links = computed(() => [
  {
    text: 'License',
    href: '/license',
  },
  {
    text: 'Contribute',
    href: '/contribute/',
  },
  {
    text: 'Changelog',
    href: `${githubLink.value}/releases`,
  },
  {
    text: 'GitHub',
    href: `${githubLink.value}`,
  },
  {
    text: 'Issues',
    href: `${githubLink.value}/issues`,
  },
]);
</script>

<template>
  <footer
    v-if="theme.footer"
    class="VPFooter"
    :class="{ 'has-sidebar': hasSidebar }"
  >
    <div class="container">
      <div class="sponsors">
        <a
          href="https://vercel.com?utm_source=lucide&utm_campaign=oss"
          rel="noreferrer noopener"
        >
          <img
            src="/vercel.svg"
            alt="Powered by Vercel"
            width="200"
          />
        </a>
        <a
          href="https://www.digitalocean.com/?refcode=b0877a2caebd&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge"
          rel="noreferrer noopener"
        >
          <img
            src="/digitalocean.svg"
            alt="Digital Ocean"
            width="200"
          />
        </a>
      </div>
      <div class="links">
        <VPLink
          v-for="link in links"
          :href="link.href"
          :key="link.text"
          :rel="link.href.startsWith('http') ? 'noreferrer noopener' : undefined"
        >
          {{ link.text }}
        </VPLink>
      </div>
      <div>
        <p
          v-if="theme.footer.message"
          class="message"
          v-html="theme.footer.message"
        ></p>
        <p
          v-if="theme.footer.copyright"
          class="copyright"
          v-html="theme.footer.copyright"
        ></p>
      </div>
    </div>
  </footer>
</template>

<style scoped>
.VPFooter {
  position: relative;
  z-index: var(--vp-z-index-footer);
  border-top: 1px solid var(--vp-c-gutter);
  padding: 32px 24px;
  background-color: var(--vp-c-bg);
}

.VPFooter.has-sidebar {
  display: none;
}

.container {
  margin: 0 auto;
  max-width: calc(var(--vp-layout-max-width) - 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.message,
.copyright {
  line-height: 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-c-text-2);
}

.message {
  order: 2;
}
.copyright {
  order: 1;
}

.links,
.sponsors {
  display: flex;
  gap: 32px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

@media (min-width: 1152px) {
  .VPFooter {
    padding: 32px;
  }

  .container {
    flex-direction: row-reverse;
  }
  .links {
    margin-right: auto;
  }
}
</style>