CDTS - Proof Of Concept

Description:

The CDTS (Centrally Deployed Templates Solution) is able to deliver the presentation layer of the Canada.ca theme or Intranet.canada.ca theme to web assets. It detaches the presentation layer from the business logic of a static website or web application and is able to do updates across multiple networks.

Objectives:

To implement CDTS with .Net 2.2 (Razor Pages)
Create a proof of concept project
Using CDTS for a modern upcoming project
Figure out how to manually add CDTS into a project

Repository: https://DSD-Marine@dev.azure.com/DSD-Marine/DSD-Marine%20APOC/_git/CDTS - Clone that repo to have my full demo of the Proof of Concept.

CDTS Implementation with ASP.Net 2.2 (Razor Pages)

Introduction of Implementation: I was able to get knowledge and understanding of CDTS from Vivian Nobrega and was able to get me a pre-compiled .dll file she had created. You can create a new project ASP.Net Core 2.2 Web Application (Razor Pages Content) then reference the .dll into the project.

Implement into a Controller (Razor Page):

I created a PublicBaseController which inherits WebTemplateController from Vivian's CDTS_Core.dll. For Razor Pages, we created it on a constructor to bring it in, then to model it down from Vivian's Controller. Once we know how it worked then we created a new page controller, then our individual razor pages are inheriting from a new page controller which is from a custom core page model which inherits from the page model, and from there in the constructor we are referencing Vivian's controller to load it in and get references.

The example below shows you how to add your breadcrumbs, header titles, etc inside your PublicBasecontroller.

PublicBaseController

 [ApiExplorerSettings(IgnoreApi = true)]
    public class PublicBaseController : WebTemplateBaseController
    {
        private string KEY_MODEL_STATE = "SavedModelState--";
        public Link[] menuLinks  ;

       

        protected readonly IStringLocalizer<SharedResources> _localizer;
    
        public PublicBaseController(IStringLocalizer<SharedResources> localizer, IMemoryCache memCache, IHostingEnvironment env, IOptions<GCConfigurations> config, IHttpContextAccessor context) : base(memCache, env, config, context.HttpContext.Request)
        {
            _localizer = localizer;
        }



        public Core WebTemplate
        {

            get
            {

                WebTemplateCore.DateModified = DateTime.Now.Date;

                WebTemplateCore.HeaderTitle = _localizer["SiteTitle"];
                WebTemplateCore.Breadcrumbs.Add(new Breadcrumb(_localizer["CanadaURL"], _localizer["HomeLink"], ""));
                WebTemplateCore.Breadcrumbs.Add(new Breadcrumb("Test", "test", ""));
                WebTemplateCore.ShowFeatures = false;
                WebTemplateCore.ShowSearch = true;
                WebTemplateCore.ShowFeedbackLink = false;
                WebTemplateCore.IntranetTitle = new Link("www.google.com", "TestCDTS");
                WebTemplateCore.LeftMenuItems = new List<MenuSection>();
                WebTemplateCore.RenderAppTop();
                
                return WebTemplateCore;
            }

        

        }

cdtsPageModelBase

 public class CdtsPageModelBase : PageModel
    {
       

        private PublicBaseController _publicBaseController;

        public CdtsPageModelBase(IStringLocalizer<SharedResources> localizer, IMemoryCache memCache, IHostingEnvironment env, IOptions<GCConfigurations> config, IHttpContextAccessor context)
        {
            _publicBaseController = new PublicBaseController(localizer, memCache, env, config, context);

        }
  
    [ViewData]
        public Core WebTemplateCore
        {
            get
            {

                return _publicBaseController.WebTemplate;
            }
            set
            {
       
            }

        }

    
    }
}

index.cshtml.cs

    public class IndexModel : CdtsPageModelBase
    {
        
        public IndexModel(IStringLocalizer<SharedResources> localizer, IMemoryCache memCache, IHostingEnvironment env, IOptions<GCConfigurations> config, IHttpContextAccessor context)
            : base(localizer, memCache, env, config, context)
        {


        }


    }
}

In this example bellow, is one of the razor page .cshtml files. Vivian's old project she had templates you can use, you can load it in by calling Layout property. Within the template automatically add all the sections (header, footer), so I used javascript to get the header and add my custom menu. Use this website http://www.gcpedia.gc.ca/wiki/Centrally_Deployed_Templates_Solution_(CDTS)/Intranet to be able to reference the sections of CDTS.

Razor Page

@page

@model TestCDTS.Pages.AboutModel
@using Microsoft.AspNetCore.Mvc.Localization;
@{
    ViewBag.Title = "StandardPage";
    Layout = "~/Views/GoC.WebTemplate/GoCWebTemplate_Layout.cshtml";

}

    @* Section Top References - This is a customer header *@
        var defTop = document.getElementsByTagName("header");
        defTop[0].outerHTML = wet.builder.appTop({
            menuPath: "https://ssl-templates.services.gc.ca/app/cls/WET/gcintranet/v4_0_27/cdts/ajax/custommenu-eng.html",
            topSecMenu: true,
            search: true,
            appName: "",
            siteMenu: true,
            showPreContent: false,
            intranetTitle: [{
                text: "TestCDTS", url: "#"
            }],
            breadcrumbs: [{
                title: "Home",
                href: "index"
            }, {
                title: "About",
                acronym: "Centrally Deployed Templates Solution",
                href: "about"
            }]
        });

