├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitattributes ├── .gitignore ├── .npmrc ├── .prettierrc ├── LICENSE ├── README.md ├── commitlint.config.js ├── docs ├── .env.example ├── assets │ └── css │ │ ├── main.css │ │ └── prism.css ├── content │ ├── en │ │ ├── 1.index.md │ │ ├── 2.modules │ │ │ ├── 1.head.md │ │ │ ├── 2.payload.md │ │ │ └── 3.statistics.md │ │ ├── 3.components │ │ │ └── 1.smart-link.md │ │ └── 4.misc │ │ │ └── 1.env.md │ └── settings.json ├── nuxt.config.js ├── package.json ├── static │ ├── icon.png │ ├── logo-dark--min.svg │ ├── logo-dark.svg │ ├── logo-light.svg │ ├── preview-dark.png │ └── preview.png ├── tailwind.config.js └── yarn.lock ├── lerna.json ├── netlify.toml ├── package.json ├── packages ├── env │ ├── .env.example │ ├── CHANGELOG.md │ ├── package.json │ ├── src │ │ ├── index.js │ │ └── utils │ │ │ ├── firstTrue.js │ │ │ └── index.js │ └── test │ │ └── .gitkeep ├── head │ ├── CHANGELOG.md │ ├── package.json │ ├── src │ │ ├── index.js │ │ ├── logger.js │ │ ├── plugin.js │ │ └── setGlobal │ │ │ ├── index.js │ │ │ ├── link.js │ │ │ ├── main.js │ │ │ └── meta.js │ └── test │ │ └── .gitkeep ├── payload │ ├── CHANGELOG.md │ ├── package.json │ ├── src │ │ ├── index.js │ │ ├── logger.js │ │ └── plugin.js │ └── test │ │ └── .gitkeep ├── smart-link │ ├── CHANGELOG.md │ ├── package.json │ ├── src │ │ ├── index.js │ │ └── utils │ │ │ ├── getLinkTag.js │ │ │ └── index.js │ └── test │ │ └── .gitkeep └── statistics │ ├── CHANGELOG.md │ ├── package.json │ ├── src │ ├── index.js │ └── logger.js │ └── test │ └── .gitkeep └── 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 | quote_type = double 12 | curly_bracket_next_line = false 13 | spaces_around_operators = true 14 | indent_brace_style = K&R 15 | 16 | [*.md] 17 | trim_trailing_whitespace = false 18 | quote_type = auto 19 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | packages/payload/src/plugin.js 2 | 3 | # .gitignore copy 4 | 5 | # Custom 6 | docs/static/sw.js 7 | 8 | # Created by https://www.toptal.com/developers/gitignore/api/nuxt,node,yarn,vuejs,macos,linux,dotenv,windows,visualstudiocode 9 | # Edit at https://www.toptal.com/developers/gitignore?templates=nuxt,node,yarn,vuejs,macos,linux,dotenv,windows,visualstudiocode 10 | 11 | ### dotenv ### 12 | .env 13 | 14 | ### Linux ### 15 | *~ 16 | 17 | # temporary files which can be created if a process still has a handle open of a deleted file 18 | .fuse_hidden* 19 | 20 | # KDE directory preferences 21 | .directory 22 | 23 | # Linux trash folder which might appear on any partition or disk 24 | .Trash-* 25 | 26 | # .nfs files are created when an open file is removed but is still being accessed 27 | .nfs* 28 | 29 | ### macOS ### 30 | # General 31 | .DS_Store 32 | .AppleDouble 33 | .LSOverride 34 | 35 | # Icon must end with two \r 36 | Icon 37 | 38 | # Thumbnails 39 | ._* 40 | 41 | # Files that might appear in the root of a volume 42 | .DocumentRevisions-V100 43 | .fseventsd 44 | .Spotlight-V100 45 | .TemporaryItems 46 | .Trashes 47 | .VolumeIcon.icns 48 | .com.apple.timemachine.donotpresent 49 | 50 | # Directories potentially created on remote AFP share 51 | .AppleDB 52 | .AppleDesktop 53 | Network Trash Folder 54 | Temporary Items 55 | .apdisk 56 | 57 | ### Node ### 58 | # Logs 59 | logs 60 | *.log 61 | npm-debug.log* 62 | yarn-debug.log* 63 | yarn-error.log* 64 | lerna-debug.log* 65 | 66 | # Diagnostic reports (https://nodejs.org/api/report.html) 67 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 68 | 69 | # Runtime data 70 | pids 71 | *.pid 72 | *.seed 73 | *.pid.lock 74 | 75 | # Directory for instrumented libs generated by jscoverage/JSCover 76 | lib-cov 77 | 78 | # Coverage directory used by tools like istanbul 79 | coverage 80 | *.lcov 81 | 82 | # nyc test coverage 83 | .nyc_output 84 | 85 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 86 | .grunt 87 | 88 | # Bower dependency directory (https://bower.io/) 89 | bower_components 90 | 91 | # node-waf configuration 92 | .lock-wscript 93 | 94 | # Compiled binary addons (https://nodejs.org/api/addons.html) 95 | build/Release 96 | 97 | # Dependency directories 98 | node_modules/ 99 | jspm_packages/ 100 | 101 | # TypeScript v1 declaration files 102 | typings/ 103 | 104 | # TypeScript cache 105 | *.tsbuildinfo 106 | 107 | # Optional npm cache directory 108 | .npm 109 | 110 | # Optional eslint cache 111 | .eslintcache 112 | 113 | # Microbundle cache 114 | .rpt2_cache/ 115 | .rts2_cache_cjs/ 116 | .rts2_cache_es/ 117 | .rts2_cache_umd/ 118 | 119 | # Optional REPL history 120 | .node_repl_history 121 | 122 | # Output of 'npm pack' 123 | *.tgz 124 | 125 | # Yarn Integrity file 126 | .yarn-integrity 127 | 128 | # dotenv environment variables file 129 | .env.test 130 | .env*.local 131 | 132 | # parcel-bundler cache (https://parceljs.org/) 133 | .cache 134 | .parcel-cache 135 | 136 | # Next.js build output 137 | .next 138 | 139 | # Nuxt.js build / generate output 140 | .nuxt 141 | dist 142 | 143 | # Gatsby files 144 | .cache/ 145 | # Comment in the public line in if your project uses Gatsby and not Next.js 146 | # https://nextjs.org/blog/next-9-1#public-directory-support 147 | # public 148 | 149 | # vuepress build output 150 | .vuepress/dist 151 | 152 | # Serverless directories 153 | .serverless/ 154 | 155 | # FuseBox cache 156 | .fusebox/ 157 | 158 | # DynamoDB Local files 159 | .dynamodb/ 160 | 161 | # TernJS port file 162 | .tern-port 163 | 164 | # Stores VSCode versions used for testing VSCode extensions 165 | .vscode-test 166 | 167 | ### Nuxt ### 168 | # gitignore template for Nuxt.js projects 169 | # 170 | # Recommended template: Node.gitignore 171 | 172 | # Nuxt build 173 | 174 | # Nuxt generate 175 | 176 | ### VisualStudioCode ### 177 | .vscode/* 178 | !.vscode/settings.json 179 | !.vscode/tasks.json 180 | !.vscode/launch.json 181 | !.vscode/extensions.json 182 | *.code-workspace 183 | 184 | ### VisualStudioCode Patch ### 185 | # Ignore all local history of files 186 | .history 187 | .ionide 188 | 189 | ### Vuejs ### 190 | # Recommended template: Node.gitignore 191 | 192 | dist/ 193 | npm-debug.log 194 | yarn-error.log 195 | 196 | ### Windows ### 197 | # Windows thumbnail cache files 198 | Thumbs.db 199 | Thumbs.db:encryptable 200 | ehthumbs.db 201 | ehthumbs_vista.db 202 | 203 | # Dump file 204 | *.stackdump 205 | 206 | # Folder config file 207 | [Dd]esktop.ini 208 | 209 | # Recycle Bin used on file shares 210 | $RECYCLE.BIN/ 211 | 212 | # Windows Installer files 213 | *.cab 214 | *.msi 215 | *.msix 216 | *.msm 217 | *.msp 218 | 219 | # Windows shortcuts 220 | *.lnk 221 | 222 | ### yarn ### 223 | # https://yarnpkg.com/advanced/qa#which-files-should-be-gitignored 224 | 225 | .yarn/* 226 | !.yarn/releases 227 | !.yarn/plugins 228 | !.yarn/sdks 229 | !.yarn/versions 230 | 231 | # if you are NOT using Zero-installs, then: 232 | # comment the following lines 233 | !.yarn/cache 234 | 235 | # and uncomment the following lines 236 | # .pnp.* 237 | 238 | # End of https://www.toptal.com/developers/gitignore/api/nuxt,node,yarn,vuejs,macos,linux,dotenv,windows,visualstudiocode 239 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | browser: true, 5 | node: true 6 | }, 7 | parser: "babel-eslint", 8 | extends: ["plugin:prettier/recommended"], 9 | plugins: [], 10 | rules: { 11 | "no-console": process.env.NODE_ENV === "production" ? "error" : "off", 12 | "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off", 13 | "no-undef": 0 14 | } 15 | }; 16 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # assert everything is text... 2 | * text eol=lf 3 | 4 | # ...but treat assets as binary... 5 | *.png binary 6 | *.jpg binary 7 | *.jpeg binary 8 | *.gif binary 9 | *.ico binary 10 | *.mov binary 11 | *.mp4 binary 12 | *.mp3 binary 13 | *.flv binary 14 | *.fla binary 15 | *.swf binary 16 | *.gz binary 17 | *.zip binary 18 | *.7z binary 19 | *.ttf binary 20 | *.eot binary 21 | *.woff binary 22 | *.woff2 binary 23 | *.pyc binary 24 | *.pdf binary 25 | 26 | # ...and don't care about lock files that much 27 | package-lock.json -diff 28 | yarn.lock -diff 29 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Custom 2 | docs/static/sw.js 3 | 4 | # Created by https://www.toptal.com/developers/gitignore/api/nuxt,node,yarn,vuejs,macos,linux,dotenv,windows,visualstudiocode 5 | # Edit at https://www.toptal.com/developers/gitignore?templates=nuxt,node,yarn,vuejs,macos,linux,dotenv,windows,visualstudiocode 6 | 7 | ### dotenv ### 8 | .env 9 | 10 | ### Linux ### 11 | *~ 12 | 13 | # temporary files which can be created if a process still has a handle open of a deleted file 14 | .fuse_hidden* 15 | 16 | # KDE directory preferences 17 | .directory 18 | 19 | # Linux trash folder which might appear on any partition or disk 20 | .Trash-* 21 | 22 | # .nfs files are created when an open file is removed but is still being accessed 23 | .nfs* 24 | 25 | ### macOS ### 26 | # General 27 | .DS_Store 28 | .AppleDouble 29 | .LSOverride 30 | 31 | # Icon must end with two \r 32 | Icon 33 | 34 | # Thumbnails 35 | ._* 36 | 37 | # Files that might appear in the root of a volume 38 | .DocumentRevisions-V100 39 | .fseventsd 40 | .Spotlight-V100 41 | .TemporaryItems 42 | .Trashes 43 | .VolumeIcon.icns 44 | .com.apple.timemachine.donotpresent 45 | 46 | # Directories potentially created on remote AFP share 47 | .AppleDB 48 | .AppleDesktop 49 | Network Trash Folder 50 | Temporary Items 51 | .apdisk 52 | 53 | ### Node ### 54 | # Logs 55 | logs 56 | *.log 57 | npm-debug.log* 58 | yarn-debug.log* 59 | yarn-error.log* 60 | lerna-debug.log* 61 | 62 | # Diagnostic reports (https://nodejs.org/api/report.html) 63 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 64 | 65 | # Runtime data 66 | pids 67 | *.pid 68 | *.seed 69 | *.pid.lock 70 | 71 | # Directory for instrumented libs generated by jscoverage/JSCover 72 | lib-cov 73 | 74 | # Coverage directory used by tools like istanbul 75 | coverage 76 | *.lcov 77 | 78 | # nyc test coverage 79 | .nyc_output 80 | 81 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 82 | .grunt 83 | 84 | # Bower dependency directory (https://bower.io/) 85 | bower_components 86 | 87 | # node-waf configuration 88 | .lock-wscript 89 | 90 | # Compiled binary addons (https://nodejs.org/api/addons.html) 91 | build/Release 92 | 93 | # Dependency directories 94 | node_modules/ 95 | jspm_packages/ 96 | 97 | # TypeScript v1 declaration files 98 | typings/ 99 | 100 | # TypeScript cache 101 | *.tsbuildinfo 102 | 103 | # Optional npm cache directory 104 | .npm 105 | 106 | # Optional eslint cache 107 | .eslintcache 108 | 109 | # Microbundle cache 110 | .rpt2_cache/ 111 | .rts2_cache_cjs/ 112 | .rts2_cache_es/ 113 | .rts2_cache_umd/ 114 | 115 | # Optional REPL history 116 | .node_repl_history 117 | 118 | # Output of 'npm pack' 119 | *.tgz 120 | 121 | # Yarn Integrity file 122 | .yarn-integrity 123 | 124 | # dotenv environment variables file 125 | .env.test 126 | .env*.local 127 | 128 | # parcel-bundler cache (https://parceljs.org/) 129 | .cache 130 | .parcel-cache 131 | 132 | # Next.js build output 133 | .next 134 | 135 | # Nuxt.js build / generate output 136 | .nuxt 137 | dist 138 | 139 | # Gatsby files 140 | .cache/ 141 | # Comment in the public line in if your project uses Gatsby and not Next.js 142 | # https://nextjs.org/blog/next-9-1#public-directory-support 143 | # public 144 | 145 | # vuepress build output 146 | .vuepress/dist 147 | 148 | # Serverless directories 149 | .serverless/ 150 | 151 | # FuseBox cache 152 | .fusebox/ 153 | 154 | # DynamoDB Local files 155 | .dynamodb/ 156 | 157 | # TernJS port file 158 | .tern-port 159 | 160 | # Stores VSCode versions used for testing VSCode extensions 161 | .vscode-test 162 | 163 | ### Nuxt ### 164 | # gitignore template for Nuxt.js projects 165 | # 166 | # Recommended template: Node.gitignore 167 | 168 | # Nuxt build 169 | 170 | # Nuxt generate 171 | 172 | ### VisualStudioCode ### 173 | .vscode/* 174 | !.vscode/settings.json 175 | !.vscode/tasks.json 176 | !.vscode/launch.json 177 | !.vscode/extensions.json 178 | *.code-workspace 179 | 180 | ### VisualStudioCode Patch ### 181 | # Ignore all local history of files 182 | .history 183 | .ionide 184 | 185 | ### Vuejs ### 186 | # Recommended template: Node.gitignore 187 | 188 | dist/ 189 | npm-debug.log 190 | yarn-error.log 191 | 192 | ### Windows ### 193 | # Windows thumbnail cache files 194 | Thumbs.db 195 | Thumbs.db:encryptable 196 | ehthumbs.db 197 | ehthumbs_vista.db 198 | 199 | # Dump file 200 | *.stackdump 201 | 202 | # Folder config file 203 | [Dd]esktop.ini 204 | 205 | # Recycle Bin used on file shares 206 | $RECYCLE.BIN/ 207 | 208 | # Windows Installer files 209 | *.cab 210 | *.msi 211 | *.msix 212 | *.msm 213 | *.msp 214 | 215 | # Windows shortcuts 216 | *.lnk 217 | 218 | ### yarn ### 219 | # https://yarnpkg.com/advanced/qa#which-files-should-be-gitignored 220 | 221 | .yarn/* 222 | !.yarn/releases 223 | !.yarn/plugins 224 | !.yarn/sdks 225 | !.yarn/versions 226 | 227 | # if you are NOT using Zero-installs, then: 228 | # comment the following lines 229 | !.yarn/cache 230 | 231 | # and uncomment the following lines 232 | # .pnp.* 233 | 234 | # End of https://www.toptal.com/developers/gitignore/api/nuxt,node,yarn,vuejs,macos,linux,dotenv,windows,visualstudiocode 235 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | save-exact=true 2 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 80, 3 | "tabWidth": 2, 4 | "useTabs": false, 5 | "semi": true, 6 | "singleQuote": false, 7 | "quoteProps": "as-needed", 8 | "jsxSingleQuote": false, 9 | "trailingComma": "none", 10 | "bracketSpacing": true, 11 | "jsxBracketSameLine": false, 12 | "arrowParens": "avoid", 13 | "requirePragma": false, 14 | "insertPragma": false, 15 | "htmlWhitespaceSensitivity": "css", 16 | "endOfLine": "lf" 17 | } 18 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020-present, Lucie Haberer (https://lihbr.com) 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | utils-nuxt 4 | 5 |

