fix: custom block HeaderCode

Author: ktquez

package-lock.json

@@ -66,7 +66,7 @@
     "@vue-a11y/focus-loop": "^0.1.2",
     "@vue-a11y/skip-to": "^2.1.2",
     "@vue/composition-api": "^1.0.0-beta.11",
-    "@vueuse/core": "^4.0.0-beta.9",
+    "@vueuse/core": "^4.0.5",
     "vue-disqus": "^4.0.1"
   }
 }

package.json

@@ -129,7 +129,7 @@ module.exports = [
     'vuepress-plugin-container',
     {
       type: 'headerCode',
-      before: info => customBlock.headerCode[0].replace('%', info),
+      before: info => customBlock.headerCode[0].replace('%', info === 'HEADERCODE' ? '' : info),
       after: customBlock.headerCode[1]
     }
   ],

src/.vuepress/config/plugins.js

@@ -1,41 +1,44 @@
 <template>
-  <div
-    ref="headerCodeSnippet"
-    class="flex items-center justify-between w-full header-code"
-  >
-    <div class="pl-6 text-sm">
-      <slot />
-    </div>
-    <div class="flex">
-      <button
-        type="button"
-        class="p-4 text-xs uppercase opacity-0 focus:opacity-100"
-        :aria-label="t.skip.ariaLabel || t.skip.text"
-        @click="skipCodeSnippet"
-      >
-        {{ t.skip.text }}
-      </button>
-      <button
-        type="button"
-        class="flex items-center p-4 text-xs"
-        :aria-label="t.copy.ariaLabel || t.copy.text"
-        @click="copyCondeSnippet"
-      >
-        <vp-icon name="copy" />
-        <span
-          v-show="!copied"
-          class="pl-2 uppercase"
+  <div>
+    <div
+      ref="headerCodeSnippet"
+      class="flex items-center justify-between w-full header-code"
+    >
+      <div class="pl-6 text-sm">
+        {{ info }}
+      </div>
+      <div class="flex">
+        <button
+          type="button"
+          class="p-4 text-xs uppercase opacity-0 focus:opacity-100"
+          :aria-label="t.skip.ariaLabel || t.skip.text"
+          @click="skipCodeSnippet"
         >
-          {{ t.copy.text }}
-        </span>
-        <span
-          v-show="copied"
-          class="pl-2 uppercase"
+          {{ t.skip.text }}
+        </button>
+        <button
+          type="button"
+          class="flex items-center p-4 text-xs"
+          :aria-label="t.copy.ariaLabel || t.copy.text"
+          @click="copyCondeSnippet"
         >
-          {{ t.copy.textCopied }}
-        </span>
-      </button>
+          <vp-icon name="copy" />
+          <span
+            v-show="!copied"
+            class="pl-2 uppercase"
+          >
+            {{ t.copy.text }}
+          </span>
+          <span
+            v-show="copied"
+            class="pl-2 uppercase"
+          >
+            {{ t.copy.textCopied }}
+          </span>
+        </button>
+      </div>
     </div>
+    <slot />
   </div>
 </template>
 
