Merge branch 'feature/#191-add-versioning-to-tour' into feature/subtechniques-2.1

Author: isaisabel

.gitignore

@@ -6,7 +6,7 @@ env
 __pycache__/
 modules/__pycache__/*
 
-attack-archives/
+attack-versions/
 output/
 reports/
 
@@ -23,7 +23,7 @@ content/pages/resources/changelog.md
 content/pages/resources/contribute.md
 content/pages/resources/resources.md
 content/pages/resources/attackcon.md
-content/pages/resources/previous.md
+content/pages/resources/versions.md
 content/pages/resources/faq.md
 content/pages/resources/training.md
 content/pages/resources/training_cti.md

CHANGELOG.md

@@ -33,6 +33,9 @@
 
 # Sub-techniques Beta
 ## ATT&CK Website version 2.1.1
+### Improvements
+- Improved matrix page header layout with versioning feature. See issue [#190](https://github.com/mitre-attack/attack-website/issues/190).
+- Added versioning feature to [tour](https://attack.mitre.org/?tour=true). See issue [#191](https://github.com/mitre-attack/attack-website/issues/191).
 ### Fixes
 - Fixed number of tactics displayed on tactics overview pages. See issue [#183](https://github.com/mitre-attack/attack-website/issues/183).
 - Fixed objects without descriptions not showing up on techniques used tables. See issue [#186](https://github.com/mitre-attack/attack-website/issues/186).
@@ -90,6 +93,26 @@
 
 ## [ATT&CK Content version 7.0-beta](https://github.com/mitre/cti/tree/4d3f22d81af2424f3885b4390793ee8eb256d10d)
 See release notes [here](https://attack.mitre.org/beta/resources/updates/updates-march-2020/index.html).
+# 10 June 2020
+## ATT&CK Website version 1.3
+This update includes a major refactor of the ATT&CK catalog versioning system, previously referred to as "previous versions."
+
+- Versions have been moved from `/previous/monthYear` to `/versions/v#` which should be more predictable and consistent with the way the versions are referred to elsewhere. Redirects have been created so that users who bookmarked the old URLs will get sent to the new ones. See issue [#174](https://github.com/mitre-attack/attack-website/issues/174).
+- Added a permalink to the current version of the site. See issue [#175](https://github.com/mitre-attack/attack-website/issues/175).
+    - Current version is preserved alongside other versions in `/versions/`.
+    - Object pages on the live website now have a "version permalink" leading to a frozen version of that page.
+    - Permalink and previous versions now have a "live version" link leading to the most recent version of that page.
+- Revised the version list. Find the new version list on the [Versions of ATT&CK page](https://attack.mitre.org/resources/versions), which replaced the "previous versions" page.
+    - Now formatted as an easy to read table.
+    - Added links to the data on [MITRE/CTI](https://github.com/mitre/cti) for each version.
+    - Revised blurb on how versions work to explain our methodology behind the catalog version numbers and versioning system.
+- Updated past release notes to mention the version number for each release.
+
+# 31 March 2020
+The sub-techniques beta is <a href='https://attack.mitre.org/beta/' target='_blank'>now live</a>! Read the <a target='_blank' href='https://medium.com/mitre-attack/attack-subs-what-you-need-to-know-99bce414ae0b'>release blog post</a> for more details. Check out the [beta changelog](https://attack.mitre.org/beta/resources/changelog.html) for the full list of website changes.
+### Changes
+- Added sub-techniques release announcement banner.
+- Added sub-techniques release docs
 
 # 17 June 2020
 ## ATT&CK Website version 1.3.1

README.md

@@ -48,11 +48,6 @@ _See [CONTRIBUTING.md](/CONTRIBUTING.md) for more information on making contribu
 
 The ATT&CK site uses a combination of Python, Pelican and Jinja to convert the STIX content into a set of static HTML files. When `update-attack.py` is run, it generates a set of markdown files in `content` containing the parsed STIX content. Pelican then reads these markdown files and uses them to with the Jinja templates in `attack-theme/templates` to build the site HTML in the output directory. 
 
-### ATT&CK Archives
-
-The previous-versions feature, built to `/resources/previous-versions/` and `/previous/`, is used to display older versions of the ATT&CK site. This feature is reliant on the [attack-archives](https://github.com/mitre-attack/attack-archives/issues) repository, which stores the archived versions and also provides the functionality to preserve the current site
-in the archive. For more information on how the previous-version system works, please see the [attack-archives repository on github](https://github.com/mitre-attack/attack-archives/issues) or the [archives module](/modules/archives.py).
-
 ## Building the site with custom content
 
 The ATT&CK Website is designed support an evolving knowledge base. The content seen on the site is generated from data in STIX2.0 JSON format. The data used on the live site at [attack.mitre.org](https://attack.mitre.org) can be found on our [mitre/cti](https://github.com/mitre/cti) github repo. 

attack-theme/static/scripts/tour/tour-relationships.js

@@ -34,18 +34,9 @@ if (isSiteTour && tour_steps['relationships']['step3'] != 'undefined') tourSteps
     content: "In cases where a sub-technique exists in the table but not the parent technique, the parent technique row is omitted entirely."
 })
 
-let lastStepReached = false;
-
 if (isSiteTour) tourSteps.push({
-    orphan: true,
-    backdrop: false,
-    title: "End of tour",
-    content: "We hope you have enjoyed this tour of the sub-techniques features of the ATT&CK website. If you have any feedback or suggestions, please visit <a href='" + base_url + "contact'>the contact page</a> to get in touch.",
-    onShow: function() {
-        lastStepReached = true;
-    },
-    onNext: function() {
-        window.location.href = base_url;
+    onShow: function() { //go to the next tour module
+        window.location.href = base_url + "resources/versions/?tour=true"
     }
 })
 
@@ -57,9 +48,6 @@ let tour = new Tour({
     framework: 'bootstrap4',   // set Tourist to use BS4 compatibility
     showProgressBar: !isSiteTour,
     showProgressText: !isSiteTour,
-    onEnd: function() {
-        if (lastStepReached) window.location.href = base_url;
-    }
 })
 
 function start_tour() {

attack-theme/static/scripts/tour/tour-versions.js

@@ -0,0 +1,72 @@
+//is the user doing a tour of the entire site, or just this module?
+isSiteTour = window.location.href.includes("?tour=true");
+
+let lastStepReached = false;
+
+let tourSteps = [
+    {
+        orphan: true,
+        backdrop: false,
+        title: "Versions of ATT&CK",
+        content: "Versions of the ATT&CK website are preserved on this page."
+    },
+    {
+        element: "#version-column",
+        placement: "top",
+        backdrop: false,
+        title: "Versions of ATT&CK - Version",
+        content: "You can view the current and past versions of the website by clicking on the links under the \"Version\" column."
+    },
+    {
+        element: "#data-column",
+        placement: "top",
+        backdrop: false,
+        title: "Versions of ATT&CK - Data",
+        content: "The STIX data for each version is found under the \"Data\" column."
+    },
+    {
+        element: "#release-notes-column",
+        placement: "top",
+        backdrop: false,
+        title: "Versions of ATT&CK - Release Notes",
+        content: "Each major release is accompanied with release notes that detail the changes."
+    },
+    {
+        orphan: true,
+        backdrop: false,
+        title: "Versions of ATT&CK",
+        content: "All object pages now include a \"Version Permalink\". Future updates to ATT&CK won't affect the permalinked page. To return to the live version of the object, click the \"Live Version\" link."
+    },
+    {
+        orphan: true,
+        backdrop: false,
+        title: "End of tour",
+        content: "We hope you have enjoyed this tour of the sub-techniques features of the ATT&CK website. If you have any feedback or suggestions, please visit <a href='" + base_url + "contact'>the contact page</a> to get in touch.",
+        onShow: function() {
+            lastStepReached = true;
+        },
+        onNext: function() {
+            window.location.href = base_url;
+        }
+    }    
+]
+
+let tour = new Tour({
+    steps: tourSteps,
+    storage: false, //no resuming tour if the page is reloaded.
+    framework: 'bootstrap4',   // set Tourist to use BS4 compatibility
+    showProgressBar: !isSiteTour,
+    showProgressText: !isSiteTour,
+    onEnd: function() {
+        if (lastStepReached) window.location.href = base_url;
+    }
+})
+
+function start_tour() {
+    if (tour.ended()) tour.restart();
+    else tour.start(true);
+}
+
+if (isSiteTour) {
+    start_tour();
+}

attack-theme/static/style/_layouts.scss

@@ -179,13 +179,15 @@ a {
 /******/
 
 /*Table styling*/
