docs: carbon ads

Author: codebender828

website/components/CarbonAd.js

@@ -0,0 +1,84 @@
+import { Css } from '@chakra-ui/vue'
+import { css } from '@emotion/css'
+import { loadScript } from '~/utils'
+
+const CarbonAd = {
+  name: 'CarbonAd',
+  inject: ['$chakraTheme', '$chakraColorMode'],
+  computed: {
+    colorMode: vm => vm.$chakraColorMode(),
+    theme: vm => vm.$chakraTheme(),
+    className () {
+      const _css = styles => css(Css(styles)(this.theme))
+
+      return _css({
+        display: 'block',
+        position: 'relative',
+        margin: '32px 0',
+        maxWidth: '480px',
+        minHeight: '132px',
+        borderRadius: '4px',
+        bg: this.colorMode === 'light' ? 'gray.50' : 'rgba(36, 70, 93, 0.32)',
+        color: 'inherit',
+        '@media (max-width: 480px)': {
+          fontSize: '0.875em'
+        },
+        a: {
+          textDecoration: 'none',
+          color: 'inherit',
+          '&:hover': {
+            textDecoration: 'underline'
+          }
+        },
+        '.carbon-wrap': {
+          display: 'flex',
+          padding: '16px'
+        },
+        '.carbon-img': {
+          marginRight: '16px',
+          img: {
+            display: 'block'
+          }
+        },
+        '.carbon-text': {
+          fontSize: '0.8rem',
+          lineHeight: 1.4
+        },
+        '.carbon-poweredby': {
+          position: 'absolute',
+          bottom: '16px',
+          left: '162px',
+          color: `${this.theme?.colors.gray[500]} !important`,
+          display: 'block',
+          fontSize: '10px',
+          fontWeight: 'semibold',
+          textTransform: 'uppercase',
+          lineHeight: 1,
+          letterSpacing: '0.2px'
+        }
+      })
+    },
+    css: vm => styles => Css(styles)(vm.theme)
+  },
+  async mounted () {
+    await this.$nextTick()
+    const { carbonContainer } = this.$refs
+    if (!carbonContainer) return
+
+    const script = loadScript(
+      '//cdn.carbonads.com/carbon.js?serve=CEBI5K7I&placement=vuechakra-uicom',
+      carbonContainer
+    )
+
+    script.id = '_carbonads_js'
+    script.type = 'text/javascript'
+  },
+  render (h) {
+    return h('span', {
+      class: this.className,
+      ref: 'carbonContainer'
+    })
+  }
+}
+
+export default CarbonAd

website/components/MDXComponents.js

@@ -69,7 +69,7 @@ const MDXComponents = {
     name: 'H1',
     render () {
       return (
-        <CHeading as="h1" size="2xl" my="1em" { ...props}>
+        <CHeading as="h1" id="chakra-documentation-title" size="2xl" my="1em" { ...props}>
           {this.$slots.default}
         </CHeading>
       )

website/layouts/default.vue

@@ -105,10 +105,12 @@ export default {
       },
       code: {
         light: {
-          color: 'indigo.500'
+          color: 'indigo.500',
+          bg: 'indigo.50'
         },
         dark: {
-          color: 'indigo.100'
+          color: 'indigo.500',
+          bg: 'indigo.50'
         }
       },
       MDXComponents

website/pages/accessibility.mdx

@@ -5,6 +5,8 @@ heavy-lifting for you in order to allow you to focus on building your applicatio
 
 All authored components are compliant with the WAI-ARIA standards for authored components.
 
+<carbon-ad />
+
 We've taken the time to write summarized description of the accessibility support for
 all authored components in @chakra-ui/vue. We called this document an accessibility report
 and can be found in the `accessibility.md` file in the respective component's source directory.

website/pages/accordion.mdx

@@ -11,6 +11,7 @@ Accordions display a list of high-level options that can expand/collapse to reve
 
 See `CAccordion`'s <a href="https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CAccordion/accessibility.md">accessibility report</a>
 
+<carbon-ad />
 
 ## Imports
 

website/pages/alert.mdx

@@ -11,6 +11,8 @@ Alerts are used to communicate a state that affects a system, feature or page.
 
 See `CAlert`'s <a href="https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CAlert/accessibility.md">accessibility report</a>
 
+<carbon-ad />
+
 ## Import
 
 Chakra UI Vue exports 4 Alert related components.

website/pages/alertdialog.mdx

@@ -12,6 +12,8 @@ or action.
 
 See `CAlertDialog`'s <a href="https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CAlertDialog/accessibility.md">accessibility report</a>
 
+<carbon-ad />
+
 ## Import
 
 Chakra UI exports 7 alert dialog related components.

website/pages/aspectratiobox.mdx

@@ -11,6 +11,8 @@ import SEO from '../components/SEO'
 `CAspectRatioBox` component is used to embed responsive videos and maps, etc. It
 uses a very common [**padding hack**](https://css-tricks.com/aspect-ratio-boxes/) to achieve this.
 
+<carbon-ad />
+
 ## Import
 
 ```js

website/pages/auto-import-components.mdx

@@ -12,6 +12,7 @@ you to directly consume Chakra UI Vue components without manually importing and
 
 This provides a better developer experience without sacrificing your applications bundle-size performance.
 
+<carbon-ad />
 
 ## Installation
 

website/pages/avatar.mdx

@@ -9,6 +9,8 @@ import SEO from '../components/SEO'
 
 The `CAvatar` component is used to visually represent a user by displaying their profile picture, initials or a fallback icon.
 
+<carbon-ad />
+
 ## Import
 
 Chakra UI Vue exports 3 Avatar related components.