Initalize

node_modules/@lando/vitepress-theme-default-plus/components/VPLSponsors.vue

@@ -0,0 +1,213 @@
+<template>
+  <div
+    v-if="hasSponsors"
+    class="sponsors"
+  >
+    <span
+      v-if="props.title"
+      class="ad-header"
+    >
+      {{ props.title }}
+    </span>
+    <div class="sponsors-wrapper">
+      <div
+        v-for="(sponsor, index) in sponsorList"
+        :key="index"
+        :class="sponsor.classes"
+      >
+        <div class="sponsor-inner">
+          <a
+            :href="sponsor.url"
+            target="_blank"
+          >
+            <div class="sponsor-image"><img
+              :src="sponsor.logo"
+              :alt="sponsor.name"
+            ></div>
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <div
+      v-if="props.text || props.link"
+      class="sponsor-footer"
+    >
+      <a
+        :href="props.link"
+        target="_blank"
+      >
+        <div class="sponsor sponsor-full">
+          <span class="sponsor-link">
+            {{ props.text }}
+          </span>
+        </div>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import yaml from 'js-yaml';
+
+import {computed, onMounted, ref} from 'vue';
+import {useData} from 'vitepress';
+
+const extname = path => {
+  const file = path.split('/')[path.split('/').length - 1];
+  const fileparts = file.split('.');
+  return fileparts.length > 1 ? `.${fileparts[fileparts.length - 1]}` : undefined;
+};
+
+const {theme, frontmatter} = useData();
+const sponsors = frontmatter.value.sponsors ?? theme.value.sponsors ?? [];
+
+const props = defineProps({
+  text: {
+    type: [String, Boolean],
+    default: () => {
+      const {theme, frontmatter} = useData();
+      const sponsors = frontmatter.value.sponsors ?? theme.value.sponsors ?? [];
+      return sponsors.text ?? 'your logo?';
+    },
+  },
+  link: {
+    type: [String, Boolean],
+    default: () => {
+      const {theme, frontmatter} = useData();
+      const sponsors = frontmatter.value.sponsors ?? theme.value.sponsors ?? [];
+      return sponsors.link;
+    },
+  },
+  title: {
+    type: [String, Boolean],
+    default: 'SPONSORS',
+  },
+});
+
+// Set sponsor data to some reactive thing
+const data = ref(sponsors.data ?? []);
+
+// if data is a string/needs to be fetched then do that here
+onMounted(async () => {
+  // if data is already an array then we good
+  if (Array.isArray(data.value)) return;
+
+  // otherwise it SHOULD be a url string
+  try {
+    const url = new URL(data.value);
+    const response = await fetch(url.href);
+
+    // allow special file extension handling
+    switch (extname(url.pathname)) {
+      case '.yaml':
+      case '.yml':
+        data.value = yaml.load(await response.text());
+        break;
+      default:
+        data.value = await response.json();
+        break;
+    };
+  } catch (error) {
+    console.error(`could not fetch and parse data from ${data.value}`);
+    console.error(error);
+  }
+});
+
+// Compute sponsor list
+const sponsorList = computed(() => {
+  if (Array.isArray(data.value)) {
+    return data.value.map(sponsor => ({...sponsor, classes: `sponsor sponsor-${sponsor.type}`}));
+  } else {
+    return [];
+  }
+});
+
+// Compute whether we end up with any sponsors or not
+const hasSponsors = computed(() => sponsors !== false && sponsors && sponsors.data && sponsors.data.length > 0);
+</script>
+
+<style lang="scss" scoped>
+.sponsors-wrapper {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.sponsor {
+  height: 50px;
+  width: 33%;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  margin-top: 2px;
+  cursor: pointer;
+  border-radius: var(--vpl-c-border-radius);
+  .sponsor-inner {
+    background-color: var(--vp-carbon-ads-bg-color);
+    width: 100%;
+    height: 100%;
+    margin-left: 1px;
+    margin-right: 1px;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    border-radius: var(--vpl-c-border-radius);
+  }
+  &.sponsor-half {
+    width: 50%;
+  }
+  &.sponsor-full {
+    width: 100%;
+    margin-bottom: 10px;
+  }
+  .sponsor-image {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    padding: 5px;
+    img {
+      max-height: 40px;
+      max-width: 80%;
+    }
+  }
+}
+.sponsor-footer {
+  margin-top: 10px;
+  .sponsor {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    width: auto;
+    background-color: var(--vp-carbon-ads-bg-color);
+    width: 100%;
+    height: 50px;
+    margin-left: 1px;
+    margin-right: 1px;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    .sponsor-link {
+      color: var(--vp-c-text-3);
+      display: block;
+      font-weight: 700;
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: .4px;
+    }
+  }
+}
+@media (max-width: 1500px) {
+  .rightbar {
+    .sponsors {
+      display: none;
+    }
+  }
+}
+
+.read-mode {
+  .sponsors {
+    display: none;
+  }
+}
+</style>