├── .prettierrc
├── favicon.ico
├── assets
    ├── logo.png
    ├── README.md
    └── css
    │   ├── tailwind.css
    │   └── theme.css
├── static
    ├── favicon.ico
    ├── apple-icon.png
    ├── favicon-16x16.png
    ├── favicon-32x32.png
    ├── favicon-96x96.png
    ├── ms-icon-70x70.png
    ├── apple-icon-57x57.png
    ├── apple-icon-60x60.png
    ├── apple-icon-72x72.png
    ├── apple-icon-76x76.png
    ├── ms-icon-144x144.png
    ├── ms-icon-150x150.png
    ├── ms-icon-310x310.png
    ├── android-icon-36x36.png
    ├── android-icon-48x48.png
    ├── android-icon-72x72.png
    ├── android-icon-96x96.png
    ├── apple-icon-114x114.png
    ├── apple-icon-120x120.png
    ├── apple-icon-144x144.png
    ├── apple-icon-152x152.png
    ├── apple-icon-180x180.png
    ├── android-icon-144x144.png
    ├── android-icon-192x192.png
    ├── apple-icon-precomposed.png
    ├── browserconfig.xml
    └── README.md
├── layouts
    ├── default.vue
    ├── README.md
    └── theme.vue
├── plugins
    ├── vue-lazyload.js
    ├── theme4nuxt.js
    └── README.md
├── pages
    ├── index.vue
    ├── howto.vue
    ├── store.vue
    ├── blog
    │   ├── _path
    │   │   └── index.vue
    │   └── index.vue
    ├── about.vue
    └── README.md
├── .editorconfig
├── middleware
    └── README.md
├── store
    ├── README.md
    └── index.js
├── components
    ├── core
    │   ├── heading
    │   │   └── index.vue
    │   ├── services
    │   │   └── index.vue
    │   ├── skills
    │   │   └── index.vue
    │   ├── prices
    │   │   └── index.vue
    │   ├── tiles
    │   │   └── index.vue
    │   └── cards
    │   │   └── index.vue
    ├── theme
    │   ├── ComponentWrapper.vue
    │   ├── index.js
    │   └── nav
    │   │   └── index.vue
    └── posts
    │   └── index.vue
├── .eslintrc.js
├── .snyk
├── postcss.config.js
├── nuxt.config.js
├── .gitignore
├── package.json
├── themes
    ├── theme5.js
    ├── theme8.js
    ├── index.js
    ├── theme3.js
    ├── theme7.js
    ├── theme4.js
    ├── theme6.js
    ├── theme1.js
    └── theme2.js
└── README.md


/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "semi": false,
3 |   "singleQuote": true
4 | }
5 | 


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swina/theme4nuxt/HEAD/favicon.ico


--------------------------------------------------------------------------------
/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swina/theme4nuxt/HEAD/assets/logo.png


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swina/theme4nuxt/HEAD/static/favicon.ico


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     <nuxt />
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/static/apple-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swina/theme4nuxt/HEAD/static/apple-icon.png


--------------------------------------------------------------------------------
/static/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swina/theme4nuxt/HEAD/static/favicon-16x16.png


--------------------------------------------------------------------------------
/static/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swina/theme4nuxt/HEAD/static/favicon-32x32.png


--------------------------------------------------------------------------------
/static/favicon-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swina/theme4nuxt/HEAD/static/favicon-96x96.png


--------------------------------------------------------------------------------
/static/ms-icon-70x70.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swina/theme4nuxt/HEAD/static/ms-icon-70x70.png


--------------------------------------------------------------------------------
/static/apple-icon-57x57.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swina/theme4nuxt/HEAD/static/apple-icon-57x57.png


--------------------------------------------------------------------------------
/static/apple-icon-60x60.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swina/theme4nuxt/HEAD/static/apple-icon-60x60.png


--------------------------------------------------------------------------------
/static/apple-icon-72x72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swina/theme4nuxt/HEAD/static/apple-icon-72x72.png


--------------------------------------------------------------------------------
/static/apple-icon-76x76.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swina/theme4nuxt/HEAD/static/apple-icon-76x76.png


--------------------------------------------------------------------------------
/static/ms-icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swina/theme4nuxt/HEAD/static/ms-icon-144x144.png


--------------------------------------------------------------------------------
/static/ms-icon-150x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swina/theme4nuxt/HEAD/static/ms-icon-150x150.png


--------------------------------------------------------------------------------
/static/ms-icon-310x310.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swina/theme4nuxt/HEAD/static/ms-icon-310x310.png


--------------------------------------------------------------------------------
/static/android-icon-36x36.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swina/theme4nuxt/HEAD/static/android-icon-36x36.png


--------------------------------------------------------------------------------
/static/android-icon-48x48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swina/theme4nuxt/HEAD/static/android-icon-48x48.png


--------------------------------------------------------------------------------
/static/android-icon-72x72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swina/theme4nuxt/HEAD/static/android-icon-72x72.png


--------------------------------------------------------------------------------
/static/android-icon-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swina/theme4nuxt/HEAD/static/android-icon-96x96.png


--------------------------------------------------------------------------------
/static/apple-icon-114x114.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swina/theme4nuxt/HEAD/static/apple-icon-114x114.png


--------------------------------------------------------------------------------
/static/apple-icon-120x120.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swina/theme4nuxt/HEAD/static/apple-icon-120x120.png


--------------------------------------------------------------------------------
/static/apple-icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swina/theme4nuxt/HEAD/static/apple-icon-144x144.png


--------------------------------------------------------------------------------
/static/apple-icon-152x152.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swina/theme4nuxt/HEAD/static/apple-icon-152x152.png


--------------------------------------------------------------------------------
/static/apple-icon-180x180.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swina/theme4nuxt/HEAD/static/apple-icon-180x180.png


--------------------------------------------------------------------------------
/static/android-icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swina/theme4nuxt/HEAD/static/android-icon-144x144.png


--------------------------------------------------------------------------------
/static/android-icon-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swina/theme4nuxt/HEAD/static/android-icon-192x192.png


--------------------------------------------------------------------------------
/static/apple-icon-precomposed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swina/theme4nuxt/HEAD/static/apple-icon-precomposed.png


--------------------------------------------------------------------------------
/plugins/vue-lazyload.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import VueLazyload from 'vue-lazyload';
3 | 
4 | Vue.use(VueLazyload);


--------------------------------------------------------------------------------
/plugins/theme4nuxt.js:
--------------------------------------------------------------------------------
1 | import theme from '~/themes/theme1.js'
2 | 
3 | export default ({ app }, inject) => {
4 |   inject('theme4nuxt', () => theme)
5 | }
6 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div><nuxt/></div>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   layout: 'theme'
 8 | }
 9 | </script>
10 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/layouts/README.md:
--------------------------------------------------------------------------------
1 | # LAYOUTS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your Application Layouts.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).
8 | 


--------------------------------------------------------------------------------
/static/browserconfig.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>


--------------------------------------------------------------------------------
/assets/README.md:
--------------------------------------------------------------------------------
1 | # ASSETS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).
8 | 


--------------------------------------------------------------------------------
/plugins/README.md:
--------------------------------------------------------------------------------
1 | # PLUGINS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins).
8 | 


--------------------------------------------------------------------------------
/pages/howto.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   
 3 |     <div class="w-4/5 px-4">
 4 |       <div class="leading-loose w-full" v-html="howto"></div>
 5 |     </div>
 6 |   
 7 | </template>
 8 | 
 9 | <script>
10 |   import howto from './README.md'
11 | 
12 |   export default {
13 |     layout: 'theme',
14 |     computed: {
15 |       howto() {
16 |         return howto
17 |       }
18 |     }
19 |   }
20 | </script>
21 | 


--------------------------------------------------------------------------------
/middleware/README.md:
--------------------------------------------------------------------------------
1 | # MIDDLEWARE
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your application middleware.
6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages.
7 | 
8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).
9 | 


--------------------------------------------------------------------------------
/pages/store.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="w-full py-12 min-h-full relative pin-t justify-start px-4">
 3 |     <h1 class="font-light border-b">Store</h1>
 4 |     <no-ssr><v-componentWrapper name="core/cards" :options="options"/></no-ssr>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   layout: 'theme',
11 |   computed:{
12 |     options(){
13 |       return { contest: 'products' }
14 |     }
15 |   }
16 | }
17 | </script>


--------------------------------------------------------------------------------
/store/README.md:
--------------------------------------------------------------------------------
 1 | # STORE
 2 | 
 3 | **This directory is not required, you can delete it if you don't want to use it.**
 4 | 
 5 | This directory contains your Vuex Store files.
 6 | Vuex Store option is implemented in the Nuxt.js framework.
 7 | 
 8 | Creating a file in this directory automatically activates the option in the framework.
 9 | 
10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).
11 | 


--------------------------------------------------------------------------------
/static/README.md:
--------------------------------------------------------------------------------
 1 | # STATIC
 2 | 
 3 | **This directory is not required, you can delete it if you don't want to use it.**
 4 | 
 5 | This directory contains your static files.
 6 | Each file inside this directory is mapped to `/`.
 7 | Thus you'd want to delete this README.md before deploying to production.
 8 | 
 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`.
10 | 
11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static).
12 | 


--------------------------------------------------------------------------------
/components/core/heading/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <div :class="options.css" v-lazy:background="background">
 4 |             <!--<img v-lazy="background" class="h-64 absolute pin-t pin-l w-full"/>-->
 5 |         </div>
 6 |     </div>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |     computed:{
12 |         background(){
13 |             return this.options.bg
14 |         }
15 |     },
16 |     props: {
17 |         options: { type: Object , required: false , default:()=> {css:'object-cover'} }
18 |     }
19 | }
20 | </script>


--------------------------------------------------------------------------------
/components/theme/ComponentWrapper.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <component :is="loadcomponent" :options="options"/>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |     props: { 
 8 |         name: { type: String , required: true },
 9 |         options: { type: Object , required: false , default:()=>{}}
10 |     },    
11 |     computed:{
12 |          loadcomponent(){
13 |             let chunk = this.name
14 |             return () =>  import(/* webpackChunkName: 'theme4nuxt_' */ '~/components/' + this.name)
15 |         },
16 |     }
17 | }
18 | </script>


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     browser: true,
 5 |     node: true
 6 |   },
 7 |   parserOptions: {
 8 |     parser: 'babel-eslint'
 9 |   },
10 |   extends: [
11 |     // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
12 |     // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
13 |     'plugin:vue/essential',
14 |   ],
15 |   // required to lint *.vue files
16 |   plugins: [
17 |     'vue'
18 |   ],
19 |   // add your custom rules here
20 |   rules: {}
21 | }


--------------------------------------------------------------------------------
/.snyk:
--------------------------------------------------------------------------------
 1 | # Snyk (https://snyk.io) policy file, patches or ignores known vulnerabilities.
 2 | version: v1.25.0
 3 | ignore: {}
 4 | # patches apply the minimum changes required to fix a vulnerability
 5 | patch:
 6 |   SNYK-JS-LODASH-567746:
 7 |     - nuxt > @nuxt/telemetry > inquirer > lodash:
 8 |         patched: '2023-04-11T06:52:18.401Z'
 9 |     - nuxt > @nuxt/builder > @nuxt/webpack > hard-source-webpack-plugin > lodash:
10 |         patched: '2023-04-11T06:52:18.401Z'
11 |     - nuxt > @nuxt/builder > @nuxt/webpack > optimize-css-assets-webpack-plugin > last-call-webpack-plugin > lodash:
12 |         patched: '2023-04-11T06:52:18.401Z'
13 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
 1 | const join = require('path').join
 2 | const tailwindJS = join(__dirname, 'tailwind.js')
 3 | 
 4 | module.exports = {
 5 |   plugins: [
 6 |     require('tailwindcss')(tailwindJS),
 7 |     require('autoprefixer')
 8 |   ]
 9 | }
10 | /*
11 | const tailwindcss = require('tailwindcss')
12 | const purgecss = require('@fullhuman/postcss-purgecss')
13 | const cssnano = require('cssnano')
14 | const autoprefixer = require('autoprefixer')
15 | 
16 | module.exports = {
17 |   plugins: [
18 |     tailwindcss('./tailwind.js'),
19 |     cssnano({
20 |       preset: 'default',
21 |     }),
22 |     purgecss({
23 |       content: ['./layouts/**///*.vue','./themes/**/*.js']
24 |     //}),
25 |     //autoprefixer
26 |   //]
27 | //}
28 | 


--------------------------------------------------------------------------------
/pages/blog/_path/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-if="post" class="w-full px-8 py-12 article article-pre-dark">
 3 |     <h3 v-html="post.title.rendered"></h3>
 4 |     <div v-html="post.content.rendered"></div>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   data:()=>({
11 |     post:null
12 |   }),
13 |   asyncData ({ params , store }) {
14 |     let mypost = store.state.initData.posts.filter(post=>{
15 |       return post.slug === params.path
16 |     })
17 |     return { post: mypost[0] }
18 |   },
19 |   mounted(){
20 |     let mypost = this.$store.state.initData.posts.filter(post=>{
21 |       return post.slug === this.$route.params.path
22 |     })
23 |     this.post = mypost[0]
24 |   }
25 | }
26 | </script>
27 | 


--------------------------------------------------------------------------------
/pages/blog/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="w-full py-12 min-h-full relative pin-t justify-start px-4">
 3 |     <h1 class="font-light border-b">Blog</h1>
 4 |     <no-ssr><v-componentWrapper name="core/tiles" :options="options"/></no-ssr>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import axios from 'axios'
10 | export default {
11 |   layout: 'theme',
12 |   
13 |   data:()=>({
14 |       posts: null
15 |   }),
16 |   asyncData ({ params }) {
17 |     return axios.get(`https://www.techcrunch.com/wp-json/wp/v2/posts`)
18 |     .then((res)=>{
19 |         console.log ( res )
20 |         return { posts: res.data }
21 |     })
22 |     
23 |   },
24 |   computed:{
25 |     options(){
26 |       return { items: this.posts }
27 |     }
28 |   }
29 | }
30 | </script>


--------------------------------------------------------------------------------
/components/theme/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import upperFirst from 'lodash/upperFirst'
 3 | import camelCase from 'lodash/camelCase'
 4 | 
 5 | const requireComponent = require.context(
 6 |   '@/components/theme', true, /\.vue$/
 7 | )
 8 | 
 9 | requireComponent.keys().forEach(fileName => {
10 |   const componentConfig = requireComponent(fileName)
11 |   let componentName = 'v-'
12 |   componentName += camelCase(fileName.replace(/^\.\//, '').replace(/\.\w+$/, ''))
13 |   //if ( componentName.indexOf('-mood') < 0 ){
14 |   //  componentName = componentName.replace('Index','')
15 |   //} else {
16 |   //  componentName = componentName.replace('Index','')
17 |   //}
18 |   componentName = componentName.replace('Index','')
19 |   console.log ( componentName )
20 |   Vue.component(componentName, componentConfig.default || componentConfig)
21 | })
22 | 


--------------------------------------------------------------------------------
/components/core/services/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="w-full flex flex-wrap py-8">
 3 |     <template v-for="(item,index) in items">
 4 |         <div class="w-full sm:w-full md:w-1/3 lg:w-1/3 xl:w-1/3 mb-4 px-4 text-center" :style="single" :key="index">
 5 |           <div :class="single">
 6 |             <i v-if="item.icon" class="material-icons p-4 rounded-full mb-2 border-8 text-5xl">{{item.icon}}</i>
 7 |             <h2 class="font-light border-b mb-6">{{item.title}}</h2>
 8 |             <div class="px-12 text-justify" v-html="item.abstract"></div>
 9 |           </div>  
10 |         </div>
11 |     </template>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | export default {
17 |   computed:{
18 |     items(){
19 |       return this.$store.state.initData[this.options.data]
20 |     },
21 |     single(){
22 |       return this.options.box ? this.options.box : ''
23 |     }
24 |   },
25 |   props: {
26 |     options: { type: Object , required: true , default:()=>{} }
27 |   }
28 | }
29 | </script>
30 | 


--------------------------------------------------------------------------------
/components/core/skills/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="w-full flex flex-wrap">
 3 |     <slot name="title"/>
 4 |     <div v-for="(item,index) in items" :key="index" class="w-full text-left p-2">
 5 |       <h4 class="font-light">{{item.name}}</h4>
 6 |       <div class="w-full rounded h-4 bg-grey-light">
 7 |         <div :class="'rounded h-4 ' + color" :style="style(item.value)"></div>
 8 |       </div>
 9 |       <small>{{item.value}}</small>
10 |     </div>
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 |   props: {
17 |     options: {
18 |       type: Object,
19 |       required: false,
20 |       default:()=>({
21 |         
22 |       })
23 |     }
24 |   },
25 |   computed:{
26 |     items(){
27 |       return this.$store.state.initData[this.options.data]
28 |     },
29 |     color(){
30 |       if ( this.options.color ){
31 |         return this.options.color
32 |       }
33 |       return 'green-light'
34 |     }
35 |   },
36 |   methods:{
37 |     style(perc){
38 |       return {
39 |         "width" : perc,
40 |         "transition" : "width 0s ease 0s",
41 |         "transform:" : "scaleX(1)"
42 |       }
43 |     }
44 |   }
45 | }
46 | </script>
47 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | import pkg from './package'
 2 | 
 3 | export default {
 4 |   mode: 'universal',
 5 |   head: {
 6 |     title: pkg.name,
 7 |     meta: [
 8 |       { charset: 'utf-8' },
 9 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
10 |       { hid: 'description', name: 'description', content: pkg.description }
11 |     ],
12 |     link: [
13 |       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
14 |       { rel: 'stylesheet' , href: 'https://fonts.googleapis.com/icon?family=Material+Icons' }
15 |     ]
16 |   },
17 | 
18 |   loading: { color: '#000' },
19 | 
20 |   icon: [
21 |     '~/assets/logo.png'
22 |   ],
23 | 
24 |   css: [
25 |     '~/assets/css/tailwind.css',
26 |     '~/assets/css/theme.css'
27 |   ],  
28 |   
29 |   
30 |   plugins: [
31 |     { src: '~/plugins/theme4nuxt.js' , ssr: true },
32 |     { src: '~/components/theme' , ssr: false },
33 |     { src: '~/plugins/vue-lazyload', ssr: false }
34 |   ],
35 | 
36 |   modules: [
37 |     '@nuxtjs/axios',
38 |     '@nuxtjs/pwa',
39 |     '@nuxtjs/markdownit'
40 |   ],
41 |   build: {
42 |     extend(config, ctx) {
43 |       // Run ESLint on save
44 |       if (ctx.isDev && ctx.isClient) {
45 |         config.module.rules.push({
46 |           //enforce: 'pre',
47 |           test: /\.(js|vue)$/,
48 |           loader: 'eslint-loader',
49 |           exclude: /(node_modules)/
50 |         })
51 |       }
52 |      
53 |     }
54 |   },
55 | 
56 | }
57 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Created by .ignore support plugin (hsz.mobi)
 2 | ### Node template
 3 | # Logs
 4 | logs
 5 | *.log
 6 | npm-debug.log*
 7 | yarn-debug.log*
 8 | yarn-error.log*
 9 | 
10 | # Runtime data
11 | pids
12 | *.pid
13 | *.seed
14 | *.pid.lock
15 | 
16 | # Directory for instrumented libs generated by jscoverage/JSCover
17 | lib-cov
18 | 
19 | # Coverage directory used by tools like istanbul
20 | coverage
21 | 
22 | # nyc test coverage
23 | .nyc_output
24 | 
25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
26 | .grunt
27 | 
28 | # Bower dependency directory (https://bower.io/)
29 | bower_components
30 | 
31 | # node-waf configuration
32 | .lock-wscript
33 | 
34 | # Compiled binary addons (https://nodejs.org/api/addons.html)
35 | build/Release
36 | 
37 | # Dependency directories
38 | node_modules/
39 | jspm_packages/
40 | 
41 | # TypeScript v1 declaration files
42 | typings/
43 | 
44 | # Optional npm cache directory
45 | .npm
46 | 
47 | # Optional eslint cache
48 | .eslintcache
49 | 
50 | # Optional REPL history
51 | .node_repl_history
52 | 
53 | # Output of 'npm pack'
54 | *.tgz
55 | 
56 | # Yarn Integrity file
57 | .yarn-integrity
58 | 
59 | # dotenv environment variables file
60 | .env
61 | 
62 | # parcel-bundler cache (https://parceljs.org/)
63 | .cache
64 | 
65 | # next.js build output
66 | .next
67 | 
68 | # nuxt.js build output
69 | .nuxt
70 | 
71 | # Nuxt generate
72 | dist
73 | 
74 | # vuepress build output
75 | .vuepress/dist
76 | 
77 | # Serverless directories
78 | .serverless
79 | 
80 | # IDE
81 | .idea
82 | 
83 | # Service worker
84 | sw.*
85 | 


--------------------------------------------------------------------------------
/components/core/prices/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="flex flex-wrap w-full justify-center">
 3 |         <div class="w-full text-center p-4">
 4 |             <div v-html="options.title"/>
 5 |         </div>
 6 |         <template  v-for="(price,index) in prices">
 7 |             <div :class="classe" :key="'price_' + index">
 8 |                 <div :class="options.css">
 9 |                     <div v-html="price.title"/>
10 |                     <div v-html="price.price"/>
11 |                     <div v-html="price.summary"/>
12 |                         <template v-for="(row,i) in price.list">
13 |                             <div :key="'line_' + i" class="text-sm text-grey py-1">{{row}}</div>
14 |                         </template>
15 |                     
16 |                 </div>
17 |                 <div :class="options.action">
18 |                     <button :class="options.button">{{price.button}}</button>
19 |                 </div>  
20 |             </div>
21 |         </template>
22 |     </div>
23 | </template>
24 | 
25 | <script>
26 | export default {
27 |     name: 'PricesTable',
28 |     computed:{
29 |         classe(){
30 |             return "w-full md:w-1/2 lg:w-1/4 xl:w-1/4 mb-4 overflow-hidden " + this.options.style 
31 |         },
32 |         prices(){
33 |             console.log ( 'prices=>' , this.$store.state.initData[this.options.data] )
34 |             return this.$store.state.initData[this.options.data]
35 |         }
36 |     },
37 |     props: {
38 |         options: { type : Object , required: false , default:()=>{}}
39 |     }
40 | }
41 | </script>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "theme4nuxt-demo",
 3 |   "version": "1.0.0",
 4 |   "description": "A tailwind theming solution for Nuxt.js",
 5 |   "author": "A. Nardone",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "nuxt",
 9 |     "build": "nuxt build",
10 |     "build:css": "postcss ./assets/css/tailwind.css -o ./static/tailwind.css",
11 |     "start": "nuxt start",
12 |     "generate": "nuxt generate",
13 |     "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
14 |     "precommit": "npm run lint",
15 |     "prepare": "npm run snyk-protect",
16 |     "snyk-protect": "snyk-protect"
17 |   },
18 |   "dependencies": {
19 |     "@nuxtjs/axios": "^5.13.6",
20 |     "@nuxtjs/markdownit": "^1.2.4",
21 |     "@nuxtjs/pwa": "^3.3.5",
22 |     "cross-env": "^5.2.0",
23 |     "nuxt": "^2.16.3",
24 |     "vue-lazyload": "^1.2.6",
25 |     "@snyk/protect": "latest"
26 |   },
27 |   "devDependencies": {
28 |     "@fullhuman/postcss-purgecss": "^1.1.0",
29 |     "@nuxtjs/eslint-config": "^0.0.1",
30 |     "autoprefixer": "^10.4.14",
31 |     "babel-eslint": "^10.0.1",
32 |     "cssnano": "^6.0.0",
33 |     "eslint": "^5.15.1",
34 |     "eslint-config-prettier": "^4.1.0",
35 |     "eslint-config-standard": ">=12.0.0",
36 |     "eslint-loader": "^2.1.2",
37 |     "eslint-plugin-import": ">=2.16.0",
38 |     "eslint-plugin-jest": ">=22.3.0",
39 |     "eslint-plugin-node": ">=8.0.1",
40 |     "eslint-plugin-nuxt": ">=0.4.2",
41 |     "eslint-plugin-prettier": "^3.0.1",
42 |     "eslint-plugin-promise": ">=4.0.1",
43 |     "eslint-plugin-standard": ">=4.0.0",
44 |     "eslint-plugin-vue": "^5.2.2",
45 |     "glob-all": "^3.3.1",
46 |     "nodemon": "^2.0.22",
47 |     "nuxt-purgecss": "^0.2.1",
48 |     "prettier": "^1.16.4",
49 |     "purgecss-webpack-plugin": "^1.4.0",
50 |     "tailwindcss": "^3.3.1",
51 |     "serialize-javascript": ">=3.1.0"
52 |   },
53 |   "snyk": true
54 | }
55 | 


--------------------------------------------------------------------------------
/store/index.js:
--------------------------------------------------------------------------------
 1 | import grid from '~/themes'
 2 | 
 3 | export const state = () => ({
 4 |   theme     : grid,
 5 |   theme_file: 'index.js',
 6 |   themes    : null,
 7 |   currentTheme : 0, //{ name: 'Corporate Business' , file: 'index.js' },
 8 |   initData  : {}
 9 | })
