vitepress 0.22.4 → 1.0.0-draft.3

package/dist/client/theme-default/components/BuySellAds.vue

@@ -1,152 +0,0 @@
-<script setup lang="ts">
-import { onMounted } from 'vue'
-
-// global _bsa
-const ID = 'bsa-cpc-script'
-
-declare global {
-  var _bsa: BSA | undefined
-
-  interface BSA {
-    init(
-      name: string,
-      code: string,
-      placement: string,
-      options: {
-        target: string
-        align: string
-        disable_css?: 'true' | 'false'
-      }
-    ): void
-  }
-}
-
-const { code, placement } = defineProps<{
-  code: string
-  placement: string
-}>()
-
-onMounted(() => {
-  if (!document.getElementById(ID)) {
-    const s = document.createElement('script')
-
-    s.id = ID
-    s.src = '//m.servedby-buysellads.com/monetization.js'
-
-    document.head.appendChild(s)
-
-    s.onload = () => {
-      load()
-    }
-  } else {
-    load()
-  }
-})
-
-function load() {
-  if (typeof _bsa !== 'undefined' && _bsa) {
-    const parent = document.querySelector('.bsa-cpc')!
-    // cleanup any existing ad to avoid them stacking
-    parent.innerHTML = ''
-
-    _bsa.init('default', code, `placement:${placement}`, {
-      target: '.bsa-cpc',
-      align: 'horizontal',
-      disable_css: 'true'
-    })
-  }
-}
-</script>
-
-<template>
-  <div class="buy-sell-ads">
-    <div class="bsa-cpc" />
-  </div>
-</template>
-
-<style scoped>
-.buy-sell-ads {
-  margin: 0 auto;
-  padding-top: 2rem;
-  font-size: 0.85rem;
-}
-
-.bsa-cpc {
-  border-radius: 6px;
-  background-color: var(--c-bg-accent);
-}
-
-.bsa-cpc ::v-deep(a._default_) {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  margin-bottom: 20px;
-  padding: 12px;
-  text-decoration: none;
-  line-height: 1.4;
-  font-weight: 400;
-  color: var(--c-text-light);
-}
-
-@media (min-width: 512px) {
-  .bsa-cpc ::v-deep(a._default_) {
-    flex-wrap: nowrap;
-  }
-}
-
-.bsa-cpc ::v-deep(.default-ad) {
-  display: none;
-}
-
-.bsa-cpc ::v-deep(a._default_ .default-image) {
-  flex-shrink: 0;
-  margin-right: 12px;
-  width: 24px;
-}
-
-.bsa-cpc ::v-deep(a._default_ .default-image img) {
-  border-radius: 4px;
-  height: 24px;
-  vertical-align: middle;
-}
-
-.bsa-cpc ::v-deep(._default_::after) {
-  border: 1px solid #1c90f3;
-  border-radius: 4px;
-  margin-top: 8px;
-  margin-left: 36px;
-  padding: 0 8px;
-  line-height: 22px;
-  font-size: 0.85em;
-  font-weight: 500;
-  color: #1c90f3;
-  content: 'Sponsored';
-}
-
-@media (min-width: 512px) {
-  .bsa-cpc ::v-deep(._default_::after) {
-    margin-top: 0px;
-    margin-left: 12px;
-  }
-}
-
-.bsa-cpc ::v-deep(.default-text) {
-  flex-grow: 1;
-  align-self: center;
-  width: calc(100% - 36px);
-}
-
-@media (min-width: 512px) {
-  .bsa-cpc ::v-deep(.default-text) {
-    width: auto;
-  }
-}
-
-.bsa-cpc ::v-deep(.default-title) {
-  font-weight: 600;
-}
-
-.bsa-cpc ::v-deep(.default-description) {
-  padding-left: 8px;
-}
-</style>

package/dist/client/theme-default/components/CarbonAds.vue