** Or instead of using templates you can manually add it by calling CDTS javascript. (More about that below)

CDTS Implementation with Basic HTML Website

Using JavaScript (Optional):

You can directly implement it with javascript and can be used with different languages. You will need to add CDTS javascript files into your project. Being able to call these paths and URLs in your configuration file will allow you to grab the version of the files from the CDTS you have approved. This option is more a manual approach to adding CDTS templates.

<script type="text/javascript"
        src="https://ssl-templates.services.gc.ca/app/cls/WET/gcintranet/v4_0_27/cdts/compiled/soyutils.js"></script>

<script type="text/javascript"
        src="https://ssl-templates.services.gc.ca/app/cls/WET/gcintranet/v4_0_27/cdts/compiled/wet-en.js"></script>

You would need to create the Section References for the page. This is a breakdown of each section of the page.

CDTS page template (1)

You'll need to add this first which will build the header and will also trigger the CDTS javascript. After that, you can start adding sections manually.

  <!--Write closure template-->
    <script type="text/javascript">
        document.write(wet.builder.refTop({


        }))
    </script>

This is a code example of adding a Section Top Reference with breadcrumbs. You can start adding Section References into the body of your HTML.

 <script type="text/javascript">
        var defTop = document.getElementById("def-top");
        defTop.outerHTML = wet.builder.top({
            lngLinks: [{
                lang: "fr",
                href: "content-fr.html",
                text: "Français"
            }],
            intranetTitle: [{
                text: "Test",
                url: "#"
            }],
            cdnEnv: "prod",
            jqueryEnv: "external",
            topSecMenu: true,
            search: true,
            appName: "",
            siteMenu: false,
            showPreContent: true,

            breadcrumbs: [{
                title: "Home",
                href: "http://www.canada.ca/en/index.htm"
            }, {
                title: "CDTS",
                acronym: "Centrally Deployed Templates Solution",
                href: "http://www.canada.ca/en/index.htm"
            }]

        })
    </script>

CDTS Implementation with Angular 8

** With this implementation, I've used Node.js to create this Angular Project.

** The repo has the whole Angular proof of concept. Make sure you have Node.js, because requires Node.js version 10.9.0 or later. Run "npm i " inside the folder then run "ng serve --open" to run the application in a browser.

To implement CDTS into an Angular 8 application framework you would need to add the CDTS javascript inside the index.html file.
Also to note - adding your own CSS make sure to use "src" not "href"

index.html

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" class="no-js" lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">

   <!--[if gte IE 9 | !IE ]><!-->
    <link rel="stylesheet" src="/vendor/theme_002.scss">
    <link rel="stylesheet" src="/vendor/theme-jb.css">
    <link rel="stylesheet" src="/vendor/typeahead.css">
    <!--<![endif]-->
    <!--[if lt IE 9]>
    <script src="~/js/site-settings-ltie8.js"></script>
    <link rel="stylesheet" href="~/css/theme-jb-ie8.css" /><![endif]-->
    <!--[if lte IE 9]><![endif]-->
    <link rel="stylesheet" src="/vendor/project-jb-style.css">
    <link rel="stylesheet" src="/vendor/project-style.css">
    <link rel="stylesheet" src="/vendor/animate.css">
    <link rel="stylesheet" src="/vendor/jquery-ui.min.css" />

  <noscript>
    <!-- Write closure fall-back static file -->
    <!-- /ROOT/app/cls/WET/gcintranet/v4_0_27/cdts/static/refTop.html-->
    <!-- #include virtual="/app/cls/WET/gcintranet/v4_0_27/cdts/static/refTop.html"-->
  </noscript>
  <script type="text/javascript"
    src="https://ssl-templates.services.gc.ca/app/cls/WET/gcintranet/v4_0_27/cdts/compiled/soyutils.js"></script>
  <script type="text/javascript"
    src="https://ssl-templates.services.gc.ca/app/cls/WET/gcintranet/v4_0_27/cdts/compiled/wet-en.js"></script>

Within the same index.html file, you can start adding the CDTS sections.
In this example below I'm adding the header to be able to enable the CDTS javascript. Then I'm adding breadcrumbs navigation within the header section.

index.html

<script type="text/javascript">
    document.write(wet.builder.refTop({
    }))
  </script>
</head>

<body>
  <app-root></app-root>
</body>

<script type="text/javascript">
  var defTop = document.getElementById("def-top");
  defTop.outerHTML = wet.builder.top({
    lngLinks: [{
      lang: "fr",
      href: "content-fr.html",
      text: "Français"
    }],
    intranetTitle: [{
      text: "TestCDTS",
      url: "#"
    }],
    cdnEnv: "prod",
    jqueryEnv: "external",
    topSecMenu: true,
    search: true,
    appName: "",
    siteMenu: false,
    showPreContent: true,
    breadcrumbs: [{
      title: "Home",
      href: "http://www.canada.ca/en/index.htm"
    }, {
      title: "CDTS",
      acronym: "Centrally Deployed Templates Solution",
      href: "http://www.canada.ca/en/index.htm"
    }]
  })
</script>

For more code examples on how to add other Sections and more of a breakdown please visit: http://www.gcpedia.gc.ca/wiki/Centrally_Deployed_Templates_Solution_(CDTS)/Intranet