Add/use small-footer for Actions landing page (github#16265)

JasonEtco · sarahs · web-flow · commit 5d09adb106cc · 2020-11-03T13:12:25.000-05:00
* Add/use small-footer

* Fix borked HTML

* Extract scripts to new include

* Add spacing

* Fix some padding

* Fix a test that uses /actions

* Fix old links

Co-authored-by: Sarah Schneider &lt;sarahs@users.noreply.github.com&gt;

* Update /developers in general footer

* Don't hard code free-pro-team

* Use the small-footer everywhere

* Tweak border

Co-authored-by: Sarah Schneider &lt;sarahs@users.noreply.github.com&gt;
diff --git a/content/actions/index.md b/content/actions/index.md
@@ -73,7 +73,7 @@ versions:
 </div>
 
 <!-- Code examples -->
-<div class="mt-6 pt-6">
+<div class="my-6 pt-6">
   <h2 class="mb-2">More guides</h2>
 
   <div class="d-flex flex-wrap gutter">
diff --git a/includes/footer.html b/includes/footer.html
@@ -20,7 +20,7 @@ <h4 class="mb-3 text-mono text-gray-light text-normal">{% data ui.footer.product
       <div class="col-6 col-sm-3 col-lg-2 mb-6 mb-md-2 pr-3 pr-md-0 pl-md-4">
         <h4 class="mb-3 text-mono text-gray-light text-normal">{% data ui.footer.platform.heading %}</h4>
         <ul class="list-style-none f5">
-          <li class="lh-condensed mb-3"><a href="https://developer.github.com/" class="link-gray">{% data ui.footer.platform.links.developer_api %}</a></li>
+          <li class="lh-condensed mb-3"><a href="/developers" class="link-gray">{% data ui.footer.platform.links.developer_api %}</a></li>
           <li class="lh-condensed mb-3"><a href="http://partner.github.com/" class="link-gray">{% data ui.footer.platform.links.partners %}</a></li>
           <li class="lh-condensed mb-3"><a href="https://atom.io" class="link-gray">{% data ui.footer.platform.links.atom %}</a></li>
           <li class="lh-condensed mb-3"><a href="http://electron.atom.io/" class="link-gray">{% data ui.footer.platform.links.electron %}</a></li>
@@ -87,4 +87,4 @@ <h4 class="mb-3 text-mono text-gray-light text-normal">{% data ui.footer.company
   </div>
 </div>
 
-<script src="/dist/index.js"></script>
+{% include scripts %}
diff --git a/includes/scripts.html b/includes/scripts.html
@@ -0,0 +1 @@
+<script src="/dist/index.js"></script>
diff --git a/includes/small-footer.html b/includes/small-footer.html
@@ -0,0 +1,23 @@
+<footer class="py-6 text-small">
+  <div class="container-xl d-flex px-3 px-md-6">
+    <div class="d-flex text-gray mr-3">
+      {% octicon "mark-github" height="20" class="mr-3" %}
+      <span>{{ "now" | date: "%Y" }} GitHub, Inc.</span>
+    </div>
+  
+    <ul class="d-flex list-style-none">
+      <li class="ml-3"><a href="/github/site-policy/github-terms-of-service">{% data ui.footer.terms %} </a></li>
+      <li class="ml-3"><a href="/github/site-policy/github-privacy-statement">{% data ui.footer.privacy %} </a></li>
+      <li class="ml-3"><a href="https://github.com/security">{% data ui.footer.product.links.security %}</a></li>
+      <li class="ml-3"><a href="https://githubstatus.com/">{% data ui.footer.support.links.status %}</a></li>
+      <li class="ml-3"><a href="/">{% data ui.footer.support.links.help %}</a></li>
+      <li class="ml-3"><a href="https://support.github.com/contact">{% data ui.footer.support.links.contact_github %}</a></li>
+      <li class="ml-3"><a href="https://github.com/pricing">{% data ui.footer.product.links.pricing %}</a></li>
+      <li class="ml-3"><a href="/developers">{% data ui.footer.platform.links.developer_api %}</a></li>
+      <li class="ml-3"><a href="https://services.github.com/">{% data ui.footer.support.links.training %}</a></li>
+      <li class="ml-3"><a href="https://github.com/about">{% data ui.footer.company.links.about %}</a></li>
+    </ul>
+  </div>
+</footer>
+
+{% include scripts %}
diff --git a/layouts/default.html b/layouts/default.html
@@ -14,7 +14,7 @@
         {% include article %}
       {% endif %}
       {% include support %}
-      {% include footer %}
+      {% include small-footer %}
     </main>
   </body>
 </html>
diff --git a/layouts/error-404.html b/layouts/error-404.html
@@ -32,7 +32,7 @@ <h3 class="mb-3">{% data ui.search.need_help %}</h3>
 
       <!-- {{ content }} -->
       {% include support %}
-      {% include footer %}
+      {% include small-footer %}
     </main>
   </body>
 </html>
diff --git a/layouts/error-500.html b/layouts/error-500.html
@@ -22,6 +22,6 @@ <h1>{% data ui.errors.oops %}</h1>
 
     <!-- {{ content }} -->
     {% include support %}
-    {% include footer %}
+    {% include small-footer %}
   </body>
 </html>
diff --git a/layouts/product-landing.html b/layouts/product-landing.html
@@ -28,9 +28,9 @@ <h1 class="mb-3 font-mktg">{{ page.shortTitle }}</h1>
         {{ renderedPage }}
       </div>
 
-
-      {% include support %}
-      {% include footer %}
+      <div class="border-top">
+        {% include small-footer %}
+      </div>
     </main>
   </body>
 </html>
diff --git a/tests/rendering/footer.js b/tests/rendering/footer.js
@@ -1,12 +1,13 @@
 const { getDOM } = require('../helpers')
 const enterpriseServerReleases = require('../../lib/enterprise-server-releases')
+const nonEnterpriseDefaultVersion = require('../../lib/non-enterprise-default-version')
 
 describe('footer', () => {
   jest.setTimeout(10 * 60 * 1000)
 
   describe('"contact us" link', () => {
     test('leads to dotcom support on dotcom pages', async () => {
-      const $ = await getDOM('/en/actions')
+      const $ = await getDOM(`/en/${nonEnterpriseDefaultVersion}/github`)
       expect($('a#contact-us').attr('href')).toBe('https://support.github.com/contact')
     })
 