@@ -1,99 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted } from 'vue'
-
-const { code, placement } = defineProps<{
-  code: string
-  placement: string
-}>()
-
-const el = ref()
-
-onMounted(() => {
-  const s = document.createElement('script')
-  s.id = '_carbonads_js'
-  s.src = `//cdn.carbonads.com/carbon.js?serve=${code}&placement=${placement}`
-  el.value.appendChild(s)
-})
-</script>
-
-<template>
-  <div class="carbon-ads" ref="el" />
-</template>
-
-<style scoped>
-.carbon-ads {
-  border-radius: 4px;
-  margin: 0 auto;
-  padding: 8px;
-  max-width: 280px;
-  font-size: 0.75rem;
-  background-color: var(--c-bg-accent);
-  min-height: 105.38px; /* avoid layout shift on mobile */
-}
-
-.carbon-ads::after {
-  clear: both;
-  display: block;
-  content: '';
-}
-
-@media (min-width: 420px) {
-  .carbon-ads {
-    z-index: 1;
-    float: right;
-    margin: -8px -8px 24px 24px;
-    width: 146px;
-    max-width: 100%;
-    min-height: 200px;
-  }
-}
-
-@media (min-width: 1400px) {
-  .carbon-ads {
-    right: 8px;
-    float: none;
-    margin: 0;
-  }
-}
-
-.carbon-ads :deep(.carbon-img) {
-  float: left;
-  margin-right: 0.75rem;
-  max-width: 110px;
-  border: 1px solid var(--c-divider);
-}
-
-@media (min-width: 420px) {
-  .carbon-ads :deep(.carbon-img) {
-    float: none;
-    display: block;
-    margin-right: 0;
-    max-width: 130px;
-  }
-}
-
-.carbon-ads :deep(.carbon-img img) {
-  display: block;
-  width: 100%;
-  height: auto;
-}
-
-@media (min-width: 420px) {
-  .carbon-ads :deep(.carbon-text) {
-    padding-top: 8px;
-  }
-}
-
-.carbon-ads :deep(.carbon-text) {
-  display: block;
-  font-weight: 400;
-  color: var(--c-text-light);
-}
-
-.carbon-ads :deep(.carbon-poweredby) {
-  display: block;
-  padding-top: 2px;
-  font-weight: 400;
-  color: var(--c-text-lighter);
-}
-</style>

package/dist/client/theme-default/components/EditLink.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { useEditLink } from '../composables/editLink'
-import OutboundLink from './icons/OutboundLink.vue'
-
-const { url, text } = useEditLink()
-</script>
-
-<template>
-  <div class="edit-link">
-    <a
-      v-if="url"
-      class="link"
-      :href="url"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      {{ text }} <OutboundLink class="icon" />
-    </a>
-  </div>
-</template>
-
-<style scoped>
-.link {
-  display: inline-block;
-  font-size: 1rem;
-  font-weight: 500;
-  color: var(--c-text-light);
-}
-
-.link:hover {
-  text-decoration: none;
-  color: var(--c-brand);
-}
-
-.icon {
-  margin-left: 4px;
-}
-</style>

package/dist/client/theme-default/components/Home.vue

@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import HomeHero from './HomeHero.vue'
-import HomeFeatures from './HomeFeatures.vue'
-import HomeFooter from './HomeFooter.vue'
-</script>
-
-<template>
-  <main class="home" aria-labelledby="main-title">
-    <HomeHero />
-    <slot name="hero" />
-    <HomeFeatures />
-    <div class="home-content">
-      <Content />
-    </div>
-    <slot name="features" />
-    <HomeFooter />
-    <slot name="footer" />
-  </main>
-</template>
-
-<style scoped>
-.home {
-  padding-top: var(--header-height);
-}
-
-.home-content {
-  max-width: 960px;
-  margin: 0px auto;
-  padding: 0 1.5rem;
-}
-</style>

package/dist/client/theme-default/components/HomeFeatures.vue

