text ad

vuejs · Apr 27, 2023 · a4df330 · a4df330
1 parent 447f7b9
commit a4df330
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 16 deletions.
diff --git a/.vitepress/config.ts b/.vitepress/config.ts
@@ -4,6 +4,7 @@ import { defineConfigWithTheme } from 'vitepress'
 import type { Config as ThemeConfig } from '@vue/theme'
 import baseConfig from '@vue/theme/config'
 import { headerPlugin } from './headerMdPlugin'
+import { textAdPlugin } from './textAdMdPlugin'
 
 const nav: ThemeConfig['nav'] = [
   {
@@ -43,7 +44,10 @@ const nav: ThemeConfig['nav'] = [
         items: [
           { text: 'Partners', link: '/partners/' },
           { text: 'Themes', link: '/ecosystem/themes' },
-          { text: 'Certification', link: 'https://certification.vuejs.org/?ref=vuejs-nav' },
+          {
+            text: 'Certification',
+            link: 'https://certification.vuejs.org/?ref=vuejs-nav'
+          },
           { text: 'Jobs', link: 'https://vuejobs.com/?ref=vuejs' },
           { text: 'T-Shirt Shop', link: 'https://vue.threadless.com/' }
         ]
@@ -314,7 +318,7 @@ export const sidebar: ThemeConfig['sidebar'] = {
         {
           text: 'Animation Techniques',
           link: '/guide/extras/animation'
-        },
+        }
         // {
         //   text: 'Building a Library for Vue',
         //   link: '/guide/extras/building-a-library'
@@ -674,7 +678,7 @@ export default defineConfigWithTheme<ThemeConfig>({
 
   markdown: {
     config(md) {
-      md.use(headerPlugin)
+      md.use(headerPlugin).use(textAdPlugin)
     }
   },
 

diff --git a/.vitepress/jobsMdPlugin.ts → .vitepress/textAdMdPlugin.ts b/.vitepress/jobsMdPlugin.ts → .vitepress/textAdMdPlugin.ts
@@ -2,17 +2,17 @@ import MarkdownIt from 'markdown-it'
 
 const excludedPages = [
   'guide/introduction.md',
-  'guide/quick-start.md',
-  'guide/essentials/computed.md',
-  'guide/essentials/conditional.md',
-  'guide/essentials/list.md',
-  'guide/essentials/event-handling.md',
-  'guide/essentials/forms.md',
-  'guide/components/registration.md',
-  'guide/components/props.md',
-  'guide/components/events.md',
-  'guide/components/slots.md',
-  'guide/built-ins/teleport.md',
+  // 'guide/quick-start.md',
+  // 'guide/essentials/computed.md',
+  // 'guide/essentials/conditional.md',
+  // 'guide/essentials/list.md',
+  // 'guide/essentials/event-handling.md',
+  // 'guide/essentials/forms.md',
+  // 'guide/components/registration.md',
+  // 'guide/components/props.md',
+  // 'guide/components/events.md',
+  // 'guide/components/slots.md',
+  // 'guide/built-ins/teleport.md',
   'about/faq.md',
   'about/team.md',
   'about/releases.md',
@@ -22,13 +22,13 @@ const excludedPages = [
   'translations/index.md'
 ]
 
-export const jobsPlugin = (md: MarkdownIt) => {
+export const textAdPlugin = (md: MarkdownIt) => {
   md.renderer.rules.heading_close = (tokens, i, options, env, self) => {
     const relativePath = env.relativePath
     const renderedContent = self.renderToken(tokens, i, options)
 
     return excludedPages.includes(relativePath)
       ? renderedContent
-      : renderedContent.replace(/<\/h1>/, '</h1><VueJobs/>')
+      : renderedContent.replace(/<\/h1>/, '</h1><TextAd/>')
   }
 }
diff --git a/.vitepress/theme/components/TextAd.vue b/.vitepress/theme/components/TextAd.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+function track() {
+  fathom.trackGoal('7QLWSAAZ', 0)
+}
+</script>
+
+<template>
+  <div class="text-ad">
+    <span>Ad</span>
+    <a
+      href="https://docs.aircode.io/chatgpt/"
+      target="_blank"
+      rel="noopener nofollow"
+      @click="track"
+      >Build a ChatGPT bot with JavaScript in 5 minutes</a
+    >
+  </div>
+</template>
+
+<style scoped>
+.text-ad {
+  font-size: 13px;
+  margin-bottom: 28px;
+  background-color: var(--vt-c-bg-soft);
+  padding: 0.75rem;
+  position: relative;
+  display: flex;
+  border-radius: 8px;
+}
+
+.text-ad span {
+  white-space: nowrap;
+  display: inline-block;
+  color: var(--vt-c-blue);
+  font-size: 12px;
+  border: 1px solid var(--vt-c-blue);
+  border-radius: 4px;
+  padding: 0 4px;
+  margin-right: 1rem;
+}
+
+.text-ad a {
+  color: var(--vt-c-text-2);
+}
+</style>
diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts
@@ -10,6 +10,7 @@ import {
 import SponsorsAside from './components/SponsorsAside.vue'
 import VueSchoolLink from './components/VueSchoolLink.vue'
 import Banner from './components/Banner.vue'
+import TextAd from './components/TextAd.vue'
 
 export default Object.assign({}, VPTheme, {
   Layout: () => {
@@ -25,5 +26,6 @@ export default Object.assign({}, VPTheme, {
     app.provide('prefer-sfc', preferSFC)
     app.provide('filter-headers', filterHeadersByPreference)
     app.component('VueSchoolLink', VueSchoolLink)
+    app.component('TextAd', TextAd)
   }
 })