docs: use tailwindcss typography plugin (#268)

* docs: use tailwindcss typography plugin * docs: update layout colors * docs: fix content spacing * docs: update components * docs: fix content styling * docs: fix copy button * docs: update styles * docs: put back border under h2 * docs: fix releases with tailwindcss/typography plugin * docs: update typography style
nuxt · Jul 20, 2020 · cc2110a · cc2110a
1 parent dfb5f99
commit cc2110a
Show file tree

Hide file tree

Showing 28 changed files with 203 additions and 194 deletions.
diff --git a/docs/assets/css/content.css b/docs/assets/css/content.css
@@ -1,153 +1,69 @@
-.dark-mode .nuxt-content {
-  & h2,
-  & h3,
-  & blockquote {
-    @apply border-gray-800;
-  }
-
-  & > code,
-  & li > code,
-  & p > code,
-  & h3 > code {
-    @apply bg-gray-800;
-  }
-}
-
-.nuxt-content h2 {
-  @apply text-3xl font-black mb-4 pb-1 border-b -mt-12 pt-16;
-
-  & > a {
-    @apply ml-6;
+.nuxt-content {
+  & h2, & h3 {
+    /* Fix anchor scrollTo */
     &::before {
-      content: "#";
-      @apply text-green-500 font-normal -ml-6 pr-1 absolute opacity-100;
+      display: block;
+      content: " ";
+      margin-top: -85px;
+      height: 85px;
+      visibility: hidden;
+      pointer-events: none;
     }
-  }
 
-  &:hover {
-    & > a::before {
-      @apply opacity-100;
-    }
-  }
-}
-.nuxt-content h3 {
-  @apply text-2xl font-extrabold mb-2 pb-1 border-b -mt-12 pt-16;
-
-  & > a {
-    @apply ml-6;
-    &::before {
-      content: "#";
-      @apply text-green-500 font-normal -ml-5 pr-1 absolute opacity-100;
-    }
-  }
+    /* Style anchor links on headings added by @nuxt/content */
+    & > a {
+      @apply ml-5;
 
-  &:hover {
-    & > a::before {
-      @apply opacity-100;
-    }
-  }
-}
-
-.nuxt-content h4 {
-  @apply text-xl font-semibold mb-2 pb-1 border-b -mt-16 pt-20;
-}
-
-@screen lg {
-  .nuxt-content h2 a,
-  .nuxt-content h3 a {
-    @apply ml-0;
-    &::before {
-      @apply opacity-0;
-    }
-  }
-}
-
-.nuxt-content ul,
-.nuxt-content ol {
-  @apply list-disc list-inside mb-4 pl-2;
+      &::before {
+        content: "#";
+        @apply text-green-500 font-normal -ml-5 pr-2 absolute opacity-100;
+      }
 
-  & > li {
-    @apply leading-7;
+      @screen lg {
+        @apply ml-0;
 
-    & > ul {
-      @apply pl-4;
+        &::before {
+          @apply opacity-0;
+        }
+      }
     }
-  }
-}
-
-.nuxt-content ol {
-  @apply list-decimal;
-}
-
-.nuxt-content {
-  & a {
-    @apply text-green-500;
-
     &:hover {
-      @apply underline;
+      & > a::before {
+        @apply opacity-100;
+      }
     }
   }
 
-  & p {
-    @apply mb-4 leading-7;
-  }
-
-  & > blockquote {
-    @apply py-2 pl-4 mb-4 border-l-4;
+  & .nuxt-content-highlight {
+    @apply relative;
 
-    & p:last-child {
-      @apply mb-0;
+    /* Style filename span added by @nuxt/content */
+    & > .filename {
+      @apply absolute right-0 top-0 text-gray-100 z-10 italic leading-none mr-3 mt-3;
     }
-  }
-
-  & > code,
-  & li > code,
-  & p > code {
-    @apply bg-gray-100 p-1 text-sm shadow-xs rounded;
-  }
-
-  & h3 > code {
-    @apply bg-gray-100 p-1 text-lg shadow-xs rounded;
-  }
-
-  & pre[class*="language-"] {
-    @apply rounded mt-0 mb-4 bg-gray-800 text-sm relative;
 
-    > code {
-      @apply bg-gray-800 relative;
-      text-shadow: none;
-    }
-  }
-
-  & video {
-    @apply w-full border rounded shadow-md;
-  }
-}
-
-.nuxt-content-highlight {
-  @apply relative;
-
-  & > .filename {
-    @apply absolute right-0 top-0 text-gray-600 font-light z-10 mr-2 mt-1 text-sm;
-  }
-
-  & > pre {
+    /* Style copy button added in `pages/_slug.vue` */
     & > .copy {
-      @apply hidden absolute right-0 bottom-0 shadow-lg px-3 py-1 text-white text-sm uppercase font-sans rounded-md bg-transparent border border-white tracking-wide font-semibold mr-3 mb-3;
+      @apply hidden absolute right-0 bottom-0 leading-none shadow-lg px-3 py-2 text-white bg-gray-800 text-sm uppercase rounded-md border border-white font-semibold mr-3 mb-3;
 
       &:hover {
         @apply bg-gray-700;
       }
 
       &:focus {
-        @apply outline-none bg-gray-900;
+        @apply outline-none bg-gray-600;
       }
     }
-
     &:hover {
       & > .copy {
         @apply block;
       }
     }
   }
+
+  /* Force style on pre elements */
+  & pre[class*="language-"] {
+    /* Make pre static so the relative goes to the parent (.nuxt-content-highlight) */
+    @apply bg-gray-800 static;
+  }
 }
diff --git a/docs/components/ArticleToc.vue b/docs/components/ArticleToc.vue
@@ -5,7 +5,7 @@
         class="mb-3 lg:mb-2 text-gray-500 dark:text-gray-600 uppercase tracking-wide font-bold text-sm lg:text-xs"
       >{{ $t('toc.title') }}</h3>
       <nav>
-        <scrollactive highlight-first-item active-class="text-green-500" tag="ul">
+        <scrollactive highlight-first-item active-class="text-green-500" :offset="0" tag="ul">
           <li
             v-for="link of toc"
             :key="link.id"

diff --git a/docs/components/global/bases/BaseAlert.vue b/docs/components/global/bases/BaseAlert.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="alert border-l-4 p-4 mb-4" :class="`alert-${type}`">
+  <div class="alert border-l-4 rounded-r-md p-4 mb-4 mt-4" :class="`alert-${type}`">
     <div class="flex">
       <div class="flex-shrink-0 self-start pt-1">
         <IconInfo v-if="type === 'info'" class="alert-icon" />
         <IconAlert v-else class="alert-icon" />
       </div>
-      <div class="ml-2 alert-content text-sm">
+      <div class="ml-2 alert-content">
         <slot />
       </div>
     </div>
@@ -28,13 +28,16 @@ export default {
   @apply m-0 !important;
 }
 .alert a {
-  @apply text-gray-800 !important;
+  @apply text-gray-700 !important;
+}
+.alert strong {
+  @apply text-current;
 }
 .alert-warning {
   @apply bg-orange-100 border-orange-400;
 }
 .alert-warning code {
-  @apply bg-orange-200 shadow-none;
+  @apply bg-orange-200 shadow-none border-0 text-current;
 }
 .alert-warning .alert-icon {
   @apply text-orange-400;
@@ -58,7 +61,7 @@ export default {
   @apply bg-blue-100 border-blue-400;
 }
 .alert-info code {
-  @apply bg-blue-200 shadow-none;
+  @apply bg-blue-200 shadow-none border-0 text-current;
 }
 .alert-info .alert-icon {
   @apply text-blue-400;

diff --git a/docs/components/global/bases/BaseList.vue b/docs/components/global/bases/BaseList.vue
@@ -1,10 +1,10 @@
 <template>
-  <ul class="mt-4 list-none">
-    <li v-for="(item, i) in items" :key="i" class="mt-3 flex">
+  <div>
+    <div v-for="(item, i) in items" :key="i" class="mt-3 flex">
       <IconCheck class="h-6 w-6 mt-px mr-3 flex-shrink-0" />
       {{ item }}
-    </li>
-  </ul>
+    </div>
+  </div>
 </template>
 
 <script>

diff --git a/docs/components/global/bases/CodeGroup.vue b/docs/components/global/bases/CodeGroup.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="code-group">
-    <div class="rounded-t border-b-2 border-gray-700 px-2 bg-gray-800 text-sm text-white relative">
+    <div
+      class="rounded-t-md border-b-2 border-gray-700 px-2 bg-gray-800 text-sm text-white relative"
+    >
       <button
         v-for="({ label }, i) in tabs"
         ref="tabs"
@@ -28,23 +30,14 @@ export default {
       this.switchTab(newValue)
     }
   },
-  created () {
-    this.$slots.default.filter(slot => Boolean(slot.componentOptions)).map((slot) => {
-      this.tabs.push({
-        label: slot.componentOptions.propsData.label,
-        elm: null
-      })
-    })
-    this.activeTabIndex = 0
-  },
   mounted () {
     this.tabs = this.$slots.default.filter(slot => Boolean(slot.componentOptions)).map((slot) => {
       return {
         label: slot.componentOptions.propsData.label,
         elm: slot.elm
       }
     })
-    this.updateHighlighteUnderlinePosition()
+    this.$nextTick(this.updateHighlighteUnderlinePosition)
   },
   methods: {
     switchTab (i) {
@@ -76,15 +69,15 @@ button {
 }
 
 .highlight-underline {
-  @apply bg-green-600 absolute;
+  @apply bg-green-500 absolute;
   bottom: -2px;
   height: 2px;
   transition: left 150ms, width 150ms;
 }
 
 .code-group ::v-deep {
   & pre[class*="language-"] {
-    @apply rounded-t-none;
+    @apply rounded-t-none mt-0;
   }
 }
 </style>
diff --git a/docs/components/global/bases/CodeSandbox.vue b/docs/components/global/bases/CodeSandbox.vue
@@ -1,6 +1,14 @@
 <template>
-  <div class="codesandbox w-full mb-6 mx-auto bg-black text-white text-3xl text-center flex items-center justify-center overflow-hidden rounded">
-    <iframe v-if="isIntersecting && src" :src="src" title="CodeSandbox editor" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin" class="w-full overflow-hidden" />
+  <div
+    class="codesandbox w-full mb-6 mx-auto bg-black text-white text-3xl text-center flex items-center justify-center overflow-hidden rounded-md"
+  >
+    <iframe
+      v-if="isIntersecting && src"
+      :src="src"
+      title="CodeSandbox editor"
+      sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+      class="w-full overflow-hidden"
+    />
     <span v-else>Loading CodeSandbox...</span>
   </div>
 </template>

diff --git a/docs/components/global/examples/ExampleMultiselect.vue b/docs/components/global/examples/ExampleMultiselect.vue
@@ -23,6 +23,20 @@ export default {
 
 <style>
 /* purgecss start ignore */
-@import 'vue-multiselect/dist/vue-multiselect.min.css';
+@import "vue-multiselect/dist/vue-multiselect.min.css";
 /* purgecss end ignore */
+
+.multiselect {
+  & ul {
+    @apply m-0 p-0;
+
+    & li {
+      @apply m-0 p-0;
+
+      &::before {
+        @apply hidden;
+      }
+    }
+  }
+}
 </style>
diff --git a/docs/components/global/icons/IconCheck.vue b/docs/components/global/icons/IconCheck.vue
@@ -3,7 +3,7 @@
     <circle cx="12" cy="12" r="10" class="text-green-200 fill-current dark:text-green-700" />
     <path
       d="M10 14.59l6.3-6.3a1 1 0 0 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-3-3a1 1 0 0 1 1.4-1.42l2.3 2.3z"
-      class="text-green-600 fill-current dark:text-white"
+      class="text-green-500 fill-current dark:text-white"
     />
   </svg>
 </template>
diff --git a/docs/content/en/advanced.md b/docs/content/en/advanced.md
@@ -38,7 +38,7 @@ Since Nuxt 2.13+, `nuxt export` has a crawler feature integrated which will craw
 
 </base-alert>
 
-When using `nuxt generate`, you need to specify the dynamic routes with [`generate.routes`](https://nuxtjs.org/api/configuration-generate/#routes), because Nuxt does not know what these routes will be so it can't generate them.
+When using `nuxt generate`, you need to specify the dynamic routes with [generate.routes](https://nuxtjs.org/api/configuration-generate/#routes), because Nuxt does not know what these routes will be so it can't generate them.
 
 **Example**
 

diff --git a/docs/content/en/displaying.md b/docs/content/en/displaying.md
@@ -5,7 +5,6 @@ position: 5
 category: Getting started
 ---
 
-<br>
 <base-alert type="info">This section is only for Markdown files.</base-alert>
 
 ## Component

diff --git a/docs/content/en/index.md b/docs/content/en/index.md
@@ -33,8 +33,6 @@ Demonstration of using `$content` and `<nuxt-content>` to display Markdown pages
   <source src="https://res.cloudinary.com/nuxt/video/upload/q_auto/v1588091670/nuxt-content_wxnjje.ogv" type="video/ogg" />
 </video>
 
-<br>
-
 Using `$content()` on a directory to list, filter and search content:
 
 <video poster="https://res.cloudinary.com/nuxt/video/upload/v1588095794/nuxt-content-movies_c0cq9p.jpg" loop playsinline controls>

diff --git a/docs/content/en/writing.md b/docs/content/en/writing.md
@@ -261,9 +261,8 @@ Please choose a *framework*:
 
 **Result:**
 
-<div class="border rounded p-2 mb-2 bg-gray-200 dark:bg-gray-800">
-
-Please choose a *framework*:
+<div class="border rounded-md p-2 mb-2 bg-gray-200 dark:bg-gray-800">
+Please choose a <i>framework</i>:
 
 <example-multiselect :options="['Vue', 'React', 'Angular', 'Svelte']"></example-multiselect>