Content Portal Configuration Reference

You can modify the default Content Portal settings by editing the config.json file.

Tip: For more information about the config.json file, see Customize the Content Portal Settings.,

Default config.json file

{
    "title": "Content Portal",
    "sectionFilter": {"type": "sitesection"},
    "unsupportedBrowserFile": "",
    "unsupportedBrowserRegExp": "",
    "supportedBrowserMinimumVersions": {
        "chrome": "60",
        "firefox": "63",
        "safari": "11",
        "edge": "79",
        "opera": "47"
    },
    "prerenderToc": true,
    "cacheExpiry": 900,
    "prettifyPre": true,
    "prettifyCode": true,
    "prettifyCodeLang": 'bash',
    "knownIssuesUrl": "https://github.com/Jorsek/content-portal/issues",
    "keywords": [
        "node",
        "express",
        "static"
    ],
    "toc": {
        "allowFilter": false,
        "contentScrollConfig": {
            "block": "start",
            "behavior": "auto"
        }
    },
    "footer": {
        "logoSrc": "",
        "logoAlt": "",
        "copyright": "message.footer.copyright",
        "links": []
    },

    "search": {
        "ref": "href",
        "fields": [
            "href",
            "shortDescription",
            "title"
        ],
        "sections": [
            "sitesection"
        ],
        "facets": [
            "Information_Type",
            "Area"
        ]
    },
    "analytics": {
        "datadog": {
            "datacenter": "us",
            "resourceSampleRate": 100,
            "sampleRate": 100
        },
        "google": true
    },
}

Common Customizations

Change the Content Portal title

Fill in "title": with your own value. For example: "title": "My Company".

Change the default section icon
"defaultSectionIcon": "your-server-url/default-icon.png",
Change the default favicon
"favicon": "your-server-url/favicon.ico",

Starter Themes Reference

You can select one of our starter themes as a base for your further customizations.

Starter Themes Overview

base

The most basic starter theme that is perfect for heavy customizations.

  • No inherent customizations

  • Basic structure

  • No colors

  • Every element shown

whitelabel

A middle ground between the basic and decorated starter themes.

  • Basic CSS customizations

  • Limited CSS transitions

  • Limited color palette

  • Some hidden elements

decorated

The most robust starter theme that requires little customizations.

  • Advanced CSS transitions

  • Advanced CSS customizations

Change the starter theme

You can overwrite the default settings by editing the config.json file.

Figure 1. Configuration Example
"theme": "decorated",

Material-UI Color Palette Reference

You can use Material-UI customizations to quickly style your Content Portal.

For more information, see https://material-ui.com/customization/theming/.

Customization Example

You can overwrite the default settings by editing the config.json file.

"theme":  {
   "palette": {
      "type": "light",
      "primary": {
          "dark": "#333",
          "main": "#666",
          "light": "#999",
          "contrastText": "#DDD"
      },
      "secondary": {
          "main": "rgb(20,120,155)",
      }
  }
},

WebFonts Reference

You can easily import fonts and use them for your Content Portal customizations.

Example

You can overwrite the default settings by editing the config.json file.

{
  google: {
    families: ['Material Icons', 'Material Icons Sharp']
  },
  custom: {
    families: ['Social'],
    urls: ['https://assets.portal.easydita.com/fonts/social-icons.css']
  }
}

Header Configuration Reference

You can quickly add a logo to the header and mobile drawer.

Common Customizations

You can overwrite the default settings by editing the config.json file.

"theme":  {
  "appBarImage": {
    "imageSrc": "https://www.my_server.com/header_logo.png"
  },
  "appBarDrawerImage": {
    "imageSrc": "https://www.my_server.com/mobile_logo.png"
  },
},

Footer Configuration Reference

You can quickly add a logo to the footer, modify the copyrights text, and add your own links.

Common Customizations

You can overwrite the default settings by editing the config.json file.

Add a logo to the footer
Replace "logoSrc": "" with "logoSrc": "logo_url"

Replace "logoAlt": "", with "logoAlt": "alt_text"

Modify footer copyrights
Replace "copyright": "message.footer.copyright" with "copyright": "custom_copyrights"
Add footer links
"footer": {        
		"links": [            
		{
		"target": "_blank",                
		"href": "https://www.my_server.com/",              
		"text": "Homepage"            
		}]},

Internationalized Strings Configuration Reference

If needed, you can easily modify the default internationalization and localization strings used by your Content Portal. You can use this file to change the text that shows up in your Content Portal, such as the term "Articles".

Default Localization Strings

You can overwrite the default settings by editing the config.json file.