@@ -1,143 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useData } from 'vitepress'
-
-const { frontmatter } = useData()
-
-const hasFeatures = computed(() => {
-  return frontmatter.value.features && frontmatter.value.features.length > 0
-})
-
-interface Feature {
-  title?: string
-  details?: string
-}
-
-const features = computed<Feature[]>(() => {
-  return frontmatter.value.features ? frontmatter.value.features : []
-})
-</script>
-
-<template>
-  <div v-if="hasFeatures" class="home-features">
-    <div class="wrapper">
-      <div class="container">
-        <div class="features">
-          <section
-            v-for="(feature, index) in features"
-            :key="index"
-            class="feature"
-          >
-            <h2 class="title" v-if="feature.title">{{ feature.title }}</h2>
-            <p class="details" v-if="feature.details">{{ feature.details }}</p>
-          </section>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.home-features {
-  margin: 0 auto;
-  padding: 2.5rem 0 2.75rem;
-  max-width: 960px;
-}
-
-.home-hero + .home-features {
-  padding-top: 0;
-}
-
-@media (min-width: 420px) {
-  .home-features {
-    padding: 3.25rem 0 3.5rem;
-  }
-
-  .home-hero + .home-features {
-    padding-top: 0;
-  }
-}
-
-@media (min-width: 720px) {
-  .home-features {
-    padding-right: 1.5rem;
-    padding-left: 1.5rem;
-  }
-}
-
-.wrapper {
-  padding: 0 1.5rem;
-}
-
-.home-hero + .home-features .wrapper {
-  border-top: 1px solid var(--c-divider);
-  padding-top: 2.5rem;
-}
-
-@media (min-width: 420px) {
-  .home-hero + .home-features .wrapper {
-    padding-top: 3.25rem;
-  }
-}
-
-@media (min-width: 720px) {
-  .wrapper {
-    padding-right: 0;
-    padding-left: 0;
-  }
-}
-
-.container {
-  margin: 0 auto;
-  max-width: 392px;
-}
-
-@media (min-width: 720px) {
-  .container {
-    max-width: 960px;
-  }
-}
-
-.features {
-  display: flex;
-  flex-wrap: wrap;
-  margin: -20px -24px;
-}
-
-.feature {
-  flex-shrink: 0;
-  padding: 20px 24px;
-  width: 100%;
-}
-
-@media (min-width: 720px) {
-  .feature {
-    width: calc(100% / 3);
-  }
-}
-
-.title {
-  margin: 0;
-  border-bottom: 0;
-  line-height: 1.4;
-  font-size: 1.25rem;
-  font-weight: 500;
-}
-
-@media (min-width: 420px) {
-  .title {
-    font-size: 1.4rem;
-  }
-}
-
-.details {
-  margin: 0;
-  line-height: 1.6;
-  font-size: 1rem;
-  color: var(--c-text-light);
-}
-
-.title + .details {
-  padding-top: 0.25rem;
-}
-</style>

package/dist/client/theme-default/components/HomeFooter.vue

@@ -1,50 +0,0 @@
-<script setup lang="ts">
-import { useData } from 'vitepress'
-
-const { frontmatter } = useData()
-</script>
-
-<template>
-  <footer v-if="frontmatter.footer" class="footer">
-    <div class="container">
-      <p class="text">{{ frontmatter.footer }}</p>
-    </div>
-  </footer>
-</template>
-
-<style scoped>
-.footer {
-  margin: 0 auto;
-  max-width: 960px;
-}
-
-@media (min-width: 720px) {
-  .footer {
-    padding: 0 1.5rem;
-  }
-}
-
-.container {
-  padding: 2rem 1.5rem 2.25rem;
-}
-
-.home-hero + .footer .container,
-.home-features + .footer .container,
-.home-content + .footer .container {
-  border-top: 1px solid var(--c-divider);
-}
-
-@media (min-width: 420px) {
-  .container {
-    padding: 3rem 1.5rem 3.25rem;
-  }
-}
-
-.text {
-  margin: 0;
-  text-align: center;
-  line-height: 1.4;
-  font-size: 0.9rem;
-  color: var(--c-text-light);
-}
-</style>

