feat: add Oruga as UI framework option (#635)

nuxt · Oct 19, 2020 · b6facaf · b6facaf
1 parent d045b20
commit b6facaf
Show file tree

Hide file tree

Showing 8 changed files with 184 additions and 1 deletion.
diff --git a/packages/cna-template/template/frameworks/oruga/assets/oruga.png b/packages/cna-template/template/frameworks/oruga/assets/oruga.png
diff --git a/packages/cna-template/template/frameworks/oruga/package.json b/packages/cna-template/template/frameworks/oruga/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@oruga-ui/oruga": "^0.2.2"
+  }
+}
diff --git a/packages/cna-template/template/frameworks/oruga/pages/index.vue b/packages/cna-template/template/frameworks/oruga/pages/index.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="container">
+    <img class="logo" src="~/assets/oruga.png">
+    <h1 class="title">
+      Oruga
+    </h1>
+    <p class="subtitle">
+      Oruga UI is like a caterpillar, minimal and yet functional.<br>It's in your hands turning it into a butterfly.
+    </p>
+    <div class="buttons">
+      <o-button size="large" variant="primary" @click="goToDocs()">
+        Documentation
+      </o-button>
+      <o-button size="large" variant="info" @click="goToGithub()">
+        GitHub
+      </o-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HomePage',
+  methods: {
+    goToDocs () {
+      window.location = 'https://oruga.io/documentation/'
+    },
+    goToGithub () {
+      window.location = 'https://github.com/oruga-ui/oruga'
+    }
+  }
+}
+</script>
+
+<style>
+
+.logo {
+  max-width: 300px;
+}
+
+.o-button {
+  padding: 10px 30px;
+}
+
+.container {
+  margin: 0 auto;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  flex-direction: column;
+}
+
+.title {
+  font-family:
+    'Quicksand',
+    'Source Sans Pro',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    sans-serif;
+  display: block;
+  font-weight: 300;
+  font-size: 100px;
+  color: #35495e;
+  letter-spacing: 1px;
+}
+
+.subtitle {
+  font-weight: 300;
+  font-size: 42px;
+  color: #526488;
+  word-spacing: 5px;
+  padding-bottom: 15px;
+}
+
+.buttons {
+  padding-top: 15px;
+}
+</style>
diff --git a/packages/cna-template/template/nuxt/nuxt.config.js b/packages/cna-template/template/nuxt/nuxt.config.js
@@ -102,6 +102,9 @@
     <%_ } else if (ui === 'buefy') { _%>
     // https://go.nuxtjs.dev/buefy
     'nuxt-buefy',
+    <%_ } else if (ui === 'oruga') { _%>
+      // Doc: https://oruga.io/documentation/#nuxt
+      '@oruga-ui/oruga/nuxt',
     <%_ } else if (ui === 'chakra-ui') { _%>
     // https://go.nuxtjs.dev/chakra
     '@chakra-ui/nuxt',

diff --git a/packages/create-nuxt-app/lib/prompts.js b/packages/create-nuxt-app/lib/prompts.js
@@ -42,7 +42,8 @@ module.exports = [
       { name: 'Tachyons', value: 'tachyons' },
       { name: 'Tailwind CSS', value: 'tailwind' },
       { name: 'Vuesax', value: 'vuesax' },
-      { name: 'Vuetify.js', value: 'vuetify' }
+      { name: 'Vuetify.js', value: 'vuetify' },
+      { name: 'Oruga', value: 'oruga' }
     ],
     default: 'none'
   },

diff --git a/packages/create-nuxt-app/test/snapshots/index.test.js.md b/packages/create-nuxt-app/test/snapshots/index.test.js.md
@@ -3249,6 +3249,92 @@ Generated by [AVA](https://avajs.dev).
     }␊
     `
 
+## verify ui: Oruga
+
+> Generated files
+
+    [
+      '.editorconfig',
+      '.gitignore',
+      'README.md',
+      'assets/README.md',
+      'assets/oruga.png',
+      'components/Logo.vue',
+      'components/README.md',
+      'layouts/README.md',
+      'layouts/default.vue',
+      'middleware/README.md',
+      'nuxt.config.js',
+      'package.json',
+      'pages/README.md',
+      'pages/index.vue',
+      'plugins/README.md',
+      'static/README.md',
+      'static/favicon.ico',
+      'store/README.md',
+    ]
+
+> package.json
+
+    {
+      dependencies: {
+        '@oruga-ui/oruga': '^0.2.2',
+        'core-js': '^3.6.5',
+        nuxt: '^2.14.6',
+      },
+      devDependencies: {},
+      private: true,
+      scripts: {
+        build: 'nuxt build',
+        dev: 'nuxt',
+        generate: 'nuxt generate',
+        start: 'nuxt start',
+      },
+    }
+
+> Generated nuxt.config.js
+
+    `export default {␊
+      // Global page headers (https://go.nuxtjs.dev/config-head)␊
+      head: {␊
+        title: 'output',␊
+        meta: [␊
+          { charset: 'utf-8' },␊
+          { name: 'viewport', content: 'width=device-width, initial-scale=1' },␊
+          { hid: 'description', name: 'description', content: '' }␊
+        ],␊
+        link: [␊
+          { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }␊
+        ]␊
+      },␊
+    ␊
+      // Global CSS (https://go.nuxtjs.dev/config-css)␊
+      css: [␊
+      ],␊
+    ␊
+      // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)␊
+      plugins: [␊
+      ],␊
+    ␊
+      // Auto import components (https://go.nuxtjs.dev/config-components)␊
+      components: true,␊
+    ␊
+      // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)␊
+      buildModules: [␊
+      ],␊
+    ␊
+      // Modules (https://go.nuxtjs.dev/config-modules)␊
+      modules: [␊
+          // Doc: https://oruga.io/documentation/#nuxt␊
+          '@oruga-ui/oruga/nuxt',␊
+      ],␊
+    ␊
+      // Build Configuration (https://go.nuxtjs.dev/config-build)␊
+      build: {␊
+      }␊
+    }␊
+    `
+
 ## verify ui: Tachyons
 
 > Generated files

diff --git a/packages/create-nuxt-app/test/snapshots/index.test.js.snap b/packages/create-nuxt-app/test/snapshots/index.test.js.snap
diff --git a/renovate.json b/renovate.json
@@ -57,6 +57,10 @@
     {
       "packagePatterns": ["wdio", "webdriver"],
       "groupName": "webdriverio packages"
+    },
+    {
+      "packagePatterns": ["oruga"],
+      "groupName": "oruga packages"
     }
   ]
 }