docs: update components (#413)

* ✨ (docs and exemple ) add collapsed and redirect navigation * 🍱 (iconAlert) add icon alert * 🔧 (windi.config.js) add purple color * ✨ (Alert) add Alert component and new alert types * 🐛 (Alert) fix classes and name * ✨ (iconAlert) update svg * ♻️ (installation) refacto w/ docus component * ♻️ (routing) refacto w/ docus component * ♻️ (directory-structure) refacto w/ docus compoenents * ♻️ (commands) refacto w/ docus components * ♻️ (docs/conclusion) refacto w/ docus components * ♻️ (docs/upgrading) refacto w/ docus components * ♻️ (docs/views) refacto w/ docus components * ♻️ (docs - context-helpers) refacto w/ docus components * ♻️ (server-side-rendering) update * ♻️ (docs - static-site-generation) update * ♻️ (docs - nuxt-lifecycle) refact w/ docus components * ♻️ (docs) update links (remove /2.x) * ♻️ (docs - features) update w/ docus components * ♻️ (docs - directory-structure) refacto w/ docus components * ♻️ (docs - configuration glossary) refacto w/ docus components * docs: update icon and title * ♻️ (docs - internals-glossary) refacto w/ docus components * ✨ (docs) add redirect on first page section if last page section * ♻️ (docs - components-glossary) refacto w/ docus components * 🐛 (docs - components gloassry - $nuxt) fix description * 🍱 (img) add github imgs for deployment section * ♻️ (docs - deployment) refacto w/ docus components * ♻️ (examples - routing) refacto w/ docus components * ♻️ (examples - data-fetching) refacto w/ docus components * ♻️ (examples - assets-management) refacto w/ docus components * ♻️ (examples - transitions) refacto w/ docus components * ♻️ (examples - seo) refacto w/ docus components * ♻️ (examples - loading) refacto w/ docus components * ♻️ (examples - miscellaneous) refacto w/ docus components * ♻️ (examples - middlewares) refacto w/ docus components * ✨ (examples - plugins) refacto w/ docus components * ♻️ (examples - modules) refacto w/ docus components * ♻️ (examples) replace code-sandbox w/ docus code-sandbox components * ♻️ (static-site-generation) refacto base alert w/ docus components Co-authored-by: Florent <flo@nuxtjs.com> Co-authored-by: Yaël Guilloux <yael.guilloux@gmail.com>
nuxt-themes · Jun 14, 2021 · a80bb85 · a80bb85
1 parent 892fa42
commit a80bb85
Show file tree

Hide file tree

Showing 261 changed files with 1,462 additions and 1,851 deletions.
diff --git a/nuxtjs.org/components/Alert.vue b/nuxtjs.org/components/Alert.vue
@@ -0,0 +1,136 @@
+<template>
+  <div class="p-4 mt-4 mb-4 rounded-lg alert text-sm leading-relaxed" :class="[type]">
+    <div class="flex items-center space-x-4">
+      <div>
+        <Component :is="`IconAlert${type}`" class="w-5 h-5" />
+      </div>
+      <div class="flex-grow alert-content">
+        <Markdown unwrap="p" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+import { Markdown } from '~docus/utils'
+export default defineComponent({
+  components: { Markdown },
+  props: {
+    /**
+     * @values info, success, warning, danger, next, star
+     */
+    type: {
+      type: String,
+      default: 'info',
+      validator(value) {
+        return ['info', 'success', 'warning', 'danger', 'next', 'star'].includes(value)
+      }
+    }
+  }
+})
+</script>
+
+<style lang="postcss" scoped>
+.alert {
+  &.success {
+    @apply bg-green-50 dark:bg-green-800 dark:bg-opacity-25 text-green-600 dark:text-green-200;
+    >>> {
+      code {
+        @apply bg-green-100 dark:bg-green-900 dark:bg-opacity-50 shadow-none text-current;
+      }
+      a:hover {
+        code {
+          @apply border-green-400 dark:border-green-700;
+        }
+      }
+    }
+  }
+  &.info {
+    @apply bg-blue-50 dark:bg-blue-800 dark:bg-opacity-25 text-blue-600 dark:text-blue-200;
+    >>> {
+      code {
+        @apply bg-blue-100 dark:bg-blue-900 dark:bg-opacity-50 shadow-none text-current;
+      }
+      a:hover {
+        code {
+          @apply border-blue-400 dark:border-blue-700;
+        }
+      }
+    }
+  }
+  &.next {
+    @apply bg-gray-50 dark:bg-gray-800 dark:bg-opacity-25 text-gray-600 dark:text-gray-200;
+    >>> {
+      code {
+        @apply bg-gray-100 dark:bg-gray-900 dark:bg-opacity-50 shadow-none text-current;
+      }
+      a:hover {
+        code {
+          @apply border-gray-400 dark:border-gray-700;
+        }
+      }
+    }
+  }
+  &.star {
+    @apply bg-purple-50 dark:bg-purple-800 dark:bg-opacity-25 text-purple-600 dark:text-purple-200;
+    >>> {
+      code {
+        @apply bg-purple-100 dark:bg-purple-900 dark:bg-opacity-50 shadow-none text-current;
+      }
+      a:hover {
+        code {
+          @apply border-purple-400 dark:border-purple-700;
+        }
+      }
+    }
+  }
+  &.warning {
+    @apply bg-yellow-50 dark:bg-yellow-800 dark:bg-opacity-25 text-yellow-600 dark:text-yellow-100;
+    >>> {
+      code {
+        @apply bg-yellow-100 dark:bg-yellow-900 dark:bg-opacity-50 shadow-none text-current;
+      }
+      a:hover {
+        code {
+          @apply border-yellow-400 dark:border-yellow-700;
+        }
+      }
+    }
+  }
+  &.danger {
+    @apply bg-red-50 dark:bg-red-800 dark:bg-opacity-25 text-red-600 dark:text-red-100;
+    >>> {
+      code {
+        @apply bg-red-100 dark:bg-red-900 dark:bg-opacity-50 shadow-none text-current;
+      }
+      a:hover {
+        code {
+          @apply border-red-400 dark:border-red-700;
+        }
+      }
+    }
+  }
+  >>> {
+    strong {
+      @apply font-semibold text-current;
+    }
+    a {
+      @apply underline border-none font-semibold text-current;
+      code {
+        @apply border border-transparent border-dashed;
+      }
+    }
+  }
+}
+.alert >>> p {
+  @apply m-0 !important;
+}
+.dark .alert {
+  >>> {
+    a {
+      @apply text-current;
+    }
+  }
+}
+</style>
diff --git a/nuxtjs.org/components/IconAlertdanger.vue b/nuxtjs.org/components/IconAlertdanger.vue
@@ -0,0 +1,9 @@
+<template>
+  <svg fill="currentColor" viewBox="0 0 20 20">
+    <path
+      fill-rule="evenodd"
+      d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
+      clip-rule="evenodd"
+    ></path>
+  </svg>
+</template>
diff --git a/nuxtjs.org/components/IconAlertinfo.vue b/nuxtjs.org/components/IconAlertinfo.vue
@@ -0,0 +1,12 @@
+<template>
+  <svg
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+  </svg>
+</template>
diff --git a/nuxtjs.org/components/IconAlertnext.vue b/nuxtjs.org/components/IconAlertnext.vue
@@ -0,0 +1,12 @@
+<template>
+  <svg
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <path d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+  </svg>
+</template>
diff --git a/nuxtjs.org/components/IconAlertstar.vue b/nuxtjs.org/components/IconAlertstar.vue
@@ -0,0 +1,14 @@
+<template>
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    stroke="currentColor"
+  >
+    <path
+      d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+    ></path>
+  </svg>
+</template>
diff --git a/nuxtjs.org/components/IconAlertsuccess.vue b/nuxtjs.org/components/IconAlertsuccess.vue
@@ -0,0 +1,12 @@
+<template>
+  <svg
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+  </svg>
+</template>
diff --git a/nuxtjs.org/components/IconAlertwarning.vue b/nuxtjs.org/components/IconAlertwarning.vue
@@ -0,0 +1,12 @@
+<template>
+  <svg
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <path d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+  </svg>
+</template>