"i18n": {
  "en-US": {
    "label.tenant": "Your_Organization",
    "label.section": "Section",
    "label.home": "Home",
    "label.sections": "Sections",
    "label.section-contents": "${label.section} ${label.contents}",
    "label.contents": "Contents",
    "label.filters": "Filters",
    "label.related": "Related",
    "label.resources": "Resources",
    "label.articles": "Articles",
    "label.featured": "Featured",
    "label.filter": "Filter",
    "label.filter.apply": "Apply ${label.filter}s",
    "label.filter.clear": "Clear ${label.filter}",
    "label.filter.results": "${label.filter} Results",
    "label.result": "result",
    "label.show-contents": "Show ${label.contents}",
    "label.show-sections": "Show Page Sections",
    "label.print": "Print page",
    "label.print-sub": "${label.print} and subpages",
    "label.last-updated": "Last updated: ${date}",
    "label.related-resources": "${label.related} ${label.resources}",
    "label.related-articles": "${label.related} ${label.articles}:",
    "label.search.facet.Information_Type": "Information Type",
    "label.search.facet.Area": "Area",
    "label.search.facet.Mobile": "Mobile",
    "label.featured-articles": "${label.featured} ${label.articles}",
    "label.featured-videos": "${label.featured} Videos",
    "label.whats-new": "What's New",
    "label.version.prefix": "v ",
    "label.version.format": "${title}",
    "message.search.placeholder": "Search ${label.section} Help",
    "message.search.results": "Search Results",
    "message.missing-content": "[MISSING CONTENT]",
    "plural.0": "zero",
    "plural.1": "one",
    "plural.#": "any",
    "http.error.404": "not-found",
    "http.error.#": "other",
    "message.search.results-found": "${message.search.results-found.${@plural}}",
    "message.search.results-found.zero": "No results found",
    "message.search.results-found.one": "One result found",
    "message.search.results-found.any": "${startIndex} - ${endIndex} of ${@count} results found",
    "message.explore": "Explore Topics",
    "message.hero.title": "Welcome to ${label.tenant}'s Help Portal",
    "message.hero.sub-title": "Welcome to ${label.tenant}'s Help Portal",
    "message.error.known-issues-link": "View known issues ",
    "message.error.known-issues": "with the EZD Content Portal",
    "message.error.status": "${message.error.status.${@http.error}}",
    "message.error.next-steps": "${message.error.next-steps.${@http.error}}",
    "message.error.status.not-found": "Sorry, we couldn't find that page.",
    "message.error.status.other": "Sorry! Something seems to have broken on our end. An alert has been sent to the system admin.",
    "message.error.next-steps.not-found": "You can select a topic to open the Help or use the search field.",
    "message.error.next-steps.other": "You can select a topic to open the Help or use the search field.",
    "message.search.result-found": "Search Results",
    "message.browser.not-supported": "You seem to be using an unsupported browser.",
    "message.browser.please-use": "To visit, please use one of the following browsers:",
    "message.browser.links": "Use the links to download the latest version of a supported browser if you don't already have one installed.",
    "message.browser.chrome": "Chrome",
    "message.browser.firefox": "Firefox",
    "message.browser.edge": "Edge",
    "message.browser.safari": "Safari",
    "message.footer.copyright": "Copyright: © 2021 Intellectual Property. All rights reserved.",
    "message.chunked.title": "${content.title}",
    "message.user.welcome": "${given_name}",
    "message.user.login": "Login",
    "message.user.logout": "Logout",
    "message.login": "Please sign in.",
    "message.logout.success": "You have been successfully logged out!",
    "message.logout.login-again": "Sign in again",
    "message.logout.sso-logout": "Sign out of SSO",
    "message.logout.redirect": "This page will redirect in ${delay} seconds...",
    "message.select.version": "${selectedVersion}",
    "message.notification-banner.link-text": "Send us your feedback",
    "message.notification-banner.text": "&nbspon the new site. We appreciate it."
  }
}

Keywords

For advanced localized strings configuration, you can use the following keywords.

${page}

Using ${page} enables you to designate different text for a given key based on the page.

"message.hero.title": "${message.${page}.hero.title}",
"message.index-root.hero.title": "Welcome to the home page",
"message.section-index.hero.title": "Here's a section's landing page",
"message.content-index.hero.title": "This is the content page",
"message.search-index.hero.title": "Here are your search results",
"message.error-index.hero.title": "Looks like there's an error",
${@plural} and ${@count}

Using ${@plural} and ${@count} enables you to handle plural text options for a given sum.

"plural.0": "zero",
"plural.1": "one",
"plural.#": "any",
"message.search.results-found": "${message.search.results-found.${@plural}}",
"message.search.results-found.zero": "No results found",
"message.search.results-found.one": "One result found",
"message.search.results-found.any": "${@count} results found",

Code Formatting Reference

You can customize the way your Content Portal shows code snippets.

Common Customizations

You can overwrite the default settings by editing the config.json file.

"outputClasses": {
  "outputclass": [
    "is-code-format",
    {
        "linenums": "linenums_bool",
        "copyable": "copyable_bool",
        "theme": "codeblock_theme",
        "linenums-decorator": "linenum_decorator_str"
    }
  ]
},
outputclass

Defines the @outputclass attributes of DITA elements that you want to style. For example:

  • .codeblock

  • .pre

linenums_bool

If true, shows line numbers in code blocks. If false, hides line numbers in code blocks.

copyable_bool

If true, shows the copy code button. If false, hides the copy code button.

codeblock_theme

Defines the highlight.js theme, for example: stackoverflow-light.

linenum_decorator_str
Figure 2. Customization Example
"outputClasses": {
  ".codeblock": [
    "is-code-format",
    {
        "linenums": true, 
        "copyable": true, 
        "theme": "stackoverflow-light",
        "linenums-decorator": " "
    }
  ]
},