10 | 
11 | export const mutations = {
12 |   init_data ( state , data ){
13 |     state.initData = data
14 |   },
15 |   theme ( state , data ){
16 |     state.theme = data
17 |   },
18 |   theme_file ( state , data ){
19 |     state.theme_file = data
20 |   },
21 |   themes (state,data) {
22 |     state.themes = data
23 |   },
24 |   currentTheme(state,index){
25 |     state.currentTheme = index
26 |   }
27 | }
28 | 
29 | export const actions = {
30 |   async nuxtServerInit({commit}, context ){
31 |     let init = context.app.$theme4nuxt().initData
32 |     
33 |     let api
34 |     let data = {}
35 |     for ( var n=0 ; n < init.length ; n++ ){
36 |       if ( init[n].type === 'api' ) {
37 |         let qry = await context.app.$axios.get(init[n].api);
38 |         !qry.data.data ? data[init[n].name] = qry.data : data[init[n].name] = qry.data.data
39 |       }
40 |       if ( init[n].type === 'array' ){
41 |         data[init[n].name] = init[n].value
42 |       }
43 |     }
44 |     let themes = []
45 |     for ( var t=1 ; t < 9 ; t++ ){
46 |       let mytheme = await import('~/themes/theme' + t + '.js')
47 |       themes.push(mytheme.default)
48 |     }
49 |     commit ('init_data', data )
50 |     commit('themes',themes)
51 |   },
52 |   
53 |   SetTheme({commit},theme){
54 |     commit('theme',theme)
55 |   },
56 |   SetCurrentTheme({commit},theme){
57 |     commit('currentTheme',theme)
58 |   },
59 |   SetThemeFile({commit},file){
60 |     commit('theme_file',file)
61 |   },
62 | }
63 | 
64 | export const getters = {
65 |   'init'    : state => state.initData,  
66 |   'theme'   : state => state.theme,
67 | }
68 | 
69 | export const strict = false


--------------------------------------------------------------------------------
/assets/css/tailwind.css:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This injects Tailwind's base styles, which is a combination of
 3 |  * Normalize.css and some additional base styles.
 4 |  *
 5 |  * You can see the styles here:
 6 |  * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
 7 |  *
 8 |  * If using `postcss-import`, use this import instead:
 9 |  *
10 |  * @import "tailwindcss/preflight";
11 |  */
12 | @tailwind preflight;
13 | 
14 | /**
15 |  * This injects any component classes registered by plugins.
16 |  *
17 |  * If using `postcss-import`, use this import instead:
18 |  *
19 |  * @import "tailwindcss/components";
20 |  */
21 | @tailwind components;
22 | 
23 | .btn {
24 |   @apply py-2 px-4 rounded;
25 | }
26 | 
27 | button {
28 |   @apply outline-none;
29 | }
30 |   
31 | a , a:focus , a:link , a:visited , button:focus , button:active  {
32 |   @apply outline-none;
33 | }
34 | 
35 | pre {
36 |   @apply bg-grey-light;
37 |   @apply rounded ; @apply p-4 ; @apply leading-loose ; @apply font-mono ; @apply text-xs; @apply w-full; @apply overflow-y-auto;
38 | }
39 | 
40 | .object-cover {
41 |   background-size: cover!important;
42 | }
43 | 
44 | /**
45 |  * Here you would add any of your custom component classes; stuff that you'd
46 |  * want loaded *before* the utilities so that the utilities could still
47 |  * override them.
48 |  *
49 |  * Example:
50 |  *
51 |  * .btn { ... }
52 |  * .form-input { ... }
53 |  *
54 |  * Or if using a preprocessor or `postcss-import`:
55 |  *
56 |  * @import "components/buttons";
57 |  * @import "components/forms";
58 |  */
59 | 
60 | /**
61 |  * This injects all of Tailwind's utility classes, generated based on your
62 |  * config file.
63 |  *
64 |  * If using `postcss-import`, use this import instead:
65 |  *
66 |  * @import "tailwindcss/utilities";
67 |  */
68 | @tailwind utilities;
69 | 
70 | /**
71 |  * Here you would add any custom utilities you need that don't come out of the
72 |  * box with Tailwind.
73 |  *
74 |  * Example :
75 |  *
76 |  * .bg-pattern-graph-paper { ... }
77 |  * .skew-45 { ... }
78 |  *
79 |  * Or if using a preprocessor or `postcss-import`:
80 |  *
81 |  * @import "utilities/background-patterns";
82 |  * @import "utilities/skew-transforms";
83 |  */
84 | 


--------------------------------------------------------------------------------
/components/posts/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="flex flex-wrap items-start justify-center p-3" v-if="items">
 3 | 
 4 |     <template v-for="(row,i) in rows">
 5 |         <template :data="calc_mod(i)">
 6 |         <div v-if="items.length && items[i].id" :class="classe + calc_mod(i)" :id="items[i].id" data-type="post" :key="items[i].id">
 7 |           <small class="text-grey">{{items[i].date.substr(5,2)}}/{{items[i].date.substr(8,2)}}</small>
 8 |           <a :href="items[i].link" class="no-underline text-bold py-2 text-black" target="_blank">
 9 |               <h4 class="py-4 font-light text-blue-dark" v-html="items[i].title.rendered"></h4>
