{"id":20128178,"url":"https://github.com/thenewdynamic/hugo-module-tnd-netlifycms","last_synced_at":"2025-03-02T21:23:43.543Z","repository":{"id":49484961,"uuid":"258583318","full_name":"theNewDynamic/hugo-module-tnd-netlifycms","owner":"theNewDynamic","description":"A Hugo Module for everything Netlify CMS","archived":false,"fork":false,"pushed_at":"2021-06-22T20:52:22.000Z","size":53,"stargazers_count":21,"open_issues_count":3,"forks_count":6,"subscribers_count":8,"default_branch":"main","last_synced_at":"2025-01-13T08:28:18.804Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/theNewDynamic.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-24T17:50:04.000Z","updated_at":"2024-12-26T07:46:58.000Z","dependencies_parsed_at":"2022-08-24T21:30:45.531Z","dependency_job_id":null,"html_url":"https://github.com/theNewDynamic/hugo-module-tnd-netlifycms","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theNewDynamic%2Fhugo-module-tnd-netlifycms","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theNewDynamic%2Fhugo-module-tnd-netlifycms/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theNewDynamic%2Fhugo-module-tnd-netlifycms/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theNewDynamic%2Fhugo-module-tnd-netlifycms/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/theNewDynamic","download_url":"https://codeload.github.com/theNewDynamic/hugo-module-tnd-netlifycms/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241572334,"owners_count":19984257,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T20:26:02.288Z","updated_at":"2025-03-02T21:23:43.276Z","avatar_url":"https://github.com/theNewDynamic.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TND NetlifyCMS Hugo Module\n\nThis module try to simplify the construct of Netlify CMS lone config file. It also sets up the Netlify CMS page wherever on the project with minimal user intervention.\n\nIn order to be able to reuse data objects inside the lone NetlifyCMS `config.yaml` file, this module makes use of Hugo's data file to store said data objects and allow them to be recursively imported in the configuration file.\n\n## Requirements\n\nRequirements:\n- Go 1.14\n- Hugo 0.61.0\n\n## Installation\n\nIf not already, [init](https://gohugo.io/hugo-modules/use-modules/#initialize-a-new-module) your project as Hugo Module:\n\n```\n$: hugo mod init {repo_url}\n```\n\nConfigure your project's module to import this module:\n\n```yaml\n# config.yaml\nmodule:\n  imports:\n  - path: github.com/theNewDynamic/hugo-module-tnd-netlifycms\n```\n\n## Usage\n\n### Adding to your project\n\n1. Add this module's path to your `module.imports` config array\n```\nmodule:\n  imports:\n    - path: github.com/theNewDynamic/hugo-module-tnd-netlifycms\n```\n1. Create a page where your Netlify CMS dashboard should live.\n2. Add the `netlifycms` type to it through Front Matter.\n3. Add the `netlifycms_config` output format to it through Front Matter (alongside HTML):\n```yaml\nTitle: Your CMS\ntype: netlifycms\noutputs:\n  - HTML\n  - netlifycms_config\n```\n4. Add your Netlify config data in `data/netlifycms/config.yaml` and use (or not) `import` statements.\n5. Add the data files matching your imports statements to the `data/netlifycms` dir under `/collections` and `/fields`\n\n### Import and Extend data sets\n\nNetlifyCMS uses yaml extensively. In order to avoid a lot of copy/paste the module allow to import a data set stored in `data/netlifycms/**/*.yaml` as part of a yaml array.\n\nIt's also possible to extend/overwrite the data found in the file.\n\n#### Import\n\nFrom inside a `yaml` array, you can either use the string import statement, or the map import statement.\n\n`- import collection pages` or `- import: collection pages`\n\n#### Extend\n\nBy using the map version of the import statement, you can add an extra `extend` key containing a map with values the add or overwrite:\n\n```yaml\n- import: collection pages\n  extend:\n    name: Pages FR\n    folder: content/fr\n```\nSee example below of usage.\n\n### Example of the base config data file\n\n```yaml\n# data/netlifycms/config.yaml\nbackend:\n  name: git-gateway\n  branch: easier-netlify-cms\ncollections:\n- import collection events #--\u003e data/netlifycms/collections/pages.yaml\n- import collection posts #--\u003e data/netlifycms/collections/posts.yaml\n- import: collection posts\n  extend:\n    name: updates\n    label: News Updates\n    folder: content/updates\n```\n\nAbove, the Events and Posts collections are stored in the mentioned data file. As we import the data as is, we can use a simple `import` statement.\n\nFor updates, we need almost the same settings and fields as the Post collection, except for a few keys that need to be overwritten.\nWe can use a map with two keys:\n  - import: For the statement\n  - extend: The data which will be added/merged on top of the\n   data set.\n\n\n### Example of a Collection data file\n\n```yaml\n# data/netlifycms/collections/posts.yaml\nname: \"events\"\nlabel: \"Events\"\nfolder: \"content/events\"\ncreate: true\nfields:\n  - import field title #--\u003e data/netlifycms/fields/title.yaml\n  - import field authors #--\u003e data/netlifycms/fields/authors.yaml\n  - import field date #--\u003e data/netlifycms/fields/date.yaml\n  - import field images #--\u003e data/netlifycms/fields/images.yaml\n  - import field body #--\u003e data/netlifycms/fields/body.yaml\n  - import: field time #--\u003e data/netlifycms/fields/time.yaml\n    extend:\n      name: start_time\n      label: Start\n  - import: field time\n    extend:\n      name: end_time\n      label: End\n  - {\n      label: \"Tags\",\n      name: \"tags\",\n      widget: \"list\",\n      field:\n        {\n          label: \"Tag\",\n          widget: \"string\",\n        },\n    }\n```\n\nAbove we can see that regular handwritten data and import statements, as well as extending data can perfectly coexist among the same array.\n\nIt is convenient to create a \"base\" field like `time.yaml` on which to extend special data. This way, the two fields storing a \"Start\" and an \"End\" time can use the same base of settings for date and time formating while retaining their own `name` and `label`.\n\n### Examples of a Field data file\n\n```yaml\n# data/netlifycms/fields/title.yaml\nlabel: \"Title\"\nname: \"title\"\nwidget: \"string\"\n```\n\n```yaml\n# data/netlifycms/fields/time.yaml\nlabel: \"Time\"\nname: \"time\"\nwidget: \"datetime\"\ndefault: \"\"\ndateFormat: \"DD.MM.YYYY\" # e.g. 24.12.2021\ntimeFormat: \"HH:mm\" # e.g. 21:07\nformat: \"LLL\"\npickerUtc: false\n```\n\n### Settings\n\nModule settings are set as part of the shared `data/netlifycms/config.yaml` file under the reserved `tnd_netlifycms` map key.\n\nAvailable settings are:\n - cms_version (default: `^2.0.0`): Semantic versioning string to be used when calling CDN endpoint.\n\n## Scripts\n\nThe module facilitates the addition of extra Netlify CMS scripts for WidgetPreviews, CollectionPreviews etc...\n\nBy default the module prints the content of any `assets/netlifycms.js` file found inside a `\u003cscript\u003e` tag.\n\nFor more control, user should create its own `layouts/partials/tnd-netlifycms/scripts.html` partial and load the project's custom scripts there.\n\n### Custom Scripts Partial example: \n\nIn this example, we use the load the project's stylesheet for the Articles previews and fire the Custom Preview afterwards, using the project's own classes.\n\n```\n{{ $style := false }}\n{{ with resources.Get \"css/style.css\" }}\n  {{ $style = . | resources.PostCSS }} \n{{ end }}\n\u003cscript\u003e\n  {{ with $style }}\n  CMS.registerPreviewStyle(\"{{ $style.Permalink }}\");\n  {{ end }}\n  var PostPreview = createClass({\n    render: function() {\n      var entry = this.props.entry;\n      return h('div', {\"className\": \"px-4\"},\n        h('h1', {\"className\": \"text-5xl font-normal pt-10 mb-16\"}, entry.getIn(['data', 'title'])),\n        h('div', {\"className\": \"my-4 user-content\"}, this.props.widgetFor('body'))\n      );\n    }\n  });\n  CMS.registerPreviewTemplate(\"articles\", PostPreview);\n\u003c/script\u003e\n```\n\n## theNewDynamic\n\nThis project is maintained and loved by [thenewDynamic](https://www.thenewdynamic.com).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthenewdynamic%2Fhugo-module-tnd-netlifycms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthenewdynamic%2Fhugo-module-tnd-netlifycms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthenewdynamic%2Fhugo-module-tnd-netlifycms/lists"}