├── static ├── robots.txt ├── icon.png └── README.md ├── .prettierrc ├── assets ├── css │ └── tailwind.css ├── README.md └── icons.js ├── content ├── blog │ ├── index.md │ └── posts │ │ ├── article-4.md │ │ ├── article-3.md │ │ ├── article-5.md │ │ ├── example-1.md │ │ ├── article-2.md │ │ ├── example-2.md │ │ └── article-1.md ├── tours │ └── 2020 │ │ ├── tour-4.md │ │ ├── tour-2.md │ │ ├── tour-1.md │ │ └── tour-3.md └── about.md ├── postcss.config.js ├── .editorconfig ├── layouts ├── README.md └── default.vue ├── plugins └── cloudinary.js ├── middleware └── README.md ├── store └── README.md ├── .eslintrc.js ├── pages ├── about.vue ├── blog │ ├── _id.vue │ └── index.vue ├── tours │ ├── _year │ │ └── _slug.vue │ └── index.vue └── index.vue ├── README.md ├── components ├── Icon.vue ├── Card.vue ├── Row.vue ├── ColorMode.vue ├── Navigation.vue ├── Tour.vue ├── Post.vue └── ShareBtns.vue ├── helpers └── dateTime.js ├── mixins └── articleItem.js ├── LICENSE ├── tailwind.config.js ├── .gitignore ├── package.json ├── nuxt.config.js └── tailwind.js /static/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true 4 | } 5 | -------------------------------------------------------------------------------- /assets/css/tailwind.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | 3 | @tailwind components; 4 | 5 | @tailwind utilities; -------------------------------------------------------------------------------- /static/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mayashavin/tours-nuxt-full-static/HEAD/static/icon.png -------------------------------------------------------------------------------- /content/blog/index.md: -------------------------------------------------------------------------------- 1 | # TFH - News & Blogs 2 | 3 | Stay in touch for our News and latest Blog posts 4 | -------------------------------------------------------------------------------- /content/tours/2020/tour-4.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Melbourne, Australia 3 | description: Virtual tour to see Melbourne 4 | img: nuxt_demo/DSC00798 5 | --- -------------------------------------------------------------------------------- /content/tours/2020/tour-2.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Little Mermaid Tour 3 | description: Virtual tour to visit the Under the sea kingdom 4 | img: nuxt_demo/DSC00792 5 | --- -------------------------------------------------------------------------------- /content/tours/2020/tour-1.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Sleeping Tour 3 | description: Virtual tour to see the dreamland while you are sleeping 4 | img: nuxt_demo/DSC00329 5 | --- -------------------------------------------------------------------------------- /content/tours/2020/tour-3.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Subway Tour 3 | description: Want to feel city life? Join us in our virtual subway tour 4 | img: nuxt_demo/DSC00857 5 | --- -------------------------------------------------------------------------------- /content/blog/posts/article-4.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Camel tours in the desert 3 | description: A little bit about the camel tours 4 | img: nuxt_demo/camel 5 | author: Maya Shavin 6 | publishedDate: "2020-04-29T21:19:16.043Z" 7 | --- -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | const join = require('path').join 2 | const tailwindJS = join(__dirname, 'tailwind.config.js') 3 | 4 | module.exports = { 5 | plugins: [require('tailwindcss')(tailwindJS), require('autoprefixer')] 6 | } 7 | -------------------------------------------------------------------------------- /content/blog/posts/article-3.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Summer at Ceasare 3 | description: The summer beach color at Ceasare ancient theather 4 | img: nuxt_demo/ceasare 5 | author: Maya Shavin 6 | publishedDate: "2020-04-29T21:19:16.043Z" 7 | --- -------------------------------------------------------------------------------- /content/blog/posts/article-5.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Summer flower blossoming on the mountain 3 | description: The sun and the beauty of summer 4 | img: nuxt_demo/dsc00414 5 | author: Maya Shavin 6 | publishedDate: "2020-04-29T21:19:16.043Z" 7 | --- -------------------------------------------------------------------------------- /content/blog/posts/example-1.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Example 1 3 | description: Example 4 | author: Maya Shavin 5 | img: nuxt_demo/dsc00414 6 | --- 7 | ## Some heading 8 | 9 | blgdaijdSLKD;S [some link](https://example.com) 10 | 11 | ```js 12 | const hello = "Hello" 13 | ``` -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /plugins/cloudinary.js: -------------------------------------------------------------------------------- 1 | import Cloudinary, { CldImage, CldTransformation } from 'cloudinary-vue' 2 | import Vue from 'vue' 3 | 4 | Vue.use(Cloudinary, { 5 | configuration: { 6 | cloudName: 'mayashavin', 7 | secure: true 8 | }, 9 | components: [CldImage, CldTransformation] 10 | }) 11 | -------------------------------------------------------------------------------- /content/about.md: -------------------------------------------------------------------------------- 1 | # About TFH 2 | 3 | TFH means Travel From Home - virtual tours only. We aims to provide CORONA-free travel experience for travellers, or anyone who loves to travel but is too lazy to step outside of the house 😉. 4 | 5 | Below is some of our available tours for 2020. Enjoy and be safe! 6 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /content/blog/posts/article-2.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Enjoying an apple 3 | description: Eating apple in a hot day 4 | img: nuxt_demo/RachelEatingApple 5 | author: Maya Shavin 6 | publishedDate: "2020-04-29T21:19:16.043Z" 7 | --- 8 | 9 | ## dolor—sit—amet 10 | 11 | blah blah blah blah 12 | 13 | ### consectetur & adipisicing 14 | 15 | blah blah blah blah blah blah -------------------------------------------------------------------------------- /content/blog/posts/example-2.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Example 2 3 | description: This is Example 2 blog 4 | img: nuxt_demo/dsc00414 5 | author: Maya Shavin 6 | --- 7 | ## Heading 8 | 9 | blag bjfdshfkjdh. [Link 1](https://example.com) fjhdsalkfjhsdlj [Link 2](https://nuxtjs.org) 10 | 11 | ```js 12 | const hello = "Hello JSMonthly Online" 13 | 14 | console.log(hello) 15 | ``` 16 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /.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 | '@nuxtjs', 12 | 'plugin:nuxt/recommended', 13 | 'plugin:prettier/recommended', 14 | 'prettier', 15 | 'prettier/vue' 16 | ], 17 | plugins: [ 18 | 'prettier' 19 | ], 20 | // add your custom rules here 21 | rules: { 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /pages/about.vue: -------------------------------------------------------------------------------- 1 | 6 | 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # full-static-app 2 | 3 | > My hunky-dory Nuxt.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | $ yarn install 10 | 11 | # serve with hot reload at localhost:3000 12 | $ yarn run dev 13 | 14 | # build for production and launch server 15 | $ yarn run build 16 | $ yarn start 17 | 18 | # generate static project 19 | $ yarn run generate 20 | ``` 21 | 22 | For detailed explanation on how things work, checkout [Nuxt.js docs](https://nuxtjs.org). 23 | -------------------------------------------------------------------------------- /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/Icon.vue: -------------------------------------------------------------------------------- 1 | 12 | 30 | -------------------------------------------------------------------------------- /pages/blog/_id.vue: -------------------------------------------------------------------------------- 1 | 4 | 24 | -------------------------------------------------------------------------------- /pages/tours/_year/_slug.vue: -------------------------------------------------------------------------------- 1 | 4 | 26 | -------------------------------------------------------------------------------- /helpers/dateTime.js: -------------------------------------------------------------------------------- 1 | const format = new Intl.DateTimeFormat('en', { 2 | year: 'numeric', 3 | month: 'short', 4 | day: '2-digit' 5 | }) 6 | 7 | export const formatTime = time => { 8 | const [ 9 | { value: month }, 10 | , 11 | { value: day }, 12 | , 13 | { value: year } 14 | ] = format.formatToParts(time) 15 | 16 | return { 17 | day, 18 | month, 19 | year 20 | } 21 | } 22 | 23 | export const sortByTime = (list, asc = true) => 24 | list.sort((itemA, itemB) => 25 | asc ? itemB.date - itemA.date : itemA.date - itemB.date 26 | ) 27 | 28 | export const formatDateStringField = (list, fieldToFormat) => 29 | list.map(item => ({ 30 | ...item, 31 | [fieldToFormat]: new Date(item[fieldToFormat]) 32 | })) 33 | -------------------------------------------------------------------------------- /mixins/articleItem.js: -------------------------------------------------------------------------------- 1 | import { formatTime } from '@/helpers/dateTime' 2 | 3 | export default { 4 | props: { 5 | img: { 6 | type: String, 7 | required: true 8 | }, 9 | title: { 10 | type: String, 11 | required: true 12 | }, 13 | description: { 14 | type: String, 15 | default: '' 16 | }, 17 | author: { 18 | type: String, 19 | default: '' 20 | }, 21 | updatedAt: { 22 | type: String, 23 | default: '' 24 | }, 25 | readingTime: { 26 | type: String, 27 | default: '' 28 | } 29 | }, 30 | computed: { 31 | date() { 32 | if (!this.updatedAt) return '' 33 | 34 | const formatted = formatTime(new Date(this.updatedAt)) 35 | 36 | return `${formatted.month} ${formatted.day}, ${formatted.year}` 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /components/Card.vue: -------------------------------------------------------------------------------- 1 | 28 | 35 | -------------------------------------------------------------------------------- /components/Row.vue: -------------------------------------------------------------------------------- 1 | 28 | 35 | -------------------------------------------------------------------------------- /components/ColorMode.vue: -------------------------------------------------------------------------------- 1 | 12 | 48 | -------------------------------------------------------------------------------- /components/Navigation.vue: -------------------------------------------------------------------------------- 1 | 17 | 40 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Maya Shavin 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /pages/blog/index.vue: -------------------------------------------------------------------------------- 1 | 21 | 40 | -------------------------------------------------------------------------------- /components/Tour.vue: -------------------------------------------------------------------------------- 1 | 36 | 46 | -------------------------------------------------------------------------------- /pages/tours/index.vue: -------------------------------------------------------------------------------- 1 | 24 | 42 | -------------------------------------------------------------------------------- /components/Post.vue: -------------------------------------------------------------------------------- 1 | 34 | 51 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | purge: [], 3 | theme: { 4 | screens: { 5 | sm: '640px', 6 | md: '768px', 7 | lg: '1024px', 8 | xl: '1280px' 9 | }, 10 | darkSelector: '.dark-mode', 11 | extend: { 12 | colors: { 13 | tfh: { 14 | default: '#cc0f01', 15 | gray: '#333', 16 | darker: '#a3b0c9', 17 | darkest: '#002671', 18 | light: '#e9f2ff', 19 | black: '#00194b', 20 | green: '#1f9d55', 21 | pale: '#38a89d', 22 | pink: '#eb5286', 23 | indigo: '#6574cd', 24 | sunny: '#faad63', 25 | orange: '#f96726', 26 | sea: '#6cb2eb', 27 | 'indigo-dark': '#402861', 28 | 'sea-light': '#19bbbe', 29 | transparent: '#a0aec0bd' 30 | } 31 | }, 32 | height: { 33 | fit: 'fit-content' 34 | }, 35 | width: { 36 | fit: 'fit-content' 37 | } 38 | } 39 | }, 40 | variants: { 41 | display: ['responsive'], 42 | inset: ['responsive', 'hover', 'focus'], 43 | backgroundColor: [ 44 | 'dark', 45 | 'dark-hover', 46 | 'dark-group-hover', 47 | 'dark-even', 48 | 'dark-odd' 49 | ], 50 | borderColor: ['dark', 'dark-focus', 'dark-focus-within'], 51 | textColor: ['dark', 'dark-hover', 'dark-active'] 52 | }, 53 | plugins: [require('tailwindcss-dark-mode')()], 54 | corePlugins: { 55 | inset: true 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /.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 | 86 | .vercel -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "full-static-app", 3 | "version": "1.0.0", 4 | "description": "My hunky-dory Nuxt.js demo project for full static", 5 | "author": "Maya Shavin", 6 | "private": true, 7 | "scripts": { 8 | "dev": "nuxt", 9 | "export": "nuxt export", 10 | "build": "nuxt build --target static && nuxt export", 11 | "start": "nuxt start", 12 | "generate": "nuxt generate", 13 | "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", 14 | "precommit": "npm run lint" 15 | }, 16 | "dependencies": { 17 | "@nuxt/content": "^1.3.2", 18 | "@nuxtjs/pwa": "^2.6.0", 19 | "@nuxtjs/tailwindcss": "^2.0.0", 20 | "cloudinary-vue": "^1.1.1", 21 | "cross-env": "^5.2.0", 22 | "nuxt": "^2.4.0", 23 | "prism-themes": "^1.4.0", 24 | "reading-time": "^1.2.0" 25 | }, 26 | "devDependencies": { 27 | "@nuxtjs/color-mode": "^1.0.0", 28 | "@nuxtjs/eslint-config": "^0.0.1", 29 | "autoprefixer": "^8.6.4", 30 | "babel-eslint": "^10.0.1", 31 | "eslint": "^5.15.1", 32 | "eslint-config-prettier": "^4.1.0", 33 | "eslint-config-standard": ">=12.0.0", 34 | "eslint-loader": "^2.1.2", 35 | "eslint-plugin-import": ">=2.16.0", 36 | "eslint-plugin-jest": ">=22.3.0", 37 | "eslint-plugin-node": ">=8.0.1", 38 | "eslint-plugin-nuxt": ">=0.4.2", 39 | "eslint-plugin-prettier": "^3.0.1", 40 | "eslint-plugin-promise": ">=4.0.1", 41 | "eslint-plugin-standard": ">=4.0.0", 42 | "eslint-plugin-vue": "^5.2.2", 43 | "nodemon": "^1.18.9", 44 | "prettier": "^1.16.4", 45 | "tailwindcss-dark-mode": "^1.1.4" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /layouts/default.vue: -------------------------------------------------------------------------------- 1 | 34 | 45 | 81 | -------------------------------------------------------------------------------- /components/ShareBtns.vue: -------------------------------------------------------------------------------- 1 | 33 | 68 | -------------------------------------------------------------------------------- /pages/index.vue: -------------------------------------------------------------------------------- 1 | 64 | 65 | 99 | 100 | 106 | -------------------------------------------------------------------------------- /nuxt.config.js: -------------------------------------------------------------------------------- 1 | import pkg from './package' 2 | 3 | export default { 4 | mode: 'universal', 5 | target: 'static', // full static mode 6 | components: true, 7 | content: { 8 | dir: 'content', 9 | // Only search in title and description 10 | fullTextSearchFields: ['title', 'description'], 11 | markdown: { 12 | remarkExternalLinks: { 13 | target: '_blank', 14 | rel: 'noopener noreferrer' 15 | }, 16 | remarkPlugins: ['remark-emoji'], 17 | prism: { 18 | theme: 'prism-themes/themes/prism-a11y-dark.css' 19 | } 20 | } 21 | }, 22 | /* 23 | ** Headers of the page 24 | */ 25 | head: { 26 | title: 'TFH - Travel to somewhere new From Home - Demo', 27 | meta: [ 28 | { charset: 'utf-8' }, 29 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 30 | { hid: 'description', name: 'description', content: pkg.description } 31 | ], 32 | link: [ 33 | { 34 | rel: 'icon', 35 | type: 'image/png', 36 | href: 37 | 'https://res.cloudinary.com/mayashavin/image/upload/w_16,h_16,c_scale/v1593071704/nuxt_demo/tfh_logo_main.png' 38 | }, 39 | { 40 | rel: 'stylesheet', 41 | href: 42 | 'https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap' 43 | } 44 | ] 45 | }, 46 | 47 | /* 48 | ** Customize the progress-bar color 49 | */ 50 | loading: { color: '#fff' }, 51 | 52 | /* 53 | ** Global CSS 54 | */ 55 | css: ['~/assets/css/tailwind.css'], 56 | 57 | /* 58 | ** Plugins to load before mounting the App 59 | */ 60 | plugins: ['~/plugins/cloudinary.js'], 61 | 62 | /* 63 | ** Nuxt.js modules 64 | */ 65 | modules: ['@nuxtjs/pwa', '@nuxt/content'], 66 | /* 67 | ** Build configuration 68 | */ 69 | build: { 70 | /* 71 | ** You can extend webpack config here 72 | */ 73 | extend(config, ctx) { 74 | // Run ESLint on save 75 | if (ctx.isDev && ctx.isClient) { 76 | config.module.rules.push({ 77 | enforce: 'pre', 78 | test: /\.(js|vue)$/, 79 | loader: 'eslint-loader', 80 | exclude: /(node_modules)/ 81 | }) 82 | } 83 | } 84 | }, 85 | buildModules: [ 86 | // Simple usage 87 | // '@nuxtjs/color-mode', 88 | ['@nuxtjs/pwa', { icon: false }] 89 | ], 90 | // colorMode: { 91 | // preference: 'system', // default value of $colorMode.preference 92 | // fallback: 'light', // fallback value if not system preference found 93 | // hid: 'nuxt-color-mode-script', 94 | // globalName: '__NUXT_COLOR_MODE__', 95 | // componentName: 'ColorScheme' 96 | // }, 97 | pwa: { 98 | meta: { 99 | name: 'TFH - Travel to somewhere new From Home - Demo', 100 | description: 'A demo page about TFH static sites with Nuxt', 101 | theme_color: '#cc0f01', 102 | ogSiteName: 'TFH - Travel to somewhere new From Home - Demo', 103 | ogTitle: 'TFH - Travel to somewhere new From Home - Demo', 104 | ogImage: { 105 | path: 106 | 'https://res.cloudinary.com/mayashavin/image/upload/w_512,h_512,c_scale,q_auto/v1593071704/nuxt_demo/tfh_logo.png', 107 | width: 512, 108 | type: 'png' 109 | }, 110 | ogHost: 'https://full-static-app.vercel.app', 111 | twitterCard: 'summary_large_images' 112 | } 113 | }, 114 | hooks: { 115 | 'content:file:beforeInsert': document => { 116 | if (document.extension === '.md') { 117 | const { text } = require('reading-time')(document.text) 118 | 119 | document.readingTime = text 120 | } 121 | } 122 | } 123 | } 124 | -------------------------------------------------------------------------------- /content/blog/posts/article-1.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Hello World 3 | description: Hello to Nuxt content demo 4 | img: nuxt_demo/DSC00856 5 | author: Maya Shavin 6 | --- 7 | ## Hello Heading 1 8 | 9 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam vestibulum morbi blandit cursus risus at. [Dictumst](https://mayashavin.com) vestibulum rhoncus est pellentesque elit ullamcorper. Turpis egestas sed tempus urna. Lacinia quis vel eros donec. Sollicitudin nibh sit amet commodo nulla facilisi nullam vehicula ipsum. Erat imperdiet sed euismod nisi porta. Amet justo donec enim diam vulputate ut pharetra. Sed ullamcorper morbi tincidunt ornare massa eget egestas. Ultrices in iaculis nunc sed. Velit laoreet id donec ultrices tincidunt arcu non sodales. Justo laoreet sit amet cursus sit. Arcu vitae elementum curabitur vitae nunc. Ornare arcu dui vivamus arcu felis bibendum ut tristique et. 10 | 11 | ```js 12 | export default { 13 | content: { 14 | markdown: { 15 | remarkPlugins: () => ['remark-emoji'] 16 | } 17 | } 18 | } 19 | ``` 20 | 21 | ## Hello Heading 2 22 | 23 | Ullamcorper sit amet risus nullam. Arcu non odio euismod lacinia at quis risus sed. Purus sit amet luctus venenatis. Ullamcorper a lacus vestibulum sed arcu non. Id neque aliquam vestibulum morbi blandit cursus risus at. In hac habitasse platea dictumst. Vitae proin sagittis nisl rhoncus mattis rhoncus. Gravida quis blandit turpis cursus in hac habitasse platea. Suspendisse potenti nullam ac tortor vitae. Mattis pellentesque id nibh tortor id. Dignissim suspendisse in est ante in nibh. Vehicula ipsum a arcu cursus. Integer vitae justo eget magna fermentum iaculis. Mauris augue neque gravida in fermentum et sollicitudin. Dignissim cras tincidunt lobortis feugiat vivamus. Nunc faucibus a pellentesque sit amet porttitor eget. Sit amet luctus venenatis lectus magna. 24 | 25 | 33 | 34 | ## Hello Heading 3 35 | 36 | Sed cras ornare arcu dui vivamus arcu felis bibendum ut. Ac odio tempor orci dapibus ultrices in. Lorem ipsum dolor sit amet consectetur adipiscing. Venenatis tellus in metus vulputate eu scelerisque felis imperdiet proin. Molestie a iaculis at erat pellentesque adipiscing commodo. Magna eget est lorem ipsum dolor. Sed vulputate odio ut enim. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet consectetur. Porttitor massa id neque aliquam vestibulum. Sed lectus vestibulum mattis ullamcorper velit sed. Amet luctus venenatis lectus magna fringilla. 37 | 38 | ## Hello Heading 4 39 | 40 | Integer quis auctor elit sed vulputate. Faucibus pulvinar elementum integer enim neque volutpat ac tincidunt. Etiam sit amet nisl purus in mollis nunc sed. Tincidunt dui ut ornare lectus sit amet est placerat in. Molestie at elementum eu facilisis sed. Pretium aenean pharetra magna ac placerat vestibulum. Orci phasellus egestas tellus rutrum. Ipsum faucibus vitae aliquet nec. Sit amet nisl suscipit adipiscing bibendum est ultricies integer. Nibh ipsum consequat nisl vel pretium lectus. Cursus in hac habitasse platea dictumst quisque sagittis. Pharetra massa massa ultricies mi quis. Pellentesque sit amet porttitor eget dolor morbi non arcu. Platea dictumst quisque sagittis purus sit amet volutpat. Commodo nulla facilisi nullam vehicula ipsum a arcu cursus vitae. Orci ac auctor augue mauris augue neque. Facilisis gravida neque convallis a. Erat velit scelerisque in dictum non consectetur a erat nam. 41 | 42 | Nunc lobortis mattis aliquam faucibus purus in massa. Vitae aliquet nec ullamcorper sit amet. Libero nunc consequat interdum varius sit amet mattis vulputate. Venenatis tellus in metus vulputate eu scelerisque felis. Consectetur adipiscing elit duis tristique sollicitudin nibh sit. Enim tortor at auctor urna nunc id cursus metus. At varius vel pharetra vel turpis nunc eget lorem. At imperdiet dui accumsan sit amet. Quam elementum pulvinar etiam non quam lacus suspendisse. Mattis pellentesque id nibh tortor. Nam libero justo laoreet sit amet cursus. Vestibulum rhoncus est pellentesque elit. Semper eget duis at tellus at. Pellentesque elit eget gravida cum sociis natoque. Elementum curabitur vitae nunc sed velit dignissim. -------------------------------------------------------------------------------- /assets/icons.js: -------------------------------------------------------------------------------- 1 | export const search = { 2 | path: 3 | 'M508.5 468.9L387.1 347.5c-2.3-2.3-5.3-3.5-8.5-3.5h-13.2c31.5-36.5 50.6-84 50.6-136C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c52 0 99.5-19.1 136-50.6v13.2c0 3.2 1.3 6.2 3.5 8.5l121.4 121.4c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17zM208 368c-88.4 0-160-71.6-160-160S119.6 48 208 48s160 71.6 160 160-71.6 160-160 160z', 4 | viewBox: '0 0 512 512' 5 | } 6 | 7 | export const ufo = { 8 | path: 9 | 'M128,296a24,24,0,1,0,24,24A23.99993,23.99993,0,0,0,128,296Zm192,40a24,24,0,1,0,24,24A23.99993,23.99993,0,0,0,320,336ZM483.47656,210.10938C474.207,128.15039,404.87891,64,320,64c-84.87695,0-154.20312,64.15039-163.47461,146.10742C62.91016,232.44141,0,273.23047,0,320c0,70.69141,143.26953,128,320,128,176.73242,0,320-57.30859,320-128C640,273.23047,577.09375,232.44336,483.47656,210.10938ZM320,112c64.80273,0,117.334,52.0957,117.334,116.36328,0,5.22461-.877,10.21289-1.55078,15.25586a250.36631,250.36631,0,0,1-231.5664,0c-.67188-5.043-1.54883-10.03125-1.54883-15.25586C202.668,164.0957,255.19727,112,320,112Zm0,288c-178.47656,0-272-59.44141-272-80,0-13.05078,37.81445-41.72656,110.98438-60.96289a47.81277,47.81277,0,0,0,23.043,27.14648,298.37591,298.37591,0,0,0,275.94532,0,47.80892,47.80892,0,0,0,23.04492-27.14648C554.18555,278.27344,592,306.94922,592,320,592,340.55859,498.47852,400,320,400ZM512,296a24,24,0,1,0,24,24A23.99993,23.99993,0,0,0,512,296Z', 10 | viewBox: '0 0 640 512' 11 | } 12 | 13 | export const atlas = { 14 | path: 15 | 'M224 320c66.28 0 120-53.73 120-120 0-66.28-53.72-120-120-120-66.27 0-120 53.72-120 120 0 66.27 53.73 120 120 120zm86.38-136h-34.59c-1.39-23.68-5.75-44.99-12.27-62.19 24.05 12.21 41.81 34.87 46.86 62.19zm-34.59 32h34.59c-5.05 27.32-22.82 49.98-46.86 62.19 6.53-17.21 10.88-38.51 12.27-62.19zM224 114.24c6.91 8.37 17.51 32.39 19.96 69.76h-39.93c2.46-37.37 13.06-61.39 19.97-69.76zM243.96 216c-2.45 37.37-13.05 61.39-19.96 69.76-6.91-8.37-17.51-32.39-19.96-69.76h39.92zm-59.49-94.19c-6.52 17.2-10.87 38.51-12.27 62.19h-34.59c5.06-27.32 22.82-49.98 46.86-62.19zM172.21 216c1.4 23.68 5.75 44.98 12.27 62.19-24.04-12.21-41.8-34.87-46.86-62.19h34.59zM448 384V16c0-8.8-7.2-16-16-16H80C35.8 0 0 35.8 0 80v352c0 44.2 35.8 80 80 80h352c8.8 0 16-7.2 16-16v-16c0-7.8-5.6-14.3-12.9-15.7-4.2-13-4.2-51.6 0-64.6 7.4-1.5 12.9-7.9 12.9-15.7zm-54 80H80c-17.7 0-32-14.3-32-32 0-17.6 14.4-32 32-32h314c-2.7 17.3-2.7 46.7 0 64zm6-112H80c-11.4 0-22.2 2.4-32 6.7V80c0-17.7 14.3-32 32-32h320v304z', 16 | viewBox: '0 0 448 512' 17 | } 18 | 19 | export const twitter = { 20 | path: 21 | 'M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z', 22 | viewBox: '0 0 512 512' 23 | } 24 | 25 | export const facebook = { 26 | path: 27 | 'M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z', 28 | viewBox: '0 0 320 512' 29 | } 30 | 31 | export const linkedin = { 32 | path: 33 | 'M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z', 34 | viewBox: '0 0 448 512' 35 | } 36 | 37 | export const dark = { 38 | path: 39 | 'M279.135 512c78.756 0 150.982-35.804 198.844-94.775 28.27-34.831-2.558-85.722-46.249-77.401-82.348 15.683-158.272-47.268-158.272-130.792 0-48.424 26.06-92.292 67.434-115.836 38.745-22.05 28.999-80.788-15.022-88.919A257.936 257.936 0 0 0 279.135 0c-141.36 0-256 114.575-256 256 0 141.36 114.576 256 256 256zm0-464c12.985 0 25.689 1.201 38.016 3.478-54.76 31.163-91.693 90.042-91.693 157.554 0 113.848 103.641 199.2 215.252 177.944C402.574 433.964 344.366 464 279.135 464c-114.875 0-208-93.125-208-208s93.125-208 208-208z', 40 | viewBox: '0 0 512 512' 41 | } 42 | 43 | export const light = { 44 | path: 45 | 'M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z', 46 | viewBox: '0 0 24 24' 47 | } 48 | 49 | export const system = { 50 | path: 51 | 'M528 0H48C21.5 0 0 21.5 0 48v288c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zm-6 336H54c-3.3 0-6-2.7-6-6V54c0-3.3 2.7-6 6-6h468c3.3 0 6 2.7 6 6v276c0 3.3-2.7 6-6 6zm-42 152c0 13.3-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h98.7l18.6-55.8c1.6-4.9 6.2-8.2 11.4-8.2h78.7c5.2 0 9.8 3.3 11.4 8.2l18.6 55.8H456c13.3 0 24 10.7 24 24z', 52 | viewBox: '0 0 576 512' 53 | } 54 | -------------------------------------------------------------------------------- /tailwind.js: -------------------------------------------------------------------------------- 1 | // /* 2 | 3 | // Tailwind - The Utility-First CSS Framework 4 | 5 | // A project by Adam Wathan (@adamwathan), Jonathan Reinink (@reinink), 6 | // David Hemphill (@davidhemphill) and Steve Schoger (@steveschoger). 7 | 8 | // Welcome to the Tailwind config file. This is where you can customize 9 | // Tailwind specifically for your project. Don't be intimidated by the 10 | // length of this file. It's really just a big JavaScript object and 11 | // we've done our very best to explain each section. 12 | 13 | // View the full documentation at https://tailwindcss.com. 14 | 15 | 16 | // |------------------------------------------------------------------------------- 17 | // | The default config 18 | // |------------------------------------------------------------------------------- 19 | // | 20 | // | This variable contains the default Tailwind config. You don't have 21 | // | to use it, but it can sometimes be helpful to have available. For 22 | // | example, you may choose to merge your custom configuration 23 | // | values with some of the Tailwind defaults. 24 | // | 25 | // */ 26 | 27 | // // let defaultConfig = require('tailwindcss/defaultConfig')() 28 | 29 | // /* 30 | // |------------------------------------------------------------------------------- 31 | // | Colors https://tailwindcss.com/docs/colors 32 | // |------------------------------------------------------------------------------- 33 | // | 34 | // | Here you can specify the colors used in your project. To get you started, 35 | // | we've provided a generous palette of great looking colors that are perfect 36 | // | for prototyping, but don't hesitate to change them for your project. You 37 | // | own these colors, nothing will break if you change everything about them. 38 | // | 39 | // | We've used literal color names ("red", "blue", etc.) for the default 40 | // | palette, but if you'd rather use functional names like "primary" and 41 | // | "secondary", or even a numeric scale like "100" and "200", go for it. 42 | // | 43 | // */ 44 | 45 | // const colors = { 46 | // transparent: 'transparent', 47 | 48 | // black: '#22292f', 49 | // 'grey-darkest': '#3d4852', 50 | // 'grey-darker': '#606f7b', 51 | // 'grey-dark': '#8795a1', 52 | // grey: '#b8c2cc', 53 | // 'grey-light': '#dae1e7', 54 | // 'grey-lighter': '#f1f5f8', 55 | // 'grey-lightest': '#f8fafc', 56 | // white: '#ffffff', 57 | 58 | // 'red-darkest': '#3b0d0c', 59 | // 'red-darker': '#621b18', 60 | // 'red-dark': '#cc1f1a', 61 | // red: '#e3342f', 62 | // 'red-light': '#ef5753', 63 | // 'red-lighter': '#f9acaa', 64 | // 'red-lightest': '#fcebea', 65 | 66 | // 'orange-darkest': '#462a16', 67 | // 'orange-darker': '#613b1f', 68 | // 'orange-dark': '#de751f', 69 | // orange: '#f6993f', 70 | // 'orange-light': '#faad63', 71 | // 'orange-lighter': '#fcd9b6', 72 | // 'orange-lightest': '#fff5eb', 73 | 74 | // 'yellow-darkest': '#453411', 75 | // 'yellow-darker': '#684f1d', 76 | // 'yellow-dark': '#f2d024', 77 | // yellow: '#ffed4a', 78 | // 'yellow-light': '#fff382', 79 | // 'yellow-lighter': '#fff9c2', 80 | // 'yellow-lightest': '#fcfbeb', 81 | 82 | // 'green-darkest': '#0f2f21', 83 | // 'green-darker': '#1a4731', 84 | // 'green-dark': '#1f9d55', 85 | // green: '#38c172', 86 | // 'green-light': '#51d88a', 87 | // 'green-lighter': '#a2f5bf', 88 | // 'green-lightest': '#e3fcec', 89 | 90 | // 'teal-darkest': '#0d3331', 91 | // 'teal-darker': '#20504f', 92 | // 'teal-dark': '#38a89d', 93 | // teal: '#4dc0b5', 94 | // 'teal-light': '#64d5ca', 95 | // 'teal-lighter': '#a0f0ed', 96 | // 'teal-lightest': '#e8fffe', 97 | 98 | // 'blue-darkest': '#12283a', 99 | // 'blue-darker': '#1c3d5a', 100 | // 'blue-dark': '#2779bd', 101 | // blue: '#3490dc', 102 | // 'blue-light': '#6cb2eb', 103 | // 'blue-lighter': '#bcdefa', 104 | // 'blue-lightest': '#eff8ff', 105 | 106 | // 'indigo-darkest': '#191e38', 107 | // 'indigo-darker': '#2f365f', 108 | // 'indigo-dark': '#5661b3', 109 | // indigo: '#6574cd', 110 | // 'indigo-light': '#7886d7', 111 | // 'indigo-lighter': '#b2b7ff', 112 | // 'indigo-lightest': '#e6e8ff', 113 | 114 | // 'purple-darkest': '#21183c', 115 | // 'purple-darker': '#382b5f', 116 | // 'purple-dark': '#794acf', 117 | // purple: '#9561e2', 118 | // 'purple-light': '#a779e9', 119 | // 'purple-lighter': '#d6bbfc', 120 | // 'purple-lightest': '#f3ebff', 121 | 122 | // 'pink-darkest': '#451225', 123 | // 'pink-darker': '#6f213f', 124 | // 'pink-dark': '#eb5286', 125 | // pink: '#f66d9b', 126 | // 'pink-light': '#fa7ea8', 127 | // 'pink-lighter': '#ffbbca', 128 | // 'pink-lightest': '#ffebef' 129 | // } 130 | 131 | // module.exports = { 132 | // /* 133 | // |----------------------------------------------------------------------------- 134 | // | Colors https://tailwindcss.com/docs/colors 135 | // |----------------------------------------------------------------------------- 136 | // | 137 | // | The color palette defined above is also assigned to the "colors" key of 138 | // | your Tailwind config. This makes it easy to access them in your CSS 139 | // | using Tailwind's config helper. For example: 140 | // | 141 | // | .error { color: config('colors.red') } 142 | // | 143 | // */ 144 | 145 | // colors: colors, 146 | 147 | // /* 148 | // |----------------------------------------------------------------------------- 149 | // | Screens https://tailwindcss.com/docs/responsive-design 150 | // |----------------------------------------------------------------------------- 151 | // | 152 | // | Screens in Tailwind are translated to CSS media queries. They define the 153 | // | responsive breakpoints for your project. By default Tailwind takes a 154 | // | "mobile first" approach, where each screen size represents a minimum 155 | // | viewport width. Feel free to have as few or as many screens as you 156 | // | want, naming them in whatever way you'd prefer for your project. 157 | // | 158 | // | Tailwind also allows for more complex screen definitions, which can be 159 | // | useful in certain situations. Be sure to see the full responsive 160 | // | documentation for a complete list of options. 161 | // | 162 | // | Class name: .{screen}:{utility} 163 | // | 164 | // */ 165 | 166 | // screens: { 167 | // sm: '576px', 168 | // md: '768px', 169 | // lg: '992px', 170 | // xl: '1200px' 171 | // }, 172 | 173 | // /* 174 | // |----------------------------------------------------------------------------- 175 | // | Fonts https://tailwindcss.com/docs/fonts 176 | // |----------------------------------------------------------------------------- 177 | // | 178 | // | Here is where you define your project's font stack, or font families. 179 | // | Keep in mind that Tailwind doesn't actually load any fonts for you. 180 | // | If you're using custom fonts you'll need to import them prior to 181 | // | defining them here. 182 | // | 183 | // | By default we provide a native font stack that works remarkably well on 184 | // | any device or OS you're using, since it just uses the default fonts 185 | // | provided by the platform. 186 | // | 187 | // | Class name: .font-{name} 188 | // | 189 | // */ 190 | 191 | // fonts: { 192 | // sans: [ 193 | // 'system-ui', 194 | // 'BlinkMacSystemFont', 195 | // '-apple-system', 196 | // 'Segoe UI', 197 | // 'Roboto', 198 | // 'Oxygen', 199 | // 'Ubuntu', 200 | // 'Cantarell', 201 | // 'Fira Sans', 202 | // 'Droid Sans', 203 | // 'Helvetica Neue', 204 | // 'sans-serif' 205 | // ], 206 | // serif: [ 207 | // 'Constantia', 208 | // 'Lucida Bright', 209 | // 'Lucidabright', 210 | // 'Lucida Serif', 211 | // 'Lucida', 212 | // 'DejaVu Serif', 213 | // 'Bitstream Vera Serif', 214 | // 'Liberation Serif', 215 | // 'Georgia', 216 | // 'serif' 217 | // ], 218 | // mono: [ 219 | // 'Menlo', 220 | // 'Monaco', 221 | // 'Consolas', 222 | // 'Liberation Mono', 223 | // 'Courier New', 224 | // 'monospace' 225 | // ] 226 | // }, 227 | 228 | // /* 229 | // |----------------------------------------------------------------------------- 230 | // | Text sizes https://tailwindcss.com/docs/text-sizing 231 | // |----------------------------------------------------------------------------- 232 | // | 233 | // | Here is where you define your text sizes. Name these in whatever way 234 | // | makes the most sense to you. We use size names by default, but 235 | // | you're welcome to use a numeric scale or even something else 236 | // | entirely. 237 | // | 238 | // | By default Tailwind uses the "rem" unit type for most measurements. 239 | // | This allows you to set a root font size which all other sizes are 240 | // | then based on. That said, you are free to use whatever units you 241 | // | prefer, be it rems, ems, pixels or other. 242 | // | 243 | // | Class name: .text-{size} 244 | // | 245 | // */ 246 | 247 | // textSizes: { 248 | // xs: '.75rem', // 12px 249 | // sm: '.875rem', // 14px 250 | // base: '1rem', // 16px 251 | // lg: '1.125rem', // 18px 252 | // xl: '1.25rem', // 20px 253 | // '2xl': '1.5rem', // 24px 254 | // '3xl': '1.875rem', // 30px 255 | // '4xl': '2.25rem', // 36px 256 | // '5xl': '3rem' // 48px 257 | // }, 258 | 259 | // /* 260 | // |----------------------------------------------------------------------------- 261 | // | Font weights https://tailwindcss.com/docs/font-weight 262 | // |----------------------------------------------------------------------------- 263 | // | 264 | // | Here is where you define your font weights. We've provided a list of 265 | // | common font weight names with their respective numeric scale values 266 | // | to get you started. It's unlikely that your project will require 267 | // | all of these, so we recommend removing those you don't need. 268 | // | 269 | // | Class name: .font-{weight} 270 | // | 271 | // */ 272 | 273 | // fontWeights: { 274 | // hairline: 100, 275 | // thin: 200, 276 | // light: 300, 277 | // normal: 400, 278 | // medium: 500, 279 | // semibold: 600, 280 | // bold: 700, 281 | // extrabold: 800, 282 | // black: 900 283 | // }, 284 | 285 | // /* 286 | // |----------------------------------------------------------------------------- 287 | // | Leading (line height) https://tailwindcss.com/docs/line-height 288 | // |----------------------------------------------------------------------------- 289 | // | 290 | // | Here is where you define your line height values, or as we call 291 | // | them in Tailwind, leadings. 292 | // | 293 | // | Class name: .leading-{size} 294 | // | 295 | // */ 296 | 297 | // leading: { 298 | // none: 1, 299 | // tight: 1.25, 300 | // normal: 1.5, 301 | // loose: 2 302 | // }, 303 | 304 | // /* 305 | // |----------------------------------------------------------------------------- 306 | // | Tracking (letter spacing) https://tailwindcss.com/docs/letter-spacing 307 | // |----------------------------------------------------------------------------- 308 | // | 309 | // | Here is where you define your letter spacing values, or as we call 310 | // | them in Tailwind, tracking. 311 | // | 312 | // | Class name: .tracking-{size} 313 | // | 314 | // */ 315 | 316 | // tracking: { 317 | // tight: '-0.05em', 318 | // normal: '0', 319 | // wide: '0.05em' 320 | // }, 321 | 322 | // /* 323 | // |----------------------------------------------------------------------------- 324 | // | Text colors https://tailwindcss.com/docs/text-color 325 | // |----------------------------------------------------------------------------- 326 | // | 327 | // | Here is where you define your text colors. By default these use the 328 | // | color palette we defined above, however you're welcome to set these 329 | // | independently if that makes sense for your project. 330 | // | 331 | // | Class name: .text-{color} 332 | // | 333 | // */ 334 | 335 | // textColors: colors, 336 | 337 | // /* 338 | // |----------------------------------------------------------------------------- 339 | // | Background colors https://tailwindcss.com/docs/background-color 340 | // |----------------------------------------------------------------------------- 341 | // | 342 | // | Here is where you define your background colors. By default these use 343 | // | the color palette we defined above, however you're welcome to set 344 | // | these independently if that makes sense for your project. 345 | // | 346 | // | Class name: .bg-{color} 347 | // | 348 | // */ 349 | 350 | // backgroundColors: colors, 351 | 352 | // /* 353 | // |----------------------------------------------------------------------------- 354 | // | Background sizes https://tailwindcss.com/docs/background-size 355 | // |----------------------------------------------------------------------------- 356 | // | 357 | // | Here is where you define your background sizes. We provide some common 358 | // | values that are useful in most projects, but feel free to add other sizes 359 | // | that are specific to your project here as well. 360 | // | 361 | // | Class name: .bg-{size} 362 | // | 363 | // */ 364 | 365 | // backgroundSize: { 366 | // auto: 'auto', 367 | // cover: 'cover', 368 | // contain: 'contain' 369 | // }, 370 | 371 | // /* 372 | // |----------------------------------------------------------------------------- 373 | // | Border widths https://tailwindcss.com/docs/border-width 374 | // |----------------------------------------------------------------------------- 375 | // | 376 | // | Here is where you define your border widths. Take note that border 377 | // | widths require a special "default" value set as well. This is the 378 | // | width that will be used when you do not specify a border width. 379 | // | 380 | // | Class name: .border{-side?}{-width?} 381 | // | 382 | // */ 383 | 384 | // borderWidths: { 385 | // default: '1px', 386 | // '0': '0', 387 | // '2': '2px', 388 | // '4': '4px', 389 | // '8': '8px' 390 | // }, 391 | 392 | // /* 393 | // |----------------------------------------------------------------------------- 394 | // | Border colors https://tailwindcss.com/docs/border-color 395 | // |----------------------------------------------------------------------------- 396 | // | 397 | // | Here is where you define your border colors. By default these use the 398 | // | color palette we defined above, however you're welcome to set these 399 | // | independently if that makes sense for your project. 400 | // | 401 | // | Take note that border colors require a special "default" value set 402 | // | as well. This is the color that will be used when you do not 403 | // | specify a border color. 404 | // | 405 | // | Class name: .border-{color} 406 | // | 407 | // */ 408 | 409 | // borderColors: global.Object.assign({ default: colors['grey-light'] }, colors), 410 | 411 | // /* 412 | // |----------------------------------------------------------------------------- 413 | // | Border radius https://tailwindcss.com/docs/border-radius 414 | // |----------------------------------------------------------------------------- 415 | // | 416 | // | Here is where you define your border radius values. If a `default` radius 417 | // | is provided, it will be made available as the non-suffixed `.rounded` 418 | // | utility. 419 | // | 420 | // | If your scale includes a `0` value to reset already rounded corners, it's 421 | // | a good idea to put it first so other values are able to override it. 422 | // | 423 | // | Class name: .rounded{-side?}{-size?} 424 | // | 425 | // */ 426 | 427 | // borderRadius: { 428 | // none: '0', 429 | // sm: '.125rem', 430 | // default: '.25rem', 431 | // lg: '.5rem', 432 | // full: '9999px' 433 | // }, 434 | 435 | // /* 436 | // |----------------------------------------------------------------------------- 437 | // | Width https://tailwindcss.com/docs/width 438 | // |----------------------------------------------------------------------------- 439 | // | 440 | // | Here is where you define your width utility sizes. These can be 441 | // | percentage based, pixels, rems, or any other units. By default 442 | // | we provide a sensible rem based numeric scale, a percentage 443 | // | based fraction scale, plus some other common use-cases. You 444 | // | can, of course, modify these values as needed. 445 | // | 446 | // | 447 | // | It's also worth mentioning that Tailwind automatically escapes 448 | // | invalid CSS class name characters, which allows you to have 449 | // | awesome classes like .w-2/3. 450 | // | 451 | // | Class name: .w-{size} 452 | // | 453 | // */ 454 | 455 | // width: { 456 | // auto: 'auto', 457 | // px: '1px', 458 | // '1': '0.25rem', 459 | // '2': '0.5rem', 460 | // '3': '0.75rem', 461 | // '4': '1rem', 462 | // '5': '1.25rem', 463 | // '6': '1.5rem', 464 | // '8': '2rem', 465 | // '10': '2.5rem', 466 | // '12': '3rem', 467 | // '16': '4rem', 468 | // '24': '6rem', 469 | // '32': '8rem', 470 | // '48': '12rem', 471 | // '64': '16rem', 472 | // '1/2': '50%', 473 | // '1/3': '33.33333%', 474 | // '2/3': '66.66667%', 475 | // '1/4': '25%', 476 | // '3/4': '75%', 477 | // '1/5': '20%', 478 | // '2/5': '40%', 479 | // '3/5': '60%', 480 | // '4/5': '80%', 481 | // '1/6': '16.66667%', 482 | // '5/6': '83.33333%', 483 | // full: '100%', 484 | // screen: '100vw' 485 | // }, 486 | 487 | // /* 488 | // |----------------------------------------------------------------------------- 489 | // | Height https://tailwindcss.com/docs/height 490 | // |----------------------------------------------------------------------------- 491 | // | 492 | // | Here is where you define your height utility sizes. These can be 493 | // | percentage based, pixels, rems, or any other units. By default 494 | // | we provide a sensible rem based numeric scale plus some other 495 | // | common use-cases. You can, of course, modify these values as 496 | // | needed. 497 | // | 498 | // | Class name: .h-{size} 499 | // | 500 | // */ 501 | 502 | // height: { 503 | // auto: 'auto', 504 | // px: '1px', 505 | // '1': '0.25rem', 506 | // '2': '0.5rem', 507 | // '3': '0.75rem', 508 | // '4': '1rem', 509 | // '5': '1.25rem', 510 | // '6': '1.5rem', 511 | // '8': '2rem', 512 | // '10': '2.5rem', 513 | // '12': '3rem', 514 | // '16': '4rem', 515 | // '24': '6rem', 516 | // '32': '8rem', 517 | // '48': '12rem', 518 | // '64': '16rem', 519 | // full: '100%', 520 | // screen: '100vh' 521 | // }, 522 | 523 | // /* 524 | // |----------------------------------------------------------------------------- 525 | // | Minimum width https://tailwindcss.com/docs/min-width 526 | // |----------------------------------------------------------------------------- 527 | // | 528 | // | Here is where you define your minimum width utility sizes. These can 529 | // | be percentage based, pixels, rems, or any other units. We provide a 530 | // | couple common use-cases by default. You can, of course, modify 531 | // | these values as needed. 532 | // | 533 | // | Class name: .min-w-{size} 534 | // | 535 | // */ 536 | 537 | // minWidth: { 538 | // '0': '0', 539 | // full: '100%' 540 | // }, 541 | 542 | // /* 543 | // |----------------------------------------------------------------------------- 544 | // | Minimum height https://tailwindcss.com/docs/min-height 545 | // |----------------------------------------------------------------------------- 546 | // | 547 | // | Here is where you define your minimum height utility sizes. These can 548 | // | be percentage based, pixels, rems, or any other units. We provide a 549 | // | few common use-cases by default. You can, of course, modify these 550 | // | values as needed. 551 | // | 552 | // | Class name: .min-h-{size} 553 | // | 554 | // */ 555 | 556 | // minHeight: { 557 | // '0': '0', 558 | // full: '100%', 559 | // screen: '100vh' 560 | // }, 561 | 562 | // /* 563 | // |----------------------------------------------------------------------------- 564 | // | Maximum width https://tailwindcss.com/docs/max-width 565 | // |----------------------------------------------------------------------------- 566 | // | 567 | // | Here is where you define your maximum width utility sizes. These can 568 | // | be percentage based, pixels, rems, or any other units. By default 569 | // | we provide a sensible rem based scale and a "full width" size, 570 | // | which is basically a reset utility. You can, of course, 571 | // | modify these values as needed. 572 | // | 573 | // | Class name: .max-w-{size} 574 | // | 575 | // */ 576 | 577 | // maxWidth: { 578 | // xs: '20rem', 579 | // sm: '30rem', 580 | // md: '40rem', 581 | // lg: '50rem', 582 | // xl: '60rem', 583 | // '2xl': '70rem', 584 | // '3xl': '80rem', 585 | // '4xl': '90rem', 586 | // '5xl': '100rem', 587 | // full: '100%' 588 | // }, 589 | 590 | // /* 591 | // |----------------------------------------------------------------------------- 592 | // | Maximum height https://tailwindcss.com/docs/max-height 593 | // |----------------------------------------------------------------------------- 594 | // | 595 | // | Here is where you define your maximum height utility sizes. These can 596 | // | be percentage based, pixels, rems, or any other units. We provide a 597 | // | couple common use-cases by default. You can, of course, modify 598 | // | these values as needed. 599 | // | 600 | // | Class name: .max-h-{size} 601 | // | 602 | // */ 603 | 604 | // maxHeight: { 605 | // full: '100%', 606 | // screen: '100vh' 607 | // }, 608 | 609 | // /* 610 | // |----------------------------------------------------------------------------- 611 | // | Padding https://tailwindcss.com/docs/padding 612 | // |----------------------------------------------------------------------------- 613 | // | 614 | // | Here is where you define your padding utility sizes. These can be 615 | // | percentage based, pixels, rems, or any other units. By default we 616 | // | provide a sensible rem based numeric scale plus a couple other 617 | // | common use-cases like "1px". You can, of course, modify these 618 | // | values as needed. 619 | // | 620 | // | Class name: .p{side?}-{size} 621 | // | 622 | // */ 623 | 624 | // padding: { 625 | // px: '1px', 626 | // '0': '0', 627 | // '1': '0.25rem', 628 | // '2': '0.5rem', 629 | // '3': '0.75rem', 630 | // '4': '1rem', 631 | // '5': '1.25rem', 632 | // '6': '1.5rem', 633 | // '8': '2rem', 634 | // '10': '2.5rem', 635 | // '12': '3rem', 636 | // '16': '4rem', 637 | // '20': '5rem', 638 | // '24': '6rem', 639 | // '32': '8rem' 640 | // }, 641 | 642 | // /* 643 | // |----------------------------------------------------------------------------- 644 | // | Margin https://tailwindcss.com/docs/margin 645 | // |----------------------------------------------------------------------------- 646 | // | 647 | // | Here is where you define your margin utility sizes. These can be 648 | // | percentage based, pixels, rems, or any other units. By default we 649 | // | provide a sensible rem based numeric scale plus a couple other 650 | // | common use-cases like "1px". You can, of course, modify these 651 | // | values as needed. 652 | // | 653 | // | Class name: .m{side?}-{size} 654 | // | 655 | // */ 656 | 657 | // margin: { 658 | // auto: 'auto', 659 | // px: '1px', 660 | // '0': '0', 661 | // '1': '0.25rem', 662 | // '2': '0.5rem', 663 | // '3': '0.75rem', 664 | // '4': '1rem', 665 | // '5': '1.25rem', 666 | // '6': '1.5rem', 667 | // '8': '2rem', 668 | // '10': '2.5rem', 669 | // '12': '3rem', 670 | // '16': '4rem', 671 | // '20': '5rem', 672 | // '24': '6rem', 673 | // '32': '8rem' 674 | // }, 675 | 676 | // /* 677 | // |----------------------------------------------------------------------------- 678 | // | Negative margin https://tailwindcss.com/docs/negative-margin 679 | // |----------------------------------------------------------------------------- 680 | // | 681 | // | Here is where you define your negative margin utility sizes. These can 682 | // | be percentage based, pixels, rems, or any other units. By default we 683 | // | provide matching values to the padding scale since these utilities 684 | // | generally get used together. You can, of course, modify these 685 | // | values as needed. 686 | // | 687 | // | Class name: .-m{side?}-{size} 688 | // | 689 | // */ 690 | 691 | // negativeMargin: { 692 | // px: '1px', 693 | // '0': '0', 694 | // '1': '0.25rem', 695 | // '2': '0.5rem', 696 | // '3': '0.75rem', 697 | // '4': '1rem', 698 | // '5': '1.25rem', 699 | // '6': '1.5rem', 700 | // '8': '2rem', 701 | // '10': '2.5rem', 702 | // '12': '3rem', 703 | // '16': '4rem', 704 | // '20': '5rem', 705 | // '24': '6rem', 706 | // '32': '8rem' 707 | // }, 708 | 709 | // /* 710 | // |----------------------------------------------------------------------------- 711 | // | Shadows https://tailwindcss.com/docs/shadows 712 | // |----------------------------------------------------------------------------- 713 | // | 714 | // | Here is where you define your shadow utilities. As you can see from 715 | // | the defaults we provide, it's possible to apply multiple shadows 716 | // | per utility using comma separation. 717 | // | 718 | // | If a `default` shadow is provided, it will be made available as the non- 719 | // | suffixed `.shadow` utility. 720 | // | 721 | // | Class name: .shadow-{size?} 722 | // | 723 | // */ 724 | 725 | // shadows: { 726 | // default: '0 2px 4px 0 rgba(0,0,0,0.10)', 727 | // md: '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)', 728 | // lg: '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)', 729 | // inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)', 730 | // outline: '0 0 0 3px rgba(52,144,220,0.5)', 731 | // none: 'none' 732 | // }, 733 | 734 | // /* 735 | // |----------------------------------------------------------------------------- 736 | // | Z-index https://tailwindcss.com/docs/z-index 737 | // |----------------------------------------------------------------------------- 738 | // | 739 | // | Here is where you define your z-index utility values. By default we 740 | // | provide a sensible numeric scale. You can, of course, modify these 741 | // | values as needed. 742 | // | 743 | // | Class name: .z-{index} 744 | // | 745 | // */ 746 | 747 | // zIndex: { 748 | // auto: 'auto', 749 | // '0': 0, 750 | // '10': 10, 751 | // '20': 20, 752 | // '30': 30, 753 | // '40': 40, 754 | // '50': 50 755 | // }, 756 | 757 | // /* 758 | // |----------------------------------------------------------------------------- 759 | // | Opacity https://tailwindcss.com/docs/opacity 760 | // |----------------------------------------------------------------------------- 761 | // | 762 | // | Here is where you define your opacity utility values. By default we 763 | // | provide a sensible numeric scale. You can, of course, modify these 764 | // | values as needed. 765 | // | 766 | // | Class name: .opacity-{name} 767 | // | 768 | // */ 769 | 770 | // opacity: { 771 | // '0': '0', 772 | // '25': '.25', 773 | // '50': '.5', 774 | // '75': '.75', 775 | // '100': '1' 776 | // }, 777 | 778 | // /* 779 | // |----------------------------------------------------------------------------- 780 | // | SVG fill https://tailwindcss.com/docs/svg 781 | // |----------------------------------------------------------------------------- 782 | // | 783 | // | Here is where you define your SVG fill colors. By default we just provide 784 | // | `fill-current` which sets the fill to the current text color. This lets you 785 | // | specify a fill color using existing text color utilities and helps keep the 786 | // | generated CSS file size down. 787 | // | 788 | // | Class name: .fill-{name} 789 | // | 790 | // */ 791 | 792 | // svgFill: { 793 | // current: 'currentColor' 794 | // }, 795 | 796 | // /* 797 | // |----------------------------------------------------------------------------- 798 | // | SVG stroke https://tailwindcss.com/docs/svg 799 | // |----------------------------------------------------------------------------- 800 | // | 801 | // | Here is where you define your SVG stroke colors. By default we just provide 802 | // | `stroke-current` which sets the stroke to the current text color. This lets 803 | // | you specify a stroke color using existing text color utilities and helps 804 | // | keep the generated CSS file size down. 805 | // | 806 | // | Class name: .stroke-{name} 807 | // | 808 | // */ 809 | 810 | // svgStroke: { 811 | // current: 'currentColor' 812 | // }, 813 | 814 | // /* 815 | // |----------------------------------------------------------------------------- 816 | // | Modules https://tailwindcss.com/docs/configuration#modules 817 | // |----------------------------------------------------------------------------- 818 | // | 819 | // | Here is where you control which modules are generated and what variants are 820 | // | generated for each of those modules. 821 | // | 822 | // | Currently supported variants: 823 | // | - responsive 824 | // | - hover 825 | // | - focus 826 | // | - active 827 | // | - group-hover 828 | // | 829 | // | To disable a module completely, use `false` instead of an array. 830 | // | 831 | // */ 832 | 833 | // modules: { 834 | // appearance: ['responsive'], 835 | // backgroundAttachment: ['responsive'], 836 | // backgroundColors: ['responsive', 'hover', 'focus'], 837 | // backgroundPosition: ['responsive'], 838 | // backgroundRepeat: ['responsive'], 839 | // backgroundSize: ['responsive'], 840 | // borderCollapse: [], 841 | // borderColors: ['responsive', 'hover', 'focus'], 842 | // borderRadius: ['responsive'], 843 | // borderStyle: ['responsive'], 844 | // borderWidths: ['responsive'], 845 | // cursor: ['responsive'], 846 | // display: ['responsive'], 847 | // flexbox: ['responsive'], 848 | // float: ['responsive'], 849 | // fonts: ['responsive'], 850 | // fontWeights: ['responsive', 'hover', 'focus'], 851 | // inset: ['responsive', 'hover', 'focus'], 852 | // height: ['responsive'], 853 | // leading: ['responsive'], 854 | // lists: ['responsive'], 855 | // margin: ['responsive'], 856 | // maxHeight: ['responsive'], 857 | // maxWidth: ['responsive'], 858 | // minHeight: ['responsive'], 859 | // minWidth: ['responsive'], 860 | // negativeMargin: ['responsive'], 861 | // opacity: ['responsive'], 862 | // outline: ['focus'], 863 | // overflow: ['responsive'], 864 | // padding: ['responsive'], 865 | // pointerEvents: ['responsive'], 866 | // position: ['responsive'], 867 | // resize: ['responsive'], 868 | // shadows: ['responsive', 'hover', 'focus'], 869 | // svgFill: [], 870 | // svgStroke: [], 871 | // textAlign: ['responsive'], 872 | // textColors: ['responsive', 'hover', 'focus'], 873 | // textSizes: ['responsive'], 874 | // textStyle: ['responsive', 'hover', 'focus'], 875 | // tracking: ['responsive'], 876 | // userSelect: ['responsive'], 877 | // verticalAlign: ['responsive'], 878 | // visibility: ['responsive'], 879 | // whitespace: ['responsive'], 880 | // width: ['responsive'], 881 | // zIndex: ['responsive'] 882 | // }, 883 | 884 | // /* 885 | // |----------------------------------------------------------------------------- 886 | // | Plugins https://tailwindcss.com/docs/plugins 887 | // |----------------------------------------------------------------------------- 888 | // | 889 | // | Here is where you can register any plugins you'd like to use in your 890 | // | project. Tailwind's built-in `container` plugin is enabled by default to 891 | // | give you a Bootstrap-style responsive container component out of the box. 892 | // | 893 | // | Be sure to view the complete plugin documentation to learn more about how 894 | // | the plugin system works. 895 | // | 896 | // */ 897 | 898 | // plugins: [ 899 | // require('tailwindcss/plugins/container')({ 900 | // // center: true, 901 | // // padding: '1rem', 902 | // }) 903 | // ], 904 | 905 | // /* 906 | // |----------------------------------------------------------------------------- 907 | // | Advanced Options https://tailwindcss.com/docs/configuration#options 908 | // |----------------------------------------------------------------------------- 909 | // | 910 | // | Here is where you can tweak advanced configuration options. We recommend 911 | // | leaving these options alone unless you absolutely need to change them. 912 | // | 913 | // */ 914 | 915 | // options: { 916 | // prefix: '', 917 | // important: false, 918 | // separator: ':' 919 | // } 920 | // } 921 | --------------------------------------------------------------------------------