-.table {
+.table, .blog-post table {
     empty-cells: hide;
 
     td {
         p:last-child {
             margin-bottom: 0;
         }
+        padding: .75rem;
+        vertical-align: top;
     }
     th {
         padding: rem(0.3);
@@ -198,8 +200,12 @@ a {
     }
 }
 
+.blog-post table {
+    margin-bottom: 1.5rem;
+}
+
 // background color for tables in TACTICS, TECHNIQUES, MITIGATIONS, GROUPS, and SOFTWARE
-.table-alternate {
+.table-alternate, .blog-post table {
     @extend .bg-alternate;
     tbody {
         background: color(body);
@@ -284,12 +290,12 @@ a {
 //     border-color: on-color-deemphasis(body);
 // }
 
-.table-bordered {
+.table-bordered, .blog-post table {
     &, & td, & th {
-        border-color: border-color(body);
+        border: 1px solid border-color(body);
     }
     th {
-        border-bottom-color: border-color(body) !important;
+        border-bottom: 2px solid border-color(body) !important;
     }
 }
 

attack-theme/static/style/_matrix.scss

@@ -8,6 +8,11 @@
         margin-top: to-rem(16);
     }
 
+    .matrix-border {
+        border-left: 1px solid border-color(body);
+        padding-left: 0.5rem;
+    }
+
     .matrix-title {
         border-bottom: 1px solid border-color(body);
         margin-bottom: 1rem;
@@ -275,6 +280,8 @@ $sizeunit: 14px;
 
 
 .matrix-controls {
+    margin: auto;
+    width: 50%;
     padding: 1rem;
 
     button {

attack-theme/static/style/_versioning.scss

@@ -0,0 +1,16 @@
+@import "_misc.scss";
+
+.version-button {
+    // hide the option not in use
+    &.permalink .live {
+        display: none;
+    }
+    &.live .permalink {
+        display: none;
+    }
+}
+.version-table .table-break-row {
+    border-right-color: color(body);
+    border-left-color: color(body);
+    padding: 1rem 0;
+}

attack-theme/static/style/style.scss

@@ -1 +1 @@
-@import "_colors.scss", "_misc.scss", "_nav.scss", "_footer.scss", "_fonts.scss", "_layouts.scss", "_matrix.scss", "_search.scss", "_tour.scss";
+@import "_colors.scss", "_matrix.scss", "_misc.scss", "_nav.scss", "_footer.scss", "_fonts.scss", "_layouts.scss", "_search.scss", "_versioning.scss", "_tour.scss";

attack-theme/templates/general/base.html

@@ -2,7 +2,7 @@
 {% set BANNER_MESSAGE = "You are currently viewing the sub-techniques beta. <a href='/?tour=true'>Take a tour</a>, read the <a href='https://medium.com/mitre-attack/attack-subs-what-you-need-to-know-99bce414ae0b'>blog post</a> or <a href='/resources/updates/updates-march-2020'> release notes</a>, or see the <a href='/'>non-beta version of the site</a>." %}
 {% set NAVIGATION_MENU = [['/matrices/', 'matrices', 'Matrices'], ['/tactics/', 'tactics', 'Tactics'], ['/techniques/', 'techniques', 'Techniques'], ['/mitigations/', 'mitigations', 'Mitigations'], ['/groups/', 'groups', 'Groups'], ['/software/', 'software', 'Software'], ['/resources/', 'resources', 'Resources'], ['https://medium.com/mitre-attack/', 'blog', 'Blog'], ['/resources/contribute', 'contribute', 'Contribute']] -%}
 {% set DOMAINS = [['PRE-ATT&CK', 'pre'], ['Enterprise', 'enterprise'], ['Mobile', 'mobile']] -%}
-{% set CONTENT_VERSION = "7.0-beta" -%}
+{% set CONTENT_VERSION = "7.0" -%}
 {% set WEBSITE_VERSION = "2.1.1" -%}
 {% set CHANGELOG_LOCATION = "/resources/changelog.html" -%}
 {% set LOGO_HEADER = "/theme/images/mitre_attack_logo.png" -%}
@@ -71,7 +71,7 @@
                                     <a class="dropdown-item" href="/resources/working-with-attack/">Working with ATT&CK</a>
                                     <a class="dropdown-item" href="/resources/faq/">FAQ</a>
                                     <a class="dropdown-item" href="/resources/updates/">Updates</a>
-                                    <a class="dropdown-item" href="/resources/previous-versions/">Previous Versions</a>
+                                    <a class="dropdown-item" href="/resources/versions/">Versions of ATT&CK</a>
                                     <a class="dropdown-item" href="/resources/related-projects/">Related Projects</a>
                                 </div>
                             </li>
@@ -91,8 +91,8 @@
             </div>
         </nav>
         </header>
-        <!-- don't edit or remove the line below even though it's commented out, it gets parsed and replaced by the previous-versions feature -->
-        <!-- !previous versions banner! -->
+        <!-- don't edit or remove the line below even though it's commented out, it gets parsed and replaced by the versioning feature -->
+        <!-- !versions banner! -->
         {% if BANNER_ENABLED == "true" %}
             <div class="container-fluid banner-message">
                 {{ BANNER_MESSAGE }}

attack-theme/templates/groups/group.html

@@ -7,10 +7,12 @@
    {% set title = parsed.name + ", Group " + parsed.attack_id + " | MITRE ATT&CK®" -%} 
 {% endif %}
 {% set active_page = "groups" -%}
+
 {% import 'macros/navigator.html' as navigator %}
 {% import 'macros/references.html' as references %}
 {% import 'macros/navigation.html' as navigation %}
 {% import 'macros/techniques_used.html' as techniques_used %}
+{% import 'macros/versioning.html' as versioning %}
 
 {% block head %}
     {{ super () }}
@@ -80,6 +82,7 @@ <h1>
                                 {% endif %}
                             </div>
                         </div>
+                        {{ versioning.permalink_button(output_file, parsed.attack_id)}}
                     </div>
                     </div>
                     {% if parsed.alias_descriptions %}

attack-theme/templates/macros/matrix.html

@@ -6,7 +6,6 @@
         tour_technique: the technique to use in the sub-techniques tour
         isIndex: boolean, true if this matrix is going on the index page
 -->
-
 {% macro matrices(matrices, has_subtechniques, tour_technique, isIndex) %}
 <div id="tour-matrix-container">
     {% if has_subtechniques %}

attack-theme/templates/macros/versioning.html

@@ -0,0 +1,17 @@
+<!-- version permalink button -->
+{% macro permalink_button(output_file, object_name, format=True) %}
+<div class="{% if format %}text-center pt-2 {% endif %}version-button live">
+    <div class="live">
+        <a data-toggle="tooltip" 
+           data-placement="bottom" 
+           title="permalink to this version of {{object_name}}" 
+           href="{{ output_file | permalink }}">Version Permalink</a>
+    </div>
+    <div class="permalink">
+        <a data-toggle="tooltip" 
+           data-placement="bottom" 
+           title="go to the live version of {{object_name}}" 
+           href="{{ output_file | permalink }}">Live Version</a><!--do not change this line without also changing versions.py-->
+    </div>
+</div>
+{% endmacro %}