@wearelucid/vuecid-helpers NPM

vuecid-helpers

A collection of utility functions we use with vuecid-nuxt

Setup and build commands

Get started:

$ nvm use
$ yarn

To generate the dist folder:

$ yarn build

To generate the docs:

# Install documentation.js globally
$ yarn global add documentation

# Generate docs
$ yarn docs

Docs

Main

cleanString

Clean a string: deburr, lowercase and kebabcase it. This is good to generate ids.

Parameters

str string A dirty string

Examples

cleanString('Some sting äöü')
// -> 'some-sting-aou'

Returns string A clean string

decodeHtmlEntity

Decode unicode characters (decode html text into html entity).

Inspired by this gist: https://gist.github.com/CatTail/4174511

Parameters

str string An encoded string

Returns String A decoded string

applyToOneOrMany

Apply a function to a single object or to every item in an array.

Parameters

fn Function Function to pass in to map
data Array Your data array

Returns Array Your data array with the funtion applied

generateLocalizedRoutes

Generate localized routes using Nuxt's generated routes and i18n config

Parameters

options Object The options object to pass in (optional, default {baseRoutes:[],defaultLang:'',langs:[],routeAliases:{},isChild:false})
- options.baseRoutes Array
- options.defaultLang string
- options.langs Array
- options.routeAliases Object
- options.isChild Boolean?

Returns Array Localized routes to be used in Nuxt config

generateRoutesFromData

Generate routes from data

Uses a .json file as base to generate route to this post or page.

Special behaviour for home slugs: We use / for the default lang home slug, /en/ for the english home etc.

⚠️ For now we cannot have a page with a permalink including home like /pages/something/home-sweet-home In the generateRoutesFromData process we remove all pages which include home. 🤷‍ Makes sense to be aware of that!

Parameters

options Object The options object to pass in (optional, default {langs:[],postTypes:{},dataPath:'',bundle:'',homeSlug:'home',errorPrefix:'error-'})
- options.langs Array
- options.postTypes Object
- options.dataPath string
- options.bundle string
- options.homeSlug string?
- options.errorPrefix string?

Examples

generateRoutesFromData({
  langs: config.env.LANGS,
  postTypes: config.postTypes,
  dataPath: '../../../../../static/data',
  bundle: 'basic',
  homeSlug: config.env.HOMESLUG,
  errorPrefix: config.env.ERROR_PREFIX
})

Returns Array An array of routes to be generated by nuxt generate

checkAndGetHomeSlug

Returns homeSlug if we are on home, e.g. '/en/' or '/en' or '/'

Parameters

path string
locale string
homeSlug string? (optional, default 'home')

Returns string homeSlug or path

isHomeSlug

Test if slug is homeSlug ('home').

Parameters

slug string
homeSlug string? (optional, default 'home')

Returns Boolean

isHome

Returns true if we are on home, e.g. '/en/' or '/en' or '/'

Parameters

path string
locale string

Returns Boolean

cleanSlug

Get the naked slug without any slashes or locales.

Parameters

str string

Examples

cleanSlug('en/myslug/')
// -> 'myslug'

Returns string

getPathFromUrl

Regex to get the path from url. Makes sure that there is a leading slash. https://regex101.com/r/uMOB5V/2/

⚠️ Subdomains don't work with this: https://regex101.com/r/uMOB5V/3/ getPathFromUrl('https://www.mysubdomain.mysite.com/en/myslug/') will not match the regex pattern...

Parameters

str string

Examples

getPathFromUrl('https://www.mysite.com/en/myslug/')
// -> '/en/myslug/'

Returns string

removeHomeSlug

Remove 'home' from url.

Parameters

str string
homeSlug string? (optional, default 'home')

Examples

removeHomeSlug('https://www.mysite.com/home/')
// -> 'https://www.mysite.com/'

Returns string

removeLeadingLang

Remove leading language locale.

Parameters

str string

Examples

removeLeadingLang('en/myslug/')
// -> 'myslug/'

Returns string

removeLeadingSlash

Remove leading slash.

Parameters

str string

Examples

removeLeadingSlash('/myslug/')
// -> 'myslug/'

Returns string

removeTrailingSlash

Remove trailing slash.

Parameters

str string

Examples

removeTrailingSlash('/myslug/')
// -> '/myslug'

Returns string

verifyLeadingSlash

Verify leading slash.

Parameters

str string

Examples

verifyLeadingSlash('myslug')
// -> '/myslug'

Returns string

verifyTrailingSlash

Verify leading slash.

Parameters

str string

Examples

verifyTrailingSlash('myslug')
// -> 'myslug/'

Returns string

WordPress

isWordPressPreview

Check if we are in preview mode by looking for query strings. If we have all three it's a pretty fair indicator we are in preview mode.

Parameters

route Object The route object
- route.query Object? Route queries to check

Returns Boolean Do I look like a preview?

flattenACF

Flatten acf in WordPress post object(s).

Parameters

data

normalizeWordpress

Normalize WordPress post object(s).

Parameters

data

applyToOneOrMany

Apply a function to a single object or to every item in an array.

Parameters

fn Function Function to pass in to map
data Array Your data array

Returns Array Your data array with the funtion applied

removeFieldsFromPost

Delete fields we don't need (anymore).

Parameters

data

decodeTitle

Data transformation to decode any unicode characters in the title property.

Parameters

data

decodeHtmlEntity

Decode unicode characters (decode html text into html entity).

Inspired by this gist: https://gist.github.com/CatTail/4174511

Parameters

str string An encoded string

Returns String A decoded string

reduceBundle

Create reduced WordPress post object(s). This is good to generate routes or sitemaps.

Parameters

data

generateMetaInfo

Generate meta info.

hid in meta tags is needed to prevent duplicate properties https://nuxtjs.org/faq/duplicated-meta-tags/ also they have to override nuxt.configs manifest infos, which sets an hid therefore the og:description hid has to be called 'hid: "og:description"' and so on

Parameters

$0 Object (optional, default {})
- $0.siteSettings (optional, default {})
- $0.post (optional, default {})
- $0.path (optional, default '')
- $0.locale (optional, default '')
- $0.debug (optional, default false)
- $0.titlePattern (optional, default true)
- $0.titlePatternSeparator (optional, default ' | ')

removeTrailingSlash

Remove trailing slash.

Parameters

str string

Examples

removeTrailingSlash('/myslug/')
// -> '/myslug'

Returns string

removeLeadingSlash

Remove leading slash.

Parameters

str string

Examples

removeLeadingSlash('/myslug/')
// -> 'myslug/'

Returns string

verifyTrailingSlash

Verify leading slash.

Parameters

str string

Examples

verifyTrailingSlash('myslug')
// -> 'myslug/'

Returns string

generateHreflangs

Generates hreflangs for all translations of a post.

More about the hreflang attribute.

Parameters

post Object
- post.polylang Object?
  - post.polylang.translations Array?

Returns Array

removeHomeSlug

Remove 'home' from url.

Parameters

str string
homeSlug string? (optional, default 'home')

Examples

removeHomeSlug('https://www.mysite.com/home/')
// -> 'https://www.mysite.com/'

Returns string

generateMetaImageInfo

Generates meta image info

Like the meta description the OG Image is generated from the page-wide options, but will use a more specific OG image on a page/post – if set. It uses the predefined size (social-share-large), which we defined in our WordPress image crops. 1280px x 720px. By defining those sizes, an image does not have to be inspected by a platform like facebook, because it does not know the size yet. This saves time.

Parameters

$0 Object (optional, default {})
- $0.siteSettings (optional, default {})
- $0.post (optional, default {})
siteSettings Object
post Object