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 helpers
• WordPress specific helpers

Main

Table of Contents

• cleanString
  • Parameters
  • Examples
• decodeHtmlEntity
  • Parameters
• applyToOneOrMany
  • Parameters
• generateLocalizedRoutes
  • Parameters
• generateRoutesFromData
  • Parameters
  • Examples
• checkAndGetHomeSlug
  • Parameters
• isHomeSlug
  • Parameters
• isHome
  • Parameters
• cleanSlug
  • Parameters
  • Examples
• getPathFromUrl
  • Parameters
  • Examples
• removeHomeSlug
  • Parameters
  • Examples
• removeLeadingLang
  • Parameters
  • Examples
• removeLeadingSlash
  • Parameters
  • Examples
• removeTrailingSlash
  • Parameters
  • Examples
• verifyLeadingSlash
  • Parameters
  • Examples
• verifyTrailingSlash
  • Parameters
  • Examples

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

Table of Contents

• isWordPressPreview
  • Parameters
• flattenACF
  • Parameters
• normalizeWordpress
  • Parameters
• applyToOneOrMany
  • Parameters
• removeFieldsFromPost
  • Parameters
• decodeTitle
  • Parameters
• decodeHtmlEntity
  • Parameters
• reduceBundle
  • Parameters
• generateMetaInfo
  • Parameters
• removeTrailingSlash
  • Parameters
  • Examples
• removeLeadingSlash
  • Parameters
  • Examples
• verifyTrailingSlash
  • Parameters
  • Examples
• generateHreflangs
  • Parameters
• removeHomeSlug
  • Parameters
  • Examples
• generateMetaImageInfo
  • Parameters

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

Returns Array