Setting up a Microsite IA and Content Tasks - NCIOCPL/cgov-digital-platform GitHub Wiki

These steps are preceded by development work to establish the site.

Site Setup - Block Layout

Standard CGov blocks should be applied in Structure > Block Layout. Many of these should be in place when the site is ready for content entry

  • Language Bar - Language switcher (content)
  • Main Navigation - Cgov Main Nav
  • Breadcrumb - Cgov Breadcrumb
    • NOTE: the settings here may need to be adjusted, in order to show the root as home even if there are no further pages
      • Root Site Section Display
      • Set to "Show when only breadcrumb item"
  • Section Navigation - Cgov Section Nav
  • Public use - Public Use
  • Syndication - Syndication Message

Add site-specific blocks to blocks library library and slot in Structure > Block Layout

  • Header
  • Footer
  • Mobile menu
  • Search bar
  • 404 page
  • Alert banner (COVID)
    • The placement of the COVID block deosn't actually make the block display. It creates a place for the block that is triggered by other dev and analytics magic launch.

Note on the Linkback bar

The linkback bar does not have a content block associated with it. It is triggered by other dev and analytics magic launch.

Example Block Code

Header

  • Update File Link - logos tend to be stored in the same place
<div class="contentid-911584 slot-item only-SI nci-logo-pages large-12 columns">
<a href="/">
<img src="/profiles/custom/cgov_site/themes/custom/cgov/static/images/design-elements/logos/Connect_DCEG_Logo_white.svg" alt="National Cancer Institute Connect for Cancer Prevention Study" />
</a>
</div>

Footer

<div class="site-footer__container">
    <div class="site-footer__header">
      <h1>Division of Cancer Epidemiology and Genetics <span>at the National Cancer Institute</span></h1>
    </div>
    <div class="site-footer__nav">

      <div class="site-footer__contact">
        <h2>HAVE QUESTIONS?</h2>
        <ul>
          <li>
            <a href="<https://norcfedramp.servicenowservices.com/recruit>">Contact Connect Support Center</a>
          </li>
          <li><a href="mailto:[email protected]">Email Us</a></li>
        </ul>
      </div>
      <div class="site-footer__policies">
        <h2>POLICIES</h2>
        <ul>
          <li>
            <a href="<https://www.cancer.gov/policies/accessibility>">Accessibility</a>
          </li>
          <li>
            <a href="<https://www.cancer.gov/policies/disclaimer>">Disclaimer</a>
          </li>
          <li>
            <a href="<https://www.cancer.gov/policies/foia>">FOIA</a>
          </li>
          <li>
            <a href="<https://www.cancer.gov/policies/privacy-security>" >Privacy &amp; Security</a>
          </li>
        </ul>
      </div>
    </div>
  <div class="legal"><p><em>Connect for Cancer Prevention Study, the Connect for Cancer Prevention Study logo, and “Connect today. Prevent cancer tomorrow.” are trademarks of the U.S. Department of Health and Human Services (HHS).</em></p>
  </div>
    <div class="site-footer__agencies">
      <ul>
        <li>
          <a href="<http://www.hhs.gov/>">U.S. Department of Health and Human Services</a>
        </li>
        <li>
          <a href="<http://www.nih.gov>">National Institutes of Health</a>
        </li>
        <li>
          <a href="<https://www.cancer.gov/>">National Cancer Institute</a>
        </li>
        <li>
          <a href="<http://usa.gov>">USA.gov</a>
        </li>
      </ul>
    </div>
    <div class="site-footer__tagline">
      <h4>NIH ... Turning Discovery Into Health <sup>&reg;</sup></h4>
    </div><a class="back-to-top" href="#top">TOP</a>
  </div>

Mobile Menu

<div class="mobile-menu-bar"><button type="button" class="open-panel nav-header menu-btn">Menu</button><button type="button" class="nav-search">Search</button></div>

Search

<div class="slot-item last-SI">
    <div class="search" role="search">
        <form action="/connect-prevention-study/connect-search-results" method="get" id="siteSearchForm" name="siteSearchForm"onsubmit="NCIAnalytics.SiteWideSearch(this);">
            <label class="show-for-sr" for="swKeyword">Search</label>
            <input placeholder="search"
                class="searchString ui-autocomplete-input"
                id="swKeyword"
                maxlength="255"
                name="swKeyword"
                onblur="bSearchBoxBool=false;"
                onfocus="bSearchBoxBool=true;"
                value=""
                autocomplete="off"
                type="text"
                aria-autocomplete="list"
                aria-haspopup="true" />
            <button class="searchSubmit" id="sitesearch" onclick="return siteSearchSubmit();" type="submit">
                <span class="show-for-sr">Search</span>
            </button>
        </form>
    </div>
</div>

404 Page

<div class="error-content-english">
  <h1>Page Not Found</h1>
  <p>We can't find the page you're looking for.</p>
  <p>Visit the <a href="/connect-prevention-study">homepage</a> or use the search below.</p>
</div>
<div class="error-searchbar">
  <div id="error-form">
    <form action="/connect-prevention-study/connect-search-results" 
      method="get"
      id="pageNotFoundSearchForm" 
      name="pageNotFoundSearchForm" 
      data-language="en" 
      _lpchecked="1">
      <label class="show-for-sr" for="nfKeyword">Search</label>
      <input class="searchString ui-autocomplete-input" id="nfKeyword" maxlength="255" name="swKeyword" onblur="bSearchBoxBool=false;" onfocus="bSearchBoxBool=true;" value="" autocomplete="off" aria-autocomplete="list" aria-haspopup="true" type="text">
      <button class="searchSubmit" id="nf-search__button" type="submit">Search</button>
    </form>
  </div>
</div>

Setting up Search

Search has a few components

  • search bar, which lives in the block layout
  • Search results page - application page that needs to be created and code modified

Building Out Content

  • Create site sections
    • Set the home page as the "main nav root" and "breadcrumb root"
  • Create the landing pages (L1)
  • Go back to the site sections and set the landing pages

Stub pages should now be accessible from the primary navigation

Reminder: account for adding not only the text content of the page, but all the media assets (images, files, etc.)

Redirects

If the site wants a vanity url for their home page, it needs to be set on www, not on the microsite.

Example: nci-connect redirects to /rare-brain-spine-tumor (full path isn't needed)

NOTE: May take 10+ minutes for the cached 404 to be cleared out and the redirect to work.

⚠️ **GitHub.com Fallback** ⚠️