Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

contentful-hugo

Package Overview
Dependencies
Maintainers
1
Versions
106
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

contentful-hugo - npm Package Compare versions

Comparing version 1.3.7 to 1.3.8

2

package.json
{
"name": "contentful-hugo",
"version": "1.3.7",
"version": "1.3.8",
"description": "Node module that pulls data from Contentful and turns it into markdown files for Hugo. Can be used with other Static Site Generators, but has some Hugo specific features.",

@@ -5,0 +5,0 @@ "main": "index.js",

# Contentful Hugo
[![Codacy Badge](https://api.codacy.com/project/badge/Grade/281eacf31e864217953437f66b7e3a72)](https://www.codacy.com/app/joshmossas/contentful-hugo?utm_source=github.com&utm_medium=referral&utm_content=ModiiMedia/contentful-hugo&utm_campaign=Badge_Grade)
This is a simple Node.js CLI tool that pulls data from Contentful CMS and turns it into Markdown or YAML files for use with a static site generator. It can be used with any static site generator that uses Markdown with YAML frontmatter, but it has some features that are specific to [Hugo](https://gohugo.io).

@@ -7,10 +9,9 @@

- [Prerequisites](#Prerequisites)
- [Installation](#Installation)
- [Usage](#Usage)
- [Configuration](#Configuration)
- [Expected Output](#Expected-Output)
- [Known Issues](#Known-Issues)
- [Prerequisites](#Prerequisites)
- [Installation](#Installation)
- [Usage](#Usage)
- [Configuration](#Configuration)
- [Expected Output](#Expected-Output)
- [Known Issues](#Known-Issues)
# Prerequisites

@@ -21,7 +22,11 @@

# Installation
with NPM
```
npm install contentful-hugo
```
with Yarn
```

@@ -33,5 +38,7 @@ yarn add contentful-hugo

## Terminal Commands
Complete [configuration](#configuration) then run the following command(s) in the terminal
## When Installed Globally
### When Installed Globally

@@ -42,3 +49,4 @@ ```

## When Installed Locally
### When Installed Locally
```

@@ -61,2 +69,3 @@ npx contentful-hugo

```
In this example when you run `npm start` it will first use contentful-hugo to pull Contentful data then start hugo server. In the same way when you do the command `npm run build` it will first use contentful-hugo to pull Contentful data then run `hugo --minify` to build a minified version of your hugo site.

@@ -79,2 +88,3 @@

This can be done with a **.env** file in the root directory of your project.
```

@@ -84,5 +94,7 @@ CONTENTFUL_SPACE = '<your-space-id>`

```
You can also declare the environment variables in the command line
**Powershell:**
```

@@ -107,36 +119,36 @@ $env:CONTENTFUL_SPACE="<contentful_space_id>"

```yaml
singleTypes:
# fetches only the most recently updated entry in a particular content type
# Generated file will be named after the fileName setting
- id: homepage
directory: /content/
fileName: _index
fileExtension: md
# this will generate a file named "_index.md" in the "content" directory
singleTypes:
# fetches only the most recently updated entry in a particular content type
# Generated file will be named after the fileName setting
- id: homepage
directory: /content/
fileName: _index
fileExtension: md
- id: siteSettings
directory: /data/
fileName: settings
fileExtension: yaml
# this will generate a file named settings.yaml in the "data" directory
# this will generate a file named "_index.md" in the "content" directory
- id: siteSettings
directory: /data/
fileName: settings
fileExtension: yaml
# this will generate a file named settings.yaml in the "data" directory
repeatableTypes:
# fetches all the entries of a content type and places them in a directory.
# Generated files will be named after their Entry ID in Contentful.
- id: posts
directory: /content/posts/
fileExtension: md
mainContent: content
- id: seoFields
isHeadless: true
directory: /content/seo-fields/
repeatableTypes:
# fetches all the entries of a content type and places them in a directory.
# Generated files will be named after their Entry ID in Contentful.
- id: posts
directory: /content/posts/
fileExtension: md
mainContent: content
- id: reviews
directory: /content/reviews/
mainContent: reviewBody
- id: seoFields
isHeadless: true
directory: /content/seo-fields/
- id: staff
isHeadless: true
directory: /content/staff/
- id: reviews
directory: /content/reviews/
mainContent: reviewBody
- id: staff
isHeadless: true
directory: /content/staff/
```

@@ -146,10 +158,10 @@

| field | required | description |
| ------ | -------- | ------------ |
| id | required | contentful content type ID goes here |
| directory | required | directory where you want the file(s) to be generated (leading and trailing slashes required for the time being) |
| fileName | required (single types only) | name of the file generated |
| fileExtension | optional | can be "md", "yml", or "yaml" (defaults to "md") |
| isHeadless | optional (repeatable types only) | turns all entries in a content type into headless leaf bundles (see [hugo docs](https://gohugo.io/content-management/page-bundles/#headless-bundle)) |
| mainContent | optional | field ID for field you want to be the main Markdown content. (Does not work with rich text fields)
| field | required | description |
| ------------- | -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| id | required | contentful content type ID goes here |
| directory | required | directory where you want the file(s) to be generated (leading and trailing slashes required for the time being) |
| fileName | required (single types only) | name of the file generated |
| fileExtension | optional | can be "md", "yml", or "yaml" (defaults to "md") |
| isHeadless | optional (repeatable types only) | turns all entries in a content type into headless leaf bundles (see [hugo docs](https://gohugo.io/content-management/page-bundles/#headless-bundle)) |
| mainContent | optional | field ID for field you want to be the main Markdown content. (Does not work with rich text fields) |

@@ -173,10 +185,11 @@ # Expected Output

Asset like images and videos come with some extra information that makes it easy to implement things like alt text or layouts that rely on knowing the image dimensions. The fields are as follows:
```yaml
assetFieldName:
assetType: # indicates the asset type such as "image" "video" "audio" ect.
url: # url of the asset
title: # title of the asset written in Contentful
description: # description of the asset written in Contentful
width: # width of the asset (images only)
height: # height of the asset (images only )
assetType: # indicates the asset type such as "image" "video" "audio" ect.
url: # url of the asset
title: # title of the asset written in Contentful
description: # description of the asset written in Contentful
width: # width of the asset (images only)
height: # height of the asset (images only )
```

@@ -187,20 +200,24 @@

```html
<img src="{{ .Params.assetFieldName.url }}" width="{{ .Params.assetFieldName.width }}">
<img
src="{{ .Params.assetFieldName.url }}"
width="{{ .Params.assetFieldName.width }}"
/>
```
This same information will also appear in asset arrays like a gallery:
```yaml
myGallery:
- assetType: "image/jpg"
url: "//link-to-image.jpg"
title: "Image 1"
description: "Image 1 Description"
width: 500
height: 500
- assetType: "image/jpg"
url: "//link-to-image-2.jpg"
title: "Image 2"
description: "Image 2 Description"
width: 1920
height: 1080
- assetType: 'image/jpg'
url: '//link-to-image.jpg'
title: 'Image 1'
description: 'Image 1 Description'
width: 500
height: 500
- assetType: 'image/jpg'
url: '//link-to-image-2.jpg'
title: 'Image 2'
description: 'Image 2 Description'
width: 1920
height: 1080
```

@@ -214,15 +231,12 @@

linkedEntry:
id: <contentful-entry-id>
typeId: <content-type-ID>
id: <contentful-entry-id>
typeId: <content-type-ID>
#example with array of linked entries
relatedArticles:
-
id: "41UFfIhszbS1kh95bomMj7"
typeId: "articles"
-
id: "85UFfIhsacS1kh71bpqMj7"
typeId: "articles"
- id: '41UFfIhszbS1kh95bomMj7'
typeId: 'articles'
- id: '85UFfIhsacS1kh71bpqMj7'
typeId: 'articles'
```

@@ -233,5 +247,5 @@

```html
{{ with .Site.GetPage "<path-to-file>/<entry-id>.md" }}
{{ .Title }}
{{ end }}
{{ with .Site.GetPage "<path-to-file
>/<entry-id>.md" }} {{ .Title }} {{ end }}</entry-id></path-to-file
>
```

@@ -245,36 +259,36 @@

richTextField:
- nodeType: "paragraph"
data: {}
content:
- data: {}
marks: []
value: "This is a simple paragraph."
nodeType: "text"
- nodeType: "paragraph"
data: {}
content:
- data: {}
marks: []
value: "This is a paragraph with "
nodeType: "text"
- data: {}
marks:
- type: "italic"
value: "italicized text."
nodeType: "text"
- nodeType: "embedded-asset-block"
data:
assetType: "image/jpeg"
url: "//images.ctfassets.net/some-image-url.jpg"
title: "Image title will appear here"
description: "Image description will appear here"
width: 1920
height: 1080
content: []
- nodeType: 'paragraph'
data: {}
content:
- data: {}
marks: []
value: 'This is a simple paragraph.'
nodeType: 'text'
- nodeType: 'paragraph'
data: {}
content:
- data: {}
marks: []
value: 'This is a paragraph with '
nodeType: 'text'
- data: {}
marks:
- type: 'italic'
value: 'italicized text.'
nodeType: 'text'
- nodeType: 'embedded-asset-block'
data:
assetType: 'image/jpeg'
url: '//images.ctfassets.net/some-image-url.jpg'
title: 'Image title will appear here'
description: 'Image description will appear here'
width: 1920
height: 1080
content: []
```
In addition a plaintext version of the field will be generated using the field ID appended with "_plaintext". This allows you to quickly fetch the text by itself without any of the other data. A simple use case would be using the plaintext output to automatically generate a meta description for a webpage.
In addition a plaintext version of the field will be generated using the field ID appended with "\_plaintext". This allows you to quickly fetch the text by itself without any of the other data. A simple use case would be using the plaintext output to automatically generate a meta description for a webpage.
```yaml
richTextField_plaintext: "This is a simple paragraph. This is a paragraph with italicized text."
richTextField_plaintext: 'This is a simple paragraph. This is a paragraph with italicized text.'
```

@@ -286,3 +300,3 @@

- **Date & Time Field w/o Timezone**: Hugo cannot parse date field if field is set to "date and time without timezone"
- **Fetching Data Before Contentful CDN Updates**: Sometimes when triggering a build from a webhook, it won't always get the latest data. This is because it sometimes takes a couple seconds for the latest data to get distrubuted across Contentful's CDN. If you run into this issue it might be worth it to create a "wait function" just to delay fetching the data by a couple seconds. You could include it in the script you use contentful-hugo by doing something like the following ```"node wait.js && contentful-hugo"```
- **Date & Time Field w/o Timezone**: Hugo cannot parse date field if field is set to "date and time without timezone"
- **Fetching Data Before Contentful CDN Updates**: Sometimes when triggering a build from a webhook, it won't always get the latest data. This is because it sometimes takes a couple seconds for the latest data to get distrubuted across Contentful's CDN. If you run into this issue it might be worth it to create a "wait function" just to delay fetching the data by a couple seconds. You could include it in the script you use contentful-hugo by doing something like the following `"node wait.js && contentful-hugo"`
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc