├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .github
    ├── ISSUE_TEMPLATE
    │   ├── 1. Umbraco Heartcore Client.yml
    │   └── config.yml
    ├── LICENSE.md
    ├── README.md
    └── img
    │   └── logo.png
├── .gitignore
├── .npmignore
├── LICENSE.md
├── api-extractor.json
├── etc
    └── headless-client.api.md
├── examples
    └── uploadImageFile.js
├── package-lock.json
├── package.json
├── samples
    ├── gridsome
    │   ├── .env
    │   ├── .gitignore
    │   ├── README.md
    │   ├── gridsome.config.js
    │   ├── gridsome.server.js
    │   ├── package-lock.json
    │   ├── package.json
    │   ├── src
    │   │   ├── components
    │   │   │   ├── Elements.vue
    │   │   │   ├── Hero.vue
    │   │   │   ├── MainNavigation.vue
    │   │   │   ├── PageFooter.vue
    │   │   │   ├── PageHeader.vue
    │   │   │   ├── README.md
    │   │   │   ├── UniqueSellingPoints.vue
    │   │   │   └── elements
    │   │   │   │   └── TextAndImage.vue
    │   │   ├── favicon.png
    │   │   ├── layouts
    │   │   │   ├── Default.vue
    │   │   │   └── README.md
    │   │   ├── main.js
    │   │   ├── pages
    │   │   │   └── README.md
    │   │   ├── templates
    │   │   │   ├── Frontpage.vue
    │   │   │   ├── README.md
    │   │   │   └── Textpage.vue
    │   │   ├── types.ts
    │   │   └── vue-shims.d.ts
    │   ├── static
    │   │   └── README.md
    │   └── tsconfig.json
    ├── koa
    │   ├── README.md
    │   ├── app.ts
    │   ├── package-lock.json
    │   ├── package.json
    │   ├── public
    │   │   ├── css
    │   │   │   └── site.css
    │   │   └── favicon.ico
    │   ├── tsconfig.json
    │   └── views
    │   │   ├── _layout.njk
    │   │   ├── frontpage.njk
    │   │   ├── partials
    │   │       ├── _elements.njk
    │   │       ├── _footer.njk
    │   │       ├── _hero.njk
    │   │       ├── _mainNavigation.njk
    │   │       ├── _uniqueSellingPoints.njk
    │   │       └── elements
    │   │       │   └── _textAndImage.njk
    │   │   └── textpage.njk
    └── vue
    │   ├── .browserslistrc
    │   ├── .editorconfig
    │   ├── .env
    │   ├── .eslintrc.js
    │   ├── .gitignore
    │   ├── README.md
    │   ├── babel.config.js
    │   ├── package-lock.json
    │   ├── package.json
    │   ├── public
    │       ├── favicon.ico
    │       └── index.html
    │   ├── src
    │       ├── App.vue
    │       ├── assets
    │       │   └── logo.svg
    │       ├── client.ts
    │       ├── components
    │       │   ├── Elements.vue
    │       │   ├── Hero.vue
    │       │   ├── MainNavigation.vue
    │       │   ├── PageFooter.vue
    │       │   ├── PageHeader.vue
    │       │   ├── UniqueSellingPoints.vue
    │       │   └── elements
    │       │   │   └── TextAndImage.vue
    │       ├── main.ts
    │       ├── router
    │       │   └── index.ts
    │       ├── shims-tsx.d.ts
    │       ├── shims-vue.d.ts
    │       ├── types.ts
    │       └── views
    │       │   ├── Frontpage.vue
    │       │   ├── NotFound.vue
    │       │   ├── Textpage.vue
    │       │   └── UmbracoPage.vue
    │   ├── tsconfig.json
    │   └── vue.config.js
├── src
    ├── APIRequestError.ts
    ├── ApiRequest.ts
    ├── ApiResponse.ts
    ├── Client.ts
    ├── Clients
    │   ├── AuthenticationClient.spec.ts
    │   ├── AuthenticationClient.ts
    │   ├── Delivery
    │   │   ├── ContentDeliveryClient.ts
    │   │   ├── DeliveryClient.ts
    │   │   ├── MediaDeliveryClient.ts
    │   │   ├── RedirectDeliveryClient.ts
    │   │   └── index.ts
    │   ├── Management
    │   │   ├── ContentManagementClient.spec.ts
    │   │   ├── ContentManagementClient.ts
    │   │   ├── ManagementClient.ts
    │   │   ├── MediaManagementClient.ts
    │   │   ├── MemberManagementClient.spec.ts
    │   │   ├── MemberManagementClient.ts
    │   │   ├── __mocks__
    │   │   │   ├── content.byId.json
    │   │   │   ├── content.children.json
    │   │   │   ├── content.create.json
    │   │   │   ├── content.root.json
    │   │   │   ├── member.byUsername.json
    │   │   │   ├── member.create.json
    │   │   │   └── member.createResetPasswordToken.json
    │   │   └── index.ts
    │   └── index.ts
    ├── Endpoint.ts
    ├── Endpoints.ts
    ├── RequestOptions
    │   ├── ContentFilterOptions.ts
    │   ├── ContentTypeOptions.ts
    │   ├── CultureOptions.ts
    │   ├── DepthOptions.ts
    │   ├── HyperlinksOption.ts
    │   ├── PageOptions.ts
    │   ├── RequestOptions.ts
    │   └── index.ts
    ├── Responses
    │   ├── Content.ts
    │   ├── ContentLanguageType.ts
    │   ├── ContentManagementContent.ts
    │   ├── ContentManagementMedia.ts
    │   ├── ContentManagementMember.ts
    │   ├── ContentManagerMediaType.ts
    │   ├── ContentRelationType.ts
    │   ├── ContentTypeBaseResponse.ts
    │   ├── Form.ts
    │   ├── Media.ts
    │   ├── OAUthResponse.ts
    │   ├── PagedResponse.ts
    │   ├── Redirect.ts
    │   └── index.ts
    └── index.ts
├── tsconfig.json
└── tsconfig_spec.json


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | 
 3 | # top-most EditorConfig file
 4 | root = true
 5 | 
 6 | # Default settings:
 7 | # A newline ending every file
 8 | # Use 4 spaces as indentation
 9 | [*]
10 | insert_final_newline = true
11 | end_of_line = lf
12 | indent_style = space
13 | indent_size = 4
14 | 
15 | # Trim trailing whitespace, limited support.
16 | # https://github.com/editorconfig/editorconfig/wiki/Property-research:-Trim-trailing-spaces
17 | trim_trailing_whitespace = true
18 | 
19 | [*.{css,html,js,json,ts,yml,yaml}]
20 | indent_size = 2
21 | 
22 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | dist/
2 | docs/
3 | node_modules/
4 | samples/
5 | 
6 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   parser: '@typescript-eslint/parser',
 4 |   parserOptions: {
 5 |     tsconfigRootDir: __dirname,
 6 |     project: ['./tsconfig*.json'],
 7 |   },
 8 |   plugins: [
 9 |     '@typescript-eslint',
10 |   ],
11 |   extends: [
12 |     'standard-with-typescript',
13 |   ],
14 |   rules: {
15 |     '@typescript-eslint/strict-boolean-expressions': ['warn'],
16 |     '@typescript-eslint/explicit-function-return-type': ['warn'],
17 |   },
18 |   overrides: [{
19 |     files: ['*.spec.ts'],
20 |     plugins: ['mocha'],
21 |     extends: ['plugin:mocha/recommended'],
22 |     rules: {
23 |       'no-unused-expressions': 'off',
24 |       '@typescript-eslint/no-var-requires': 'off',
25 |     }
26 |   }]
27 | };
28 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/1. Umbraco Heartcore Client.yml:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: 🔆 Umbraco Heartcore Client Issue
 3 | description: "Create issues/feature requests for our Umbraco Heartcore NodeJs Client Library"
 4 | body:
 5 | - type: textarea
 6 |   id: "description"
 7 |   attributes:
 8 |     label: "Issue description"
 9 |     description: "Write a summary of the issue you want to report."
10 |   validations:
11 |     required: true
12 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/config.yml:
--------------------------------------------------------------------------------
 1 | blank_issues_enabled: false
 2 | contact_links:
 3 |   - name: ⁉ Umbraco Heartcore Support Question
 4 |     url: https://www.umbraco.io
 5 |     about: For support questions please log into your umbraco.io account and use the chat in the bottom right corner to talk to our support team.
 6 |   - name: 🔒 Security Issue
 7 |     url: https://umbraco.com/about-us/trust-center/security-and-umbraco/how-to-report-a-vulnerability-in-umbraco/
 8 |     about: Please visit our security center to report any possible security issues
 9 |   - name: 🚀 Umbraco Heartcore Issues
10 |     url: https://github.com/umbraco/Umbraco.Heartcore.Issues/issues
11 |     about: For issues regarding Umbraco Heartcore please visit the corresponding issue tracker.
12 |   - name: 💻 Umbraco Heartcore .NET Client Issues
13 |     url: https://github.com/umbraco/Umbraco.Headless.Client.Net/issues
14 |     about: For issues regarding the .NET client library for Heartcore please visit the corresponding issue tracker.
15 |   - name: 📝 Umbraco Heartcore Forms Presentation
16 |     url: https://github.com/umbraco/Umbraco.Headless.Forms.Presentation/issues
17 |     about: For issues regarding the Umbraco Forms libraries please visit the corresponding issue tracker.
18 | 


--------------------------------------------------------------------------------
/.github/LICENSE.md:
--------------------------------------------------------------------------------
 1 | # The MIT License (MIT) #
 2 | 
 3 | Copyright (c) 2013-present Umbraco
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 6 | 
 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 8 | 
 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
10 | 


--------------------------------------------------------------------------------
/.github/README.md:
--------------------------------------------------------------------------------
 1 | <p align="center">
 2 |   <img src="https://github.com/umbraco/Umbraco.Headless.Client.NodeJs/raw/master/.github/img/logo.png" alt="Umbraco Heartcore Logo" />
 3 | </p>
 4 | 
 5 | <hr>
 6 | 
 7 | # NodeJS Client Library for Umbraco Heartcore
 8 | 
 9 | Umbraco Heartcore is the headless CMS version of Umbraco as a Service.
10 | 
11 | This repository contains the Node.JS client library for the Umbraco Heartcore REST APIs.
12 | 
13 | ## Prerequisites
14 | 
15 | * [NodeJS](https://nodejs.org) 10 or newer
16 | 
17 | ## Install
18 | 
19 | ```bash
20 | > npm install @umbraco/headless-client
21 | ```
22 | 
23 | ## Usage
24 | 
25 | Create a client, then call commands on it
26 | 
27 | ```typescript
28 | 
29 | // client.ts
30 | import {Client} from '@umbraco/headless-client'
31 | 
32 | const client = new Client({
33 |   projectAlias: 'your-project-alias',
34 |   apiKey: 'your-api-key',
35 |   language: 'iso-code', // can be overwritten per method
36 |   preview: true // true/false if the preview API should be used
37 | })
38 | 
39 | export default client
40 | 
41 | // rootLinks.ts
42 | async function rootLinks(client: Client) {
43 |   const rootContent = await client.delivery.content.root()
44 | 
45 |   const childPages = rootContent.map(child => ({
46 |     url: child._url,
47 |     name: child.name
48 |   }))
49 | 
50 |   return childPages
51 | }
52 | 
53 | function linkGenerator(links: {url: string, name: string}[]) {
54 |   return links.map(link => {
55 |     return `<a href="${link.url}">${link.name}</a>`
56 |   })
57 | }
58 | 
59 | async function main() {
60 |   const rootLinks = await rootLinks(require('./client').default)
61 |   const links = linkGenerator(rootLinks)
62 |   console.log(links)
63 | }
64 | 
65 | ```
66 | 
67 | ## Documentation
68 | 
69 | General documentation for Umbraco Heartcore can be found on [our.umbraco.com](https://our.umbraco.com/documentation/Umbraco-Heartcore/).
70 | 
71 | API documentation for the Client library can be generated by running the following
72 | 
73 | ```bash
74 | > npm install # install dependencies
75 | > npm run build # build the source
76 | > npm run docs # generate the documentation
77 | ```
78 | 
79 | This will generate markdown files in `docs/api` that can be openend in any markdown viewer.
80 | 
81 | A simple way to view them is to use [markserv](https://www.npmjs.com/package/markserv) by running
82 | 
83 | ```bash
84 | > npx markserv docs/api
85 | ```
86 | 


--------------------------------------------------------------------------------
/.github/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/umbraco/Umbraco.Headless.Client.NodeJs/8b5cf81884509dcd018e9260181a0abe21136946/.github/img/logo.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Build output
 9 | dist/
10 | 
11 | # Runtime data
12 | pids
13 | *.pid
14 | *.seed
15 | *.pid.lock
16 | 
17 | # Directory for instrumented libs generated by jscoverage/JSCover
18 | lib-cov
19 | 
20 | # Coverage directory used by tools like istanbul
21 | coverage
22 | 
23 | # nyc test coverage
24 | .nyc_output
25 | 
26 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
27 | .grunt
28 | 
29 | # Bower dependency directory (https://bower.io/)
30 | bower_components
31 | 
32 | # node-waf configuration
33 | .lock-wscript
34 | 
35 | # Compiled binary addons (https://nodejs.org/api/addons.html)
36 | build/Release
37 | 
38 | # Dependency directories
39 | node_modules/
40 | jspm_packages/
41 | 
42 | # TypeScript v1 declaration files
43 | typings/
44 | 
45 | # Optional npm cache directory
46 | .npm
47 | 
48 | # Optional eslint cache
49 | .eslintcache
50 | 
51 | # Optional REPL history
52 | .node_repl_history
53 | 
54 | # Output of 'npm pack'
55 | *.tgz
56 | 
57 | # Yarn Integrity file
58 | .yarn-integrity
59 | 
60 | # local env files
61 | .env.local
62 | .env.*.local
63 | 
64 | # next.js build output
65 | .next
66 | .idea
67 | 
68 | # docs
69 | docs/
70 | temp/
71 | tsdoc-metadata.json
72 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | samples/
2 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | # The MIT License (MIT) #
 2 | 
 3 | Copyright (c) 2013-present Umbraco
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 6 | 
 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 8 | 
 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
10 | 


--------------------------------------------------------------------------------
/api-extractor.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
 3 |     "mainEntryPointFilePath": "dist/index.d.ts",
 4 |     "apiReport": {
 5 |         "enabled": true,
 6 |         "reportFolder": "etc"
 7 |     },
 8 |     "docModel": {
 9 |         "enabled": true,
10 |         "apiJsonFilePath": "dist/umbraco-headless.api.json"
11 |     },
12 |     "dtsRollup": {
13 |         "enabled": true
14 |     }
15 | }
16 | 


--------------------------------------------------------------------------------
/examples/uploadImageFile.js:
--------------------------------------------------------------------------------
 1 | // Remember to install the following packages
 2 | const { Client } = require("@umbraco/headless-client");
 3 | const FormData = require("form-data");
 4 | const fs = require("fs");
 5 | const path = require("path");
 6 | 
 7 | const client = new Client({
 8 |   projectAlias: "the-unique-alias", // https://[here is your alias].s1.umbraco.io/
 9 |   language: "en-US",
10 |   apiKey: process.env.UMBRACO_KEY
11 | });
12 | 
13 | // A file name for an image
14 | const IMAGE_NAME = "image.jpeg";
15 | 
16 | // Start new form
17 | const form = new FormData();
18 | 
19 | // Send information in 'content' field as JSON
20 | form.append(
21 |   "content",
22 |   JSON.stringify({
23 |     mediaTypeAlias: "Image",
24 |     // Media Folder UUID (the long one)
25 |     parentId: "click-on-folder-and-then-info",
26 |     name: "File name",
27 |     umbracoFile: { src: IMAGE_NAME }
28 |   })
29 | );
30 | 
31 | // Note: By default, the alias for an upload field will be 'umbracoFile', which is
32 | // why the file stream is attached to this field. The management api expects the file to be a stream.
33 | // The client library will send the payload as 'multipart/form-data'.
34 | 
35 | // Send file in 'umbracoFile' field
36 | form.append(
37 |   "umbracoFile",
38 |   fs.createReadStream(path.join(__dirname, IMAGE_NAME))
39 | );
40 | 
41 | console.log(`Sending ${IMAGE_NAME} to Umbraco Media`);
42 | 
43 | client.management.media
44 |   .create(form)
45 |   .then(res => {
46 |     console.log("Umbraco Media response", res);
47 |   })
48 |   .catch(err => {
49 |     const {
50 |       jsonData: {
51 |         error: { details }
52 |       }
53 |     } = err;
54 |     console.log("Umbraco Media Error", details || err);
55 |   });
56 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@umbraco/headless-client",
 3 |   "version": "0.9.0",
 4 |   "description": "Node.js client library for the Umbraco Headless APIs",
 5 |   "license": "MIT",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "git+https://github.com/umbraco/Umbraco.Headless.Client.NodeJs.git"
 9 |   },
10 |   "keywords": [
11 |     "umbraco",
12 |     "cms",
13 |     "headless",
14 |     "heartcore",
15 |     "cloud"
16 |   ],
17 |   "author": "Umbraco (https://www.umbraco.com)",
18 |   "bugs": {
19 |     "url": "https://github.com/umbraco/Umbraco.Headless.Client.NodeJs/issues"
20 |   },
21 |   "homepage": "https://github.com/umbraco/Umbraco.Headless.Client.NodeJs#readme",
22 |   "main": "index.js",
23 |   "types": "headless-client.d.ts",
24 |   "engines": {
25 |     "node": ">=10.x"
26 |   },
27 |   "scripts": {
28 |     "build": "tsc && cpy package.json .github/README.md dist",
29 |     "docs": "api-extractor run --local && api-documenter markdown -i dist -o docs/api/",
30 |     "start": "tsc -w",
31 |     "test": "mocha -r ts-node/register 'src/**/*.spec.ts'",
32 |     "lint": "eslint src --ext .js,.ts"
33 |   },
34 |   "dependencies": {
35 |     "axios": "^0.21.1",
36 |     "form-data": "^2.5.1"
37 |   },
38 |   "devDependencies": {
39 |     "@microsoft/api-documenter": "^7.8.45",
40 |     "@microsoft/api-extractor": "^7.9.14",
41 |     "@types/chai": "^4.2.12",
42 |     "@types/form-data": "^2.5.0",
43 |     "@types/mocha": "^5.2.7",
44 |     "@types/node": "^12.12.57",
45 |     "@types/sinon": "^7.5.2",
46 |     "@typescript-eslint/eslint-plugin": "^2.34.0",
47 |     "@typescript-eslint/parser": "^2.34.0",
48 |     "axios-mock-adapter": "^1.18.2",
49 |     "chai": "^4.2.0",
50 |     "cpy-cli": "^3.1.1",
51 |     "eslint": "^6.8.0",
52 |     "eslint-config-standard-with-typescript": "^11.0.1",
53 |     "eslint-plugin-import": "^2.22.0",
54 |     "eslint-plugin-mocha": "^6.3.0",
55 |     "eslint-plugin-node": "^9.2.0",
56 |     "eslint-plugin-promise": "^4.2.1",
57 |     "eslint-plugin-standard": "^4.0.1",
58 |     "mocha": "^7.2.0",
59 |     "sinon": "^8.1.1",
60 |     "ts-node": "^8.10.2",
61 |     "typescript": "^3.9.10"
62 |   }
63 | }
64 | 


--------------------------------------------------------------------------------
/samples/gridsome/.env:
--------------------------------------------------------------------------------
1 | UMBRACO__PROJECTALIAS=
2 | UMBRACO__APIKEY=
3 | 


--------------------------------------------------------------------------------
/samples/gridsome/.gitignore:
--------------------------------------------------------------------------------
1 | *.log
2 | .cache
3 | .DS_Store
4 | src/.temp
5 | node_modules
6 | dist
7 | .env.*
8 | 


--------------------------------------------------------------------------------
/samples/gridsome/README.md:
--------------------------------------------------------------------------------
 1 | # Umbraco Heartcore Gridsome sample
 2 | 
 3 | Gridsome sample site for Umbraco Heartcore.
 4 | 
 5 | ## Features
 6 | 
 7 | - [Node.js](https://nodejs.org/en/)
 8 | - [Typescript](https://www.typescriptlang.org/)
 9 | - [Gridsome](https://gridsome.org/)
10 | 
11 | ## Prerequisites
12 | 
13 | To run this sample you will need the following tools installed
14 | 
15 | - [Node.js](https://nodejs.org/en/) 10 or newer
16 | 
17 | ## Getting Started
18 | 
19 | Before running the application, you need to copy `.env` to `.env.development` or `.env.production` and update it with your Umbraco Heartcore
20 |  project alias (the project alias can be found in the [Umbraco Cloud Portal](https://www.s1.umbraco.io)) and an API Key if the Content Delivery API is protected.
21 | 
22 | ```env
23 | UMBRACO__PROJECTALIAS=
24 | UMBRACO__APIKEY=
25 | ```
26 | 
27 | In order to use the sample you will need an Umbraco Heartcore project with content, media and document types that correspond to those setup in the views and templates of the sample website. You can use `demo-headless` as the project alias to get started with the sample. The Project behind this alias has been used as the source of the sample, so its a good place to start.
28 | 
29 | The `ApiKey` is not used in this sample and can thus be left blank. If you chose to protect the content exposed via the Content Delivery API then you will need an API-Key, but its an option that has to be actively turned on (or off - its off by default) via the Umbraco Backoffice in the Headless tree in the Settings section.
30 | 
31 | ### Installation
32 | 
33 | To install dependencies, run the following command
34 | 
35 | ```bash
36 | > npm install
37 | ```
38 | 
39 | ### Usage
40 | 
41 | Run the following command to start the site
42 | 
43 | ```bash
44 | > npm run develop
45 | ```
46 | 
47 | This will start a dev webserver listening on `http://localhost:8081`
48 | 
49 | ### Generate a static website
50 | 
51 | To generate a static version of the website run the following command
52 | 
53 | ```bash
54 | > npm run build
55 | ```
56 | 
57 | This will generate the a static website in the `dist` directory.
58 | 


--------------------------------------------------------------------------------
/samples/gridsome/gridsome.config.js:
--------------------------------------------------------------------------------
 1 | // This is where project configuration and plugin options are located.
 2 | // Learn more: https://gridsome.org/docs/config
 3 | 
 4 | // Changes here require a server restart.
 5 | // To restart press CTRL + C in terminal and run `gridsome develop`
 6 | 
 7 | module.exports = {
 8 |   siteName: 'Gridsome',
 9 |   plugins: [{
10 |     use: 'gridsome-plugin-typescript'
11 |   }]
12 | }
13 | 


--------------------------------------------------------------------------------
/samples/gridsome/gridsome.server.js:
--------------------------------------------------------------------------------
 1 | const { Client } = require('@umbraco/headless-client')
 2 | 
 3 | // Server API makes it possible to hook into various parts of Gridsome
 4 | // on server-side and add custom data to the GraphQL data layer.
 5 | // Learn more: https://gridsome.org/docs/server-api/
 6 | 
 7 | // Changes here require a server restart.
 8 | // To restart press CTRL + C in terminal and run `gridsome develop`
 9 | 
10 | const client = new Client({
11 |   projectAlias: process.env.UMBRACO__PROJECTALIAS,
12 |   apiKey: process.env.UMBRACO__APIKEY,
13 | })
14 | 
15 | module.exports = function (api) {
16 |   api.loadSource(async ({ addCollection, addMetadata, getCollection }) => {
17 | 
18 |     const contentCollection = addCollection({ typeName: 'Content' })
19 | 
20 |     const rootContents = await client.delivery.content.root()
21 |     if (rootContents.length) {
22 |       const root = rootContents[0]
23 |       root._url = '/'
24 | 
25 |       addMetadata('footerLinks', root.footerLinks)
26 |       addMetadata('footerTitle', root.footerTitle)
27 |     }
28 | 
29 |     const addItem = async function(item) {
30 |       const name = item.contentTypeAlias[0].toUpperCase() + item.contentTypeAlias.substr(1)
31 |       const collection = getCollection(name) || addCollection({ typeName: name })
32 | 
33 |       collection.addNode({ id: item._id, ...item })
34 |       contentCollection.addNode({ id: item._id, ...item })
35 | 
36 |       const children = await client.delivery.content.children(item._id)
37 |       if (children.items) {
38 |         for (const child of children.items) {
39 |           await addItem(child)
40 |         }
41 |       }
42 |     }
43 | 
44 |     for (const item of rootContents) {
45 |       await addItem(item)
46 |     }
47 | 
48 |     // Use the Data Store API here: https://gridsome.org/docs/data-store-api/
49 |   })
50 | 
51 |   api.createPages(async ({ graphql, createPage }) => {
52 |     // Use the Pages API here: https://gridsome.org/docs/pages-api/
53 |     const { data } = await graphql(`
54 | {
55 |   allTextpage {
56 |   	edges {
57 |       node {
58 |         id
59 |         _url
60 |       }
61 |     }
62 |   }
63 |   allFrontpage {
64 |     edges {
65 |       node {
66 |         id
67 |         _url
68 |       }
69 |     }
70 |   }
71 | }
72 | `)
73 | 
74 |     for (const { node } of data.allFrontpage.edges) {
75 | 			createPage({
76 | 				path: node._url,
77 | 				component: './src/templates/Frontpage.vue',
78 | 				context: {
79 |           id: node.id,
80 |           url: node._url,
81 | 				},
82 | 			})
83 |     }
84 | 
85 |     for (const { node } of data.allTextpage.edges) {
86 | 			createPage({
87 | 				path: node._url,
88 | 				component: './src/templates/Textpage.vue',
89 | 				context: {
90 | 					id: node.id,
91 |           url: node._url,
92 | 				},
93 | 			})
94 | 		}
95 |   })
96 | }
97 | 


--------------------------------------------------------------------------------
/samples/gridsome/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "gridsome-sample",
 3 |   "private": true,
 4 |   "scripts": {
 5 |     "build": "gridsome build",
 6 |     "develop": "gridsome develop",
 7 |     "explore": "gridsome explore"
 8 |   },
 9 |   "dependencies": {
10 |     "@umbraco/headless-client": "../../dist",
11 |     "gridsome": "^0.7.20"
12 |   },
13 |   "devDependencies": {
14 |     "gridsome-plugin-typescript": "^0.4.0",
15 |     "ts-loader": "^6.2.2",
16 |     "typescript": "^3.9.7",
17 |     "vue-fragment": "^1.5.1"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/samples/gridsome/src/components/Elements.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <fragment v-if="elements">
 3 |   <Component v-for="(element, index) in elements" :key="index" :is="element.contentTypeAlias" v-bind="element" />
 4 | </fragment>
 5 | </template>
 6 | 
 7 | <script lang="ts">
 8 | import Vue from 'vue'
 9 | import { Elements } from '@/types'
10 | import TextAndImage from '@/components/elements/TextAndImage.vue'
11 | 
12 | export default Vue.extend({
13 |   components: {
14 |     textAndImage: TextAndImage
15 |   },
16 | 
17 |   props: {
18 |     elements: { type: Array as () => Elements[] }
19 |   }
20 | })
21 | </script>
22 | 


--------------------------------------------------------------------------------
/samples/gridsome/src/components/Hero.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section class="hero" :style="{ backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8))' + (image ? ', url(' + image._url + '?width=1980&amp;height=430&amp;mode=crop)' : '') }">
 3 |     <h1 class="hero__title">{{ title }}</h1>
 4 |     <h2 class="hero__subtitle" :if="subtitle">{{ subtitle }}</h2>
 5 |   </section>
 6 | </template>
 7 | 
 8 | <script lang="ts">
 9 | import Vue from 'vue'
10 | 
11 | import { Image } from '@/types'
12 | 
13 | export default Vue.extend({
14 |   props: {
15 |     image: { type: Object as () => Image },
16 |     title: { type: String, required: true },
17 |     subtitle: String
18 |   }
19 | })
20 | </script>
21 | 
22 | <style scoped>
23 | .hero {
24 |   grid-column: full-start / full-end;
25 |   padding: 50px 5px 0 5px;
26 |   min-height: 230px;
27 |   background-position-x: 50%;
28 |   background-repeat: no-repeat;
29 |   background-size: cover;
30 |   color: white;
31 |   text-align: center;
32 |   display: grid;
33 |   align-content: center;
34 | }
35 | 
36 | .hero__title {
37 |   font-size: 2em;
38 |   font-weight: 900;
39 | }
40 | 
41 | .hero__subtitle {
42 |   font-size: 1.1em;
43 |   font-weight: 400;
44 | }
45 | 
46 | @media (min-width: 992px) {
47 |   .hero {
48 |     height: 430px;
49 |   }
50 |   .hero__title {
51 |     font-size: 4.2em;
52 |   }
53 | }
54 | </style>
55 | 


--------------------------------------------------------------------------------
/samples/gridsome/src/components/MainNavigation.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <nav class="nav-container" aria-label="Primary">
 3 |     <ul class="nav">
 4 |         <li class="nav__item" v-for="{ node:link } in $static.mainNavigationItems.edges" :key="link.title">
 5 |         <g-link :to="link.url" class="nav__item-link" active-class="nav__item-link--current">{{ link.title }}</g-link>
 6 |       </li>
 7 |     </ul>
 8 |   </nav>
 9 | </template>
10 | 
11 | <static-query>
12 | query {
13 |   mainNavigationItems:allContent(filter: { umbracoNaviHide: { eq: false }, _level: { eq: 2 }}, sort: [{ by: "sortOrder", order: ASC }]) {
14 |     edges {
15 |       node {
16 |         id
17 |         title:name
18 |         url:_url
19 |       }
20 |     }
21 |   }
22 | }
23 | </static-query>
24 | 
25 | <script lang="ts">
26 | import Vue from 'vue'
27 | 
28 | export default Vue.extend({
29 | })
30 | </script>
31 | 
32 | <style scoped>
33 | .nav-container {
34 |   position: absolute;
35 |   top: 0;
36 |   right: 0;
37 |   margin: 0;
38 |   padding: 0 20px;
39 | }
40 | 
41 | .nav {
42 |   display: none;
43 |   list-style: none;
44 |   margin: 0;
45 |   padding: 0;
46 | }
47 | 
48 | .nav__item {
49 |   display: inline;
50 |   padding: 5px;
51 | }
52 | 
53 | .nav__item-link {
54 |   color: white;
55 | }
56 | 
57 | .nav__item-link--current {
58 |   text-decoration: underline;
59 | }
60 | 
61 | .nav__item-link--current:hover {
62 |   text-decoration-thickness: 3px;
63 | }
64 | 
65 | @media (min-width: 992px) {
66 |   .nav-container {
67 |     top: 15px;
68 |   }
69 | 
70 |   .nav {
71 |     display: block;
72 |   }
73 | }
74 | </style>
75 | 


--------------------------------------------------------------------------------
/samples/gridsome/src/components/PageFooter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <footer class="page-footer-container">
 3 |     <div class="page-footer">
 4 |       <h1 class="page-footer__title">{{ $static.metadata.title }}</h1>
 5 |       <ul class="page-footer__links">
 6 |         <li v-for="(link, index) in $static.metadata.links" :key="index"><a class="page-footer__link" :href="link.url" :target="link.target" rel="noopener">{{ link.name }}</a></li>
 7 |       </ul>
 8 |       <svg class="page-footer__graphics" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 616.79 369.24"><defs></defs><path class="cls-1" d="M360.16,128.15A128.32,128.32,0,1,1,488.48,256.63,128.32,128.32,0,0,1,360.16,128.15Zm125.72,43.94a126.27,126.27,0,0,1-29.66-2.67,22.72,22.72,0,0,1-16.2-13q-4.35-10-4.23-31a196,196,0,0,1,1.37-21.8q1.26-10.57,2.51-17.43l.87-4.54a2.67,2.67,0,0,0,0-.4,2.6,2.6,0,0,0-2.15-2.58L421.84,76.1h-.36a2.61,2.61,0,0,0-2.53,2c-.28,1.06-.45,1.84-.94,4.38-.95,4.87-1.82,9.62-2.79,16.55a213.07,213.07,0,0,0-1.87,22.7,117,117,0,0,0,0,15.89q.58,21.08,7.23,33.65T443.1,189.4q15.87,5.53,44.22,5.41h2.36q28.38.12,44.2-5.41t22.52-18.12q6.65-12.6,7.23-33.65a117,117,0,0,0,0-15.89A213.07,213.07,0,0,0,561.76,99c-1-6.86-1.84-11.59-2.79-16.55-.49-2.54-.66-3.32-.94-4.38a2.6,2.6,0,0,0-2.53-2h-.43l-16.55,2.58a2.61,2.61,0,0,0-2.18,2.58,2.67,2.67,0,0,0,0,.4l.88,4.54q1.24,6.89,2.53,17.43a198.39,198.39,0,0,1,1.35,21.8q.21,20.88-4.24,30.93a22.7,22.7,0,0,1-16.05,13.06,126.1,126.1,0,0,1-29.64,2.67Z"></path><g><path class="cls-2" d="M278.35,287.27s4-4.49,43.76-22.38c16.77-7.55,26.83-18.54,40.35-20.79s58.26-36,44.81-59.8-36.22,2.44-50-.66-26.83,1.55-50.75,16.49c-23.31,14.56-48.54,20.33-59.83,32C235.14,244.06,278.35,287.27,278.35,287.27Z"></path><path class="cls-3" d="M18.67,257.22l242.75-50,33.83,90.84S142.65,375.77,46.11,368.8C-38,362.73,18.67,257.22,18.67,257.22Z"></path></g></svg>
 9 |     </div>
10 |   </footer>
11 | </template>
12 | 
13 | <static-query>
14 | query {
15 |   metadata {
16 |     links:footerLinks {
17 |       name
18 |       type
19 |       url
20 |     }
21 |     title:footerTitle
22 |   }
23 | }
24 | </static-query>
25 | 
26 | <script lang="ts">
27 | import Vue from 'vue'
28 | import { Link } from '@/types'
29 | 
30 | export default Vue.extend({
31 |   props: {
32 |   }
33 | })
34 | </script>
35 | 
36 | <style scoped>
37 | .cls-1 { fill: #3544b1; }
38 | .cls-2 { fill: #ffedd6; }
39 | .cls-3 { fill: #fba0a2; }
40 | 
41 | .page-footer-container {
42 |   display: grid;
43 |   grid-template-columns: var(--main-grid);
44 |   grid-column: content-start / content-end;
45 |   background: var(--grey);
46 | }
47 | 
48 | .page-footer {
49 |   margin: 50px 20px;
50 |   color: #101f3c;
51 |   grid-column: content-start / content-end;
52 |   display: grid;
53 |   grid-template-rows: auto 1fr;
54 | }
55 | 
56 | .page-footer__title {
57 |   font-size: 1.2em;
58 | }
59 | 
60 | .page-footer__links {
61 |   list-style-type: none;
62 |   margin: 0 0 40px;
63 |   padding: 0;
64 | }
65 | 
66 | .page-footer__link,
67 | .page-footer__link:focus,
68 | .page-footer__link:visited {
69 |   color: #8A8A8A;
70 |   line-height: 2;
71 | }
72 | 
73 | .page-footer__link:hover {
74 |   color: #333;
75 |   text-decoration: none;
76 | }
77 | 
78 | .page-footer__graphics {
79 |   height: 150px;
80 |   widows: 250px;
81 |   transform: translateX(-27%);
82 | }
83 | 
84 | @media (min-width: 992px) {
85 |   .page-footer {
86 |     margin: 70px 20px 100px;
87 |   }
88 | 
89 |   .page-footer__graphics {
90 |     transform: none;
91 |     align-self: center;
92 |     margin: 0 auto;
93 |   }
94 | }
95 | </style>
96 | 


--------------------------------------------------------------------------------
/samples/gridsome/src/components/PageHeader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <header class="page-header">
 3 |     <router-link class="page-header__brand" to="/" title="Go to home page">
 4 |       <svg class="page-header__brand-graphics" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 101 17"><path class="bbst0" d="M89.4 10.2c0-4 1.1-6.8 5.8-6.8s5.8 2.8 5.8 6.8-1.1 6.8-5.8 6.8c-4.6 0-5.8-2.8-5.8-6.8zm8.7 0c0-2.8-.4-4.4-2.8-4.4s-2.8 1.6-2.8 4.4.4 4.4 2.8 4.4 2.8-1.7 2.8-4.4zm-89 6.3c.1.1.2.2.3.2h1.1c.2 0 .4-.2.4-.4V4c0-.2-.2-.4-.4-.4H8.4c-.2 0-.4.2-.4.4v9.7c-.9.5-2 .8-3 .8-1.4 0-2.1-.6-2.1-1.9V4c0-.2-.2-.4-.4-.4H.4c-.2 0-.4.2-.4.4v8.8C0 15.3 1.2 17 4.5 17c1.5 0 3-.5 4.2-1.4l.4.9zm24.4-9c0-2.5-1.2-4.2-4.3-4.2-1.5 0-2.9.5-4.2 1.3-.5-.8-1.6-1.3-3.3-1.3-1.4 0-2.8.5-3.9 1.4l-.4-.9c-.1-.1-.2-.2-.3-.2H16c-.2 0-.4.2-.4.4v12.3c0 .2.2.4.4.4h2.2c.2 0 .4-.2.4-.4V6.6c.8-.5 1.8-.8 2.7-.8 1.2 0 1.9.4 1.9 1.7v8.8c0 .2.2.4.4.4h2.2c.2 0 .4-.2.4-.4V6.6c.8-.5 1.8-.8 2.7-.8 1.1 0 1.9.4 1.9 1.7v8.8c0 .2.2.4.4.4h2.2c.2 0 .4-.2.4-.4l-.3-8.8zm6.7 8.1c1.2.9 2.7 1.4 4.2 1.4 3.8 0 5.2-2.6 5.2-6.8s-1.4-6.8-5.2-6.8c-1.2 0-2.5.4-3.5 1v-4c0-.2-.2-.4-.4-.4h-2.2c-.2 0-.3.2-.3.4v15.9c0 .2.2.4.4.4h1.1c.1 0 .3-.1.3-.2l.4-.9zm3.5-1.1c-1 0-2-.3-2.8-.8V6.6c.9-.5 1.8-.8 2.8-.8 2.6 0 2.9 2 2.9 4.4s-.3 4.3-2.9 4.3zm16.7-8.6c-.3 0-.7-.1-1-.1-1.2 0-2.3.2-3.3.8v9.7c0 .2-.2.4-.4.4h-2.2c-.2 0-.4-.2-.4-.4V4c0-.2.2-.4.4-.4h1.1c.1 0 .3.1.3.2l.4.9c1.2-.9 2.6-1.4 4.1-1.4.3 0 .7 0 1 .1.2 0 .4.3.4.5v1.6c0 .2-.2.4-.4.4m7.5 4.8c-1.3.2-2.1.6-2.1 2 0 1 .4 1.9 2 1.9 1 0 2-.3 2.8-.9v-3.4l-2.7.4zm3.5 4.9c-1.1.9-2.5 1.4-3.9 1.4-3.4 0-4.5-2.1-4.5-4.2 0-2.8 1.8-4 4.8-4.3l2.9-.2v-.6c0-1.3-.6-1.9-2.6-1.9-1.2 0-2.4.2-3.6.6h-.1c-.2 0-.4-.2-.4-.4V4.3c0-.2.1-.3.3-.4 1.3-.4 2.7-.7 4-.7 4.3 0 5.3 1.9 5.3 4.6v8.3c0 .2-.2.4-.4.4h-1.1c-.1 0-.3-.1-.3-.2l-.4-.7zM86.2 14h.1c.2 0 .4.2.4.4v1.7c0 .2-.1.3-.2.4-1.1.4-2.2.6-3.4.5-4.6 0-6-2.8-6-6.8s1.4-6.8 6-6.8c1.1 0 2.3.1 3.3.5.1.1.2.2.2.4V6c0 .2-.2.4-.4.4h-.1c-.9-.3-1.9-.4-2.9-.4-2.5 0-3.3 1.7-3.3 4.3s.7 4.3 3.3 4.3c1.1-.2 2.1-.3 3-.6"></path></svg>
 5 |     </router-link>
 6 |     <MainNavigation />
 7 |   </header>
 8 | </template>
 9 | 
10 | <script lang="ts">
11 | import Vue from 'vue'
12 | import MainNavigation from './MainNavigation.vue'
13 | 
14 | export default Vue.extend({
15 |   name: 'PageHeader',
16 |   components: {
17 |     MainNavigation
18 |   },
19 | })
20 | </script>
21 | 
22 | <style scoped>
23 | .page-header {
24 |   background: white;
25 |   position: absolute;
26 |   max-width: var(--content-width);
27 |   width: 100%;
28 |   top: 0;
29 |   left: 0;
30 |   right: 0;
31 |   margin: 0 auto;
32 | }
33 | 
34 | .page-header__brand {
35 |   display: inline-flex;
36 |   padding: 5px 20px;
37 |   color: #162335;
38 | }
39 | 
40 | .page-header__brand:hover {
41 |   text-decoration: none;
42 | }
43 | 
44 | .page-header__brand-graphics {
45 |   height: 40px;
46 |   width: 115px;
47 |   fill: #162335;
48 | }
49 | 
50 | @media (min-width: 992px) {
51 |   .page-header {
52 |     background: transparent;
53 |     top: 20px;
54 |   }
55 |   .page-header__brand {
56 |     color: white;
57 |   }
58 |   .page-header__brand-graphics {
59 |     fill: white;
60 |   }
61 | }
62 | </style>
63 | 


--------------------------------------------------------------------------------
/samples/gridsome/src/components/README.md:
--------------------------------------------------------------------------------
1 | Add components that will be imported to Pages and Layouts to this folder.
2 | Learn more about components here: https://gridsome.org/docs/components/
3 | 
4 | You can delete this file.
5 | 


--------------------------------------------------------------------------------
/samples/gridsome/src/components/UniqueSellingPoints.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <article class="usp-container">
 3 |     <h1 v-if="title" class="usp-container__title">{{ title }}</h1>
 4 |     <div class="usp-item-container">
 5 |       <section class="usp" v-for="usp in uniqueSellingPoints" :key="usp.key">
 6 |         <h2 v-if="usp.title" class="usp__title">{{ usp.title }}</h2>
 7 |         <img v-if="usp.image" class="usp__image" :src="usp.image._url" alt="" />
 8 |         <div v-else class="usp__image"></div>
 9 |         <p class="usp__text">{{ usp.text }}</p>
10 |         <a v-if="usp.link" :href="usp.link.url" :target="usp.link.target" rel="noopener" class="usp__link">{{ usp.link.name }}</a>
11 |       </section>
12 |     </div>
13 |   </article>
14 | </template>
15 | 
16 | <script lang="ts">
17 | import Vue from 'vue'
18 | import { Link, UniqueSellingPoint } from '@/types'
19 | 
20 | export default Vue.extend({
21 |   props: {
22 |     title: { type: String },
23 |     uniqueSellingPoints: { type: Array as () => UniqueSellingPoint[] }
24 |   }
25 | })
26 | </script>
27 | 
28 | <style scoped>
29 | .usp-container {
30 |   display: grid;
31 |   grid-template-columns: var(--main-grid);
32 | }
33 | 
34 | .usp-container {
35 |   background: var(--grey);
36 |   padding-top: 50px;
37 |   grid-column: full-start / full-end;
38 | }
39 | 
40 | .usp-container__title {
41 |   grid-column: content-start / content-end;
42 |   font-size: 2.4em;
43 |   text-align: center;
44 | }
45 | 
46 | .usp-item-container {
47 |   grid-column: content-start / content-end;
48 |   display: grid;
49 | }
50 | 
51 | .usp {
52 |   display: grid;
53 |   text-align: center;
54 |   margin-bottom: 25px;
55 |   padding: 0 20px;
56 |   grid-template-rows: 120px auto auto auto;
57 | }
58 | 
59 | .usp__image {
60 |   grid-row: 1 / 1;
61 |   margin: 0 auto 20px auto;
62 | }
63 | 
64 | .usp__title {
65 |   font-size: 1.5em;
66 |   margin: 0 0 20px;
67 | }
68 | 
69 | .usp__text {
70 |   margin: 0 0 10px;
71 | }
72 | 
73 | .usp__link {
74 |   padding: 10px 20px;
75 | }
76 | 
77 | @media (min-width: 992px) {
78 |   .usp-item-container {
79 |     grid-template-columns: 1fr 1fr 1fr;
80 |   }
81 | }
82 | </style>
83 | 


--------------------------------------------------------------------------------
/samples/gridsome/src/components/elements/TextAndImage.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <article class="text-and-image" :class="{ 'text-and-image--image-left': showLargeImage }">
  3 |   <h1 class="text-and-image__title">{{ title }}</h1>
  4 |   <div class="text-and-image__text" v-html="text" />
  5 |   <img v-if="showLargeImage && image" class="text-and-image__image"
  6 |         :srcset="image._url + '?width=320&height=240&mode=crop 320w,' +
  7 |                   image._url + '?width=480&height=360&mode=crop 480w,' +
  8 |                   image._url + '?width=1024px&height=768&mode=crop 1024w'"
  9 |         sizes="(max-width: 320px) 320px,
 10 |                 (max-width: 480px) 480px
 11 |                 (max-width: 1024px) 1024px"
 12 |         :src="image._url + '?width=750&height=515&mode=crop'"
 13 |         loading="lazy"
 14 |         alt="">
 15 |   <img v-else-if="image" class="text-and-image__image"
 16 |         :srcset="image._url + '?width=320&height=240&mode=crop 320w,' +
 17 |                   image._url + '?width=480&height=360&mode=crop 480w,' +
 18 |                   image._url + '?width=1024px&height=768&mode=crop 1024w'"
 19 |         sizes="(max-width: 320px) 320px,
 20 |                 (max-width: 480px) 480px
 21 |                 (max-width: 1024px) 1024px"
 22 |         :src="image._url + '?width=320&height=240&mode=crop'"
 23 |         loading="lazy"
 24 |         alt="">
 25 | </article>
 26 | </template>
 27 | 
 28 | <script lang="ts">
 29 | import Vue from 'vue'
 30 | 
 31 | import { Image } from '@/types'
 32 | 
 33 | export default Vue.extend({
 34 |   props: {
 35 |     title: { type: String, required: true },
 36 |     text: { type: String, required: true },
 37 |     image: { type: Object as () => Image },
 38 |     showLargeImage: { type: Boolean, required: true }
 39 |   }
 40 | })
 41 | </script>
 42 | 
 43 | <style scoped>
 44 | .text-and-image {
 45 |   margin: 20px 20px 0 20px;
 46 |   grid-column: content-start / content-end;
 47 |   display: grid;
 48 |   grid-template-rows: auto 1fr auto;
 49 | }
 50 | 
 51 | .text-and-image__title,
 52 | .text-and-image__text {
 53 |   grid-column: 1 / 1;
 54 | }
 55 | 
 56 | .text-and-image__title {
 57 |   font-size: 1.5em;
 58 | }
 59 | 
 60 | .text-and-image__image {
 61 |   margin-bottom: 20px;
 62 |   grid-row: 2 / 2;
 63 | }
 64 | 
 65 | .text-and-image--image-left .text-and-image__title,
 66 | .text-and-image--image-left .text-and-image__text {
 67 |   grid-column: 2 / -1;
 68 | }
 69 | 
 70 | .text-and-image--image-left .text-and-image__image {
 71 |   grid-column: 1;
 72 | }
 73 | 
 74 | @media (min-width: 992px) {
 75 |   .text-and-image {
 76 |     margin: 40px;
 77 |     grid-template-columns: 2fr 1fr;
 78 |   }
 79 | 
 80 |   .text-and-image__title {
 81 |     font-size: 2.8em;
 82 |   }
 83 | 
 84 |   .text-and-image__title,
 85 |   .text-and-image__text {
 86 |     padding: 0 30px 0 0;
 87 |   }
 88 | 
 89 |   .text-and-image__image {
 90 |     margin: 0 auto;
 91 |     align-self: center;
 92 |     grid-column: 2 / -1;
 93 |     grid-row: 1 / -1;
 94 |   }
 95 | 
 96 |   .text-and-image--image-left .text-and-image__title,
 97 |   .text-and-image--image-left .text-and-image__text {
 98 |     padding: 0 0 0 30px;
 99 |   }
100 | }
101 | </style>
102 | 


--------------------------------------------------------------------------------
/samples/gridsome/src/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/umbraco/Umbraco.Headless.Client.NodeJs/8b5cf81884509dcd018e9260181a0abe21136946/samples/gridsome/src/favicon.png


--------------------------------------------------------------------------------
/samples/gridsome/src/layouts/Default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <fragment>
 3 |     <PageHeader />
 4 |     <main class="main-content">
 5 |       <slot/>
 6 |     </main>
 7 |     <PageFooter />
 8 |   </fragment>
 9 | </template>
10 | 
11 | <static-query>
12 | query {
13 |   metadata {
14 |     siteName
15 |   }
16 | }
17 | </static-query>
18 | 
19 | <script lang="ts">
20 | import Vue from 'vue'
21 | import PageHeader from '@/components/PageHeader.vue'
22 | import PageFooter from '@/components/PageFooter.vue'
23 | 
24 | export default Vue.extend({
25 |   name: 'Layout',
26 |   components: {
27 |     PageHeader,
28 |     PageFooter,
29 |   },
30 | })
31 | </script>
32 | 
33 | <style>
34 | :root {
35 |   --content-width: 1360px;
36 |   --grey: #f9f7f4;
37 |   --main-grid:
38 |     [full-start] 1fr [content-start] minmax(320px, var(--content-width))
39 |     [content-end] 1fr [full-end];
40 | }
41 | 
42 | *,
43 | ::after,
44 | ::before {
45 |   box-sizing: border-box;
46 | }
47 | 
48 | html {
49 |   font-family: Lato, Arial, Helvetica, sans-serif;
50 |   font-size: 18px;
51 | }
52 | 
53 | body {
54 |   padding: 0;
55 |   margin: 0;
56 | }
57 | 
58 | img {
59 |   max-width: 100%;
60 |   height: auto;
61 | }
62 | 
63 | h1,
64 | h2,
65 | h3,
66 | h4,
67 | h5 {
68 |   font-weight: 700;
69 |   line-height: 1.3;
70 |   margin: 0 0 20px;
71 | }
72 | 
73 | ul {
74 |   margin: 0;
75 | }
76 | 
77 | a {
78 |   color: #3544b1;
79 |   text-decoration: none;
80 | }
81 | 
82 | a:hover {
83 |   text-decoration: underline;
84 | }
85 | 
86 | .main-content {
87 |   display: grid;
88 |   grid-template-columns: var(--main-grid)
89 | }
90 | </style>
91 | 


--------------------------------------------------------------------------------
/samples/gridsome/src/layouts/README.md:
--------------------------------------------------------------------------------
1 | Layout components are used to wrap pages and templates. Layouts should contain components like headers, footers or sidebars that will be used across the site.
2 | 
3 | Learn more about Layouts: https://gridsome.org/docs/layouts/
4 | 
5 | You can delete this file.
6 | 


--------------------------------------------------------------------------------
/samples/gridsome/src/main.js:
--------------------------------------------------------------------------------
 1 | // This is the main.js file. Import global CSS and scripts here.
 2 | // The Client API can be used here. Learn more: gridsome.org/docs/client-api
 3 | 
 4 | import DefaultLayout from '~/layouts/Default.vue'
 5 | import Fragment from 'vue-fragment'
 6 | 
 7 | export default function (Vue, { router, head, isClient }) {
 8 |   // Set default layout as a global component
 9 |   Vue.use(Fragment.Plugin)
10 |   Vue.component('Layout', DefaultLayout)
11 | }
12 | 


--------------------------------------------------------------------------------
/samples/gridsome/src/pages/README.md:
--------------------------------------------------------------------------------
1 | Pages are usually used for normal pages or for listing items from a GraphQL collection.
2 | Add .vue files here to create pages. For example **About.vue** will be **site.com/about**.
3 | Learn more about pages: https://gridsome.org/docs/pages/
4 | 
5 | You can delete this file.
6 | 


--------------------------------------------------------------------------------
/samples/gridsome/src/templates/Frontpage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Layout>
 3 |     <Hero :title="$page.frontpage.heroTitle" :subtitle="$page.frontpage.heroSubtitle" :image="$page.frontpage.heroImage" />
 4 |     <UniqueSellingPoints :title="$page.frontpage.uniqueSellingPointsTitle" :uniqueSellingPoints="$page.frontpage.uniqueSellingPoints" />
 5 |     <Elements :elements="$page.frontpage.elements" />
 6 |   </Layout>
 7 | </template>
 8 | 
 9 | <page-query>
10 | query($id: ID!) {
11 |   frontpage(id: $id) {
12 |     name
13 |     heroTitle
14 |     heroSubtitle
15 |     heroImage {
16 |       _url
17 |     }
18 |     uniqueSellingPointsTitle
19 |     uniqueSellingPoints {
20 |       title
21 |       text
22 |       image {
23 |         _url
24 |       }
25 |       link {
26 |         url
27 |         #target
28 |         name
29 |       }
30 |     }
31 |     elements {
32 |       contentTypeAlias
33 |       title
34 |       text
35 |       image {
36 |         _url
37 |       }
38 |       showLargeImage
39 |     }
40 |   }
41 | }
42 | </page-query>
43 | 
44 | <script lang="ts">
45 | import Elements from '@/components/Elements.vue'
46 | import Hero from '@/components/Hero.vue'
47 | import UniqueSellingPoints from '@/components/UniqueSellingPoints.vue'
48 | 
49 | export default {
50 |   name: 'Frontpage',
51 |   components: {
52 |     Elements,
53 |     Hero,
54 |     UniqueSellingPoints
55 |   },
56 |   props: {
57 |   }
58 | }
59 | </script>
60 | 


--------------------------------------------------------------------------------
/samples/gridsome/src/templates/README.md:
--------------------------------------------------------------------------------
1 | Templates for **GraphQL collections** should be added here.
2 | To create a template for a collection called `WordPressPost`
3 | create a file named `WordPressPost.vue` in this folder.
4 | 
5 | Learn more: https://gridsome.org/docs/templates/
6 | 
7 | You can delete this file.
8 | 


--------------------------------------------------------------------------------
/samples/gridsome/src/templates/Textpage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Layout>
 3 |     <Hero :title="$page.textpage.heroTitle" :subtitle="$page.textpage.heroSubtitle" :image="$page.textpage.heroImage" />
 4 |     <Elements :elements="$page.textpage.elements" />
 5 |   </Layout>
 6 | </template>
 7 | 
 8 | <page-query>
 9 | query($id: ID!) {
10 |   textpage(id: $id) {
11 |     name
12 |     heroTitle
13 |     heroSubtitle
14 |     heroImage {
15 |       _url
16 |     }
17 |     elements {
18 |       contentTypeAlias
19 |       title
20 |       text
21 |       image {
22 |         _url
23 |       }
24 |       showLargeImage
25 |     }
26 |   }
27 | }
28 | </page-query>
29 | 
30 | <script lang="ts">
31 | import Elements from '@/components/Elements.vue'
32 | import Hero from '@/components/Hero.vue'
33 | 
34 | export default {
35 |   name: 'Textpage',
36 |   components: {
37 |     Elements,
38 |     Hero,
39 |   },
40 |   props: {
41 |   }
42 | }
43 | </script>
44 | 


--------------------------------------------------------------------------------
/samples/gridsome/src/types.ts:
--------------------------------------------------------------------------------
 1 | import { Content } from '@umbraco/headless-client'
 2 | 
 3 | export type Link = {
 4 |   url: string
 5 |   target?: string
 6 |   name: string
 7 | }
 8 | 
 9 | export type Image = {
10 |   _url: string
11 | }
12 | 
13 | export type Hero = {
14 |   image?: Image,
15 |   title: string,
16 |   subtitle?: string
17 | }
18 | 
19 | export type UniqueSellingPoint = {
20 |   image?: Image
21 |   link?: Link
22 |   text: string
23 |   title?: string
24 | }
25 | 
26 | export type HideInNavigation = {
27 |   umbNaviHide: boolean
28 | }
29 | 
30 | export type Element = {
31 |   contentTypeAlias: string
32 | }
33 | 
34 | export type TextAndImage = Element & {
35 |   title: string
36 |   text: string
37 |   image?: Image
38 |   showLargeImage: boolean
39 | }
40 | 
41 | export type Elements = TextAndImage
42 | 
43 | export type Frontpage = Content & HideInNavigation & Hero & UniqueSellingPoint & Elements[]
44 | export type Textpage = Content & HideInNavigation & Hero & Elements[]
45 | 


--------------------------------------------------------------------------------
/samples/gridsome/src/vue-shims.d.ts:
--------------------------------------------------------------------------------
1 | declare module "*.vue" {
2 |     import Vue from "vue";
3 |     export default Vue;
4 | }
5 | 


--------------------------------------------------------------------------------
/samples/gridsome/static/README.md:
--------------------------------------------------------------------------------
1 | Add static files here. Files in this directory will be copied directly to `dist` folder during build. For example, /static/robots.txt will be located at https://yoursite.com/robots.txt.
2 | 
3 | This file should be deleted.


--------------------------------------------------------------------------------
/samples/gridsome/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "compilerOptions": {
 3 |         "target": "es5",
 4 |         "module": "es2015",
 5 |         "moduleResolution": "node",
 6 |         "noImplicitReturns": true,
 7 |         "outDir": "./built/",
 8 |         "sourceMap": true,
 9 |         "strict": true
10 |     },
11 |     "include": [
12 |         "./src/**/*"
13 |     ]
14 | }
15 | 


--------------------------------------------------------------------------------
/samples/koa/README.md:
--------------------------------------------------------------------------------
 1 | # Umbraco Headless Node.js Koa sample
 2 | 
 3 | Node.js Koa sample site for Umbraco Headless.
 4 | 
 5 | ## Features
 6 | 
 7 | - [Node.js](https://nodejs.org/en/)
 8 | - [Typescript](https://www.typescriptlang.org/)
 9 | - [Koa](https://koajs.com/)
10 |   - [koa-logger](https://github.com/koajs/logger)
11 |   - [koa-static](https://github.com/koajs/static)
12 |   - [koa-views](https://github.com/queckezz/koa-views)
13 | - [Nunjucks](https://mozilla.github.io/nunjucks/)
14 | 
15 | ## Prerequisites
16 | 
17 | To run this sample you will need the following tools installed
18 | 
19 | - [Node.js](https://nodejs.org/en/) 10 or newer
20 | 
21 | ## Getting Started
22 | 
23 | Before running the application,  `package.json` needs to be updated with your Umbraco Headless
24 |  project alias (the project alias can be found in the [Umbraco Cloud Portal](https://www.s1.umbraco.io)). If the Content Delivery API is protected the `apiKey` also needs to be updated.
25 | 
26 | ```json
27 | {
28 |   "umbraco": {
29 |     "projectAlias": "",
30 |     "apiKey": ""
31 |   }
32 | }
33 | ```
34 | 
35 | In order to use the sample you will need an Umbraco Headless project with content, media and document types that correspond to those setup in the views and templates of the sample website. You can use `demo-headless` as the project alias to get started with the sample. The Project behind this alias has been used as the source of the sample, so its a good place to start.
36 | 
37 | The `ApiKey` is not used in this sample and can thus be left blank. If you chose to protect the content exposed via the Content Delivery API then you will need an API-Key, but its an option that has to be actively turned on (or off - its off by default) via the Umbraco Backoffice in the Headless tree in the Settings section.
38 | 
39 | ### Installation
40 | 
41 | To install dependencies, run the following command
42 | 
43 | ```bash
44 | > npm install
45 | ```
46 | 
47 | ### Usage
48 | 
49 | Run the following command to start the site
50 | 
51 | ```bash
52 | > npm start
53 | ```
54 | 
55 | This will start the Koa webserver listening on `http://localhost:3000`
56 | 


--------------------------------------------------------------------------------
/samples/koa/app.ts:
--------------------------------------------------------------------------------
 1 | import path from 'path';
 2 | 
 3 | import views from 'koa-views';
 4 | import logger from 'koa-logger';
 5 | import serve from "koa-static";
 6 | import Koa from 'koa';
 7 | import { Client } from "@umbraco/headless-client";
 8 | 
 9 | const app = new Koa();
10 | const client = new Client({
11 |   projectAlias: process.env.UMBRACO__PROJECTALIAS || require('./package.json').umbraco.projectAlias,
12 |   apiKey: process.env.UMBRACO__APIKEY || require('./package.json').umbraco.apiKey
13 | })
14 | 
15 | const getByUrl = async (cache: Object, path: string) => {
16 |   const content = cache[path];
17 |   if (content)
18 |     return content;
19 | 
20 |   return cache[path] = await client.delivery.content.byUrl(path);
21 | }
22 | 
23 | const getNavigationItems = async (ctx: Koa.ParameterizedContext, cache: Object) => {
24 |   const root = await getByUrl(cache, '/');
25 |   const children = await client.delivery.content.children(root._id);
26 | 
27 |   return (children.items as any)
28 |     .filter(item => !item.umbNaviHide)
29 |     .map(item => {
30 |       return {
31 |         title: item.name,
32 |         url: item._url,
33 |         isCurrent: item._url === ctx.path
34 |       }
35 |     });
36 | }
37 | 
38 | const getFooter = async (ctx: Koa.ParameterizedContext, cache: Object) => {
39 |   const root = await getByUrl(cache, '/');
40 | 
41 |   return {
42 |     title: root.footerTitle,
43 |     links: root.footerLinks
44 |   };
45 | }
46 | 
47 | // middleware
48 | app.use(logger());
49 | app.use(serve(path.join(__dirname, 'public')));
50 | 
51 | app.use(views(path.join(__dirname, 'views'), {
52 |   extension: 'njk',
53 |   map: { njk: 'nunjucks' },
54 |   options: { settings: { views: path.join(__dirname, 'views') } }
55 | }));
56 | 
57 | // route definitions
58 | app.use(async (ctx: Koa.ParameterizedContext) => {
59 |   try {
60 |     const cache = {};
61 |     const content = await getByUrl(cache, ctx.path);
62 |     const navigationItems = await getNavigationItems(ctx, cache);
63 |     const footer = await getFooter(ctx, cache);
64 | 
65 |     await ctx.render(content.contentTypeAlias, { content, mainNavigation: navigationItems, footer });
66 |   } catch (err) {
67 |     if (err.jsonData && err.jsonData.error.code === 'NotFound') {
68 |       ctx.status = 404;
69 |       return;
70 |     }
71 |     throw err;
72 |   }
73 | });
74 | 
75 | // listen
76 | const port = process.env.port || 3000;
77 | app.listen(port, () => console.log(`App listening on http://localhost:${port}`));
78 | 


--------------------------------------------------------------------------------
/samples/koa/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "umbracos-headless-koa-sample",
 3 |   "version": "0.1.0",
 4 |   "description": "Umbraco Headless Koa sample",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "start": "ts-node-dev --respawn app.ts"
 8 |   },
 9 |   "author": "",
10 |   "license": "MIT",
11 |   "umbraco": {
12 |     "projectAlias": "",
13 |     "apiKey": ""
14 |   },
15 |   "dependencies": {
16 |     "@umbraco/headless-client": "../../dist",
17 |     "koa": "^2.11.0",
18 |     "koa-logger": "^3.2.1",
19 |     "koa-static": "^5.0.0",
20 |     "koa-views": "^6.2.1",
21 |     "nunjucks": "^3.2.1"
22 |   },
23 |   "devDependencies": {
24 |     "@types/koa": "^2.0.51",
25 |     "@types/koa-logger": "^3.1.1",
26 |     "@types/koa-router": "^7.0.42",
27 |     "@types/koa-static": "^4.0.1",
28 |     "@types/koa-views": "^2.0.3",
29 |     "ts-node-dev": "^1.0.0-pre.44",
30 |     "typescript": "^3.7.2"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/samples/koa/public/css/site.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   --content-width: 1360px;
  3 |   --grey: #F9F7F4;
  4 | }
  5 | 
  6 | *, ::after, ::before {
  7 |   box-sizing: border-box;
  8 | }
  9 | 
 10 | html {
 11 |   font-family: Lato, Arial, Helvetica, sans-serif;
 12 |   font-size: 18px;
 13 | }
 14 | 
 15 | body {
 16 |   padding: 0;
 17 |   margin: 0;
 18 | }
 19 | 
 20 | img {
 21 |   max-width: 100%;
 22 |   height: auto;
 23 | }
 24 | 
 25 | h1, h2, h3, h4, h5 {
 26 |   font-weight: 700;
 27 |   line-height: 1.3;
 28 |   margin: 0 0 20px;
 29 | }
 30 | 
 31 | ul {
 32 |   margin: 0;
 33 | }
 34 | 
 35 | a {
 36 |   color: #3544b1;
 37 |   text-decoration: none;
 38 | }
 39 | 
 40 | a:hover {
 41 |   text-decoration: underline;
 42 | }
 43 | 
 44 | /* Header */
 45 | 
 46 | .page-header {
 47 |   background: white;
 48 |   position: absolute;
 49 |   max-width: var(--content-width);
 50 |   width: 100%;
 51 |   top: 0;
 52 |   left: 0;
 53 |   right: 0;
 54 |   margin: 0 auto;
 55 | }
 56 | 
 57 | .page-header__brand {
 58 |   display: inline-flex;
 59 |   padding: 5px 20px;
 60 |   color: #162335;
 61 | }
 62 | 
 63 | .page-header__brand:hover {
 64 |   text-decoration: none;
 65 | }
 66 | 
 67 | .page-header__brand-graphics {
 68 |   height: 40px;
 69 |   width: 115px;
 70 |   fill: #162335;
 71 | }
 72 | 
 73 | .page-header__nav-container {
 74 |   position: absolute;
 75 |   top: 0;
 76 |   right: 0;
 77 |   margin: 0;
 78 |   padding: 0 20px;
 79 | }
 80 | 
 81 | @media (min-width: 992px) {
 82 |   .page-header {
 83 |     background: transparent;
 84 |     top: 20px;
 85 |   }
 86 |   .page-header__brand {
 87 |     color: white;
 88 |   }
 89 |   .page-header__brand-graphics {
 90 |     fill: white;
 91 |   }
 92 |   .page-header__nav-container {
 93 |     top: 15px;
 94 |   }
 95 | }
 96 | 
 97 | /* Navigation */
 98 | 
 99 | .nav {
100 |   display: none;
101 |   list-style: none;
102 |   margin: 0;
103 |   padding: 0;
104 | }
105 | 
106 | .nav__item {
107 |   display: inline;
108 |   padding: 5px;
109 | }
110 | 
111 | .nav__item-link {
112 |   color: white;
113 | }
114 | 
115 | .nav__item-link--current {
116 |   text-decoration:  underline;
117 | }
118 | 
119 | .nav__item-link--current:hover {
120 |   text-decoration-thickness: 3px;
121 | }
122 | 
123 | @media (min-width: 992px) {
124 |   .nav {
125 |     display: block;
126 |   }
127 | }
128 | /* Main */
129 | 
130 | .main-content,
131 | .usp-container,
132 | .page-footer-container {
133 |   display: grid;
134 |   grid-template-columns: [full-start] 1fr [content-start] minmax(320px, var(--content-width))
135 |   [content-end] 1fr [full-end];
136 | }
137 | 
138 | /* Hero */
139 | 
140 | .hero {
141 |   grid-column: full-start / full-end;
142 |   padding: 50px 5px 0 5px;
143 |   min-height: 230px;
144 |   background-position-x: 50%;
145 |   background-repeat: no-repeat;
146 |   background-size: cover;
147 |   color: white;
148 |   text-align: center;
149 |   display: grid;
150 |   align-content: center;
151 | }
152 | 
153 | .hero__title {
154 |   font-size: 2em;
155 |   font-weight: 900;
156 | }
157 | 
158 | .hero__subtitle {
159 |   font-size: 1.1em;
160 |   font-weight: 400;
161 | }
162 | 
163 | @media (min-width: 992px) {
164 |   .hero {
165 |     height: 430px;
166 |   }
167 |   .hero__title {
168 |     font-size: 4.2em;
169 |   }
170 | }
171 | 
172 | /* USP */
173 | 
174 | .usp-container {
175 |   background: var(--grey);
176 |   padding-top: 50px;
177 |   grid-column: full-start / full-end;
178 | }
179 | 
180 | .usp-container__title {
181 |   grid-column: content-start / content-end;
182 |   font-size: 2.4em;
183 |   text-align: center;
184 | }
185 | 
186 | .usp-item-container {
187 |   grid-column: content-start / content-end;
188 |   display: grid;
189 | }
190 | 
191 | .usp {
192 |   display: grid;
193 |   text-align: center;
194 |   margin-bottom: 25px;
195 |   padding: 0 20px;
196 |   grid-template-rows: 120px auto auto auto;
197 | }
198 | 
199 | .usp__image {
200 |   grid-row: 1 / 1;
201 |   margin: 0 auto 20px auto;
202 | }
203 | 
204 | .usp__title {
205 |   font-size: 1.5em;
206 |   margin: 0 0 20px;
207 | }
208 | 
209 | .usp__text {
210 |   margin: 0 0 10px;
211 | }
212 | 
213 | .usp__link {
214 |   padding: 10px 20px;
215 | }
216 | 
217 | @media (min-width: 992px) {
218 |   .usp-item-container {
219 |     grid-template-columns: 1fr 1fr 1fr;
220 |   }
221 | }
222 | 
223 | /* Text and Image */
224 | 
225 | .text-and-image {
226 |   margin: 20px 20px 0 20px;
227 |   grid-column: content-start / content-end;
228 |   display: grid;
229 |   grid-template-rows: auto 1fr auto;
230 | }
231 | 
232 | .text-and-image__title,
233 | .text-and-image__text {
234 |   grid-column: 1 / 1;
235 | }
236 | 
237 | .text-and-image__title {
238 |   font-size: 1.5em;
239 | }
240 | 
241 | .text-and-image__image {
242 |   margin-bottom: 20px;
243 |   grid-row: 2 / 2;
244 | }
245 | 
246 | .text-and-image--image-left .text-and-image__title,
247 | .text-and-image--image-left .text-and-image__text {
248 |   grid-column: 2 / -1;
249 | }
250 | 
251 | .text-and-image--image-left .text-and-image__image {
252 |   grid-column: 1;
253 | }
254 | 
255 | @media (min-width: 992px) {
256 |   .text-and-image {
257 |     margin: 40px;
258 |     grid-template-columns: 2fr 1fr;
259 |   }
260 | 
261 |   .text-and-image__title {
262 |     font-size: 2.8em;
263 |   }
264 | 
265 |   .text-and-image__title,
266 |   .text-and-image__text {
267 |     padding: 0 30px 0 0;
268 |   }
269 | 
270 |   .text-and-image__image {
271 |     margin: 0 auto;
272 |     align-self: center;
273 |     grid-column: 2 / -1;
274 |     grid-row: 1 / -1;
275 |   }
276 | 
277 |   .text-and-image--image-left .text-and-image__title,
278 |   .text-and-image--image-left .text-and-image__text {
279 |     padding: 0 0 0 30px;
280 |   }
281 | }
282 | 
283 | /* Footer */
284 | 
285 | .page-footer-container {
286 |   grid-column: full-start / full-end;
287 |   background: var(--grey);
288 | }
289 | 
290 | .page-footer {
291 |   margin: 50px 20px;
292 |   color: #101f3c;
293 |   grid-column: content-start / content-end;
294 |   display: grid;
295 |   grid-template-rows: auto 1fr;
296 | }
297 | 
298 | .page-footer__title {
299 |   font-size: 1.2em;
300 | }
301 | 
302 | .page-footer__links {
303 |   list-style-type: none;
304 |   margin: 0 0 40px;
305 |   padding: 0;
306 | }
307 | 
308 | .page-footer__link,
309 | .page-footer__link:focus,
310 | .page-footer__link:visited {
311 |   color: #8A8A8A;
312 |   line-height: 2;
313 | }
314 | 
315 | .page-footer__link:hover {
316 |   color: #333;
317 |   text-decoration: none;
318 | }
319 | 
320 | .page-footer__graphics {
321 |   height: 150px;
322 |   widows: 250px;
323 |   transform: translateX(-27%);
324 | }
325 | 
326 | @media (min-width: 992px) {
327 |   .page-footer {
328 |     margin: 70px 20px 100px;
329 |   }
330 | 
331 |   .page-footer__graphics {
332 |     transform: none;
333 |     align-self: center;
334 |     margin: 0 auto;
335 |   }
336 | }
337 | 


--------------------------------------------------------------------------------
/samples/koa/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/umbraco/Umbraco.Headless.Client.NodeJs/8b5cf81884509dcd018e9260181a0abe21136946/samples/koa/public/favicon.ico


--------------------------------------------------------------------------------
/samples/koa/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "module": "commonjs",
 4 |     "target": "es5",
 5 |     "esModuleInterop": true,
 6 |     "lib": ["es2015"]
 7 |   },
 8 |   "exclude": [
 9 |     "node_modules"
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/samples/koa/views/_layout.njk:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8" />
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |   <title>{{ content.name }}</title>
 7 |   <link rel="stylesheet" href="/css/site.css" />
 8 | </head>
 9 | <body>
10 | <header class="page-header">
11 |   <a class="page-header__brand" href="/" title="Go to home page">
12 |     <svg class="page-header__brand-graphics" xmlns="https://www.w3.org/2000/svg" viewbox="0 0 101 17"><path class="bbst0" d="M89.4 10.2c0-4 1.1-6.8 5.8-6.8s5.8 2.8 5.8 6.8-1.1 6.8-5.8 6.8c-4.6 0-5.8-2.8-5.8-6.8zm8.7 0c0-2.8-.4-4.4-2.8-4.4s-2.8 1.6-2.8 4.4.4 4.4 2.8 4.4 2.8-1.7 2.8-4.4zm-89 6.3c.1.1.2.2.3.2h1.1c.2 0 .4-.2.4-.4V4c0-.2-.2-.4-.4-.4H8.4c-.2 0-.4.2-.4.4v9.7c-.9.5-2 .8-3 .8-1.4 0-2.1-.6-2.1-1.9V4c0-.2-.2-.4-.4-.4H.4c-.2 0-.4.2-.4.4v8.8C0 15.3 1.2 17 4.5 17c1.5 0 3-.5 4.2-1.4l.4.9zm24.4-9c0-2.5-1.2-4.2-4.3-4.2-1.5 0-2.9.5-4.2 1.3-.5-.8-1.6-1.3-3.3-1.3-1.4 0-2.8.5-3.9 1.4l-.4-.9c-.1-.1-.2-.2-.3-.2H16c-.2 0-.4.2-.4.4v12.3c0 .2.2.4.4.4h2.2c.2 0 .4-.2.4-.4V6.6c.8-.5 1.8-.8 2.7-.8 1.2 0 1.9.4 1.9 1.7v8.8c0 .2.2.4.4.4h2.2c.2 0 .4-.2.4-.4V6.6c.8-.5 1.8-.8 2.7-.8 1.1 0 1.9.4 1.9 1.7v8.8c0 .2.2.4.4.4h2.2c.2 0 .4-.2.4-.4l-.3-8.8zm6.7 8.1c1.2.9 2.7 1.4 4.2 1.4 3.8 0 5.2-2.6 5.2-6.8s-1.4-6.8-5.2-6.8c-1.2 0-2.5.4-3.5 1v-4c0-.2-.2-.4-.4-.4h-2.2c-.2 0-.3.2-.3.4v15.9c0 .2.2.4.4.4h1.1c.1 0 .3-.1.3-.2l.4-.9zm3.5-1.1c-1 0-2-.3-2.8-.8V6.6c.9-.5 1.8-.8 2.8-.8 2.6 0 2.9 2 2.9 4.4s-.3 4.3-2.9 4.3zm16.7-8.6c-.3 0-.7-.1-1-.1-1.2 0-2.3.2-3.3.8v9.7c0 .2-.2.4-.4.4h-2.2c-.2 0-.4-.2-.4-.4V4c0-.2.2-.4.4-.4h1.1c.1 0 .3.1.3.2l.4.9c1.2-.9 2.6-1.4 4.1-1.4.3 0 .7 0 1 .1.2 0 .4.3.4.5v1.6c0 .2-.2.4-.4.4m7.5 4.8c-1.3.2-2.1.6-2.1 2 0 1 .4 1.9 2 1.9 1 0 2-.3 2.8-.9v-3.4l-2.7.4zm3.5 4.9c-1.1.9-2.5 1.4-3.9 1.4-3.4 0-4.5-2.1-4.5-4.2 0-2.8 1.8-4 4.8-4.3l2.9-.2v-.6c0-1.3-.6-1.9-2.6-1.9-1.2 0-2.4.2-3.6.6h-.1c-.2 0-.4-.2-.4-.4V4.3c0-.2.1-.3.3-.4 1.3-.4 2.7-.7 4-.7 4.3 0 5.3 1.9 5.3 4.6v8.3c0 .2-.2.4-.4.4h-1.1c-.1 0-.3-.1-.3-.2l-.4-.7zM86.2 14h.1c.2 0 .4.2.4.4v1.7c0 .2-.1.3-.2.4-1.1.4-2.2.6-3.4.5-4.6 0-6-2.8-6-6.8s1.4-6.8 6-6.8c1.1 0 2.3.1 3.3.5.1.1.2.2.2.4V6c0 .2-.2.4-.4.4h-.1c-.9-.3-1.9-.4-2.9-.4-2.5 0-3.3 1.7-3.3 4.3s.7 4.3 3.3 4.3c1.1-.2 2.1-.3 3-.6"></path></svg>
13 |   </a>
14 |   {% include 'partials/_mainNavigation.njk' %}
15 | </header>
16 | <main class="main-content">
17 |   {% block content %}{% endblock %}
18 | </main>
19 | <footer class="page-footer-container">
20 |   {% include 'partials/_footer.njk' %}
21 | </footer>
22 | </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/samples/koa/views/frontpage.njk:
--------------------------------------------------------------------------------
1 | {% extends "_layout.njk" %}
2 | 
3 | {% block content %}
4 |   {% include 'partials/_hero.njk' %}
5 |   {% include 'partials/_uniqueSellingPoints.njk' %}
6 |   {% include 'partials/_elements.njk' %}
7 | {% endblock %}
8 | 


--------------------------------------------------------------------------------
/samples/koa/views/partials/_elements.njk:
--------------------------------------------------------------------------------
1 | {% for element in content.elements %}
2 |   {% include 'partials/elements/_' + element.contentTypeAlias + '.njk' %}
3 | {% endfor %}
4 | 


--------------------------------------------------------------------------------
/samples/koa/views/partials/_footer.njk:
--------------------------------------------------------------------------------
 1 | <div class="page-footer">
 2 |   <h1 class="page-footer__title">{{ footer.title }}</h1>
 3 |   <ul class="page-footer__links">
 4 |     {% for link in footer.links %}
 5 |       <li><a class="page-footer__link" href="{{ link.url }}" target="{{ link.target }}" rel="noopener">{{ link.name }}</a></li>
 6 |     {% endfor %}
 7 |   </ul>
 8 |   <svg class="page-footer__graphics" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 616.79 369.24"><defs><style> .cls-1 { fill: #3544b1; } .cls-2 { fill: #ffedd6; } .cls-3 { fill: #fba0a2; } </style></defs><path class="cls-1" d="M360.16,128.15A128.32,128.32,0,1,1,488.48,256.63,128.32,128.32,0,0,1,360.16,128.15Zm125.72,43.94a126.27,126.27,0,0,1-29.66-2.67,22.72,22.72,0,0,1-16.2-13q-4.35-10-4.23-31a196,196,0,0,1,1.37-21.8q1.26-10.57,2.51-17.43l.87-4.54a2.67,2.67,0,0,0,0-.4,2.6,2.6,0,0,0-2.15-2.58L421.84,76.1h-.36a2.61,2.61,0,0,0-2.53,2c-.28,1.06-.45,1.84-.94,4.38-.95,4.87-1.82,9.62-2.79,16.55a213.07,213.07,0,0,0-1.87,22.7,117,117,0,0,0,0,15.89q.58,21.08,7.23,33.65T443.1,189.4q15.87,5.53,44.22,5.41h2.36q28.38.12,44.2-5.41t22.52-18.12q6.65-12.6,7.23-33.65a117,117,0,0,0,0-15.89A213.07,213.07,0,0,0,561.76,99c-1-6.86-1.84-11.59-2.79-16.55-.49-2.54-.66-3.32-.94-4.38a2.6,2.6,0,0,0-2.53-2h-.43l-16.55,2.58a2.61,2.61,0,0,0-2.18,2.58,2.67,2.67,0,0,0,0,.4l.88,4.54q1.24,6.89,2.53,17.43a198.39,198.39,0,0,1,1.35,21.8q.21,20.88-4.24,30.93a22.7,22.7,0,0,1-16.05,13.06,126.1,126.1,0,0,1-29.64,2.67Z"></path><g><path class="cls-2" d="M278.35,287.27s4-4.49,43.76-22.38c16.77-7.55,26.83-18.54,40.35-20.79s58.26-36,44.81-59.8-36.22,2.44-50-.66-26.83,1.55-50.75,16.49c-23.31,14.56-48.54,20.33-59.83,32C235.14,244.06,278.35,287.27,278.35,287.27Z"></path><path class="cls-3" d="M18.67,257.22l242.75-50,33.83,90.84S142.65,375.77,46.11,368.8C-38,362.73,18.67,257.22,18.67,257.22Z"></path></g></svg>
 9 | </div>
10 | 


--------------------------------------------------------------------------------
/samples/koa/views/partials/_hero.njk:
--------------------------------------------------------------------------------
1 | <section class="hero" style="background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)){% if content.heroImage %}, url({{ content.heroImage._url }}?width=1980&amp;height=430&amp;mode=crop){% endif %}">
2 |   <h1 class="hero__title">{{ content.heroTitle }}</h1>
3 |   {% if content.heroSubtitle %}
4 |     <h2 class="hero__subtitle">{{ content.heroSubtitle }}</h2>
5 |   {% endif %}
6 | </section>
7 | 


--------------------------------------------------------------------------------
/samples/koa/views/partials/_mainNavigation.njk:
--------------------------------------------------------------------------------
1 | <nav class="page-header__nav-container" aria-label="Primary">
2 |   <ul class="nav">
3 |     {% for item in mainNavigation %}
4 |       <li class="nav__item"><a class="nav__item-link {% if item.isCurrent %}nav__item-link--current{% endif %}" href="{{ item.url }}">{{ item.title }}</a></li>
5 |     {% endfor %}
6 |   </ul>
7 | </nav>
8 | 


--------------------------------------------------------------------------------
/samples/koa/views/partials/_uniqueSellingPoints.njk:
--------------------------------------------------------------------------------
 1 | {% if cotent.uniqueSellingPointsTitle or content.uniqueSellingPoints %}
 2 | <article class="usp-container">
 3 |   {% if content.uniqueSellingPointsTitle %}
 4 |     <h1 class="usp-container__title">{{ content.uniqueSellingPointsTitle }}</h1>
 5 |   {% endif %}
 6 |   {% if content.uniqueSellingPoints %}
 7 |     <div class="usp-item-container">
 8 |     {% for usp in content.uniqueSellingPoints %}
 9 |       <section class="usp">
10 |         <h2 class="usp__title">{{ usp.title }}</h2>
11 |         {% if usp.image %}
12 |           <img class="usp__image" src="{{ usp.image._url }}" alt="">
13 |         {% endif %}
14 |         <p class="usp__text">{{ usp.text }}</p>
15 |         {% if usp.link %}
16 |           <a href="{{ usp.link.url }}" target="{{ usp.link.target }}" rel="noopener" class="usp__link">{{ usp.link.name }}</a>
17 |         {% endif %}
18 |     </section>
19 |     {% endfor %}
20 |   </div>
21 | {% endif %}
22 | </article>
23 | {% endif %}
24 | 


--------------------------------------------------------------------------------
/samples/koa/views/partials/elements/_textAndImage.njk:
--------------------------------------------------------------------------------
 1 | <article class="text-and-image{% if element.showLargeImage %} text-and-image--image-left{% endif %}">
 2 |   <h1 class="text-and-image__title">{{ element.title }}</h1>
 3 |   <div class="text-and-image__text">{{ element.text | safe }}</div>
 4 |   {% if element.showLargeImage and element.image %}
 5 |     <img class="text-and-image__image" srcset="
 6 |             {{ element.image._url }}?width=320&height=240&mode=crop 320w,
 7 |             {{ element.image._url }}?width=480&height=360&mode=crop 480w,
 8 |             {{ element.image._url }}?width=1024px&height=768&mode=crop 1024w"
 9 |          sizes="(max-width: 320px) 320px,
10 |                 (max-width: 480px) 480px
11 |                 (max-width: 1024px) 1024px"
12 |          src="{{ element.image._url }}?width750&height=515&mode=crop"
13 |          loading="lazy"
14 |          alt="">
15 |   {% elif element.image %}
16 |     <img class="text-and-image__image" srcset="
17 |             {{ element.image._url }}?width=320&height=240&mode=crop 320w,
18 |             {{ element.image._url }}?width=480&height=360&mode=crop 480w,
19 |             {{ element.image._url }}?width=1024px&height=768&mode=crop 1024w"
20 |          sizes="(max-width: 320px) 320px,
21 |                 (max-width: 480px) 480px
22 |                 (max-width: 1024px) 1024px"
23 |          src="{{ element.image._url }}?width=320&height=240&mode=crop"
24 |          loading="lazy"
25 |          alt="">
26 |   {% endif %}
27 | </article>
28 | 
29 | 


--------------------------------------------------------------------------------
/samples/koa/views/textpage.njk:
--------------------------------------------------------------------------------
1 | {% extends "_layout.njk" %}
2 | 
3 | {% block content %}
4 |   {% include 'partials/_hero.njk' %}
5 |   {% include 'partials/_elements.njk' %}
6 | {% endblock %}
7 | 


--------------------------------------------------------------------------------
/samples/vue/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | 


--------------------------------------------------------------------------------
/samples/vue/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | trim_trailing_whitespace = true
5 | insert_final_newline = true
6 | 


--------------------------------------------------------------------------------
/samples/vue/.env:
--------------------------------------------------------------------------------
1 | VUE_APP_UMBRACO__PROJECTALIAS=
2 | 


--------------------------------------------------------------------------------
/samples/vue/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   extends: [
 7 |     'plugin:vue/essential',
 8 |     '@vue/standard',
 9 |     '@vue/typescript'
10 |   ],
11 |   rules: {
12 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
13 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
14 |     'eol-last': ['error', 'always'],
15 |     'no-unused-vars': 0
16 |   },
17 |   parserOptions: {
18 |     parser: '@typescript-eslint/parser'
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/samples/vue/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/samples/vue/README.md:
--------------------------------------------------------------------------------
 1 | # Umbraco Heartcore Node.js Vue sample
 2 | 
 3 | Node.js Vue sample site for Umbraco Heartcore
 4 | 
 5 | ## Features
 6 | 
 7 | - [Node.js](https://nodejs.org/en/)
 8 | - [Typescript](https://www.typescriptlang.org/)
 9 | - [Vue CLI](https://cli.vuejs.org/)
10 | 
11 | ## Prerequisites
12 | 
13 | To run this sample you will need the following tools installed
14 | 
15 | - [Node.js](https://nodejs.org/en/) 10 or newer
16 | 
17 | ## Getting Started
18 | 
19 | Before running the application, you need to copy `.env` to `.env.local` and update it with your Umbraco Heartcore
20 |  project alias (the project alias can be found in the [Umbraco Cloud Portal](https://www.s1.umbraco.io)).
21 | 
22 | ```env
23 | VUE_APP_UMBRACO__PROJECTALIAS=
24 | ```
25 | 
26 | In order to use the sample you will need an Umbraco Hearctore project with content, media and document types that correspond to those setup in the views and templates of the sample website. You can use `demo-headless` as the project alias to get started with the sample. The Project behind this alias has been used as the source of the sample, so its a good place to start.
27 | 
28 | ### Installation
29 | 
30 | To install dependencies, run the following command
31 | 
32 | ```bash
33 | > npm install
34 | ```
35 | 
36 | ### Usage
37 | 
38 | Run the following command to start the site
39 | 
40 | ```bash
41 | > npm run serve
42 | ```
43 | 
44 | This will start a dev webserver listening on `http://localhost:8081`
45 | 


--------------------------------------------------------------------------------
/samples/vue/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ['@vue/cli-plugin-babel/preset']
3 | }
4 | 


--------------------------------------------------------------------------------
/samples/vue/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "@umbraco/headless-client": "../../dist",
12 |     "core-js": "^3.6.5",
13 |     "vue": "^2.6.10",
14 |     "vue-fragment": "^1.5.1",
15 |     "vue-router": "^3.3.2"
16 |   },
17 |   "devDependencies": {
18 |     "@typescript-eslint/eslint-plugin": "^2.34.0",
19 |     "@typescript-eslint/parser": "^2.34.0",
20 |     "@vue/cli-plugin-babel": "^4.2.3",
21 |     "@vue/cli-plugin-eslint": "^4.2.3",
22 |     "@vue/cli-plugin-router": "^4.2.3",
23 |     "@vue/cli-plugin-typescript": "^4.4.1",
24 |     "@vue/cli-service": "^4.4.1",
25 |     "@vue/eslint-config-standard": "^5.1.2",
26 |     "@vue/eslint-config-typescript": "^5.0.2",
27 |     "eslint": "^6.8.0",
28 |     "eslint-plugin-import": "^2.21.1",
29 |     "eslint-plugin-node": "^11.1.0",
30 |     "eslint-plugin-promise": "^4.2.1",
31 |     "eslint-plugin-standard": "^4.0.1",
32 |     "eslint-plugin-vue": "^6.2.2",
33 |     "typescript": "~3.7.5",
34 |     "vue-template-compiler": "^2.6.10"
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/samples/vue/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/umbraco/Umbraco.Headless.Client.NodeJs/8b5cf81884509dcd018e9260181a0abe21136946/samples/vue/public/favicon.ico


--------------------------------------------------------------------------------
/samples/vue/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width,initial-scale=0.0">
 6 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 7 |     <title></title>
 8 |   </head>
 9 |   <body>
10 |     <noscript>
11 |       <strong>We're sorry but vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
12 |     </noscript>
13 |     <div id="app"></div>
14 |     <!-- built files will be auto injected -->
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/samples/vue/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <fragment>
  3 |     <PageHeader v-if="mainNavigationItems" :mainNavigationItems="mainNavigationItems" />
  4 |     <main class="main-content">
  5 |       <router-view />
  6 |     </main>
  7 |     <PageFooter v-if="rootContent" :title="rootContent.footerTitle" :links="rootContent.footerLinks" />
  8 |   </fragment>
  9 | </template>
 10 | 
 11 | <script lang="ts">
 12 | import Vue from 'vue'
 13 | import { Content, PagedResponse } from '@umbraco/headless-client'
 14 | 
 15 | import PageHeader from '@/components/PageHeader.vue'
 16 | import PageFooter from '@/components/PageFooter.vue'
 17 | import client from '@/client'
 18 | import { HideInNavigation } from '@/types'
 19 | 
 20 | export default Vue.extend({
 21 |   components: {
 22 |     PageHeader,
 23 |     PageFooter
 24 |   },
 25 | 
 26 |   async created () {
 27 |     this.rootContent = await client.delivery.content.byUrl('/')
 28 |     if (this.rootContent) {
 29 |       this.rootChildren = await client.delivery.content.children(this.rootContent._id)
 30 |     }
 31 |   },
 32 | 
 33 |   data () {
 34 |     return {
 35 |       rootContent: undefined as Content | undefined,
 36 |       rootChildren: undefined as PagedResponse<Content> | undefined
 37 |     }
 38 |   },
 39 | 
 40 |   computed: {
 41 |     mainNavigationItems () {
 42 |       if (!this.rootChildren) {
 43 |         return []
 44 |       }
 45 |       // @ts-ignore
 46 |       return this.rootChildren.items.filter((c: HideInNavigation) => !c.umbNaviHide)
 47 |     }
 48 |   }
 49 | })
 50 | </script>
 51 | 
 52 | <style>
 53 | :root {
 54 |   --content-width: 1360px;
 55 |   --grey: #f9f7f4;
 56 |   --main-grid:
 57 |     [full-start] 1fr [content-start] minmax(320px, var(--content-width))
 58 |     [content-end] 1fr [full-end];
 59 | }
 60 | 
 61 | *,
 62 | ::after,
 63 | ::before {
 64 |   box-sizing: border-box;
 65 | }
 66 | 
 67 | html {
 68 |   font-family: Lato, Arial, Helvetica, sans-serif;
 69 |   font-size: 18px;
 70 | }
 71 | 
 72 | body {
 73 |   padding: 0;
 74 |   margin: 0;
 75 | }
 76 | 
 77 | img {
 78 |   max-width: 100%;
 79 |   height: auto;
 80 | }
 81 | 
 82 | h1,
 83 | h2,
 84 | h3,
 85 | h4,
 86 | h5 {
 87 |   font-weight: 700;
 88 |   line-height: 1.3;
 89 |   margin: 0 0 20px;
 90 | }
 91 | 
 92 | ul {
 93 |   margin: 0;
 94 | }
 95 | 
 96 | a {
 97 |   color: #3544b1;
 98 |   text-decoration: none;
 99 | }
100 | 
101 | a:hover {
102 |   text-decoration: underline;
103 | }
104 | 
105 | .main-content {
106 |   display: grid;
107 |   grid-template-columns: var(--main-grid)
108 | }
109 | </style>
110 | 


--------------------------------------------------------------------------------
/samples/vue/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 | <svg class="page-header__brand-graphics" xmlns="https://www.w3.org/2000/svg" viewbox="0 0 101 17"><path class="bbst0" d="M89.4 10.2c0-4 1.1-6.8 5.8-6.8s5.8 2.8 5.8 6.8-1.1 6.8-5.8 6.8c-4.6 0-5.8-2.8-5.8-6.8zm8.7 0c0-2.8-.4-4.4-2.8-4.4s-2.8 1.6-2.8 4.4.4 4.4 2.8 4.4 2.8-1.7 2.8-4.4zm-89 6.3c.1.1.2.2.3.2h1.1c.2 0 .4-.2.4-.4V4c0-.2-.2-.4-.4-.4H8.4c-.2 0-.4.2-.4.4v9.7c-.9.5-2 .8-3 .8-1.4 0-2.1-.6-2.1-1.9V4c0-.2-.2-.4-.4-.4H.4c-.2 0-.4.2-.4.4v8.8C0 15.3 1.2 17 4.5 17c1.5 0 3-.5 4.2-1.4l.4.9zm24.4-9c0-2.5-1.2-4.2-4.3-4.2-1.5 0-2.9.5-4.2 1.3-.5-.8-1.6-1.3-3.3-1.3-1.4 0-2.8.5-3.9 1.4l-.4-.9c-.1-.1-.2-.2-.3-.2H16c-.2 0-.4.2-.4.4v12.3c0 .2.2.4.4.4h2.2c.2 0 .4-.2.4-.4V6.6c.8-.5 1.8-.8 2.7-.8 1.2 0 1.9.4 1.9 1.7v8.8c0 .2.2.4.4.4h2.2c.2 0 .4-.2.4-.4V6.6c.8-.5 1.8-.8 2.7-.8 1.1 0 1.9.4 1.9 1.7v8.8c0 .2.2.4.4.4h2.2c.2 0 .4-.2.4-.4l-.3-8.8zm6.7 8.1c1.2.9 2.7 1.4 4.2 1.4 3.8 0 5.2-2.6 5.2-6.8s-1.4-6.8-5.2-6.8c-1.2 0-2.5.4-3.5 1v-4c0-.2-.2-.4-.4-.4h-2.2c-.2 0-.3.2-.3.4v15.9c0 .2.2.4.4.4h1.1c.1 0 .3-.1.3-.2l.4-.9zm3.5-1.1c-1 0-2-.3-2.8-.8V6.6c.9-.5 1.8-.8 2.8-.8 2.6 0 2.9 2 2.9 4.4s-.3 4.3-2.9 4.3zm16.7-8.6c-.3 0-.7-.1-1-.1-1.2 0-2.3.2-3.3.8v9.7c0 .2-.2.4-.4.4h-2.2c-.2 0-.4-.2-.4-.4V4c0-.2.2-.4.4-.4h1.1c.1 0 .3.1.3.2l.4.9c1.2-.9 2.6-1.4 4.1-1.4.3 0 .7 0 1 .1.2 0 .4.3.4.5v1.6c0 .2-.2.4-.4.4m7.5 4.8c-1.3.2-2.1.6-2.1 2 0 1 .4 1.9 2 1.9 1 0 2-.3 2.8-.9v-3.4l-2.7.4zm3.5 4.9c-1.1.9-2.5 1.4-3.9 1.4-3.4 0-4.5-2.1-4.5-4.2 0-2.8 1.8-4 4.8-4.3l2.9-.2v-.6c0-1.3-.6-1.9-2.6-1.9-1.2 0-2.4.2-3.6.6h-.1c-.2 0-.4-.2-.4-.4V4.3c0-.2.1-.3.3-.4 1.3-.4 2.7-.7 4-.7 4.3 0 5.3 1.9 5.3 4.6v8.3c0 .2-.2.4-.4.4h-1.1c-.1 0-.3-.1-.3-.2l-.4-.7zM86.2 14h.1c.2 0 .4.2.4.4v1.7c0 .2-.1.3-.2.4-1.1.4-2.2.6-3.4.5-4.6 0-6-2.8-6-6.8s1.4-6.8 6-6.8c1.1 0 2.3.1 3.3.5.1.1.2.2.2.4V6c0 .2-.2.4-.4.4h-.1c-.9-.3-1.9-.4-2.9-.4-2.5 0-3.3 1.7-3.3 4.3s.7 4.3 3.3 4.3c1.1-.2 2.1-.3 3-.6"></path></svg>
2 | 


--------------------------------------------------------------------------------
/samples/vue/src/client.ts:
--------------------------------------------------------------------------------
 1 | import { Client } from '@umbraco/headless-client'
 2 | 
 3 | const client = new Client({
 4 |   projectAlias: process.env.VUE_APP_UMBRACO__PROJECTALIAS!,
 5 |   apiKey: process.env.VUE_APP_UMBRACO__APIKEY,
 6 |   language: 'en-US'
 7 | })
 8 | 
 9 | export default client
10 | 


--------------------------------------------------------------------------------
/samples/vue/src/components/Elements.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <fragment v-if="elements">
 3 |   <Component v-for="(element, index) in elements" :key="index" :is="element.contentTypeAlias" v-bind="element" />
 4 | </fragment>
 5 | </template>
 6 | 
 7 | <script lang="ts">
 8 | import Vue from 'vue'
 9 | import { Elements } from '@/types'
10 | import TextAndImage from '@/components/elements/TextAndImage.vue'
11 | 
12 | export default Vue.extend({
13 |   components: {
14 |     textAndImage: TextAndImage
15 |   },
16 | 
17 |   props: {
18 |     elements: { type: Array as () => Elements[] }
19 |   }
20 | })
21 | </script>
22 | 


--------------------------------------------------------------------------------
/samples/vue/src/components/Hero.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section class="hero" :style="{ backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8))' + (image ? ', url(' + image._url + '?width=1980&amp;height=430&amp;mode=crop)' : '') }">
 3 |     <h1 class="hero__title">{{ title }}</h1>
 4 |     <h2 class="hero__subtitle" :if="subtitle">{{ subtitle }}</h2>
 5 |   </section>
 6 | </template>
 7 | 
 8 | <script lang="ts">
 9 | import Vue from 'vue'
10 | 
11 | import { Image } from '@/types'
12 | 
13 | export default Vue.extend({
14 |   props: {
15 |     image: { type: Object as () => Image },
16 |     title: { type: String, required: true },
17 |     subtitle: String
18 |   }
19 | })
20 | </script>
21 | 
22 | <style scoped>
23 | .hero {
24 |   grid-column: full-start / full-end;
25 |   padding: 50px 5px 0 5px;
26 |   min-height: 230px;
27 |   background-position-x: 50%;
28 |   background-repeat: no-repeat;
29 |   background-size: cover;
30 |   color: white;
31 |   text-align: center;
32 |   display: grid;
33 |   align-content: center;
34 | }
35 | 
36 | .hero__title {
37 |   font-size: 2em;
38 |   font-weight: 900;
39 | }
40 | 
41 | .hero__subtitle {
42 |   font-size: 1.1em;
43 |   font-weight: 400;
44 | }
45 | 
46 | @media (min-width: 992px) {
47 |   .hero {
48 |     height: 430px;
49 |   }
50 |   .hero__title {
51 |     font-size: 4.2em;
52 |   }
53 | }
54 | </style>
55 | 


--------------------------------------------------------------------------------
/samples/vue/src/components/MainNavigation.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <nav class="nav-container" aria-label="Primary">
 3 |     <ul class="nav">
 4 |       <li class="nav__item" v-for="link in links" :key="link.title">
 5 |         <router-link :to="link.url" v-slot="{ href, navigate, isActive }">
 6 |           <a class="nav__item-link" :class="{ 'nav__item-link--current': isActive }" :href="href" @click="navigate">{{ link.title }}</a>
 7 |         </router-link>
 8 |       </li>
 9 |     </ul>
10 |   </nav>
11 | </template>
12 | 
13 | <script lang="ts">
14 | import Vue from 'vue'
15 | import { Content } from '@umbraco/headless-client'
16 | 
17 | type NavigationLink = {
18 |   id: string
19 |   url: string
20 |   title: string
21 | }
22 | 
23 | export default Vue.extend({
24 |   props: {
25 |     items: { type: Array as () => Content[], required: true }
26 |   },
27 | 
28 |   computed: {
29 |     links (): NavigationLink[] {
30 |       return this.items.map(item => ({
31 |         id: item._id,
32 |         url: item._url,
33 |         title: item.name
34 |       }))
35 |     }
36 |   }
37 | })
38 | </script>
39 | 
40 | <style scoped>
41 | .nav-container {
42 |   position: absolute;
43 |   top: 0;
44 |   right: 0;
45 |   margin: 0;
46 |   padding: 0 20px;
47 | }
48 | 
49 | .nav {
50 |   display: none;
51 |   list-style: none;
52 |   margin: 0;
53 |   padding: 0;
54 | }
55 | 
56 | .nav__item {
57 |   display: inline;
58 |   padding: 5px;
59 | }
60 | 
61 | .nav__item-link {
62 |   color: white;
63 | }
64 | 
65 | .nav__item-link--current {
66 |   text-decoration: underline;
67 | }
68 | 
69 | .nav__item-link--current:hover {
70 |   text-decoration-thickness: 3px;
71 | }
72 | 
73 | @media (min-width: 992px) {
74 |   .nav-container {
75 |     top: 15px;
76 |   }
77 | 
78 |   .nav {
79 |     display: block;
80 |   }
81 | }
82 | </style>
83 | 


--------------------------------------------------------------------------------
/samples/vue/src/components/PageFooter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <footer class="page-footer-container">
 3 |     <div class="page-footer">
 4 |       <h1 class="page-footer__title">{{ title }}</h1>
 5 |       <ul class="page-footer__links">
 6 |         <li v-for="(link, index) in links" :key="index"><a class="page-footer__link" :href="link.url" :target="link.target" rel="noopener">{{ link.name }}</a></li>
 7 |       </ul>
 8 |       <svg class="page-footer__graphics" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 616.79 369.24"><defs></defs><path class="cls-1" d="M360.16,128.15A128.32,128.32,0,1,1,488.48,256.63,128.32,128.32,0,0,1,360.16,128.15Zm125.72,43.94a126.27,126.27,0,0,1-29.66-2.67,22.72,22.72,0,0,1-16.2-13q-4.35-10-4.23-31a196,196,0,0,1,1.37-21.8q1.26-10.57,2.51-17.43l.87-4.54a2.67,2.67,0,0,0,0-.4,2.6,2.6,0,0,0-2.15-2.58L421.84,76.1h-.36a2.61,2.61,0,0,0-2.53,2c-.28,1.06-.45,1.84-.94,4.38-.95,4.87-1.82,9.62-2.79,16.55a213.07,213.07,0,0,0-1.87,22.7,117,117,0,0,0,0,15.89q.58,21.08,7.23,33.65T443.1,189.4q15.87,5.53,44.22,5.41h2.36q28.38.12,44.2-5.41t22.52-18.12q6.65-12.6,7.23-33.65a117,117,0,0,0,0-15.89A213.07,213.07,0,0,0,561.76,99c-1-6.86-1.84-11.59-2.79-16.55-.49-2.54-.66-3.32-.94-4.38a2.6,2.6,0,0,0-2.53-2h-.43l-16.55,2.58a2.61,2.61,0,0,0-2.18,2.58,2.67,2.67,0,0,0,0,.4l.88,4.54q1.24,6.89,2.53,17.43a198.39,198.39,0,0,1,1.35,21.8q.21,20.88-4.24,30.93a22.7,22.7,0,0,1-16.05,13.06,126.1,126.1,0,0,1-29.64,2.67Z"></path><g><path class="cls-2" d="M278.35,287.27s4-4.49,43.76-22.38c16.77-7.55,26.83-18.54,40.35-20.79s58.26-36,44.81-59.8-36.22,2.44-50-.66-26.83,1.55-50.75,16.49c-23.31,14.56-48.54,20.33-59.83,32C235.14,244.06,278.35,287.27,278.35,287.27Z"></path><path class="cls-3" d="M18.67,257.22l242.75-50,33.83,90.84S142.65,375.77,46.11,368.8C-38,362.73,18.67,257.22,18.67,257.22Z"></path></g></svg>
 9 |     </div>
10 |   </footer>
11 | </template>
12 | 
13 | <script lang="ts">
14 | import Vue from 'vue'
15 | import { Link } from '@/types'
16 | 
17 | export default Vue.extend({
18 |   props: {
19 |     title: { type: String, required: true },
20 |     links: { type: Array as () => Link[] }
21 |   }
22 | })
23 | </script>
24 | 
25 | <style scoped>
26 | .cls-1 { fill: #3544b1; }
27 | .cls-2 { fill: #ffedd6; }
28 | .cls-3 { fill: #fba0a2; }
29 | 
30 | .page-footer-container {
31 |   display: grid;
32 |   grid-template-columns: var(--main-grid);
33 |   grid-column: content-start / content-end;
34 |   background: var(--grey);
35 | }
36 | 
37 | .page-footer {
38 |   margin: 50px 20px;
39 |   color: #101f3c;
40 |   grid-column: content-start / content-end;
41 |   display: grid;
42 |   grid-template-rows: auto 1fr;
43 | }
44 | 
45 | .page-footer__title {
46 |   font-size: 1.2em;
47 | }
48 | 
49 | .page-footer__links {
50 |   list-style-type: none;
51 |   margin: 0 0 40px;
52 |   padding: 0;
53 | }
54 | 
55 | .page-footer__link,
56 | .page-footer__link:focus,
57 | .page-footer__link:visited {
58 |   color: #8A8A8A;
59 |   line-height: 2;
60 | }
61 | 
62 | .page-footer__link:hover {
63 |   color: #333;
64 |   text-decoration: none;
65 | }
66 | 
67 | .page-footer__graphics {
68 |   height: 150px;
69 |   widows: 250px;
70 |   transform: translateX(-27%);
71 | }
72 | 
73 | @media (min-width: 992px) {
74 |   .page-footer {
75 |     margin: 70px 20px 100px;
76 |   }
77 | 
78 |   .page-footer__graphics {
79 |     transform: none;
80 |     align-self: center;
81 |     margin: 0 auto;
82 |   }
83 | }
84 | </style>
85 | 


--------------------------------------------------------------------------------
/samples/vue/src/components/PageHeader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <header class="page-header">
 3 |     <router-link class="page-header__brand" to="/" title="Go to home page">
 4 |       <svg class="page-header__brand-graphics" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 101 17"><path class="bbst0" d="M89.4 10.2c0-4 1.1-6.8 5.8-6.8s5.8 2.8 5.8 6.8-1.1 6.8-5.8 6.8c-4.6 0-5.8-2.8-5.8-6.8zm8.7 0c0-2.8-.4-4.4-2.8-4.4s-2.8 1.6-2.8 4.4.4 4.4 2.8 4.4 2.8-1.7 2.8-4.4zm-89 6.3c.1.1.2.2.3.2h1.1c.2 0 .4-.2.4-.4V4c0-.2-.2-.4-.4-.4H8.4c-.2 0-.4.2-.4.4v9.7c-.9.5-2 .8-3 .8-1.4 0-2.1-.6-2.1-1.9V4c0-.2-.2-.4-.4-.4H.4c-.2 0-.4.2-.4.4v8.8C0 15.3 1.2 17 4.5 17c1.5 0 3-.5 4.2-1.4l.4.9zm24.4-9c0-2.5-1.2-4.2-4.3-4.2-1.5 0-2.9.5-4.2 1.3-.5-.8-1.6-1.3-3.3-1.3-1.4 0-2.8.5-3.9 1.4l-.4-.9c-.1-.1-.2-.2-.3-.2H16c-.2 0-.4.2-.4.4v12.3c0 .2.2.4.4.4h2.2c.2 0 .4-.2.4-.4V6.6c.8-.5 1.8-.8 2.7-.8 1.2 0 1.9.4 1.9 1.7v8.8c0 .2.2.4.4.4h2.2c.2 0 .4-.2.4-.4V6.6c.8-.5 1.8-.8 2.7-.8 1.1 0 1.9.4 1.9 1.7v8.8c0 .2.2.4.4.4h2.2c.2 0 .4-.2.4-.4l-.3-8.8zm6.7 8.1c1.2.9 2.7 1.4 4.2 1.4 3.8 0 5.2-2.6 5.2-6.8s-1.4-6.8-5.2-6.8c-1.2 0-2.5.4-3.5 1v-4c0-.2-.2-.4-.4-.4h-2.2c-.2 0-.3.2-.3.4v15.9c0 .2.2.4.4.4h1.1c.1 0 .3-.1.3-.2l.4-.9zm3.5-1.1c-1 0-2-.3-2.8-.8V6.6c.9-.5 1.8-.8 2.8-.8 2.6 0 2.9 2 2.9 4.4s-.3 4.3-2.9 4.3zm16.7-8.6c-.3 0-.7-.1-1-.1-1.2 0-2.3.2-3.3.8v9.7c0 .2-.2.4-.4.4h-2.2c-.2 0-.4-.2-.4-.4V4c0-.2.2-.4.4-.4h1.1c.1 0 .3.1.3.2l.4.9c1.2-.9 2.6-1.4 4.1-1.4.3 0 .7 0 1 .1.2 0 .4.3.4.5v1.6c0 .2-.2.4-.4.4m7.5 4.8c-1.3.2-2.1.6-2.1 2 0 1 .4 1.9 2 1.9 1 0 2-.3 2.8-.9v-3.4l-2.7.4zm3.5 4.9c-1.1.9-2.5 1.4-3.9 1.4-3.4 0-4.5-2.1-4.5-4.2 0-2.8 1.8-4 4.8-4.3l2.9-.2v-.6c0-1.3-.6-1.9-2.6-1.9-1.2 0-2.4.2-3.6.6h-.1c-.2 0-.4-.2-.4-.4V4.3c0-.2.1-.3.3-.4 1.3-.4 2.7-.7 4-.7 4.3 0 5.3 1.9 5.3 4.6v8.3c0 .2-.2.4-.4.4h-1.1c-.1 0-.3-.1-.3-.2l-.4-.7zM86.2 14h.1c.2 0 .4.2.4.4v1.7c0 .2-.1.3-.2.4-1.1.4-2.2.6-3.4.5-4.6 0-6-2.8-6-6.8s1.4-6.8 6-6.8c1.1 0 2.3.1 3.3.5.1.1.2.2.2.4V6c0 .2-.2.4-.4.4h-.1c-.9-.3-1.9-.4-2.9-.4-2.5 0-3.3 1.7-3.3 4.3s.7 4.3 3.3 4.3c1.1-.2 2.1-.3 3-.6"></path></svg>
 5 |     </router-link>
 6 |     <MainNavigation :items="mainNavigationItems" />
 7 |   </header>
 8 | </template>
 9 | 
10 | <script lang="ts">
11 | import Vue from 'vue'
12 | import { Content } from '@umbraco/headless-client'
13 | 
14 | import MainNavigation from './MainNavigation.vue'
15 | 
16 | export default Vue.extend({
17 |   name: 'PageHeader',
18 |   components: {
19 |     MainNavigation
20 |   },
21 |   props: {
22 |     mainNavigationItems: { type: Array as () => Content[], required: true }
23 |   }
24 | })
25 | </script>
26 | 
27 | <style scoped>
28 | .page-header {
29 |   background: white;
30 |   position: absolute;
31 |   max-width: var(--content-width);
32 |   width: 100%;
33 |   top: 0;
34 |   left: 0;
35 |   right: 0;
36 |   margin: 0 auto;
37 | }
38 | 
39 | .page-header__brand {
40 |   display: inline-flex;
41 |   padding: 5px 20px;
42 |   color: #162335;
43 | }
44 | 
45 | .page-header__brand:hover {
46 |   text-decoration: none;
47 | }
48 | 
49 | .page-header__brand-graphics {
50 |   height: 40px;
51 |   width: 115px;
52 |   fill: #162335;
53 | }
54 | 
55 | @media (min-width: 992px) {
56 |   .page-header {
57 |     background: transparent;
58 |     top: 20px;
59 |   }
60 |   .page-header__brand {
61 |     color: white;
62 |   }
63 |   .page-header__brand-graphics {
64 |     fill: white;
65 |   }
66 | }
67 | </style>
68 | 


--------------------------------------------------------------------------------
/samples/vue/src/components/UniqueSellingPoints.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <article class="usp-container">
 3 |     <h1 v-if="title" class="usp-container__title">{{ title }}</h1>
 4 |     <div class="usp-item-container">
 5 |       <section class="usp" v-for="usp in uniqueSellingPoints" :key="usp.key">
 6 |         <h2 v-if="usp.title" class="usp__title">{{ usp.title }}</h2>
 7 |         <img v-if="usp.image" class="usp__image" :src="usp.image._url" alt="" />
 8 |         <div v-else class="usp__image"></div>
 9 |         <p class="usp__text">{{ usp.text }}</p>
10 |         <a
11 |           v-if="usp.link"
12 |           :href="usp.link.url"
13 |           :target="usp.link.target"
14 |           rel="noopener"
15 |           class="usp__link"
16 |           >{{ usp.link.name }}</a
17 |         >
18 |       </section>
19 |     </div>
20 |   </article>
21 | </template>
22 | 
23 | <script lang="ts">
24 | import Vue from 'vue'
25 | import { Link, UniqueSellingPoint } from '@/types'
26 | 
27 | export default Vue.extend({
28 |   props: {
29 |     title: { type: String },
30 |     uniqueSellingPoints: { type: Array as () => UniqueSellingPoint[] }
31 |   }
32 | })
33 | </script>
34 | 
35 | <style scoped>
36 | .usp-container {
37 |   display: grid;
38 |   grid-template-columns: var(--main-grid);
39 | }
40 | 
41 | .usp-container {
42 |   background: var(--grey);
43 |   padding-top: 50px;
44 |   grid-column: full-start / full-end;
45 | }
46 | 
47 | .usp-container__title {
48 |   grid-column: content-start / content-end;
49 |   font-size: 2.4em;
50 |   text-align: center;
51 | }
52 | 
53 | .usp-item-container {
54 |   grid-column: content-start / content-end;
55 |   display: grid;
56 | }
57 | 
58 | .usp {
59 |   display: grid;
60 |   text-align: center;
61 |   margin-bottom: 25px;
62 |   padding: 0 20px;
63 |   grid-template-rows: 120px auto auto auto;
64 | }
65 | 
66 | .usp__image {
67 |   grid-row: 1 / 1;
68 |   margin: 0 auto 20px auto;
69 | }
70 | 
71 | .usp__title {
72 |   font-size: 1.5em;
73 |   margin: 0 0 20px;
74 | }
75 | 
76 | .usp__text {
77 |   margin: 0 0 10px;
78 | }
79 | 
80 | .usp__link {
81 |   padding: 10px 20px;
82 | }
83 | 
84 | @media (min-width: 992px) {
85 |   .usp-item-container {
86 |     grid-template-columns: 1fr 1fr 1fr;
87 |   }
88 | }
89 | </style>
90 | 


--------------------------------------------------------------------------------
/samples/vue/src/components/elements/TextAndImage.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <article class="text-and-image" :class="{ 'text-and-image--image-left': showLargeImage }">
  3 |   <h1 class="text-and-image__title">{{ title }}</h1>
  4 |   <div class="text-and-image__text" v-html="text" />
  5 |   <img v-if="showLargeImage && image" class="text-and-image__image"
  6 |         :srcset="image._url + '?width=320&height=240&mode=crop 320w,' +
  7 |                   image._url + '?width=480&height=360&mode=crop 480w,' +
  8 |                   image._url + '?width=1024px&height=768&mode=crop 1024w'"
  9 |         sizes="(max-width: 320px) 320px,
 10 |                 (max-width: 480px) 480px
 11 |                 (max-width: 1024px) 1024px"
 12 |         :src="image._url + '?width=750&height=515&mode=crop'"
 13 |         loading="lazy"
 14 |         alt="">
 15 |   <img v-else-if="image" class="text-and-image__image"
 16 |         :srcset="image._url + '?width=320&height=240&mode=crop 320w,' +
 17 |                   image._url + '?width=480&height=360&mode=crop 480w,' +
 18 |                   image._url + '?width=1024px&height=768&mode=crop 1024w'"
 19 |         sizes="(max-width: 320px) 320px,
 20 |                 (max-width: 480px) 480px
 21 |                 (max-width: 1024px) 1024px"
 22 |         :src="image._url + '?width=320&height=240&mode=crop'"
 23 |         loading="lazy"
 24 |         alt="">
 25 | </article>
 26 | </template>
 27 | 
 28 | <script lang="ts">
 29 | import Vue from 'vue'
 30 | 
 31 | import { Image } from '@/types'
 32 | 
 33 | export default Vue.extend({
 34 |   props: {
 35 |     title: { type: String, required: true },
 36 |     text: { type: String, required: true },
 37 |     image: { type: Object as () => Image },
 38 |     showLargeImage: { type: Boolean, required: true }
 39 |   }
 40 | })
 41 | </script>
 42 | 
 43 | <style scoped>
 44 | .text-and-image {
 45 |   margin: 20px 20px 0 20px;
 46 |   grid-column: content-start / content-end;
 47 |   display: grid;
 48 |   grid-template-rows: auto 1fr auto;
 49 | }
 50 | 
 51 | .text-and-image__title,
 52 | .text-and-image__text {
 53 |   grid-column: 1 / 1;
 54 | }
 55 | 
 56 | .text-and-image__title {
 57 |   font-size: 1.5em;
 58 | }
 59 | 
 60 | .text-and-image__image {
 61 |   margin-bottom: 20px;
 62 |   grid-row: 2 / 2;
 63 | }
 64 | 
 65 | .text-and-image--image-left .text-and-image__title,
 66 | .text-and-image--image-left .text-and-image__text {
 67 |   grid-column: 2 / -1;
 68 | }
 69 | 
 70 | .text-and-image--image-left .text-and-image__image {
 71 |   grid-column: 1;
 72 | }
 73 | 
 74 | @media (min-width: 992px) {
 75 |   .text-and-image {
 76 |     margin: 40px;
 77 |     grid-template-columns: 2fr 1fr;
 78 |   }
 79 | 
 80 |   .text-and-image__title {
 81 |     font-size: 2.8em;
 82 |   }
 83 | 
 84 |   .text-and-image__title,
 85 |   .text-and-image__text {
 86 |     padding: 0 30px 0 0;
 87 |   }
 88 | 
 89 |   .text-and-image__image {
 90 |     margin: 0 auto;
 91 |     align-self: center;
 92 |     grid-column: 2 / -1;
 93 |     grid-row: 1 / -1;
 94 |   }
 95 | 
 96 |   .text-and-image--image-left .text-and-image__title,
 97 |   .text-and-image--image-left .text-and-image__text {
 98 |     padding: 0 0 0 30px;
 99 |   }
100 | }
101 | </style>
102 | 


--------------------------------------------------------------------------------
/samples/vue/src/main.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Fragment from 'vue-fragment'
 3 | 
 4 | import App from './App.vue'
 5 | import router from './router'
 6 | 
 7 | Vue.config.productionTip = false
 8 | Vue.use(Fragment.Plugin)
 9 | 
10 | new Vue({
11 |   router,
12 |   render: h => h(App)
13 | }).$mount('#app')
14 | 


--------------------------------------------------------------------------------
/samples/vue/src/router/index.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueRouter from 'vue-router'
 3 | 
 4 | import UmbracoPage from '@/views/UmbracoPage.vue'
 5 | 
 6 | Vue.use(VueRouter)
 7 | 
 8 | const routes = [
 9 |   {
10 |     path: '*',
11 |     name: 'UmbracoPage',
12 |     component: UmbracoPage
13 |   }
14 | ]
15 | 
16 | const router = new VueRouter({
17 |   mode: 'history',
18 |   base: process.env.BASE_URL,
19 |   routes
20 | })
21 | 
22 | export default router
23 | 


--------------------------------------------------------------------------------
/samples/vue/src/shims-tsx.d.ts:
--------------------------------------------------------------------------------
 1 | import Vue, { VNode } from 'vue'
 2 | 
 3 | declare global {
 4 |   namespace JSX {
 5 |     // tslint:disable no-empty-interface
 6 |     interface Element extends VNode {}
 7 |     // tslint:disable no-empty-interface
 8 |     interface ElementClass extends Vue {}
 9 |     interface IntrinsicElements {
10 |       [elem: string]: any;
11 |     }
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/samples/vue/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 |   import Vue from 'vue'
3 |   export default Vue
4 | }
5 | 
6 | declare module 'vue-fragment';
7 | 


--------------------------------------------------------------------------------
/samples/vue/src/types.ts:
--------------------------------------------------------------------------------
 1 | import { Content } from '@umbraco/headless-client'
 2 | 
 3 | export type Link = {
 4 |   url: string
 5 |   target?: string
 6 |   name: string
 7 | }
 8 | 
 9 | export type Image = {
10 |   _url: string
11 | }
12 | 
13 | export type Hero = {
14 |   image?: Image,
15 |   title: string,
16 |   subtitle?: string
17 | }
18 | 
19 | export type UniqueSellingPoint = {
20 |   image?: Image
21 |   link?: Link
22 |   text: string
23 |   title?: string
24 | }
25 | 
26 | export type HideInNavigation = {
27 |   umbNaviHide: boolean
28 | }
29 | 
30 | export type Element = {
31 |   contentTypeAlias: string
32 | }
33 | 
34 | export type TextAndImage = Element & {
35 |   title: string
36 |   text: string
37 |   image?: Image
38 |   showLargeImage: boolean
39 | }
40 | 
41 | export type Elements = TextAndImage
42 | 
43 | export type Frontpage = Content & HideInNavigation & Hero & UniqueSellingPoint & Elements[]
44 | export type Textpage = Content & HideInNavigation & Hero & Elements[]
45 | 


--------------------------------------------------------------------------------
/samples/vue/src/views/Frontpage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <fragment>
 3 |     <Hero :title="content.heroTitle" :subtitle="content.heroSubtitle" :image="content.heroImage" />
 4 |     <UniqueSellingPoints :title="content.uniqueSellingPointsTitle" :uniqueSellingPoints="content.uniqueSellingPoints" />
 5 |     <Elements :elements="content.elements" />
 6 |   </fragment>
 7 | </template>
 8 | 
 9 | <script lang="ts">
10 | import { Frontpage } from '@/types'
11 | import Elements from '@/components/Elements.vue'
12 | import Hero from '@/components/Hero.vue'
13 | import UniqueSellingPoints from '@/components/UniqueSellingPoints.vue'
14 | 
15 | export default {
16 |   name: 'Frontpage',
17 |   components: {
18 |     Elements,
19 |     Hero,
20 |     UniqueSellingPoints
21 |   },
22 |   props: {
23 |     content: { type: Object as () => Frontpage, required: true }
24 |   }
25 | }
26 | </script>
27 | 


--------------------------------------------------------------------------------
/samples/vue/src/views/NotFound.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <Hero title="Page not found" />
 3 | </template>
 4 | 
 5 | <script lang="ts">
 6 | import Vue from 'vue'
 7 | 
 8 | import Hero from '@/components/Hero.vue'
 9 | 
10 | export default Vue.extend({
11 |   components: {
12 |     Hero
13 |   }
14 | })
15 | </script>
16 | 


--------------------------------------------------------------------------------
/samples/vue/src/views/Textpage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <fragment>
 3 |     <Hero :title="content.heroTitle" :subtitle="content.heroSubtitle" :image="content.heroImage" />
 4 |     <Elements :elements="content.elements" />
 5 |   </fragment>
 6 | </template>
 7 | 
 8 | <script lang="ts">
 9 | import { Textpage } from '@/types'
10 | import Elements from '@/components/Elements.vue'
11 | import Hero from '@/components/Hero.vue'
12 | 
13 | export default {
14 |   name: 'Textpage',
15 |   components: {
16 |     Elements,
17 |     Hero
18 |   },
19 |   props: {
20 |     content: { type: Object as () => Textpage, required: true }
21 |   }
22 | }
23 | </script>
24 | 


--------------------------------------------------------------------------------
/samples/vue/src/views/UmbracoPage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Compontent :is="component" :content="content" />
 3 | </template>
 4 | 
 5 | <script>
 6 | import Vue from 'vue'
 7 | 
 8 | import Frontpage from '@/views/Frontpage.vue'
 9 | import Textpage from '@/views/Textpage.vue'
10 | import NotFound from '@/views/NotFound.vue'
11 | import client from '@/client'
12 | 
13 | export default Vue.extend({
14 |   components: {
15 |     frontpage: Frontpage,
16 |     textpage: Textpage,
17 |     NotFound: NotFound
18 |   },
19 | 
20 |   async beforeRouteEnter (to, from, next) {
21 |     let content
22 |     try {
23 |       content = await client.delivery.content.byUrl(to.path)
24 |     } catch (e) {
25 |       content = { contentTypeAlias: 'notFound', name: 'Not Found' }
26 |     }
27 | 
28 |     next(vm => {
29 |       vm.content = content
30 |     })
31 |   },
32 | 
33 |   async beforeRouteUpdate (to, from, next) {
34 |     try {
35 |       this.content = await client.delivery.content.byUrl(to.path)
36 |     } catch (e) {
37 |       this.content = { contentTypeAlias: 'notFound', name: 'Not Found' }
38 |     }
39 |     next()
40 |   },
41 | 
42 |   watch: {
43 |     content () {
44 |       document.title = this.content.name
45 |     }
46 |   },
47 | 
48 |   data () {
49 |     return {
50 |       content: {}
51 |     }
52 |   },
53 | 
54 |   computed: {
55 |     component () {
56 |       return this.content.contentTypeAlias
57 |     }
58 |   }
59 | })
60 | </script>
61 | 


--------------------------------------------------------------------------------
/samples/vue/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "module": "esnext",
 5 |     "strict": true,
 6 |     "jsx": "preserve",
 7 |     "importHelpers": true,
 8 |     "moduleResolution": "node",
 9 |     "experimentalDecorators": true,
10 |     "esModuleInterop": true,
11 |     "allowSyntheticDefaultImports": true,
12 |     "sourceMap": true,
13 |     "baseUrl": ".",
14 |     "types": [
15 |       "webpack-env"
16 |     ],
17 |     "paths": {
18 |       "@/*": [
19 |         "src/*"
20 |       ]
21 |     },
22 |     "lib": [
23 |       "esnext",
24 |       "dom",
25 |       "dom.iterable",
26 |       "scripthost"
27 |     ]
28 |   },
29 |   "include": [
30 |     "src/**/*.ts",
31 |     "src/**/*.tsx",
32 |     "src/**/*.vue",
33 |     "tests/**/*.ts",
34 |     "tests/**/*.tsx"
35 |   ],
36 |   "exclude": [
37 |     "node_modules"
38 |   ]
39 | }
40 | 


--------------------------------------------------------------------------------
/samples/vue/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   css: {
3 |     sourceMap: true
4 |   },
5 |   lintOnSave: false
6 | }
7 | 


--------------------------------------------------------------------------------
/src/APIRequestError.ts:
--------------------------------------------------------------------------------
 1 | import { AxiosResponse } from 'axios'
 2 | 
 3 | /**
 4 |  * @public
 5 |  */
 6 | export class APIRequestError extends Error {
 7 |   data?: any = undefined
 8 | 
 9 |   /**
10 |    * @internal
11 |    */
12 |   constructor (message: string, public response: AxiosResponse) {
13 |     super(message)
14 |     this.name = 'APIRequestError'
15 | 
16 |     if (response && response.data) {
17 |       this.data = response.data
18 |     }
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/src/ApiRequest.ts:
--------------------------------------------------------------------------------
 1 | import { Endpoint, EndpointSource } from './Endpoint'
 2 | import { ClientOptions, ProxyOptions } from './Client'
 3 | import { APIRequestError } from './APIRequestError'
 4 | import axios, { AxiosRequestConfig } from 'axios'
 5 | import FormData from 'form-data'
 6 | 
 7 | /** @internal */
 8 | export class ApiRequest<R = any> {
 9 |   constructor (
10 |     private readonly options: ClientOptions | ProxyOptions,
11 |     public endpoint: Endpoint,
12 |     public data?: any
13 |   ) {}
14 | 
15 |   public promise = async (): Promise<R> => {
16 |     const headers: any = {
17 |       'Content-Type': 'application/json',
18 |       Accept: 'application/json+hal',
19 |       'api-version': '2.2'
20 |     }
21 | 
22 |     if ('projectAlias' in this.options) {
23 |       headers['umb-project-alias'] = this.options.projectAlias
24 |     }
25 | 
26 |     if (this.endpoint.source === EndpointSource.CDN && this.options.language) {
27 |       headers['Accept-Language'] = this.options.language
28 |     }
29 | 
30 |     if ('apiKey' in this.options && this.options.apiKey) {
31 |       headers['api-key'] = this.options.apiKey
32 |     }
33 | 
34 |     const path = this.endpoint.getPath()
35 |     let url = 'https://cdn.umbraco.io'
36 | 
37 |     if (this.endpoint.source === EndpointSource.ContentManagement) {
38 |       url = 'apiProxyUrl' in this.options
39 |         ? this.options.apiProxyUrl
40 |         : 'https://api.umbraco.io'
41 |     } else if ('cdnProxyUrl' in this.options) {
42 |       url = this.options.cdnProxyUrl
43 |     } else if (this.options.preview) {
44 |       url = 'https://preview.umbraco.io'
45 |     }
46 | 
47 |     url = url.endsWith('/') ? `${url}${path.substr(1)}` : `${url}${path}`
48 | 
49 |     const requestInit: AxiosRequestConfig = {
50 |       url: url,
51 |       method: this.endpoint.method,
52 |       headers: {}
53 |     }
54 | 
55 |     const method = this.endpoint.method.toLowerCase()
56 |     if ((method === 'post' || method === 'put') && !!this.data) {
57 |       if (this.data instanceof FormData) {
58 |         headers['Content-Type'] = `multipart/form-data; boundary=${this.data.getBoundary()}`
59 |         requestInit.data = this.data
60 |       } else if (this.data instanceof URLSearchParams) {
61 |         headers['Content-Type'] = 'application/x-www-form-urlencoded'
62 |         requestInit.data = this.data
63 |       } else {
64 |         requestInit.data = JSON.stringify(this.data)
65 |       }
66 |     }
67 |     requestInit.headers = headers
68 | 
69 |     if ('accessTokenResolver' in this.options) {
70 |       // @ts-ignore
71 |       const token = this.options.accessTokenResolver(requestInit)
72 |       if (token) {
73 |         requestInit.headers.Authorization = `Bearer ${token}`
74 |       }
75 |     }
76 | 
77 |     try {
78 |       const response = await axios(requestInit)
79 |       return response.data as R
80 |     } catch (err) {
81 |       throw new APIRequestError(err.message, err.response)
82 |     }
83 |   }
84 | }
85 | 


--------------------------------------------------------------------------------
/src/ApiResponse.ts:
--------------------------------------------------------------------------------
 1 | /** @internal */
 2 | export interface ApiResponse<Response = any, Links = any> {
 3 | 
 4 |   _links: Links
 5 |   _embedded: Response
 6 | 
 7 | }
 8 | 
 9 | /** @internal */
10 | export interface ApiPagedResponse<Response = any> extends ApiResponse<Response> {
11 |   _totalItems: number
12 |   _totalPages: number
13 |   _page: number
14 |   _pageSize: number
15 | 
16 | }
17 | 


--------------------------------------------------------------------------------
/src/Client.ts:
--------------------------------------------------------------------------------
  1 | import { ManagementClient, DeliveryClient, AuthenticationClient } from './Clients'
  2 | import { Endpoint } from './Endpoint'
  3 | import { ApiRequest } from './ApiRequest'
  4 | 
  5 | /**
  6 |  * Client Options
  7 |  * @public
  8 |  */
  9 | export interface ClientOptions {
 10 |   /**
 11 |    * The Project Alias is a HTTP friendly version of the Project Name under your Umbraco Cloud account.
 12 |    */
 13 |   projectAlias: string
 14 |   /**
 15 |    * The default culture sent with all requests to the Content Delivery API, this can be overwritten per function
 16 |    */
 17 |   language?: string
 18 |   /**
 19 |    * An API Key is requierd when interacting with the Management API and when protection is enabled for the Delivery API
 20 |    */
 21 |   apiKey?: string
 22 |   /**
 23 |    * Determines if the {@link DeliveryClient} should call the Preview API or the Content Delivery endpoints.
 24 |    *
 25 |    * @remarks
 26 |    * If true an apiKey must be supplied.
 27 |    */
 28 |   preview?: boolean
 29 |   /**
 30 |    * Used to retrieve access tokens for requests to the APIs.
 31 |    * @param request - The request that's about to be sent.
 32 |    * @returns an oauth token that should be used for this request or undefined if no token should be used.
 33 |    */
 34 |   accessTokenResolver?(request: { data?: any, headers: any, method: 'get'|'GET'|'post'|'POST'|'put'|'PUT'|'delete'|'DELETE', url: string }): string | undefined
 35 | }
 36 | 
 37 | /**
 38 |  * Proxy options
 39 |  * @public
 40 |  */
 41 | export interface ProxyOptions {
 42 |   /**
 43 |    * A custom url for the Content Delivery endpoint.
 44 |    */
 45 |   cdnProxyUrl: string
 46 |   /**
 47 |    * A custom url for the Content Management endpoint.
 48 |    */
 49 |   apiProxyUrl: string
 50 |   /**
 51 |    * The default culture sent with all requests to the Content Delivery API, this can be overwritten per function
 52 |    */
 53 |   language?: string
 54 | }
 55 | 
 56 | /**
 57 |  * Entry class for accessing the Content Delivery and Content Management APIs.
 58 |  * @public
 59 |  *
 60 |  * @example
 61 |  *
 62 |  * To get started you need create a new instance of the `Client` passing {@link ClientOptions}.
 63 |  *
 64 |  * ```typescript
 65 |  * import { Client } from '@umbraco/headless-client'
 66 |  *
 67 |  * const client = new Client({
 68 |  *  projectAlias: '<your-project-alias>',
 69 |  *  apiKey: '<your-api-key>',
 70 |  *  language: '<iso-code>',
 71 |  * })
 72 |  * ```
 73 |  *
 74 |  * You might want to proxy your request through a server to hide the project alias and the api key,
 75 |  * this can be done by creating a new instance of the `Client` class passing in {@link ProxyOptions}.
 76 |  *
 77 |  * ```typescript
 78 |  * import { Client } from '@umbraco/headless-client'
 79 |  *
 80 |  * const client = new Client({
 81 |  *  apiProxyUrl: '<proxy-url>',
 82 |  *  cdnProxyUrl: '<proxy-url>',
 83 |  *  language: '<iso-code>',
 84 |  * })
 85 |  * ```
 86 |  *
 87 |  */
 88 | export class Client {
 89 |   /**
 90 |    * Constructs a new instance of the `Client` class with the given options.
 91 |    * @param options - The options. See {@link ClientOptions} or {@link ProxyOptions}.
 92 |    */
 93 |   constructor (public readonly options: ClientOptions | ProxyOptions) {
 94 | 
 95 |   }
 96 | 
 97 |   /**
 98 |    * Get Delivery client for fetching content and media from CDN.
 99 |    * See {@link DeliveryClient}
100 |    */
101 |   public readonly delivery = new DeliveryClient(this)
102 | 
103 |   /**
104 |    * Get Manager Client for managing content on Umbraco Heartcore.
105 |    * See {@link ManagementClient}
106 |    */
107 |   public readonly management = new ManagementClient(this)
108 | 
109 |   /**
110 |    * Get Authentication Client for authenticating members and Backoffice users.
111 |    * See {@link AuthenticationClient}
112 |    */
113 |   public readonly authentication = new AuthenticationClient(this)
114 | 
115 |   /**
116 |    * Makes request from and [Endpoint]
117 |    * @internal
118 |    */
119 |   public makeRequest = async <R extends any>(endpoint: Endpoint<R>, data?: any): Promise<R> => {
120 |     const response = await new ApiRequest<any>(this.options, endpoint, data).promise()
121 |     const items = this.getEmbeddedData(response)
122 |     const pageData = this.getPagedData(response)
123 | 
124 |     if (pageData && items) {
125 |       return {
126 |         ...pageData,
127 |         items
128 |       }
129 |     } else if (!pageData && items) {
130 |       const { _embedded, _links, ...data } = response
131 |       if (Object.keys(data).length) {
132 |         return { ..._embedded, ...data }
133 |       }
134 |       return items
135 |     }
136 |     return response
137 |   }
138 | 
139 |   /**
140 |    * Sets the API to be used.
141 |    * @param apikey - API Key
142 |    * @deprecated Use `apiKey` in the constructor options instead.
143 |    */
144 |   public setAPIKey = (apikey: string) => {
145 |     if('apiKey' in this.options) {
146 |       this.options.apiKey = apikey
147 |     } else {
148 |       throw Error('Cannot set apiKey on ProxyOptions')
149 |     }
150 |   }
151 | 
152 |   /**
153 |    * @deprecated Use `options.apiKey` instead.
154 |    */
155 |   public getAPIKey = () => {
156 |     if('apiKey' in this.options) {
157 |       return this.options.apiKey
158 |     } else {
159 |       throw Error('Cannot set apiKey on ProxyOptions')
160 |     }
161 |   }
162 | 
163 |   private readonly getEmbeddedData = (response: any) => {
164 |     if (Object.prototype.hasOwnProperty.call(response, '_embedded')) {
165 |       const keys = Object.keys(response._embedded)
166 |       const keyCount = keys.length
167 |       if (keyCount === 1) {
168 |         const key = keys[0]
169 |         return response._embedded[key]
170 |       }
171 |     }
172 | 
173 |     return null
174 |   }
175 | 
176 |   private readonly getPagedData = (response: any) => {
177 |     const lookForProps = ['_totalItems', '_totalPages', '_page', '_pageSize']
178 |     const keys = Object.keys(response)
179 | 
180 |     for (let i = 0; i < lookForProps.length; i++) {
181 |       const needle = lookForProps[i]
182 |       if (!keys.includes(needle)) return null
183 |     }
184 | 
185 |     const object: any = {}
186 |     lookForProps.forEach(key => {
187 |       object[key.replace(/^_/, '')] = response[key]
188 |     })
189 | 
190 |     return object
191 |   }
192 | }
193 | 


--------------------------------------------------------------------------------
/src/Clients/AuthenticationClient.spec.ts:
--------------------------------------------------------------------------------
 1 | import 'mocha'
 2 | import { expect } from 'chai'
 3 | import axios from 'axios'
 4 | import MockAdapter from 'axios-mock-adapter'
 5 | 
 6 | import { Client } from '../Client'
 7 | 
 8 | describe('AuthenticationClient', function () {
 9 |   let client: Client
10 |   let axiosMock: MockAdapter
11 | 
12 |   before(function () {
13 |     client = new Client({ projectAlias: 'my-project' })
14 |     axiosMock = new MockAdapter(axios)
15 |   })
16 | 
17 |   after(function () {
18 |     axiosMock.restore()
19 |   })
20 | 
21 |   afterEach(function () {
22 |     axiosMock.reset()
23 |   })
24 | 
25 |   describe('#authenticateMember()', function () {
26 |     it('calls the oauth endpoint', async function () {
27 |       axiosMock.onPost('https://cdn.umbraco.io/member/oauth/token').reply(200, {})
28 | 
29 |       const result = await client.authentication.authenticateMember('jane@example.com', 'myPassword')
30 | 
31 |       expect(result).to.not.be.undefined
32 |       expect(axiosMock.history.post.length).to.be.eq(1)
33 |       expect(axiosMock.history.post[0].headers['Content-Type']).to.be.eq('application/x-www-form-urlencoded')
34 |       expect(axiosMock.history.post[0].data).to.be.eq('grant_type=password&username=jane%40example.com&password=myPassword')
35 |     })
36 |   })
37 | 
38 |   describe('#authenticateUser()', function () {
39 |     it('calls the oauth endpoint', async function () {
40 |       axiosMock.onPost('https://api.umbraco.io/oauth/token').reply(200, {})
41 | 
42 |       const result = await client.authentication.authenticateUser('john@example.com', 'pass1234')
43 | 
44 |       expect(result).to.not.be.undefined
45 |       expect(axiosMock.history.post.length).to.be.eq(1)
46 |       expect(axiosMock.history.post[0].headers['Content-Type']).to.be.eq('application/x-www-form-urlencoded')
47 |       expect(axiosMock.history.post[0].data).to.be.eq('grant_type=password&username=john%40example.com&password=pass1234')
48 |     })
49 |   })
50 | })
51 | 


--------------------------------------------------------------------------------
/src/Clients/AuthenticationClient.ts:
--------------------------------------------------------------------------------
 1 | import { Client, ClientOptions } from '../Client'
 2 | import { ApiRequest } from '../ApiRequest'
 3 | import { Endpoints } from '../Endpoints'
 4 | import { OAUthResponse } from '../Responses'
 5 | 
 6 | /**
 7 |  * AuthenticationClient is used to authenticate members and Backoffice users.
 8 |  * @public
 9 |  *
10 |  * @example
11 |  * The {@link AuthenticationClient} must be accessed through {@link Client}.
12 |  *
13 |  * ```typescript
14 |  * import { Client } from '@umbraco/headless-client'
15 |  *
16 |  * const client = new Client({
17 |  *  projectAlias: '<your-project-alias>',
18 |  *  apiKey: '<your-api-key>',
19 |  *  language: '<iso-code>',
20 |  * })
21 |  *
22 |  * const authClient = client.authentication
23 |  * ```
24 |  */
25 | export class AuthenticationClient {
26 |   /**
27 |    * @internal
28 |    */
29 |   constructor (
30 |     private readonly client: Client
31 |   ) {
32 | 
33 |   }
34 | 
35 |   /**
36 |    * Authenticate a member using username and password.
37 |    * @param username - The members username.
38 |    * @param password - The members password.
39 |    * @returns a Promise resolving to a {@link OAUthResponse}
40 |    */
41 |   async authenticateMember (username: string, password: string) {
42 |     const data = new URLSearchParams()
43 |     data.append('grant_type', 'password')
44 |     data.append('username', username)
45 |     data.append('password', password)
46 | 
47 |     const options = { projectAlias: '' }
48 |     if ('projectAlias' in this.client.options) {
49 |       options.projectAlias = this.client.options.projectAlias
50 |     }
51 | 
52 |     return new ApiRequest<OAUthResponse>(options, Endpoints.authentication.member(), data).promise()
53 |   }
54 | 
55 |   /**
56 |    * Authenticate a Backoffice user using username and password.
57 |    * @param username - The users username.
58 |    * @param password - The users password.
59 |    * @returns a Promise resolving to a {@link OAUthResponse}
60 |    */
61 |   async authenticateUser (username: string, password: string) {
62 |     const data = new URLSearchParams()
63 |     data.append('grant_type', 'password')
64 |     data.append('username', username)
65 |     data.append('password', password)
66 | 
67 |     const options = { projectAlias: '' }
68 |     if ('projectAlias' in this.client.options) {
69 |       options.projectAlias = this.client.options.projectAlias
70 |     }
71 | 
72 |     return new ApiRequest<OAUthResponse>(options, Endpoints.authentication.user(), data).promise()
73 |   }
74 | }
75 | 


--------------------------------------------------------------------------------
/src/Clients/Delivery/ContentDeliveryClient.ts:
--------------------------------------------------------------------------------
  1 | import { Client } from '../../Client'
  2 | import { Endpoints } from '../../Endpoints'
  3 | import { Endpoint } from '../../Endpoint'
  4 | import {
  5 |   ContentDeliveryAncestorsOptions, ContentDeliveryByContentTypeOptions,
  6 |   ContentDeliveryByIdOptions,
  7 |   ContentDeliveryByUrlOptions, ContentDeliveryChildrenOptions, ContentDeliveryDescendantsOptions,
  8 |   ContentDeliveryRootOptions, ContentDeliverySearchOptions, ContentDeliveryFilterOptions} from '../../RequestOptions'
  9 | import { Content } from '../../Responses'
 10 | import { PagedResponse } from '../../Responses/PagedResponse'
 11 | import { ContentFilter } from '../../RequestOptions/ContentFilterOptions'
 12 | 
 13 | /**
 14 |  * ContentDeliveryClient is used to access the Content part of the Content Delivery API.
 15 |  * @public
 16 |  *
 17 |  * @example
 18 |  * The {@link ContentDeliveryClient} must be accessed through {@link Client}.
 19 |  *
 20 |  * ```typescript
 21 |  * import { Client } from '@umbraco/headless-client'
 22 |  *
 23 |  * const client = new Client({
 24 |  *  projectAlias: '<your-project-alias>',
 25 |  *  apiKey: '<your-api-key>',
 26 |  *  language: '<iso-code>',
 27 |  * })
 28 |  *
 29 |  * const contentClient = client.delivery.content
 30 |  * ```
 31 |  */
 32 | export class ContentDeliveryClient {
 33 |   /** @internal */
 34 |   constructor (private readonly client: Client) {}
 35 | 
 36 |   private readonly makeRequest = async <R>(endpoint: Endpoint<R>, data?: any): Promise<R> => {
 37 |     const result = await this.client.makeRequest<R>(endpoint, data)
 38 |     return result
 39 |   }
 40 | 
 41 |   /**
 42 |    * Fetch all Content at the root.
 43 |    *
 44 |    * @param options - Request options. See {@link ContentDeliveryRootOptions}.
 45 |    * @returns a `Promise` that resolves to an array of {@link Content}.
 46 |    */
 47 |   async root<T extends Content> (options?: ContentDeliveryRootOptions) {
 48 |     return this.makeRequest(Endpoints.delivery.content.root<T>(options))
 49 |   }
 50 | 
 51 |   /**
 52 |    * Fetch a single Content item by its id.
 53 |    * @param id - GUID id of the Content item.
 54 |    * @param options - Request options. See {@link ContentDeliveryByIdOptions}.
 55 |    * @returns a `Promise` that resolves to a {@link Content} if found, otherwise `undefined`.
 56 |    */
 57 |   async byId<T extends Content> (id: string, options?: ContentDeliveryByIdOptions) {
 58 |     try {
 59 |       return await this.makeRequest(Endpoints.delivery.content.byId<T>(id, options))
 60 |     } catch (err) {
 61 |       if (err.response && err.response.status === 404) {
 62 |         return undefined
 63 |       }
 64 |       throw err
 65 |     }
 66 |   }
 67 | 
 68 |   /**
 69 |    * Feth a single Contint item by its Url.
 70 |    * @param url - Url for the content to retrieve.
 71 |    * @param options - Request options. See {@link ContentDeliveryByUrlOptions}.
 72 |    * @returns a `Promise` that resolves to a {@link Content} if found, otherwise `undefined`.
 73 |    */
 74 |   async byUrl< T extends Content> (url: string, options?: ContentDeliveryByUrlOptions) {
 75 |     try {
 76 |       return await this.makeRequest(Endpoints.delivery.content.byUrl<T>(url, options))
 77 |     } catch (err) {
 78 |       if (err.response && err.response.status === 404) {
 79 |         return undefined
 80 |       }
 81 |       throw err
 82 |     }
 83 |   }
 84 | 
 85 |   /**
 86 |    * Fetch children for a Content item.
 87 |    * @param id - GUID id of the Content item.
 88 |    * @param options - Request options. See {@link ContentDeliveryChildrenOptions}.
 89 |    * @returns a `Promise` that resolves to a {@link PagedResponse} of {@link Content} if found, otherwise `undefined`.
 90 |    */
 91 |   async children<T extends Content> (id: string, options?: ContentDeliveryChildrenOptions): Promise<PagedResponse<T> | undefined> {
 92 |     try {
 93 |       return await this.makeRequest(Endpoints.delivery.content.children<T>(id, options))
 94 |     } catch (err) {
 95 |       if (err.response && err.response.status === 404) {
 96 |         return undefined
 97 |       }
 98 |       throw err
 99 |     }
100 |   }
101 | 
102 |   /**
103 |    * Fetch ancestors for a content item.
104 |    * @param id - GUID id of the Content item.
105 |    * @param options - Request options. See {@link ContentDeliveryAncestorsOptions}.
106 |    * @returns a `Promise` that resolves to an array of {@link Content} if found, otherwise `undefined`.
107 |    */
108 |   async ancestors (id: string, options?: ContentDeliveryAncestorsOptions) {
109 |     try {
110 |       return await this.makeRequest(Endpoints.delivery.content.ancestors(id, options))
111 |     } catch (err) {
112 |       if (err.response && err.response.status === 404) {
113 |         return undefined
114 |       }
115 |       throw err
116 |     }
117 |   }
118 | 
119 |   /**
120 |    * Fetch descendants for a content item.
121 |    * @param id - GUID id of the Content item.
122 |    * @param options - Request options. See {@link ContentDeliveryDescendantsOptions}.
123 |    * @returns a `Promise` that resolves to an array of {@link Content} if found, otherwise `undefined`.
124 |    */
125 |   async descendants (id: string, options?: ContentDeliveryDescendantsOptions) {
126 |     try {
127 |       return await this.makeRequest(Endpoints.delivery.content.descendants(id, options))
128 |     } catch (err) {
129 |       if (err.response && err.response.status === 404) {
130 |         return undefined
131 |       }
132 |       throw err
133 |     }
134 |   }
135 | 
136 |   /**
137 |    * Fetch Content of a specific type.
138 |    * @param contentType - Content Type to filter by.
139 |    * @param options - Request options. See {@link ContentDeliveryByContentTypeOptions}
140 |    * @returns a `Promise` that resolves to a {@link PagedResponse} of {@link Content}.
141 |    */
142 |   async byContentType<T extends Content> (contentType: string, options?: ContentDeliveryByContentTypeOptions): Promise<PagedResponse<T>> {
143 |     return this.makeRequest(Endpoints.delivery.content.byContentType<T>(contentType, options))
144 |   }
145 | 
146 |   /**
147 |    * Filter for Content containing specific property values
148 |    * @param contentFilter - Filter object. See {@link ContentFilter}
149 |    * @param options - Request options. See {@link ContentDeliveryFilterOptions}
150 |    * @returns a `Promise` that resolves to a {@link PagedResponse} of {@link Content}.
151 |    */
152 |   async filter<T extends Content> (body: ContentFilter, options?: ContentDeliveryFilterOptions): Promise<PagedResponse<T>> {
153 |     return this.makeRequest(Endpoints.delivery.content.filter<T>(options), body)
154 |   }
155 | 
156 |   /**
157 |    * Search for Content containing term,
158 |    * @param term - Term to search for
159 |    * @param options - Request options. See {@link ContentDeliverySearchOptions}
160 |    * @returns a `Promise` that resolves to a {@link PagedResponse} of {@link Content}.
161 |    */
162 |   async search<T extends Content> (term: string, options?: ContentDeliverySearchOptions): Promise<PagedResponse<T>> {
163 |     return this.makeRequest(Endpoints.delivery.content.search<T>(term, options))
164 |   }
165 | }
166 | 


--------------------------------------------------------------------------------
/src/Clients/Delivery/DeliveryClient.ts:
--------------------------------------------------------------------------------
 1 | import { Client } from '../../Client'
 2 | import { ContentDeliveryClient } from './ContentDeliveryClient'
 3 | import { MediaDeliveryClient } from './MediaDeliveryClient'
 4 | import { RedirectDeliveryClient } from './RedirectDeliveryClient'
 5 | 
 6 | /**
 7 |  * DeliveryClient used to access the Content Delivery API.
 8 |  * @public
 9 |  *
10 |  * @example
11 |  * The {@link DeliveryClient} must be accessed through {@link Client}.
12 |  *
13 |  * ```typescript
14 |  * import { Client } from '@umbraco/headless-client'
15 |  *
16 |  * const client = new Client({
17 |  *  projectAlias: '<your-project-alias>',
18 |  *  apiKey: '<your-api-key>',
19 |  *  language: '<iso-code>',
20 |  * })
21 |  *
22 |  * const deliveryClient = client.delivery
23 |  * ```
24 |  */
25 | export class DeliveryClient {
26 |   /**
27 |    * The Content client for the Content Delivery API.
28 |    * See {@link ContentDeliveryClient}
29 |    */
30 |   public readonly content = new ContentDeliveryClient(this.client);
31 | 
32 |   /**
33 |    * The Media client for the Content Delivery API.
34 |    * See {@link MediaDeliveryClient}
35 |    */
36 |   public readonly media = new MediaDeliveryClient(this.client);
37 | 
38 |   /**
39 |    * The Redirect client for the Content Delivery API.
40 |    * See {@link RedirectDeliveryClient}
41 |    */
42 |   public readonly redirect = new RedirectDeliveryClient(this.client);
43 | 
44 |   /** @internal */
45 |   constructor (private readonly client: Client) {}
46 | }
47 | 


--------------------------------------------------------------------------------
/src/Clients/Delivery/MediaDeliveryClient.ts:
--------------------------------------------------------------------------------
 1 | import { Client } from '../../Client'
 2 | import { Endpoint } from '../../Endpoint'
 3 | import { Endpoints } from '../../Endpoints'
 4 | import { MediaDeliveryChildrenOptions } from '../../RequestOptions/index'
 5 | import { Media } from '../../Responses/Media'
 6 | 
 7 | /**
 8 |  * MediaDeliveryClient is used to access the Media part of the Content Delivery API.
 9 |  * @public
10 |  *
11 |  * @example
12 |  * The {@link MediaDeliveryClient} must be accessed through {@link Client}.
13 |  *
14 |  * ```typescript
15 |  * import { Client } from '@umbraco/headless-client'
16 |  *
17 |  * const client = new Client({
18 |  *  projectAlias: '<your-project-alias>',
19 |  *  apiKey: '<your-api-key>',
20 |  *  language: '<iso-code>',
21 |  * })
22 |  *
23 |  * const mediaClient = client.delivery.media
24 |  * ```
25 |  */
26 | export class MediaDeliveryClient {
27 |   /** @internal */
28 |   constructor (private readonly client: Client) {}
29 | 
30 |   private readonly makeRequest = async <R>(endpoint: Endpoint, data?: any) => {
31 |     const result = await this.client.makeRequest<R>(endpoint, data)
32 |     return result
33 |   }
34 | 
35 |   /**
36 |    * Fetch all Media at the root.
37 |    *
38 |    * @returns a `Promise` that resolves to an array of {@link Media}.
39 |    */
40 |   async root<T extends Media> () {
41 |     return this.makeRequest(Endpoints.delivery.media.root<T>())
42 |   }
43 | 
44 |   /**
45 |    * Fetch a single Media item by its id.
46 |    * @param id - GUID id of the Media item.
47 |    * @returns a `Promise` that resolves to a {@link Media} if found, otherwise `undefined`.
48 |   */
49 |   async byId<T extends Media> (id: string) {
50 |     try {
51 |       return await this.makeRequest(Endpoints.delivery.media.byId<T>(id))
52 |     } catch (err) {
53 |       if (err.response && err.response.status === 404) {
54 |         return undefined
55 |       }
56 |       throw err
57 |     }
58 |   }
59 | 
60 |   /**
61 |    * Fetch children for a Media item.
62 |    * @param id - GUID id of the Media item.
63 |    * @param options - Request options. See {@link MediaDeliveryChildrenOptions}.
64 |    * @returns a `Promise` that resolves to a {@link PagedResponse} of {@link Media} if found, otherwise `undefined`.
65 |    */
66 |   async children<T extends Media> (id: string, options?: MediaDeliveryChildrenOptions) {
67 |     try {
68 |       return await this.makeRequest(Endpoints.delivery.media.children<T>(id, options))
69 |     } catch (err) {
70 |       if (err.response && err.response.status === 404) {
71 |         return undefined
72 |       }
73 |       throw err
74 |     }
75 |   }
76 | }
77 | 


--------------------------------------------------------------------------------
/src/Clients/Delivery/RedirectDeliveryClient.ts:
--------------------------------------------------------------------------------
 1 | import { Client } from '../../Client';
 2 | import { Endpoint } from '../../Endpoint';
 3 | import { Endpoints } from '../../Endpoints';
 4 | import { ContentDeliveryRedirectOptions } from '../../RequestOptions';
 5 | import { Redirect } from '../../Responses/Redirect';
 6 | 
 7 | /**
 8 |  * RedirectDeliveryClient is used to access the Redirect part of the Content Delivery API.
 9 |  * @public
10 |  *
11 |  * @example
12 |  * The {@link RedirectDeliveryClient} must be accessed through {@link Client}.
13 |  *
14 |  * ```typescript
15 |  * import { Client } from '@umbraco/headless-client'
16 |  *
17 |  * const client = new Client({
18 |  *  projectAlias: '<your-project-alias>',
19 |  *  apiKey: '<your-api-key>',
20 |  *  language: '<iso-code>',
21 |  * })
22 |  *
23 |  * const mediaClient = client.delivery.redirect
24 |  * ```
25 |  */
26 | export class RedirectDeliveryClient {
27 |   /** @internal **/
28 |   constructor(private readonly client: Client) { }
29 | 
30 |   private readonly makeRequest = async <R>(endpoint: Endpoint<R>, data?: any): Promise<R> => {
31 |     const result = await this.client.makeRequest<R>(endpoint, data);
32 |     return result;
33 |   };
34 | 
35 |   /**
36 |    * Fetch all redirects
37 |    * @param options - Request options. See {@link ContentDeliveryRedirectOptions}
38 |    * @returns a `Promise` that resolves to a {@link PagedResponse} of {@link Redirect}
39 |    */
40 |   async getAll<T extends Redirect>(options?: ContentDeliveryRedirectOptions) {
41 |     return this.makeRequest(Endpoints.delivery.redirect.getAll<T>(options));
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/src/Clients/Delivery/index.ts:
--------------------------------------------------------------------------------
1 | export * from './ContentDeliveryClient'
2 | export * from './MediaDeliveryClient'
3 | export * from './RedirectDeliveryClient'
4 | export * from './DeliveryClient'
5 | 


--------------------------------------------------------------------------------
/src/Clients/Management/ContentManagementClient.spec.ts:
--------------------------------------------------------------------------------
  1 | import 'mocha'
  2 | import { expect } from 'chai'
  3 | import axios from 'axios'
  4 | import MockAdapter from 'axios-mock-adapter'
  5 | import FormData from 'form-data'
  6 | 
  7 | import { Client } from '../../Client'
  8 | import { ContentManagementContentRequest } from '../../Responses'
  9 | 
 10 | const API_ROOT = 'https://api.umbraco.io/content'
 11 | 
 12 | describe('ContentManagementClient', function () {
 13 |   let client: Client
 14 |   let axiosMock: MockAdapter
 15 | 
 16 |   before(function () {
 17 |     client = new Client({ projectAlias: 'my-project', apiKey: 'my-api-key' })
 18 |     axiosMock = new MockAdapter(axios)
 19 |   })
 20 | 
 21 |   after(function () {
 22 |     axiosMock.restore()
 23 |   })
 24 | 
 25 |   afterEach(function () {
 26 |     axiosMock.reset()
 27 |   })
 28 | 
 29 |   describe('#root()', function () {
 30 |     it('can retrieve content', async function () {
 31 |       axiosMock.onGet(API_ROOT).reply(200, require('./__mocks__/content.root.json'))
 32 | 
 33 |       const result = await client.management.content.root()
 34 |       expect(result.length).to.be.eq(1)
 35 |     })
 36 |   })
 37 | 
 38 |   describe('#byId()', function () {
 39 |     it('can retrieve content', async function () {
 40 |       axiosMock.onGet(`${API_ROOT}/3de82763-c4bb-4bca-8f79-7b211b3ffffa`).reply(200, require('./__mocks__/content.byId.json'))
 41 | 
 42 |       const result = await client.management.content.byId('3de82763-c4bb-4bca-8f79-7b211b3ffffa')
 43 | 
 44 |       expect(result).to.not.be.undefined
 45 |       // @ts-ignore
 46 |       expect(result.name.$invariant).to.be.eq('Unicorn')
 47 |     })
 48 | 
 49 |     it('returns undefined when not found', async function () {
 50 |       const result = await client.management.content.byId('3de82763-c4bb-4bca-8f79-7b211b3ffffa')
 51 | 
 52 |       expect(result).to.be.undefined
 53 |     })
 54 |   })
 55 | 
 56 |   describe('#children()', function () {
 57 |     it('can retrieve content', async function () {
 58 |       axiosMock.onGet(`${API_ROOT}/8007e923-e62a-4ac1-a33f-caf3052582f4/children`).reply(200, require('./__mocks__/content.children.json'))
 59 | 
 60 |       const result = await client.management.content.children('8007e923-e62a-4ac1-a33f-caf3052582f4')
 61 | 
 62 |       expect(result).to.not.be.undefined
 63 |       // @ts-ignore
 64 |       expect(result.items.length).to.be.eq(3)
 65 |     })
 66 | 
 67 |     it('returns undefined when not found', async function () {
 68 |       const result = await client.management.content.byId('3de82763-c4bb-4bca-8f79-7b211b3ffffa/children')
 69 | 
 70 |       expect(result).to.be.undefined
 71 |     })
 72 |   })
 73 | 
 74 |   describe('#create()', function () {
 75 |     it('should accept a json object', async function () {
 76 |       axiosMock.onPost(API_ROOT).reply(201, require('./__mocks__/content.create.json'))
 77 | 
 78 |       const data: ContentManagementContentRequest = {
 79 |         name: {
 80 |           $invariant: 'Another one'
 81 |         },
 82 |         contentTypeAlias: 'blogpost',
 83 |         parentId: '8007e923-e62a-4ac1-a33f-caf3052582f4',
 84 |         sortOrder: 0,
 85 |         seoMetaDescription: {
 86 |           $invariant: ''
 87 |         },
 88 |         keywords: {
 89 |           $invariant: []
 90 |         },
 91 |         umbNaviHide: {
 92 |           $invariant: '0'
 93 |         },
 94 |         pageTitle: {
 95 |           $invariant: 'Another one'
 96 |         },
 97 |         categories: {
 98 |           $invariant: [
 99 |             'cg16',
100 |             'codegarden',
101 |             'umbraco'
102 |           ]
103 |         }
104 |       }
105 | 
106 |       const result = await client.management.content.create(data)
107 | 
108 |       expect(result.name.$invariant).to.be.eq('Another one')
109 |       expect(axiosMock.history.post.length).to.be.eq(1)
110 |       expect(axiosMock.history.post[0].data).to.be.eq(JSON.stringify(data))
111 |     })
112 | 
113 |     it('should accept FormData object', async function () {
114 |       axiosMock.onPost(API_ROOT).reply(201, require('./__mocks__/content.create.json'))
115 | 
116 |       const data = new FormData()
117 | 
118 |       data.append('content', JSON.stringify({
119 |         name: {
120 |           $invariant: 'Another one'
121 |         },
122 |         contentTypeAlias: 'blogpost',
123 |         parentId: '8007e923-e62a-4ac1-a33f-caf3052582f4',
124 |         sortOrder: 0,
125 |         seoMetaDescription: {
126 |           $invariant: ''
127 |         },
128 |         keywords: {
129 |           $invariant: []
130 |         },
131 |         umbNaviHide: {
132 |           $invariant: '0'
133 |         },
134 |         pageTitle: {
135 |           $invariant: 'Another one'
136 |         },
137 |         categories: {
138 |           $invariant: [
139 |             'cg16',
140 |             'codegarden',
141 |             'umbraco'
142 |           ]
143 |         }
144 |       }))
145 | 
146 |       const result = await client.management.content.create(data)
147 | 
148 |       expect(result.name.$invariant).to.be.eq('Another one')
149 |       expect(axiosMock.history.post.length).to.be.eq(1)
150 |       expect(axiosMock.history.post[0].data).to.be.eq(data)
151 |     })
152 |   })
153 | 
154 |   describe('#publish()', function () {
155 |     it('call publish endpoint', async function () {
156 |       axiosMock.onPut(`${API_ROOT}/3de82763-c4bb-4bca-8f79-7b211b3ffffa/publish?culture=en-US`).reply(200, {})
157 | 
158 |       await client.management.content.publish('3de82763-c4bb-4bca-8f79-7b211b3ffffa', { culture: 'en-US' })
159 | 
160 |       expect(axiosMock.history.put.length).to.be.eq(1)
161 |     })
162 | 
163 |     it('returns undefined when not found', async function () {
164 |       const result = await client.management.content.publish('3de82763-c4bb-4bca-8f79-7b211b3ffffa')
165 | 
166 |       expect(result).to.be.undefined
167 |     })
168 |   })
169 | 
170 |   describe('#unPublish()', function () {
171 |     it('calls unpublish endpoint', async function () {
172 |       axiosMock.onPut(`${API_ROOT}/3de82763-c4bb-4bca-8f79-7b211b3ffffa/unpublish?culture=en-US`).reply(200, {})
173 | 
174 |       await client.management.content.unPublish('3de82763-c4bb-4bca-8f79-7b211b3ffffa', { culture: 'en-US' })
175 | 
176 |       expect(axiosMock.history.put.length).to.be.eq(1)
177 |     })
178 | 
179 |     it('returns undefined when not found', async function () {
180 |       const result = await client.management.content.unPublish('3de82763-c4bb-4bca-8f79-7b211b3ffffa')
181 | 
182 |       expect(result).to.be.undefined
183 |     })
184 |   })
185 | 
186 |   describe('#delete()', function () {
187 |     it('calls delete endpoint', async function () {
188 |       axiosMock.onDelete(`${API_ROOT}/3de82763-c4bb-4bca-8f79-7b211b3ffffa`).reply(200, {})
189 | 
190 |       await client.management.content.delete('3de82763-c4bb-4bca-8f79-7b211b3ffffa')
191 | 
192 |       expect(axiosMock.history.delete.length).to.be.eq(1)
193 |     })
194 | 
195 |     it('returns undefined when not found', async function () {
196 |       const result = await client.management.content.delete('3de82763-c4bb-4bca-8f79-7b211b3ffffa')
197 | 
198 |       expect(result).to.be.undefined
199 |     })
200 |   })
201 | 
202 |   describe('#update()', function () {
203 |     it('should accept a json object', async function () {
204 |       axiosMock.onPut(`${API_ROOT}/041067a0-74f5-4d03-92af-40c3c0aa13e7`).reply(201, require('./__mocks__/content.create.json'))
205 | 
206 |       const data: ContentManagementContentRequest = {
207 |         name: {
208 |           $invariant: 'Another one'
209 |         },
210 |         contentTypeAlias: 'blogpost',
211 |         parentId: '8007e923-e62a-4ac1-a33f-caf3052582f4',
212 |         sortOrder: 0,
213 |         seoMetaDescription: {
214 |           $invariant: ''
215 |         },
216 |         keywords: {
217 |           $invariant: []
218 |         },
219 |         umbNaviHide: {
220 |           $invariant: '0'
221 |         },
222 |         pageTitle: {
223 |           $invariant: 'Another one'
224 |         },
225 |         categories: {
226 |           $invariant: [
227 |             'cg16',
228 |             'codegarden',
229 |             'umbraco'
230 |           ]
231 |         }
232 |       }
233 | 
234 |       const result = await client.management.content.update('041067a0-74f5-4d03-92af-40c3c0aa13e7', data)
235 | 
236 |       expect(result).to.not.be.undefined
237 |       // @ts-ignore
238 |       expect(result.name.$invariant).to.be.eq('Another one')
239 |       expect(axiosMock.history.put.length).to.be.eq(1)
240 |       expect(axiosMock.history.put[0].data).to.be.eq(JSON.stringify(data))
241 |     })
242 | 
243 |     it('should accept FormData object', async function () {
244 |       axiosMock.onPut(`${API_ROOT}/041067a0-74f5-4d03-92af-40c3c0aa13e7`).reply(201, require('./__mocks__/content.create.json'))
245 | 
246 |       const data = new FormData()
247 | 
248 |       data.append('content', JSON.stringify({
249 |         name: {
250 |           $invariant: 'Another one'
251 |         },
252 |         contentTypeAlias: 'blogpost',
253 |         parentId: '8007e923-e62a-4ac1-a33f-caf3052582f4',
254 |         sortOrder: 0,
255 |         seoMetaDescription: {
256 |           $invariant: ''
257 |         },
258 |         keywords: {
259 |           $invariant: []
260 |         },
261 |         umbNaviHide: {
262 |           $invariant: '0'
263 |         },
264 |         pageTitle: {
265 |           $invariant: 'Another one'
266 |         },
267 |         categories: {
268 |           $invariant: [
269 |             'cg16',
270 |             'codegarden',
271 |             'umbraco'
272 |           ]
273 |         }
274 |       }))
275 | 
276 |       const result = await client.management.content.update('041067a0-74f5-4d03-92af-40c3c0aa13e7', data)
277 | 
278 |       expect(result).to.not.be.undefined
279 |       // @ts-ignore
280 |       expect(result.name.$invariant).to.be.eq('Another one')
281 |       expect(axiosMock.history.put.length).to.be.eq(1)
282 |       expect(axiosMock.history.put[0].data).to.be.eq(data)
283 |     })
284 | 
285 |     it('returns undefined when not found', async function () {
286 |       const data = {
287 |         name: {
288 |           $invariant: 'Another one'
289 |         },
290 |         contentTypeAlias: 'blogpost'
291 |       }
292 | 
293 |       const result = await client.management.content.update('3de82763-c4bb-4bca-8f79-7b211b3ffffa', data)
294 | 
295 |       expect(result).to.be.undefined
296 |     })
297 |   })
298 | })
299 | 


--------------------------------------------------------------------------------
/src/Clients/Management/ContentManagementClient.ts:
--------------------------------------------------------------------------------
  1 | import FormData from 'form-data'
  2 | 
  3 | import { Client } from '../../Client'
  4 | import { PagedResponse, ContentManagementContent, ContentManagementContentRequest } from '../../Responses'
  5 | import { Endpoint } from '../../Endpoint'
  6 | import { Endpoints } from '../../Endpoints'
  7 | import { APIContentChildrenOptions, APIContentPublishOptions, APIContentUnpublishOptions } from '../../RequestOptions'
  8 | 
  9 | /**
 10 |  * ContentManagementClient is used to access the Content part of the Content Management API.
 11 |  * @public
 12 |  *
 13 |  * @example
 14 |  * The {@link ContentManagementClient} must be accessed through {@link Client}.
 15 |  *
 16 |  * ```typescript
 17 |  * import { Client } from '@umbraco/headless-client'
 18 |  *
 19 |  * const client = new Client({
 20 |  *  projectAlias: '<your-project-alias>',
 21 |  *  apiKey: '<your-api-key>',
 22 |  *  language: '<iso-code>',
 23 |  * })
 24 |  *
 25 |  * const contentClient = client.management.content
 26 |  * ```
 27 |  */
 28 | export class ContentManagementClient {
 29 |   /**
 30 |    * @internal
 31 |    */
 32 |   constructor (
 33 |     private readonly client: Client
 34 |   ) {
 35 |   }
 36 | 
 37 |   private readonly makeRequest = async <T>(endpoint: Endpoint<T>, data?: any) => {
 38 |     return this.client.makeRequest(endpoint, data)
 39 |   }
 40 | 
 41 |   /**
 42 |    * Fetch all content at the root of the tree, which the authorized user has access to according to the 'Start node'-permissions.
 43 |    * @returns a `Promise` that resolves to an array of {@link ContentManagementContent},
 44 |    */
 45 |   async root<T extends ContentManagementContent> () {
 46 |     return this.makeRequest(Endpoints.management.content.root<T>())
 47 |   }
 48 | 
 49 |   /**
 50 |    * Fetch a single Content item by its id.
 51 |    * @param id - GUID id of the Content item.
 52 |    * @returns a `Promise` that resolves to a {@link ContentManagementContent} if found, otherwise `undefined`.
 53 |    */
 54 |   async byId<T extends ContentManagementContent> (id: string) {
 55 |     try {
 56 |       return await this.makeRequest(Endpoints.management.content.byId<T>(id))
 57 |     } catch (err) {
 58 |       if (err.response && err.response.status === 404) {
 59 |         return undefined
 60 |       }
 61 |       throw err
 62 |     }
 63 |   }
 64 | 
 65 |   /**
 66 |    * Fetch all children of a Content item.
 67 |    * @param id - GUID id of the Content item.
 68 |    * @param options - Request options. See {@link APIContentChildrenOptions}.
 69 |    * @returns a `Promise` that resolves to a {@link PagedResponse} of {@link ContentManagementContent} if found, otherwise `undefined`.
 70 |    */
 71 |   async children<T extends ContentManagementContent> (id: string, options?: APIContentChildrenOptions): Promise<PagedResponse<T> | undefined> {
 72 |     try {
 73 |       return await this.makeRequest(Endpoints.management.content.children(id, options))
 74 |     } catch (err) {
 75 |       if (err.response && err.response.status === 404) {
 76 |         return undefined
 77 |       }
 78 |       throw err
 79 |     }
 80 |   }
 81 | 
 82 |   /**
 83 |    * Create a new Content item.
 84 |    * @param body - The Content to create. See {@link ContentManagementContentRequest}.
 85 |    * @returns a `Promise` that resolves to the newly created {@link ContentManagementContent}.
 86 |    *
 87 |    * @example
 88 |    * ```typescript
 89 |    * const content = await client.management.content.create({
 90 |    *  name: {
 91 |    *    $invariant: '<name>',
 92 |    *  },
 93 |    *  contentTypeAlias: '<content-type-alias>',
 94 |    *  parentId: '<parentId|undefined>',
 95 |    * })
 96 |    * ```
 97 |    *
 98 |    * If the Content Type includes an `Upload` or an `Image Cropper` property and you want to upload a file you need to pass a `FormData` object to the function instead,
 99 |    *
100 |    * ```typescript
101 |    * import FormData from `form-data`
102 |    * import fs from 'fs'
103 |    * import path from 'path'
104 |    *
105 |    * const data = new FormData()
106 |    *
107 |    * data.append(JSON.stringify({
108 |    *  name: {
109 |    *    $invariant: '<name>',
110 |    *  },
111 |    *  contentTypeAlias: '<content-type-alias>',
112 |    *  parentId: '<parentId|undefined>',
113 |    *  // if myFile is of type `Upload` and is culture variant
114 |    *  myFile: {
115 |    *    'en-US': 'my-file.txt',
116 |    *  },
117 |    *  // if myImage is of type `Image Cropper` and is culture invariant
118 |    *  myImage: {
119 |    *    $invariant: {
120 |    *      src: 'my-image.jpg',
121 |    *    },
122 |    *  },
123 |    * }))
124 |    *
125 |    * data.append('myFile.en-US', fs.createReadStream(path.join(__dirname, 'my-file.txt')))
126 |    * data.append('myImage.$invariant', fs.createReadStream(path.join(__dirname, 'my-image.txt')))
127 |    *
128 |    * const content = await client.management.content.create(data)
129 |    * ```
130 |    *
131 |    * See {@link https://our.umbraco.com/documentation/Umbraco-Heartcore/API-Documentation/Content-Management/content/#create-content} for more info on the structure of the document.
132 |    */
133 |   async create<T extends ContentManagementContent> (body: ContentManagementContentRequest | FormData) {
134 |     return this.makeRequest(Endpoints.management.content.create<T>(), body)
135 |   }
136 | 
137 |   /**
138 |    * Publish a Content item.
139 |    * @param id - GUID id of the Content item.
140 |    * @param options - Request options. See {@link APIContentPublishOptions}.
141 |    * @returns a `Promise` that resolves to a {@link ContentManagementContent} if found, otherwise `undefined`.
142 |    */
143 |   async publish<T extends ContentManagementContent> (id: string, options?: APIContentPublishOptions) {
144 |     try {
145 |       return await this.makeRequest(Endpoints.management.content.publish<T>(id, options))
146 |     } catch (err) {
147 |       if (err.response && err.response.status === 404) {
148 |         return undefined
149 |       }
150 |       throw err
151 |     }
152 |   }
153 | 
154 |   /**
155 |    * Unpublish a Content item.
156 |    * @param id - GUID id of the Content item.
157 |    * @param options - Request options. See {@link APIContentPublishOptions}.
158 |    * @returns a `Promise` that resolves to a {@link ContentManagementContent} if found, otherwise `undefined`.
159 |    */
160 |   async unPublish<T extends ContentManagementContent> (id: string, options?: APIContentUnpublishOptions) {
161 |     try {
162 |       return await this.makeRequest(Endpoints.management.content.unPublish<T>(id, options))
163 |     } catch (err) {
164 |       if (err.response && err.response.status === 404) {
165 |         return undefined
166 |       }
167 |       throw err
168 |     }
169 |   }
170 | 
171 |   /**
172 |    * Update a Content item.
173 |    * @param id - GUID id of the Content item.
174 |    * @param body - Content to update, must be a complete Content item including all cultures. See {@link ContentManagementContentRequest}.
175 |    * @returns a `Promise` that resolves to a {@link ContentManagementContent} of the updated Content item if found, otherwise `undefined`.
176 |    *
177 |    * @example
178 |    * ```typescript
179 |    * const content = await client.management.content.update('<content-id>', {
180 |    *  name: {
181 |    *    $invariant: '<name>',
182 |    *  },
183 |    *  contentTypeAlias: '<content-type-alias>',
184 |    *  parentId: '<parentId|undefined>',
185 |    * })
186 |    * ```
187 |    *
188 |    * If the Content Type includes an `Upload` or an `Image Cropper` property and you want to upload a file you need to pass a `FormData` object to the function instead,
189 |    *
190 |    * ```typescript
191 |    * import FormData from `form-data`
192 |    * import fs from 'fs'
193 |    * import path from 'path'
194 |    *
195 |    * const data = new FormData()
196 |    *
197 |    * data.append(JSON.stringify({
198 |    *  name: {
199 |    *    $invariant: '<name>',
200 |    *  },
201 |    *  contentTypeAlias: '<content-type-alias>',
202 |    *  parentId: '<parentId|undefined>',
203 |    *  // if myFile is of type `Upload` and is culture variant
204 |    *  myFile: {
205 |    *    'en-US': 'my-file.txt',
206 |    *  },
207 |    *  // if myImage is of type `Image Cropper` and is culture invariant
208 |    *  myImage: {
209 |    *    $invariant: {
210 |    *      src: 'my-image.jpg',
211 |    *    },
212 |    *  },
213 |    * }))
214 |    *
215 |    * data.append('myFile.en-US', fs.createReadStream(path.join(__dirname, 'my-file.txt')))
216 |    * data.append('myImage.$invariant', fs.createReadStream(path.join(__dirname, 'my-image.txt')))
217 |    *
218 |    * const content = await client.management.content.update('<content-id>', data)
219 |    * ```
220 |    *
221 |    * See {@link https://our.umbraco.com/documentation/Umbraco-Heartcore/API-Documentation/Content-Management/content/#update-content} for more info on the structure of the document.
222 |    */
223 |   async update<T extends ContentManagementContent> (id: string, body: ContentManagementContentRequest | FormData) {
224 |     try {
225 |       return await this.makeRequest(Endpoints.management.content.update<T>(id), body)
226 |     } catch (err) {
227 |       if (err.response && err.response.status === 404) {
228 |         return undefined
229 |       }
230 |       throw err
231 |     }
232 |   }
233 | 
234 |   /**
235 |    * Delete a Content item.
236 |    * @param id - GUID id of the Content item.
237 |    * @returns a `Promise` that resolves to a {@link ContentManagementContent} of the deleted Content item if found, otherwise `undefined`.
238 |    */
239 |   async delete <T extends ContentManagementContent> (id: string) {
240 |     try {
241 |       return await this.makeRequest(Endpoints.management.content.delete(id))
242 |     } catch (err) {
243 |       if (err.response && err.response.status === 404) {
244 |         return undefined
245 |       }
246 |       throw err
247 |     }
248 |   }
249 | }
250 | 


--------------------------------------------------------------------------------
/src/Clients/Management/ManagementClient.ts:
--------------------------------------------------------------------------------
  1 | import { Client } from '../../Client'
  2 | import { ContentManagementClient } from './ContentManagementClient'
  3 | import { MediaManagementClient } from './MediaManagementClient'
  4 | import { MemberManagementClient } from './MemberManagementClient'
  5 | import { Endpoint } from '../../Endpoint'
  6 | import { Endpoints } from '../../Endpoints'
  7 | import {
  8 |   ContentLanguageType,
  9 |   ContentMemberCreateGroupType,
 10 |   ContentMemberGroupType,
 11 |   ContentMemberTypeType,
 12 |   ContentTypeBase,
 13 |   ContentRelationType,
 14 |   ContentRelationTypeType,
 15 |   CreateContentLanguageType,
 16 |   MediaTypeContentManager,
 17 |   Form
 18 | } from '../../Responses'
 19 | 
 20 | /**
 21 |  * ManagementClient is used to access the Content Management API.
 22 |  * @public
 23 |  *
 24 |  * @example
 25 |  * The {@link ManagementClient} must be accessed through {@link Client}.
 26 |  *
 27 |  * ```typescript
 28 |  * import { Client } from '@umbraco/headless-client'
 29 |  *
 30 |  * const client = new Client({
 31 |  *  projectAlias: '<your-project-alias>',
 32 |  *  apiKey: '<your-api-key>',
 33 |  *  language: '<iso-code>',
 34 |  * })
 35 |  *
 36 |  * const managementClient = client.management
 37 |  * ```
 38 |  */
 39 | export class ManagementClient {
 40 |   /**
 41 |    * @internal
 42 |    */
 43 |   constructor (
 44 |     private readonly client: Client
 45 |   ) {
 46 | 
 47 |   }
 48 | 
 49 |   private readonly makeRequest = async <R>(endpoint: Endpoint<R>, data?: any) => {
 50 |     return this.client.makeRequest(endpoint, data)
 51 |   }
 52 | 
 53 |   /**
 54 |    * The Content client for the Content Management API.
 55 |    * See {@link ContentManagementClient}
 56 |    */
 57 |   public readonly content = new ContentManagementClient(this.client)
 58 | 
 59 |   /**
 60 |    * The Media client for the Media Management API.
 61 |    * See {@link MediaManagementClient}
 62 |    */
 63 |   public readonly media = new MediaManagementClient(this.client)
 64 | 
 65 |   /**
 66 |    * The Member client for the Member Management API.
 67 |    * See {@link MemberManagementClient}
 68 |    */
 69 |   public readonly member = new MemberManagementClient(this.client)
 70 | 
 71 |   /**
 72 |    * ContentType API
 73 |    */
 74 |   get contentType () {
 75 |     return {
 76 |       /**
 77 |        * Fetch all content types
 78 |        */
 79 |       all: async<R extends ContentTypeBase>() => this.makeRequest(Endpoints.management.contentType.all<R>()),
 80 | 
 81 |       /**
 82 |        * Find content type by alias
 83 |        * @param alias Alias for the content type
 84 |        */
 85 |       byAlias: async (alias: string) : Promise<ContentTypeBase> => this.makeRequest(Endpoints.management.contentType.byAlias(alias))
 86 |     }
 87 |   }
 88 | 
 89 |   /**
 90 |    * Media API
 91 |    */
 92 |   get mediaType () {
 93 |     return {
 94 |       /**
 95 |        * Fetch all media types
 96 |        */
 97 |       all: async () : Promise<MediaTypeContentManager[]> => this.makeRequest(Endpoints.management.mediaType.all()),
 98 | 
 99 |       /**
100 |        * Find media type by alias
101 |        * @param alias Alias of the media type querying for
102 |        */
103 |       byAlias: async (alias: string) : Promise<MediaTypeContentManager> => this.makeRequest(Endpoints.management.mediaType.byAlias(alias))
104 |     }
105 |   }
106 | 
107 |   /**
108 |    * Language API
109 |    */
110 |   get language () {
111 |     return {
112 |       /**
113 |        * Fetch all languages
114 |        */
115 |       all: async<R extends ContentLanguageType>() => this.makeRequest(Endpoints.management.language.all<R>()),
116 | 
117 |       /**
118 |        * Find language by ISO code
119 |        * @param id ISO Code for the language (e.g. en-US)
120 |        */
121 |       byISOCode: async<R extends ContentLanguageType>(id: string) => this.makeRequest(Endpoints.management.language.byISOCode<R>(id)),
122 | 
123 |       /**
124 |        * Create a language
125 |        * @param data Data for creating language object
126 |        */
127 |       create: async<R extends ContentLanguageType>(data: CreateContentLanguageType) => this.makeRequest(Endpoints.management.language.create<R>(), data),
128 | 
129 |       /**
130 |        * Update a language
131 |        * @param id ISO Code for the language (e.g. en-US)
132 |        * @param data Data for updating language object
133 |        */
134 |       update: async<R extends ContentLanguageType>(id: string, data: CreateContentLanguageType) => this.makeRequest(Endpoints.management.language.update<R>(id), data),
135 | 
136 |       /**
137 |        * Delete a language
138 |        * @param id ISO Code for the language (e.g. en-US)
139 |        */
140 |       delete: async<R extends ContentLanguageType>(id: string) => this.makeRequest(Endpoints.management.language.delete<R>(id))
141 | 
142 |     }
143 |   }
144 | 
145 |   /**
146 |    * Relation API
147 |    */
148 |   get relation () {
149 |     return {
150 |       /**
151 |        * Find relation by id
152 |        * @param id GUID part of an Umbraco UDI
153 |        */
154 |       byId: async (id: string) : Promise<ContentRelationType> => this.makeRequest(Endpoints.management.relation.byId(id)),
155 | 
156 |       /**
157 |        * Find relation by alias
158 |        * @param alias Alias of the relation querying for
159 |        */
160 |       byAlias: async (alias: string) : Promise<ContentRelationType[]> => this.makeRequest(Endpoints.management.relation.byAlias(alias)),
161 | 
162 |       /**
163 |        * Fetch child for relation with id
164 |        * @param id GUID part of an Umbraco UDI
165 |        */
166 |       byChild: async (id: string) : Promise<ContentRelationType[]> => this.makeRequest(Endpoints.management.relation.byChild(id)),
167 | 
168 |       /**
169 |        * Fetch parent for relation with id
170 |        * @param id GUID part of an Umbraco UDI
171 |        */
172 |       byParent: async (id: string) : Promise<ContentRelationType[]> => this.makeRequest(Endpoints.management.relation.byParent(id)),
173 | 
174 |       /**
175 |        * Create a relation
176 |        * @param data Data for creating relation object
177 |        */
178 |       create: async (data: any) : Promise<ContentRelationType> => this.makeRequest(Endpoints.management.relation.create(), data),
179 | 
180 |       /**
181 |        * Delete relation with id
182 |        * @param id GUID part of an Umbraco UDI
183 |        */
184 |       delete: async (id: string) : Promise<ContentRelationType> => this.makeRequest(Endpoints.management.relation.delete(id))
185 |     }
186 |   }
187 | 
188 |   /**
189 |    * RelationType API
190 |    */
191 |   get relationType () {
192 |     return {
193 |       /**
194 |        * Fetch relation type by alias
195 |        * @param alias Alias for the relation type queryed for
196 |        */
197 |       byAlias: async (alias: string) : Promise<ContentRelationTypeType> => this.makeRequest(Endpoints.management.relationType.byAlias(alias))
198 |     }
199 |   }
200 | 
201 |   /**
202 |    * MemberGroup API
203 |    */
204 |   get memberGroup () {
205 |     return {
206 |       /**
207 |        * Fetch member group by name
208 |        * @param name The name of the group
209 |        */
210 |       byName: async (name: string) => this.makeRequest<ContentMemberGroupType>(Endpoints.management.memberGroup.byName(name)),
211 | 
212 |       /**
213 |        * Create a member group
214 |        * @param data Data for creating a member group
215 |        */
216 |       create: async (data: ContentMemberCreateGroupType) => this.makeRequest(Endpoints.management.memberGroup.create(), data),
217 | 
218 |       /**
219 |        * Delete member group
220 |        * @param name Name of the member group to be removed
221 |        */
222 |       delete: async (name: string) => this.makeRequest(Endpoints.management.memberGroup.delete(name))
223 |     }
224 |   }
225 | 
226 |   /**
227 |    * MemberType API
228 |    */
229 |   get memberType () {
230 |     return {
231 |       /**
232 |        * Fetch all member types
233 |        */
234 |       all: async<R extends ContentMemberTypeType>() => this.makeRequest(Endpoints.management.memberType.all<R>()),
235 | 
236 |       /**
237 |        * Find by alias
238 |        * @param alias Alias for the member type to be found.
239 |        */
240 |       byAlias: async<R extends ContentMemberTypeType>(alias: string) => this.makeRequest(Endpoints.management.memberType.byAlias<R>(alias))
241 |     }
242 |   }
243 | 
244 |   /**
245 |    * Forms API
246 |    */
247 |   get forms () {
248 |     return {
249 |       /**
250 |        * Fetch all forms
251 |        */
252 |       all: async () : Promise<Form[]> => this.makeRequest(Endpoints.management.forms.all()),
253 | 
254 |       /**
255 |        * Get form by id
256 |        */
257 |       byId: async (id: string) : Promise<Form> => this.makeRequest(Endpoints.management.forms.byId(id)),
258 | 
259 |       /**
260 |        * Submit a new form entry
261 |        */
262 |       submitEntry: async (formId: string, data: object) => this.makeRequest(Endpoints.management.forms.submitEntry(formId), data)
263 |     }
264 |   }
265 | }
266 | 


--------------------------------------------------------------------------------
/src/Clients/Management/MediaManagementClient.ts:
--------------------------------------------------------------------------------
  1 | import FormData from 'form-data'
  2 | 
  3 | import { Client } from '../../Client'
  4 | import { PagedResponse, ContentManagementMedia, ContentManagementMediaRequest } from '../../Responses'
  5 | import { Endpoint } from '../../Endpoint'
  6 | import { Endpoints } from '../../Endpoints'
  7 | import { APIMediaChildrenOptions } from '../../RequestOptions'
  8 | 
  9 | /**
 10 |  * MediaManagementClient is used to access the Media part of the Content Management API.
 11 |  * @public
 12 |  *
 13 |  * @example
 14 |  * The {@link MediaManagementClient} must be accessed through {@link Client}.
 15 |  *
 16 |  * ```typescript
 17 |  * import { Client } from '@umbraco/headless-client'
 18 |  *
 19 |  * const client = new Client({
 20 |  *  projectAlias: '<your-project-alias>',
 21 |  *  apiKey: '<your-api-key>',
 22 |  *  language: '<iso-code>',
 23 |  * })
 24 |  *
 25 |  * const mediaClient = client.management.media
 26 |  * ```
 27 |  */
 28 | export class MediaManagementClient {
 29 |   /**
 30 |    * @internal
 31 |    */
 32 |   constructor (
 33 |     private readonly client: Client
 34 |   ) {
 35 |   }
 36 | 
 37 |   private readonly makeRequest = async <T>(endpoint: Endpoint<T>, data?: any) => {
 38 |     return this.client.makeRequest(endpoint, data)
 39 |   }
 40 | 
 41 |   /**
 42 |    * Fetch all media at the root of the tree, which the authorized user has access to according to the 'Start node'-permissions.
 43 |    * @returns a `Promise` that resolves to an array of {@link ContentManagementMedia}.
 44 |    */
 45 |   async root<T extends ContentManagementMedia> () {
 46 |     return this.makeRequest(Endpoints.management.media.root<T>())
 47 |   }
 48 | 
 49 |   /**
 50 |    * Fetch a single media item by its id.
 51 |    * @param id - GUID id of the Media item
 52 |    * @returns a `Promise` that resolves to a {@link ContentManagementMedia} if found, otherwise `undefined`.
 53 |    */
 54 |   async byId<T extends ContentManagementMedia> (id: string) {
 55 |     try {
 56 |       return await this.makeRequest(Endpoints.management.media.byId<T>(id))
 57 |     } catch (err) {
 58 |       if (err.response && err.response.status === 404) {
 59 |         return undefined
 60 |       }
 61 | 
 62 |       throw err
 63 |     }
 64 |   }
 65 | 
 66 |   /**
 67 |    * Fetch all children of a Media item.
 68 |    * @param id - GUID id of the Media item
 69 |    * @param options - Request options. See {@link APIMediaChildrenOptions}.
 70 |    * @returns a `Promise` that resolves to a {@link PagedResponse} of {@link ContentManagementMedia} if found, otherwise `undefined`.
 71 |    */
 72 |   async children<T extends ContentManagementMedia> (id: string, options?: APIMediaChildrenOptions): Promise<PagedResponse<T> | undefined> {
 73 |     try {
 74 |       return await this.makeRequest(Endpoints.management.media.children<T>(id, options))
 75 |     } catch (err) {
 76 |       if (err.response && err.response.status === 404) {
 77 |         return undefined
 78 |       }
 79 | 
 80 |       throw err
 81 |     }
 82 |   }
 83 | 
 84 |   /**
 85 |    * Create a new Media item.
 86 |    * @param body - The Media to create. See {@link ContentManagementMediaRequest}.
 87 |    * @returns a `Promise` that resolves to the newly created {@link ContentManagementMedia}.
 88 |    *
 89 |    * @example
 90 |    * ```typescript
 91 |    * const media = await client.management.media.create({
 92 |    *  name: '<name>',
 93 |    *  mediaTypeAlias: '<media-type-alias>',
 94 |    *  parentId: '<parentId|undefined>',
 95 |    * })
 96 |    * ```
 97 |    *
 98 |    * If the Media Type includes an `Upload` or an `Image Cropper` property and you want to upload a file you need to pass a `FormData` object to the function instead,
 99 |    *
100 |    * ```typescript
101 |    * import FormData from `form-data`
102 |    * import fs from 'fs'
103 |    * import path from 'path'
104 |    *
105 |    * const data = new FormData()
106 |    *
107 |    * data.append(JSON.stringify({
108 |    *  name: '<name>',
109 |    *  mediaTypeAlias: '<media-type-alias>',
110 |    *  parentId: '<parentId|undefined>',
111 |    *  // if myFile is of type `Upload`
112 |    *  myFile: 'my-file.txt',
113 |    *  // if myImage is of type `Image Cropper`
114 |    *  myImage: { src: 'my-image.jpg', },
115 |    * }))
116 |    *
117 |    * data.append('myFile', fs.createReadStream(path.join(__dirname, 'my-file.txt')))
118 |    * data.append('myImage', fs.createReadStream(path.join(__dirname, 'my-image.txt')))
119 |    *
120 |    * const media = await client.management.media.create(data)
121 |    * ```
122 |    *
123 |    * See {@link https://our.umbraco.com/documentation/Umbraco-Heartcore/API-Documentation/Content-Management/media/#create-content} for more info on the structure of the document.
124 |    */
125 |   async create <T extends ContentManagementMedia> (body: ContentManagementMediaRequest | FormData) {
126 |     return this.makeRequest(Endpoints.management.media.create(), body)
127 |   }
128 | 
129 |   /**
130 |    * Update a Media item.
131 |    * @param id - GUID id of the Content item.
132 |    * @param body - Media to update. See {@link ContentManagementMediaRequest}.
133 |    * @returns a `Promise` that resolves to a {@link ContentManagementMedia} of the updated Media item if found, otherwise `undefined`.
134 |    *
135 |    * @example
136 |    * ```typescript
137 |    * const media = await client.management.media.update('<media-id>', {
138 |    *  name: '<name>',
139 |    *  mediaTypeAlias: '<media-type-alias>',
140 |    *  parentId: '<parentId|undefined>',
141 |    * })
142 |    * ```
143 |    *
144 |    * If the Media Type includes an `Upload` or an `Image Cropper` property and you want to upload a file you need to pass a `FormData` object to the function instead,
145 |    *
146 |    * ```typescript
147 |    * import FormData from `form-data`
148 |    * import fs from 'fs'
149 |    * import path from 'path'
150 |    *
151 |    * const data = new FormData()
152 |    *
153 |    * data.append(JSON.stringify({
154 |    *  name: '<name>',
155 |    *  mediaTypeAlias: '<media-type-alias>',
156 |    *  parentId: '<parentId|undefined>',
157 |    *  // if myFile is of type `Upload`
158 |    *  myFile: 'my-file.txt',
159 |    *  // if myImage is of type `Image Cropper`
160 |    *  myImage: { src: 'my-image.jpg', },
161 |    * }))
162 |    *
163 |    * data.append('myFile', fs.createReadStream(path.join(__dirname, 'my-file.txt')))
164 |    * data.append('myImage', fs.createReadStream(path.join(__dirname, 'my-image.txt')))
165 |    *
166 |    * const media = await client.management.media.update('<media-id>', data)
167 |    * ```
168 |    *
169 |    * See {@link https://our.umbraco.com/documentation/Umbraco-Heartcore/API-Documentation/Content-Management/media/#update-media} for more info on the structure of the document.
170 |    */
171 |   async update <T extends ContentManagementMedia> (id: string, body: ContentManagementMediaRequest | FormData) {
172 |     try {
173 |       return await this.makeRequest(Endpoints.management.media.update(id), body)
174 |     } catch (err) {
175 |       if (err.response && err.response.status === 404) {
176 |         return undefined
177 |       }
178 | 
179 |       throw err
180 |     }
181 |   }
182 | 
183 |   /**
184 |    * Delete a Media item.
185 |    * @param id - GUID id of the Media item.
186 |    * @returns a `Prommise` that resolves to a {@link ContentManagementMedia} of the deleted Media item if found', otherwise `undefined`.
187 |    */
188 |   async delete <T extends ContentManagementMedia> (id: string) {
189 |     try {
190 |       return await this.makeRequest(Endpoints.management.media.delete(id))
191 |     } catch (err) {
192 |       if (err.response && err.response.status === 404) {
193 |         return undefined
194 |       }
195 | 
196 |       throw err
197 |     }
198 |   }
199 | }
200 | 


--------------------------------------------------------------------------------
/src/Clients/Management/MemberManagementClient.spec.ts:
--------------------------------------------------------------------------------
  1 | import 'mocha'
  2 | import { expect } from 'chai'
  3 | import axios from 'axios'
  4 | import MockAdapter from 'axios-mock-adapter'
  5 | import FormData from 'form-data'
  6 | 
  7 | import { Client } from '../../Client'
  8 | import { ContentManagementMemberRequest } from '../../Responses'
  9 | 
 10 | const API_ROOT = 'https://api.umbraco.io/member'
 11 | 
 12 | describe('MemberManagementClient', function () {
 13 |   let client: Client
 14 |   let axiosMock: MockAdapter
 15 | 
 16 |   before(function () {
 17 |     client = new Client({ projectAlias: 'my-project', apiKey: 'my-api-key' })
 18 |     axiosMock = new MockAdapter(axios)
 19 |   })
 20 | 
 21 |   after(function () {
 22 |     axiosMock.restore()
 23 |   })
 24 | 
 25 |   afterEach(function () {
 26 |     axiosMock.reset()
 27 |   })
 28 | 
 29 |   describe('#byUsername()', function () {
 30 |     it('can retrieve member', async function () {
 31 |       axiosMock.onGet(`${API_ROOT}/john@example.com`).reply(200, require('./__mocks__/member.byUsername.json'))
 32 | 
 33 |       const result = await client.management.member.byUsername('john@example.com')
 34 | 
 35 |       expect(result).to.not.be.undefined
 36 |       // @ts-ignore
 37 |       expect(result.name).to.be.eq('John Doe')
 38 |     })
 39 | 
 40 |     it('returns undefined when not found', async function () {
 41 |       const result = await client.management.member.byUsername('jane')
 42 | 
 43 |       expect(result).to.be.undefined
 44 |     })
 45 |   })
 46 | 
 47 |   describe('#create()', function () {
 48 |     const data: ContentManagementMemberRequest = {
 49 |       comments: 'A Valued Club Blue Member',
 50 |       email: 'jane@example.com',
 51 |       isApproved: true,
 52 |       memberTypeAlias: 'Member',
 53 |       username: 'jane@example.com',
 54 |       name: 'Jane Doe'
 55 |     }
 56 | 
 57 |     it('should accept a json object', async function () {
 58 |       axiosMock.onPost(API_ROOT).reply(201, require('./__mocks__/member.create.json'))
 59 | 
 60 |       const result = await client.management.member.create(data)
 61 | 
 62 |       // @ts-ignore
 63 |       expect(result.name).to.be.eq('Jane Doe')
 64 |       expect(axiosMock.history.post.length).to.be.eq(1)
 65 |       expect(axiosMock.history.post[0].data).to.be.eq(JSON.stringify(data))
 66 |     })
 67 | 
 68 |     it('should accept FormData object', async function () {
 69 |       axiosMock.onPost(API_ROOT).reply(201, require('./__mocks__/member.create.json'))
 70 | 
 71 |       const formData = new FormData()
 72 | 
 73 |       formData.append('content', JSON.stringify(data))
 74 | 
 75 |       const result = await client.management.member.create(formData)
 76 | 
 77 |       // @ts-ignore
 78 |       expect(result.name).to.be.eq('Jane Doe')
 79 |       expect(axiosMock.history.post.length).to.be.eq(1)
 80 |       expect(axiosMock.history.post[0].data).to.be.eq(formData)
 81 |     })
 82 |   })
 83 | 
 84 |   describe('#delete()', function () {
 85 |     it('calls delete endpoint', async function () {
 86 |       axiosMock.onDelete(`${API_ROOT}/jane@example.com`).reply(200, {})
 87 | 
 88 |       await client.management.member.delete('jane@example.com')
 89 | 
 90 |       expect(axiosMock.history.delete.length).to.be.eq(1)
 91 |     })
 92 | 
 93 |     it('returns undefined when not found', async function () {
 94 |       const result = await client.management.member.delete('john')
 95 | 
 96 |       expect(result).to.be.undefined
 97 |     })
 98 |   })
 99 | 
100 |   describe('#update()', function () {
101 |     const data: ContentManagementMemberRequest = {
102 |       comments: 'A Valued Club Blue Member',
103 |       email: 'jane@example.com',
104 |       isApproved: true,
105 |       memberTypeAlias: 'Member',
106 |       username: 'jane@example.com',
107 |       name: 'Jane Doe'
108 |     }
109 | 
110 |     it('should accept a json object', async function () {
111 |       axiosMock.onPut(`${API_ROOT}/jane@example.com`).reply(201, require('./__mocks__/member.create.json'))
112 | 
113 |       const result = await client.management.member.update('jane@example.com', data)
114 | 
115 |       expect(result).to.not.be.undefined
116 |       // @ts-ignore
117 |       expect(result.name).to.be.eq('Jane Doe')
118 |       expect(axiosMock.history.put.length).to.be.eq(1)
119 |       expect(axiosMock.history.put[0].data).to.be.eq(JSON.stringify(data))
120 |     })
121 | 
122 |     it('should accept FormData object', async function () {
123 |       axiosMock.onPut(`${API_ROOT}/jane@example.com`).reply(201, require('./__mocks__/member.create.json'))
124 | 
125 |       const formData = new FormData()
126 | 
127 |       formData.append('content', JSON.stringify(data))
128 | 
129 |       const result = await client.management.member.update('jane@example.com', formData)
130 | 
131 |       expect(result).to.not.be.undefined
132 |       // @ts-ignore
133 |       expect(result.name).to.be.eq('Jane Doe')
134 |       expect(axiosMock.history.put.length).to.be.eq(1)
135 |       expect(axiosMock.history.put[0].data).to.be.eq(formData)
136 |     })
137 | 
138 |     it('returns undefined when not found', async function () {
139 |       const result = await client.management.member.update('john', data)
140 | 
141 |       expect(result).to.be.undefined
142 |     })
143 |   })
144 | 
145 |   describe('#addToGroup()', function () {
146 |     it('calls group endpoint', async function () {
147 |       axiosMock.onPut(`${API_ROOT}/jane@example.com/groups/Blue Club Member`).reply(200, {})
148 | 
149 |       await client.management.member.addToGroup('jane@example.com', 'Blue Club Member')
150 | 
151 |       expect(axiosMock.history.put.length).to.be.eq(1)
152 |     })
153 | 
154 |     it('returns undefined when not found', async function () {
155 |       const result = await client.management.member.addToGroup('john', 'Club Blue Member')
156 | 
157 |       expect(result).to.be.undefined
158 |     })
159 |   })
160 | 
161 |   describe('#removeFromGroup()', function () {
162 |     it('calls group endpoint', async function () {
163 |       axiosMock.onDelete(`${API_ROOT}/jane@example.com/groups/Blue Club Member`).reply(200, {})
164 | 
165 |       await client.management.member.removeFromGroup('jane@example.com', 'Blue Club Member')
166 | 
167 |       expect(axiosMock.history.delete.length).to.be.eq(1)
168 |     })
169 | 
170 |     it('returns undefined when not found', async function () {
171 |       const result = await client.management.member.addToGroup('john', 'Club Blue Member')
172 | 
173 |       expect(result).to.be.undefined
174 |     })
175 |   })
176 | 
177 |   describe('#changePassword()', function () {
178 |     it('calls password endpoint', async function () {
179 |       axiosMock.onPost(`${API_ROOT}/jane@example.com/password`).reply(200, {})
180 | 
181 |       await client.management.member.changePassword('jane@example.com', 'myPassword', 'myNewPassword')
182 | 
183 |       expect(axiosMock.history.post.length).to.be.eq(1)
184 |       expect(axiosMock.history.post[0].data).to.be.eq(JSON.stringify({
185 |         currentPassword: 'myPassword',
186 |         newPassword: 'myNewPassword'
187 |       }))
188 |     })
189 |   })
190 | 
191 |   describe('#createResetPasswordToken()', function () {
192 |     it('gets a reset password token', async function () {
193 |       axiosMock.onGet(`${API_ROOT}/jane@example.com/password/reset-token`).reply(200, require('./__mocks__/member.createResetPasswordToken.json'))
194 | 
195 |       const result = await client.management.member.createResetPasswordToken('jane@example.com')
196 | 
197 |       expect(axiosMock.history.get.length).to.be.eq(1)
198 |       expect(result).to.not.be.undefined
199 |       // @ts-ignore
200 |       expect(result.token).to.not.be.undefined
201 |       // @ts-ignore
202 |       expect(result.expires_in).to.not.be.undefined
203 |       // @ts-ignore
204 |       expect(result.member).to.not.be.undefined
205 |     })
206 |   })
207 | 
208 |   describe('#resetPassword()', function () {
209 |     it('calls reset password endpoint', async function () {
210 |       axiosMock.onPost(`${API_ROOT}/jane@example.com/password/reset`).reply(200, require('./__mocks__/member.create.json'))
211 | 
212 |       const result = await client.management.member.resetPassword('jane@example.com', 'some-token', 'myNewPassword')
213 | 
214 |       expect(axiosMock.history.post.length).to.be.eq(1)
215 |       expect(axiosMock.history.post[0].data).to.be.eq(JSON.stringify({
216 |         token: 'some-token',
217 |         newPassword: 'myNewPassword'
218 |       }))
219 |       expect(result).to.not.be.undefined
220 |       // @ts-ignore
221 |       expect(result.name).to.be.eq('Jane Doe')
222 |     })
223 | 
224 |     it('returns undefined when not found', async function () {
225 |       const result = await client.management.member.resetPassword('jane@example.com', 'some-token', 'myNewPassword')
226 | 
227 |       expect(result).to.be.undefined
228 |     })
229 |   })
230 | })
231 | 


--------------------------------------------------------------------------------
/src/Clients/Management/MemberManagementClient.ts:
--------------------------------------------------------------------------------
  1 | import FormData from 'form-data'
  2 | 
  3 | import { Client } from '../../Client'
  4 | import { ContentManagementMember, ContentManagementMemberRequest, MemberResetPasswordToken } from '../../Responses'
  5 | import { Endpoint } from '../../Endpoint'
  6 | import { Endpoints } from '../../Endpoints'
  7 | 
  8 | /**
  9 |  * MemberManagementClient is used to access the Member part of the Content Management API.
 10 |  * @public
 11 |  *
 12 |  * @example
 13 |  * The {@link MemberManagementClient} must be accessed through {@link Client}.
 14 |  *
 15 |  * ```typescript
 16 |  * import { Client } from '@umbraco/headless-client'
 17 |  *
 18 |  * const client = new Client({
 19 |  *  projectAlias: '<your-project-alias>',
 20 |  *  apiKey: '<your-api-key>',
 21 |  *  language: '<iso-code>',
 22 |  * })
 23 |  *
 24 |  * const memberClient = client.management.member
 25 |  * ```
 26 |  */
 27 | export class MemberManagementClient {
 28 |   /**
 29 |    * @internal
 30 |    */
 31 |   constructor (
 32 |     private readonly client: Client
 33 |   ) {
 34 |   }
 35 | 
 36 |   private readonly makeRequest = async <T>(endpoint: Endpoint<T>, data?: any) => {
 37 |     return this.client.makeRequest(endpoint, data)
 38 |   }
 39 | 
 40 |   /**
 41 |    * Find member by membername.
 42 |    * @param username - Username for the member querying for.
 43 |    * @returns a `Promise` that resolves to a {@link ContentManagementMember} if found, otherwise `undefined`.
 44 |    */
 45 |   async byUsername<R extends ContentManagementMember> (username: string) {
 46 |     try {
 47 |       return await this.makeRequest(Endpoints.management.member.byUsername<R>(username))
 48 |     } catch (err) {
 49 |       if (err.response && err.response.status === 404) {
 50 |         return undefined
 51 |       }
 52 |       throw err
 53 |     }
 54 |   }
 55 | 
 56 |   /**
 57 |    * Create a new member.
 58 |    * @param data - Data for creating a new member.
 59 |    * @returns a `Promise` that resolves to the newly created {@link ContentManagementMember}.
 60 |    */
 61 |   async create<R extends ContentManagementMember> (data: ContentManagementMemberRequest | FormData) {
 62 |     return this.makeRequest(Endpoints.management.member.create<R>(), data)
 63 |   }
 64 | 
 65 |   /**
 66 |    * Update member by username.
 67 |    * @param username - Username for the member to be updated.
 68 |    * @param data - Data for the member to be updated.
 69 |    * @returns a `Promise` that resolves to a {@link ContentManagementMember} of the updated Member item if found, otherwise `undefined`.
 70 |    */
 71 |   async update<R extends ContentManagementMember> (username: string, data: ContentManagementMemberRequest | FormData) {
 72 |     try {
 73 |       return await this.makeRequest(Endpoints.management.member.update<R>(username), data)
 74 |     } catch (err) {
 75 |       if (err.response && err.response.status === 404) {
 76 |         return undefined
 77 |       }
 78 |       throw err
 79 |     }
 80 |   }
 81 | 
 82 |   /**
 83 |    * Add member to group.
 84 |    * @deprecated Use {@link MemberManagementClient.addToGroup | addToGroup()} instead.
 85 |    * @param username - Username of the member.
 86 |    * @param group - Name of the group the member should be added to.
 87 |    */
 88 |   async addGroup (username: string, group: string) {
 89 |     await this.addToGroup(username, group)
 90 |   }
 91 | 
 92 |   /**
 93 |    * Add member to group.
 94 |    * @param username - Username of the member.
 95 |    * @param group - Name of the group the member should be added to.
 96 |    */
 97 |   async addToGroup (username: string, groupName: string) {
 98 |     try {
 99 |       await this.makeRequest(Endpoints.management.member.addGroup(username, groupName))
100 |     } catch (err) {
101 |       if (err.response && err.response.status === 404) {
102 |         return undefined
103 |       }
104 |       throw err
105 |     }
106 |   }
107 | 
108 |   /**
109 |    * Remove member from group.
110 |    * @deprecated Use {@link MemberManagementClient.removeFromGroup | removeFromGroup()} instead.
111 |    * @param username - Username of the member.
112 |    * @param group - Name of the group the member should be removed from.
113 |    */
114 |   async removeGroup (username: string, group: string) {
115 |     await this.removeFromGroup(username, group)
116 |   }
117 | 
118 |   /**
119 |    * Remove member from group.
120 |    * @param username - Username of the member.
121 |    * @param group - Name of the group the member should be removed from.
122 |    */
123 |   async removeFromGroup (username: string, groupName: string) {
124 |     try {
125 |       await this.makeRequest(Endpoints.management.member.removeGroup(username, groupName))
126 |     } catch (err) {
127 |       if (err.response && err.response.status === 404) {
128 |         return undefined
129 |       }
130 |       throw err
131 |     }
132 |   }
133 | 
134 |   /**
135 |    * Delete a member.
136 |    * @param username - Username for the member that needs to be deleted.
137 |    */
138 |   async delete (username: string) {
139 |     try {
140 |       return await this.makeRequest(Endpoints.management.member.delete(username))
141 |     } catch (err) {
142 |       if (err.response && err.response.status === 404) {
143 |         return undefined
144 |       }
145 |       throw err
146 |     }
147 |   }
148 | 
149 |   /**
150 |    * Change a members password.
151 |    * @param username - Username for the member.
152 |    * @param currentPassword - The current password.
153 |    * @param newPassword - The new password.
154 |    * @returns a `Promise` that resolves to a {@link ContentManagementMember} if found and password is updated, otherwise `undefined`.
155 |    */
156 |   async changePassword (username: string, currentPassword: string, newPassword: string) {
157 |     try {
158 |       return await this.makeRequest(Endpoints.management.member.changePassword(username), { currentPassword, newPassword })
159 |     } catch (err) {
160 |       if (err.response && err.response.status === 404) {
161 |         return undefined
162 |       }
163 |       throw err
164 |     }
165 |   }
166 | 
167 |   /**
168 |    * Create a reset tokon that can be used to reset the members password.
169 |    * @param username - Username for the member.
170 |    * @returns a `Promise` that resolves to a {@link MemberResetPasswordToken} if found, otherwise `undefined`.
171 |    */
172 |   async createResetPasswordToken<R extends MemberResetPasswordToken> (username: string) {
173 |     try {
174 |       return await this.makeRequest(Endpoints.management.member.createResetPasswordToken<R>(username))
175 |     } catch (err) {
176 |       if (err.response && err.response.status === 404) {
177 |         return undefined
178 |       }
179 |       throw err
180 |     }
181 |   }
182 | 
183 |   /**
184 |    * Resets the members password using a reset token obtained via. {@link MemberManagementClient.createResetPasswordToken | createResetPasswordToken()}.
185 |    * @param username - Username for the member.
186 |    * @param token - The password reset token.
187 |    * @param newPassword - The new password.
188 |    * @returns a `Promise` that resolves to a {@link ContentManagementMember} if found and password is updated, otherwise `undefined`.
189 |    */
190 |   async resetPassword<R extends ContentManagementMember> (username: string, token: string, newPassword: string) {
191 |     try {
192 |       return await this.makeRequest(Endpoints.management.member.resetPassword<R>(username), { token, newPassword })
193 |     } catch (err) {
194 |       if (err.response && err.response.status === 404) {
195 |         return undefined
196 |       }
197 |       throw err
198 |     }
199 |   }
200 | }
201 | 


--------------------------------------------------------------------------------
/src/Clients/Management/__mocks__/content.byId.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "_currentVersionState": {
 3 |         "$invariant": "PUBLISHED"
 4 |     },
 5 |     "name": {
 6 |         "$invariant": "Unicorn"
 7 |     },
 8 |     "_updateDate": {
 9 |         "$invariant": "2019-10-07T11:50:56.5Z"
10 |     },
11 |     "_hasChildren": false,
12 |     "_level": 3,
13 |     "_createDate": "2019-10-07T11:50:34.48Z",
14 |     "_id": "3de82763-c4bb-4bca-8f79-7b211b3ffffa",
15 |     "_links": {
16 |         "self": {
17 |             "href": "https://api.umbraco.io/content/3de82763-c4bb-4bca-8f79-7b211b3ffffa"
18 |         },
19 |         "root": {
20 |             "href": "https://api.umbraco.io/content"
21 |         },
22 |         "children": {
23 |             "href": "https://api.umbraco.io/content/3de82763-c4bb-4bca-8f79-7b211b3ffffa/children"
24 |         },
25 |         "publish": {
26 |             "href": "https://api.umbraco.io/content/3de82763-c4bb-4bca-8f79-7b211b3ffffa/publish"
27 |         },
28 |         "unpublish": {
29 |             "href": "https://api.umbraco.io/content/3de82763-c4bb-4bca-8f79-7b211b3ffffa/unpublish"
30 |         },
31 |         "contenttype": {
32 |             "href": "https://api.umbraco.io/content/type/product"
33 |         }
34 |     },
35 |     "contentTypeAlias": "product",
36 |     "parentId": "082333be-34b1-4c2d-81a6-be92640094fc",
37 |     "sortOrder": 0,
38 |     "productName": {
39 |         "$invariant": "Unicorn"
40 |     },
41 |     "price": {
42 |         "$invariant": "249"
43 |     },
44 |     "category": {
45 |         "$invariant": [
46 |             "animals"
47 |         ]
48 |     },
49 |     "description": {
50 |         "$invariant": "Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed magna dictum porta."
51 |     },
52 |     "sku": {
53 |         "$invariant": "UMB-UNICORN"
54 |     },
55 |     "photos": {
56 |         "$invariant": "umb://media/8199c666b05c4527b857b99bee2e0616"
57 |     },
58 |     "features": {
59 |         "$invariant": ""
60 |     },
61 |     "bodyText": {
62 |         "$invariant": null
63 |     }
64 | }
65 | 


--------------------------------------------------------------------------------
/src/Clients/Management/__mocks__/content.create.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "_currentVersionState": {
 3 |         "$invariant": "DRAFT"
 4 |     },
 5 |     "name": {
 6 |         "$invariant": "Another one"
 7 |     },
 8 |     "_updateDate": {
 9 |         "$invariant": "2019-10-10T11:19:04.3988745+00:00"
10 |     },
11 |     "_hasChildren": false,
12 |     "_level": 3,
13 |     "_createDate": "2019-10-07T11:53:09.653Z",
14 |     "_id": "041067a0-74f5-4d03-92af-40c3c0aa13e7",
15 |     "_links": {
16 |         "self": {
17 |             "href": "https://api.umbraco.io/content/041067a0-74f5-4d03-92af-40c3c0aa13e7"
18 |         },
19 |         "root": {
20 |             "href": "https://api.umbraco.io/content"
21 |         },
22 |         "children": {
23 |             "href": "https://api.umbraco.io/content/041067a0-74f5-4d03-92af-40c3c0aa13e7/children"
24 |         },
25 |         "publish": {
26 |             "href": "https://api.umbraco.io/content/041067a0-74f5-4d03-92af-40c3c0aa13e7/publish"
27 |         },
28 |         "unpublish": {
29 |             "href": "https://api.umbraco.io/content/041067a0-74f5-4d03-92af-40c3c0aa13e7/unpublish"
30 |         },
31 |         "contenttype": {
32 |             "href": "https://api.umbraco.io/content/type/blogpost"
33 |         }
34 |     },
35 |     "contentTypeAlias": "blogpost",
36 |     "parentId": "8007e923-e62a-4ac1-a33f-caf3052582f4",
37 |     "sortOrder": 0,
38 |     "seoMetaDescription": {
39 |         "$invariant": ""
40 |     },
41 |     "keywords": {
42 |         "$invariant": []
43 |     },
44 |     "umbNaviHide": {
45 |         "$invariant": "0"
46 |     },
47 |     "pageTitle": {
48 |         "$invariant": "Another one"
49 |     },
50 |     "categories": {
51 |         "$invariant": [
52 |             "cg16",
53 |             "codegarden",
54 |             "umbraco"
55 |         ]
56 |     }
57 | }
58 | 


--------------------------------------------------------------------------------
/src/Clients/Management/__mocks__/content.root.json:
--------------------------------------------------------------------------------
  1 | {
  2 |     "_links": {
  3 |         "self": {
  4 |             "href": "https://api.umbraco.io/content"
  5 |         },
  6 |         "content": [
  7 |             {
  8 |                 "href": "https://api.umbraco.io/content/{id}",
  9 |                 "templated": true
 10 |             },
 11 |             {
 12 |                 "href": "https://api.umbraco.io/content/6eb240ce-8f78-4467-ab51-68918cde2866"
 13 |             }
 14 |         ],
 15 |         "children": {
 16 |             "href": "https://api.umbraco.io/content/{id}/children{?page,pageSize}",
 17 |             "templated": true
 18 |         },
 19 |         "publish": {
 20 |             "href": "https://api.umbraco.io/content/{id}/publish{?culture}",
 21 |             "templated": true
 22 |         },
 23 |         "unpublish": {
 24 |             "href": "https://api.umbraco.io/content/{id}/unpublish{?culture}",
 25 |             "templated": true
 26 |         },
 27 |         "contenttype": {
 28 |             "href": "https://api.umbraco.io/content/type/{alias}",
 29 |             "templated": true
 30 |         }
 31 |     },
 32 |     "_embedded": {
 33 |         "content": [
 34 |             {
 35 |                 "_currentVersionState": {
 36 |                     "$invariant": "PUBLISHED"
 37 |                 },
 38 |                 "name": {
 39 |                     "$invariant": "Home"
 40 |                 },
 41 |                 "_updateDate": {
 42 |                     "$invariant": "2019-10-07T07:58:48.477Z"
 43 |                 },
 44 |                 "_hasChildren": true,
 45 |                 "_level": 1,
 46 |                 "_createDate": "2019-10-07T07:45:21.363Z",
 47 |                 "_id": "6eb240ce-8f78-4467-ab51-68918cde2866",
 48 |                 "_links": {
 49 |                     "self": {
 50 |                         "href": "https://api.umbraco.io/content/6eb240ce-8f78-4467-ab51-68918cde2866"
 51 |                     },
 52 |                     "root": {
 53 |                         "href": "https://api.umbraco.io/content"
 54 |                     },
 55 |                     "children": {
 56 |                         "href": "https://api.umbraco.io/content/6eb240ce-8f78-4467-ab51-68918cde2866/children"
 57 |                     },
 58 |                     "publish": {
 59 |                         "href": "https://api.umbraco.io/content/6eb240ce-8f78-4467-ab51-68918cde2866/publish"
 60 |                     },
 61 |                     "unpublish": {
 62 |                         "href": "https://api.umbraco.io/content/6eb240ce-8f78-4467-ab51-68918cde2866/unpublish"
 63 |                     },
 64 |                     "contenttype": {
 65 |                         "href": "https://api.umbraco.io/content/type/home"
 66 |                     }
 67 |                 },
 68 |                 "contentTypeAlias": "home",
 69 |                 "sortOrder": 4,
 70 |                 "heroHeader": {
 71 |                     "$invariant": "Umbraco Demo"
 72 |                 },
 73 |                 "heroDescription": {
 74 |                     "$invariant": "Moonfish, steelhead, lamprey southern flounder tadpole fish sculpin bigeye, blue-redstripe danio collared dogfish. Smalleye squaretail goldfish arowana butterflyfish pipefish wolf-herring jewel tetra, shiner; gibberfish red velvetfish. Thornyhead yellowfin pike threadsail ayu cutlassfish."
 75 |                 },
 76 |                 "heroCTACaption": {
 77 |                     "$invariant": "Check our products"
 78 |                 },
 79 |                 "heroCTALink": {
 80 |                     "$invariant": "umb://document/082333be34b14c2d81a6be92640094fc"
 81 |                 },
 82 |                 "bodyText": {
 83 |                     "$invariant": null
 84 |                 },
 85 |                 "footerHeader": {
 86 |                     "$invariant": "Umbraco Demo"
 87 |                 },
 88 |                 "footerDescription": {
 89 |                     "$invariant": "Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vivamus suscipit tortor eget felis porttitor volutpat"
 90 |                 },
 91 |                 "footerCTACaption": {
 92 |                     "$invariant": "Read All on the Blog"
 93 |                 },
 94 |                 "footerCTALink": {
 95 |                     "$invariant": "umb://document/8007e923e62a4ac1a33fcaf3052582f4"
 96 |                 },
 97 |                 "footerAddress": {
 98 |                     "$invariant": "Umbraco HQ - Unicorn Square - Haubergsvej 1 - 5000 Odense C - Denmark - +45 70 26 11 62"
 99 |                 },
100 |                 "heroBackgroundImage": {
101 |                     "$invariant": "umb://media/76966940c9ba471686cef3854a7f5bd6"
102 |                 },
103 |                 "font": {
104 |                     "$invariant": "serif"
105 |                 },
106 |                 "colorTheme": {
107 |                     "$invariant": "earth"
108 |                 },
109 |                 "sitename": {
110 |                     "$invariant": "Umbraco Sample Site"
111 |                 },
112 |                 "logo": {
113 |                     "$invariant": ""
114 |                 }
115 |             }
116 |         ]
117 |     }
118 | }
119 | 


--------------------------------------------------------------------------------
/src/Clients/Management/__mocks__/member.byUsername.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "_failedPasswordAttempts": 0,
 3 |     "_groups": [
 4 |         "Club Blue Members"
 5 |     ],
 6 |     "_lastLoginDate": "2019-10-10T12:04:24Z",
 7 |     "_lastPasswordChangeDate": "2019-10-10T12:04:24Z",
 8 |     "_createDate": "2019-10-10T12:04:24.203Z",
 9 |     "_id": "153c22ad-2940-4d1c-9253-f62a2a873915",
10 |     "_updateDate": "2019-10-10T12:04:24.487Z",
11 |     "_links": {
12 |         "self": {
13 |             "href": "https://api.umbraco.io/member/john%40example.com"
14 |         },
15 |         "membertype": {
16 |             "href": "https://api.umbraco.io/member/type/Member"
17 |         }
18 |     },
19 |     "comments": "First Club Blue Member",
20 |     "email": "john@example.com",
21 |     "isApproved": true,
22 |     "isLockedOut": false,
23 |     "memberTypeAlias": "Member",
24 |     "username": "john@example.com",
25 |     "name": "John Doe"
26 | }
27 | 


--------------------------------------------------------------------------------
/src/Clients/Management/__mocks__/member.create.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "_failedPasswordAttempts": 0,
 3 |     "_groups": [],
 4 |     "_createDate": "2019-10-10T12:18:06.6087436Z",
 5 |     "_id": "fbabbae4-738d-406a-a7b6-e6684a622882",
 6 |     "_updateDate": "2019-10-10T12:18:06.6087436Z",
 7 |     "_links": {
 8 |         "self": {
 9 |             "href": "https://api.umbraco.io/member/john%40example.com"
10 |         },
11 |         "membertype": {
12 |             "href": "https://api.umbraco.io/member/type/Member"
13 |         }
14 |     },
15 |     "comments": "A Valued Club Blue Member",
16 |     "email": "jane@example.com",
17 |     "isApproved": true,
18 |     "isLockedOut": false,
19 |     "memberTypeAlias": "Member",
20 |     "username": "jane@example.com",
21 |     "name": "Jane Doe"
22 | }
23 | 


--------------------------------------------------------------------------------
/src/Clients/Management/__mocks__/member.createResetPasswordToken.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "token": "ydAcKSmv+zAdPqFeYPuBAGojmFvJeiI2B6K79x0eOGX5EMevdu/vs16eq5sZ85crk2V+/7JmxN6s/5MJFvNg2K9Iex3cFmNlI8uTmvw2HuQzCr3Zo9KyKh19Gy4iTfzx+Q3Q0z1TCuSdBxjpiI6nuQ==",
 3 |   "expires_in": 86399,
 4 |   "_links": {
 5 |     "self": {
 6 |       "href": "/api/member/jane%40example.com/password/reset-token"
 7 |     },
 8 |     "member": {
 9 |       "href": "/api/member/jane%40example.com"
10 |     }
11 |   },
12 |   "_embedded": {
13 |     "member": {
14 |       "_failedPasswordAttempts": 0,
15 |       "_groups": [],
16 |       "_createDate": "2019-10-10T12:19:57.053Z",
17 |       "_id": "59c97163-0ece-4b92-893a-d3da4af2c888",
18 |       "_updateDate": "2019-10-10T12:20:30.1886381Z",
19 |       "_links": {
20 |         "self": {
21 |           "href": "https://api.umbraco.io/member/jane%40example.com"
22 |         },
23 |         "membertype": {
24 |           "href": "https://api.umbraco.io/member/type/Member"
25 |         }
26 |       },
27 |       "comments": "A Valued Club Blue Member",
28 |       "email": "jane@example.com",
29 |       "isApproved": true,
30 |       "isLockedOut": false,
31 |       "memberTypeAlias": "Member",
32 |       "username": "jane@example.com",
33 |       "name": "Jane A. Doe"
34 |     }
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/src/Clients/Management/index.ts:
--------------------------------------------------------------------------------
1 | export * from './ContentManagementClient'
2 | export * from './MediaManagementClient'
3 | export * from './MemberManagementClient'
4 | export * from './ManagementClient'
5 | 


--------------------------------------------------------------------------------
/src/Clients/index.ts:
--------------------------------------------------------------------------------
1 | export * from './Management'
2 | export * from './Delivery'
3 | export * from './AuthenticationClient'
4 | 


--------------------------------------------------------------------------------
/src/Endpoint.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   ContentDeliveryFilterOptions,
 3 |   ContentTypeOptions,
 4 |   CultureOptions,
 5 |   DepthOptions,
 6 |   HyperlinksOption,
 7 |   PageOptions
 8 | } from './RequestOptions'
 9 | 
10 | /** @internal */
11 | export enum EndpointSource {
12 |   CDN,
13 |   Media,
14 |   ContentManagement
15 | }
16 | 
17 | type Options = ContentDeliveryFilterOptions | ContentTypeOptions | CultureOptions | DepthOptions | HyperlinksOption | PageOptions
18 | 
19 | /**
20 |  * This class describes how and endpoint might will look,
21 |  * it's not possible to change value
22 |  * @internal
23 |  */
24 | export class Endpoint<R = any> {
25 |   constructor (
26 |     public readonly source: EndpointSource,
27 |     public readonly path: string,
28 |     public readonly urlParams: any,
29 |     public readonly method: 'get'|'GET'|'post'|'POST'|'put'|'PUT'|'delete'|'DELETE',
30 |     public readonly options?: Options
31 |   ) {
32 | 
33 |   }
34 | 
35 |   /**
36 |    * Replace path with urlParams
37 |    */
38 |   getPath = () => {
39 |     const keys = Object.keys(this.urlParams)
40 |     if (keys.length === 0) {
41 |       return this.path
42 |     }
43 | 
44 |     let path = this.path
45 |     keys.forEach(key => {
46 |       const value = this.urlParams[key]
47 | 
48 |       const regEx = new RegExp(`{${key}}`)
49 |       path = path.replace(regEx, value)
50 |     })
51 | 
52 |     const params = new URLSearchParams()
53 | 
54 |     if (this.options) {
55 |       if ('pageSize' in this.options && typeof this.options.pageSize === 'number') {
56 |         params.append('pageSize', this.options.pageSize.toString())
57 |       }
58 |       if ('page' in this.options && typeof this.options.page === 'number') {
59 |         params.append('page', this.options.page.toString())
60 |       }
61 |       if ('depth' in this.options && typeof this.options.depth === 'number') {
62 |         params.append('depth', this.options.depth.toString())
63 |       }
64 |       if ('hyperlinks' in this.options && typeof this.options.hyperlinks === 'boolean') {
65 |         params.append('hyperlinks', this.options.hyperlinks ? 'true' : 'false')
66 |       }
67 |       if ('contentType' in this.options && typeof this.options.contentType === 'string') {
68 |         params.append('contentType', this.options.contentType)
69 |       }
70 |       if ('culture' in this.options && typeof this.options.culture === 'string') {
71 |         params.append('culture', this.options.culture)
72 |       }
73 |     }
74 | 
75 |     const queryString = params.toString()
76 | 
77 |     if (queryString) {
78 |       path += `${path.includes('?') ? '&' : '?'}${queryString}`
79 |     }
80 | 
81 |     return path
82 |   }
83 | }
84 | 


--------------------------------------------------------------------------------
/src/RequestOptions/ContentFilterOptions.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Content Filter Properties.
 3 |  * @public
 4 |  */
 5 | export interface ContentFilterProperties {
 6 |   alias: string
 7 |   value: string
 8 |   match: ContentFilterMatch
 9 | }
10 | 
11 | /**
12 |  * Content Filter.
13 |  * @public
14 |  */
15 | export interface ContentFilter {
16 |   contentTypeAlias?: string
17 |   properties: ContentFilterProperties[]
18 | }
19 | 
20 | /**
21 |  * Content Filter Match.
22 |  * @public
23 |  */
24 | export enum ContentFilterMatch {
25 |   Contains = 'CONTAINS',
26 |   Like = 'LIKE'
27 | }
28 | 


--------------------------------------------------------------------------------
/src/RequestOptions/ContentTypeOptions.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Content Type Options.
 3 |  * @public
 4 |  */
 5 | export interface ContentTypeOptions {
 6 |   /**
 7 |    * Only fetch Content with the specific Content Type.
 8 |    */
 9 |   contentType?: string
10 | }
11 | 


--------------------------------------------------------------------------------
/src/RequestOptions/CultureOptions.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Culture Options.
 3 |  * @public
 4 |  */
 5 | export interface CultureOptions {
 6 |   /**
 7 |    * Culture to retrieve content in.
 8 |    */
 9 |   culture?: string
10 | }
11 | 


--------------------------------------------------------------------------------
/src/RequestOptions/DepthOptions.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Depth Options.
 3 |  * @public
 4 |  */
 5 | export interface DepthOptions {
 6 |   /**
 7 |    * Number of levels to retrieve.
 8 |    */
 9 |   depth?: number
10 | }
11 | 


--------------------------------------------------------------------------------
/src/RequestOptions/HyperlinksOption.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Hyperlinks Options.
 3 |  * @public
 4 |  */
 5 | export interface HyperlinksOption {
 6 |   /**
 7 |    * Set to `false` if the `_links` property should not include extra links.
 8 |    * @defaultValue `true`
 9 |    */
10 |   hyperlinks?: boolean
11 | }
12 | 


--------------------------------------------------------------------------------
/src/RequestOptions/PageOptions.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Page Options
 3 |  * @public
 4 |  */
 5 | export interface PageOptions {
 6 |   /**
 7 |    * Page number
 8 |    */
 9 |   page?: number
10 |   /**
11 |    * Page size
12 |    */
13 |   pageSize?: number
14 | }
15 | 


--------------------------------------------------------------------------------
/src/RequestOptions/RequestOptions.ts:
--------------------------------------------------------------------------------
  1 | import { HyperlinksOption } from './HyperlinksOption'
  2 | import { ContentTypeOptions } from './ContentTypeOptions'
  3 | import { DepthOptions } from './DepthOptions'
  4 | import { PageOptions } from './PageOptions'
  5 | import { CultureOptions } from './CultureOptions'
  6 | 
  7 | /**
  8 |  * Content Delivery Root Options.
  9 |  * @public
 10 |  *
 11 |  * @remarks
 12 |  * See {@link HyperlinksOption}, {@link ContentTypeOptions} and {@link CultureOptions} for more details.
 13 |  */
 14 | export type ContentDeliveryRootOptions = HyperlinksOption & ContentTypeOptions & CultureOptions
 15 | /**
 16 |  * Content Delivery By Id Options.
 17 |  * @public
 18 |  *
 19 |  * @remarks
 20 |  * See {@link HyperlinksOption}, {@link DepthOptions} and {@link CultureOptions} for more details.
 21 |  */
 22 | export type ContentDeliveryByIdOptions = HyperlinksOption & DepthOptions & CultureOptions
 23 | /**
 24 |  * Content Delivery By Url Options.
 25 |  * @public
 26 |  *
 27 |  * @remarks
 28 |  * See {@link HyperlinksOption}, {@link DepthOptions} and {@link CultureOptions} for more details.
 29 |  */
 30 | export type ContentDeliveryByUrlOptions = HyperlinksOption & DepthOptions & CultureOptions
 31 | /**
 32 |  * Content Delivery Ancestors Options.
 33 |  * @public
 34 |  *
 35 |  * @remarks
 36 |  * See {@link HyperlinksOption}, {@link ContentTypeOptions} and {@link CultureOptions} for more details.
 37 |  */
 38 | export type ContentDeliveryAncestorsOptions = HyperlinksOption & ContentTypeOptions & CultureOptions
 39 | /**
 40 |  * Content Delivery Children Options.
 41 |  * @public
 42 |  *
 43 |  * @remarks
 44 |  * See {@link HyperlinksOption}, {@link ContentTypeOptions}, {@link PageOptions} and {@link CultureOptions} for more details.
 45 |  */
 46 | export type ContentDeliveryChildrenOptions = HyperlinksOption & ContentTypeOptions & PageOptions & CultureOptions
 47 | /**
 48 |  * Content Delivery Descendants Options.
 49 |  * @public
 50 |  *
 51 |  * @remarks
 52 |  * See {@link HyperlinksOption}, {@link ContentTypeOptions}, {@link PageOptions} and {@link CultureOptions} for more details.
 53 |  */
 54 | export type ContentDeliveryDescendantsOptions = HyperlinksOption & ContentTypeOptions & PageOptions & CultureOptions
 55 | /**
 56 |  * Content Delivery By Content Type Options.
 57 |  * @public
 58 |  *
 59 |  * @remarks
 60 |  * See {@link HyperlinksOption}, {@link PageOptions} and {@link CultureOptions} for more details.
 61 |  */
 62 | export type ContentDeliveryByContentTypeOptions = HyperlinksOption & PageOptions & CultureOptions
 63 | /**
 64 |  * Content Delivery Filter Options.
 65 |  * @public
 66 |  *
 67 |  * @remarks
 68 |  * See {@link HyperlinksOption}, {@link PageOptions} and {@link CultureOptions} for more details.
 69 |  */
 70 | export type ContentDeliveryFilterOptions = HyperlinksOption & PageOptions & CultureOptions
 71 | /**
 72 |  * Content Delivery Search Options.
 73 |  * @public
 74 |  *
 75 |  * @remarks
 76 |  * See {@link HyperlinksOption}, {@link PageOptions} and {@link CultureOptions} for more details.
 77 |  */
 78 | export type ContentDeliverySearchOptions = HyperlinksOption & PageOptions & CultureOptions
 79 | 
 80 | /**
 81 |  * Content Delivery Redirect Options.
 82 |  * @public
 83 |  *
 84 |  * @remarks
 85 |  * See {@link HyperlinksOption}, {@link PageOptions} and {@link CultureOptions} for more details.
 86 |  */
 87 | export type ContentDeliveryRedirectOptions = HyperlinksOption & PageOptions & CultureOptions
 88 | /**
 89 |  * Media Delivery Children Options
 90 |  * @public
 91 |  *
 92 |  * @remarks
 93 |  * See {@link PageOptions} for more details.
 94 |  */
 95 | export type MediaDeliveryChildrenOptions = PageOptions
 96 | 
 97 | /**
 98 |  * Content Management Children Options
 99 |  * @public
100 |  *
101 |  * @remarks
102 |  * See {@link PageOptions} for more details.
103 |  */
104 | export type APIContentChildrenOptions = PageOptions
105 | /**
106 |  * See {@link CultureOptions} for more details.
107 |  * @public
108 |  */
109 | export type APIContentPublishOptions = CultureOptions
110 | /**
111 |  * Content Management Unpublish Options
112 |  * @public
113 |  *
114 |  * @remarks
115 |  * See {@link CultureOptions} for more details.
116 |  */
117 | export type APIContentUnpublishOptions = CultureOptions
118 | 
119 | /**
120 |  * Media Management Children Options
121 |  * @public
122 |  *
123 |  * @remarks
124 |  * See {@link PageOptions} for more details.
125 |  */
126 | export type APIMediaChildrenOptions = PageOptions
127 | 


--------------------------------------------------------------------------------
/src/RequestOptions/index.ts:
--------------------------------------------------------------------------------
1 | export * from './DepthOptions'
2 | export * from './PageOptions'
3 | export * from './HyperlinksOption'
4 | export * from './ContentTypeOptions'
5 | export * from './RequestOptions'
6 | export * from './CultureOptions'
7 | export * from './ContentFilterOptions'
8 | 


--------------------------------------------------------------------------------
/src/Responses/Content.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Content
 3 |  * @public
 4 |  */
 5 | export interface Content {
 6 |   _creatorName: string
 7 |   _url: string
 8 |   _urls: { [culture: string]: string }
 9 |   _writerName: string
10 |   _hasChildren: boolean
11 |   _level: number
12 |   _createDate: string
13 |   _id: string
14 |   _updateDate: string
15 |   contentTypeAlias: string
16 |   name: string
17 |   parentId: string
18 |   sortOrder: number
19 |   [key: string]: any
20 | }
21 | 


--------------------------------------------------------------------------------
/src/Responses/ContentLanguageType.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | export interface ContentLanguageType {
 3 |   isoCode: string
 4 |   cultureName: string
 5 |   isDefault: boolean
 6 |   isMandatory: boolean
 7 |   _createDate: string
 8 |   _updateDate: string
 9 |   _links: any
10 | }
11 | 
12 | export interface ContentLanguageRootType<T extends ContentLanguageType = ContentLanguageType> {
13 |   languages: T[]
14 | }
15 | 
16 | export interface CreateContentLanguageType {
17 |   isoCode: string
18 |   cultureName: string
19 |   isDefault: boolean
20 |   isMandatory: boolean
21 | }
22 | 


--------------------------------------------------------------------------------
/src/Responses/ContentManagementContent.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @public
 3 |  */
 4 | export interface ContentLanguageProperty {
 5 |   $invariant?: any
 6 |   [key: string]: any
 7 | }
 8 | 
 9 | /**
10 |  * @public
11 |  */
12 | export interface CurrentVersionSate {
13 |   $invariant?: any
14 |   [key: string]: ContentSavedState
15 | }
16 | 
17 | /**
18 |  * The saved state of a content item.
19 |  * @public
20 |  */
21 | export enum ContentSavedState {
22 |   /**
23 |    * The item isn't created yet.
24 |    */
25 |   NotCreated = 'NOT_CREATED',
26 |   /**
27 |    * The item is saved but isn't published.
28 |    */
29 |   Draft = 'DRAFT',
30 |   /**
31 |    * The item is published and there are no pending changes.
32 |    */
33 |   Published = 'PUBLISHED',
34 |   /**
35 |    * The item is published and there are pending changes.
36 |    */
37 |   PublishedPendingChanges = 'PUBLISHED_PENDING_CHANGES'
38 | }
39 | 
40 | /**
41 |  * @public
42 |  */
43 | export interface ContentManagementContent {
44 |   readonly _hasChildren: boolean
45 |   readonly _level: string
46 |   readonly _currentVersionState: CurrentVersionSate
47 |   readonly _createDate: string
48 |   readonly _deleteDate: string
49 |   readonly _id: string
50 |   readonly _updateDate: string
51 |   name: ContentLanguageProperty
52 |   contentTypeAlias: string
53 |   parentId?: string
54 |   sortOrder?: number
55 |   [key: string]: ContentLanguageProperty | any
56 | }
57 | 
58 | /**
59 |  * @public
60 |  */
61 | export interface ContentManagementContentRequest {
62 |   name: ContentLanguageProperty
63 |   contentTypeAlias: string
64 |   parentId?: string
65 |   sortOrder?: number
66 |   [key: string]: ContentLanguageProperty | any
67 | }
68 | 


--------------------------------------------------------------------------------
/src/Responses/ContentManagementMedia.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @public
 3 |  */
 4 | export interface ContentManagementMediaRequest {
 5 |   mediaTypeAlias: string
 6 |   name: string
 7 |   sortOrder?: number
 8 |   parentId?: string
 9 |   [key: string]: any
10 | }
11 | 
12 | /**
13 |  * @public
14 |  */
15 | export interface ContentManagementMedia {
16 |   readonly _hasChildren: boolean
17 |   readonly _level: string
18 |   readonly _createDate: string
19 |   readonly _deleteDate: string
20 |   readonly _id: string
21 |   readonly _updateDate: string
22 |   mediaTypeAlias: string
23 |   name: string
24 |   sortOrder?: number
25 |   parentId?: string
26 |   [key: string]: any
27 | }
28 | 


--------------------------------------------------------------------------------
/src/Responses/ContentManagementMember.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @public
 3 |  */
 4 | export interface ContentManagementMember {
 5 |   _failedPasswordAttempts: number
 6 |   _groups: string[]
 7 |   _lastLoginDate: string
 8 |   _lastPasswordChangeDate: string
 9 |   _createDate: string
10 |   _id: string
11 |   _updateDate: string
12 |   _links: any
13 |   comments: string
14 |   email: string
15 |   isApproved: boolean
16 |   isLockedOut: boolean
17 |   memberTypeAlias: string
18 |   username: string
19 |   name: string
20 | }
21 | 
22 | /**
23 |  * @public
24 |  */
25 | export interface ContentManagementMemberRequest {
26 |   comments?: string
27 |   email: string
28 |   isApproved: boolean
29 |   memberTypeAlias: string
30 |   username: string
31 |   name: string
32 |   password?: string
33 | }
34 | 
35 | /**
36 |  * @public
37 |  */
38 | export interface MemberResetPasswordToken {
39 |   token: string
40 |   expires_in: number
41 |   member: ContentManagementMember
42 | }
43 | 
44 | export interface ContentMemberGroupType {
45 |   _id: string
46 |   name: string
47 |   _createDate: string
48 |   _updateData: string
49 | }
50 | 
51 | export interface ContentMemberCreateGroupTypeProperty {
52 |   isSensitive: boolean
53 |   memberCanEdit: boolean
54 |   memberCanView: boolean
55 |   alias: string
56 |   label: string
57 |   propertyEditorAlias: string
58 |   sortOrder: number
59 |   validation: any
60 | }
61 | 
62 | export interface ContentMemberCreateGroupType {
63 |   name: string
64 |   sortOrder: number
65 |   properties: ContentMemberCreateGroupTypeProperty[]
66 | }
67 | 
68 | export interface ContentManagementMemberType {
69 |   _id: string
70 |   name: string
71 |   _createDate: string
72 |   _updateData: string
73 | }
74 | 
75 | export interface ContentMemberTypeType {
76 |   alias: string
77 |   compositions: any[]
78 |   groups: ContentMemberCreateGroupType[]
79 |   name: string
80 |   _createDate: string
81 |   _id: string
82 |   _updateDate: string
83 |   _links: any
84 | }
85 | 
86 | export interface ContentMemberTypeTypeGroup<T extends ContentMemberTypeType = ContentMemberTypeType> {
87 |   membertypes: T[]
88 | }
89 | 


--------------------------------------------------------------------------------
/src/Responses/ContentManagerMediaType.ts:
--------------------------------------------------------------------------------
 1 | export interface MediaTypeContentManagerRoot {
 2 |   mediatypes: MediaTypeContentManager[]
 3 | }
 4 | 
 5 | export interface MediaTypeContentManager {
 6 |   alias: string
 7 |   compositions: any[]
 8 |   groups: GroupMediaTypeContentManager[]
 9 |   name: string
10 |   _createDate: string
11 |   _id: string
12 |   _updateDate: string
13 |   _links: any
14 | }
15 | 
16 | export interface GroupMediaTypeContentManager {
17 |   name: string
18 |   sortOrder: number
19 |   properties: PropertyMediaType[]
20 | }
21 | 
22 | export interface PropertyMediaType {
23 |   alias: string
24 |   label: string
25 |   propertyEditorAlias: string
26 |   sortOrder: number
27 |   validation: any
28 | }
29 | 


--------------------------------------------------------------------------------
/src/Responses/ContentRelationType.ts:
--------------------------------------------------------------------------------
 1 | export interface ContentRelationType {
 2 |   _id: number
 3 |   parentId: string
 4 |   childId: string
 5 |   relationTypeAlias: string
 6 |   comment: string
 7 |   _links: any
 8 | }
 9 | 
10 | export interface ContentRelationRootType<T extends ContentRelationType> {
11 |   relations: T[]
12 | }
13 | 
14 | export interface ContentRelationTypeType {
15 |   name: string
16 |   alias: string
17 |   isBidirectional: boolean
18 |   parentObjectType: string
19 |   childObjectType: string
20 |   _createDate: string
21 |   _id: string
22 |   _updateDate: string
23 | }
24 | 


--------------------------------------------------------------------------------
/src/Responses/ContentTypeBaseResponse.ts:
--------------------------------------------------------------------------------
 1 | export interface ContentTypeBaseResponse<T extends ContentTypeBase> {
 2 |   contenttypes: T[]
 3 | }
 4 | 
 5 | export interface ContentTypeGroupProperty {
 6 |   label: string
 7 |   alias: string
 8 |   allowCultureVariant: boolean
 9 |   propertyEditorAlias: boolean
10 |   sortOrder: number
11 |   validation: any
12 | 
13 | }
14 | 
15 | export interface ContentTypeBaseGroup {
16 |   name: string
17 |   sortOrder: number
18 |   properties: ContentTypeGroupProperty[]
19 | }
20 | 
21 | export interface ContentTypeBase {
22 |   bane: string
23 |   alias: string
24 |   groups: ContentTypeBaseGroup[]
25 |   _createDate: string
26 |   _updateDate: string
27 |   _links: any
28 |   _id: string
29 | }
30 | 


--------------------------------------------------------------------------------
/src/Responses/Form.ts:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @public
  3 |  */
  4 | export interface FormConditionRule {
  5 |   field: string
  6 |   operator: FormConditionRuleOperatorType
  7 |   value: string
  8 | }
  9 | 
 10 | /**
 11 |  * @public
 12 |  */
 13 | export enum FormConditionRuleOperatorType {
 14 |   Is = 'IS',
 15 |   IsNot = 'IS_NOT',
 16 |   GreaterThen = 'GREATER_THEN',
 17 |   LessThen = 'LESS_THEN',
 18 |   Contains = 'CONTAINS',
 19 |   StartsWith = 'STARTS_WITH',
 20 |   EndsWith = 'ENDS_WITH'
 21 | }
 22 | 
 23 | /**
 24 |  * @public
 25 |  */
 26 | export interface FormCondition {
 27 |   actionType: FormConditionActionType
 28 |   logicType: FormConditionLogicType
 29 |   rules: FormConditionRule[]
 30 | }
 31 | 
 32 | /**
 33 |  * @public
 34 |  */
 35 | export enum FormConditionLogicType {
 36 |   All = 'ALL',
 37 |   Any = 'ANY'
 38 | }
 39 | 
 40 | /**
 41 |  * @public
 42 |  */
 43 | export enum FormConditionActionType {
 44 |   Show = 'SHOW',
 45 |   Hide = 'HIDE'
 46 | }
 47 | 
 48 | /**
 49 |  * @public
 50 |  */
 51 | export interface FormField {
 52 |   caption: string
 53 |   alias: string
 54 |   required: boolean
 55 |   requiredErrorMessage?: string
 56 |   settings: object
 57 |   type: string
 58 |   preValues?: []
 59 |   helpText?: string
 60 |   condition?: FormCondition
 61 | }
 62 | 
 63 | /**
 64 |  * @public
 65 |  */
 66 | export interface FormColumn {
 67 |   width: number
 68 |   fields: FormField[]
 69 |   caption?: string
 70 | }
 71 | 
 72 | /**
 73 |  * @public
 74 |  */
 75 | export interface FormFieldset {
 76 |   columns: FormColumn[]
 77 |   caption?: string
 78 |   condition?: FormCondition
 79 | }
 80 | 
 81 | /**
 82 |  * @public
 83 |  */
 84 | export interface FormPage {
 85 |   fieldsets: FormFieldset[]
 86 |   caption?: string
 87 | }
 88 | 
 89 | /**
 90 |  * @public
 91 |  */
 92 | export interface Form {
 93 |   _id: string
 94 |   indicator?: string
 95 |   name?: string
 96 |   nextLabel?: string
 97 |   previousLabel?: string
 98 |   submitLabel?: string
 99 |   disableDefaultStylesheet: boolean
100 |   fieldIndicationType: FormFieldIndicationType
101 |   hideFieldValidation: boolean
102 |   messageOnSubmit?: string
103 |   showValidationSummary: boolean
104 |   pages: FormPage[]
105 | }
106 | 
107 | /**
108 |  * @public
109 |  */
110 | export enum FormFieldIndicationType {
111 |   NoIndicator = 'NO_INDICATOR',
112 |   MarkMandatoryFields = 'MARK_MANDATORY_FIELDS',
113 |   MarkOptionalFields = 'MARK_OPTIONAL_FIELDS'
114 | }
115 | 


--------------------------------------------------------------------------------
/src/Responses/Media.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Media
 3 |  * @public
 4 |  */
 5 | export interface Media {
 6 |   _creatorName: string
 7 |   _url: string
 8 |   _writerName: string
 9 |   _hasChildren: boolean
10 |   _level: number
11 |   _createDate: string
12 |   _id: string
13 |   _updateDate: string
14 |   mediaTypeAlias: string
15 |   name: string
16 |   parentId: string
17 |   sortOrder: number
18 |   [key: string]: any
19 | }
20 | 


--------------------------------------------------------------------------------
/src/Responses/OAUthResponse.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @public
 3 |  */
 4 | export interface OAUthResponse {
 5 |   access_token?: string
 6 |   token_type?: string
 7 |   expires_in?: number
 8 |   error?: string
 9 |   error_description?: string
10 | }
11 | 


--------------------------------------------------------------------------------
/src/Responses/PagedResponse.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Paged Response
 3 |  * @public
 4 |  */
 5 | export interface PagedResponse<I> {
 6 |   /** The page number */
 7 |   page: number
 8 |   /** The page size */
 9 |   pageSize: number
10 |   /** Number of total items */
11 |   totalItems: number
12 |   /** Number of total pagen */
13 |   totalPages: number
14 |   /** The items */
15 |   items: I[]
16 | }
17 | 


--------------------------------------------------------------------------------
/src/Responses/Redirect.ts:
--------------------------------------------------------------------------------
1 | /**
2 |  * Redirect
3 |  * @public
4 |  */
5 | export interface Redirect {
6 |   redirects: { [url: string]: object };
7 | }
8 | 


--------------------------------------------------------------------------------
/src/Responses/index.ts:
--------------------------------------------------------------------------------
 1 | export * from './Content'
 2 | export * from './Media'
 3 | export * from './ContentManagementContent'
 4 | export * from './ContentManagementMedia'
 5 | export * from './ContentTypeBaseResponse'
 6 | export * from './ContentManagerMediaType'
 7 | export * from './ContentLanguageType'
 8 | export * from './ContentRelationType'
 9 | export * from './ContentManagementMember'
10 | export * from './PagedResponse'
11 | export * from './Form'
12 | export * from './OAUthResponse'
13 | export * from './Redirect'
14 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * A library for acessing the Umbraco Heartcore APIs.
 3 |  *
 4 |  * The {@link Client} class is the entry point for acessing both the
 5 |  * {@link DeliveryClient | Content Delivery} and the
 6 |  * {@link ManagementClient | Content Management} APIs.
 7 |  *
 8 |  * @packageDocumentation
 9 |  */
10 | 
11 | export * from './APIRequestError'
12 | export * from './Client'
13 | export * from './Clients'
14 | export * from './Endpoint'
15 | export * from './RequestOptions'
16 | export * from './Responses'
17 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "module": "commonjs",
 4 |     "target": "es5",
 5 |     "moduleResolution": "node",
 6 |     "inlineSourceMap": true,
 7 |     "inlineSources": true,
 8 |     "declaration": true,
 9 |     "outDir": "dist",
10 |     "declaration": true,
11 |     "rootDir": "src",
12 |     "esModuleInterop": true,
13 |     "strict": true,
14 |     "lib": ["es2015", "dom"]
15 |   },
16 |   "exclude": [
17 |     "**/*.spec.ts",
18 |     "node_modules",
19 |     "dist",
20 |     "etc",
21 |     "temp",
22 |     "samples"
23 |   ],
24 |   "include": [
25 |     "src"
26 |   ]
27 | }
28 | 


--------------------------------------------------------------------------------
/tsconfig_spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.json",
 3 |   "exclude": [
 4 |     "node_modules",
 5 |     "dist",
 6 |     "etc",
 7 |     "temp",
 8 |     "samples"
 9 |   ],
10 |   "include": [
11 |     "src/**/*.spec.ts"
12 |   ]
13 | }
14 | 


--------------------------------------------------------------------------------