6 | 7 | # utils-nuxt [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/) [![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org) 8 | 9 | > lihbr utils for Nuxt.js 10 | 11 | ## About 12 | 13 | `@lihbr/utils-nuxt.*` are helpers I use across my [Nuxt.js](https://nuxtjs.org) projects. To achieve that purpose they are designed to be as agnostic as possible, although being quite opinionated. 14 | 15 | > :warning: Those packages just got migrated to actual packages and are still pre-major version (`v1.x.x`). I'll most likely refactor them before releasing a first major and allow myself to publish breaking changes while doing so, therefore if you want to use them as is I highly recommend watching out when upgrading their versions. 16 | > 17 | > Also feel free to inspire from them, [submit feedback or questions](https://github.com/lihbr/utils-nuxt/issues/new), or fork this repository~ 18 | 19 |

20 | 21 | Browse Documentation 22 | 23 |

24 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parserPreset: "conventional-changelog-conventionalcommits", 3 | extends: ["@commitlint/config-conventional"], 4 | rules: { 5 | "scope-enum": [ 6 | 2, 7 | "always", 8 | [ 9 | "env", 10 | "head", 11 | "payload", 12 | "smart-link", 13 | "statistics", 14 | "release", 15 | "config", 16 | "deps", 17 | "misc" 18 | ] 19 | ], 20 | "scope-empty": [2, "never"] 21 | } 22 | }; 23 | -------------------------------------------------------------------------------- /docs/.env.example: -------------------------------------------------------------------------------- 1 | # Tracking ################################################# 2 | 3 | # Ackee API Endpoint 4 | # Non mandatory, disable Ackee tracking if not provided 5 | # ACKEE_ENDPOINT= 6 | 7 | # Ackee ID 8 | # Non mandatory, disable Ackee tracking if not provided 9 | # ACKEE_ID= 10 | -------------------------------------------------------------------------------- /docs/assets/css/main.css: -------------------------------------------------------------------------------- 1 | html.dark .app-header { 2 | background-color: rgba(19, 16, 16, 0.75); 3 | } 4 | -------------------------------------------------------------------------------- /docs/assets/css/prism.css: -------------------------------------------------------------------------------- 1 | code[class*="language-"], 2 | pre[class*="language-"] { 3 | color: #fff7f7; 4 | background: #292222; 5 | font-family: Roboto Mono, monospace; 6 | } 7 | 8 | code[class*="language-"]::-moz-selection, 9 | pre[class*="language-"]::-moz-selection, 10 | code[class*="language-"] ::-moz-selection, 11 | pre[class*="language-"] ::-moz-selection { 12 | background: #423838; 13 | } 14 | 15 | code[class*="language-"]::selection, 16 | pre[class*="language-"]::selection, 17 | code[class*="language-"] ::selection, 18 | pre[class*="language-"] ::selection { 19 | background: #423838; 20 | } 21 | 22 | .language-css > code, 23 | .language-sass > code, 24 | .language-scss > code { 25 | color: #f27502; 26 | } 27 | 28 | [class*="language-"] .namespace { 29 | opacity: 0.7; 30 | } 31 | 32 | /* Theme */ 33 | .token.comment, 34 | .token.prolog, 35 | .token.doctype, 36 | .token.cdata { 37 | color: #806b6b; 38 | } 39 | 40 | .token.boolean, 41 | .token.number { 42 | color: #c3687c; 43 | } 44 | 45 | .token.property, 46 | .token.tag, 47 | .token.symbol, 48 | .token.deleted, 49 | .token.operator, 50 | .token.entity, 51 | .token.url, 52 | .language-css .token.string, 53 | .style .token.string, 54 | .token.variable, 55 | .token.atrule, 56 | .token.class-name, 57 | .token.keyword { 58 | color: #e84311; 59 | } 60 | 61 | .token.constant { 62 | color: #ff612f; 63 | } 64 | 65 | .token.parameter { 66 | color: #f27502; 67 | } 68 | 69 | .token.string, 70 | .token.attr-value, 71 | .token.regex, 72 | .token.important { 73 | color: #ffb005; 74 | } 75 | 76 | .token.punctuation { 77 | color: #ffce23; 78 | } 79 | 80 | .token.selector, 81 | .token.attr-name, 82 | .token.char, 83 | .token.builtin, 84 | .token.inserted, 85 | .token.function { 86 | color: #93bd71; 87 | } 88 | 89 | .token.important, 90 | .token.bold { 91 | font-style: 700; 92 | } 93 | 94 | .token.italic { 95 | font-style: italic; 96 | } 97 | -------------------------------------------------------------------------------- /docs/content/en/1.index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Introduction" 3 | description: "lihbr utils for Nuxt.js" 4 | category: "Getting Started" 5 | version: 0.1 6 | fullscreen: false 7 | menu: true 8 | menuTitle: "Introduction" 9 | badge: "" 10 | draft: false 11 | --- 12 | 13 | lihbr/utils-nuxt logo 14 | lihbr/utils-nuxt logo 15 | 16 | `@lihbr/utils-nuxt.*` are helpers I use across my [Nuxt.js](https://nuxtjs.org) projects. To achieve that purpose they are designed to be as agnostic as possible, although being quite opinionated. 17 | 18 | ## Packages 19 | 20 | 21 | 22 | Those packages just got migrated to actual packages and are still pre-major version (`v1.x.x`). I'll most likely refactor them before releasing a first major and allow myself to publish breaking changes while doing so, therefore if you want to use them as is I highly recommend watching out when upgrading their versions. 23 | 24 | Also feel free to inspire from them, [submit feedback or questions](https://github.com/lihbr/utils-nuxt/issues/new), or fork this repository~ 25 | 26 | 27 | 28 | ### Modules 29 | 30 | #### [head](/modules/head) 31 | 32 | Configures [vue-meta](https://vue-meta.nuxtjs.org/) with all the good stuff: Schema.org, Open Graph, Twitter, etc. 33 | 34 | #### [payload](/modules/payload) 35 | 36 | Makes `context.payload` available in development (sorta). 37 | 38 | #### [statistics](/modules/statistics) 39 | 40 | Provides some (not much) statistics when using Nuxt.js 41 | 42 | ### Components 43 | 44 | #### [smart-link](/components/smart-link) 45 | 46 | Provides a generic link component to stop choosing between anchor tag or nuxt-link. 47 | 48 | ### Miscellaneous 49 | 50 | #### [env](/misc/env) 51 | 52 | Configures an object from available environment variables to quickly setup a Nuxt.js application. 53 | -------------------------------------------------------------------------------- /docs/content/en/2.modules/1.head.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "head" 3 | description: "lihbr utils for Nuxt.js" 4 | category: "Modules" 5 | version: 0.1 6 | fullscreen: false 7 | menu: true 8 | menuTitle: "head" 9 | badge: "" 10 | draft: false 11 | features: 12 | - "Add basic head information: lang, charset, etc." 13 | - "Add global values for Schema.org, Open Graph, Twitter, etc." 14 | - "Overwrite global values with per-page head information" 15 | - "Enhance your pages with complex structured data" 16 | --- 17 | 18 | `@lihbr/utils-nuxt.head` configures [vue-meta](https://vue-meta.nuxtjs.org/) with all the good stuff: Schema.org, Open Graph, Twitter, etc. 19 | 20 | This module is similar to `@nuxtjs/pwa` [Meta module](https://pwa.nuxtjs.org/meta), but more opinionated. 21 | 22 | ## Features 23 | 24 | 25 | 26 | ## Installation 27 | 28 | Add `@lihbr/utils-nuxt.head` dependency to your project: 29 | 30 | 31 | 32 | 33 | ```bash 34 | yarn add --dev @lihbr/utils-nuxt.head 35 | ``` 36 | 37 | 38 | 39 | 40 | ```bash 41 | npm install --save-dev @lihbr/utils-nuxt.head 42 | ``` 43 | 44 | 45 | 46 | 47 | Then, add `@lihbr/utils-nuxt.head` to the `buildModules` section of your `nuxt.config.js` file and configure your application name, description and URL: 48 | 49 | ```javascript[nuxt.config.js] 50 | export default { 51 | buildModules: [ 52 | [ 53 | "@lihbr/utils-nuxt.head", 54 | { 55 | name: "My Company", 56 | description: "We craft amazing products.", 57 | url: "https://example.com" 58 | /* see configuration below for more */ 59 | } 60 | ] 61 | ] 62 | }; 63 | ``` 64 | 65 | ## Usage 66 | 67 | This module injects a `$buildHead` method inside your Vue.js application that you need to use on every page `head` method: 68 | 69 | ```vue[~/pages/index.vue] 70 | 86 | ``` 87 | 88 | This function will resolve meta tags for this page with provided options against default options provided to the module itself. Except `path`, every key is optional, check `$buildHead` [function reference](/modules/head#buildhead) for more information. 89 | 90 | ## Reference 91 | 92 | ### Configuration 93 | 94 | #### lang 95 | 96 | - Type: `String` 97 | - Default: `"en"` 98 | 99 | Application language to apply on `html` tag `lang` attribute. 100 | 101 | 102 | ```javascript[module‏‏‎‏‏‎ options] 103 | { 104 | lang: "fr" 105 | } 106 | ``` 107 | 108 | 109 | #### name 110 | 111 | - Type: `String` 112 | - `required` 113 | 114 | Application name used across different meta tags. 115 | 116 | 117 | ```javascript[module‏‏‎‏‏‎ options] 118 | { 119 | name: "My Company" 120 | } 121 | ``` 122 | 123 | 124 | #### description 125 | 126 | - Type: `String` 127 | - `required` 128 | 129 | Application default description used across different meta tags as fallback when no page-specific description is provided. 130 | 131 | 132 | ```javascript[module‏‏‎‏‏‎ options] 133 | { 134 | description: "We craft amazing products." 135 | } 136 | ``` 137 | 138 | 139 | #### metaImage 140 | 141 | - Type: `Object` 142 | - Default: `{ og: undefined, tw: undefined }` 143 | 144 | Application default meta image used for Open Graph (`og`) and Twitter (`tw`) meta image tags as fallback when no page-specific meta image is provided. 145 | 146 | 147 | ```javascript[module‏‏‎‏‏‎ options] 148 | { 149 | metaImage: { 150 | og: "https://example.com/1200x630.jpg", 151 | tw: "https://example.com/1200x630.jpg" 152 | } 153 | } 154 | ``` 155 | 156 | 157 | > As of writing this, both Open Graph and Twitter prefer `1.91:1` for their image aspect ratio. 158 | 159 | #### twitterHandle 160 | 161 | - Type: `String` 162 | - Default: `undefined` 163 | 164 | Application Twitter handle used on `twitter:site` meta tag. 165 | 166 | 167 | ```javascript[module‏‏‎‏‏‎ options] 168 | { 169 | twitterHandle: "@li_hbr" 170 | } 171 | ``` 172 | 173 | 174 | #### backgroundColor 175 | 176 | - Type: `String` 177 | - Default: `"#fefefe"` 178 | 179 | Application background color used on `theme-color` meta tag. 180 | 181 | 182 | ```javascript[module‏‏‎‏‏‎ options] 183 | { 184 | backgroundColor: "#fff7f7" 185 | } 186 | ``` 187 | 188 | 189 | #### accentColor 190 | 191 | - Type: `String` 192 | - Default: `"#111111"` 193 | 194 | Application accent color used on `msapplication-TileColor` meta tag and `mask-icon` link tag. 195 | 196 | 197 | ```javascript[module‏‏‎‏‏‎ options] 198 | { 199 | accentColor: "#e84311" 200 | } 201 | ``` 202 | 203 | 204 | #### titleFormat 205 | 206 | - Type: `String` 207 | - Default: `"%page% - %site%"` 208 | 209 | Application title format used to define page title. `%page%` will get replaced by per-page provided title and `%site%` by mandatory `name` option. If no per-page title is provided on `name` gets displayed. 210 | 211 | 212 | ```javascript[module‏‏‎‏‏‎ options] 213 | { 214 | titleFormat: "%page% | %site%" 215 | } 216 | ``` 217 | 218 | 219 | #### url 220 | 221 | - Type: `String` 222 | - `required` 223 | 224 | Application URL required to define some meta tags. 225 | 226 | 227 | ```javascript[module‏‏‎‏‏‎ options] 228 | { 229 | url: "https://example.com" 230 | } 231 | ``` 232 | 233 | 234 | ### Configuration Defaults 235 | 236 | 237 | ```javascript[module‏‏‎ options] 238 | { 239 | lang: "en", 240 | name: "", 241 | description: "", 242 | metaImage: { 243 | og: undefined, 244 | tw: undefined 245 | }, 246 | twitterHandle: undefined, 247 | backgroundColor: "#fefefe", 248 | accentColor: "#111111", 249 | titleFormat: "%page% - %site%", 250 | url: undefined 251 | } 252 | ``` 253 | 254 | 255 | 256 | ### $buildHead 257 | 258 | 259 | #### title 260 | 261 | - Type: `String` 262 | - Default: `name` option provided to module, skipping `titleFormat` 263 | 264 | Page title used to build final page title following module `titleFormat` option. 265 | 266 | 267 | ```javascript[function‏‏‎‏‏‎ options] 268 | { 269 | title: "Home" 270 | } 271 | ``` 272 | 273 | 274 | #### description 275 | 276 | - Type: `String` 277 | - Default: `description` option provided to module 278 | 279 | Page description used across different meta tags. 280 | 281 | 282 | ```javascript[function‏‏‎‏‏‎ options] 283 | { 284 | description: "Welcome to My Company home page" 285 | } 286 | ``` 287 | 288 | 289 | #### metaImage 290 | 291 | - Type: `Object` 292 | - Default: `metaImage` option provided to module 293 | 294 | Page meta image used for Open Graph (`og`) and Twitter (`tw`) meta image tags. 295 | 296 | 297 | ```javascript[function‏‏‎‏‏‎ options] 298 | { 299 | metaImage: { 300 | og: "https://example.com/home-1200x630.jpg", 301 | tw: "https://example.com/home-1200x600.jpg" 302 | } 303 | } 304 | ``` 305 | 306 | 307 | > As of writing this, both Open Graph and Twitter prefer `1.91:1` for their image aspect ratio. 308 | 309 | #### path 310 | 311 | - Type: `String` 312 | - `required` 313 | 314 | Current page path used across different meta tags, you might want to stick with router path property: 315 | 316 | 317 | ```javascript[function‏‏‎‏‏‎ options] 318 | { 319 | path: this.$route.path 320 | } 321 | ``` 322 | 323 | 324 | #### additionalStructuredData 325 | 326 | - Type: `Array` 327 | - Default: `[]` 328 | 329 | Additional [structured data](https://developers.google.com/search/docs/guides/sd-policies) objects that will end up stringified and injected under an `application/ld+json` script. 330 | 331 | 332 | ```javascript[function‏‏‎‏‏‎ options] 333 | { 334 | additionalStructuredData: [ 335 | /* structured data objects */ 336 | ] 337 | } 338 | ``` 339 | 340 | 341 | 342 | 343 | Learn more about structured data on [Google's documentation](https://developers.google.com/search/docs/guides/sd-policies). 344 | 345 | 346 | -------------------------------------------------------------------------------- /docs/content/en/2.modules/2.payload.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "payload" 3 | description: "lihbr utils for Nuxt.js" 4 | category: "Modules" 5 | version: 0.1 6 | fullscreen: false 7 | menu: true 8 | menuTitle: "payload" 9 | badge: "" 10 | draft: false 11 | --- 12 | 13 | `@lihbr/utils-nuxt.payload` makes `context.payload` available in development (sorta). 14 | 15 | ## Installation 16 | 17 | Add `@lihbr/utils-nuxt.payload` dependency to your project: 18 | 19 | 20 | 21 | 22 | ```bash 23 | yarn add --dev @lihbr/utils-nuxt.payload 24 | ``` 25 | 26 | 27 | 28 | 29 | ```bash 30 | npm install --save-dev @lihbr/utils-nuxt.payload 31 | ``` 32 | 33 | 34 | 35 | 36 | Then, add `@lihbr/utils-nuxt.payload` to the `buildModules` section of your `nuxt.config.js` file: 37 | 38 | ```javascript[nuxt.config.js] 39 | export default { 40 | buildModules: [ 41 | [ 42 | "@lihbr/utils-nuxt.payload", 43 | { 44 | /* see configuration below for more */ 45 | } 46 | ] 47 | ] 48 | }; 49 | ``` 50 | 51 | ## Usage 52 | 53 | This module injects a `$pagePayload` method inside Nuxt.js context allowing you to resolve page payload provided through Nuxt.js [generate routes payload options](https://nuxtjs.org/guides/configuration-glossary/configuration-generate#speeding-up-dynamic-route-generation-with-payload): 54 | 55 | ```vue[~/pages/index.vue] 56 | 63 | ``` 64 | 65 | ## Reference 66 | 67 | ### Configuration 68 | 69 | #### payloadBaseRoute 70 | 71 | - Type: `String` 72 | - Default: `"/payload"` 73 | 74 | Base route from which payload will be served while in development. 75 | 76 | 77 | ```javascript[module‏‏‎‏‏‎ options] 78 | { 79 | payloadBaseRoute: "/dev/payload" 80 | } 81 | ``` 82 | 83 | 84 | ### Configuration Defaults 85 | 86 | 87 | ```javascript[module‏‏‎ options] 88 | { 89 | payloadBaseRoute: "/payload" 90 | } 91 | ``` 92 | 93 | -------------------------------------------------------------------------------- /docs/content/en/2.modules/3.statistics.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "statistics" 3 | description: "lihbr utils for Nuxt.js" 4 | category: "Modules" 5 | version: 0.1 6 | fullscreen: false 7 | menu: true 8 | menuTitle: "statistics" 9 | badge: "" 10 | draft: false 11 | features: 12 | - "Know how many pages per second you are generating" 13 | --- 14 | 15 | `@lihbr/utils-nuxt.statistics` provides some (not much) statistics when using Nuxt.js 16 | 17 | ## Features 18 | 19 | 20 | 21 | ## Installation 22 | 23 | Add `@lihbr/utils-nuxt.statistics` dependency to your project: 24 | 25 | 26 | 27 | 28 | ```bash 29 | yarn add --dev @lihbr/utils-nuxt.statistics 30 | ``` 31 | 32 | 33 | 34 | 35 | ```bash 36 | npm install --save-dev @lihbr/utils-nuxt.statistics 37 | ``` 38 | 39 | 40 | 41 | 42 | Then, add `@lihbr/utils-nuxt.statistics` to the `buildModules` section of your `nuxt.config.js` file: 43 | 44 | ```javascript[nuxt.config.js] 45 | export default { 46 | buildModules: [ 47 | [ 48 | "@lihbr/utils-nuxt.statistics", 49 | { 50 | /* see configuration below for more */ 51 | } 52 | ] 53 | ] 54 | }; 55 | ``` 56 | 57 | ## Reference 58 | 59 | ### Configuration 60 | 61 | #### ignore 62 | 63 | - Type: `Array` 64 | - Default: `[]` 65 | 66 | Tell which statistics functions to ignore. 67 | 68 | 69 | ```javascript[module‏‏‎‏‏‎ options] 70 | { 71 | // will ignore `generate` statistics functions 72 | // (currently the only one available) 73 | ignore: ["generate"] 74 | } 75 | ``` 76 | 77 | 78 | ### Configuration Defaults 79 | 80 | 81 | ```javascript[module‏‏‎ options] 82 | { 83 | ignore: [] 84 | } 85 | ``` 86 | 87 | -------------------------------------------------------------------------------- /docs/content/en/3.components/1.smart-link.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "smart-link" 3 | description: "lihbr utils for Nuxt.js" 4 | category: "Components" 5 | version: 0.1 6 | fullscreen: false 7 | menu: true 8 | menuTitle: "smart-link" 9 | badge: "" 10 | draft: false 11 | features: 12 | - "Automatically use the right link tag or component according to provided href" 13 | --- 14 | 15 | `@lihbr/utils-nuxt.smart-link` provides a generic link component to stop choosing between anchor tag or nuxt-link. 16 | 17 | ## Features 18 | 19 | 20 | 21 | ## Installation 22 | 23 | Add `@lihbr/utils-nuxt.smart-link` dependency to your project: 24 | 25 | 26 | 27 | 28 | ```bash 29 | yarn add @lihbr/utils-nuxt.smart-link 30 | ``` 31 | 32 | 33 | 34 | 35 | ```bash 36 | npm install @lihbr/utils-nuxt.smart-link 37 | ``` 38 | 39 | 40 | 41 | 42 | ## Usage 43 | 44 | Import `@lihbr/utils-nuxt.smart-link` into your components: 45 | 46 | ```vue[~/components/display/Card.vue] 47 | 56 | ``` 57 | 58 | Or register it globally through a Nuxt.js plugin (do not forget to register the plugin inside your `nuxt.config.js` file): 59 | 60 | ```javascript[~/plugins/smart-link.js] 61 | import Vue from "vue"; 62 | import SmartLink from "@lihbr/utils-nuxt.smart-link"; 63 | 64 | Vue.component("smart-link", SmartLink); 65 | ``` 66 | 67 | You can now use it in your Vue.js templates: 68 | 69 | 70 | ```vue[~/components/display/Card.vue] 71 | 87 | ``` 88 | 89 | 90 | ## Reference 91 | 92 | ### Props 93 | 94 | #### href 95 | 96 | - Type: `String` 97 | - Default: `""` 98 | 99 | Link href. 100 | 101 | 102 | ```html[component options] 103 | 104 | ``` 105 | 106 | 107 | #### blank 108 | 109 | - Type: `Boolean` 110 | - Default: `false` 111 | 112 | Opens link in a new page, even if internal. 113 | 114 | 115 | ```html[component options] 116 | 117 | ``` 118 | 119 | 120 | #### external 121 | 122 | - Type: `Boolean` 123 | - Default: `false` 124 | 125 | Force link to be considered as an external link using anchor tag. 126 | 127 | 128 | ```html[component options] 129 | 130 | ``` 131 | 132 | 133 | #### internal 134 | 135 | - Type: `Boolean` 136 | - Default: `false` 137 | 138 | Force link to be considered as an internal link using Nuxt.js link component. 139 | 140 | 141 | ```html[component options] 142 | 143 | ``` 144 | 145 | 146 | ### Props Defaults 147 | 148 | 149 | ```javascript[component props] 150 | { 151 | href: "", 152 | blank: false, 153 | external: false, 154 | internal: false 155 | } 156 | ``` 157 | 158 | -------------------------------------------------------------------------------- /docs/content/en/4.misc/1.env.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "env" 3 | description: "lihbr utils for Nuxt.js" 4 | category: "Miscellaneous" 5 | version: 0.1 6 | fullscreen: false 7 | menu: true 8 | menuTitle: "env" 9 | badge: "" 10 | draft: false 11 | features: 12 | - "Quickly get all the info you need to kickstart your Nuxt.js application" 13 | --- 14 | 15 | `@lihbr/utils-nuxt.env` configures an object from available environment variables to quickly setup a Nuxt.js application. 16 | 17 | 18 | 19 | Out of current packages, this one is probably the less agnostic one, I definitely need to figure out a way to make it more agnostic and actually usable. 20 | 21 | 22 | 23 | ## Features 24 | 25 | 26 | 27 | ## Installation 28 | 29 | Add `@lihbr/utils-nuxt.env` dependency to your project: 30 | 31 | 32 | 33 | 34 | ```bash 35 | yarn add --dev @lihbr/utils-nuxt.env 36 | ``` 37 | 38 | 39 | 40 | 41 | ```bash 42 | npm install --save-dev @lihbr/utils-nuxt.env 43 | ``` 44 | 45 | 46 | 47 | 48 | ## Usage 49 | 50 | Inside your `nuxt.config.js` file: 51 | 52 | ```javascript[nuxt.config.js] 53 | const envConfig = require("@lihbr/utils-nuxt.env"); 54 | const pkg = require("./package.json"); 55 | 56 | const env = envConfig(pkg, settings, GLOBAL_CONTENT); 57 | 58 | export default { 59 | /* your Nuxt.js configuration */ 60 | /* you can used parsed values from `env` in it */ 61 | }; 62 | ``` 63 | -------------------------------------------------------------------------------- /docs/content/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "lihbr/utils-nuxt", 3 | "description": "lihbr utils for Nuxt.js", 4 | "url": "https://utils-nuxt.lihbr.com", 5 | "layout": "docs", 6 | "logo": { 7 | "light": "/logo-light.svg", 8 | "dark": "/logo-dark.svg" 9 | }, 10 | "header": { 11 | "logo": true, 12 | "title": false 13 | }, 14 | "twitter": "@li_hbr", 15 | "github": { 16 | "repo": "lihbr/utils-nuxt", 17 | "branch": "master", 18 | "dir": "docs", 19 | "releases": false 20 | }, 21 | "credits": true 22 | } 23 | -------------------------------------------------------------------------------- /docs/nuxt.config.js: -------------------------------------------------------------------------------- 1 | import path from "path"; 2 | import { withDocus } from "docus"; 3 | 4 | export default withDocus({ 5 | css: [ 6 | path.join(__dirname, "/assets/css/main.css"), 7 | path.join(__dirname, "/assets/css/prism.css") 8 | ], 9 | generate: { 10 | fallback: true 11 | }, 12 | buildModules: [ 13 | [ 14 | "@nuxtjs/ackee", 15 | { 16 | server: process.env.ACKEE_ENDPOINT, 17 | domainId: process.env.ACKEE_ID, 18 | ignoreLocalhost: true, 19 | detailed: true 20 | } 21 | ] 22 | ] 23 | }); 24 | -------------------------------------------------------------------------------- /docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@lihbr/utils-nuxt.docs", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "nuxt", 7 | "build": "nuxt build", 8 | "start": "nuxt start", 9 | "generate": "nuxt generate" 10 | }, 11 | "dependencies": { 12 | "docus": "0.1.5", 13 | "nuxt-edge": "latest" 14 | }, 15 | "devDependencies": { 16 | "@nuxtjs/ackee": "3.0.1" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /docs/static/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihbr/utils-nuxt/645167e3b57f3668b1869ddb4f7eff36a3c59e8f/docs/static/icon.png -------------------------------------------------------------------------------- /docs/static/logo-dark--min.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /docs/static/logo-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /docs/static/logo-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /docs/static/preview-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihbr/utils-nuxt/645167e3b57f3668b1869ddb4f7eff36a3c59e8f/docs/static/preview-dark.png -------------------------------------------------------------------------------- /docs/static/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihbr/utils-nuxt/645167e3b57f3668b1869ddb4f7eff36a3c59e8f/docs/static/preview.png -------------------------------------------------------------------------------- /docs/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | theme: { 3 | extend: { 4 | colors: { 5 | primary: { 6 | 100: "#FFF2E6", 7 | 200: "#F9D0C4", 8 | 300: "#C5ADB2", 9 | 400: "#7284ba", 10 | 500: "#759F53", 11 | 600: "#e86b00", 12 | 700: "#ca2500", 13 | 800: "#7d2236", 14 | 900: "#162246" 15 | }, 16 | white: "#fffefe", 17 | gray: { 18 | 100: "#FFF2E6", 19 | 200: "#ECEBEB", 20 | 300: "#D0CDCD", 21 | 400: "#B3AFAF", 22 | 500: "#7B7474", 23 | 600: "#423838", 24 | 700: "#342b2b", 25 | // 700: "#282222", 26 | 800: "#1E1919", 27 | 900: "#131010" 28 | } 29 | } 30 | } 31 | } 32 | }; 33 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "independent", 3 | "npmClient": "yarn", 4 | "useWorkspaces": true, 5 | "conventionalCommits": true, 6 | "exact": true, 7 | "packages": ["packages/*"], 8 | "command": { 9 | "publish": { 10 | "npmClient": "npm" 11 | }, 12 | "version": { 13 | "allowBranch": "master", 14 | "message": "chore(release): publish new version" 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | # Global context 2 | [build] 3 | # Base directory 4 | base = "docs" 5 | # Build command 6 | command = "yarn generate" 7 | # Build directory 8 | publish = "dist/" 9 | # Serverless Lambda functions 10 | functions = "lambda/" 11 | 12 | # Enforce yarn 13 | [build.environment] 14 | NETLIFY_USE_YARN = "true" 15 | NODE_VERSION = "14.16.0" 16 | YARN_VERSION = "1.22.10" 17 | 18 | # Post processing configuration 19 | [build.processing] 20 | skip_processing = false 21 | [build.processing.html] 22 | pretty_urls = false 23 | [build.processing.css] 24 | bundle = false 25 | minify = false 26 | [build.processing.js] 27 | bundle = false 28 | minify = false 29 | [build.processing.images] 30 | compress = true 31 | 32 | # Deploy from production branch 33 | [context.production] 34 | 35 | [context.production.processing] 36 | skip_processing = false 37 | 38 | # Deploy from pull and merge request 39 | [context.deploy-preview] 40 | 41 | [context.deploy-preview.processing] 42 | skip_processing = true 43 | 44 | # Deploy from non production branches 45 | [context.branch-deploy] 46 | 47 | [context.branch-deploy.processing] 48 | skip_processing = true 49 | 50 | [[redirects]] 51 | from = "https://lihbr-utils-nuxt.netlify.app/*" 52 | to = "https://utils-nuxt.lihbr.com/:splat" 53 | status = 301 54 | force = true 55 | 56 | [[redirects]] 57 | from = "https://utils-nuxt.lucie.red/*" 58 | to = "https://utils-nuxt.lihbr.com/:splat" 59 | status = 301 60 | force = true 61 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "utils-nuxt", 3 | "description": "lihbr utils for Nuxt.js", 4 | "private": true, 5 | "author": "Lucie Haberer (https://lihbr.com)", 6 | "license": "MIT", 7 | "scripts": { 8 | "lerna": "lerna", 9 | "lerna:version": "lerna version --no-push", 10 | "postlerna:version": "echo If everything is ok run `git push --follow-tags` then `yarn lerna:publish`", 11 | "lerna:publish": "lerna publish from-package", 12 | "postinstall": "lerna link", 13 | "lint": "eslint --ext .js,.ts ." 14 | }, 15 | "engines": { 16 | "node": ">=12.0.0" 17 | }, 18 | "repository": { 19 | "type": "git", 20 | "url": "ssh://git@github.com/lihbr/utils-nuxt.git" 21 | }, 22 | "workspaces": [ 23 | "packages/*" 24 | ], 25 | "husky": { 26 | "hooks": { 27 | "pre-commit": "yarn lint", 28 | "commit-msg": "commitlint --env HUSKY_GIT_PARAMS" 29 | } 30 | }, 31 | "devDependencies": { 32 | "@commitlint/cli": "12.1.1", 33 | "@commitlint/config-conventional": "12.1.1", 34 | "babel-eslint": "10.1.0", 35 | "eslint": "7.24.0", 36 | "eslint-config-prettier": "8.1.0", 37 | "eslint-plugin-prettier": "3.3.1", 38 | "husky": "4.3.8", 39 | "lerna": "4.0.0", 40 | "prettier": "2.2.1" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /packages/env/.env.example: -------------------------------------------------------------------------------- 1 | # Meta ##################################################### 2 | 3 | # Application Name 4 | # Non mandatory, used as a fallback if no datalayer value given 5 | # Defaults to package.name 6 | # APP_NAME= 7 | 8 | # Application Title Format 9 | # Non mandatory, used as a fallback if no datalayer value given 10 | # Defaults to %page% - %site% 11 | # APP_TITLE_FORMAT= 12 | 13 | # Application Description 14 | # Non mandatory, used as a fallback if no datalayer value given 15 | # Defaults to package.description 16 | # APP_DESC= 17 | 18 | # Open Graph Default Image 19 | # Non mandatory, used as a fallback if no datalayer value given 20 | # APP_METAIMG_OG= 21 | 22 | # Twitter Default Image 23 | # Non mandatory, used as a fallback if no datalayer value given 24 | # APP_METAIMG_TW= 25 | 26 | # Application Twitter Handle (without @) 27 | # Non mandatory, used as a fallback if no datalayer value given 28 | # APP_TWITTER_HANDLE= 29 | 30 | # Application Background Color 31 | # Non mandatory, used as a fallback if no datalayer value given 32 | # Defaults to #fefefe 33 | # APP_BACKGROUND_COLOR= 34 | 35 | # Application Accent Color 36 | # Non mandatory, used as a fallback if no datalayer value given 37 | # Defaults to #111111 38 | # APP_ACCENT_COLOR= 39 | 40 | # Usage #################################################### 41 | 42 | # Application Host 43 | # Non mandatory, used for development mainly 44 | # Defaults to localhost 45 | # APP_HOST=192.168.1.16 46 | 47 | # Application Port 48 | # Non mandatory, used for development mainly 49 | # Defaults to 3000 50 | # APP_PORT=8888 51 | 52 | # Application Url 53 | # Mandatory for production, fallback to http://$APP_HOST:$APP_PORT 54 | APP_URL= 55 | 56 | # Application Main Language 57 | # Non mandatory, used as a fallback if no datalayer value given 58 | # Defaults to en 59 | # APP_LANG= 60 | 61 | # Misc ##################################################### 62 | -------------------------------------------------------------------------------- /packages/env/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | ## [0.3.2](https://github.com/lihbr/utils-nuxt/compare/@lihbr/utils-nuxt.env@0.3.1...@lihbr/utils-nuxt.env@0.3.2) (2021-04-13) 7 | 8 | **Note:** Version bump only for package @lihbr/utils-nuxt.env 9 | 10 | 11 | 12 | 13 | 14 | ## [0.3.1](https://github.com/lihbr/utils-nuxt/compare/@lihbr/utils-nuxt.env@0.3.0...@lihbr/utils-nuxt.env@0.3.1) (2021-02-23) 15 | 16 | **Note:** Version bump only for package @lihbr/utils-nuxt.env 17 | 18 | 19 | 20 | 21 | 22 | # [0.3.0](https://github.com/lihbr/utils-nuxt/compare/@lihbr/utils-nuxt.env@0.2.0...@lihbr/utils-nuxt.env@0.3.0) (2020-12-18) 23 | 24 | 25 | ### Features 26 | 27 | * **env:** remove tracking variables ([353ca7f](https://github.com/lihbr/utils-nuxt/commit/353ca7fd3cfeff41786eed81c4d323346fad0bc8)) 28 | 29 | 30 | 31 | 32 | 33 | # [0.2.0](https://github.com/lihbr/utils-nuxt/compare/@lihbr/utils-nuxt.env@0.1.2...@lihbr/utils-nuxt.env@0.2.0) (2020-10-25) 34 | 35 | 36 | ### Features 37 | 38 | * **env:** remove consola from client side ([725ac87](https://github.com/lihbr/utils-nuxt/commit/725ac87efef52d9a183fd15fa5f320a7fd34743a)) 39 | 40 | 41 | 42 | 43 | 44 | ## [0.1.2](https://github.com/lihbr/utils-nuxt/compare/@lihbr/utils-nuxt.env@0.1.1...@lihbr/utils-nuxt.env@0.1.2) (2020-09-30) 45 | 46 | 47 | ### Bug Fixes 48 | 49 | * **env:** wrong utils export ([2d4eaa5](https://github.com/lihbr/utils-nuxt/commit/2d4eaa52e5ba64af6c08ff29c1bba8b41f017628)) 50 | 51 | 52 | 53 | 54 | 55 | ## 0.1.1 (2020-09-30) 56 | 57 | **Note:** Version bump only for package @lihbr/utils-nuxt.env 58 | -------------------------------------------------------------------------------- /packages/env/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@lihbr/utils-nuxt.env", 3 | "version": "0.3.2", 4 | "description": "lihbr utils for Nuxt.js", 5 | "author": "Lucie Haberer (https://lihbr.com)", 6 | "license": "MIT", 7 | "main": "src/index.js", 8 | "files": [ 9 | "src" 10 | ], 11 | "engines": { 12 | "node": ">=12.0.0" 13 | }, 14 | "publishConfig": { 15 | "access": "public" 16 | }, 17 | "repository": { 18 | "type": "git", 19 | "url": "ssh://git@github.com/lihbr/utils-nuxt.git", 20 | "directory": "packages/env" 21 | }, 22 | "dependencies": { 23 | "lodash": "^4.17.21" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /packages/env/src/index.js: -------------------------------------------------------------------------------- 1 | const get = require("lodash/get"); 2 | 3 | const { firstTrue } = require("./utils"); 4 | 5 | /** 6 | * Configure app shared env variables 7 | * @param {Object} pkg - package.json content 8 | * @param {Object} settings - settings from datalayer // TODO: Normalize settings 9 | * @param {Object} GLOBAL_CONTENT - global content to load, just gets forwarded to the returned value 10 | * @return {Object} - built env object 11 | */ 12 | const configure = (pkg = {}, settings = {}, GLOBAL_CONTENT) => { 13 | // TRUE if in development mode 14 | const DEV = process.env.NODE_ENV === "development"; 15 | // Commit reference env variable 16 | const COMMIT_REF = firstTrue(process.env.COMMIT_REF, "unknown"); 17 | // Repository url env variable 18 | const REPOSITORY_URL = firstTrue(process.env.REPOSITORY_URL, "unknown"); 19 | 20 | /** 21 | * Meta 22 | */ 23 | 24 | // Application name 25 | const APP_NAME = firstTrue( 26 | settings.site_title, 27 | process.env.APP_NAME, 28 | pkg.name 29 | ); 30 | // Application name 31 | const APP_TITLE_FORMAT = firstTrue( 32 | settings.title_format, 33 | process.env.APP_TITLE_FORMAT, 34 | "%page% - %site%" 35 | ); 36 | // Application description 37 | const APP_DESC = firstTrue( 38 | settings.site_description, 39 | process.env.APP_DESC, 40 | pkg.description 41 | ); 42 | // Open graph default image 43 | const APP_METAIMG_OG = firstTrue( 44 | get(settings, "site_image.url"), 45 | process.env.APP_METAIMG_OG, 46 | "" 47 | ); 48 | // Twitter default image 49 | const APP_METAIMG_TW = firstTrue( 50 | get(settings, "site_image.twitter_variant.url"), 51 | process.env.APP_METAIMG_TW, 52 | "" 53 | ); 54 | // Application linked twitter handle (without @) 55 | const APP_TWITTER_HANDLE = firstTrue( 56 | settings.site_twitter_handle, 57 | process.env.APP_TWITTER_HANDLE, 58 | "" 59 | ); 60 | // Application background color 61 | const APP_BACKGROUND_COLOR = firstTrue( 62 | settings.site_background_color, 63 | process.env.APP_BACKGROUND_COLOR, 64 | "#fefefe" 65 | ); 66 | // Application accent color 67 | const APP_ACCENT_COLOR = firstTrue( 68 | settings.site_accent_color, 69 | process.env.APP_ACCENT_COLOR, 70 | "#111111" 71 | ); 72 | 73 | /** 74 | * Usage 75 | */ 76 | 77 | // Application host 78 | const APP_HOST = firstTrue(process.env.APP_HOST, "localhost"); 79 | // Application port 80 | const APP_PORT = firstTrue(process.env.APP_PORT, 3000); 81 | // Application url 82 | const APP_URL = (() => { 83 | if (DEV) { 84 | return `http://${APP_HOST}:${APP_PORT}`; 85 | } else { 86 | if (process.env.APP_URL) { 87 | return process.env.APP_URL; 88 | } else { 89 | /* eslint-disable-next-line prettier/prettier */ 90 | throw new Error("`process.env.APP_URL` should be defined when `NODE_ENV !== \"development\"`!"); 91 | } 92 | } 93 | })(); 94 | // Application main language 95 | const APP_LANG = firstTrue( 96 | settings.site_language, 97 | process.env.APP_LANG, 98 | "en" 99 | ); 100 | 101 | return { 102 | DEV, 103 | COMMIT_REF, 104 | REPOSITORY_URL, 105 | 106 | APP_NAME, 107 | APP_TITLE_FORMAT, 108 | APP_DESC, 109 | APP_METAIMG_OG, 110 | APP_METAIMG_TW, 111 | APP_TWITTER_HANDLE, 112 | APP_BACKGROUND_COLOR, 113 | APP_ACCENT_COLOR, 114 | 115 | APP_HOST, 116 | APP_PORT, 117 | APP_URL, 118 | APP_LANG, 119 | 120 | GLOBAL_CONTENT 121 | }; 122 | }; 123 | 124 | module.exports = configure; 125 | -------------------------------------------------------------------------------- /packages/env/src/utils/firstTrue.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Get first element evaluating to true otherwise the last one 3 | * @param {...any} options - options to loop through 4 | * @return {any} - element found 5 | */ 6 | const firstTrue = (...options) => 7 | options.find(i => i) || options[options.length - 1]; 8 | 9 | module.exports = firstTrue; 10 | -------------------------------------------------------------------------------- /packages/env/src/utils/index.js: -------------------------------------------------------------------------------- 1 | const firstTrue = require("./firstTrue"); 2 | 3 | module.exports = { 4 | firstTrue 5 | }; 6 | -------------------------------------------------------------------------------- /packages/env/test/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihbr/utils-nuxt/645167e3b57f3668b1869ddb4f7eff36a3c59e8f/packages/env/test/.gitkeep -------------------------------------------------------------------------------- /packages/head/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | ## [0.2.2](https://github.com/lihbr/utils-nuxt/compare/@lihbr/utils-nuxt.head@0.2.1...@lihbr/utils-nuxt.head@0.2.2) (2021-04-13) 7 | 8 | **Note:** Version bump only for package @lihbr/utils-nuxt.head 9 | 10 | 11 | 12 | 13 | 14 | ## [0.2.1](https://github.com/lihbr/utils-nuxt/compare/@lihbr/utils-nuxt.head@0.2.0...@lihbr/utils-nuxt.head@0.2.1) (2021-02-23) 15 | 16 | **Note:** Version bump only for package @lihbr/utils-nuxt.head 17 | 18 | 19 | 20 | 21 | 22 | # [0.2.0](https://github.com/lihbr/utils-nuxt/compare/@lihbr/utils-nuxt.head@0.1.0...@lihbr/utils-nuxt.head@0.2.0) (2020-11-13) 23 | 24 | 25 | ### Features 26 | 27 | * **head:** handle canonical url ([25df84c](https://github.com/lihbr/utils-nuxt/commit/25df84c3cff47c44390650b832e9023a5a4d5aff)) 28 | 29 | 30 | 31 | 32 | 33 | # 0.1.0 (2020-09-30) 34 | 35 | 36 | ### Features 37 | 38 | * **head:** migrate package ([d869c3b](https://github.com/lihbr/utils-nuxt/commit/d869c3b5bf9c9c87eb44c39168a803c6f852915b)) 39 | -------------------------------------------------------------------------------- /packages/head/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@lihbr/utils-nuxt.head", 3 | "version": "0.2.2", 4 | "description": "lihbr utils for Nuxt.js", 5 | "author": "Lucie Haberer (https://lihbr.com)", 6 | "license": "MIT", 7 | "main": "src/index.js", 8 | "files": [ 9 | "src" 10 | ], 11 | "engines": { 12 | "node": ">=12.0.0" 13 | }, 14 | "publishConfig": { 15 | "access": "public" 16 | }, 17 | "repository": { 18 | "type": "git", 19 | "url": "ssh://git@github.com/lihbr/utils-nuxt.git", 20 | "directory": "packages/head" 21 | }, 22 | "dependencies": { 23 | "consola": "^2.15.3", 24 | "lodash": "^4.17.21" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /packages/head/src/index.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const defaultsDeep = require("lodash/defaultsDeep"); 3 | 4 | const setGlobal = require("./setGlobal"); 5 | 6 | const logger = require("./logger"); 7 | 8 | module.exports = function (moduleOptions) { 9 | /** 10 | * Options 11 | */ 12 | const options = defaultsDeep(moduleOptions, { 13 | lang: "en", 14 | name: "", 15 | description: "", 16 | metaImage: { 17 | og: undefined, 18 | tw: undefined 19 | }, 20 | twitterHandle: undefined, 21 | backgroundColor: "#fefefe", 22 | accentColor: "#111111", 23 | titleFormat: "%page% - %site%", 24 | url: undefined 25 | }); 26 | 27 | // Sanitize twitter handle if provided 28 | if (options.twitterHandle && !options.twitterHandle.startsWith("@")) { 29 | options.twitterHandle = `@${options.twitterHandle}`; 30 | } 31 | 32 | /** 33 | * Checks 34 | */ 35 | if (typeof this.options.head === "function") { 36 | return logger.fatal( 37 | /* eslint-disable-next-line prettier/prettier */ 38 | "\"head\" is provided as a function which is not supported by head module, disabling module" 39 | ); 40 | } 41 | 42 | const mandatoryOptionsKeys = ["name", "description", "url"]; 43 | for (const key of mandatoryOptionsKeys) { 44 | if (!options[key]) { 45 | return logger.fatal( 46 | /* eslint-disable-next-line prettier/prettier */ 47 | `"options.${key}" is required for head module to work, disabling module` 48 | ); 49 | } 50 | } 51 | 52 | /** 53 | * Global 54 | */ 55 | 56 | // Main 57 | setGlobal.main.call(this, options); 58 | // Meta 59 | setGlobal.meta.call(this, options); 60 | // Link 61 | setGlobal.link.call(this, options); 62 | 63 | /** 64 | * Plugin 65 | */ 66 | this.addPlugin({ 67 | src: path.resolve(__dirname, "plugin.js"), 68 | fileName: "buildHead.js", 69 | options 70 | }); 71 | 72 | logger.success("Head module initialized"); 73 | }; 74 | -------------------------------------------------------------------------------- /packages/head/src/logger.js: -------------------------------------------------------------------------------- 1 | const consola = require("consola"); 2 | 3 | module.exports = consola.withScope("@lihbr/utils-nuxt.head"); 4 | -------------------------------------------------------------------------------- /packages/head/src/plugin.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | 3 | const TITLE_FORMAT = "<%= options.titleFormat %>"; 4 | const APP_NAME = "<%= options.name %>"; 5 | const APP_DESCRIPTION = "<%= options.description %>"; 6 | const APP_URL = "<%= options.url %>"; 7 | 8 | const TITLE_LIMIT = 50; 9 | const DESCRIPTION_LIMIT = 155; 10 | const __undefined = "__undefined"; 11 | 12 | /** 13 | * Cap a string to a given number of characters correctly 14 | * @param {String} string - string to work on 15 | * @param {Number} limit - max number of characters 16 | * @return {String} - capped string 17 | */ 18 | const limitLength = (string = "", limit = -1) => { 19 | let sanitizedString = string.trim(); 20 | if (limit > 0 && sanitizedString.length > limit) { 21 | sanitizedString = sanitizedString.slice(0, limit); 22 | sanitizedString = sanitizedString.slice( 23 | 0, 24 | sanitizedString.lastIndexOf(" ") 25 | ); 26 | sanitizedString = `${sanitizedString}...`; 27 | } 28 | return sanitizedString; 29 | }; 30 | 31 | /** 32 | * Check if string is undefined 33 | * @param {String} str - string to check 34 | * @return {Boolean} - true if equal to undefined constant 35 | */ 36 | const isUndefined = str => str === __undefined; 37 | 38 | /** 39 | * Get page title according to title format 40 | * @param {String} pageTitle - page title 41 | */ 42 | const metaTitleTemplate = pageTitle => { 43 | if (!isUndefined(pageTitle) && pageTitle && pageTitle.trim()) { 44 | return TITLE_FORMAT.replace("%site%", APP_NAME).replace( 45 | "%page%", 46 | limitLength(pageTitle, TITLE_LIMIT) 47 | ); 48 | } else { 49 | return APP_NAME; 50 | } 51 | }; 52 | 53 | const metaDescriptionTemplate = pageDescription => { 54 | if ( 55 | !isUndefined(pageDescription) && 56 | pageDescription && 57 | pageDescription.trim() 58 | ) { 59 | return limitLength(pageDescription, DESCRIPTION_LIMIT); 60 | } else { 61 | return APP_DESCRIPTION; 62 | } 63 | }; 64 | 65 | Vue.prototype.$buildHead = ({ 66 | title = __undefined, 67 | description = __undefined, 68 | metaImage = { og: undefined, tw: undefined }, 69 | path, 70 | additionalStructuredData = [] 71 | } = {}) => { 72 | const url = path ? `${APP_URL}${path}`.replace(/\/$/, "") : APP_URL; 73 | 74 | const itempropMeta = [ 75 | { 76 | hid: "itemprop_name", 77 | itemprop: "name", 78 | content: title, 79 | template: metaTitleTemplate 80 | }, 81 | { 82 | hid: "itemprop_description", 83 | itemprop: "description", 84 | content: description, 85 | template: metaDescriptionTemplate 86 | } 87 | ]; 88 | 89 | const ogMeta = [ 90 | { 91 | hid: "og:url", 92 | property: "og:url", 93 | content: url 94 | }, 95 | { 96 | hid: "og:title", 97 | property: "og:title", 98 | content: title, 99 | template: metaTitleTemplate 100 | }, 101 | { 102 | hid: "og:description", 103 | property: "og:description", 104 | content: description, 105 | template: metaDescriptionTemplate 106 | } 107 | ]; 108 | 109 | if (metaImage.og) { 110 | itempropMeta.push({ 111 | hid: "itemprop_image", 112 | itemprop: "image", 113 | content: metaImage.og 114 | }); 115 | 116 | ogMeta.push({ 117 | hid: "og:image", 118 | property: "og:image", 119 | content: metaImage.og 120 | }); 121 | } 122 | 123 | const twitterMeta = [ 124 | { 125 | hid: "twitter:title", 126 | name: "twitter:title", 127 | content: title, 128 | template: metaTitleTemplate 129 | }, 130 | { 131 | hid: "twitter:description", 132 | name: "twitter:description", 133 | content: description, 134 | template: metaDescriptionTemplate 135 | } 136 | ]; 137 | 138 | if (metaImage.tw) { 139 | twitterMeta.push({ 140 | hid: "twitter:image", 141 | name: "twitter:image", 142 | content: metaImage.tw 143 | }); 144 | } 145 | 146 | return { 147 | title, 148 | titleTemplate: metaTitleTemplate, 149 | link: [{ rel: "canonical", href: url }], 150 | meta: [ 151 | { 152 | hid: "description", 153 | name: "description", 154 | content: description, 155 | template: metaDescriptionTemplate 156 | }, 157 | 158 | ...itempropMeta, 159 | ...ogMeta, 160 | ...twitterMeta 161 | ], 162 | script: [ 163 | { 164 | hid: "structuredData", 165 | type: "application/ld+json", 166 | json: [ 167 | { 168 | "@context": "http://schema.org", 169 | "@type": "WebSite", 170 | url, 171 | name: title, 172 | alternateName: APP_NAME 173 | }, 174 | ...additionalStructuredData 175 | ] 176 | } 177 | ] 178 | }; 179 | }; 180 | -------------------------------------------------------------------------------- /packages/head/src/setGlobal/index.js: -------------------------------------------------------------------------------- 1 | const main = require("./main"); 2 | const meta = require("./meta"); 3 | const link = require("./link"); 4 | 5 | module.exports = { 6 | main, 7 | meta, 8 | link 9 | }; 10 | -------------------------------------------------------------------------------- /packages/head/src/setGlobal/link.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Set head link 3 | * @param {Object} options - module options object 4 | */ 5 | const link = function (options) { 6 | this.options.head.link = this.options.head.link || []; 7 | this.options.head.link.push( 8 | { rel: "icon", type: "image/x-icon", href: "/favicon.ico" }, 9 | { 10 | rel: "apple-touch-icon", 11 | sizes: "180x180", 12 | href: "/apple-touch-icon.png" 13 | }, 14 | { 15 | rel: "icon", 16 | type: "image/png", 17 | sizes: "32x32", 18 | href: "/favicon-32x32.png" 19 | }, 20 | { 21 | rel: "icon", 22 | type: "image/png", 23 | sizes: "16x16", 24 | href: "/favicon-16x16.png" 25 | }, 26 | { 27 | rel: "mask-icon", 28 | href: "/safari-pinned-tab.svg", 29 | color: options.accentColor 30 | } 31 | ); 32 | }; 33 | 34 | module.exports = link; 35 | -------------------------------------------------------------------------------- /packages/head/src/setGlobal/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Set head main keys 3 | * @param {Object} options - module options object 4 | */ 5 | const main = function (options) { 6 | // HTML attributes 7 | this.options.head.htmlAttrs = this.options.head.htmlAttrs || {}; 8 | this.options.head.htmlAttrs.lang = 9 | this.options.head.htmlAttrs.lang || options.lang; 10 | this.options.head.htmlAttrs.itemscope = true; 11 | this.options.head.htmlAttrs.itemtype = "http://schema.org/WebPage"; 12 | }; 13 | 14 | module.exports = main; 15 | -------------------------------------------------------------------------------- /packages/head/src/setGlobal/meta.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Set head meta 3 | * @param {Object} options - module options object 4 | */ 5 | const meta = function (options) { 6 | const itempropMeta = []; 7 | 8 | const ogMeta = [ 9 | { 10 | hid: "og:site_name", 11 | property: "og:site_name", 12 | content: options.name 13 | }, 14 | { 15 | hid: "og:type", 16 | property: "og:type", 17 | content: "website" 18 | } 19 | ]; 20 | 21 | if (options.metaImage.og) { 22 | itempropMeta.push({ 23 | hid: "itemprop_image", 24 | itemprop: "image", 25 | content: options.metaImage.og 26 | }); 27 | 28 | ogMeta.push({ 29 | hid: "og:image", 30 | property: "og:image", 31 | content: options.metaImage.og 32 | }); 33 | } 34 | 35 | const twitterMeta = [ 36 | { 37 | hid: "twitter:card", 38 | name: "twitter:card", 39 | content: "summary_large_image" 40 | } 41 | ]; 42 | 43 | if (options.metaImage.tw) { 44 | twitterMeta.push({ 45 | hid: "twitter:image", 46 | name: "twitter:image", 47 | content: options.metaImage.tw 48 | }); 49 | } 50 | 51 | if (options.twitterHandle) { 52 | twitterMeta.push({ 53 | hid: "twitter:site", 54 | name: "twitter:site", 55 | content: options.twitterHandle 56 | }); 57 | } 58 | 59 | this.options.head.meta = this.options.head.meta || []; 60 | this.options.head.meta.push( 61 | { charset: "utf-8" }, 62 | { 63 | name: "viewport", 64 | content: "width=device-width, initial-scale=1" 65 | }, 66 | 67 | ...itempropMeta, 68 | ...ogMeta, 69 | ...twitterMeta, 70 | 71 | { name: "msapplication-TileColor", content: options.accentColor }, 72 | { name: "theme-color", content: options.backgroundColor } 73 | ); 74 | }; 75 | 76 | module.exports = meta; 77 | -------------------------------------------------------------------------------- /packages/head/test/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihbr/utils-nuxt/645167e3b57f3668b1869ddb4f7eff36a3c59e8f/packages/head/test/.gitkeep -------------------------------------------------------------------------------- /packages/payload/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | ## [0.1.3](https://github.com/lihbr/utils-nuxt/compare/@lihbr/utils-nuxt.payload@0.1.2...@lihbr/utils-nuxt.payload@0.1.3) (2021-04-13) 7 | 8 | **Note:** Version bump only for package @lihbr/utils-nuxt.payload 9 | 10 | 11 | 12 | 13 | 14 | ## [0.1.2](https://github.com/lihbr/utils-nuxt/compare/@lihbr/utils-nuxt.payload@0.1.1...@lihbr/utils-nuxt.payload@0.1.2) (2021-02-23) 15 | 16 | **Note:** Version bump only for package @lihbr/utils-nuxt.payload 17 | 18 | 19 | 20 | 21 | 22 | ## [0.1.1](https://github.com/lihbr/utils-nuxt/compare/@lihbr/utils-nuxt.payload@0.1.0...@lihbr/utils-nuxt.payload@0.1.1) (2020-10-23) 23 | 24 | **Note:** Version bump only for package @lihbr/utils-nuxt.payload 25 | 26 | 27 | 28 | 29 | 30 | # 0.1.0 (2020-09-30) 31 | 32 | 33 | ### Features 34 | 35 | * **payload:** migrate package ([0fba630](https://github.com/lihbr/utils-nuxt/commit/0fba6308e753d8183b543d3d3130474b1757bfb7)) 36 | -------------------------------------------------------------------------------- /packages/payload/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@lihbr/utils-nuxt.payload", 3 | "version": "0.1.3", 4 | "description": "lihbr utils for Nuxt.js", 5 | "author": "Lucie Haberer (https://lihbr.com)", 6 | "license": "MIT", 7 | "main": "src/index.js", 8 | "files": [ 9 | "src" 10 | ], 11 | "engines": { 12 | "node": ">=12.0.0" 13 | }, 14 | "publishConfig": { 15 | "access": "public" 16 | }, 17 | "repository": { 18 | "type": "git", 19 | "url": "ssh://git@github.com/lihbr/utils-nuxt.git", 20 | "directory": "packages/payload" 21 | }, 22 | "dependencies": { 23 | "consola": "^2.15.3", 24 | "isomorphic-unfetch": "^3.1.0", 25 | "lodash": "^4.17.21" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /packages/payload/src/index.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const defaultsDeep = require("lodash/defaultsDeep"); 3 | 4 | const logger = require("./logger"); 5 | 6 | module.exports = async function (moduleOptions) { 7 | /** 8 | * Options 9 | */ 10 | const options = defaultsDeep(moduleOptions, { 11 | payloadBaseRoute: "/payload" 12 | }); 13 | 14 | /** 15 | * Checks 16 | */ 17 | if (!this.options.generate) { 18 | return logger.fatal( 19 | /* eslint-disable-next-line prettier/prettier */ 20 | "\"generate\" object is not defined in \"nuxt.config.js\", disabling module" 21 | ); 22 | } else if (!this.options.generate.routes) { 23 | return logger.fatal( 24 | /* eslint-disable-next-line prettier/prettier */ 25 | "\"generate.routes\" array is not defined in \"nuxt.config.js\", disabling module" 26 | ); 27 | } 28 | 29 | if (!this.options.generate.fallback) { 30 | logger.warn( 31 | /* eslint-disable-next-line prettier/prettier */ 32 | "\"generate.fallback\" should most likely be set to \"true\" for production" 33 | ); 34 | } 35 | 36 | /** 37 | * Config 38 | */ 39 | const posixPayloadBaseRoute = path.posix.join("/", options.payloadBaseRoute); 40 | 41 | /** 42 | * Plugin 43 | */ 44 | this.addPlugin({ 45 | src: path.resolve(__dirname, "plugin.js"), 46 | fileName: "pagePayload.js", 47 | options: { 48 | base: posixPayloadBaseRoute, 49 | dev: this.options.dev 50 | } 51 | }); 52 | 53 | /** 54 | * Hooks 55 | */ 56 | 57 | // Mock payload in developement 58 | if (this.options.dev) { 59 | this.addServerMiddleware({ 60 | path: posixPayloadBaseRoute, 61 | handler: (req, res) => { 62 | // Find route path 63 | let path = req.originalUrl 64 | .replace(new RegExp(`^${posixPayloadBaseRoute}`), "") 65 | .replace(/\/+$/, ""); 66 | if (!path.startsWith("/")) { 67 | path = `/${path}`; 68 | } 69 | 70 | // Set body 71 | let body = {}; 72 | const maybeRoute = this.options.generate.routes.find( 73 | route => route.route === path 74 | ); 75 | if (typeof maybeRoute === "object" && maybeRoute.payload) { 76 | res.statusCode = 200; 77 | body = { 78 | status: 200, 79 | msg: "ok", 80 | data: maybeRoute.payload 81 | }; 82 | } else { 83 | logger.error( 84 | `Payload not found for path: \"${path}\", this will cause throw a 404 in production!` 85 | ); 86 | res.statusCode = 404; 87 | body = { 88 | status: 404, 89 | msg: "not found", 90 | error: {} 91 | }; 92 | } 93 | 94 | // Send response 95 | res.setHeader("Access-Control-Allow-Origin", "*"); 96 | res.setHeader("Content-Type", "application/json"); 97 | res.end(JSON.stringify(body)); 98 | } 99 | }); 100 | } 101 | 102 | logger.success("Payload module initialized"); 103 | }; 104 | -------------------------------------------------------------------------------- /packages/payload/src/logger.js: -------------------------------------------------------------------------------- 1 | const consola = require("consola"); 2 | 3 | module.exports = consola.withScope("@lihbr/utils-nuxt.payload"); 4 | -------------------------------------------------------------------------------- /packages/payload/src/plugin.js: -------------------------------------------------------------------------------- 1 | <% if (options.dev) { %>import fetch from "isomorphic-unfetch";<% } %> 2 | 3 | class NotFoundError extends Error { 4 | statusCode = 404; 5 | 6 | constructor(path) { 7 | super(`No payload found for route "${path}" with $pagePayload function and preview is disabled, throwing 404.`); 8 | } 9 | } 10 | 11 | export default context => { 12 | // TODO: Refactor into 2 functions 13 | const handleError = err => { 14 | if (context.$logger) { 15 | context.$logger.error(err); 16 | } else { 17 | console.error(err); 18 | } 19 | 20 | <% if (options.dev) { %> 21 | // Errors happening outside of dev mode should be leggit 404s 22 | if (context.$sentry) { 23 | context.$sentry.captureException(err); 24 | } 25 | <% } %> 26 | 27 | if (err instanceof NotFoundError) { 28 | context.error({ statusCode: err.statusCode, message: "" }); 29 | } else if (err.status) { 30 | context.error({ statusCode: err.status, message: "" }); 31 | } else { 32 | context.error({ statusCode: 0, message: "" }); 33 | } 34 | }; 35 | 36 | context.$pagePayload = async context => { 37 | if (context.payload) { 38 | return { data: context.payload }; 39 | } else { 40 | <% if (options.dev) { %> 41 | const base = "<%= options.base %>"; 42 | const normalizedPath = context.route.path.replace(/\/+$/, ""); 43 | const url = `${process.env.APP_URL}${base}${normalizedPath}`; 44 | 45 | try { 46 | const response = await fetch(url); 47 | if (!response.ok) { 48 | throw response; // non-200 code 49 | } 50 | const { data } = await response.json(); 51 | return { data }; 52 | } catch (err) { 53 | handleError(err); 54 | } 55 | <% } else { %> 56 | handleError(new NotFoundError(context.route.path)); 57 | <% } %> 58 | } 59 | }; 60 | }; 61 | -------------------------------------------------------------------------------- /packages/payload/test/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihbr/utils-nuxt/645167e3b57f3668b1869ddb4f7eff36a3c59e8f/packages/payload/test/.gitkeep -------------------------------------------------------------------------------- /packages/smart-link/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | ## [0.2.2](https://github.com/lihbr/utils-nuxt/compare/@lihbr/utils-nuxt.smart-link@0.2.1...@lihbr/utils-nuxt.smart-link@0.2.2) (2021-04-13) 7 | 8 | **Note:** Version bump only for package @lihbr/utils-nuxt.smart-link 9 | 10 | 11 | 12 | 13 | 14 | ## [0.2.1](https://github.com/lihbr/utils-nuxt/compare/@lihbr/utils-nuxt.smart-link@0.2.0...@lihbr/utils-nuxt.smart-link@0.2.1) (2021-02-23) 15 | 16 | **Note:** Version bump only for package @lihbr/utils-nuxt.smart-link 17 | 18 | 19 | 20 | 21 | 22 | # [0.2.0](https://github.com/lihbr/utils-nuxt/compare/@lihbr/utils-nuxt.smart-link@0.1.1...@lihbr/utils-nuxt.smart-link@0.2.0) (2020-10-25) 23 | 24 | 25 | ### Features 26 | 27 | * **smart-link:** remove consola from client side ([8fcccee](https://github.com/lihbr/utils-nuxt/commit/8fccceed9c67f2eda089d3ffb7947ba39562282a)) 28 | 29 | 30 | 31 | 32 | 33 | ## [0.1.1](https://github.com/lihbr/utils-nuxt/compare/@lihbr/utils-nuxt.smart-link@0.1.0...@lihbr/utils-nuxt.smart-link@0.1.1) (2020-09-30) 34 | 35 | 36 | ### Bug Fixes 37 | 38 | * **smart-link:** missing export ([fddf2bd](https://github.com/lihbr/utils-nuxt/commit/fddf2bd2d5ca79b9f470cad7ea9ab7ebb35c5100)) 39 | 40 | 41 | 42 | 43 | 44 | # 0.1.0 (2020-09-30) 45 | 46 | 47 | ### Features 48 | 49 | * **smart-link:** migrate package ([0bbf95b](https://github.com/lihbr/utils-nuxt/commit/0bbf95be85419587db63cb4753d6ae32db30d17a)) 50 | -------------------------------------------------------------------------------- /packages/smart-link/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@lihbr/utils-nuxt.smart-link", 3 | "version": "0.2.2", 4 | "description": "lihbr utils for Nuxt.js", 5 | "author": "Lucie Haberer (https://lihbr.com)", 6 | "license": "MIT", 7 | "main": "src/index.js", 8 | "files": [ 9 | "src" 10 | ], 11 | "engines": { 12 | "node": ">=12.0.0" 13 | }, 14 | "publishConfig": { 15 | "access": "public" 16 | }, 17 | "repository": { 18 | "type": "git", 19 | "url": "ssh://git@github.com/lihbr/utils-nuxt.git", 20 | "directory": "packages/smart-link" 21 | }, 22 | "dependencies": { 23 | "vue-functional-data-merge": "^3.1.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /packages/smart-link/src/index.js: -------------------------------------------------------------------------------- 1 | /* HEALTH:HIGH smart-link */ 2 | const { mergeData } = require("vue-functional-data-merge/dist/lib.common.js"); 3 | 4 | const { getLinkTag } = require("./utils"); 5 | 6 | const SPAN_TAG = "span"; 7 | const ANCHOR_TAG = "a"; 8 | const FRAMEWORK_LINK = "nuxt-link"; // or "nuxt-link", "g-link"... 9 | 10 | const ANCHOR_REL_ATTRIBUTE = "noopener"; 11 | 12 | const SmartLink = { 13 | name: "SmartLink", 14 | functional: true, 15 | props: { 16 | href: { 17 | type: String, 18 | default: "" 19 | }, 20 | blank: { 21 | type: Boolean, 22 | default: false 23 | }, 24 | external: { 25 | type: Boolean, 26 | default: false 27 | }, 28 | internal: { 29 | type: Boolean, 30 | default: false 31 | } 32 | }, 33 | render(h, context) { 34 | // Resolve link tag 35 | const tag = getLinkTag(context.props, { 36 | SPAN_TAG, 37 | ANCHOR_TAG, 38 | FRAMEWORK_LINK 39 | }); 40 | 41 | // Create new data object 42 | const data = { 43 | class: "smartLink" 44 | }; 45 | switch (tag) { 46 | case ANCHOR_TAG: 47 | // Map `href` prop to the correct attribute 48 | data.attrs = { 49 | href: context.props.href 50 | }; 51 | 52 | // Handle `blank` prop 53 | if (context.props.blank) { 54 | data.attrs.target = "_blank"; 55 | data.attrs.rel = ANCHOR_REL_ATTRIBUTE; 56 | } 57 | 58 | // Transform native events to regular events for HTML anchor tag 59 | data.on = { ...context.data.nativeOn }; 60 | delete context.data.nativeOn; 61 | break; 62 | 63 | case FRAMEWORK_LINK: 64 | // Map `href` prop to the correct prop 65 | data.props = { 66 | to: context.props.href 67 | }; 68 | break; 69 | 70 | default: 71 | break; 72 | } 73 | 74 | return h(tag, mergeData(context.data, data), context.slots().default); 75 | } 76 | }; 77 | 78 | module.exports = SmartLink; 79 | -------------------------------------------------------------------------------- /packages/smart-link/src/utils/getLinkTag.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Figure out the right link tag/component to use 3 | * @param {Boolean} href - string to test for an external link 4 | * @param {Boolean} blank - if link has a blank target 5 | * @param {Boolean} external - force an external link 6 | * @param {Boolean} internal - force an internal link 7 | * 8 | * @param {Boolean} SPAN_TAG - span tag 9 | * @param {Boolean} ANCHOR_TAG - anchor tag 10 | * @param {Boolean} FRAMEWORK_LINK - framework link component 11 | * 12 | * @return {String} - found tag/component 13 | */ 14 | const getLinkTag = ( 15 | { href, blank, external, internal }, 16 | { SPAN_TAG = "span", ANCHOR_TAG = "a", FRAMEWORK_LINK = "router-link" } 17 | ) => { 18 | // span when no href 19 | if (!href) { 20 | return SPAN_TAG; 21 | } 22 | 23 | // defaults to anchor on conflict 24 | if (external && internal) { 25 | /* eslint-disable-next-line prettier/prettier */ 26 | console.warn( 27 | 'props "external" and "internal" are both true and conflicting with each other, giving priority to "external"' 28 | ); 29 | return ANCHOR_TAG; 30 | } 31 | 32 | // anchor if blank or external 33 | if (blank || external) { 34 | return ANCHOR_TAG; 35 | } 36 | 37 | // framework link if internal 38 | if (internal || /^\/(?!\/).*$/.test(href)) { 39 | return FRAMEWORK_LINK; 40 | } 41 | 42 | // anchor is external 43 | return ANCHOR_TAG; 44 | }; 45 | 46 | module.exports = getLinkTag; 47 | -------------------------------------------------------------------------------- /packages/smart-link/src/utils/index.js: -------------------------------------------------------------------------------- 1 | const getLinkTag = require("./getLinkTag"); 2 | 3 | module.exports = { 4 | getLinkTag 5 | }; 6 | -------------------------------------------------------------------------------- /packages/smart-link/test/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihbr/utils-nuxt/645167e3b57f3668b1869ddb4f7eff36a3c59e8f/packages/smart-link/test/.gitkeep -------------------------------------------------------------------------------- /packages/statistics/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | ## [0.1.1](https://github.com/lihbr/utils-nuxt/compare/@lihbr/utils-nuxt.statistics@0.1.0...@lihbr/utils-nuxt.statistics@0.1.1) (2021-04-13) 7 | 8 | **Note:** Version bump only for package @lihbr/utils-nuxt.statistics 9 | 10 | 11 | 12 | 13 | 14 | # 0.1.0 (2020-09-30) 15 | 16 | 17 | ### Features 18 | 19 | * **statistics:** migrate package ([d11a2e2](https://github.com/lihbr/utils-nuxt/commit/d11a2e259d7e84b7ee3540033601a0a078a97ccb)) 20 | -------------------------------------------------------------------------------- /packages/statistics/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@lihbr/utils-nuxt.statistics", 3 | "version": "0.1.1", 4 | "description": "lihbr utils for Nuxt.js", 5 | "author": "Lucie Haberer (https://lihbr.com)", 6 | "license": "MIT", 7 | "main": "src/index.js", 8 | "files": [ 9 | "src" 10 | ], 11 | "engines": { 12 | "node": ">=12.0.0" 13 | }, 14 | "publishConfig": { 15 | "access": "public" 16 | }, 17 | "repository": { 18 | "type": "git", 19 | "url": "ssh://git@github.com/lihbr/utils-nuxt.git", 20 | "directory": "packages/statistics" 21 | }, 22 | "dependencies": { 23 | "consola": "^2.15.3", 24 | "lodash": "^4.17.21" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /packages/statistics/src/index.js: -------------------------------------------------------------------------------- 1 | const defaultsDeep = require("lodash/defaultsDeep"); 2 | 3 | const logger = require("./logger"); 4 | 5 | const statisticsFunctions = { 6 | generate() { 7 | let startTime; 8 | let count; 9 | this.nuxt.hook("generate:routeCreated", () => { 10 | if (!startTime) { 11 | startTime = Date.now(); 12 | count = 0; 13 | } else { 14 | count++; 15 | } 16 | }); 17 | this.nuxt.hook("generate:done", () => { 18 | const time = (Date.now() - startTime) / 1000; 19 | const rps = count / time; 20 | logger.info(`Generated ${count} routes in ${time} sec (${rps} r/s)`); 21 | }); 22 | } 23 | }; 24 | 25 | module.exports = function (moduleOptions) { 26 | const options = defaultsDeep(moduleOptions, { 27 | ignore: [] 28 | }); 29 | 30 | // Run each non-ignored statistics functions 31 | for (const key in statisticsFunctions) { 32 | if (!options.ignore.includes(key)) { 33 | statisticsFunctions[key].call(this); 34 | } 35 | } 36 | 37 | logger.success("Statistics module initialized"); 38 | }; 39 | -------------------------------------------------------------------------------- /packages/statistics/src/logger.js: -------------------------------------------------------------------------------- 1 | const consola = require("consola"); 2 | 3 | module.exports = consola.withScope("@lihbr/utils-nuxt.statistics"); 4 | -------------------------------------------------------------------------------- /packages/statistics/test/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihbr/utils-nuxt/645167e3b57f3668b1869ddb4f7eff36a3c59e8f/packages/statistics/test/.gitkeep --------------------------------------------------------------------------------