├── .editorconfig ├── .gitignore ├── .nowignore ├── .yarnclean ├── README.md ├── assets ├── Inter-Regular-subset.woff ├── Inter-Regular-subset.woff2 ├── README.md ├── css │ └── tailwind.css ├── inter-subset.css └── nuxtguide-logo.svg ├── components ├── ArticleCard.vue ├── ArticleCardBody.vue ├── ArticleGrid.vue ├── ImageSrcSet.vue ├── Logo.vue ├── Pagination.vue ├── README.md ├── RelatedItems.vue └── SignIn.vue ├── layouts ├── README.md └── default.vue ├── middleware ├── README.md └── router-auth.js ├── now.json ├── nuxt.config.js ├── package.json ├── pages ├── README.md ├── _type │ ├── _slug.vue │ └── index.vue ├── createaccount.vue ├── index.vue ├── login.vue ├── page │ └── _page.vue ├── pages │ └── _slug.vue └── tagged │ └── _id.vue ├── plugins ├── README.md ├── filters.js ├── flip.js ├── lazy.js ├── menu.js ├── suggest.js └── timeago.js ├── static ├── README.md ├── _headers ├── _redirects ├── favicon.ico └── fonts │ ├── Inter-Black.woff │ ├── Inter-Black.woff2 │ ├── Inter-BlackItalic.woff │ ├── Inter-BlackItalic.woff2 │ ├── Inter-Bold.woff │ ├── Inter-Bold.woff2 │ ├── Inter-BoldItalic.woff │ ├── Inter-BoldItalic.woff2 │ ├── Inter-ExtraBold.woff │ ├── Inter-ExtraBold.woff2 │ ├── Inter-ExtraBoldItalic.woff │ ├── Inter-ExtraBoldItalic.woff2 │ ├── Inter-ExtraLight-BETA.woff │ ├── Inter-ExtraLight-BETA.woff2 │ ├── Inter-ExtraLightItalic-BETA.woff │ ├── Inter-ExtraLightItalic-BETA.woff2 │ ├── Inter-Italic.woff │ ├── Inter-Italic.woff2 │ ├── Inter-Light-BETA.woff │ ├── Inter-Light-BETA.woff2 │ ├── Inter-LightItalic-BETA.woff │ ├── Inter-LightItalic-BETA.woff2 │ ├── Inter-Medium.woff │ ├── Inter-Medium.woff2 │ ├── Inter-MediumItalic.woff │ ├── Inter-MediumItalic.woff2 │ ├── Inter-Regular.css │ ├── Inter-Regular.woff │ ├── Inter-Regular.woff2 │ ├── Inter-SemiBold.woff │ ├── Inter-SemiBold.woff2 │ ├── Inter-SemiBoldItalic.woff │ ├── Inter-SemiBoldItalic.woff2 │ ├── Inter-Thin-BETA.woff │ ├── Inter-Thin-BETA.woff2 │ ├── Inter-ThinItalic-BETA.woff │ ├── Inter-ThinItalic-BETA.woff2 │ └── inter.css ├── store ├── README.md └── index.js ├── tailwind.config.js └── yarn.lock /.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 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | node_modules 3 | 4 | # logs 5 | npm-debug.log 6 | 7 | # Nuxt build 8 | .nuxt 9 | 10 | # Nuxt generate 11 | dist 12 | 13 | # IDE 14 | .idea 15 | -------------------------------------------------------------------------------- /.nowignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | node_modules 3 | 4 | # logs 5 | npm-debug.log 6 | 7 | # Nuxt build 8 | .nuxt 9 | 10 | # Nuxt generate 11 | dist 12 | 13 | # IDE 14 | .idea 15 | -------------------------------------------------------------------------------- /.yarnclean: -------------------------------------------------------------------------------- 1 | *.yaml 2 | *.md 3 | *.lock 4 | LICENSE 5 | CHANGELOG 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # nuxtguide 2 | 3 | This site is a personal collection of my favorite resources for Nuxt.js. I use Vue & Nuxt when developing websites and save a lot of links to cool libraries and tutorials. 4 | 5 | The code for the site is open source and available on Github. This site wouldn't exist without the hard work of all of the people who maintain open source projects like Vue.js. 6 | 7 | - Nuxt Guide is built using Nuxt.js 8 | - Prismic.io as its CMS 9 | - TailwindCSS is used for layout & design, wysiwyg.css is used for HTML content areas. 10 | - The site is hosted on Zeit Now. 11 | - The Inter type family is used and the regular width typeface is subset for faster loading. 12 | - Visit jake101.com to learn more about me. 13 | 14 | ## Build Setup 15 | 16 | ``` bash 17 | # install dependencies 18 | $ yarn install 19 | 20 | # serve with hot reload at localhost:3000 21 | $ yarn run dev 22 | 23 | # build for production and launch server 24 | $ yarn run build 25 | $ yarn start 26 | 27 | # generate static project 28 | $ yarn run generate 29 | ``` 30 | 31 | For detailed explanation on how things work, checkout [Nuxt.js docs](https://nuxtjs.org). 32 | -------------------------------------------------------------------------------- /assets/Inter-Regular-subset.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/nuxtguide/6d007e075822587924dc90b1456c62832007efb0/assets/Inter-Regular-subset.woff -------------------------------------------------------------------------------- /assets/Inter-Regular-subset.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/nuxtguide/6d007e075822587924dc90b1456c62832007efb0/assets/Inter-Regular-subset.woff2 -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 base; 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 | /** 24 | * Here you would add any of your custom component classes; stuff that you'd 25 | * want loaded *before* the utilities so that the utilities could still 26 | * override them. 27 | * 28 | * Example: 29 | * 30 | * .btn { ... } 31 | * .form-input { ... } 32 | * 33 | * Or if using a preprocessor or `postcss-import`: 34 | * 35 | * @import "components/buttons"; 36 | * @import "components/forms"; 37 | */ 38 | 39 | /** 40 | * This injects all of Tailwind's utility classes, generated based on your 41 | * config file. 42 | * 43 | * If using `postcss-import`, use this import instead: 44 | * 45 | * @import "tailwindcss/utilities"; 46 | */ 47 | @tailwind utilities; 48 | 49 | .w-max-content {width:max-content;overflow-x:auto;scrollbar-width: none;} 50 | 51 | .sidemenu .bm-burger-button { 52 | position: fixed; 53 | width: 36px; 54 | height: 30px; 55 | left: 12px; 56 | top: 12px; 57 | cursor: pointer; 58 | } 59 | .sidemenu .bm-burger-bars { 60 | background-color: #D2DEDB; 61 | } 62 | .line-style { 63 | position: absolute; 64 | height: 20%; 65 | left: 0; 66 | right: 0; 67 | } 68 | .cross-style { 69 | position: absolute; 70 | top: 12px; 71 | right: 2px; 72 | cursor: pointer; 73 | } 74 | .sidemenu .bm-cross { 75 | background: #4F423A; 76 | } 77 | .sidemenu .bm-cross-button { 78 | height: 36px; 79 | width: 36px; 80 | } 81 | .sidemenu .bm-menu { 82 | height: 100%; /* 100% Full-height */ 83 | width: 0; /* 0 width - change this with JavaScript */ 84 | position: fixed; /* Stay in place */ 85 | z-index: 1000; /* Stay on top */ 86 | top: 0; 87 | left: 0; 88 | background-color: #F3EFE7; /* Black*/ 89 | overflow-x: hidden; /* Disable horizontal scroll */ 90 | padding-top: 60px; /* Place content 60px from the top */ 91 | transition: 0.5s; /*0.5 second transition effect to slide in the sidenav*/ 92 | } 93 | 94 | .bm-overlay { 95 | background: rgba(0, 0, 0, 0) ; 96 | } 97 | body {background:#E2E8E7 !important;} 98 | 99 | .bm-item-list { 100 | margin-left: 10%; 101 | font-size: 20px; 102 | } 103 | .bm-item-list > * { 104 | display: flex; 105 | text-decoration: none; 106 | padding: 0.7em; 107 | } 108 | .bm-item-list > * > span { 109 | margin-left: 10px; 110 | font-weight: 700; 111 | } 112 | .disable-scrollbars::-webkit-scrollbar { 113 | width: 0px; 114 | height:0px; 115 | background: transparent; /* Chrome/Safari/Webkit */ 116 | } 117 | 118 | .disable-scrollbars { 119 | scrollbar-width: none; /* Firefox */ 120 | 121 | -ms-overflow-style: none; /* IE 10+ */ 122 | } 123 | 124 | .related-item { 125 | scroll-snap-align: start; 126 | 127 | } 128 | /* purgecss start ignore */ 129 | 130 | .gridfade-enter { 131 | opacity: 0; 132 | } 133 | 134 | .gridfade-enter-active { 135 | animation-name: animateIn; 136 | animation-duration: 150ms; 137 | animation-delay: calc(var(--animation-order) * 100ms); 138 | animation-fill-mode: both; 139 | transform: translateZ(0);will-change: transform; 140 | 141 | animation-timing-function: cubic-bezier(0.42,0,0.58,1); 142 | } 143 | 144 | .gridfade-leave { 145 | 146 | } 147 | 148 | .gridfade-leave-active { 149 | animation-name: animateOut; 150 | animation-duration: 150ms; 151 | animation-delay: calc(var(--animation-order) * 100ms); 152 | animation-fill-mode: both; 153 | animation-timing-function: cubic-bezier(0.42,0,0.58,1); 154 | position: absolute; 155 | transform: translateZ(0);will-change: transform; 156 | } 157 | 158 | .slugfade-enter .in { 159 | opacity: 0; 160 | } 161 | 162 | .slugfade-enter-active .in { 163 | animation-name: slugIn; 164 | animation-duration: 250ms; 165 | animation-delay: calc(var(--animation-order) * 100ms); 166 | animation-fill-mode: both; 167 | animation-timing-function: cubic-bezier(0.42,0,0.58,1); 168 | transform: translateZ(0);will-change: transform; 169 | 170 | } 171 | 172 | .slugfade-leave .in { 173 | 174 | } 175 | 176 | .slugfade-leave-active .in { 177 | animation-name: slugOut; 178 | animation-duration: 250ms; 179 | animation-delay: calc(var(--animation-order) * 100ms); 180 | animation-fill-mode: both; 181 | animation-timing-function: cubic-bezier(0.42,0,0.58,1); 182 | position: absolute; 183 | transform: translateZ(0);will-change: transform; 184 | 185 | } 186 | 187 | 188 | @keyframes slugIn { 189 | 0% { 190 | opacity: 0; 191 | transform: scale(.9) translateY(-8px); 192 | } 193 | 194 | 100% { 195 | opacity: 1; 196 | transform: scale(1) translateY(0); 197 | 198 | } 199 | } 200 | @keyframes slugOut { 201 | 0% { 202 | opacity: 1; 203 | transform: scale(1) translateY(0); 204 | } 205 | 206 | 100% { 207 | opacity: 1; 208 | transform: scale(.9) translateY(-8px); 209 | 210 | } 211 | } 212 | 213 | @keyframes animateIn { 214 | 0% { 215 | opacity: 0; 216 | transform: translateY(-8px); 217 | } 218 | 219 | 100% { 220 | opacity: 1; 221 | transform: translateY(0); 222 | 223 | } 224 | } 225 | @keyframes animateOut { 226 | 0% { 227 | opacity: 1; 228 | transform: translateY(0); 229 | } 230 | 231 | 100% { 232 | opacity: 1; 233 | transform: translateY(-8px); 234 | 235 | } 236 | } 237 | .bm-burger-button {z-index:51;} 238 | /* purgecss end ignore */ 239 | 240 | /** 241 | * Here you would add any custom utilities you need that don't come out of the 242 | * box with Tailwind. 243 | * 244 | * Example : 245 | * 246 | * .bg-pattern-graph-paper { ... } 247 | * .skew-45 { ... } 248 | * 249 | * Or if using a preprocessor or `postcss-import`: 250 | * 251 | * @import "utilities/background-patterns"; 252 | * @import "utilities/skew-transforms"; 253 | */ 254 | -------------------------------------------------------------------------------- /assets/inter-subset.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Inter"; 3 | src: url(Inter-Regular-subset.woff2) format("woff2"), url(Inter-Regular-subset.woff) format("woff"); 4 | unicode-range: U+0-FF,U+131,U+152,U+153,U+2BB,U+2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; 5 | } -------------------------------------------------------------------------------- /assets/nuxtguide-logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/ArticleCard.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /components/ArticleCardBody.vue: -------------------------------------------------------------------------------- 1 | 47 | 68 | // 69 | // 70 | // if (x) { 71 | // let data = {views: x[0].views,likes: x[0].likes} 72 | // return data 73 | // } -------------------------------------------------------------------------------- /components/ArticleGrid.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 96 | -------------------------------------------------------------------------------- /components/ImageSrcSet.vue: -------------------------------------------------------------------------------- 1 | 13 | 46 | -------------------------------------------------------------------------------- /components/Logo.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 80 | -------------------------------------------------------------------------------- /components/Pagination.vue: -------------------------------------------------------------------------------- 1 | < 11 | < -------------------------------------------------------------------------------- /components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | The components directory contains your Vue.js Components. 6 | 7 | _Nuxt.js doesn't supercharge these components._ 8 | -------------------------------------------------------------------------------- /components/RelatedItems.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 36 | -------------------------------------------------------------------------------- /components/SignIn.vue: -------------------------------------------------------------------------------- 1 | 8 | 47 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /layouts/default.vue: -------------------------------------------------------------------------------- 1 | 74 | 181 | 183 | 184 | -------------------------------------------------------------------------------- /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 | The middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts). 7 | 8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware). 9 | -------------------------------------------------------------------------------- /middleware/router-auth.js: -------------------------------------------------------------------------------- 1 | export default function({ app,store }) { 2 | let fireuser = app.$fireAuth.currentUser; 3 | console.log("fireuser", fireuser); 4 | var obj = {}; 5 | if (fireuser && !store.user) { 6 | obj.name = fireuser.displayName; 7 | obj.email = fireuser.email; 8 | obj.photoUrl = fireuser.photoURL; 9 | obj.emailVerified = fireuser.emailVerified; 10 | obj.uid = fireuser.uid; // The user's ID, unique to the Firebase project. Do NOT use 11 | // this value to authenticate with your backend server, if 12 | // you have one. Use User.getToken() instead. 13 | store.commit("setUser", obj); 14 | store.commit("authenticated"); 15 | } 16 | 17 | } 18 | 19 | // export default function({ app, redirect, store,error }) { 20 | // const user = app.$fireAuth.currentUser; 21 | // if(user && user.email) { 22 | // store.commit('setUser',user) 23 | // store.commit('authenticated',user) 24 | // } 25 | // if (!store.state.authenticated) { 26 | // return redirect('/login') 27 | // } 28 | 29 | 30 | // } -------------------------------------------------------------------------------- /now.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": 2, 3 | "builds": [ 4 | { 5 | "src": "nuxt.config.js", 6 | "use": "@nuxtjs/now-builder", 7 | "config": {} 8 | } 9 | ], 10 | "routes": [ 11 | { "src": "/_nuxt/.+", "headers": { "Cache-Control": "max-age=31557600" } }, 12 | { "src": "/(.*)", "dest": "/" }, 13 | { "status": 200, "src": "/api/(.*)", "dest": "http://jake101.westus2.cloudapp.azure.com:7000/_/","headers": { "Cache-Control": "s-max-age=3600,stale-while-revalidate" } } 14 | ] 15 | } -------------------------------------------------------------------------------- /nuxt.config.js: -------------------------------------------------------------------------------- 1 | const pkg = require("./package"); 2 | // const Prismic = require('prismic-javascript'); 3 | 4 | // const prismicEndpoint = 'https://jake101.cdn.prismic.io/api/v2'; 5 | 6 | // // TODO: Factor in Page Size > 100 7 | // const routes = () => 8 | // Prismic.getApi(prismicEndpoint) 9 | // .then(api => 10 | // api.query('', { 11 | // pageSize: 100 12 | // }), 13 | // ) 14 | // .then(res => { 15 | // if (res.total_pages > 1) { 16 | // console.warn('we have more than 100 pages, fix it'); 17 | // process.exit(1); 18 | // } 19 | // return [ 20 | // '/', 21 | // ...res.results.map(page => `${page.type}/${page.uid.replace(/_/g, '/')}/`), 22 | // '404', 23 | // ]; 24 | // }); 25 | module.exports = { 26 | mode: "universal", 27 | 28 | /* 29 | ** Headers of the page 30 | */ 31 | head: { 32 | title: pkg.name, 33 | meta: [ 34 | { charset: "utf-8" }, 35 | { name: "viewport", content: "width=device-width, initial-scale=1" }, 36 | { hid: "description", name: "description", content: pkg.description } 37 | ], 38 | link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }] 39 | }, 40 | webfontloader: { 41 | custom: { 42 | families: ["Inter"], 43 | urls: ["/fonts/inter.css"] 44 | } 45 | }, 46 | /* 47 | ** Customize the progress-bar color 48 | */ 49 | loading: { color: "#FFFFFF" }, 50 | 51 | /* 52 | ** Global CSS 53 | */ 54 | 55 | /* 56 | ** Plugins to load before mounting the App 57 | */ 58 | lozad: { 59 | observer: { 60 | threshold: 1.0, // ratio of element convergence, 61 | 62 | }, 63 | polyfill: true 64 | }, 65 | css: [ 66 | // Load a Node.js module directly (here it's a Sass file) 67 | 'wysiwyg.css', 68 | '~assets/inter-subset.css' 69 | ], 70 | plugins: [ 71 | "~/plugins/filters", 72 | "~/plugins/timeago", 73 | { src: "~/plugins/menu", mode: "client" }, 74 | { src: "~/plugins/lazy", mode: "client" }, 75 | // { src: "~/plugins/suggest", mode: "client" } 76 | ], 77 | 78 | /* 79 | ** Nuxt.js modules 80 | */ 81 | devModules: ["@nuxtjs/tailwindcss"], 82 | modules: [ 83 | "vue-unorphan/nuxt/module", 84 | '@ax2/lozad-module', 85 | // Doc: https://github.com/nuxt-community/axios-module#usage 86 | "@nuxtjs/axios", 87 | [ 88 | "nuxt-fontawesome", 89 | { 90 | imports: [ 91 | { 92 | set: "@fortawesome/free-solid-svg-icons", 93 | icons: [ 94 | "faGlobe", 95 | "faHome", 96 | "faSearch", 97 | "faHeart", 98 | "faEye", 99 | "faClock", 100 | "faLaptopCode" 101 | ] 102 | } 103 | ] 104 | } 105 | ], 106 | "nuxt-webfontloader", 107 | [ 108 | "prismic-nuxt", 109 | { 110 | endpoint: "https://jake101.cdn.prismic.io/api/v2", 111 | deferLoad: true, 112 | linkResolver: function(doc, ctx) { 113 | return "/"; 114 | } 115 | } 116 | ], 117 | // [ 118 | // "nuxt-fire", 119 | // { 120 | // useOnly: ["auth"], 121 | // customEnv: false, 122 | // config: { 123 | // development: { 124 | // apiKey: "AIzaSyDDsijKfPhn2xNjPapedWxgP4lkW_ltmdI", 125 | // authDomain: "nuxtguide.firebaseapp.com", 126 | // databaseURL: "https://nuxtguide.firebaseio.com", 127 | // projectId: "nuxtguide", 128 | // storageBucket: "nuxtguide.appspot.com", 129 | // messagingSenderId: "486719329273", 130 | // appId: "1:486719329273:web:18f14c6e6ddc3317" 131 | // }, 132 | // production: { 133 | // apiKey: "AIzaSyDDsijKfPhn2xNjPapedWxgP4lkW_ltmdI", 134 | // authDomain: "nuxtguide.firebaseapp.com", 135 | // databaseURL: "https://nuxtguide.firebaseio.com", 136 | // projectId: "nuxtguide", 137 | // storageBucket: "nuxtguide.appspot.com", 138 | // messagingSenderId: "486719329273", 139 | // appId: "1:486719329273:web:18f14c6e6ddc3317" 140 | // } 141 | // } 142 | // } 143 | // ] 144 | ], 145 | purgeCSS: { 146 | whitelist: [ 147 | "sidemenu", 148 | "bm-burger-button", 149 | "bm-menu", 150 | "bm-burger-bars", 151 | "bm-cross", 152 | "lazy", 153 | "img", 154 | "lazyimg", 155 | "svg-inline--fa" 156 | ] 157 | 158 | // your settings here 159 | }, 160 | /* 161 | ** Axios module configuration 162 | */ 163 | router: { 164 | }, 165 | axios: { 166 | // See https://github.com/nuxt-community/axios-module#options 167 | }, 168 | generate: { 169 | fallback: true, 170 | // routes, 171 | }, 172 | /* 173 | ** Build configuration 174 | */ 175 | build: { 176 | extractCSS: true, 177 | /* 178 | ** You can extend webpack config here 179 | */ 180 | extend(config, ctx) {} 181 | } 182 | }; 183 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxtguide", 3 | "version": "1.0.0", 4 | "description": "A guide to nuxt.js", 5 | "author": "jake101.com", 6 | "private": true, 7 | "scripts": { 8 | "dev": "nuxt", 9 | "build": "nuxt build", 10 | "start": "nuxt start", 11 | "now-dev": "nuxt", 12 | "generate": "nuxt generate", 13 | "webpack-defaults": "webpack-defaults" 14 | }, 15 | "dependencies": { 16 | "@ax2/lozad-module": "^0.1.2", 17 | "@fortawesome/fontawesome-svg-core": "^1.2.19", 18 | "@fortawesome/free-solid-svg-icons": "^5.9.0", 19 | "@nuxtjs/axios": "^5.0.0", 20 | "core-js": "^2.6.5", 21 | "cross-env": "^5.2.0", 22 | "nuxt": "^2.0.0", 23 | "nuxt-bundle-buddy": "^0.0.2", 24 | "nuxt-fontawesome": "^0.4.0", 25 | "nuxt-webfontloader": "^1.1.0", 26 | "prismic-nuxt": "^0.5.1", 27 | "sass-loader": "^7.1.0", 28 | "vue-burger-menu": "^2.0.1", 29 | "vue-flip-toolkit": "^1.3.1", 30 | "vue-lazyload": "^1.2.6", 31 | "vue-timeago": "^5.1.2", 32 | "vue-unorphan": "^1.2.3", 33 | "wysiwyg.css": "^0.0.3" 34 | }, 35 | "devDependencies": { 36 | "@nuxtjs/tailwindcss": "^1.1.0", 37 | "autoprefixer": "^8.6.4", 38 | "node-sass": "^4.12.0", 39 | "nodemon": "^1.11.0" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the `*.vue` files inside this directory and create the router of your application. 5 | 6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing). 7 | -------------------------------------------------------------------------------- /pages/_type/_slug.vue: -------------------------------------------------------------------------------- 1 | 121 | 122 | 262 | -------------------------------------------------------------------------------- /pages/_type/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /pages/createaccount.vue: -------------------------------------------------------------------------------- 1 | 2 | 52 | 53 | 212 | 213 | 241 | -------------------------------------------------------------------------------- /pages/index.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /pages/login.vue: -------------------------------------------------------------------------------- 1 | 70 | 71 | 230 | 231 | 259 | -------------------------------------------------------------------------------- /pages/page/_page.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | -------------------------------------------------------------------------------- /pages/pages/_slug.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 142 | -------------------------------------------------------------------------------- /pages/tagged/_id.vue: -------------------------------------------------------------------------------- 1 | 7 | 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 your 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 | -------------------------------------------------------------------------------- /plugins/filters.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | Vue.filter('capitalize', function (value) { 3 | if (!value) return '' 4 | value = value.toString() 5 | return value.charAt(0).toUpperCase() + value.slice(1) 6 | }) -------------------------------------------------------------------------------- /plugins/flip.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import { Flipper, Flipped } from "vue-flip-toolkit"; 3 | Vue.component({ Flipper, Flipped } ) -------------------------------------------------------------------------------- /plugins/lazy.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueLazyload from 'vue-lazyload' 3 | Vue.use(VueLazyload, { 4 | preLoad: 2 5 | }) 6 | -------------------------------------------------------------------------------- /plugins/menu.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import { Slide, ScaleDown, ScaleRotate, Reveal, Push, PushRotate } from 'vue-burger-menu'; 3 | Vue.component('Reveal', Reveal) 4 | -------------------------------------------------------------------------------- /plugins/suggest.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueAutosuggest from "vue-autosuggest"; 3 | Vue.use(VueAutosuggest); -------------------------------------------------------------------------------- /plugins/timeago.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueTimeago from 'vue-timeago' 3 | 4 | Vue.use(VueTimeago, { 5 | name: 'Timeago', // Component name, `Timeago` by default 6 | locale: 'en', // Default locale 7 | // We use `date-fns` under the hood 8 | // So you can use all locales from it 9 | locales: { 10 | 11 | } 12 | }) -------------------------------------------------------------------------------- /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 | 8 | Example: `/static/robots.txt` is mapped as `/robots.txt`. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static). 11 | -------------------------------------------------------------------------------- /static/_headers: -------------------------------------------------------------------------------- 1 | / 2 | Link: ; rel=preload; as=style 3 | 4 | /_nuxt/* 5 | Cache-Control: public, max-age=31536000, immutable 6 | 7 | /fonts/* 8 | Cache-Control: public, max-age=31536000 -------------------------------------------------------------------------------- /static/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 2 | /tagged/* /index.html 200 3 | /modules /index.html 200 4 | /showcase /index.html 200 5 | /templates /index.html 200 -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/nuxtguide/6d007e075822587924dc90b1456c62832007efb0/static/favicon.ico -------------------------------------------------------------------------------- /static/fonts/Inter-Black.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/nuxtguide/6d007e075822587924dc90b1456c62832007efb0/static/fonts/Inter-Black.woff -------------------------------------------------------------------------------- /static/fonts/Inter-Black.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/nuxtguide/6d007e075822587924dc90b1456c62832007efb0/static/fonts/Inter-Black.woff2 -------------------------------------------------------------------------------- /static/fonts/Inter-BlackItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/nuxtguide/6d007e075822587924dc90b1456c62832007efb0/static/fonts/Inter-BlackItalic.woff -------------------------------------------------------------------------------- /static/fonts/Inter-BlackItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/nuxtguide/6d007e075822587924dc90b1456c62832007efb0/static/fonts/Inter-BlackItalic.woff2 -------------------------------------------------------------------------------- /static/fonts/Inter-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/nuxtguide/6d007e075822587924dc90b1456c62832007efb0/static/fonts/Inter-Bold.woff -------------------------------------------------------------------------------- /static/fonts/Inter-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/nuxtguide/6d007e075822587924dc90b1456c62832007efb0/static/fonts/Inter-Bold.woff2 -------------------------------------------------------------------------------- /static/fonts/Inter-BoldItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/nuxtguide/6d007e075822587924dc90b1456c62832007efb0/static/fonts/Inter-BoldItalic.woff -------------------------------------------------------------------------------- /static/fonts/Inter-BoldItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/nuxtguide/6d007e075822587924dc90b1456c62832007efb0/static/fonts/Inter-BoldItalic.woff2 -------------------------------------------------------------------------------- /static/fonts/Inter-ExtraBold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/nuxtguide/6d007e075822587924dc90b1456c62832007efb0/static/fonts/Inter-ExtraBold.woff -------------------------------------------------------------------------------- /static/fonts/Inter-ExtraBold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/nuxtguide/6d007e075822587924dc90b1456c62832007efb0/static/fonts/Inter-ExtraBold.woff2 -------------------------------------------------------------------------------- /static/fonts/Inter-ExtraBoldItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/nuxtguide/6d007e075822587924dc90b1456c62832007efb0/static/fonts/Inter-ExtraBoldItalic.woff -------------------------------------------------------------------------------- /static/fonts/Inter-ExtraBoldItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/nuxtguide/6d007e075822587924dc90b1456c62832007efb0/static/fonts/Inter-ExtraBoldItalic.woff2 -------------------------------------------------------------------------------- /static/fonts/Inter-ExtraLight-BETA.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/nuxtguide/6d007e075822587924dc90b1456c62832007efb0/static/fonts/Inter-ExtraLight-BETA.woff -------------------------------------------------------------------------------- /static/fonts/Inter-ExtraLight-BETA.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/nuxtguide/6d007e075822587924dc90b1456c62832007efb0/static/fonts/Inter-ExtraLight-BETA.woff2 -------------------------------------------------------------------------------- /static/fonts/Inter-ExtraLightItalic-BETA.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/nuxtguide/6d007e075822587924dc90b1456c62832007efb0/static/fonts/Inter-ExtraLightItalic-BETA.woff -------------------------------------------------------------------------------- /static/fonts/Inter-ExtraLightItalic-BETA.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/nuxtguide/6d007e075822587924dc90b1456c62832007efb0/static/fonts/Inter-ExtraLightItalic-BETA.woff2 -------------------------------------------------------------------------------- /static/fonts/Inter-Italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/nuxtguide/6d007e075822587924dc90b1456c62832007efb0/static/fonts/Inter-Italic.woff -------------------------------------------------------------------------------- /static/fonts/Inter-Italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/nuxtguide/6d007e075822587924dc90b1456c62832007efb0/static/fonts/Inter-Italic.woff2 -------------------------------------------------------------------------------- /static/fonts/Inter-Light-BETA.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/nuxtguide/6d007e075822587924dc90b1456c62832007efb0/static/fonts/Inter-Light-BETA.woff -------------------------------------------------------------------------------- /static/fonts/Inter-Light-BETA.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/nuxtguide/6d007e075822587924dc90b1456c62832007efb0/static/fonts/Inter-Light-BETA.woff2 -------------------------------------------------------------------------------- /static/fonts/Inter-LightItalic-BETA.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/nuxtguide/6d007e075822587924dc90b1456c62832007efb0/static/fonts/Inter-LightItalic-BETA.woff -------------------------------------------------------------------------------- /static/fonts/Inter-LightItalic-BETA.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/nuxtguide/6d007e075822587924dc90b1456c62832007efb0/static/fonts/Inter-LightItalic-BETA.woff2 -------------------------------------------------------------------------------- /static/fonts/Inter-Medium.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/nuxtguide/6d007e075822587924dc90b1456c62832007efb0/static/fonts/Inter-Medium.woff -------------------------------------------------------------------------------- /static/fonts/Inter-Medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/nuxtguide/6d007e075822587924dc90b1456c62832007efb0/static/fonts/Inter-Medium.woff2 -------------------------------------------------------------------------------- /static/fonts/Inter-MediumItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/nuxtguide/6d007e075822587924dc90b1456c62832007efb0/static/fonts/Inter-MediumItalic.woff -------------------------------------------------------------------------------- /static/fonts/Inter-MediumItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/nuxtguide/6d007e075822587924dc90b1456c62832007efb0/static/fonts/Inter-MediumItalic.woff2 -------------------------------------------------------------------------------- /static/fonts/Inter-Regular.css: -------------------------------------------------------------------------------- 1 | /* This file was automatically generated by GlyphHanger 3.2.0 */ 2 | 3 | @font-face { 4 | src: url(Inter-Regular-subset.woff2) format("woff2"), url(Inter-Regular-subset.woff) format("woff"); 5 | unicode-range: U+0-FF,U+131,U+152,U+153,U+2BB,U+2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; 6 | } -------------------------------------------------------------------------------- /static/fonts/Inter-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/nuxtguide/6d007e075822587924dc90b1456c62832007efb0/static/fonts/Inter-Regular.woff -------------------------------------------------------------------------------- /static/fonts/Inter-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/nuxtguide/6d007e075822587924dc90b1456c62832007efb0/static/fonts/Inter-Regular.woff2 -------------------------------------------------------------------------------- /static/fonts/Inter-SemiBold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/nuxtguide/6d007e075822587924dc90b1456c62832007efb0/static/fonts/Inter-SemiBold.woff -------------------------------------------------------------------------------- /static/fonts/Inter-SemiBold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/nuxtguide/6d007e075822587924dc90b1456c62832007efb0/static/fonts/Inter-SemiBold.woff2 -------------------------------------------------------------------------------- /static/fonts/Inter-SemiBoldItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/nuxtguide/6d007e075822587924dc90b1456c62832007efb0/static/fonts/Inter-SemiBoldItalic.woff -------------------------------------------------------------------------------- /static/fonts/Inter-SemiBoldItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/nuxtguide/6d007e075822587924dc90b1456c62832007efb0/static/fonts/Inter-SemiBoldItalic.woff2 -------------------------------------------------------------------------------- /static/fonts/Inter-Thin-BETA.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/nuxtguide/6d007e075822587924dc90b1456c62832007efb0/static/fonts/Inter-Thin-BETA.woff -------------------------------------------------------------------------------- /static/fonts/Inter-Thin-BETA.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/nuxtguide/6d007e075822587924dc90b1456c62832007efb0/static/fonts/Inter-Thin-BETA.woff2 -------------------------------------------------------------------------------- /static/fonts/Inter-ThinItalic-BETA.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/nuxtguide/6d007e075822587924dc90b1456c62832007efb0/static/fonts/Inter-ThinItalic-BETA.woff -------------------------------------------------------------------------------- /static/fonts/Inter-ThinItalic-BETA.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/nuxtguide/6d007e075822587924dc90b1456c62832007efb0/static/fonts/Inter-ThinItalic-BETA.woff2 -------------------------------------------------------------------------------- /static/fonts/inter.css: -------------------------------------------------------------------------------- 1 | 2 | @font-face { 3 | font-family: 'Inter'; 4 | font-style: normal; 5 | font-display: swap; 6 | font-weight: 300; 7 | src: local("Inter"), 8 | url("Inter-Light-BETA.woff2") format("woff2"), 9 | url("Inter-Light-BETA.woff") format("woff"); 10 | } 11 | @font-face { 12 | font-family: 'Inter'; 13 | font-style: italic; 14 | font-display: swap; 15 | font-weight: 300; 16 | src: local("Inter"), 17 | url("Inter-LightItalic-BETA.woff2") format("woff2"), 18 | url("Inter-LightItalic-BETA.woff") format("woff"); 19 | } 20 | 21 | @font-face { 22 | font-family: 'Inter'; 23 | font-style: normal; 24 | font-weight: 400; 25 | font-display: swap; 26 | src: local("Inter"), 27 | url("Inter-Regular.woff2") format("woff2"), 28 | url("Inter-Regular.woff") format("woff"); 29 | } 30 | @font-face { 31 | font-family: 'Inter'; 32 | font-style: italic; 33 | font-weight: 400; 34 | src: local("Inter"), 35 | url("Inter-Italic.woff2") format("woff2"), 36 | url("Inter-Italic.woff") format("woff"); 37 | } 38 | 39 | 40 | 41 | @font-face { 42 | font-family: 'Inter'; 43 | font-style: normal; 44 | font-weight: 700; 45 | src: url("Inter-Bold.woff2") format("woff2"), 46 | url("Inter-Bold.woff") format("woff"); 47 | } 48 | @font-face { 49 | font-family: 'Inter'; 50 | font-style: italic; 51 | font-weight: 700; 52 | src: local("Inter"), 53 | url("Inter-BoldItalic.woff2") format("woff2"), 54 | url("Inter-BoldItalic.woff") format("woff"); 55 | } 56 | 57 | 58 | 59 | @font-face { 60 | font-family: 'Inter'; 61 | font-style: normal; 62 | font-weight: 900; 63 | src: local("Inter"), 64 | url("Inter-Black.woff2") format("woff2"), 65 | url("Inter-Black.woff") format("woff"); 66 | } 67 | 68 | 69 | /* ------------------------------------------------------- 70 | Variable font. 71 | Usage: 72 | 73 | 74 | */ 75 | /* html { font-family: 'Inter', sans-serif; } 76 | @supports (font-variation-settings: normal) { 77 | html { font-family: 'Inter var', sans-serif; } 78 | } */ 79 | @font-face { 80 | font-family: 'Inter var'; 81 | font-weight: 100 900; 82 | font-style: normal; 83 | font-named-instance: 'Regular'; 84 | src: url("Inter-upright.var.woff2") format("woff2"); 85 | } 86 | @font-face { 87 | font-family: 'Inter var'; 88 | font-weight: 100 900; 89 | font-style: italic; 90 | font-named-instance: 'Italic'; 91 | src: url("Inter-italic.var.woff2") format("woff2"); 92 | } 93 | 94 | 95 | /* -------------------------------------------------------------------------- 96 | [EXPERIMENTAL] Multi-axis, single variable font. 97 | 98 | Slant axis is not yet widely supported (as of February 2019) and thus this 99 | multi-axis single variable font is opt-in rather than the default. 100 | 101 | When using this, you will probably need to set font-variation-settings 102 | explicitly, e.g. 103 | 104 | * { font-variation-settings: "slnt" 0deg } 105 | .italic { font-variation-settings: "slnt" 10deg } 106 | 107 | */ 108 | @font-face { 109 | font-family: 'Inter var experimental'; 110 | font-weight: 100 900; 111 | font-style: oblique 0deg 10deg; 112 | src: url("Inter.var.woff2") format("woff2"); 113 | } 114 | -------------------------------------------------------------------------------- /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 activate the option in the framework automatically. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store). 11 | -------------------------------------------------------------------------------- /store/index.js: -------------------------------------------------------------------------------- 1 | 2 | export const state = () => ({ 3 | user: null, 4 | authenticated: false, 5 | likes: [], 6 | cats: null, 7 | guidedoc: [], 8 | pageId: '' 9 | }); 10 | 11 | export const mutations = { 12 | setUser(state, data) { 13 | state.user = data; 14 | }, 15 | setPageId(state,data) { 16 | state.pageId = data 17 | }, 18 | setCats(state,data) { 19 | state.cats = data 20 | }, 21 | authenticated(state) { 22 | state.authenticated = true; 23 | }, 24 | 25 | }; 26 | 27 | export const getters = { 28 | // getPageLikes: function(state) { 29 | // const copy = {...state.likes} 30 | // var found = copy.find(o => o.pageId === state.pageId) 31 | // return found; 32 | 33 | 34 | // } 35 | }; 36 | 37 | export const actions = { 38 | nuxtServerInit({ dispatch }) { 39 | dispatch('getCats') 40 | }, 41 | 42 | async getCats({app,commit}) { 43 | let document = await this.$prismic.api.query(this.$prismic.predicates.at('document.type', 'categories') 44 | 45 | ); 46 | await console.log(document) 47 | await commit('setCats',document.results) 48 | }, 49 | 50 | fireAuth({ commit, app }) { 51 | const user = app.$fireAuth.currentUser; 52 | console.log(user); 53 | var obj = {}; 54 | if (user != null) { 55 | obj.name = user.displayName; 56 | obj.email = user.email; 57 | obj.photoUrl = user.photoURL; 58 | obj.emailVerified = user.emailVerified; 59 | obj.uid = user.uid; // The user's ID, unique to the Firebase project. Do NOT use 60 | // this value to authenticate with your backend server, if 61 | // you have one. Use User.getToken() instead. 62 | commit("setUser", obj); 63 | commit("authenticated"); 64 | } 65 | } 66 | }; 67 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /* 2 | ** TailwindCSS Configuration File 3 | ** 4 | ** Docs: https://tailwindcss.com/docs/configuration 5 | ** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js 6 | */ 7 | module.exports = { 8 | theme: { 9 | fontFamily: { 10 | sans: [ 11 | "Inter", 12 | "-apple-system", 13 | "BlinkMacSystemFont", 14 | "Segoe UI", 15 | "Roboto", 16 | "Helvetica Neue", 17 | "Arial", 18 | "Noto Sans", 19 | "sans-serif", 20 | "Apple Color Emoji", 21 | "Segoe UI Emoji", 22 | "Segoe UI Symbol", 23 | "Noto Color Emoji" 24 | ] 25 | }, 26 | extend: { 27 | colors: { 28 | // Palette 4 29 | 30 | teal: { 31 | "050": "#EFFCF6", 32 | "100": "#C6F7E2", 33 | "200": "#8EEDC7", 34 | "300": "#65D6AD", 35 | "400": "#3EBD93", 36 | "500": "#27AB83", 37 | "600": "#199473", 38 | "700": "#147D64", 39 | "800": "#0C6B58", 40 | "900": "#014D40" 41 | }, 42 | 43 | "blue-gray": { 44 | "050": "#F0F4F8", 45 | "100": "#D9E2EC", 46 | "200": "#BCCCDC", 47 | "300": "#9FB3C8", 48 | "400": "#829AB1", 49 | "500": "#627D98", 50 | "600": "#486581", 51 | "700": "#334E68", 52 | "800": "#243B53", 53 | "900": "#102A43" 54 | }, 55 | 56 | // Supporting 57 | blue: { 58 | "050": "#DCEEFB", 59 | "100": "#B6E0FE", 60 | "200": "#84C5F4", 61 | "300": "#62B0E8", 62 | "400": "#4098D7", 63 | "500": "#2680C2", 64 | "600": "#186FAF", 65 | "700": "#0F609B", 66 | "800": "#0A558C", 67 | "900": "#003E6B" 68 | }, 69 | 70 | purple: { 71 | "050": "#EAE2F8", 72 | "100": "#CFBCF2", 73 | "200": "#A081D9", 74 | "300": "#8662C7", 75 | "400": "#724BB7", 76 | "500": "#653CAD", 77 | "600": "#51279B", 78 | "700": "#421987", 79 | "800": "#34126F", 80 | "900": "#240754" 81 | }, 82 | red: { 83 | "050": "#FFEEEE", 84 | "100": "#FACDCD", 85 | "200": "#F29B9B", 86 | "300": "#E66A6A", 87 | "400": "#D64545", 88 | "500": "#BA2525", 89 | "600": "#A61B1B", 90 | "700": "#911111", 91 | "800": "#780A0A", 92 | "900": "#610404" 93 | }, 94 | yellow: { 95 | "050": "#FFFAEB", 96 | "100": "#FCEFC7", 97 | "200": "#F8E3A3", 98 | "300": "#F9DA8B", 99 | "400": "#F7D070", 100 | "500": "#E9B949", 101 | "600": "#C99A2E", 102 | "700": "#A27C1A", 103 | "800": "#7C5E10", 104 | "900": "#513C06" 105 | }, 106 | 107 | gray: { 108 | "100": "#E2E8E7", 109 | "200": "#DDE4E3", 110 | "300": "#D2DEDB", 111 | "400": "#C2D3CF", 112 | "500": "#ABC4BE", 113 | "600": "#90AFA7", 114 | "700": "#74948A", 115 | "800": "#374B42", 116 | "900": "#18211D" 117 | }, 118 | brown: { 119 | "100": "#FFFDF8", 120 | "200": "#FBF8F3", 121 | "300": "#F3EFE7", 122 | "400": "#E8E0D4", 123 | "500": "#D7CCBB", 124 | "600": "#C0B09E", 125 | "700": "#A28F7E", 126 | "800": "#4F423A", 127 | "900": "#211B18" 128 | } 129 | } 130 | } 131 | }, 132 | variants: {}, 133 | plugins: [] 134 | }; 135 | --------------------------------------------------------------------------------