10 |           </a>
11 |           
12 |           <!--<a :href="items[i].slug" class="no-underline font-light" target="_blank">
13 |           <h2 class="font-light text-black py-2" v-html="items[i].title.rendered"></h2></a>-->
14 |           <figure v-if="items[i].jetpack_featured_media_url">
15 |             <img :src="items[i].jetpack_featured_media_url"/>
16 |           </figure>
17 |           <div class="article">
18 |             <div class="mb-8 text-grey-dark" v-html="items[i].excerpt.rendered"></div>
19 |           </div>
20 |         </div>
21 |         </template>
22 |     </template>
23 |   </div>
24 | </template>
25 | <script>
26 | export default {
27 |   data:()=>({
28 |     border:''
29 |   }),
30 |   computed:{
31 |     items(){
32 |       if ( this.$store.state.initData[this.options.data]){
33 |         return this.$store.state.initData[this.options.data]
34 |       }
35 |       return []
36 |     },
37 |     rows(){
38 |       if ( this.$route.path === '/' ){
39 |         return 2
40 |       } else {
41 |         return 2
42 |         //return this.items.length
43 |       }
44 |     },
45 |     classe(){
46 |       if ( this.$route.path === '/' ){
47 |         return 'w-full'
48 |       }
49 |       return 'w-full md:w-1/2 lg:w-1/2 py-8 px-16 ' + this.border
50 |     }
51 |   },
52 |   methods: {
53 |     calc_mod(i){
54 |       
55 |       if ( i % 2 === 0  ) { return 'border-r ' } else { return ' ' } 
56 |     },
57 |     linkProperties (url) {
58 |         if (url.match(/^(http(s)?|ftp):\/\//)) {
59 |           console.log ( url )
60 |           return {
61 |             is: 'a',
62 |             href: url,
63 |             target: '_blank',
64 |             rel: 'noopener'
65 |           }
66 |         }
67 |         return {
68 |           is: 'nuxt-link',
69 |           to: url
70 |         }
71 |       }
72 |   },
73 |   props :{
74 |     options: {
75 |             type: Object ,
76 |             required: false ,
77 |             default: ()=> { data: 'info'}
78 |         }
79 |   }
80 | }
81 | </script>
82 | 


--------------------------------------------------------------------------------
/components/core/tiles/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="w-full p-4">
  3 |     <div class="tiles">
  4 |         <template v-for="(item,index) in items">
  5 |             <div class="tile relative" :key="'post_' + index" @click.native="item.link">
  6 |             
  7 |                 <img  v-if="item.jetpack_featured_media_url" :src="item.jetpack_featured_media_url"/>
  8 |                 <a :href="item.link" target="_blank" class="clipped-trap-r-b bg-black w-full p-4 mb-1 absolute pin-b no-underline font-light">
  9 |                     <h4 class="font-light text-white bg-black" v-html="item.title.rendered"></h4>
 10 |                 </a>
 11 | 
 12 |             </div>
 13 |         </template>
 14 |     </div>
 15 |     </div>
 16 | </template>
 17 | 
 18 | <script>
 19 | export default {
 20 |   name: 'posts_tiles',
 21 |   
 22 |   props :{
 23 |     options: { type: Object , required: false , default:()=> { items: [] } },
 24 |   },
 25 |   computed:{
 26 |       items(){
 27 |           if ( !this.options.items ){
 28 |             return this.$store.state.initData.posts
 29 |           }
 30 |           return this.options.items
 31 |       }
 32 |   },
 33 |   
 34 |   methods: {
 35 |         linkProperties (url) {
 36 |         if (url.match(/^(http(s)?|ftp):\/\//)) {
 37 |           console.log ( url )
 38 |           return {
 39 |             is: 'a',
 40 |             href: url,
 41 |             target: '_blank',
 42 |             rel: 'noopener'
 43 |           }
 44 |         }
 45 |         return {
 46 |           is: 'nuxt-link',
 47 |           to: url
 48 |         }
 49 |       }
 50 |   }
 51 | }
 52 | </script>
 53 | <style>
 54 | .tiles {
 55 |     display:grid;
 56 |     grid-template-columns: repeat(6, 1fr);
 57 |     grid-gap: 1rem;
 58 | }
 59 | 
 60 | @media screen and (max-width:800px){
 61 |   .tiles {
 62 |     display:grid;
 63 |     grid-template-columns: 1fr;
 64 |     grid-gap: 1rem;
 65 |   }
 66 | }
 67 | 
 68 | .tile img{
 69 |     width: 100%;
 70 |     height: 100%;
 71 |     object-fit: cover;
 72 | }
 73 | 
 74 | .tile {
 75 |     grid-column: span 2;
 76 | }
 77 | 
 78 | .tile:nth-child(1){
 79 |     grid-column: span 6;
 80 | }
 81 | 
 82 | .tile:nth-child(2){
 83 |     grid-column: span 4;
 84 |     grid-row: span 2;
 85 | }
 86 | 
 87 | 
 88 | .tile:nth-child(3),
 89 | .tile:nth-child(4){
 90 |     grid-column: span 2;
 91 | }
 92 | 
 93 | @media screen and (max-width:800px){
 94 |     .tile {
 95 |         grid-column: span 6; 
 96 |     }
 97 | 
 98 |     .tile:nth-child(1){
 99 |         grid-column: span 6;
100 |     }
101 | 
102 |     .tile:nth-child(2){
103 |         grid-column: span 6;
104 |     }
105 | 
106 | 
107 |     .tile:nth-child(3),
108 |     .tile:nth-child(4){
109 |         grid-column: span 6;
110 |     }
111 | }
112 | .clipped-trap-r-b {
113 | 
114 | -webkit-clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
115 | clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
116 | }
117 | 
118 | /*
119 | .tile:last-child {
120 |     grid-column: span 6;
121 | }
122 | 
123 | 
124 | .tile:nth-child(4),
125 | .tile:nth-child(5),
126 | .tile:nth-child(6),
127 | .tile:nth-child(7),
128 | .tile:nth-child(8),
129 | .tile:nth-child(9),
130 | .tile:nth-child(10){
131 |     grid-column: span 2;
132 | }
133 | */
134 | </style>


--------------------------------------------------------------------------------
/components/theme/nav/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <nav>
  3 |         <div :class="'fixed z-40 ' + custom">
  4 |             
  5 |             <button :class="'fixed pin-t pin-r flex flex-wrap z-50 items-center '  + icon" @click="hamburger=!hamburger">
  6 |                 <transition name="rotate">
  7 |                     <svg v-if="!hamburger" class="relative pin-t pin-l fill-current h-5 w-5" id="SVGRoot" version="1.1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
  8 |                         <path d="m-30-0.15625 18.281 17.812" fill="none" stroke="#000" stroke-width="1px"/>
  9 |                         <path d="m-12.5-1.0938-18.281 17.813" fill="none" stroke="#000" stroke-width="1px"/>
 10 |                         <g transform="translate(.39024 .19512)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
 11 |                            <path d="m9.5987 12.609-7.6475-6.17"/>
 12 |                             <path d="m17.246 6.439-7.6475 6.17"/>
 13 |                         </g>
 14 |                     </svg>
 15 |                 </transition>
 16 |                 <transition name="rotate">
 17 |                     <svg v-if="hamburger" class="relative pin-t pin-l fill-current text-white h-5 w-5" id="SVGRoot" version="1.1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
 18 |                         <path d="m-30-0.15625 18.281 17.812" fill="none" stroke="#000" stroke-width="1px"/>
 19 |                         <path d="m-12.5-1.0938-18.281 17.813" fill="none" stroke="#000" stroke-width="1px"/>
 20 |                         <g fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round">
 21 |                            <path d="m2.9565 16.721 13.941-13.502" stroke-width="2"/>
 22 |                             <path d="m16.858 16.742-13.917-13.533" stroke-width="1.9693"/>
 23 |                         </g>
 24 |                     </svg>
 25 |                 </transition>
 26 |             </button>
 27 | 
 28 |             <transition :name="transition"> 
 29 |                 <div v-if="hamburger" :class="menu">
 30 |                     <slot name="title"></slot>
 31 |                     <template v-for="(item,i) in items">
 32 |                         <div :class="'flex w-full ' + link" :key="'menu_' + i" >
 33 |                             <nuxt-link :to="item.path" 
 34 |                                 @click.native="hamburger=false" 
 35 |                                 :class="'items-center flex w-full no-underline h-10 pl-2 ' + link">{{item.name}}</nuxt-link>
 36 |                         </div>
 37 |                        
 38 |                     </template>
 39 | 
 40 |                 </div>
 41 |             </transition>
 42 |         </div>
 43 |      </nav>   
 44 | </template>
 45 | 
 46 | <script>
 47 | export default {
 48 |     data:()=>({
 49 |         hamburger: false,
 50 |         
 51 |     }),
 52 |     computed:{
 53 |         custom(){
 54 |             let classes = ''
 55 |             let w = 'w-full md:w-1/2 lg:w-1/3 xl:w-1/4 '
 56 |             this.small ? w = 'w-full md:w-1/3 lg:w-1/4 xl:w-1/5 ' : this.large ? w = 'w-full md:w-1/2 lg:w-1/2 xl:w-1/2 ' : w = 'w-full md:w-1/2 lg:w-1/3 xl:w-1/4 '
 57 |             classes += w
 58 |             this.left ? classes += 'pin-l ' : classes += 'pin-r '
 59 |             this.bottom ? classes += 'pin-b ' : classes += 'pin-t '
 60 |             console.log ( this.bottom )
 61 |             return classes
 62 |         },
 63 |         icon(){
 64 |             let classes = this.button + ' '
 65 | 
 66 |             if ( !this.hamburger ) {
 67 |                 //this.left ? classes += ' pin-l ' : classes += ' pin-r '
 68 |                 return classes
 69 |             } else {
 70 |                 //this.left ? classes += ' pin-l ' : classes += ' pin-r '
 71 |                 return classes
 72 |             }    
 73 |             return classes
 74 |         },
 75 |         stroke(){
 76 |             if ( this.button ){
 77 |                 console.log ( this.button.indexOf('text-') )
 78 |             }
 79 |             return '#000'
 80 |         },
 81 |         menu(){
 82 |             let classes = ''
 83 |             this.css ? classes += this.css : classes += ''
 84 |             //mt-8 hamburger-menu shadow items-start w-full pt-4 pl-12 pb-20 bg-black clipped-menu
 85 |             return classes
 86 |         }
 87 |     },
 88 |     props : {
 89 |         items   : { type: Array , required: false, default:()=>[] },
 90 |         link    : { type: String , required: false , default: '' },
 91 |         small   : { type: Boolean , required: false, default: false },
 92 |         large   : { type: Boolean , required: false , default: false },
 93 |         left    : { type: Boolean , required: false , default: false },
 94 |         bottom  : { type: Boolean , required: false , default: false },
 95 |         css     : { type: String , required: false , default: ''} ,
 96 |         button  : { type: String , required: false, default: '' } ,
 97 |         title   : { type: String , required: false, default: '<h2>Menu</h2>' },
 98 |         transition : { type: String, required:false , default: 'slide'} ,
 99 |         menubar    : { type: Boolean , required: false , default: true },
100 |         orientation : { type: String , required: false , default: 'horizontal' }
101 |         
102 |     }
103 | }
104 | </script>
105 | 


--------------------------------------------------------------------------------
/themes/theme5.js:
--------------------------------------------------------------------------------
 1 | const layout = {
 2 |     name        : 'Zig-Zag Blog',
 3 |     author      : 'A. Nardone',
 4 |     version     : '0.2.0',
 5 |     root        : 'w-full flex flex-wrap min-h-screen font-serif',
 6 |     homepage    : '/',
 7 |     initData : [
 8 |       { type: 'api'   , name: 'posts'     , api : '/posts?$sort[createdAt]=-1&$limit=4' },
 9 |       { type: 'api'   , name: 'services'  , api : '/sections?type=services' },
10 |       { type: 'array' , name: 'skills'    , value : [{name:'CREATIVITY' , value: "90%"} , { name: 'ORGANIZATION' , value: "85%"} , { name: 'TEAM WORK' , value: "75%"} , { name: 'COMMUNICATION' , value: "70%"}]
11 |       }
12 |     ],
13 | 
14 |     navigation :  [{  
15 |         css        : "items-start w-full z-50 pt-16 px-4 pb-4 bg-black rounded-br rounded-bl rounded-bl-lg",
16 |         button     : "mt-5 mr-5 bg-blue-dark shadow text-white p-2 border-grey-light border-2",
17 |         line       : "hover:text-black hover:bg-white text-right justify-start text-grey-dark" ,
18 |         link       : 'text-grey-dark hover:text-red px-4 no-underline',
19 |         left       : false,
20 |         transition : 'slideright',
21 |         orientation: 'horizontal' , 
22 |         items:  [ { name : 'Home' , path: '/' } , { name: 'Blog' , path: '/blog' } , { name: 'About' , path: '/about' } , { name: 'How to' , path: '/howto' } , { name: 'Store' , path: '/store' } , { name: 'GitHub', path: 'https://github.com/swina/theme4nuxt'}] 
23 |     }],
24 |     template: {
25 |         main : {
26 |             css : "w-full",
27 |             
28 |         },
29 |         areas: {
30 |              order  : ['header','content','footer'],
31 |              header : {
32 |                 root: 'w-full flex flex-wrap mb-12',
33 |                 blocks : [
34 |                     {
35 |                         css: 'w-full h-12 flex items-center pl-4 text-grey mobile' ,
36 |                         elements : [
37 |                             { type: 'menu'      , navigation: 0, homepage: false}
38 |                         ] 
39 |                     },
40 |                     {
41 |                         css: 'w-full md:w-1/4 lg:w-1/4 xl:w-1/4 h-24 col  z-10' ,
42 |                         elements : [
43 |                             { type: 'html'      , content: '<h1 class="tracking-tight absolute mt-4 pl-2 p-0 text-4xl text-marine-light"><span class="font-light border-t-8">Theme<span class="text-white bg-orange-dark ml-2 p-2">4</span></span><span class="text-blue-dark border-b-8 border-grey-darkest">Nuxt</span></h1>' , homepage: false}
44 |                         ]
45 |                     },
46 |                     {
47 |                         css: 'w-full md:w-3/4 lg:w-3/4 xl:w-3/4 h-24 col justify-end text-right pr-4 col-nav' , 
48 |                         elements : [
49 |                             { type: 'nav'       , navigation: 0 , homepage: false}
50 |                         ]
51 |                     },
52 |                     
53 |                 ]
54 |             },
55 |             content : {
56 |                 root: 'w-full flex flex-wrap',
57 |                 blocks : [
58 |                     {
59 |                         css: 'w-full',
60 |                         elements: [
61 |                             { type: 'css'       , content: 'bg-header-5 h-screen clipped-zig-zag -mt-24 z-back' , homepage: false }
62 |                         ]
63 |                     },
64 |                     {
65 |                         css: 'w-full bg-blue-lighter m-4 rounded-lg',
66 |                         elements: [
67 |                             { type: 'component' , component: 'core/services'  , options: {data: 'services'}  , title: 'Features' , homepage: true  },
68 |                         ]
69 |                     },
70 |                     { 
71 |                         css: 'w-full', 
72 |                         elements : [
73 |                             
74 |                             { type: 'html'      , content: '<h1 class="text-center"><div class="clipped-tag-down -mb-4 m-auto border-8 items-center flex justify-center h-32 w-32 rounded-full bg-blue text-white">Blog</div></h1>' , homepage:true  },
75 |                             { type: 'component' , component: 'posts'  , options: { data: 'info' }  ,  homepage: true , nuxt: true },
76 |                             
77 |                             { type: 'html'      , content: '<h1 class="text-center"><div class="clipped-tag-down -mb-4 m-auto border-8 items-center flex justify-center h-32 w-32 rounded-full bg-blue text-white">News</div></h1>' , homepage: true  },
78 |                             { type: 'component' , component: 'posts'  , options: { data: 'info' } , homepage: true  }
79 |                         ],
80 |                     }
81 |                 ]
82 |             },
83 |             footer : {
84 |                 root    : 'w-full',
85 |                 blocks  : [
86 |                     {
87 |                         css: 'h-16 items-center  flex justify-center col-span-4 bg-teal-lighter text-center text-white' ,
88 |                         elements : [
89 |                             { type: 'html'      , content: '<small>Theme4Nuxt - a theme solution for Nuxtjs - Author: Antonio Nardone - License MIT</small>' , homepage: false} 
90 |                         ]
91 |                     }
92 |                 ]
93 |             }
94 |         },
95 |     }
96 |      
97 | }
98 | 
99 | export default layout


--------------------------------------------------------------------------------
/components/core/cards/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="flex flex-wrap w-full justify-center">
  3 |         <div class="w-full text-center p-4">
  4 |             <h1 v-if="options.contest==='info'">Themes</h1>
  5 |             <h1 v-if="options.contest==='products'">Wall Stickers</h1>
  6 |         </div>
  7 |         <template  v-for="(card,index) in lista">
  8 |             <div class="w-full md:w-1/3 lg:w-1/3 xl:w-1/4 px-6 rounded mb-4 overflow-hidden" :key="'card_' + index">
  9 |                 <div :class="'rounded-t-lg object-cover w-full shadow-lg ' + height" v-lazy:background="card">
 10 |                     <!--<img v-lazy="card"/>-->
 11 |                 </div>
 12 |                 <div class="px-6 py-4 border">
 13 |                     <div class="font-bold text-xl mb-2">
 14 |                         <span v-if="options.contest==='info'">{{titles[index]}}</span>
 15 |                         <span v-if="options.contest==='products'">{{title}} {{index+1}}</span>
 16 |                     </div>
 17 |                     <p class="text-grey-darker text-base" v-if="options.contest!='products'">
 18 |                 
 19 |                     </p>
 20 |                 </div>
 21 |                 <div class="flex items-center justify-center py-4 border-b border-r border-l rounded-b-lg bg-grey-light">
 22 |                     <!--<nuxt-link :to="'/theme/' + (index+1)" v-if="contest=='info' && index > 0"><button class="bg-blue-light inline-block rounded-full px-3 py-1 text-sm text-white hover:bg-blue-dark mr-2">Preview</button></nuxt-link>
 23 |                     -->
 24 |                     <button v-if="options.contest==='info'" @click="$store.dispatch('SetCurrentTheme',index)" class="bg-blue-light inline-block rounded-full px-3 py-1 text-sm text-white hover:bg-blue-dark mr-2">Preview</button>
 25 |                     
 26 | 
 27 |                     <button v-if="options.contest==='products'" class="bg-blue-light inline-block rounded-full px-3 py-1 text-sm text-white hover:bg-blue-dark mr-2">More</button>
 28 |                     
 29 |                     <!--<button v-if="contest==='info' && index === 0" class="bg-blue-light inline-block rounded-full px-3 py-1 text-sm text-white hover:bg-blue-dark mr-2">Current</button>-->
 30 |                 </div>
 31 |             </div>
 32 |         </template>
 33 |     </div>
 34 | </template>
 35 | 
 36 | <script>
 37 | export default {
 38 |     data:()=>({
 39 |         titles: [
 40 |             'Marine Theme',
 41 |             'Ecommerce Waves',
 42 |             'Soho Business',
 43 |             'Angle Ecommerce',
 44 |             'Zig-Zag Blog',
 45 |             'Tiles Langing Page',
 46 |             'Corporate Business',
 47 |             'Classic Blog'
 48 |         ],
 49 |         cards: [
 50 |         'https://storage.googleapis.com/ghostfood-539ae.appspot.com/theme4nuxt/theme4nuxt-theme-1.jpg',
 51 |         'https://storage.googleapis.com/ghostfood-539ae.appspot.com/theme4nuxt/theme4nuxt-theme-2.jpg',
 52 |         'https://storage.googleapis.com/ghostfood-539ae.appspot.com/theme4nuxt/theme4nuxt-theme-3.jpg',
 53 |         'https://storage.googleapis.com/ghostfood-539ae.appspot.com/theme4nuxt/theme4nuxt-theme-4.jpg',
 54 |         'https://storage.googleapis.com/ghostfood-539ae.appspot.com/theme4nuxt/theme4nuxt-theme-5.jpg',
 55 |         'https://storage.googleapis.com/ghostfood-539ae.appspot.com/theme4nuxt/theme4nuxt-theme-6.jpg',
 56 |         'https://storage.googleapis.com/ghostfood-539ae.appspot.com/theme4nuxt/theme4nuxt-theme-7.jpg',
 57 |         'https://storage.googleapis.com/ghostfood-539ae.appspot.com/theme4nuxt/theme4nuxt-theme-8.jpg'
 58 |         ],
 59 |         products: [
 60 |             'https://www.sticasa.com/wp-content/uploads/2017/11/020099-300x300.jpg',
 61 |             'https://www.sticasa.com/wp-content/uploads/2017/11/citazione_quote_wallsticker_sticasa_capitale2_030130-amb-300x300.jpg',
 62 |             'https://www.sticasa.com/wp-content/uploads/2017/11/100040_amb-300x300.jpg',
 63 |             'https://www.sticasa.com/wp-content/uploads/2017/11/190045_amb-300x300.jpg',
 64 |             'https://www.sticasa.com/wp-content/uploads/2017/11/190046_amb-300x300.jpg',
 65 |             'https://www.sticasa.com/wp-content/uploads/2017/11/030118_amb-300x300.jpg'
 66 |         ],
 67 |     }),
 68 |     props:{
 69 |         options: {
 70 |             type: Object ,
 71 |             required: false ,
 72 |             default: ()=> { contest: 'info'}
 73 |         }
 74 |     },
 75 |     computed:{
 76 |         lista(){
 77 |             if ( this.options.contest === 'products' ){
 78 |                 return this.products
 79 |             }
 80 |             return this.cards
 81 |         },
 82 |         height(){
 83 |             if ( this.options.contest === 'products' ) {
 84 |                 return 'h-64' 
 85 |             }
 86 |             return 'h-80'
 87 |         },
 88 |         title(){
 89 |             if ( this.options.contest === 'products' ) {
 90 |                 return "Products"
 91 |             }
 92 |             return 'Theme'
 93 |         }
 94 | 
 95 |     },
 96 |     methods:{
 97 |         bg(i){
 98 |             
 99 |             return {
100 |                 //"background-image"  : "url(" +this.lista[i] + ")",
101 |                 "background-size"   : this.options.contest === 'products' ? "cover" : "cover",
102 |                 "background-position" : "top center" ,
103 |                 "background-repeat" : "no-repeat"
104 |             }
105 |         }
106 |     }
107 | }
108 | </script>


--------------------------------------------------------------------------------
/pages/about.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="flex flex-wrap">
 3 |         <div class="w-full md:w-1/2 lg:w-1/2 p-6 mt-4">
 4 |             <h1 class="font-light border-b">
 5 |             <svg class="h-12 w-12" id="SVGRoot" version="1.1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
 6 |  <g>
 7 |   <g transform="matrix(-1.3402 0 0 1.9437 471.98 -556.75)" fill="#cd8a1d">
 8 |    <path d="m120.51 403.05c-10.022-0.90553-18.931-14.963-27.358-28.398-12.467-19.956-26.035-37.368-40.689-39.741-14.489-1.7918-28.483 11.679-42.157 23.748 0 0-23.653 23.442-40.641 4.3512l-0.83595-54.066s-0.45458-2.3257-0.8192-5.6367c-0.61164-5.554-0.22399-11.308 2.2409-16.079l86.883-0.28047c147.85-0.47728 296.51 0.14857 296.51 0.14857l-0.13633 30.069-0.31042 16.658-1.7493 11.966 0.49951 12.129s2.3204 11.93-17.544 13.93c-19.715-1.0853-21.602-20.315-31.522-35.401-8.3552-12.015-17.73-21.963-27.377-18.414-9.9775 3.3652-18.869 18.37-26.721 35.164-8.1038 15.173-17.936 25.613-27.757 21.986-14.514-3.3272-28.61-17.796-43.345-14.292-16.028 2.1699-31.196 19.022-45.936 35.733-3.607 3.6526-7.3844 6.5336-11.236 6.4261z" fill="#cd8a1d" stroke-width=".72384"/>
 9 |   </g>
10 |   <g transform="matrix(1.3402 0 0 -1.9437 41.638 1073.4)" fill="#1dbccd">
11 |    <path d="m120.51 403.05c-10.022-0.90553-18.931-14.963-27.358-28.398-12.467-19.956-26.035-37.368-40.689-39.741-14.489-1.7918-28.483 11.679-42.157 23.748 0 0-23.653 23.442-40.641 4.3512l-0.83595-54.066s-0.45458-2.3257-0.8192-5.6367c-0.61164-5.554-0.22399-11.308 2.2409-16.079l86.883-0.28047c147.85-0.47728 296.51 0.14857 296.51 0.14857l-0.13633 30.069-0.31042 16.658-1.7493 11.966 0.49951 12.129s2.3204 11.93-17.544 13.93c-19.715-1.0853-21.602-20.315-31.522-35.401-8.3552-12.015-17.73-21.963-27.377-18.414-9.9775 3.3652-18.869 18.37-26.721 35.164-8.1038 15.173-17.936 25.613-27.757 21.986-14.514-3.3272-28.61-17.796-43.345-14.292-16.028 2.1699-31.196 19.022-45.936 35.733-3.607 3.6526-7.3844 6.5336-11.236 6.4261z" fill="#1dbccd" stroke-width=".72384"/>
12 |   </g>
13 |  </g>
14 | </svg> About Theme4Nuxt</h1>
15 |             <p class="pt-4">
16 |                I created Theme4Nuxt in order to have a fast way to prototype and create themes for nuxtjs.
17 | I usually create apps from scratch, and after trying different UI tools for Vue or Nuxt like Vuetify, Bootstrap, etc.
18 | Also all the components that you get are really difficult to customize for your needs. I think that they are really good frameworks, but trying to use them to adapt to real customer needs comes a hard job.
19 | Many times I had to rewrite my own components, so I decide to go with another strategy.
20 |             </p> 
21 |             <p class="p-8 italic">    
22 |              I found that all of them are opinionated frameworks, that don't give you the real  possibility to create you own custom design. Using them all your products will look the same.
23 |             </p>
24 |             <p class="pt-4">
25 |             Looking around for some tools and solution I found "tailwind" a css framework that is not a framework. 
26 |             </p>
27 |             <p class="pt-4">I think it's what a developer needs to create custom design feeling free to add your own components and fit them with the general UI/UX design.
28 |             I mean, if you are a real developer usually you need to create custom components for different projects. 
29 |             I know this very well because when you think you found a good component, then a customer needs something like that but ... but with some changes or improvements. 
30 |             </p>
31 |             <p class="pt-4">
32 |             So I started creating basic components, but I always had the same problem: the design. 
33 |             </p>
34 |             <p class="pt-4">
35 |             Adapting the component to different custom design is a difficult job (it was) mostly on CSS. Tailwind solved my problem. With the easy way to implement real custom design using semantic classes it solves many of developer problems.
36 |             </p>
37 |              <p class="pt-4">
38 |             Then working on nuxt project I started creating my layout templates in order to prototype different themes/design.
39 |             Since I always think that a good theme/design has to follow the semantic rules (header,section,aside,footer), I started to think to a solution that starting from a configuration file (a js/json file) create a layout template dinamically. 
40 |             My goals where:
41 |             </p>
42 |             <ul>
43 |                 <li>use configuration file to create a theme</li>
44 |                 <li>fast switching theme with no code rewriting on vue files</li>
45 |                 <li>follow semantic rules for generated pages (ssr rendering)</li>
46 |                 <li>easy changes to theme settings like colors etc.</li>
47 |                 <li>adding components dinamically (using webchunk method)</li>
48 |                 <li>preload data using server side functions and save to the store</li>
49 |                 <li>full responsive solution</li>
50 |                 <li>integration with existing API, components, other data</li>
51 |                 <li>integration with markdown files </li>
52 |                 <li>homepage design / internal page design</li>
53 |             </ul>
54 |         </div>
55 | 
56 |         <div class="w-full md:w-1/2 lg:w-1/2 p-24 mt-4">
57 |             <img src="https://storage.googleapis.com/ghostfood-539ae.appspot.com/theme4nuxt/bg-2.jpg" class="clipped-b-r"/>
58 |         </div>
59 |     </div>
60 | </template>
61 | 
62 | <script>
63 | export default {
64 |     layout: 'theme'
65 | }
66 | </script>


--------------------------------------------------------------------------------
/themes/theme8.js:
--------------------------------------------------------------------------------
  1 | const layout = {
  2 |     name     : 'Classic Blog',
  3 |     author    : 'A. Nardone',
  4 |     version   : '0.2.0',
  5 |     root     : 'w-full flex flex-wrap min-h-screen',
  6 |     homepage    : '/',
  7 |     initData : [
  8 |       { type: 'api'   , name: 'posts'     , api : 'https://www.techcrunch.com/wp-json/wp/v2/posts' } , //'/posts?$sort[createdAt]=-1&$limit=4' },
  9 |       { type: 'api'   , name: 'info'     , api :  'https://www.gianlucagiacalone.it/wp-json/wp/v2/posts' } , // '/posts?$sort[createdAt]=-1&$limit=4' },
 10 |       { type: 'api'   , name: 'services'  , api : 'http://localhost:3030/sections?type=services' },
 11 |       { type: 'array' , name: 'skills'    , value : [{name:'CREATIVITY' , value: "90%"} , { name: 'ORGANIZATION' , value: "85%"} , { name: 'TEAM WORK' , value: "75%"} , { name: 'COMMUNICATION' , value: "70%"}]
 12 |       }
 13 |     ],
 14 | 
 15 |     navigation :  [{  
 16 |         css     : "items-start font-serif w-full pt-16 px-4 pb-20 bg-white shadow-lg h-screen",
 17 |         button  : "m-1 bg-white p-2 border-black border-2 rounded-full",
 18 |         line    : "hover:text-black hover:bg-white text-grey" ,
 19 |         link       : 'font-serif text-black hover:text-grey-dark hover:text-bold py-10 px-4 no-underline',
 20 |         left    : false,
 21 |         transition: 'slideright',
 22 |         orientation: 'horizontal' , 
 23 |         items:  [ { name : 'Home' , path: '/' } , { name: 'Blog' , path: '/blog' } , { name: 'About' , path: '/about' } , { name: 'How to' , path: '/howto' } , { name: 'Store' , path: '/store' } , { name: 'GitHub', path: 'https://github.com/swina/theme4nuxt'} ] 
 24 |     }],
 25 |     template: {
 26 |         main : {
 27 |             css : "w-full flex flex-wrap font-serif",
 28 |             
 29 |         },
 30 |         areas: {
 31 |              order  : ['header','aside' , 'content', 'footer'],
 32 |              header : {
 33 |                 root: 'w-full flex flex-wrap',
 34 |                 blocks : [
 35 |                    
 36 |                     {
 37 |                         css: 'w-full h-24  justify-center flex items-center col bg-white font-serif' ,
 38 |                         elements : [
 39 |                             { type: 'html'      , content: '<div class="p-4 z-40  rounded-lg text-black"><h1><span class="font-light border-t-2">Theme<span class="text-black bg-grey px-2 py-1">4</span></span><span class="border-b-4">Nuxt</span></h1></div>' , homepage: false }
 40 |                         ],
 41 |                         homepage: false
 42 |                     },
 43 |                     {
 44 |                         css: 'w-full h-24  justify-center flex items-center col bg-white font-serif border-b mb-4 mobile' ,
 45 |                         elements : [
 46 |                             { type: 'menu'      , navigation: 0, homepage: false}
 47 |                         ]
 48 |                     },
 49 |                     
 50 |                     
 51 |                     {
 52 |                         css: 'w-full h-64 bg-header-9 mx-8',
 53 |                         elements: [
 54 |                            { type: 'html'  , content: ''}
 55 |                         ],
 56 |                         homepage: true
 57 |                     }
 58 |                 ]
 59 |             },
 60 |             content : {
 61 |                 root: 'w-full md:w-3/4 lg:w-3/4 shadow-lg flex flex-wrap',
 62 |                 blocks : [
 63 |                     {
 64 |                         css: 'w-full flex items-start',
 65 |                         elements: [
 66 |                             { type: 'html' , content: '<div class="p-8"><h1>Hello this is my Classic Blog Theme</h1><h2>Helping you to create your theme</h2><p class="w-2/3 text-grey-dark">Learn how to create a theme for Nuxt with a single configuration file.</p></div>' },
 67 |                         ],
 68 |                         homepage: true
 69 |                     },
 70 |                     {
 71 |                         css: 'w-full flex items-start',
 72 |                         elements: [
 73 |                             { type: 'html' , content: '' , nuxt: true  },
 74 |                         ],
 75 |                         homepage: false
 76 |                     },
 77 |                     {
 78 |                         css: 'w-1/2 flex items-center justify-center',
 79 |                         elements: [
 80 |                             { type: 'component' , component: 'core/skills' , options: { data: 'skills' , color:'bg-red' } },
 81 |                         ],
 82 |                         homepage: true
 83 |                     },
 84 |                     
 85 |                   
 86 |                 ]
 87 |             },
 88 |             aside : {
 89 |                 root: 'w-full md:w-1/4 lg:w-1/4 flex-row items-start',
 90 |                 blocks : [
 91 |                     {
 92 |                         css: 'w-full pt-8 px-8',
 93 |                         elements: [
 94 |                             { type: 'html' , content: '<h2>Helping you to create your theme</h2><p class="w-2/3 text-grey-dark">Learn how to create a theme for Nuxt with a single configuration file.</p>'   },
 95 |                         ],
 96 |                         homepage: false
 97 |                     },
 98 |                     
 99 |                     {
100 |                         css: 'w-full flex pt-8 px-8 leading-loose',
101 |                         elements: [
102 |                             { type: 'html' , content: '<h3>Tipography</h3><h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5>'   },
103 |                         ],
104 |                         homepage: false
105 |                     },
106 |                     {
107 |                         css: 'w-full flex pt-8 px-8',
108 |                         elements: [
109 |                             { type: 'html' , content: '<h3>Bullet list</h3><ul><li>Link 1</li><li>Link 2</li></ul>\
110 |                             <h3>Ordered list</h3><ol><li>List 1</li><li>List 2</li><li>List 3</li></ol>'   },
111 |                         ],
112 |                         homepage: false
113 |                     },
114 |                 ]
115 |             },
116 |             footer : {
117 |                 root    : 'w-full',
118 |                 blocks  : [
119 |                     {
120 |                         css: 'h-16 items-center  flex justify-center col-span-4  text-center text-grey-dark text-sm border-t' ,
121 |                         elements : [
122 |                             { type: 'html'      , content: '<small>Theme4Nuxt - a theme solution for Nuxtjs - Author: Antonio Nardone - License MIT</small>' , } 
123 |                         ],
124 |                         homepage: false
125 |                     }
126 |                 ]
127 |             }
128 |         },
129 |     }
130 |     
131 | }
132 | 
133 | export default layout


--------------------------------------------------------------------------------
/themes/index.js:
--------------------------------------------------------------------------------
  1 | const layout = {
  2 |     name        : 'Corporate Business',
  3 |     author      : 'A. Nardone',
  4 |     version     : '0.2.0',
  5 |     license     : 'MIT' ,
  6 |     root        : 'w-full flex flex-wrap min-h-screen',
  7 |     homepage    : '/',
  8 |     initData : [
  9 |       //{ type: 'api'   , name: 'posts'     , api : 'https://www.techcrunch.com/wp-json/wp/v2/posts' } ,
 10 |       //{ type: 'api'   , name: 'info'     , api :  'https://www.gianlucagiacalone.it/wp-json/wp/v2/posts' } , 
 11 |       { type: 'array'   , name: 'services'  , value : [
 12 |         {"type":"services",
 13 |         "title":"CSS Only",
 14 |         "abstract":"Theme4Nuxt is developed using only CSS with the Tailwind framework",
 15 |         "path":"css-only",
 16 |         "_id":"0tSvdJebN4cKmKa6",
 17 |         "icon":"style"},
 18 |         {"type":"services",
 19 |         "title":"Custom Design",
 20 |         "abstract":"Create your custom theme without any opinionated framework",
 21 |         "icon":"chrome_reader_mode",
 22 |         "path":"theme-builder",
 23 |         "_id":"MSOXCaCn4AfNz57w"},
 24 |         {"type":"services",
 25 |         "title":"Integration",
 26 |         "abstract":"Feel free to use your own components, API and data",
 27 |         "path":"api-data",
 28 |         "_id":"ueN9BbEdxvKoZWNi"
 29 |         ,"icon":"compare_arrows"}
 30 |     ] },
 31 |       { type: 'array' , name: 'skills'    , value : [{name:'CREATIVITY' , value: "90%"} , { name: 'ORGANIZATION' , value: "85%"} , { name: 'TEAM WORK' , value: "75%"} , { name: 'COMMUNICATION' , value: "70%"}]
 32 |       }
 33 |     ],
 34 |     
 35 | 
 36 |     navigation :  [{  
 37 |         css         : "items-start w-full pt-16 px-4 pb-20 bg-black opacity-75 h-screen",
 38 |         button      : "m-1 bg-white p-2 border-black border-2 rounded-full",
 39 |         line        : "hover:text-black hover:bg-white text-grey-lightest" ,
 40 |         link        : 'text-white hover:text-black hover:bg-white hover:text-bold py-10 px-4 no-underline',
 41 |         left        : false,
 42 |         transition: 'slideright',
 43 |         orientation : 'horizontal' , 
 44 |         items       :  [ { name : 'Home' , path: '/' } , { name: 'Blog' , path: '/blog' } , { name: 'About' , path: '/about' } , { name: 'How to' , path: '/howto'  } , { name: 'Store' , path: '/store' } , { name: 'GitHub', path: 'https://github.com/swina/theme4nuxt'}] 
 45 |     }],
 46 |     template: {
 47 |         main : {
 48 |             css : "w-full",
 49 |         },
 50 |         areas: {
 51 |              order  : ['header','content','footer'],
 52 |              header : {
 53 |                 root: 'w-full flex flex-wrap',
 54 |                 blocks : [
 55 |                     {
 56 |                         css: 'w-1/2 flex items-center h-12 bg-black text-grey text-xs pl-4 mobile',
 57 |                         elements: [
 58 |                             { type: 'html' , content: '<span>theme4nuxt@moodgiver.com</span>' }
 59 |                         ],
 60 |                         homepage: false
 61 |                     },
 62 |                     {
 63 |                         css: 'w-1/2 flex items-center justify-end h-12 bg-black text-grey text-xs pr-16 mobile',
 64 |                         elements: [
 65 |                             { type: 'html' , content: '<span class="justify-end">+1 123 456 7890</span>' }
 66 |                         ],
 67 |                         homepage: false
 68 |                     },
 69 |                     {
 70 |                         css: 'w-full md:w-1/2 lg:w-1/2 xl:w-1/2 h-24 opacity-75 justify-end flex items-center col bg-black' ,
 71 |                         elements : [
 72 |                             { type: 'html'      , content: '<div class="p-4 z-40 rounded-lg text-white"><h1><span class="font-light border-t-2">Theme<span class="text-white bg-blue-dark px-2 py-1">4</span></span><span class="border-b-4">Nuxt</span></h1></div>' , homepage: false }
 73 |                         ],
 74 |                         homepage: false
 75 |                     },
 76 |                     {
 77 |                         css: 'w-full md:w-1/2 lg:w-1/2 xl:w-1/2 border-l opacity-75 h-24 col z-30 justify-left items-center flex text-right pr-12 col-nav  bg-black mobile' , 
 78 |                         elements : [
 79 |                             { type: 'menu'      , navigation: 0, homepage: false}
 80 |                         ]
 81 |                     },
 82 |                     
 83 |                     
 84 |                     {
 85 |                         css: 'w-full bg-green-light flex h-128 items-center p-8 -mt-24 bg-header-8',
 86 |                         
 87 |                         elements: [
 88 |                            { type: 'html'  , content: '<h1 class="text-white">Theme4Nuxt</h1><h4 class="font-light">A solution to prototype or create themes for Nuxt using tailwind.css framework</h4><button class="bg-white text-black rounded mt-4 py-2 px-4 hover:bg-blue-dark hover:text-white">Get Started</button>' , action: '/howto'}
 89 |                         ],
 90 |                         homepage: true
 91 |                     }
 92 | 
 93 |                 ]
 94 |             },
 95 |             content : {
 96 |                 root: 'w-full flex flex-wrap',
 97 |                 blocks : [
 98 |                     {
 99 |                         css: 'w-full bg-transparent text-grey mx-4 -mt-20 py-6',
100 |                         elements: [
101 |                             { type: 'component' , component: 'core/services' , options: { data: 'services' , title: 'Features' } },
102 |                         ],
103 |                         homepage: true
104 |                     },
105 |                     
106 |                     {
107 |                         css: 'w-1/2 flex items-center gradient-blue-green h-64 text-white py-12 px-8 justify-center',
108 |                         elements: [
109 |                             { type: 'html' , content: '<h2>Helping you to create your theme</h2><p class="w-2/3 text-grey-dark">Learn how to create a theme for Nuxt with a single configuration file.</p>' , homepage: true  },
110 |                         ],
111 |                         homepage: true
112 |                     },
113 |                     
114 |                     {
115 |                         css: 'w-1/2 flex items-center gradient-blue-green h-64 text-grey-dark py-12 justify-center',
116 |                         elements: [
117 |                             { type: 'html' , content: '<ul><li>only CSS classes based on tailwind.css</li><li>create awesome themes</li><li>easy integration</li><li>fast theme/layout prototype</li><li>create html semantic elements</li><li>add markdown pages</li></ul>' , homepage: true  },
118 |                         ],
119 |                         homepage: true
120 |                     },
121 |                     
122 |                     { 
123 |                         css: 'w-full flex flex-wrap mt-4', 
124 |                         elements : [ 
125 |                             { type: 'component' , name: 'v-coreCards'  , component: 'core/cards' , options: { contest: 'info' } , data: [] , homepage: true , nuxt: true }
126 |                         ]
127 |                     },
128 |                             
129 |                   
130 |                 ]
131 |             },
132 |             footer : {
133 |                 root    : 'w-full',
134 |                 blocks  : [
135 |                     {
136 |                         css: 'h-16 items-center  flex justify-center col-span-4 bg-black text-center text-white' ,
137 |                         elements : [
138 |                             { type: 'html'      , content: '<small>Theme4Nuxt - a theme solution for Nuxtjs - Author: Antonio Nardone - License MIT</small>' , homepage: false} 
139 |                         ]
140 |                     }
141 |                 ]
142 |             }
143 |         },
144 |     },
145 |     extra: {
146 |         html : '<div class="fixed pin-b pin-r p-1 z-50 bg-black text-white text-xs rounded-tl">Corporate Business Theme 0.2.0</div>'
147 |     }
148 |     
149 | }
150 | 
151 | export default layout


--------------------------------------------------------------------------------
/themes/theme3.js:
--------------------------------------------------------------------------------
  1 | const layout = {
  2 |     name     : 'SOHO Business',
  3 |     author    : 'A. Nardone',
  4 |     version   : '0.2.0',
  5 |     root     : 'w-full flex flex-wrap min-h-screen',
  6 |     homepage    : '/',
  7 |     initData : [
  8 |       { type: 'api'   , name: 'posts'     , api : 'https://www.techcrunch.com/wp-json/wp/v2/posts' },
  9 |       { type: 'api'   , name: 'services'  , api : '/sections?type=services' },
 10 |       { type: 'array' , name: 'skills'    , value : [{name:'CREATIVITY' , value: "90%"} , { name: 'ORGANIZATION' , value: "85%"} , { name: 'TEAM WORK' , value: "75%"} , { name: 'COMMUNICATION' , value: "70%"}]
 11 |       }
 12 |     ],
 13 | 
 14 |     navigation :  [{  
 15 |         css        : "items-start w-full z-50 pt-16 pl-8 pb-20 bg-red clipped-tag-down rounded-bl-lg",
 16 |         button     : "m-4 bg-red text-white p-4 border-red-light border-2 rounded-full",
 17 |         line       : "hover:text-black hover:bg-red-light text-white border-b border-red-light" ,
 18 |         link       : 'text-grey hover:text-black px-4 no-underline',
 19 |         left       : false,
 20 |         transition : 'slidedown',
 21 |         orientation: 'horizontal' , 
 22 |         items:  [ { name : 'Home' , path: '/' } , { name: 'Blog' , path: '/blog' } , { name: 'About' , path: '/about' } , { name: 'How to' , path: '/howto' } , { name: 'Store' , path: '/store' } , { name: 'GitHub', path: 'https://github.com/swina/theme4nuxt'}] 
 23 |     }],
 24 |     template: {
 25 |         main : {
 26 |             css : "w-full bg-black",
 27 |             
 28 |         },
 29 |         areas: {
 30 |              order  : ['header','content','footer'],
 31 |              header : {
 32 |                 root: 'w-full flex flex-wrap',
 33 |                 blocks : [
 34 |                    
 35 |                     {
 36 |                         css: 'w-full md:w-1/4 lg:w-1/4 xl:w-1/4 h-24 flex col z-30 bg-white border-b border-red items-center justify-center' ,
 37 |                         elements : [
 38 |                             { type: 'html'      , content: '<h1 class="text-white border border-white p-2 rounded-lg bg-red"><span class="font-light">Theme<span class="text-black">4</span></span>Nuxt</h1>' , homepage: false }
 39 |                         ]
 40 |                     },
 41 |                     {
 42 |                         css: 'w-full md:w-3/4 lg:w-3/4 xl:w-3/4 h-24 col z-30 bg-white justify-end items-center flex text-right pr-24 col-nav border-b border-red mobile' , 
 43 |                         elements : [
 44 |                             { type: 'menu'      , navigation: 0, homepage: false}
 45 |                         ]
 46 |                     },
 47 |                     
 48 |                     
 49 |                 ]
 50 |             },
 51 |             content : {
 52 |                 root: 'w-full flex flex-wrap',
 53 |                 blocks : [
 54 |                     {
 55 |                         css: 'w-full',
 56 |                         elements: [
 57 |                             { type: 'css'       , content: 'bg-header-4 h-screen z-back -mt-24' , homepage: true }
 58 |                         ],
 59 |                         homepage: true
 60 |                     },
 61 |                     {
 62 |                         css: 'w-full bg-black text-grey-dark pb-24',
 63 |                         elements: [
 64 |                             { type: 'component' , component: 'core/services'  , options: { data: 'services' } ,  homepage: true  },
 65 |                         ],
 66 |                         homepage: true
 67 |                     },
 68 |                     {
 69 |                         css : 'w-full -mt-12 lg:-mt-24',
 70 |                         elements : [
 71 |                             { type: 'html' , content : '<svg viewBox="0 0 1428 174" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-2.000000, 44.000000)" fill="#FFFFFF" fill-rule="nonzero"><path d="M0,0 C90.7283404,0.927527913 147.912752,27.187927 291.910178,59.9119003 C387.908462,81.7278826 543.605069,89.334785 759,82.7326078 C469.336065,156.254352 216.336065,153.6679 0,74.9732496" opacity="0.100000001"></path><path d="M100,104.708498 C277.413333,72.2345949 426.147877,52.5246657 546.203633,45.5787101 C666.259389,38.6327546 810.524845,41.7979068 979,55.0741668 C931.069965,56.122511 810.303266,74.8455141 616.699903,111.243176 C423.096539,147.640838 250.863238,145.462612 100,104.708498 Z" opacity="0.100000001"></path><path d="M1046,51.6521276 C1130.83045,29.328812 1279.08318,17.607883 1439,40.1656806 L1439,120 C1271.17211,77.9435312 1140.17211,55.1609071 1046,51.6521276 Z" id="Path-4" opacity="0.400000003"></path></g><g transform="translate(-4.000000, 76.000000)" fill="#FFFFFF" fill-rule="nonzero"><path d="M0.457,34.035 C57.086,53.198 98.208,65.809 123.822,71.865 C181.454,85.495 234.295,90.29 272.033,93.459 C311.355,96.759 396.635,95.801 461.025,91.663 C486.76,90.01 518.727,86.372 556.926,80.752 C595.747,74.596 622.372,70.008 636.799,66.991 C663.913,61.324 712.501,49.503 727.605,46.128 C780.47,34.317 818.839,22.532 856.324,15.904 C922.689,4.169 955.676,2.522 1011.185,0.432 C1060.705,1.477 1097.39,3.129 1121.236,5.387 C1161.703,9.219 1208.621,17.821 1235.4,22.304 C1285.855,30.748 1354.351,47.432 1440.886,72.354 L1441.191,104.352 L1.121,104.031 L0.457,34.035 Z"></path></g></g></svg>'
 72 |                             }
 73 |                         ],
 74 |                         homepage: true
 75 |                     },
 76 |                     { 
 77 |                         css: 'w-full pt-12 -mt-1 bg-white', 
 78 |                         elements : [
 79 |                             { type: 'html'      , content: '<h1 class="text-center"><div class="-mb-4 m-auto border-8 items-center flex justify-center h-32 w-32 bg-red text-white">Blog</div></h1>' , homepage: true  },
 80 | 
 81 |                             { type: 'component' , component: 'posts' , options: { data: 'info' } , homepage: true },
 82 |                             
 83 |                             { type: 'html'      , content: '<h1 class="text-center"><div class="-mb-4 m-auto border-8 border-red items-center flex justify-center h-32 w-32 bg-grey-darkest text-white">News</div></h1>' , homepage: true  },
 84 |                             { type: 'component' , component: 'posts' , options: { data: 'info' } , homepage: true , nuxt: true}
 85 |                         ],
 86 |                     },
 87 |                    
 88 |                 ]
 89 |             },
 90 |             footer : {
 91 |                 root    : 'w-full',
 92 |                 blocks  : [
 93 |                     {
 94 |                         css: 'h-16 items-center  flex justify-center col-span-4 bg-red text-center text-white' ,
 95 |                         elements : [
 96 |                             { type: 'html'      , content: '<small>Theme4Nuxt - a theme solution for Nuxtjs - Author: Antonio Nardone - License MIT</small>' , homepage: false} 
 97 |                         ]
 98 |                     }
 99 |                 ]
100 |             }
101 |         },
102 |     }
103 |     /*
104 |     template: {
105 |         main : {
106 |             css : "w-full grid columns-4 rows-5",
107 |             
108 |         },
109 |         grid : [
110 |             'h-16 bg-red col' , 
111 |             'h-16 col col-span-3 justify-end text-right pr-4 bg-red' , 
112 |             'z-back h-screen bg-header-1 -mt-16 col-span-4' , 
113 |             'col-span-4 sm:px-8 px-8 bg-black' , 
114 |             'row-span-2 p-4 bg-black w-full' ,
115 |             'row-span-2 bg-black col-span-2' , 
116 |             'row-span-2 px-4 bg-black text-white' , 
117 |             'h-16 items-center border-t-4 border-red flex justify-center col-span-4 bg-grey-darkest text-center text-grey' 
118 |         ],
119 |         blocks : [
120 |             [{ type: 'html'      , content: '<h1 class="absolute mt-4 pl-4 text-white"><span class="font-light">Theme<span class="text-black">4</span></span>Nuxt</h1></h1>' }],
121 |             [{ type: 'nav'       , navigation: 0 }],
122 |             [{ type: 'html'      , content: ''}],
123 |             [{ type: 'component' , name: 'v-coreServices'  , title: '' , css: 'bg-red-light shadow icon-rounded rounded text-white px-8 sm:px-16  -mt-16' ,  data : 'services'  , api: 'services' } ],
124 |             [{ type: 'html'      , content: '' } ],
125 |             [{ type: 'component' , name: 'v-coreTiles'  , data: 'posts' , nuxt: true  }],
126 |             [{ type: 'component' , name: 'v-coreSkills' , data: 'skills' }],
127 |             [{ type: 'html'      , content: '<small>Theme4Nuxt - a theme solution for Nuxtjs - Author: Antonio Nardone - License MIT</small>' }]
128 |         ]
129 |     },
130 |     extra :{
131 | 
132 |     }
133 |     */
134 | }
135 | 
136 | export default layout


--------------------------------------------------------------------------------
/themes/theme7.js:
--------------------------------------------------------------------------------
  1 | const layout = {
  2 |     name        : 'Corporate Business',
  3 |     author      : 'A. Nardone',
  4 |     version     : '0.2.0',
  5 |     license     : 'MIT' ,
  6 |     root        : 'w-full flex flex-wrap min-h-screen',
  7 |     homepage    : '/',
  8 |     initData : [
  9 |       { type: 'api'   , name: 'posts'     , api : 'https://www.techcrunch.com/wp-json/wp/v2/posts' } ,
 10 |       { type: 'api'   , name: 'info'     , api :  'https://www.gianlucagiacalone.it/wp-json/wp/v2/posts' } , 
 11 |       { type: 'array'   , name: 'services'  , value : [
 12 |         {"type":"services",
 13 |         "title":"CSS Only",
 14 |         "abstract":"Theme4Nuxt is developed using only CSS with the Tailwind framework",
 15 |         "path":"css-only",
 16 |         "_id":"0tSvdJebN4cKmKa6",
 17 |         "icon":"style"},
 18 |         {"type":"services",
 19 |         "title":"Custom Design",
 20 |         "abstract":"Create your custom theme without any opinionated framework",
 21 |         "icon":"chrome_reader_mode",
 22 |         "path":"theme-builder",
 23 |         "_id":"MSOXCaCn4AfNz57w"},
 24 |         {"type":"services",
 25 |         "title":"Integration",
 26 |         "abstract":"Feel free to use your own components, API and data",
 27 |         "path":"api-data",
 28 |         "_id":"ueN9BbEdxvKoZWNi"
 29 |         ,"icon":"compare_arrows"}
 30 |     ] },
 31 |       { type: 'array' , name: 'skills'    , value : [{name:'CREATIVITY' , value: "90%"} , { name: 'ORGANIZATION' , value: "85%"} , { name: 'TEAM WORK' , value: "75%"} , { name: 'COMMUNICATION' , value: "70%"}]
 32 |       }
 33 |     ],
 34 |     
 35 | 
 36 |     navigation :  [{  
 37 |         css         : "items-start w-full pt-16 px-4 pb-20 bg-black opacity-75 h-screen",
 38 |         button      : "m-1 bg-white p-2 border-black border-2 rounded-full",
 39 |         line        : "hover:text-black hover:bg-white text-grey-lightest" ,
 40 |         link        : 'text-white hover:text-black hover:bg-white hover:text-bold py-10 px-4 no-underline',
 41 |         left        : false,
 42 |         transition: 'slideright',
 43 |         orientation : 'horizontal' , 
 44 |         items       :  [ { name : 'Home' , path: '/' } , { name: 'Blog' , path: '/blog' } , { name: 'About' , path: '/about' } , { name: 'How to' , path: '/howto'  } , { name: 'Store' , path: '/store' } , { name: 'GitHub', path: 'https://github.com/swina/theme4nuxt'} ] 
 45 |     }],
 46 |     template: {
 47 |         main : {
 48 |             css : "w-full",
 49 |         },
 50 |         areas: {
 51 |              order  : ['header','content','footer'],
 52 |              header : {
 53 |                 root: 'w-full flex flex-wrap',
 54 |                 blocks : [
 55 |                     {
 56 |                         css: 'w-1/2 flex items-center h-12 bg-black text-grey text-xs pl-4 mobile',
 57 |                         elements: [
 58 |                             { type: 'html' , content: '<span>theme4nuxt@moodgiver.com</span>' }
 59 |                         ],
 60 |                         homepage: false
 61 |                     },
 62 |                     {
 63 |                         css: 'w-1/2 flex items-center justify-end h-12 bg-black text-grey text-xs pr-16 mobile',
 64 |                         elements: [
 65 |                             { type: 'html' , content: '<span class="justify-end">+1 123 456 7890</span>' }
 66 |                         ],
 67 |                         homepage: false
 68 |                     },
 69 |                     {
 70 |                         css: 'w-full md:w-1/2 lg:w-1/2 xl:w-1/2 h-24 opacity-75 justify-end flex items-center col bg-black' ,
 71 |                         elements : [
 72 |                             { type: 'html'      , content: '<div class="p-4 z-40 rounded-lg text-white"><h1><span class="font-light border-t-2">Theme<span class="text-white bg-blue-dark px-2 py-1">4</span></span><span class="border-b-4">Nuxt</span></h1></div>' , homepage: false }
 73 |                         ],
 74 |                         homepage: false
 75 |                     },
 76 |                     {
 77 |                         css: 'w-full md:w-1/2 lg:w-1/2 xl:w-1/2 border-l opacity-75 h-24 col z-30 justify-left items-center flex text-right pr-12 col-nav  bg-black mobile' , 
 78 |                         elements : [
 79 |                             { type: 'menu'      , navigation: 0, homepage: false}
 80 |                         ]
 81 |                     },
 82 |                     
 83 |                     
 84 |                     {
 85 |                         css: 'w-full bg-green-light flex h-128 items-center p-8 -mt-24 bg-header-8',
 86 |                         
 87 |                         elements: [
 88 |                            { type: 'html'  , content: '<h1 class="text-white">Theme4Nuxt</h1><h4 class="font-light">A solution to prototype or create themes for Nuxt using tailwind.css framework</h4><button class="bg-white text-black rounded mt-4 py-2 px-4 hover:bg-blue-dark hover:text-white">Get Started</button>' , action: '/howto'}
 89 |                         ],
 90 |                         homepage: true
 91 |                     }
 92 | 
 93 |                 ]
 94 |             },
 95 |             content : {
 96 |                 root: 'w-full flex flex-wrap',
 97 |                 blocks : [
 98 |                     {
 99 |                         css: 'w-full bg-transparent text-grey mx-4 -mt-20 py-6',
100 |                         elements: [
101 |                             { type: 'component' , component: 'core/services' , options: { data: 'services' , title: 'Features' , box: 'bg-white rounded py-8 px-4 h-full shadow-lg' } },
102 |                         ],
103 |                         homepage: true
104 |                     },
105 |                     
106 |                     {
107 |                         css: 'w-1/2 flex items-center gradient-blue-green h-64 text-white py-12 px-8 justify-center',
108 |                         elements: [
109 |                             { type: 'html' , content: '<h2>Helping you to create your theme</h2><p class="w-2/3 text-grey-dark">Learn how to create a theme for Nuxt with a single configuration file.</p>' , homepage: true  },
110 |                         ],
111 |                         homepage: true
112 |                     },
113 |                     
114 |                     {
115 |                         css: 'w-1/2 flex items-center gradient-blue-green h-64 text-grey-dark py-12 justify-center',
116 |                         elements: [
117 |                             { type: 'html' , content: '<ul><li>only CSS classes based on tailwind.css</li><li>create awesome themes</li><li>easy integration</li><li>fast theme/layout prototype</li><li>create html semantic elements</li><li>add markdown pages</li></ul>' , homepage: true  },
118 |                         ],
119 |                         homepage: true
120 |                     },
121 |                     {
122 |                         css: 'w-full shadow my-8',
123 |                         elements: [
124 |                             { type: 'component' , component: 'core/prices' , 
125 |                                 options: { 
126 |                                     data    : 'prices' ,
127 |                                     style   : "px-8 scale-1",
128 |                                     title   : '<h1 class="font-light text-2xl">Pricing</h1>' ,
129 |                                     css     : 'rounded-t border h-64 bg-white hover:shadow-lg text-center text-grey-darkest p-4 pb-8',
130 |                                     action  : 'bg-white border-l border-r border-b rounded-b flex items-center justify-center',
131 |                                     button  : 'm-4 py-2 px-4 bg-green-light hover:bg-green text-white rounded',
132 |                                 } 
133 |                             },
134 |                         ],
135 |                         homepage: true
136 |                     },
137 |                     { 
138 |                         css: 'w-full flex flex-wrap mt-4', 
139 |                         elements : [ 
140 |                             { type: 'component' , name: 'v-coreCards'  , component: 'core/cards' , options: { contest: 'info' } , data: [] , homepage: true , nuxt: true }
141 |                         ]
142 |                     },
143 |                             
144 |                   
145 |                 ]
146 |             },
147 |             footer : {
148 |                 root    : 'w-full',
149 |                 blocks  : [
150 |                     {
151 |                         css: 'h-16 items-center  flex justify-center col-span-4 bg-black text-center text-white' ,
152 |                         elements : [
153 |                             { type: 'html'      , content: '<small>Theme4Nuxt - a theme solution for Nuxtjs - Author: Antonio Nardone - License MIT</small>' , homepage: false} 
154 |                         ]
155 |                     }
156 |                 ]
157 |             }
158 |         },
159 |     },
160 |     extra: {
161 |         html : '<div class="fixed pin-b pin-r p-1 z-50 bg-black text-white text-xs rounded-tl">Corporate Business Theme 0.2.0</div>'
162 |     }
163 |     
164 | }
165 | 
166 | export default layout


--------------------------------------------------------------------------------
/assets/css/theme.css:
--------------------------------------------------------------------------------
  1 | .bg-header-0 {
  2 |     background: url('https://storage.googleapis.com/ghostfood-539ae.appspot.com/theme4nuxt/smoke-png-541.png') no-repeat;
  3 |     background-size: cover;
  4 |   }
  5 |   
  6 |   .bg-header-1 {
  7 |     background: url('https://storage.googleapis.com/ghostfood-539ae.appspot.com/theme4nuxt/bg1.jpg') no-repeat;
  8 |     background-size: cover;
  9 |   }
 10 |   
 11 |   .bg-header-2 {
 12 |     background: url('https://storage.googleapis.com/ghostfood-539ae.appspot.com/theme4nuxt/bg-3.jpg') no-repeat;
 13 |     background-size: cover;
 14 |   }
 15 |   
 16 |   .bg-header-3 {
 17 |     background: url('https://storage.googleapis.com/ghostfood-539ae.appspot.com/theme4nuxt/bg-5.jpg') no-repeat center center;
 18 |     background-size: cover;
 19 |   }
 20 | 
 21 |   .bg-header-4 {
 22 |     background: url('https://storage.googleapis.com/ghostfood-539ae.appspot.com/theme4nuxt/bg-4.jpg') no-repeat center center;
 23 |     background-size: cover;
 24 |   }
 25 |   
 26 | 
 27 |   .bg-header-5 {
 28 |     background: url('https://storage.googleapis.com/ghostfood-539ae.appspot.com/theme4nuxt/bg-6.jpg') no-repeat center center;
 29 |     background-size: cover;
 30 |   }
 31 | 
 32 |   .bg-theme-3 {
 33 |     background: url('https://storage.googleapis.com/ghostfood-539ae.appspot.com/theme4nuxt/small/theme4nuxt-theme-3.jpg') no-repeat center center;
 34 |     background-size: cover;
 35 |   }
 36 |   
 37 |   .bg-header-7 {
 38 |     background: url('https://storage.googleapis.com/ghostfood-539ae.appspot.com/theme4nuxt/bg-7.jpg') no-repeat center center;
 39 |     background-size: cover;
 40 |   }
 41 | 
 42 |   .bg-header-8 {
 43 |     background: url('https://storage.googleapis.com/ghostfood-539ae.appspot.com/theme4nuxt/bg-8.jpg') no-repeat center center;
 44 |     background-size: cover;
 45 |   }
 46 | 
 47 |   .bg-header-9 {
 48 |     background: url('https://storage.googleapis.com/ghostfood-539ae.appspot.com/theme4nuxt/bg-9.jpg') no-repeat center center;
 49 |     background-size: cover;
 50 |   }
 51 | 
 52 |   .h-80 {
 53 |     height:20rem;
 54 |   }
 55 |   .h-96 {
 56 |     height:24rem;
 57 |   }
 58 |   
 59 |   .h-128 {
 60 |     height:32rem;
 61 |   }
 62 |   
 63 | .clipped-menu { 
 64 |     -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 18% 100%, 0 81%);
 65 | clip-path: polygon(0 0, 100% 0, 100% 100%, 18% 100%, 0 81%);
 66 | 
 67 | }
 68 | 
 69 | 
 70 | .clipped-menu-right { 
 71 |     -webkit-clip-path: polygon(0 0, 100% 0, 100% 81%, 81% 100%, 0 100%);
 72 |     clip-path: polygon(0 0, 100% 0, 100% 81%, 81% 100%, 0 100%);
 73 | }
 74 | 
 75 | .clipped-right-point {
 76 |     -webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
 77 |     clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
 78 | }
 79 | 
 80 | .clipped-left-point {
 81 |     -webkit-clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%);
 82 |     clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%);
 83 | }
 84 | 
 85 | .clipped-tag-down {
 86 |     -webkit-clip-path: polygon(50% 0%, 100% 0, 100% 100%, 51% 84%, 0 100%, 0 0);
 87 | clip-path: polygon(50% 0%, 100% 0, 100% 100%, 51% 84%, 0 100%, 0 0);
 88 | }
 89 | 
 90 | .clipped-circle-left {
 91 |     -webkit-clip-path: circle(92.6% at 26% 0);
 92 | clip-path: circle(92.6% at 26% 0);
 93 | }
 94 | 
 95 | .clipped-zig-zag {
 96 |     -webkit-clip-path: polygon(35% 33%, 70% 12%, 100% 32%, 100% 93%, 66% 75%, 38% 93%, 0 68%, 0 13%);
 97 |     clip-path: polygon(35% 33%, 70% 12%, 100% 32%, 100% 93%, 66% 75%, 38% 93%, 0 68%, 0 13%);
 98 | }
 99 | 
