This is the documentation for an older version of Scroll Viewport. Here you can view the most up-to-date version of the Scroll Viewport documentation.

Concepts

Scroll Viewport is an add-on and framework that makes it very easy to use Confluence as a Content Management System for websites, intranets, documentation sites, and more. However, Scroll Viewport is not a Confluence theme. Other than Confluence themes, Scroll Viewport does not replace the Confluence user interface. Instead, it uses a CMS-like approach by separating viewing the styled content from editing in the Confluence UI. It provides a completely separate way to access pages and blog posts in Confluence.

In order to separate the viewing of the styled content, Scroll Viewport defines the concept of viewports. Each viewport has a unique URL at which the content is displayed in a styled manner (left part of the image), while the authors who edit the content can access Confluence just like they know it (right).

Scroll Viewport can be used for Websites, Intranets, Blogs, and documentation sites. Due to its nature as a framework, Scroll Viewport allows web developers to use any HTML5, CSS or JavaScript framework they want: Twitter Bootstrap, Foundation, Ionic, jQuery Mobile, Angular – you name it.

URLs in Scroll Viewport

Scroll Viewport takes great care that URLs are readable and work well for SEO. Therefore Scroll Viewport works with completely different URLs than Confluence.

Each URL in a viewport is has two parts: The Viewport URL, used to lookup a configured viewport, and the path in viewport, used to lookup a page or blog post within the viewport.

Examples 1: Viewport URL with hierarchical path naming

Examples 2: Viewport URL with flat page naming.

Please note that in both examples the viewport URL is the same.

Viewport URL

A Viewport URL can define a domain name and a path prefix. The domain name can be configured, if the viewport should be accessible under another domain name than the Confluence installation. The path prefix is the beginning of the path of the HTTP request.

For example, if the Confluence server base URL is http://confluence.acme.com, the following viewport URLs may be configured:

  1. http://confluence.acme.com/intranet could be the Viewport URL for the viewport for the intranet space.
  2. http://www.acme.com is the Scroll Viewport URL for the viewport for the pages in (public) website space.
  3. http://blog.acme.com is the Scroll Viewport URL for the viewport for the blog posts in the (public) website space.
  4. http://docs.acme.com/product is the Scroll Viewport URL for the product documentation in the product documentation space.

As you can see, viewports can have a different domain name than the confluence system.

When a user accesses the viewport URL, Scroll Viewport will display the content of the home page of the configured Confluence space.

Paths In Viewport

When a user navigates within a viewport, the remainder of the URL (after the Viewport URL) is used to look up the page within a viewport. The path in viewport can be different, depending on the content types, and the URL naming of the viewport.

  1. The path to pages in a viewport can be constructed differently:
    • based on the hierarchy of the pages in the space, for example http://docs.acme.com/administrators-guide/installation
    • the flat URL naming is useful for spaces with deep hierarchies or long page titles. Scroll viewport will use the page id in the URL to look up the page: http://docs.acme.com/installation-guide-235314.html
  2. The path to blog posts start with /blog/YYYY/mm/. Example: http://www.acme.com/blog/2015/02/website-runs-on-scroll-viewport

Content Types

Since Scroll Viewport 2.0 viewports can display both pages and blog posts (previously a viewport could only display either of them).

Scroll Viewport 2.2.1 and above officially integrates with Scroll Versions and Scroll Translations: Scroll Viewport 2.2.1 Release Notes. Check out Managing Viewports on how to enable the integration.

Themes

Themes define how the pages or blog posts are rendered. Therefore themes contain templates and static resources. Scroll Viewport comes with the default Viewport theme, but additional themes are available for download or can be developed by a web designer.

Templates are plain HTML files that contain so-called placeholders. The placeholders reference content from Confluence or possibly other contextual information. For example $page.content or $page.title reference the content (or the title) of the current page. Static resources are usually CSS, JavaScript, image or font files.

Themes can be downloaded and installed as Confluence plugins, but Scroll Viewport is actually also a theming framework that lets web designers easily develop their own themes. Please refer to the Developer's Guide for more information.

Permissions

Depending on the users' permissions and the configuration, they use Scroll Viewport and Confluence differently:

  • "Normal" users access the content through a viewport. If they don't need to view or edit the page in Confluence, it is possible to automatically redirect them to the viewport if they are trying to access a Confluence page directly.
  • Authors use the normal Confluence UI to create and write content.