package/dist/client/theme-default/components/HomeHero.vue

@@ -1,161 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useData, withBase } from 'vitepress'
-import NavLink from './NavLink.vue'
-
-const { site, frontmatter } = useData()
-
-const showHero = computed(() => {
-  const { heroImage, heroText, tagline, actionLink, actionText } =
-    frontmatter.value
-  return heroImage || heroText || tagline || (actionLink && actionText)
-})
-
-const heroText = computed(() => frontmatter.value.heroText || site.value.title)
-const tagline = computed(
-  () => frontmatter.value.tagline || site.value.description
-)
-</script>
-
-<template>
-  <header v-if="showHero" class="home-hero">
-    <figure v-if="frontmatter.heroImage" class="figure">
-      <img
-        class="image"
-        :src="withBase(frontmatter.heroImage)"
-        :alt="frontmatter.heroAlt"
-      />
-    </figure>
-
-    <h1 v-if="heroText" id="main-title" class="title">{{ heroText }}</h1>
-    <p v-if="tagline" class="tagline">{{ tagline }}</p>
-
-    <NavLink
-      v-if="frontmatter.actionLink && frontmatter.actionText"
-      :item="{ link: frontmatter.actionLink, text: frontmatter.actionText }"
-      class="action"
-    />
-
-    <NavLink
-      v-if="frontmatter.altActionLink && frontmatter.altActionText"
-      :item="{
-        link: frontmatter.altActionLink,
-        text: frontmatter.altActionText
-      }"
-      class="action alt"
-    />
-  </header>
-</template>
-
-<style scoped>
-.home-hero {
-  margin: 2.5rem 0 2.75rem;
-  padding: 0 1.5rem;
-  text-align: center;
-}
-
-@media (min-width: 420px) {
-  .home-hero {
-    margin: 3.5rem 0;
-  }
-}
-
-@media (min-width: 720px) {
-  .home-hero {
-    margin: 4rem 0 4.25rem;
-  }
-}
-
-.figure {
-  padding: 0 1.5rem;
-}
-
-.image {
-  display: block;
-  margin: 0 auto;
-  width: auto;
-  max-width: 100%;
-  max-height: 280px;
-}
-
-.title {
-  margin-top: 1.5rem;
-  font-size: 2rem;
-}
-
-@media (min-width: 420px) {
-  .title {
-    font-size: 3rem;
-  }
-}
-
-@media (min-width: 720px) {
-  .title {
-    margin-top: 2rem;
-  }
-}
-
-.tagline {
-  margin: 0;
-  margin-top: 0.25rem;
-  line-height: 1.3;
-  font-size: 1.2rem;
-  color: var(--c-text-light);
-}
-
-@media (min-width: 420px) {
-  .tagline {
-    line-height: 1.2;
-    font-size: 1.6rem;
-  }
-}
-
-.action {
-  margin-top: 1.5rem;
-  display: inline-block;
-}
-
-.action.alt {
-  margin-left: 1.5rem;
-}
-
-@media (min-width: 420px) {
-  .action {
-    margin-top: 2rem;
-    display: inline-block;
-  }
-}
-
-.action :deep(.item) {
-  display: inline-block;
-  border-radius: 6px;
-  padding: 0 20px;
-  line-height: 44px;
-  font-size: 1rem;
-  font-weight: 500;
-  color: var(--c-bg);
-  background-color: var(--c-brand);
-  border: 2px solid var(--c-brand);
-  transition: background-color 0.1s ease;
-}
-
-.action.alt :deep(.item) {
-  background-color: var(--c-bg);
-  color: var(--c-brand);
-}
-
-.action :deep(.item:hover) {
-  text-decoration: none;
-  color: var(--c-bg);
-  background-color: var(--c-brand-light);
-}
-
-@media (min-width: 420px) {
-  .action :deep(.item) {
-    padding: 0 24px;
-    line-height: 52px;
-    font-size: 1.2rem;
-    font-weight: 500;
-  }
-}
-</style>