100 | .clipped-angle-right {
101 |   clip-path:  polygon(0 0, 100% 0, 100% 94%, 0% 100%);
102 | }
103 | 
104 | .clipped-angle-right-lg {
105 |   clip-path:  polygon(0 0, 100% 0, 100% 64%, 0% 100%);
106 | }
107 | 
108 | .clipped-angle-left {
109 |   clip-path:  polygon(0 0, 100% 0, 100% 100%, 0% 94%);
110 | }
111 | 
112 | .clipped-angle-left-lg {
113 |   clip-path:  polygon(0 0, 100% 0, 100% 100%, 0% 64%);
114 | }
115 | 
116 | .clipped-angle-up-right {
117 |   clip-path: polygon(0 36%, 100% 0, 100% 100%, 0 100%);
118 | }
119 | .clipped-arrow-left {
120 |     -webkit-clip-path: polygon(14% 0, 100% 0, 100% 100%, 14% 99%, 0 50%);
121 | clip-path: polygon(14% 0, 100% 0, 100% 100%, 14% 99%, 0 50%);
122 | }
123 | 
124 | .clipped-arrow-down {
125 |     -webkit-clip-path: polygon(17% 0, 83% 0, 83% 59%, 100% 60%, 50% 100%, 0% 60%, 17% 60%);
126 |     clip-path: polygon(17% 0, 83% 0, 83% 59%, 100% 60%, 50% 100%, 0% 60%, 17% 60%);
127 | }
128 | 
129 | .clipped-next {
130 |     -webkit-clip-path: polygon(0 40%, 0 0, 100% 0, 100% 100%, 70% 100%, 0 100%, 0 60%, 3% 50%);
131 |     clip-path: polygon(0 40%, 0 0, 100% 0, 100% 100%, 70% 100%, 0 100%, 0 60%, 3% 50%);
132 | }
133 | .clipped-half-down {
134 |    -webkit-clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
135 |     clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
136 |     
137 |     transition: all 750ms ease-in-out
138 |  
139 | }
140 | .slide-enter-active {
141 |     transition: transform .8s ease-in-out;
142 |  }
143 |  
144 |  .slide-leave-active {
145 |     transition: transform .8s ease-in-out;
146 |  }
147 |  
148 |  .slide-enter-to, .slide-leave {
149 |     /*max-height: 100%;*/
150 |     overflow: hidden;
151 |     opacity:1;
152 |  }
153 |  
154 |  .slide-enter, .slide-leave-to {
155 |     overflow: hidden;
156 |     /*max-height: 0;*/
157 |     opacity:0;
158 |  }
159 | 
160 | /*---------------------------*/
161 | 
162 | .slideleft-enter-active {
163 |     transition: transform .8s ease-in-out;
164 |  }
165 |  
166 |  .slideleft-leave-active {
167 |     transition: transform .8s ease-in-out;
168 |  }
169 |  
170 |  .slideleft-enter-to, .slideleft-leave {
171 |     transform: translate(0%, 0);
172 |     overflow: hidden;
173 |  }
174 |  
175 |  .slideleft-enter, .slideleft-leave-to {
176 |     transform: translate(-100%, 0);
177 |     margin-right: 0;
178 |  }
179 | 
180 | /*----------------------------*/
181 | 
182 | /*---------------------------*/
183 | 
184 | .slideright-enter-active {
185 |    transition: transform .8s ease-in-out;
186 | }
187 | 
188 | .slideright-leave-active {
189 |    transition: transform .8s ease-in-out;
190 | }
191 | 
192 | .slideright-enter-to, .slideright-leave {
193 |    transform: translate(0%, 0);
194 |    overflow: hidden;
195 | }
196 | 
197 | .slideright-enter, .slideright-leave-to {
198 |    transform: translate(100%, 0);
199 |    margin-right: 0;
200 | }
201 | 
202 | /*----------------------------*/
203 | 
204 | .flip {
205 |    transition: transform .5s ease-in-out; 
206 |    transform: rotateY(0deg);
207 | }
208 | 
209 | .flip > div {
210 |    transform: rotateY(180deg);
211 |    width:100%;
212 |    height:100%;
213 |    opacity:0;
214 | }
215 | 
216 | .flip:hover {
217 |    transition: transform .8s ease-in-out; 
218 |    transform: rotateY(180deg);
219 |    opacity:1
220 | }
221 | 
222 | .flip:hover > div {
223 |    transition: transform .8s ease-in-out; 
224 |    transform: rotateY(180deg);
225 |    opacity:1
226 | }
227 | 
228 | .slidedown > div {
229 |    transition: transform .8s ease-in-out;
230 |    transform: translate(0,-100%);
231 |    opacity:0;
232 | }
233 | 
234 | .slidedown:hover > div {
235 |    transition: transform .8s ease-in-out;
236 |    transform: translate(0,0);
237 |    min-width:100%;
238 |    opacity:1;
239 | }
240 | 
241 | .scale-1 {
242 |    transition: transform .2s ease-in-out;
243 |    transform: scale(1,1);
244 |    z-index:1; 
245 | }
246 | 
247 | .scale-1:hover {
248 |    transition: transform .2s ease-in-out;
249 |    transform: scale(1.2,1.2); 
250 |    z-index:10;
251 | }
252 | 
253 | .submenu > div {
254 |    opacity:0;
255 | }
256 | 
257 | .submenu:hover > div {
258 |    opacity:1;
259 | }
260 | 
261 | /*---------------------------*/
262 | 
263 | .slidedown-enter-active {
264 |     transition: transform .8s ease-in-out;
265 |  }
266 |  
267 |  .slidedown-leave-active {
268 |     transition: transform .8s ease-in-out;
269 |  }
270 |  
271 |  .slidedown-enter-to, .slidedown-leave {
272 |     transform: translate(0, 0);
273 |     overflow: hidden;
274 |  }
275 |  
276 |  .slidedown-enter, .slidedown-leave-to {
277 |     transform: translate(0, -100%);
278 |     margin-right: 0;
279 |  }
280 | 
281 | /*----------------------------*/
282 | 
283 | /*---------------------------*/
284 | .w-translate-center {
285 |     margin:0 auto;
286 |     position:absolute;
287 |     transform: translate(-50%,0);
288 | }
289 | 
290 | @media screen and (max-width: 576px){
291 |     .w-translate-center {
292 |         transform: translate(0,0);
293 |     }
294 | }
295 | .slidedowncenter-enter-active {
296 |     transition: transform .8s ease-in-out;
297 |  }
298 |  
299 |  .slidedowncenter-leave-active {
300 |     transition: transform .8s ease-in-out;
301 |  }
302 |  
303 |  .slidedowncenter-enter-to, .slidedowncenter-leave {
304 |     transform: translate(-50%, 0);
305 |     overflow: hidden;
306 |  }
307 |  
308 |  .slidedowncenter-enter, .slidedowncenter-leave-to {
309 |     transform: translate(-50%,-100%);
310 |     overflow:hidden;
311 |  }
312 | 
313 | /*----------------------------*/
314 | 
315 |  
316 |  .rotate-enter-active {
317 |      transition: transform .8s ease-in-out; 
318 |  }
319 |  .rotate-leave-active {
320 |     transition: transform 0.8s ease-in-out;  
321 |  }
322 |  
323 |  .rotate-enter-to, .rotate-leave {
324 |      transform:rotate(360deg);
325 |  }
326 |  
327 |  .rotate-enter , .rotate-leave-to {
328 |      max-width:0px;
329 |      max-height:0px;
330 |      transform:rotate(0deg);
331 |  }
332 | 
333 |  .gradient-blue {
334 |    background-color: #667eea;
335 |    background-image: linear-gradient(to bottom, #00c6fb, #005bea)
336 |  }
337 | 
338 |  
339 |  .gradient-blue-dark {
340 |    background-color: #455ab9;
341 |    background-image: linear-gradient(to bottom, #455ab9, #012e77)
342 |  }
343 | 
344 |  .gradient-blue-green {
345 |    background-color: #179489;
346 |    background-image: linear-gradient(to bottom, #179489, #005d81)
347 |  }
348 | 
349 |  .gradient-green {
350 |    background-color: #66ea9d;
351 |    background-image: linear-gradient(to bottom, #66ea9d, #20b40c)
352 |  }
353 | 
354 |  @media screen and (max-width: 640px){
355 |     .mobile {
356 |       display:none;
357 |     }
358 |  }
359 | 
360 |  .h-full-calc-1-4 {
361 |     min-height: calc(100vh*.25);
362 |  }
363 | 
364 |  .h-full-calc-1-2 {
365 |    min-height: calc(100vh*.50);
366 | }
367 | 


--------------------------------------------------------------------------------
/themes/theme4.js:
--------------------------------------------------------------------------------
  1 | const layout = {
  2 |     name     : 'Angle e-commerce',
  3 |     author    : 'A. Nardone',
  4 |     version   : '0.2.0',
  5 |     root     : 'w-full flex flex-wrap min-h-screen',
  6 |     homepage    : '/',
  7 |     initData : [
  8 |       { type: 'api'   , name: 'posts'     , api : 'https://www.techcrunch.com/wp-json/wp/v2/posts' } , //'/posts?$sort[createdAt]=-1&$limit=4' },
  9 |       { type: 'api'   , name: 'info'     , api :  'https://www.gianlucagiacalone.it/wp-json/wp/v2/posts' } , // '/posts?$sort[createdAt]=-1&$limit=4' },
 10 |       { type: 'api'   , name: 'services'  , api : 'http://localhost:3030/sections?type=services' },
 11 |       { type: 'array' , name: 'skills'    , value : [{name:'CREATIVITY' , value: "90%"} , { name: 'ORGANIZATION' , value: "85%"} , { name: 'TEAM WORK' , value: "75%"} , { name: 'COMMUNICATION' , value: "70%"}]
 12 |       }
 13 |     ],
 14 | 
 15 |     navigation :  [{  
 16 |         css     : "items-start w-full pt-16 px-2 pb-20 bg-green-light clipped-angle-left",
 17 |         button  : "m-4 bg-white p-4 border-black border-2 rounded-full",
 18 |         line    : "hover:text-black hover:bg-green-lighter text-grey-lightest" ,
 19 |         link       : 'text-white hover:text-white hover:bg-black rounded hover:text-bold py-2 px-4 no-underline',
 20 |         left    : false,
 21 |         transition: 'slidedown',
 22 |         orientation: 'horizontal' , 
 23 |         items:  [ { name : 'Home' , path: '/' } , { name: 'Blog' , path: '/blog' } , { name: 'About' , path: '/about' } , { name: 'How to' , path: '/howto' } , { name: 'Store' , path: '/store' } , { name: 'GitHub', path: 'https://github.com/swina/theme4nuxt'}] 
 24 |     }],
 25 |     template: {
 26 |         main : {
 27 |             css : "w-full",
 28 |             
 29 |         },
 30 |         areas: {
 31 |              order  : ['header','content','footer'],
 32 |              header : {
 33 |                 root: 'w-full flex flex-wrap',
 34 |                 blocks : [
 35 |                    
 36 |                     
 37 |                    
 38 |                     {
 39 |                         css: 'w-full md:w-1/4 lg:w-1/4 xl:w-1/4 h-24 flex items-center col bg-green-light' ,
 40 |                         elements : [
 41 |                             { type: 'html'      , content: '<div class="p-4 z-40  rounded-lg text-white"><h1><span class="font-light border-t-2">Theme<span class="text-white bg-red px-2 py-1">4</span></span><span class="border-b-4">Nuxt</span></h1></div>' , homepage: false }
 42 |                         ],
 43 |                         homepage: false
 44 |                     },
 45 |                     {
 46 |                         css: 'w-full md:w-3/4 lg:w-3/4 xl:w-3/4 h-24 col z-30 justify-left items-center flex text-right pr-12 col-nav  bg-green-light mobile' , 
 47 |                         elements : [
 48 |                             { type: 'menu'      , navigation: 0, homepage: false}
 49 |                         ]
 50 |                     },
 51 |                     
 52 |                     
 53 |                     {
 54 |                         css: 'w-full bg-green-light h-32 clipped-angle-left-lg',
 55 |                         
 56 |                         elements: [
 57 |                            { type: 'html'  , content: ''}
 58 |                         ]
 59 |                     }
 60 |                 ]
 61 |             },
 62 |             content : {
 63 |                 root: 'w-full flex flex-wrap',
 64 |                 blocks : [
 65 |                    
 66 |                     { 
 67 |                         css: 'w-full flex flex-wrap justify-center', 
 68 |                         elements : [ 
 69 |                             { type: 'component' , component: 'core/cards'  , options: { contest: 'products' }, homepage: true , nuxt: true }
 70 |                         ]
 71 |                     },
 72 | 
 73 |                     
 74 |                     {
 75 |                         css: 'w-full bg-green-light h-32 clipped-angle-up-right',
 76 |                         
 77 |                         elements: [
 78 |                            { type: 'html'  , content: ''}
 79 |                         ]
 80 |                     },
 81 |                    
 82 |                     
 83 |                     {
 84 |                         css: 'w-full flex items-center justify-center h-48 pt-8 -mt-2 bg-green-light',
 85 |                         elements: [
 86 |                             { type: 'html'       , content: '<div class="px-4 z-30 opacity-75 rounded-lg text-white"><h4>Do you need a theme solution for Nuxt?</h4><h1><span class="font-light">Theme<span class="text-black">4</span></span>Nuxt</h1><button class="my-4 py-2 px-4 bg-grey-light rounded shadow-lg hover:bg-indigo hover:text-white">Get Started</button></div>' , homepage: true }
 87 |                         ],
 88 |                         homepage: true
 89 |                     },
 90 |                     {
 91 |                         css: 'w-full bg-green-light text-grey-light shadow',
 92 |                         elements: [
 93 |                             { type: 'component' , component: 'core/services'  , options : { data: 'services' , single: 'h-full py-8 shadow-lg px-4 bg-blue-dark rounded'} , title: 'Features' , homepage: true  },
 94 |                         ],
 95 |                         homepage: true
 96 |                     },
 97 |                     /*{ 
 98 |                         css: 'w-full md:w-full lg:w-1/2 xl:w-1/2', 
 99 |                         elements : [
100 |                             { type: 'html'      , content: '<h1 class="text-center"><div class="-mb-4 m-auto border-8 items-center flex justify-center h-32 w-32 bg-indigo-dark text-white">Blog</div></h1>' , homepage: true  },
101 |                             //{ type: 'component' , name: 'v-posts'  , data: 'info'  ,  homepage: true },
102 |                         ]
103 |                     },
104 |                     { 
105 |                         css: 'w-full md:w-full lg:w-1/2 xl:w-1/2', 
106 |                         elements : [    
107 |                             
108 |                             
109 |                             { type: 'html'      , content: '<h1 class="text-center"><div class="-mb-4 m-auto border-8 border-indigo-dark items-center flex justify-center h-32 w-32 bg-grey text-indigo-dark">News</div></h1>' , homepage: true  },
110 |                             //{ type: 'component' , name: 'v-posts'  , data: 'info' , homepage: true  }
111 |                         ],
112 |                     },
113 |                     */
114 |                   
115 |                 ]
116 |             },
117 |             footer : {
118 |                 root    : 'w-full',
119 |                 blocks  : [
120 |                     {
121 |                         css: 'h-16 items-center  flex justify-center col-span-4 bg-green-light text-center text-white' ,
122 |                         elements : [
123 |                             { type: 'html'      , content: '<small>Theme4Nuxt - a theme solution for Nuxtjs - Author: Antonio Nardone - License MIT</small>' , homepage: false} 
124 |                         ]
125 |                     }
126 |                 ]
127 |             }
128 |         },
129 |     }
130 |     /*
131 |     template: {
132 |         main : {
133 |             css : "w-full grid columns-4 rows-5",
134 |             
135 |         },
136 |         grid : [
137 |             'h-16 bg-red' , 
138 |             'h-16 bg-red col col-span-2 flex items-center justify-center' ,
139 |             'h-16 bg-red col', 
140 |             'col-span-4' , 
141 |             'row-span-2 col-span-4 p-12' , 
142 |             'row-span-2 p-12 col-span-2' , 
143 |             'row-span-2 p-12 col-span-2' , 
144 |             'h-16 items-center flex justify-center col-span-4 bg-grey-light' 
145 |         ],
146 |         blocks : [
147 |             [{ type: 'html'      , content: '<h1 class="absolute z-50 pin-t pin-l mt-4 pl-4 text-black"><span class="font-light">Theme<span class="text-white">4</span></span>Nuxt</h1></h1>' ,homepage: false }],
148 |             [{ type: 'menu'  , navigation: 0, homepage: false}],
149 |             [{ type: 'nav'  , navigation: 0, homepage: false}],
150 |             [{ type: 'html' , content: '<div class="flex h-screen justify-center mt-16 w-3/4">\
151 |               <div class="shadow opacity-75 block  h-auto ml-4 bg-white font-light text-black p-4 rounded">\
152 |                 <h1><span class="font-light tracking-tight text-orange my-4">Need a theme for Nuxt?</span>\
153 |                     <h2 class="font-light text-grey-darkest my-3">Discover how to create themes for Nuxt</h2>\
154 |                     <p>A creative way to design your theme for Nuxt.</p>\
155 |                     <p class="pb-10">It\' easy, fast and replicable.</p>\
156 |                     <button class="bg-red text-white py-4 px-8 border rounded">More</button>\
157 |                 </h1>\
158 |                 </div></div>' , action: '/howto' , homepage: true }], 
159 |             [
160 |                 { type: 'component' , name: 'v-coreServices'  , title: '' , css: 'bg-red-light shadow icon-rounded rounded text-white px-8 -mt-16' ,  data : 'services'  , api: 'services' , homepage: true  }
161 |             ] ,    
162 |             [ 
163 |                 { type: 'component' , name: 'v-posts' , data: 'info' , homepage: true , nuxt: true } , 
164 |                 { type: 'component' , name: 'v-coreSkills' , data: 'skills' ,homepage: true} 
165 |             ],
166 |             [
167 |                 { type: 'component' , name: 'v-coreTiles'  , data: 'posts' , homepage: true }
168 |             ],
169 |             [
170 |                 { type: 'html'      , content: '<small>Theme4Nuxt - a theme solution for Nuxtjs - Author: Antonio Nardone - License MIT</small>' }
171 |             ]
172 |         ],
173 |         nuxt: 'mt-4'
174 |     },
175 |     
176 |     extra: {
177 |         html: '<div class="w-full absolute min-w-full pin-t pin-l h-screen z-back flex flex-wrap">\
178 |                 <div class="absolute pin-t pin-r w-1/2 min-h-full z-0 bg-orange clipped-half-down" style="z-index:-1"></div>\
179 |                 <div class="absolute pin-t w-full min-h-full z-0 bg-red" style="z-index:-2"></div>\
180 |                 </div>',
181 |         action: '/howto'
182 |     }   
183 |     */ 
184 | }
185 | 
186 | export default layout


--------------------------------------------------------------------------------
/themes/theme6.js:
--------------------------------------------------------------------------------
  1 | const layout = {
  2 |     name     : 'Tiles Landing Page',
  3 |     author    : 'A. Nardone',
  4 |     version   : '0.2.0',
  5 |     root     : 'w-full flex flex-wrap min-h-screen',
  6 |     homepage    : '/',
  7 |     initData : [
  8 |       { type: 'api'   , name: 'posts'     , api : 'https://www.techcrunch.com/wp-json/wp/v2/posts' } , //'/posts?$sort[createdAt]=-1&$limit=4' },
  9 |       { type: 'api'   , name: 'info'     , api :  'https://www.gianlucagiacalone.it/wp-json/wp/v2/posts' } , // '/posts?$sort[createdAt]=-1&$limit=4' },
 10 |       { type: 'api'   , name: 'services'  , api : 'http://localhost:3030/sections?type=services' },
 11 |       { type: 'array' , name: 'skills'    , value : [{name:'CREATIVITY' , value: "90%"} , { name: 'ORGANIZATION' , value: "85%"} , { name: 'TEAM WORK' , value: "75%"} , { name: 'COMMUNICATION' , value: "70%"}]
 12 |       }
 13 |     ],
 14 | 
 15 |     navigation :  [{  
 16 |         css     : "items-start w-full pt-16 pl-8 pb-20 bg-grey-dark clipped-angle-right",
 17 |         button  : "m-4 bg-white p-4 border-black border-2 rounded-full",
 18 |         line    : "hover:text-grey hover:bg-black text-grey-lightest" ,
 19 |         link       : 'text-white hover:text-white hover:bg-black rounded hover:text-bold py-2 px-4 no-underline',
 20 |         left    : false,
 21 |         transition: 'slidedown',
 22 |         orientation: 'horizontal' , 
 23 |         items:  [ { name : 'Home' , path: '/' } , { name: 'Blog' , path: '/blog' } , { name: 'About' , path: '/about' } , { name: 'How to' , path: '/howto' } , { name: 'Store' , path: '/store' } , { name: 'GitHub', path: 'https://github.com/swina/theme4nuxt'} ]  
 24 |     }],
 25 |     template: {
 26 |         main : {
 27 |             css : "w-full bg-black",
 28 |             
 29 |         },
 30 |         areas: {
 31 |              order  : ['header','content' ],
 32 |              header : {
 33 |                 root: 'w-full flex flex-wrap',
 34 |                 blocks : [
 35 |                    
 36 |                     
 37 |                    
 38 |                     {
 39 |                         css: 'w-full md:w-1/4 lg:w-1/4 xl:w-1/4 h-full-calc-1-4 flex items-center col bg-black z-10' ,
 40 |                         elements : [
 41 |                             { type: 'html'      , content: '<div class="p-4 z-40 text-white"><h1><span class="font-light border-t-2">Theme<span class="text-white bg-red px-2 py-1">4</span></span><span class="border-b-4">Nuxt</span></h1></div>' , homepage: false }
 42 |                         ],
 43 |                         homepage: false
 44 |                     },
 45 |                     {
 46 |                         css: 'w-full md:w-1/4 lg:w-1/4 xl:w-1/4 h-full-calc-1-4 flip col z-30 justify-left items-center flex bg-grey-darkest z-10 mobile' , 
 47 |                         elements: [
 48 |                             { type: 'html'  , content: '<div class="bg-teal flex items-center h-full m-auto w-full text-2xl text-white"><h3 class="m-auto font-light">Home</h3></div>' , action: '/'}
 49 |                          ],
 50 |                          homepage: false
 51 |                     },
 52 |                     {
 53 |                         css: 'w-full md:w-1/4 lg:w-1/4 xl:w-1/4 h-full-calc-1-4 flip flex items-center col bg-black z-10 mobile' ,
 54 |                         elements: [
 55 |                             { type: 'html'  , content: '<div class="bg-red flex items-center h-full m-auto w-full text-2xl text-white"><h3 class="m-auto font-light">Blog</h3></div>' , action: '/blog'}
 56 |                         ],
 57 |                         homepage: false
 58 |                     },
 59 |                     {
 60 |                         css: 'w-full md:w-1/4 lg:w-1/4 xl:w-1/4 h-full-calc-1-4 col z-30 justify-left items-center flex text-right pr-12 col-nav  bg-header-3 z-10' , 
 61 |                         elements: [
 62 |                             { type: 'html'  , content: ''}
 63 |                          ],
 64 |                          homepage: false 
 65 |                     },
 66 |                     
 67 |                 ]
 68 |             },
 69 |             content : {
 70 |                 root: 'w-full flex flex-wrap',
 71 |                 blocks : [
 72 |                     {
 73 |                         css: 'w-full md:w-1/4 lg:w-1/4 xl:w-1/4 h-full-calc-1-2 flex items-center bg-header-1 mobile' , 
 74 |                         elements: [
 75 |                             { type: 'css'      , content: 'bg-header-1'}
 76 |                          ],
 77 |                          homepage: true
 78 |                     },
 79 |                     {
 80 |                         css: 'w-full md:w-3/4 lg:w-3/4 xl:w-3/4 h-full-calc-1-2 py-8 px-4 bg-header-2 z-10 mobile' , 
 81 |                         elements: [
 82 |                             { type: 'html'  , content: '<div class="px-4 z-30 opacity-75 rounded-lg text-white"><h4 class="font-light">Do you need a theme solution for Nuxt?</h4><h1><span class="font-light">Theme<span class="text-red">4</span></span>Nuxt</h1><button class="my-4 py-2 px-4 bg-grey-light rounded shadow-lg hover:bg-red hover:text-white">Get Started</button></div>' , action: '/howto' }
 83 |                          ],
 84 |                          homepage: true
 85 |                     },
 86 |                     {
 87 |                         css: 'w-full md:w-1/4 lg:w-1/4 xl:w-1/4 h-full-calc-1-4 flip flex items-center col bg-grey-darkest mobile' ,
 88 |                         elements: [
 89 |                             { type: 'html'  , content: '<div class="bg-blue flex items-center h-full-calc-1-4 m-auto w-full text-2xl text-white"><h3 class="m-auto font-light">About</h3></div>' , action: '/about'}
 90 |                         ],
 91 |                         homepage: false
 92 |                     },
 93 |                     {
 94 |                         css: 'w-full md:w-1/4 lg:w-1/4 xl:w-1/4 h-full-calc-1-4 col z-30 justify-left items-center flex bg-header-5' , 
 95 |                         elements: [
 96 |                             { type: 'html'  , content: ''}
 97 |                          ],
 98 |                          homepage: false 
 99 |                     },
100 |                     {
101 |                         css: 'w-full md:w-1/4 lg:w-1/4 xl:w-1/4 h-full-calc-1-4 slidedown text-center flex items-center col bg-grey-darkest mobile' ,
102 |                         elements: [
103 |                             { type: 'html'  , content: '<div class="bg-orange flex items-center h-full-calc-1-4 m-auto w-full text-2xl text-black"><h3 class="m-auto font-light">How to</h3></div>' , action: '/howto'}
104 |                         ],
105 |                         homepage: false
106 |                     },
107 |                     {
108 |                         css: 'w-full md:w-1/4 lg:w-1/4 xl:w-1/4 h-full-calc-1-4 slidedown text-center flex items-center col bg-black mobile' ,
109 |                         elements: [
110 |                             { type: 'html'  , content: '<div class="bg-green-light flex items-center h-full-calc-1-4 m-auto w-full text-2xl text-black"><h3 class="m-auto font-light">Store</h3></div>' , action: '/store'}
111 |                         ],
112 |                         homepage: false
113 |                     },
114 |                     {
115 |                         css: 'w-full flex flex-wrap bg-white' , 
116 |                         elements: [
117 |                             { type: 'html'  , content: '' , nuxt: true}
118 |                          ],
119 |                          homepage: false 
120 |                     },
121 |                 ]
122 |             },
123 |             
124 |         },
125 |     }
126 |     /*
127 |     template: {
128 |         main : {
129 |             css : "w-full grid columns-4 rows-5",
130 |             
131 |         },
132 |         grid : [
133 |             'h-16 bg-red' , 
134 |             'h-16 bg-red col col-span-2 flex items-center justify-center' ,
135 |             'h-16 bg-red col', 
136 |             'col-span-4' , 
137 |             'row-span-2 col-span-4 p-12' , 
138 |             'row-span-2 p-12 col-span-2' , 
139 |             'row-span-2 p-12 col-span-2' , 
140 |             'h-16 items-center flex justify-center col-span-4 bg-grey-light' 
141 |         ],
142 |         blocks : [
143 |             [{ type: 'html'      , content: '<h1 class="absolute z-50 pin-t pin-l mt-4 pl-4 text-black"><span class="font-light">Theme<span class="text-white">4</span></span>Nuxt</h1></h1>' ,homepage: false }],
144 |             [{ type: 'menu'  , navigation: 0, homepage: false}],
145 |             [{ type: 'nav'  , navigation: 0, homepage: false}],
146 |             [{ type: 'html' , content: '<div class="flex h-screen justify-center mt-16 w-3/4">\
147 |               <div class="shadow opacity-75 block  h-auto ml-4 bg-white font-light text-black p-4 rounded">\
148 |                 <h1><span class="font-light tracking-tight text-orange my-4">Need a theme for Nuxt?</span>\
149 |                     <h2 class="font-light text-grey-darkest my-3">Discover how to create themes for Nuxt</h2>\
150 |                     <p>A creative way to design your theme for Nuxt.</p>\
151 |                     <p class="pb-10">It\' easy, fast and replicable.</p>\
152 |                     <button class="bg-red text-white py-4 px-8 border rounded">More</button>\
153 |                 </h1>\
154 |                 </div></div>' , action: '/howto' , homepage: true }], 
155 |             [
156 |                 { type: 'component' , name: 'v-coreServices'  , title: '' , css: 'bg-red-light shadow icon-rounded rounded text-white px-8 -mt-16' ,  data : 'services'  , api: 'services' , homepage: true  }
157 |             ] ,    
158 |             [ 
159 |                 { type: 'component' , name: 'v-posts' , data: 'info' , homepage: true , nuxt: true } , 
160 |                 { type: 'component' , name: 'v-coreSkills' , data: 'skills' ,homepage: true} 
161 |             ],
162 |             [
163 |                 { type: 'component' , name: 'v-coreTiles'  , data: 'posts' , homepage: true }
164 |             ],
165 |             [
166 |                 { type: 'html'      , content: '<small>Theme4Nuxt - a theme solution for Nuxtjs - Author: Antonio Nardone - License MIT</small>' }
167 |             ]
168 |         ],
169 |         nuxt: 'mt-4'
170 |     },
171 |     
172 |     extra: {
173 |         html: '<div class="w-full absolute min-w-full pin-t pin-l h-screen z-back flex flex-wrap">\
174 |                 <div class="absolute pin-t pin-r w-1/2 min-h-full z-0 bg-orange clipped-half-down" style="z-index:-1"></div>\
175 |                 <div class="absolute pin-t w-full min-h-full z-0 bg-red" style="z-index:-2"></div>\
176 |                 </div>',
177 |         action: '/howto'
178 |     }   
179 |     */ 
180 | }
181 | 
182 | export default layout


--------------------------------------------------------------------------------
/layouts/theme.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     
  3 |     <div>
  4 |       
  5 |       <no-ssr><v-nav v-if="grid && grid.navigation" :items="menu" :small="grid.navigation[0].small" :large="grid.navigation[0].large" :left="grid.navigation[0].left" :bottom="grid.navigation[0].bottom" :css="grid.navigation[0].css" :button="grid.navigation[0].button"
  6 |         :link="grid.navigation[0].line" :transition="grid.navigation[0].transition" />
  7 |       </no-ssr>
  8 |       
  9 |       <main :class="grid.template.main.css" v-if="grid.version === '0.2.0'">
 10 |         <template v-for="(area,a) in grid.template.areas.order">
 11 | 
 12 |           <header :class="grid.template.areas[area].root" v-if="area==='header'" :key="'header_' + a">
 13 |             <template v-for="(block,c) in grid.template.areas[area].blocks">
 14 |               <div :class="block.css" :key="area + '_' + c" v-if="!block.homepage || grid.homepage === $route.path">
 15 |                 <template v-for="(element,n) in block.elements">
 16 | 
 17 |                   <nuxt v-if="element.nuxt && $route.path !== grid.template.homepage"  :key="'nuxt_' + n" :class="nuxt_class"/>
 18 | 
 19 |                   <div :key="'header_element_' + n" v-if="element.type==='css'" :class="element.content"/>
 20 | 
 21 |                   <div v-if="element.type==='menu'" class="flex items-center" :key="'m_' + n">
 22 | 
 23 |                     <span>
 24 |                       <nuxt-link
 25 |                         :to="grid.homepage"
 26 |                         @click.native="hamburger=false"
 27 |                         :class="grid.navigation[0].link">Home</nuxt-link>
 28 |                     </span>
 29 | 
 30 |                     <template v-for="(item,m) in grid.navigation[element.navigation].items">
 31 |                       <div class="relative submenu" :key="'menu_' + m" v-if="item.path!='/'">
 32 |                         <nuxt-link :to="item.path"
 33 |                           @click.native="hamburger=false"
 34 |                           :class="grid.navigation[0].link" v-if="nuxtLink(item.path)">{{item.name}}</nuxt-link>
 35 |                         <a :href="item.path" v-if="!nuxtLink(item.path)" :class="grid.navigation[0].link" target="_blank">
 36 |                           {{item.name}}
 37 |                         </a>  
 38 |                       </div>
 39 |                       
 40 |                     </template>
 41 |                     
 42 |                   </div>
 43 | 
 44 |                   <div :key="'element_' + n" v-if="element.type=='html'  && !element.action" v-html="element.content" />
 45 | 
 46 |                   <div :key="'element_' + n" v-if="element.type=='html' && element.action" v-html="element.content" class="cursor-pointer" @click="$router.push(element.action)"/>
 47 |                  
 48 |                   <div v-if="element.type==='component'" :key="'header_element_' + n">
 49 |                     <no-ssr>
 50 |                       <v-componentWrapper v-if="element.type=='component'" :name="element.component" :options="element.options"/>
 51 |                     </no-ssr>
 52 |                   </div>
 53 | 
 54 |                 </template>
 55 |               </div>
 56 |             </template>
 57 |           </header>
 58 |          
 59 |           <section :class="grid.template.areas[area].root" v-if="area==='content'" :key="'section' + a">
 60 |             <template v-for="(block_content,cs) in grid.template.areas[area].blocks">
 61 |               <div :class="block_content.css" :key="area + '_' + cs" v-if="!block_content.homepage || grid.homepage === $route.path">
 62 |                 <template v-for="(element,el) in block_content.elements">
 63 | 
 64 |                   <nuxt v-if="element.nuxt && $route.path !== grid.template.homepage"  :key="'nuxt_' + cs + '_' + el" :class="nuxt_class"/>
 65 |                   
 66 |                   <div v-if="grid.homepage === $route.path || !element.homepage" :key="'container_' + el">
 67 |                     
 68 |                     <div :key="'section_element_' + el" v-if="element.type==='css'" :class="element.content"/>
 69 |                    
 70 |                     <div v-if="element.type==='menu'" class="flex items-center" :key="'m_' + el">
 71 |                       <span>
 72 |                         <nuxt-link
 73 |                           :to="$route.path"
 74 |                           @click.native="hamburger=false"
 75 |                           :class="grid.navigation[0].link">
 76 |                           Home
 77 |                         </nuxt-link>
 78 |                       </span>
 79 |                       <template v-for="(item,m) in grid.navigation[element.navigation].items">
 80 |                         <span :key="'menu_' + m" v-if="item.path!='/'">
 81 |                           <nuxt-link :to="item.path"
 82 |                             @click.native="hamburger=false"
 83 |                             :class="grid.navigation[0].link">
 84 |                             {{item.name}}
 85 |                           </nuxt-link>
 86 |                         </span>
 87 |                       </template>
 88 |                     </div>
 89 |                      
 90 |                     <div :key="'section_element_' + el" v-if="element.type=='html'  && !element.action" v-html="element.content"/>
 91 |                     
 92 |                     <div :key="'section_element_' + el" v-if="element.type=='html' && element.action" v-html="element.content" class="cursor-pointer" @click="$router.push(element.action)"/>
 93 |                     
 94 |                     <div v-if="element.type==='component'" :key="'section_element_' + el">
 95 |                       <no-ssr>
 96 |                         <v-componentWrapper v-if="element.type=='component'" :name="element.component" :options="element.options"/>
 97 |                       </no-ssr>
 98 |                     </div>                 
 99 |                   
100 |                   </div>
101 |                    
102 |                 </template>
103 |               </div>
104 |             </template>
105 |           </section>
106 |           
107 |           <aside :class="grid.template.areas[area].root" v-if="area==='aside'" :key="'aside' + a">
108 |             <template v-for="(block_content,cs) in grid.template.areas[area].blocks">
109 | 
110 |               <div :class="block_content.css" :key="area + '_' + cs" v-if="!block_content.homepage || grid.homepage === $route.path">
111 |                 <template v-for="(element,el) in block_content.elements">
112 |                   <nuxt v-if="element.nuxt && $route.path !== grid.template.homepage"  :key="'nuxt_' + cs + '_' + el" :class="nuxt_class"/>
113 | 
114 |                   <div v-if="grid.homepage === $route.path || !element.homepage" :key="'container_' + el">
115 | 
116 |                     <div :key="'aside_element' + el" v-if="element.type==='css'" :class="element.content"/>
117 | 
118 |                     <div v-if="element.type==='menu'" class="flex items-center" :key="'m_' + el">
119 |                       <span>
120 |                         <nuxt-link
121 |                           :to="$route.path"
122 |                           @click.native="hamburger=false"
123 |                           :class="grid.navigation[0].link">
124 |                           Home
125 |                         </nuxt-link>
126 |                       </span>
127 |                       <template v-for="(item,m) in grid.navigation[element.navigation].items">
128 |                         <span :key="'menu_' + m" v-if="item.path!='/'">
129 |                           <nuxt-link :to="item.path"
130 |                             @click.native="hamburger=false"
131 |                             :class="grid.navigation[0].link">
132 |                             {{item.name}}
133 |                           </nuxt-link>
134 |                         </span>
135 |                       </template>
136 |                     </div>
137 | 
138 |                     <div :key="'aside_element' + el" v-if="element.type=='html'  && !element.action" v-html="element.content"/>
139 | 
140 |                     <div :key="'aside_element' + el" v-if="element.type=='html' && element.action" v-html="element.content" class="cursor-pointer" @click="$router.push(element.action)"/>
141 |                     <div v-if="element.type==='component'" :key="'aside_element_' + el">
142 |                       <no-ssr>
143 |                         <v-componentWrapper v-if="element.type=='component'" :name="element.component" :options="element.options"/>
144 |                       </no-ssr>
145 |                     </div>  
146 |                    
147 |                   </div>
148 |                 </template>
149 |               </div>
150 |             </template>
151 |           </aside>
152 | 
153 |           <footer :class="grid.template.areas[area].root" v-if="area==='footer'" :key="'footer' + a">
154 |             <template v-for="(block_content,cs) in grid.template.areas[area].blocks">
155 |               <div :class="block_content.css" :key="area + '_' + cs" v-if="!block_content.homepage || grid.homepage === $route.path">
156 |                 <div :class="block_content.css" :key="area + '_' + cs">
157 |                   <template v-for="(element,el) in block_content.elements">
158 | 
159 |                     <nuxt v-if="element.nuxt && $route.path !== grid.template.homepage"  :key="'nuxt_' + cs + '_' + el" :class="nuxt_class"/>
160 | 
161 |                     <div :key="'footer_element_' + el" v-if="element.type==='css'" :class="element.content"/>
162 | 
163 |                     <div v-if="element.type==='menu'" class="flex items-center" :key="'m_' + el">
164 |                       <template v-for="(item,m) in grid.navigation[element.navigation].items">
165 |                         <span :key="'menu_' + m">
166 |                           <nuxt-link :to="item.path"
167 |                             @click.native="hamburger=false"
168 |                             :class="grid.navigation[0].link">
169 |                             {{item.name}}
170 |                           </nuxt-link>
171 |                         </span>
172 |                       </template>
173 | 
174 |                     </div>
175 | 
176 |                     <div :key="'footer_element_' + el" v-if="element.type=='html'  && !element.action" v-html="element.content"/>
177 | 
178 |                     <div :key="'footer_element_' + el" v-if="element.type=='html' && element.action" v-html="element.content" class="cursor-pointer" @click="$router.push(element.action)"/>
179 | 
180 |                     <div v-if="element.type==='component'" :key="'footer_element_' + el">
181 |                       <no-ssr>
182 |                         <v-componentWrapper v-if="element.type=='component'" :name="element.component" :options="element.options"/>
183 |                       </no-ssr>
184 |                     </div>  
185 | 
186 |                   </template>
187 |                 </div>
188 |               </div>
189 |               </template>
190 |             </footer>
191 |           </template>
192 |           
193 |         </main>
194 |       
195 |         <!--<template v-if="grid.extra && grid.homepage === $route.path">
196 |           <span v-html="grid.extra.html"></span>
197 |         </template>-->
198 |         <div class="fixed pin-b pin-r">
199 |           <select v-model="theme" class="p-2 bg-blue rounded text-white text-sm">
200 |             <template v-for="(t,index) in themes">
201 |               <option :value="index" :key="'theme_' + index">{{t.name}}</option>
202 |             </template>
203 |           </select>
204 |         </div>    
205 |   </div>
206 |   
207 | </template>
208 | <script>
209 | //import grid from '~/themes/theme1.js'
210 | 
211 | export default {
212 |   name: 'theme4nuxt_renderer',
213 |   data: () => ({
214 |     theme: 0, 
215 |     themes:null,
216 |     menu: null,
217 |     initData:null,
218 |     comp:'',
219 |     submenu: ['Link 1' , 'Link 2' , 'Link 3' ]
220 |   }),
221 |   computed: {
222 |     grid: {
223 |       get: function() {
224 |         return this.$store.state.themes[this.$store.state.currentTheme]
225 |       },
226 |       set: function() {
227 |         return this.$store.state.themes[this.$store.state.currentTheme]
228 |       }
229 |     },
230 |     home() {
231 |       if (this.grid.homepage != this.mypath) {
232 |         return true
233 |       }
234 |       return false
235 |     },
236 |     nuxt_class() {
237 |       if (this.$route.path != this.grid.homepage) {
238 |         return this.grid.template.nuxt
239 |       }
240 |       return ''
241 |     }
242 |   },
243 |   watch:{
244 |     theme(val){
245 |       this.$store.dispatch('SetCurrentTheme',val)
246 |     }
247 |   },
248 |   async beforeMount() {
249 |     this.initData = this.$store.state.initData
250 |   },
251 |   methods:{
252 |     nuxtLink (url) {
253 |         if (url.match(/^(http(s)?|ftp):\/\//)) {
254 |           return false
255 |         }
256 |         return true
257 |       }
258 |   },
259 |   mounted() {
260 |     //this.grid = this.$store.state.theme
261 |     let m = [{ path:'/' , name: 'Home' }]
262 |     //this.theme = this.$store.state.currentTheme
263 |     this.$router.options.routes.map(menu => {
264 |       if (menu.path.split('/').length < 3 && menu.path != '/') {
265 |         let obj = {
266 |           path: menu.path,
267 |           name: menu.name.charAt(0).toUpperCase() + menu.name.slice(1)
268 |         }
269 |         m.push(obj)
270 |       }
271 |     })
272 |     
273 |     let themes = []
274 |     for ( var t=0 ; t < this.$store.state.themes.length ; t++ ){
275 |       themes.push({name:this.$store.state.themes[t].name , path: this.$store.state.themes[t].homepage } )
276 |     }
277 |     this.menu = m
278 |     this.menu = this.$store.state.theme.navigation[0].items
279 |     console.log ( this.menu )
280 |     this.themes = themes
281 |   }
282 | }
283 | </script>
284 | 


--------------------------------------------------------------------------------
/themes/theme1.js:
--------------------------------------------------------------------------------
  1 | const layout = {
  2 |     name     : 'Marine Theme',
  3 |     author    : 'A. Nardone',
  4 |     version   : '0.2.0',
  5 |     root     : 'w-full flex flex-wrap min-h-screen',
  6 |     homepage    : '/',
  7 |     initData : [
  8 |         { 
  9 |             type    : 'array' ,
 10 |             
 11 |             name: 'prices',
 12 |             value: [
 13 |                 {
 14 |                     title   : '<h3 class="font-light text-blue-light">Developer</h3>',
 15 |                     price   : '<h1 class="border-b">Free</h1>',
 16 |                     summary : '<div class="pt-4">Includes</div>',
 17 |                     list    : ['5 Projects','1 Member account', '1 Database' , '1 GB Hosting' ],
 18 |                     button  : 'Start'
 19 |                 },
 20 |                 {
 21 |                     title   : '<h3 class="font-light text-orange-dark">Pro</h3>',
 22 |                     price   : '<h1>$ 9/<small>mo.</small></h1>',
 23 |                     summary : '<div class="pt-4">Includes</div>',
 24 |                     list    : ['50 Projects','3 Member accounts', '10 Database' , '10 GB Hosting' ],
 25 |                     button  : 'Start'
 26 |                 },
 27 |                 {
 28 |                     title   : '<h3 class="font-light text-green">Business</h3>',
 29 |                     price   : '<h1>$ 15/<small>mo.</small></h1>',
 30 |                     summary : '<div class="pt-4">Includes</div>',
 31 |                     list    : ['5 Projects','1 Member account', '1 Database' , '1 GB Hosting' ],
 32 |                     button  : 'Start'
 33 |                 },
 34 |                 {
 35 |                     title   : '<h3 class="font-light text-red">Agency</h3>',
 36 |                     price   : '<h1>$ 29/<small>mo.</small></h1>',
 37 |                     summary : '<div class="pt-4">Includes</div>',
 38 |                     list    : ['50 Projects','3 Member accounts', '10 Database' , '10 GB Hosting' ],
 39 |                     button  : 'Start'
 40 |                 },
 41 |             ]
 42 |         } ,
 43 |       { type: 'array'   , name: 'services'  , value : [
 44 |         {"type":"services",
 45 |         "title":"CSS Only",
 46 |         "abstract":"Theme4Nuxt is developed using only CSS with the Tailwind framework",
 47 |         "path":"css-only",
 48 |         "_id":"0tSvdJebN4cKmKa6",
 49 |         "icon":"style"},
 50 |         {"type":"services",
 51 |         "title":"Custom Design",
 52 |         "abstract":"Create your custom theme without any opinionated framework",
 53 |         "icon":"chrome_reader_mode",
 54 |         "path":"theme-builder",
 55 |         "_id":"MSOXCaCn4AfNz57w"},
 56 |         {"type":"services",
 57 |         "title":"Integration",
 58 |         "abstract":"Feel free to use your own components, API and data",
 59 |         "path":"api-data",
 60 |         "_id":"ueN9BbEdxvKoZWNi"
 61 |         ,"icon":"compare_arrows"}
 62 |     ] },
 63 |       { type: 'array' , name: 'skills'    , value : [{name:'CREATIVITY' , value: "90%"} , { name: 'ORGANIZATION' , value: "85%"} , { name: 'TEAM WORK' , value: "75%"} , { name: 'COMMUNICATION' , value: "70%"}]
 64 |       }
 65 |     ],
 66 | 
 67 |     navigation :  [{  
 68 |         css         : "items-start w-full pt-16 px-4 pb-20 bg-indigo rounded-bl-lg",
 69 |         button      : "m-4 bg-white p-4 border-black border-2 rounded-full",
 70 |         line        : "hover:text-black hover:bg-orange text-grey-lightest" ,
 71 |         link        : 'text-white hover:text-white hover:bg-indigo rounded hover:text-bold py-2 px-4 no-underline',
 72 |         left        : false,
 73 |         bottom      : false,
 74 |         transition  : 'slidedown',
 75 |         orientation : 'horizontal' , 
 76 |         items       :  [ { name : 'Home' , path: '/' } , { name: 'Blog' , path: '/blog' } , { name: 'About' , path: '/about' } , { name: 'How to' , path: '/howto' } , { name: 'Store' , path: '/store' } , { name: 'GitHub', path: 'https://github.com/swina/theme4nuxt'}  ] 
 77 |     }],
 78 |     template: {
 79 |         main : {
 80 |             css : "w-full",
 81 |             
 82 |         },
 83 |         areas: {
 84 |              order  : ['header','content','footer'],
 85 |              header : {
 86 |                 root: 'w-full flex flex-wrap',
 87 |                 blocks : [
 88 |                    
 89 |                     {
 90 |                         css: 'w-full md:w-1/4 lg:w-1/4 xl:w-1/4 h-24 flex items-center col bg-blue' ,
 91 |                         elements : [
 92 |                             { type: 'html'      , content: '<div class="p-4 z-30  rounded-lg text-white"><h1><span class="font-light border-t-2">Theme<span class="text-white bg-red px-2 py-1">4</span></span><span class="border-b-4">Nuxt</span></h1></div>' , homepage: false }
 93 |                         ],
 94 |                         homepage: false
 95 |                     },
 96 |                     {
 97 |                         css: 'w-full md:w-3/4 lg:w-3/4 xl:w-3/4 h-24 z-30 justify-left items-center flex pr-12 bg-blue mobile' , 
 98 |                         elements : [
 99 |                             { type: 'menu'      , navigation: 0, homepage: false}
100 |                         ]
101 |                     },
102 |                     {
103 |                         css: 'w-full flex items-center justify-center h-64 bg-blue',
104 |                         elements: [
105 |                             { type: 'html'       , content: '<div class="p-4 z-30 opacity-75 rounded-lg text-white"><h4>Do you need a free theme solution for Nuxt?</h4><h1><span class="font-light">Theme<span class="text-black">4</span></span>Nuxt</h1><button class="my-4 py-2 px-4 bg-grey-light rounded shadow-lg hover:bg-indigo hover:text-white">Get Started</button></div>' , action: '/howto' }
106 |                         ],
107 |                         homepage: true
108 |                     },
109 |                    
110 |                     {
111 |                         css: 'w-full bg-white',
112 |                         
113 |                         elements: [
114 |                            { type: 'html'  , content: '<svg\
115 |                             xmlns:dc="http://purl.org/dc/elements/1.1/"\
116 |                             xmlns:cc="http://creativecommons.org/ns#"\
117 |                             xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"\
118 |                             xmlns:svg="http://www.w3.org/2000/svg"\
119 |                             xmlns="http://www.w3.org/2000/svg"\
120 |                             id="svg8"\
121 |                             version="1.1"\
122 |                             viewBox="0 0 375.70834 66.145832"\
123 |                             height="100%"\
124 |                             width="100%">\
125 |                            <defs\
126 |                               id="defs2" />\
127 |                            <metadata\
128 |                               id="metadata5">\
129 |                              <rdf:RDF>\
130 |                                <cc:Work\
131 |                                   rdf:about="">\
132 |                                  <dc:format>image/svg+xml</dc:format>\
133 |                                  <dc:type\
134 |                                     rdf:resource="http://purl.org/dc/dcmitype/StillImage" />\
135 |                                  <dc:title></dc:title>\
136 |                                </cc:Work>\
137 |                              </rdf:RDF>\
138 |                            </metadata>\
139 |                            <g\
140 |                               transform="translate(0,-230.85418)"\
141 |                               id="layer1">\
142 |                              <path\
143 |                                 id="path3718-8"\
144 |                                 d="m 239.94849,294.09559 c 8.72601,-0.50407 16.48291,-8.32901 23.82081,-15.80792 10.85533,-11.10874 22.66885,-20.80067 35.42756,-22.12166 12.61592,-0.99743 24.8002,6.5011 36.70553,13.21946 15.28024,9.0707 32.26666,8.11771 47.05729,-2.5093 9.94912,-6.22013 19.30914,-14.89561 28.60917,-23.58625 -2.48595,-6.33174 -6.88871,-8.49197 -10.31399,-12.731 -17.05476,-16.5099 -37.51025,-21.54438 -56.85393,-18.21484 -119.4402,48.79785 -278.461563,-62.24869 -374.220743,12.63719 -3.22251,7.65608 -0.29155,20.23907 4.95503,22.26815 8.20872,6.08649 16.6402095,11.15613 25.10383954,15.94445 17.31663046,9.26622 35.40874046,15.38484 53.47328046,13.53287 10.01898,-2.03606 18.8089,-11.30825 27.44592,-19.70596 7.27482,-6.68829 15.43764,-12.2256 23.837163,-10.2503 8.68737,1.87326 16.42935,10.2258 23.26591,19.57405 7.05591,8.44628 15.61652,14.25752 24.16754,12.23837 12.63703,-1.8521 24.91089,-9.90589 37.7402,-7.95537 13.95592,1.20788 27.16191,10.58858 39.9966,19.89096 3.14063,2.03324 6.42955,3.6369 9.78282,3.5771 z"\
145 |                                 style="opacity:1;fill:#3490DC;stroke-width:0.50392538" />\
146 |                            </g>\
147 |                            <g\
148 |                               id="layer2" />\
149 |                          </svg>\
150 |                          '}
151 |                         ]
152 |                     }
153 |                 ]
154 |             },
155 |             content : {
156 |                 root: 'w-full flex flex-wrap',
157 |                 blocks : [
158 |                     
159 |                     { 
160 |                         css: 'w-full flex flex-wrap mt-4', 
161 |                         elements : [ 
162 |                             { type: 'component' , name: 'v-coreCards'  , component: 'core/cards' , options: { contest: 'info' } , data: [] , homepage: true , nuxt: true }
163 |                         ]
164 |                     },
165 | 
166 |                     {
167 |                         css: 'w-full bg-blue-light text-blue-lighter shadow my-8',
168 |                         elements: [
169 |                             { type: 'component' , component: 'core/services' , options: { data: 'services' , title: 'Features' } },
170 |                         ],
171 |                         homepage: true
172 |                     },
173 |                     {
174 |                         css: 'w-full shadow my-8',
175 |                         elements: [
176 |                             { type: 'component' , component: 'core/prices' , 
177 |                                 options: { 
178 |                                     data    : 'prices' ,
179 |                                     style   : "px-8 scale-1",
180 |                                     title   : '<h1 class="font-light text-2xl">Pricing Table Component Demo</h1>' ,
181 |                                     css     : 'rounded-t border h-64 bg-white hover:shadow-lg text-center text-grey-darkest p-4 pb-8',
182 |                                     action  : 'bg-white border-l border-r border-b rounded-b flex items-center justify-center',
183 |                                     button  : 'btn bg-green-light hover:bg-green text-white rounded m-2',
184 |                                 } 
185 |                             },
186 |                         ],
187 |                         homepage: true
188 |                     },
189 |                     /*
190 |                     {
191 |                         css: "w-full h-64",
192 |                         elements: [
193 |                             { type: 'component' , component: 'core/heading' , options: { css: 'object-cover h-64' , bg: 'https://storage.googleapis.com/ghostfood-539ae.appspot.com/theme4nuxt/bg-3.jpg'}}
194 |                         ]
195 |                     },
196 |                     { 
197 |                         css: 'w-full md:w-full lg:w-1/2 xl:w-1/2', 
198 |                         elements : [
199 |                             { type: 'html'      , content: '<h1 class="text-center"><div class="-mb-4 m-auto border-8 items-center flex justify-center h-32 w-32 bg-indigo-dark text-white">Blog</div></h1>' , homepage: true  },
200 |                             { type: 'component' , component: 'posts' , options: { data: 'info' } }
201 |                         ],
202 |                         homepage: true
203 |                     },
204 |                     
205 |                     { 
206 |                         css: 'w-full md:w-full lg:w-1/2 xl:w-1/2', 
207 |                         elements : [    
208 |                             
209 |                             
210 |                             { type: 'html'      , content: '<h1 class="text-center"><div class="-mb-4 m-auto border-8 border-indigo-dark items-center flex justify-center h-32 w-32 bg-grey text-indigo-dark">News</div></h1>' , homepage: true  },
211 |                             { type: 'component' , component: 'posts' , options: { data: 'info' } }
212 |                         ],
213 |                         homepage: true
214 |                     },
215 |                     */
216 |                   
217 |                 ]
218 |             },
219 |             footer : {
220 |                 root    : 'w-full',
221 |                 blocks  : [
222 |                     {
223 |                         css: 'h-16 items-center  flex justify-center col-span-4 bg-blue-light text-center text-white' ,
224 |                         elements : [
225 |                             { type: 'html'      , content: '<small>Theme4Nuxt - a theme solution for Nuxtjs - Author: Antonio Nardone - License MIT</small>' , homepage: false} 
226 |                         ]
227 |                     }
228 |                 ]
229 |             }
230 |         },
231 |     }
232 |     /*
233 |     template: {
234 |         main : {
235 |             css : "w-full grid columns-4 rows-5",
236 |             
237 |         },
238 |         grid : [
239 |             'h-16 bg-red' , 
240 |             'h-16 bg-red col col-span-2 flex items-center justify-center' ,
241 |             'h-16 bg-red col', 
242 |             'col-span-4' , 
243 |             'row-span-2 col-span-4 p-12' , 
244 |             'row-span-2 p-12 col-span-2' , 
245 |             'row-span-2 p-12 col-span-2' , 
246 |             'h-16 items-center flex justify-center col-span-4 bg-grey-light' 
247 |         ],
248 |         blocks : [
249 |             [{ type: 'html'      , content: '<h1 class="absolute z-50 pin-t pin-l mt-4 pl-4 text-black"><span class="font-light">Theme<span class="text-white">4</span></span>Nuxt</h1></h1>' ,homepage: false }],
250 |             [{ type: 'menu'  , navigation: 0, homepage: false}],
251 |             [{ type: 'nav'  , navigation: 0, homepage: false}],
252 |             [{ type: 'html' , content: '<div class="flex h-screen justify-center mt-16 w-3/4">\
253 |               <div class="shadow opacity-75 block  h-auto ml-4 bg-white font-light text-black p-4 rounded">\
254 |                 <h1><span class="font-light tracking-tight text-orange my-4">Need a theme for Nuxt?</span>\
255 |                     <h2 class="font-light text-grey-darkest my-3">Discover how to create themes for Nuxt</h2>\
256 |                     <p>A creative way to design your theme for Nuxt.</p>\
257 |                     <p class="pb-10">It\' easy, fast and replicable.</p>\
258 |                     <button class="bg-red text-white py-4 px-8 border rounded">More</button>\
259 |                 </h1>\
260 |                 </div></div>' , action: '/howto' , homepage: true }], 
261 |             [
262 |                 { type: 'component' , name: 'v-coreServices'  , title: '' , css: 'bg-red-light shadow icon-rounded rounded text-white px-8 -mt-16' ,  data : 'services'  , api: 'services' , homepage: true  }
263 |             ] ,    
264 |             [ 
265 |                 { type: 'component' , name: 'v-posts' , data: 'info' , homepage: true , nuxt: true } , 
266 |                 { type: 'component' , name: 'v-coreSkills' , data: 'skills' ,homepage: true} 
267 |             ],
268 |             [
269 |                 { type: 'component' , name: 'v-coreTiles'  , data: 'posts' , homepage: true }
270 |             ],
271 |             [
272 |                 { type: 'html'      , content: '<small>Theme4Nuxt - a theme solution for Nuxtjs - Author: Antonio Nardone - License MIT</small>' }
273 |             ]
274 |         ],
275 |         nuxt: 'mt-4'
276 |     },
277 |     
278 |     extra: {
279 |         html: '<div class="w-full absolute min-w-full pin-t pin-l h-screen z-back flex flex-wrap">\
280 |                 <div class="absolute pin-t pin-r w-1/2 min-h-full z-0 bg-orange clipped-half-down" style="z-index:-1"></div>\
281 |                 <div class="absolute pin-t w-full min-h-full z-0 bg-red" style="z-index:-2"></div>\
282 |                 </div>',
283 |         action: '/howto'
284 |     }   
285 |     */ 
286 | }
287 | 
288 | export default layout


--------------------------------------------------------------------------------
/pages/README.md:
--------------------------------------------------------------------------------
  1 | # theme4nuxt
  2 | 
  3 | 
  4 | Theme4Nuxt is a basic theming solution for Nuxtjs. I decided to develop it in order to have an easy way to prototype layouts/themes for Nuxt using a configuration file.
  5 | 
  6 | Based only on `tailwind.css` framework is developed to give the possibility to create your custom design without any opinionated framework.
  7 | 
  8 | # Features
  9 | 
 10 | - custom design based on CSS only
 11 | - fast theme/layout prototype
 12 | - create html semantic elements (header,section,aside,footer)
 13 | - easy full responsive design implementation
 14 | - easy integration with existing
 15 |     - components
 16 |     - api
 17 |     - markdown pages
 18 | - easy theme switching
 19 | - homepage design
 20 | - extra basic components included (used in this demo)
 21 |     - responsive navigation
 22 |     - progress bars 
 23 |     - cards
 24 |     - features/services info box
 25 |     - call for action 
 26 | 
 27 | 
 28 | # How it works
 29 | 
 30 | **Requirements** : tailwind.css
 31 | 
 32 | 
 33 | Theme4Nuxt is based on the following:
 34 | - a **theme** js file (./themes/index.js)
 35 | - a **single vue** file to deploy the theme to be used as layout template (./layout/theme.vue)
 36 | - a Vue **component wrapper** in order to integrate any component dynamically (./components/theme/ComponentWrapper.vue) 
 37 | - a Vue **navigation component** in order to create a navigation system (./components/theme/nav/index.vue)
 38 | - a **theme4nuxt** plugin in order to preload data server side (./plugins/theme4nuxt.js)
 39 | 
 40 |     
 41 | 
 42 | ## Theme file
 43 | 
 44 | Create a `themes` folder in your project root. 
 45 |     
 46 | Create an `index.js` in the themes folder
 47 | 
 48 | #### Structure of the theme
 49 | 
 50 | Each theme configuration file has the following structure:
 51 | 
 52 | 
 53 | - theme general info (name, author, version, license)
 54 | - a **root** property with css classes. This is the main container of your theme
 55 | - a **homepage** property with the path for the homepage
 56 | - a **initData** array of objects representing the initial data to load at startup. Data can be **API** or **Array** 
 57 | - a **navigation** array of objects. You can define different navigations and then use in your templates.
 58 | - a **template** the main object of your theme.
 59 | 
 60 | 
 61 | ```
 62 | const theme = {
 63 |     name        : 'Corporate Business',
 64 |     author      : 'A. Nardone',
 65 |     version     : '0.2.0',
 66 |     license     : 'MIT'
 67 |     root        : 'w-full flex flex-wrap min-h-screen',
 68 |     homepage    : '/',
 69 |     ...
 70 | }
 71 | 
 72 | export default theme
 73 | ```
 74 | ### initData Section ###
 75 | The **initData** is where you can define which data has to be preloaded. 
 76 | 
 77 | They can be **API** or **arrays** of data, depends on your rendering functions/components.
 78 | 
 79 | *The current theme is using some WordPress API to simulate the preloading feature*
 80 | 
 81 | ```
 82 |   initData : [
 83 |       { type: 'api'   , name: 'posts'     , api : 'https://www.techcrunch.com/wp-json/wp/v2/posts' } ,
 84 |       { type: 'array'   , name: 'services'  , value : [
 85 |         {"type":"services",
 86 |         "title":"CSS Only",
 87 |         "abstract":"Theme4Nuxt is developed using only CSS with the Tailwind framework",
 88 |         "path":"css-only",
 89 |         "_id":"0tSvdJebN4cKmKa6",
 90 |         "icon":"style"},
 91 |         {"type":"services",
 92 |         "title":"Custom Design",
 93 |         "abstract":"Create your custom theme without any opinionated framework",
 94 |         "icon":"chrome_reader_mode",
 95 |         "path":"theme-builder",
 96 |         "_id":"MSOXCaCn4AfNz57w"},
 97 |         {"type":"services",
 98 |         "title":"Integration",
 99 |         "abstract":"Feel free to use your own components, API and data",
100 |         "path":"api-data",
101 |         "_id":"ueN9BbEdxvKoZWNi"
102 |         ,"icon":"compare_arrows"}
103 |         ] },
104 |       { type: 'array' , name: 'skills'    , value : [{name:'CREATIVITY' , value: "90%"} , { name: 'ORGANIZATION' , value: "85%"} , { name: 'TEAM WORK' , value: "75%"} , { name: 'COMMUNICATION' , value: "70%"}]
105 |       }
106 | ],
107 | ```
108 | 
109 | In case of API **axios** library will be used to fetch data (asyncronously) server side.
110 | 
111 | **Data preloading is implemented using `nuxtServerInit` directly from the store.**
112 | 
113 | file: ./store/index.js
114 | 
115 | ```
116 | ...
117 | async nuxtServerInit({commit}, context ){
118 |     //read theme configuration using $theme4nuxt() injected by ./plugins/index.js
119 |     let init = context.app.$theme4nuxt().initData
120 |     let data = {}
121 |     //iterate thru all initial data to be loaded
122 |     for ( var n=0 ; n < init.length ; n++ ){
123 |         if ( init[n].type === 'api' ) {
124 |             let qry = await context.app.$axios.get(init[n].api);
125 |             data[init[n].name] = qry.data
126 |         }
127 |         if ( init[n].type === 'array' ){
128 |             data[init[n].name] = init[n].value
129 |         }
130 |     }
131 |     //save data to store
132 |     commit ('init_data', data )
133 |     if ( !context.app.store.state.theme ){
134 |     commit ('theme',context.app.$theme4nuxt() )
135 |     }  
136 | },
137 | ...
138 | ```
139 | 
140 | **Preload theme and injext function to read initData configuration**
141 | 
142 | file: ./plugins/index.js
143 | 
144 | ```
145 | import theme from '~/themes'
146 | 
147 | export default ({ app }, inject) => {
148 |     inject('theme4nuxt', () => theme)
149 | }
150 | ```
151 | # The Theme #
152 | 
153 | We analyze the current theme that has been used for this website.
154 | 
155 | ### navigation Section ###
156 | 
157 | The navigation section is required if you want to use the built-in navigation system as showed in the demo. This component create a responsive main navigation icon that open a menu with the options defined. 
158 | 
159 | The navigation section is also used in the template in order to render a normal navigation menu.
160 | In this version child menus are not supported. If you need this option you can use your component or navigation system.
161 | 
162 | ```
163 | ...
164 |  navigation :  [{  
165 |         css     : "items-start w-full pt-16 px-4 pb-20 bg-black opacity-75 h-screen",
166 |         button  : "m-1 bg-white p-2 border-black border-2 rounded-full",
167 |         line    : "hover:text-black hover:bg-white text-grey-lightest" ,
168 |         link       : 'text-white hover:text-black hover:bg-white hover:text-bold py-10 px-4 no-underline',
169 |         left    : false,
170 |         transition: 'slideright',
171 |         orientation: 'horizontal' , 
172 |         items:  [ { name : 'Home' , path: '/' } , { name: 'Blog' , path: '/blog' } , { name: 'About' , path: '/about' } , { name: 'How to' , path: '/howto' }  ] 
173 |     }],
174 | ...
175 | ```
176 | 
177 | ### template Section ###
178 | 
179 | The **template** section is the core of the theming system and has 2 main objects
180 | - **main** 
181 | - **areas**
182 | 
183 | 
184 | 
185 | 
186 | The ***main*** object
187 | 
188 | The main object is where is defined the class of the main container and will generate a semantic **&lt;main&gt;** html element.
189 | ```
190 | ...
191 | template: {
192 |         main : {
193 |             css : "w-full",
194 |             
195 |         },
196 | ...
197 | ```
198 | 
199 | 
200 | 
201 | The **areas** object
202 | 
203 | With the areas object you define all the elements of your template.
204 | 
205 | First you can define the order of the area to be rendered as semantic html blocks. Available areas are:
206 | - header
207 | - aside
208 | - content (will be rendered as section)
209 | - footer
210 | 
211 | **order is important in order to render elements correctly**
212 | 
213 | 
214 | ```
215 | ...
216 | template: {
217 |     ...
218 |     areas: {
219 |         order  : ['header','content','footer'],
220 |     ...
221 | ```
222 | 
223 | Our example will create a **header**, a **section** area and a **footer**.
224 | 
225 | 
226 | ### Creating the header ###
227 | 
228 | ```
229 | ...
230 | template: {
231 |     ...
232 |     areas: {
233 |         areas: {
234 |             order  : ['header','content','footer'],
235 |             header : {
236 |             root: 'w-full flex flex-wrap',
237 |             blocks : [
238 |                 {
239 |                     css: 'w-1/2 flex items-center h-12 bg-black text-grey text-xs pl-4 mobile',
240 |                     elements: [
241 |                         { type: 'html' , content: '\
242 |                         <span>theme4nuxt@moodgiver.com</span>\
243 |                         '}
244 |                     ]
245 |                 },
246 |                 {
247 |                     css: 'w-1/2 flex items-center justify-end h-12 bg-black text-grey text-xs pr-16 mobile',
248 |                     elements: [
249 |                         { type: 'html' , content: '\
250 |                         <span class="justify-end">+1 123 456 7890</span>\
251 |                         '}
252 |                     ]
253 |                 },
254 |                 {
255 |                     css: 'w-full md:w-1/2 lg:w-1/2 xl:w-1/2 h-24 opacity-75 justify-end flex items-center col bg-black' ,
256 |                     elements : [
257 |                         { type: 'html'      , content: '<div class="p-4 z-40  rounded-lg text-white"><h1><span class="font-light border-t-2">Theme<span class="text-white bg-blue-dark px-2 py-1">4</span></span><span class="border-b-4">Nuxt</span></h1></div>' , homepage: false }
258 |                     ],
259 |                     homepage: false
260 |                 },
261 |                 {
262 |                     css: 'w-full md:w-1/2 lg:w-1/2 xl:w-1/2 border-l opacity-75 h-24 col z-30 justify-left items-center flex text-right pr-12 col-nav  bg-black mobile' , 
263 |                     elements : [
264 |                         { type: 'menu'      , navigation: 0, homepage: false}
265 |                     ]
266 |                 },
267 |                 {
268 |                     css: 'w-full bg-green-light h-128 -mt-24 bg-header-8',
269 |                     elements: [
270 |                         { type: 'html'  , content: ''}
271 |                     ],
272 |                     homepage: true
273 |                 }
274 | 
275 |                 ]
276 |             },
277 | ...
278 | ```
279 | In order to create a semantic html **&lt;header&gt;** element we create a header object. Following structure will be used for each defined area.
280 | 
281 | For each section (header, aside, content, footer) we have :
282 | 
283 | - **root** element container (css)
284 | - **blocks** array of objects
285 | 
286 | In our theme we wanted to create:
287 | - a top bar with email and phone ref, 
288 | - a header with a logo/title centered, 
289 | - a centered menu right to the title 
290 | - an image as heading 
291 | 
292 | 
293 | 
294 | The top bar block.
295 | ```
296 | ...
297 | 
298 | header : {
299 |     root: 'w-full flex flex-wrap',
300 |     blocks : [
301 |         {
302 |             css: 'w-1/2 flex items-center h-12 bg-black text-grey text-xs pl-4 mobile',
303 |             elements: [
304 |                 { type: 'html' , content: '\
305 |                 <span>theme4nuxt@moodgiver.com</span>\
306 |                 '}
307 |             ],
308 |             homepage: false
309 |         },
310 |         {
311 |             css: 'w-1/2 flex items-center justify-end h-12 bg-black text-grey text-xs pr-16 mobile',
312 |             elements: [
313 |                 { type: 'html' , content: '\
314 |                 <span class="justify-end">+1 123 456 7890</span>\
315 |                 '}
316 |             ],
317 |             homepage: false
318 |         },
319 |         ...
320 |     }
321 | }
322 | ```
323 | 
324 | For each block we have to define 
325 | 
326 | - **css** : tailwind css classes for the block 
327 | - **elements** : array of elements we want to render
328 | - **homepage** : set to true in order to display only in the homepage
329 | 
330 | **elements** is an array of object that will be rendered following the order in which they are created.
331 | 
332 | ### elements types ##
333 | Each element has the following properties to be set
334 | 
335 | - **type**
336 |     
337 |     the system manage the following types of elements:
338 |     - **html**
339 |     - **component**
340 |     - **menu**
341 |     - **css**
342 | 
343 | 
344 | ### The *html* element ###
345 | 
346 | So far for our title we create a css full-width element with other css properties (height, color, items alignment, etc. etc.) as a container.
347 | 
348 | Then we created a **html** element type.
349 | 
350 | For the **html** element type we must provide the content thru the **content** value. In this case we will assign directly HTML code to inject and render. In this way you can assign css to your html content and it will be rendered correctly.
351 | 
352 | ### The *menu* element ###
353 | 
354 | In order to render our menu we create a new row (block object) with his proper css.
355 | 
356 | In order to render the right menu we have to assign which item in the navigation array we will use. Assign the navigation value representing the posisition in the navigation array (in our case we have only one navigation menu so we assign a value of 0).
357 | 
358 | ```
359 | ...
360 | 
361 | header : {
362 |     root: 'w-full flex flex-wrap',
363 |     blocks : [
364 |     ...
365 |      {
366 |         css: 'w-full md:w-1/2 lg:w-1/2 xl:w-1/2 border-l opacity-75 h-24 col z-30 justify-left items-center flex text-right pr-12 col-nav  bg-black mobile' , 
367 |         elements : [
368 |             { type: 'menu'      , navigation: 0, homepage: false}
369 |         ],
370 |         homepage: false
371 |     },
372 |     ...
373 | }
374 | ...
375 | ```
376 | ### Creating the content ###
377 | 
378 | In order to create the content, that will be rendered as a semantic HTML **&lt;section&gt;** we follow the same structure. 
379 | 
380 | We will analyze only how to integrate a component in the theme.
381 | 
382 | **Component theme integration**
383 | 
384 | ```
385 | ...
386 | 
387 | content : {
388 |    
389 |     root: 'w-full flex flex-wrap',
390 |     blocks : [
391 |         {
392 |             css: 'w-full bg-transparent text-grey mx-4 -mt-20 py-6',
393 |             elements: [
394 |                 { type: 'component' , component: 'core/services' , options: { data: 'services' , title: 'Features' } },
395 |             ],
396 |             homepage: true
397 |         },
398 |         ...
399 |     ]
400 | }
401 | ...
402 | ```
403 | 
404 | To load a custom component we have to define as element the following data:
405 | - **type**      : "component",
406 | - **component** : the path of our component (if you are using a vue component with a different name from index.vue you need to define ex. /mycomponent/mycomponent.vue will load the mycomponent.vue in the folder mycomponent of the components folder)
407 | - **options**   : an object of options that you need to pass to your components (props)
408 | 
409 | 
410 | Theme4Nuxt loads components dynamically using a component wrapper. 
411 | 
412 | Theme4Nuxt component wrapper (components/theme/ComponentWrapper.vue)
413 | 
414 | ```html
415 | <template>
416 |     <div>
417 |         <component :is="loadcomponent" :options="options"/>
418 |     </div>
419 | </template>
420 | 
421 | <script>
422 | export default {
423 |     props: { 
424 |         name: { type: String , required: true },
425 |         options: { type: Object , required: false , default:()=>{}}
426 |     },    
427 |     computed:{
428 |          loadcomponent(){   
429 |             return () =>  import(/* webpackChunkName: "${this.name}" */ '~/components/' + this.name)
430 |         },
431 |     }
432 | }
433 | </script>
434 | ```
435 | 
436 | 
437 | 
438 | 
439 | ## Nuxt configuration
440 | 
441 | In order to work properly you need to update your nuxt.config.js with the following
442 | 
443 | file: ./nuxt.config.js
444 | 
445 | ```js
446 | css: [
447 |     '~/assets/css/tailwind.css' //if you set a nuxt project with tailwind framework you should have this
448 | ],
449 | 
450 | plugins: [
451 |     '~/plugins/index.js',
452 |     '~/components/theme' //load all theme required components
453 | ],
454 | 
455 | modules: [
456 |     '@nuxtjs/axios',
457 |     '@nuxtjs/pwa',
458 |     '@nuxtjs/markdownit'  //used to integrate markdown files
459 | ],
460 | ...
461 | 
462 | ```
463 | 
464 | 
465 | ## Build Setup
466 | 
467 | ``` bash
468 | # install dependencies
469 | $ npm install
470 | 
471 | # serve with hot reload at localhost:3000
472 | $ npm run dev
473 | 
474 | # build for production and launch server
475 | $ npm run build
476 | $ npm start
477 | 
478 | # generate static project
479 | $ npm run generate
480 | ```
481 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # theme4nuxt
  2 | 
  3 | 
  4 | Theme4Nuxt is a basic theming solution for Nuxtjs. I decided to develop it in order to have an easy way to prototype layouts/themes for Nuxt using a configuration file.
  5 | 
  6 | Based only on `tailwind.css` framework is developed to give the possibility to create your custom design without any opinionated framework.
  7 | 
  8 | # Demo
  9 | 
 10 | (A simple demo)[https://theme4nuxt.firebaseapp.com/]
 11 | 
 12 | 
 13 | # Features
 14 | 
 15 | - custom design based on CSS only
 16 | - fast theme/layout prototype
 17 | - create html semantic elements (header,section,aside,footer)
 18 | - easy full responsive design implementation
 19 | - easy integration with existing
 20 |     - components
 21 |     - api
 22 |     - markdown pages
 23 | - easy theme switching
 24 | - homepage design
 25 | - extra basic components included (used in this demo)
 26 |     - responsive navigation
 27 |     - progress bars 
 28 |     - cards
 29 |     - features/services info box
 30 |     - call for action 
 31 | 
 32 | 
 33 | # How it works
 34 | 
 35 | **Requirements** : tailwind.css
 36 | 
 37 | 
 38 | Theme4Nuxt is based on the following:
 39 | - a **theme** js file (./themes/index.js)
 40 | - a **single vue** file to deploy the theme to be used as layout template (./layout/theme.vue)
 41 | - a Vue **component wrapper** in order to integrate any component dynamically (./components/theme/ComponentWrapper.vue) 
 42 | - a Vue **navigation component** in order to create a navigation system (./components/theme/nav/index.vue)
 43 | - a **theme4nuxt** plugin in order to preload data server side (./plugins/theme4nuxt.js)
 44 | 
 45 |     
 46 | 
 47 | ## Theme file
 48 | 
 49 | Create a `themes` folder in your project root. 
 50 |     
 51 | Create an `index.js` in the themes folder
 52 | 
 53 | #### Structure of the theme
 54 | 
 55 | Each theme configuration file has the following structure:
 56 | 
 57 | 
 58 | - theme general info (name, author, version, license)
 59 | - a **root** property with css classes. This is the main container of your theme
 60 | - a **homepage** property with the path for the homepage
 61 | - a **initData** array of objects representing the initial data to load at startup. Data can be **API** or **Array** 
 62 | - a **navigation** array of objects. You can define different navigations and then use in your templates.
 63 | - a **template** the main object of your theme.
 64 | 
 65 | 
 66 | ```
 67 | const theme = {
 68 |     name        : 'Corporate Business',
 69 |     author      : 'A. Nardone',
 70 |     version     : '0.2.0',
 71 |     license     : 'MIT'
 72 |     root        : 'w-full flex flex-wrap min-h-screen',
 73 |     homepage    : '/',
 74 |     ...
 75 | }
 76 | 
 77 | export default theme
 78 | ```
 79 | ### initData Section ###
 80 | The **initData** is where you can define which data has to be preloaded. 
 81 | 
 82 | They can be **API** or **arrays** of data, depends on your rendering functions/components.
 83 | 
 84 | *The current theme is using some WordPress API to simulate the preloading feature*
 85 | 
 86 | ```
 87 |   initData : [
 88 |       { type: 'api'   , name: 'posts'     , api : 'https://www.techcrunch.com/wp-json/wp/v2/posts' } ,
 89 |       { type: 'array'   , name: 'services'  , value : [
 90 |         {"type":"services",
 91 |         "title":"CSS Only",
 92 |         "abstract":"Theme4Nuxt is developed using only CSS with the Tailwind framework",
 93 |         "path":"css-only",
 94 |         "_id":"0tSvdJebN4cKmKa6",
 95 |         "icon":"style"},
 96 |         {"type":"services",
 97 |         "title":"Custom Design",
 98 |         "abstract":"Create your custom theme without any opinionated framework",
 99 |         "icon":"chrome_reader_mode",
100 |         "path":"theme-builder",
101 |         "_id":"MSOXCaCn4AfNz57w"},
102 |         {"type":"services",
103 |         "title":"Integration",
104 |         "abstract":"Feel free to use your own components, API and data",
105 |         "path":"api-data",
106 |         "_id":"ueN9BbEdxvKoZWNi"
107 |         ,"icon":"compare_arrows"}
108 |         ] },
109 |       { type: 'array' , name: 'skills'    , value : [{name:'CREATIVITY' , value: "90%"} , { name: 'ORGANIZATION' , value: "85%"} , { name: 'TEAM WORK' , value: "75%"} , { name: 'COMMUNICATION' , value: "70%"}]
110 |       }
111 | ],
112 | ```
113 | 
114 | In case of API **axios** library will be used to fetch data (asyncronously) server side.
115 | 
116 | **Data preloading is implemented using `nuxtServerInit` directly from the store.**
117 | 
118 | file: ./store/index.js
119 | 
120 | ```
121 | ...
122 | async nuxtServerInit({commit}, context ){
123 |     //read theme configuration using $theme4nuxt() injected by ./plugins/index.js
124 |     let init = context.app.$theme4nuxt().initData
125 |     let data = {}
126 |     //iterate thru all initial data to be loaded
127 |     for ( var n=0 ; n < init.length ; n++ ){
128 |         if ( init[n].type === 'api' ) {
129 |             let qry = await context.app.$axios.get(init[n].api);
130 |             data[init[n].name] = qry.data
131 |         }
132 |         if ( init[n].type === 'array' ){
133 |             data[init[n].name] = init[n].value
134 |         }
135 |     }
136 |     //save data to store
137 |     commit ('init_data', data )
138 |     if ( !context.app.store.state.theme ){
139 |     commit ('theme',context.app.$theme4nuxt() )
140 |     }  
141 | },
142 | ...
143 | ```
144 | 
145 | **Preload theme and injext function to read initData configuration**
146 | 
147 | file: ./plugins/index.js
148 | 
149 | ```
150 | import theme from '~/themes'
151 | 
152 | export default ({ app }, inject) => {
153 |     inject('theme4nuxt', () => theme)
154 | }
155 | ```
156 | # The Theme #
157 | 
158 | We analyze the current theme that has been used for this website.
159 | 
160 | ### navigation Section ###
161 | 
162 | The navigation section is required if you want to use the built-in navigation system as showed in the demo. This component create a responsive main navigation icon that open a menu with the options defined. 
163 | 
164 | The navigation section is also used in the template in order to render a normal navigation menu.
165 | In this version child menus are not supported. If you need this option you can use your component or navigation system.
166 | 
167 | ```
168 | ...
169 |  navigation :  [{  
170 |         css     : "items-start w-full pt-16 px-4 pb-20 bg-black opacity-75 h-screen",
171 |         button  : "m-1 bg-white p-2 border-black border-2 rounded-full",
172 |         line    : "hover:text-black hover:bg-white text-grey-lightest" ,
173 |         link       : 'text-white hover:text-black hover:bg-white hover:text-bold py-10 px-4 no-underline',
174 |         left    : false,
175 |         transition: 'slideright',
176 |         orientation: 'horizontal' , 
177 |         items:  [ { name : 'Home' , path: '/' } , { name: 'Blog' , path: '/blog' } , { name: 'About' , path: '/about' } , { name: 'How to' , path: '/howto' }  ] 
178 |     }],
179 | ...
180 | ```
181 | 
182 | ### template Section ###
183 | 
184 | The **template** section is the core of the theming system and has 2 main objects
185 | - **main** 
186 | - **areas**
187 | 
188 | 
189 | 
190 | 
191 | The ***main*** object
192 | 
193 | The main object is where is defined the class of the main container and will generate a semantic **&lt;main&gt;** html element.
194 | ```
195 | ...
196 | template: {
197 |         main : {
198 |             css : "w-full",
199 |             
200 |         },
201 | ...
202 | ```
203 | 
204 | 
205 | 
206 | The **areas** object
207 | 
208 | With the areas object you define all the elements of your template.
209 | 
210 | First you can define the order of the area to be rendered as semantic html blocks. Available areas are:
211 | - header
212 | - aside
213 | - content (will be rendered as section)
214 | - footer
215 | 
216 | **order is important in order to render elements correctly**
217 | 
218 | 
219 | ```
220 | ...
221 | template: {
222 |     ...
223 |     areas: {
224 |         order  : ['header','content','footer'],
225 |     ...
226 | ```
227 | 
228 | Our example will create a **header**, a **section** area and a **footer**.
229 | 
230 | 
231 | ### Creating the header ###
232 | 
233 | ```
234 | ...
235 | template: {
236 |     ...
237 |     areas: {
238 |         areas: {
239 |             order  : ['header','content','footer'],
240 |             header : {
241 |             root: 'w-full flex flex-wrap',
242 |             blocks : [
243 |                 {
244 |                     css: 'w-1/2 flex items-center h-12 bg-black text-grey text-xs pl-4 mobile',
245 |                     elements: [
246 |                         { type: 'html' , content: '\
247 |                         <span>theme4nuxt@moodgiver.com</span>\
248 |                         '}
249 |                     ]
250 |                 },
251 |                 {
252 |                     css: 'w-1/2 flex items-center justify-end h-12 bg-black text-grey text-xs pr-16 mobile',
253 |                     elements: [
254 |                         { type: 'html' , content: '\
255 |                         <span class="justify-end">+1 123 456 7890</span>\
256 |                         '}
257 |                     ]
258 |                 },
259 |                 {
260 |                     css: 'w-full md:w-1/2 lg:w-1/2 xl:w-1/2 h-24 opacity-75 justify-end flex items-center col bg-black' ,
261 |                     elements : [
262 |                         { type: 'html'      , content: '<div class="p-4 z-40  rounded-lg text-white"><h1><span class="font-light border-t-2">Theme<span class="text-white bg-blue-dark px-2 py-1">4</span></span><span class="border-b-4">Nuxt</span></h1></div>' , homepage: false }
263 |                     ],
264 |                     homepage: false
265 |                 },
266 |                 {
267 |                     css: 'w-full md:w-1/2 lg:w-1/2 xl:w-1/2 border-l opacity-75 h-24 col z-30 justify-left items-center flex text-right pr-12 col-nav  bg-black mobile' , 
268 |                     elements : [
269 |                         { type: 'menu'      , navigation: 0, homepage: false}
270 |                     ]
271 |                 },
272 |                 {
273 |                     css: 'w-full bg-green-light h-128 -mt-24 bg-header-8',
274 |                     elements: [
275 |                         { type: 'html'  , content: ''}
276 |                     ],
277 |                     homepage: true
278 |                 }
279 | 
280 |                 ]
281 |             },
282 | ...
283 | ```
284 | In order to create a semantic html **&lt;header&gt;** element we create a header object. Following structure will be used for each defined area.
285 | 
286 | For each section (header, aside, content, footer) we have :
287 | 
288 | - **root** element container (css)
289 | - **blocks** array of objects
290 | 
291 | In our theme we wanted to create:
292 | - a top bar with email and phone ref, 
293 | - a header with a logo/title centered, 
294 | - a centered menu right to the title 
295 | - an image as heading 
296 | 
297 | 
298 | 
299 | The top bar block.
300 | ```
301 | ...
302 | 
303 | header : {
304 |     root: 'w-full flex flex-wrap',
305 |     blocks : [
306 |         {
307 |             css: 'w-1/2 flex items-center h-12 bg-black text-grey text-xs pl-4 mobile',
308 |             elements: [
309 |                 { type: 'html' , content: '\
310 |                 <span>theme4nuxt@moodgiver.com</span>\
311 |                 '}
312 |             ],
313 |             homepage: false
314 |         },
315 |         {
316 |             css: 'w-1/2 flex items-center justify-end h-12 bg-black text-grey text-xs pr-16 mobile',
317 |             elements: [
318 |                 { type: 'html' , content: '\
319 |                 <span class="justify-end">+1 123 456 7890</span>\
320 |                 '}
321 |             ],
322 |             homepage: false
323 |         },
324 |         ...
325 |     }
326 | }
327 | ```
328 | 
329 | For each block we have to define 
330 | 
331 | - **css** : tailwind css classes for the block 
332 | - **elements** : array of elements we want to render
333 | - **homepage** : set to true in order to display only in the homepage
334 | 
335 | **elements** is an array of object that will be rendered following the order in which they are created.
336 | 
337 | ### elements types ##
338 | Each element has the following properties to be set
339 | 
340 | - **type**
341 |     
342 |     the system manage the following types of elements:
343 |     - **html**
344 |     - **component**
345 |     - **menu**
346 |     - **css**
347 | 
348 | 
349 | ### The *html* element ###
350 | 
351 | So far for our title we create a css full-width element with other css properties (height, color, items alignment, etc. etc.) as a container.
352 | 
353 | Then we created a **html** element type.
354 | 
355 | For the **html** element type we must provide the content thru the **content** value. In this case we will assign directly HTML code to inject and render. In this way you can assign css to your html content and it will be rendered correctly.
356 | 
357 | ### The *menu* element ###
358 | 
359 | In order to render our menu we create a new row (block object) with his proper css.
360 | 
361 | In order to render the right menu we have to assign which item in the navigation array we will use. Assign the navigation value representing the posisition in the navigation array (in our case we have only one navigation menu so we assign a value of 0).
362 | 
363 | ```
364 | ...
365 | 
366 | header : {
367 |     root: 'w-full flex flex-wrap',
368 |     blocks : [
369 |     ...
370 |      {
371 |         css: 'w-full md:w-1/2 lg:w-1/2 xl:w-1/2 border-l opacity-75 h-24 col z-30 justify-left items-center flex text-right pr-12 col-nav  bg-black mobile' , 
372 |         elements : [
373 |             { type: 'menu'      , navigation: 0, homepage: false}
374 |         ],
375 |         homepage: false
376 |     },
377 |     ...
378 | }
379 | ...
380 | ```
381 | ### Creating the content ###
382 | 
383 | In order to create the content, that will be rendered as a semantic HTML **&lt;section&gt;** we follow the same structure. 
384 | 
385 | We will analyze only how to integrate a component in the theme.
386 | 
387 | **Component theme integration**
388 | 
389 | ```
390 | ...
391 | 
392 | content : {
393 |    
394 |     root: 'w-full flex flex-wrap',
395 |     blocks : [
396 |         {
397 |             css: 'w-full bg-transparent text-grey mx-4 -mt-20 py-6',
398 |             elements: [
399 |                 { type: 'component' , component: 'core/services' , options: { data: 'services' , title: 'Features' } },
400 |             ],
401 |             homepage: true
402 |         },
403 |         ...
404 |     ]
405 | }
406 | ...
407 | ```
408 | 
409 | To load a custom component we have to define as element the following data:
410 | - **type**      : "component",
411 | - **component** : the path of our component (if you are using a vue component with a different name from index.vue you need to define ex. /mycomponent/mycomponent.vue will load the mycomponent.vue in the folder mycomponent of the components folder)
412 | - **options**   : an object of options that you need to pass to your components (props)
413 | 
414 | 
415 | Theme4Nuxt loads components dynamically using a component wrapper. 
416 | 
417 | Theme4Nuxt component wrapper (components/theme/ComponentWrapper.vue)
418 | ```
419 | <template>
420 |     <div>
421 |         <component :is="loadcomponent" :options="options"/>
422 |     </div>
423 | </template>
424 | 
425 | <script>
426 | export default {
427 |     props: { 
428 |         name: { type: String , required: true },
429 |         options: { type: Object , required: false , default:()=>{}}
430 |     },    
431 |     computed:{
432 |          loadcomponent(){   
433 |             return () =>  import(/* webpackChunkName: "${this.name}" */ '~/components/' + this.name)
434 |         },
435 |     }
436 | }
437 | </script>
438 | ```
439 | 
440 | 
441 | 
442 | 
443 | ## Nuxt configuration
444 | 
445 | In order to work properly you need to update your nuxt.config.js with the following
446 | 
447 | file: ./nuxt.config.js
448 | 
449 | ```
450 | /*
451 | ** Load tailwind.css
452 | */
453 | css: [
454 |     '~/assets/css/tailwind.css' //if you set a nuxt project with tailwind framework you should have this
455 | ],
456 | 
457 | /*
458 | ** Plugins to load before mounting the App
459 | */
460 | plugins: [
461 |     '~/plugins/index.js',
462 |     '~/components/theme' //load all theme required components
463 | ],
464 | 
465 | /*
466 | ** Nuxt.js modules
467 | */
468 | modules: [
469 |     //axios, pwa and markdown support
470 |     '@nuxtjs/axios',
471 |     '@nuxtjs/pwa',
472 |     '@nuxtjs/markdownit'  //used to integrate markdown files
473 | ],
474 | ...
475 | 
476 | ```
477 | 
478 | 
479 | ## Build Setup
480 | 
481 | ``` bash
482 | # install dependencies
483 | $ npm install
484 | 
485 | # serve with hot reload at localhost:3000
486 | $ npm run dev
487 | 
488 | # build for production and launch server
489 | $ npm run build
490 | $ npm start
491 | 
492 | # generate static project
493 | $ npm run generate
494 | ```
495 | 


--------------------------------------------------------------------------------
/themes/theme2.js:
--------------------------------------------------------------------------------
  1 | const layout = {
  2 |     name     : 'e-commerce Waves',
  3 |     author    : 'A. Nardone',
  4 |     version   : '0.2.0',
  5 |     root     : 'w-full flex flex-wrap min-h-screen',
  6 |     homepage    : '/',
  7 |     initData : [
  8 |       { type: 'api'   , name: 'posts'     , api : 'https://www.techcrunch.com/wp-json/wp/v2/posts' } , //'/posts?$sort[createdAt]=-1&$limit=4' },
  9 |       { type: 'api'   , name: 'info'     , api :  'https://www.gianlucagiacalone.it/wp-json/wp/v2/posts' } , // '/posts?$sort[createdAt]=-1&$limit=4' },
 10 |       { type: 'api'   , name: 'services'  , api : 'http://localhost:3030/sections?type=services' },
 11 |       { type: 'array' , name: 'skills'    , value : [{name:'CREATIVITY' , value: "90%"} , { name: 'ORGANIZATION' , value: "85%"} , { name: 'TEAM WORK' , value: "75%"} , { name: 'COMMUNICATION' , value: "70%"}]
 12 |       }
 13 |     ],
 14 | 
 15 |     navigation :  [{  
 16 |         css     : "items-start w-full pt-16 px-2 pb-20 bg-purple-dark clipped-angle-right",
 17 |         button  : "m-4 bg-white p-4 border-black border-2 rounded-full",
 18 |         line    : "hover:text-black hover:bg-purple-light text-grey-lightest" ,
 19 |         link       : 'text-white hover:text-white hover:bg-indigo rounded hover:text-bold py-2 px-4 no-underline',
 20 |         left    : false,
 21 |         transition: 'slidedown',
 22 |         orientation: 'horizontal' , 
 23 |         items:  [ { name : 'Home' , path: '/' } , { name: 'Blog' , path: '/blog' } , { name: 'About' , path: '/about' } , { name: 'How to' , path: '/howto' } , { name: 'GitHub', path: 'https://github.com/swina/theme4nuxt'} ] 
 24 |     }],
 25 |     template: {
 26 |         main : {
 27 |             css : "w-full",
 28 |             
 29 |         },
 30 |         areas: {
 31 |              order  : ['header','content','footer'],
 32 |              header : {
 33 |                 root: 'w-full flex flex-wrap',
 34 |                 blocks : [
 35 |                    
 36 |                     
 37 |                    
 38 |                     {
 39 |                         css: 'w-full md:w-1/4 lg:w-1/4 xl:w-1/4 h-24 flex items-center col bg-purple-dark' ,
 40 |                         elements : [
 41 |                             { type: 'html'      , content: '<div class="p-4 z-40  rounded-lg text-white"><h1><span class="font-light border-t-2">Theme<span class="text-white bg-red px-2 py-1">4</span></span><span class="border-b-4">Nuxt</span></h1></div>' , homepage: false }
 42 |                         ],
 43 |                         homepage: false
 44 |                     },
 45 |                     {
 46 |                         css: 'w-full md:w-3/4 lg:w-3/4 xl:w-3/4 h-24 col z-30 justify-left items-center flex text-right pr-12 col-nav  bg-purple-dark mobile' , 
 47 |                         elements : [
 48 |                             { type: 'menu'      , navigation: 0, homepage: false}
 49 |                         ]
 50 |                     },
 51 |                     
 52 |                     
 53 |                     {
 54 |                         css: 'w-full bg-white',
 55 |                         
 56 |                         elements: [
 57 |                            { type: 'html'  , content: '<svg\
 58 |                            xmlns:dc="http://purl.org/dc/elements/1.1/"\
 59 |                            xmlns:cc="http://creativecommons.org/ns#"\
 60 |                            xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"\
 61 |                            xmlns:svg="http://www.w3.org/2000/svg"\
 62 |                            xmlns="http://www.w3.org/2000/svg"\
 63 |                            id="svg8"\
 64 |                            version="1.1"\
 65 |                            viewBox="0 0 375.70834 66.145832"\
 66 |                            height="100%"\
 67 |                            width="100%">\
 68 |                           <defs\
 69 |                              id="defs2" />\
 70 |                           <metadata\
 71 |                              id="metadata5">\
 72 |                             <rdf:RDF>\
 73 |                               <cc:Work\
 74 |                                  rdf:about="">\
 75 |                                 <dc:format>image/svg+xml</dc:format>\
 76 |                                 <dc:type\
 77 |                                    rdf:resource="http://purl.org/dc/dcmitype/StillImage" />\
 78 |                                 <dc:title></dc:title>\
 79 |                               </cc:Work>\
 80 |                             </rdf:RDF>\
 81 |                           </metadata>\
 82 |                           <g\
 83 |                              style="display:inline"\
 84 |                              transform="translate(0,-230.85418)"\
 85 |                              id="layer1">\
 86 |                             <path\
 87 |                                id="path3718-8"\
 88 |                                d="m 311.2135,111.54192 c 10.02187,0.90553 18.93072,14.96274 27.35834,28.3983 12.4674,19.9564 26.03529,37.36756 40.68873,39.74068 14.48945,1.79183 28.48317,-11.67898 42.15651,-23.74824 17.54943,-16.29516 37.05843,-14.58314 54.04554,4.50786 11.42662,11.17421 22.17667,26.75935 32.85779,42.37177 -2.85513,11.37471 -7.91172,15.25547 -11.84567,22.87073 -19.58749,29.65937 -43.08072,38.70361 -65.29705,32.72223 C 293.99997,170.74184 111.3631,370.23254 1.3831537,235.70303 -2.3179157,221.94919 1.0483068,199.34435 7.0740331,195.69919 16.501793,184.76504 26.185404,175.65766 35.905929,167.05562 c 19.888243,-16.64639 40.66713,-27.63826 61.414352,-24.31126 11.506849,3.65769 21.602129,20.31482 31.521779,35.40098 8.35517,12.01525 17.73021,21.96279 27.37711,18.41424 9.97749,-3.36524 18.86921,-18.37023 26.72103,-35.16399 8.10375,-15.1734 17.93565,-25.61308 27.75655,-21.98575 14.51369,3.32724 28.61029,17.79554 43.34482,14.29152 16.02845,-2.16991 31.19561,-19.02196 45.93631,-35.73332 3.60704,-3.65264 7.38439,-6.53355 11.23562,-6.42612 z"\
 89 |                                style="opacity:1;fill:#794acf;stroke-width:0.72383827" />\
 90 |                           </g>\
 91 |                         </svg>\
 92 |                          '}
 93 |                         ]
 94 |                     }
 95 |                 ]
 96 |             },
 97 |             content : {
 98 |                 root: 'w-full flex flex-wrap',
 99 |                 blocks : [
100 |                     {
101 |                         
102 |                         css: 'w-full flex flex-wrap justify-center', 
103 |                         elements : [
104 |                             { type: 'html' , content: '' , nuxt: true , homepage: false }
105 |                         ]
106 |                     },
107 |                    
108 |                     { 
109 |                         css: 'w-full flex flex-wrap justify-center', 
110 |                         elements : [ 
111 |                             { type: 'component' , component: 'core/cards'  , options: { contest: 'products' } , homepage: true }
112 |                         ],
113 |                     },
114 |                    
115 |                     {
116 |                         css: 'w-full bg-white -mb-8',
117 |                         
118 |                         elements: [
119 |                            { type: 'html'  , content: '<svg\
120 |                            xmlns:dc="http://purl.org/dc/elements/1.1/"\
121 |                            xmlns:cc="http://creativecommons.org/ns#"\
122 |                            xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"\
123 |                            xmlns:svg="http://www.w3.org/2000/svg"\
124 |                            xmlns="http://www.w3.org/2000/svg"\
125 |                            xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"\
126 |                            xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"\
127 |                            width="100%"\
128 |                            height="100%"\
129 |                            viewBox="0 0 375.70834 66.145832"\
130 |                            version="1.1"\
131 |                            id="svg8"\
132 |                            inkscape:version="0.92.4 (5da689c313, 2019-01-14)"\
133 |                            sodipodi:docname="curves-down-5.svg">\
134 |                           <defs\
135 |                              id="defs2" />\
136 |                           <sodipodi:namedview\
137 |                              id="base"\
138 |                              pagecolor="#ffffff"\
139 |                              bordercolor="#666666"\
140 |                              borderopacity="1.0"\
141 |                              inkscape:pageopacity="0"\
142 |                              inkscape:pageshadow="2"\
143 |                              inkscape:zoom="0.49497475"\
144 |                              inkscape:cx="678.95093"\
145 |                              inkscape:cy="388.41641"\
146 |                              inkscape:document-units="mm"\
147 |                              inkscape:current-layer="layer1"\
148 |                              showgrid="false"\
149 |                              inkscape:window-width="1920"\
150 |                              inkscape:window-height="1013"\
151 |                              inkscape:window-x="-9"\
152 |                              inkscape:window-y="-9"\
153 |                              inkscape:window-maximized="1"\
154 |                              units="px" />\
155 |                           <metadata\
156 |                              id="metadata5">\
157 |                             <rdf:RDF>\
158 |                               <cc:Work\
159 |                                  rdf:about="">\
160 |                                 <dc:format>image/svg+xml</dc:format>\
161 |                                 <dc:type\
162 |                                    rdf:resource="http://purl.org/dc/dcmitype/StillImage" />\
163 |                                 <dc:title></dc:title>\
164 |                               </cc:Work>\
165 |                             </rdf:RDF>\
166 |                           </metadata>\
167 |                           <g\
168 |                              inkscape:label="Layer 1"\
169 |                              inkscape:groupmode="layer"\
170 |                              id="layer1"\
171 |                              transform="translate(0,-230.85418)"\
172 |                              style="display:inline">\
173 |                             <path\
174 |                                style="opacity:1;fill:#794acf;stroke-width:0.72383827"\
175 |                                d="m 120.50652,403.04899 c -10.02187,-0.90553 -18.93072,-14.96274 -27.358335,-28.3983 -12.4674,-19.9564 -26.03529,-37.36756 -40.68873,-39.74068 -14.48945,-1.79183 -28.48317,11.67898 -42.156507,23.74824 -17.5494299,16.29516 -37.05843,14.58314 -54.04554,-4.50786 -11.42662,-11.17421 -22.17667,-26.75935 -32.85779,-42.37177 2.85513,-11.37471 7.91172,-15.25547 11.84567,-22.87073 19.58749,-29.65937 43.08072,-38.70361 65.29705012,-32.72223 C 137.72005,343.84907 320.35692,144.35837 430.33687,278.88788 c 3.70107,13.75384 0.33485,36.35868 -5.69088,40.00384 -9.42776,10.93415 -19.11137,20.04153 -28.8319,28.64357 -19.88824,16.64639 -40.66713,27.63826 -61.41435,24.31126 -11.50685,-3.65769 -21.60213,-20.31482 -31.52178,-35.40098 -8.35517,-12.01525 -17.73021,-21.96279 -27.37711,-18.41424 -9.97749,3.36524 -18.86921,18.37023 -26.72103,35.16399 -8.10375,15.1734 -17.93565,25.61308 -27.75655,21.98575 -14.51369,-3.32724 -28.61029,-17.79554 -43.34482,-14.29152 -16.02845,2.16991 -31.19561,19.02196 -45.93631,35.73332 -3.60704,3.65264 -7.38439,6.53355 -11.23562,6.42612 z"\
176 |                                id="path3718-8"\
177 |                                inkscape:connector-curvature="0"\
178 |                                sodipodi:nodetypes="ccccccccccccccccccc" />\
179 |                           </g>\
180 |                         </svg>\
181 |                          '}
182 |                         ]
183 |                     },
184 |                     {
185 |                         css: 'w-full flex items-center justify-center h-48 pt-8 -mt-2 bg-purple-dark',
186 |                         elements: [
187 |                             { type: 'html'       , content: '<div class="px-4 z-30 opacity-75 rounded-lg text-white"><h4>Do you need a theme solution for Nuxt?</h4><h1><span class="font-light">Theme<span class="text-black">4</span></span>Nuxt</h1><button class="my-4 py-2 px-4 bg-grey-light rounded shadow-lg hover:bg-indigo hover:text-white">Get Started</button></div>' , homepage: true }
188 |                         ],
189 |                         homepage: true
190 |                     },
191 |                    
192 |                     /*{ 
193 |                         css: 'w-full md:w-full lg:w-1/2 xl:w-1/2', 
194 |                         elements : [
195 |                             { type: 'html'      , content: '<h1 class="text-center"><div class="-mb-4 m-auto border-8 items-center flex justify-center h-32 w-32 bg-indigo-dark text-white">Blog</div></h1>' , homepage: true  },
196 |                             //{ type: 'component' , name: 'v-posts'  , data: 'info'  ,  homepage: true },
197 |                         ]
198 |                     },
199 |                     { 
200 |                         css: 'w-full md:w-full lg:w-1/2 xl:w-1/2', 
201 |                         elements : [    
202 |                             
203 |                             
204 |                             { type: 'html'      , content: '<h1 class="text-center"><div class="-mb-4 m-auto border-8 border-indigo-dark items-center flex justify-center h-32 w-32 bg-grey text-indigo-dark">News</div></h1>' , homepage: true  },
205 |                             //{ type: 'component' , name: 'v-posts'  , data: 'info' , homepage: true  }
206 |                         ],
207 |                     },
208 |                     */
209 |                   
210 |                 ]
211 |             },
212 |             footer : {
213 |                 root    : 'w-full',
214 |                 blocks  : [
215 |                     {
216 |                         css: 'h-16 items-center  flex justify-center w-full bg-purple-dark text-center text-white' ,
217 |                         elements : [
218 |                             { type: 'html'      , content: '<small>Theme4Nuxt - a theme solution for Nuxtjs - Author: Antonio Nardone - License MIT</small>' , homepage: false} 
219 |                         ]
220 |                     }
221 |                 ]
222 |             }
223 |         },
224 |     }
225 |     /*
226 |     template: {
227 |         main : {
228 |             css : "w-full grid columns-4 rows-5",
229 |             
230 |         },
231 |         grid : [
232 |             'h-16 bg-red' , 
233 |             'h-16 bg-red col col-span-2 flex items-center justify-center' ,
234 |             'h-16 bg-red col', 
235 |             'col-span-4' , 
236 |             'row-span-2 col-span-4 p-12' , 
237 |             'row-span-2 p-12 col-span-2' , 
238 |             'row-span-2 p-12 col-span-2' , 
239 |             'h-16 items-center flex justify-center col-span-4 bg-grey-light' 
240 |         ],
241 |         blocks : [
242 |             [{ type: 'html'      , content: '<h1 class="absolute z-50 pin-t pin-l mt-4 pl-4 text-black"><span class="font-light">Theme<span class="text-white">4</span></span>Nuxt</h1></h1>' ,homepage: false }],
243 |             [{ type: 'menu'  , navigation: 0, homepage: false}],
244 |             [{ type: 'nav'  , navigation: 0, homepage: false}],
245 |             [{ type: 'html' , content: '<div class="flex h-screen justify-center mt-16 w-3/4">\
246 |               <div class="shadow opacity-75 block  h-auto ml-4 bg-white font-light text-black p-4 rounded">\
247 |                 <h1><span class="font-light tracking-tight text-orange my-4">Need a theme for Nuxt?</span>\
248 |                     <h2 class="font-light text-grey-darkest my-3">Discover how to create themes for Nuxt</h2>\
249 |                     <p>A creative way to design your theme for Nuxt.</p>\
250 |                     <p class="pb-10">It\' easy, fast and replicable.</p>\
251 |                     <button class="bg-red text-white py-4 px-8 border rounded">More</button>\
252 |                 </h1>\
253 |                 </div></div>' , action: '/howto' , homepage: true }], 
254 |             [
255 |                 { type: 'component' , name: 'v-coreServices'  , title: '' , css: 'bg-red-light shadow icon-rounded rounded text-white px-8 -mt-16' ,  data : 'services'  , api: 'services' , homepage: true  }
256 |             ] ,    
257 |             [ 
258 |                 { type: 'component' , name: 'v-posts' , data: 'info' , homepage: true , nuxt: true } , 
259 |                 { type: 'component' , name: 'v-coreSkills' , data: 'skills' ,homepage: true} 
260 |             ],
261 |             [
262 |                 { type: 'component' , name: 'v-coreTiles'  , data: 'posts' , homepage: true }
263 |             ],
264 |             [
265 |                 { type: 'html'      , content: '<small>Theme4Nuxt - a theme solution for Nuxtjs - Author: Antonio Nardone - License MIT</small>' }
266 |             ]
267 |         ],
268 |         nuxt: 'mt-4'
269 |     },
270 |     
271 |     extra: {
272 |         html: '<div class="w-full absolute min-w-full pin-t pin-l h-screen z-back flex flex-wrap">\
273 |                 <div class="absolute pin-t pin-r w-1/2 min-h-full z-0 bg-orange clipped-half-down" style="z-index:-1"></div>\
274 |                 <div class="absolute pin-t w-full min-h-full z-0 bg-red" style="z-index:-2"></div>\
275 |                 </div>',
276 |         action: '/howto'
277 |     }   
278 |     */ 
279 | }
280 | 
281 | export default layout


--------------------------------------------------------------------------------