@@ -61,13 +64,13 @@ export default {
 
     function skipCodeSnippet () {
       const parent = refs.headerCodeSnippet.parentElement
-      if (parent) programmaticFocus(parent.nextSibling)
+      if (parent && parent.nextElementSibling) programmaticFocus(parent.nextElementSibling)
     }
 
     function copyCondeSnippet () {
-      const { copy, supported } = useClipboard()
-      if (supported) {
-        copy(refs.headerCodeSnippet.nextSibling && refs.headerCodeSnippet.nextSibling.textContent)
+      const { copy, isSupported } = useClipboard()
+      if (isSupported) {
+        copy(refs.headerCodeSnippet.nextElementSibling && refs.headerCodeSnippet.nextElementSibling.textContent)
         copied.value = true
         root.$announcer.assertive(t.value.copy.textCopied)
         setTimeout(() => {

src/.vuepress/theme/components/headerCodeSnippet.vue

@@ -203,6 +203,10 @@
     }
   }
 
+  figure [class*=language-] {
+    margin-bottom: 0;
+  }
+
   .token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog { color:#999 }
   .token.punctuation { color:#ccc }
   .token.attr-name,.token.deleted,.token.namespace,.token.tag { color:#E58A85}

src/.vuepress/theme/styles/_markdown.scss

@@ -19,16 +19,15 @@ Suspendisse rhoncus mauris a sapien gravida, ut pulvinar urna ultrices. Aenean s
 Praesent vehicula pharetra tincidunt. Proin nec elit volutpat, lobortis dui eu, hendrerit sapien. Donec sapien quam, dictum sit amet neque eu, malesuada ultrices libero. Morbi blandit augue in turpis porttitor porta.
 
 :::: fig code
-::: headerCode
-index.html
-:::
+::: headerCode index.html
 ```html
 <small>
   <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">
     Creative Commons Attribution Share-alike license
   </a>
 </small>
 ```
+:::
 ::: figcap
 Using &lt;small&gt; around a [Creative Commons license](http://creativecommons.org/choose/) link with `rel="license"`
 :::

src/posts/2020-09-01-post-test.md

@@ -35,9 +35,7 @@ After completing, create a PR and request review from members for the latest adj
 
 ### Blog posts
 
-::: headerCode
-2020-05-12-my-post.md
-:::
+::: headerCode 2020-05-12-my-post.md
 ```yaml
 ---
 title: Post title # (Required) - between 50-65 characters
@@ -49,6 +47,7 @@ author: author's nickname # (Optional)
 date: YYYY/MM/DD HH:ii:ss # (Required)
 ---
 ```
+:::
 
 ::: alert warning
 Available categories: `[news, aria, wcag, tools, packages, spa, html]`.
@@ -75,8 +74,7 @@ Add your author information `src/config/authors.json`, soon we will have a page
 
 ### Figure + Blockquote + Figcaption 
 
-::: headerCode
-:::
+::::: headerCode
 ```
 :::: fig bq
 ::: bq
@@ -87,6 +85,7 @@ VuePress is composed of two parts: a minimalistic static site generator with a V
 :::
 ::::
 ```
+:::::
 
 :::: fig bq
 ::: bq
@@ -99,8 +98,7 @@ VuePress is composed of two parts: a minimalistic static site generator with a V
 
 ### Tip, Note, Warning, Danger
 
-::: headerCode
-:::
+:::: headerCode
 ```
 ::: alert tip
 This is a tip
@@ -118,6 +116,7 @@ This is a warning
 This is a danger
 :::
 ```
+::::
 
 ::: alert tip
 This is a tip
@@ -137,6 +136,7 @@ This is a danger
 
 ### Figure + HeaderCode + Code block + Figcaption
 
+::::: headerCode
 ```
 :::: fig code
 ::: headerCode
@@ -153,52 +153,53 @@ Basic usage of Vue announcer
 :::
 ::::
 ```
+:::::
 
 :::: fig code
-::: headerCode
-main.js
-:::
+::: headerCode main.js
 ```js
 import Vue from 'vue'
 import VueAnnouncer from '@vue-a11y/announcer'
 
 Vue.use(VueAnnouncer)
 ```
+:::
 ::: figcap
 Basic usage of Vue announcer
 :::
 ::::
 
 ### headerCode + Code block
 
+:::: headerCode
 ```
-::: headerCode
-main.js
-:::
-``js
+::: headerCode main.js 
+```js
 import Vue from 'vue'
 import VueAnnouncer from '@vue-a11y/announcer'
  
 Vue.use(VueAnnouncer)
 ``
+:::
 ```
+::::
 
-::: headerCode
-main.js
-:::
+::: headerCode main.js
 ```js
 import Vue from 'vue'
 import VueAnnouncer from '@vue-a11y/announcer'
 
 Vue.use(VueAnnouncer)
 ```
+:::
 
 ## Vue in markdown
 
 ### IntersectionObserver component
 
 Use this component for lazy-load of iframes, images, among other media.
 
+::: headerCode
 ```vue
 <intersection-observer>
   <template v-slot="data">
@@ -211,4 +212,5 @@ Use this component for lazy-load of iframes, images, among other media.
     </iframe>
   </template>
 </intersection-observer>
-```
+```
+:::

src/project/posts-guide.md

@@ -18,16 +18,15 @@ Suspendisse rhoncus mauris a sapien gravida, ut pulvinar urna ultrices. Aenean s
 Praesent vehicula pharetra tincidunt. Proin nec elit volutpat, lobortis dui eu, hendrerit sapien. Donec sapien quam, dictum sit amet neque eu, malesuada ultrices libero. Morbi blandit augue in turpis porttitor porta.
 
 :::: fig code
-::: headerCode
-index.html
-:::
+::: headerCode index.html
 ```html
 <small>
   <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">
     Creative Commons Attribution Share-alike license
   </a>
 </small>
 ```
+:::
 ::: figcap
 Using &lt;small&gt; around a [Creative Commons license](http://creativecommons.org/choose/) link with `rel="license"`
 :::

src/pt/posts/2020-09-01-posts-de-teste.md

@@ -34,7 +34,7 @@ Nós também temos uma [issue](https://github.com/vue-a11y/vue-a11y.com/issues/1
 Nossa intenção é recompensar o criador por cada conteúdo publicado no site, em breve iremos conseguir esse feito.
 
 ::: alert warning
-Criamos um guia com dicas para criar postagens, receitas ou dicas. [Guia de postagens](/pt/projeto/guia.html#posts-guide).
+Criamos um guia com dicas para criar postagens, receitas ou dicas. [Guia de postagens](/pt/projeto/guia-de-postagens.html#posts-guide).
 :::
 
 ## Respondendo perguntas