Init

Author: devcoderoad

.eslintrc.js

@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  extends: [
+    '@nuxtjs',
+    'prettier',
+    'prettier/vue',
+    'plugin:prettier/recommended',
+    'plugin:nuxt/recommended'
+  ],
+  plugins: [],
+  // add your custom rules here
+  rules: {}
+}

.gitignore

@@ -1,34 +1,90 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+/logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
 
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
 
-# testing
-/coverage
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
 
-# next.js
-/.next/
-/out/
+# Coverage directory used by tools like istanbul
+coverage
 
-# production
-/build
+# nyc test coverage
+.nyc_output
 
-# misc
-.DS_Store
-*.pem
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
 
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
 
-# local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
+.idea
+
+# Service worker
+sw.*
+
+# macOS
+.DS_Store
 
-# vercel
-.vercel
+# Vim swap files
+*.swp

.nvmrc

@@ -1 +1 @@
-v12.13.0
+v12.13.0

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "bracketSpacing": true
+}

.prettierrc.js

@@ -1,34 +1,20 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# nuxtjs-tailwind-website
 
-## Getting Started
-
-First, run the development server:
+## Build Setup
 
 ```bash
-npm run dev
-# or
-yarn dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+# install dependencies
+$ yarn install
 
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+# serve with hot reload at localhost:3000
+$ yarn dev
 
-## Learn More
+# build for production and launch server
+$ yarn build
+$ yarn start
 
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+# generate static project
+$ yarn generate
+```
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).

README.md

@@ -0,0 +1,48 @@
+/* tailwindcss */
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+html {
+  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-size: 16px;
+  word-spacing: 1px;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+body {
+  background-color: #fff;
+  color: #343a40;
+}
+
+.wrapper {
+  padding-top: -64px;
+}
+
+.headlineHero {
+  background-image: url('https://images.unsplash.com/photo-1517927033932-b3d18e61fb3a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1440&q=80');
+  background-repeat: no-repeat;
+  background-position: top center;
+  background-size: cover;
+  @apply min-h-screen flex justify-center items-center text-center mx-auto text-white;
+}
+
+.btn {
+  @apply rounded-full text-sm font-medium capitalize focus:to-gray-700 px-5;
+}
+
+.btn-xs {
+  @apply rounded-full text-xs font-medium capitalize focus:to-gray-700 px-2;
+}

assets/css/tailwind.css

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <select v-model="$colorMode.preference" class="color-mode">
+      <option value="system">System</option>
+      <option value="light">Light</option>
+      <option value="dark">Dark</option>
+      <!-- <option value="sepia">Sepia</option> -->
+    </select>
+  </div>
+</template>

components/ColorMode.vue

@@ -0,0 +1,35 @@
+<template>
+  <svg
+    class="NuxtLogo"
+    width="245"
+    height="180"
+    viewBox="0 0 452 342"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M139 330l-1-2c-2-4-2-8-1-13H29L189 31l67 121 22-16-67-121c-1-2-9-14-22-14-6 0-15 2-22 15L5 303c-1 3-8 16-2 27 4 6 10 12 24 12h136c-14 0-21-6-24-12z"
+      fill="#00C58E"
+    />
+    <path
+      d="M447 304L317 70c-2-2-9-15-22-15-6 0-15 3-22 15l-17 28v54l39-67 129 230h-49a23 23 0 0 1-2 14l-1 1c-6 11-21 12-23 12h76c3 0 17-1 24-12 3-5 5-14-2-26z"
+      fill="#108775"
+    />
+    <path
+      d="M376 330v-1l1-2c1-4 2-8 1-12l-4-12-102-178-15-27h-1l-15 27-102 178-4 12a24 24 0 0 0 2 15c4 6 10 12 24 12h190c3 0 18-1 25-12zM256 152l93 163H163l93-163z"
+      fill="#2F495E"
+    />
+  </svg>
+</template>
+
+<style>
+.NuxtLogo {
+  animation: 1s appear;
+  margin: auto;
+}
+
+@keyframes appear {
+  0% {
+    opacity: 0;
+  }
+}
+</style>

components/Logo.vue

@@ -0,0 +1,48 @@
+<template>
+  <div v-if="items && items.length > 0" class="lg:container mx-auto my-12">
+    <div class="row">
+      <Nuxt-Link
+        v-for="(item, index) in items"
+        :key="item.slug"
+        :to="localePath({ name: 'article-slug', params: { slug: item.slug } })"
+        class="col-12 mb-4 shadow-lg hover:shadow-xl"
+      >
+        <figure class="md:flex bg-gray-100 p-8 md:p-0" :rel="`card-${index}`">
+          <img
+            class="
+              w-32
+              h-32
+              md:w-48 md:h-auto md:rounded-none
+              rounded-full
+              mx-auto
+              bg-gray-200
+            "
+            :src="`${item.img}`"
+            alt=""
+            width="384"
+            height="512"
+          />
+          <div class="pt-6 md:p-8 text-center md:text-left space-y-4">
+            <blockquote>
+              <p class="text-lg font-semibold">
+                {{ item.description }}
+              </p>
+            </blockquote>
+            <figcaption class="font-medium">
+              <div class="text-cyan-600">{{ item.author.name }}</div>
+              <div class="text-gray-500">Posted: {{ item.createdAt }}</div>
+            </figcaption>
+          </div>
+        </figure>
+      </Nuxt-Link>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    items: { type: Array, required: true, default: () => [] }
+  }
+}
+</script>

components/cards/Article.vue

@@ -0,0 +1,49 @@
+<template>
+  <div v-if="item" class="lg:container mx-auto my-12">
+    <div class="row">
+      <Nuxt-Link
+        :to="localePath({ name: 'article-slug', params: { slug: item.slug } })"
+        class="col-12 mb-4 shadow-lg hover:shadow-xl"
+      >
+        <figure class="md:flex bg-gray-100 p-8 md:p-0">
+          <img
+            class="
+              w-32
+              h-32
+              md:w-48 md:h-auto md:rounded-none
+              rounded-full
+              mx-auto
+              bg-gray-200
+              order-2
+            "
+            :src="`${item.img}`"
+            alt=""
+            width="384"
+            height="512"
+          />
+          <div class="pt-6 md:p-8 text-center md:text-left space-y-4 order-1">
+            <blockquote>
+              <p class="text-lg font-semibold">
+                {{ item.description }}
+              </p>
+            </blockquote>
+            <figcaption class="font-medium">
+              <div class="text-cyan-600">
+                {{ item.author && item.author.name }}
+              </div>
+              <div class="text-gray-500">Posted: {{ item.createdAt }}</div>
+            </figcaption>
+          </div>
+        </figure>
+      </Nuxt-Link>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    item: { type: Object, required: true, default: () => {} }
+  }
+}
+</script>