Add contact form to each page so users can leave feedback on each page (

#4033) * Add feedback input boxes to feedback partial so customers can leave docs feedback Signed-off-by: Ian Maddaus <[email protected]> * Update partials to handle new feedback partial Signed-off-by: Ian Maddaus <[email protected]> * Update scss files Signed-off-by: Ian Maddaus <[email protected]> * Update pages that shouldn't have feedback form Signed-off-by: Ian Maddaus <[email protected]> * Fixing JS, SASS, HTML Signed-off-by: Ian Maddaus <[email protected]> * Update feedback page Signed-off-by: Ian Maddaus <[email protected]> * Swap var for const Signed-off-by: Ian Maddaus <[email protected]> * Add buttons for contacting support Signed-off-by: Ian Maddaus <[email protected]> * Update Automate CLI TOC Signed-off-by: Ian Maddaus <[email protected]> * Change breakpoint Signed-off-by: Ian Maddaus <[email protected]> * Minor reformating Signed-off-by: Ian Maddaus <[email protected]> * Hide for print Signed-off-by: Ian Maddaus <[email protected]> * WIP Signed-off-by: Ian Maddaus <[email protected]> * Add recaptcha Signed-off-by: Ian Maddaus <[email protected]> * Additional cleanup Signed-off-by: Ian Maddaus <[email protected]> * Update input labels Signed-off-by: Ian Maddaus <[email protected]> --------- Signed-off-by: Ian Maddaus <[email protected]>
chef · Mar 18, 2023 · 38eae99 · 38eae99
1 parent 609c528
commit 38eae99
Show file tree

Hide file tree

Showing 38 changed files with 407 additions and 291 deletions.
diff --git a/.github/ISSUE_TEMPLATE/large-docs-project.md b/.github/ISSUE_TEMPLATE/large-docs-project.md
@@ -30,7 +30,7 @@ Product manager:
 
 ## Project overview
 
-This is a public repository. If you would prefer to keep the following information confidential, please email this part of the form us at Chef-Docs@progress.com.
+This is a public repository. If you would prefer to keep the following information confidential, please email this part of the form us at chef-docs@progress.com.
 
 - [ ] It's all good. I'll use the form
 - [ ] That's a big nope. Look for my email.

diff --git a/CONTRIBUTING b/CONTRIBUTING
@@ -4,8 +4,8 @@
 
 chef-docs hopes that the documentation is always just what you are looking for, but when that is not the case chef-docs does appreciate feedback. There are several ways to get feedback to chef-docs:
 
-* Email --- Send an email to Chef-Docs@progress.com for documentation bugs, ideas, thoughts, and suggestions. Typos and little errors and quick fixes will be fixed quickly and without fuss. This email address is not a support email address, however. If you need support for Chef, contact CHEF support.
-* Pull request -- The documentation repository is on GitHub: https://github.com/chef/chef-web-docs. DCO sign-off is not required to submit pull requests to this repo. If you are wondering what is going on in that repository, in terms of structure and what-goes-where, send an email to Chef-Docs@progress.com.
+* Email --- Send an email to chef-docs@progress.com for documentation bugs, ideas, thoughts, and suggestions. Typos and little errors and quick fixes will be fixed quickly and without fuss. This email address is not a support email address, however. If you need support for Chef, contact CHEF support.
+* Pull request -- The documentation repository is on GitHub: https://github.com/chef/chef-web-docs. DCO sign-off is not required to submit pull requests to this repo. If you are wondering what is going on in that repository, in terms of structure and what-goes-where, send an email to chef-docs@progress.com.
 * https://discourse.chef.io/ --- chef-docs follows this mailing list. Improvements to the documentation are made because of conversations that happen on this mailing list. That said, relying solely on the mailing list is the least effective way to get feedback to chef-docs (because there is no guarantee that chef-docs will see any particular message).
 
 Thanks in advance for any feedback you choose to send.
diff --git a/README.md b/README.md
@@ -288,7 +288,7 @@ The commit history of this repo before February 12, 2016 has been archived to th
 
 We love getting feedback. You can use:
 
-- Email --- Send an email to Chef-Docs@progress.com for documentation bugs,
+- Email --- Send an email to chef-docs@progress.com for documentation bugs,
   ideas, thoughts, and suggestions. This email address is not a
   support email address, however. If you need support, contact Chef
   support.

diff --git a/content/_index.md b/content/_index.md
@@ -3,6 +3,7 @@ title = "Chef Documentation"
 draft = false
 st_robots = "noindex, follow"
 toc = false
+feedback = false
 
 [cascade]
   product = ["client"]

diff --git a/content/feedback.md b/content/feedback.md
@@ -19,9 +19,21 @@ feedback. There are several ways to get feedback to chef-docs. For
 members of the Chef community, customers, or people who just want to
 send feedback, choose any of the following options:
 
+## Feedback Form
+
+Every page in [docs.chef.io](https://docs.chef.io) has a feedback form
+at the bottom of the page. Please feel free to include any thoughts or
+suggestions for improving the documentation on a page. Be as detailed as possible.
+
+Use the feedback form at the bottom of this page for submitting general feedback
+about Chef's documentation.
+
+These forms are not for customer support. If you need support,
+contact [Chef support](https://supportlink.chef.io/).
+
 ## Email
 
-Send an email to <Chef-Docs@progress.com> for documentation bugs,
+Send an email to <chef-docs@progress.com> for documentation bugs,
 ideas, thoughts, and suggestions. This email address is
 not a support email address, however. If you need support,
 contact [Chef support](https://supportlink.chef.io/).
@@ -34,11 +46,13 @@ itself, consider opening an issue in the relevant [product repository]({{< relre
 
 ## GitHub Pull Request
 
-You can open a pull request on <https://github.com/chef/chef-web-docs>. Every page on <docs.chef.io> has a link to the Markdown page in the repository that it's sourced from. We require a DCO sign-off
-to submit pull requests except for obvious fixes. See
-our [Contributing page](https://github.com/chef/chef/blob/main/CONTRIBUTING.md#developer-certification-of-origin-dco)
-for more information about our DCO policy. If you have questions
-about the chef-web-docs repo, send an email to <[email protected]> and we're
+You can open a pull request on <https://github.com/chef/chef-web-docs>.
+Every page on <https://docs.chef.io> has a link to the Markdown page in the repository
+that it's sourced from. We require a DCO sign-off to submit pull requests
+except for obvious fixes. See our
+[Contributing page](https://github.com/chef/chef/blob/main/CONTRIBUTING.md#developer-certification-of-origin-dco)
+for more information about our DCO policy. If you have questions about the
+chef-web-docs repo, send an email to <[email protected]> and we're
 happy to assist.
 
 Thanks in advance for any feedback you choose to send.
diff --git a/content/sitemap.md b/content/sitemap.md
@@ -5,5 +5,6 @@ layout = "sitemap"
 gh_repo = "chef-web-docs"
 st_robots = "noindex, follow"
 toc = false
+feedback=false
 +++
 
diff --git a/content/style_guide/_index.md b/content/style_guide/_index.md
@@ -114,7 +114,7 @@ For more information, see our [Obvious Fix policy](https://github.com/chef/chef/
 
 We use [Hugo](https://gohugo.io/documentation/) to build and preview our documentation. See the `chef-web-docs` [README](https://github.com/chef/chef-web-docs#local-development-environment) for information on setting up Hugo and previewing documentation changes locally.
 
-We also use [Netlify](https://docs.netlify.com/) to deploy our documentation and preview pull requests. Netlify generates a preview of <docs.chef.io> when a pull request is made that changes documentation content. Netlify automatically adds a link to the preview build in a pull request comment.
+We also use [Netlify](https://docs.netlify.com/) to deploy our documentation and preview pull requests. Netlify generates a preview of <https://docs.chef.io> when a pull request is made that changes documentation content. Netlify automatically adds a link to the preview build in a pull request comment.
 
 ## Deleting Pages or Making New Pages
 

diff --git a/content/style_guide/chef_house.md b/content/style_guide/chef_house.md
@@ -104,7 +104,7 @@ Here is a list of some example names for you to use (the last names are translat
 - [email protected]
 - [email protected]
 
-Use `Chef-Docs@progress.com` for the Chef Technical Documentation team.
+Use `chef-docs@progress.com` for the Chef Technical Documentation team.
 
 #### Example Phone Numbers
 

diff --git a/content/style_guide/test.md b/content/style_guide/test.md
@@ -2,6 +2,7 @@
 title = "Test Page"
 draft = false
 robots = "noindex"
+product = []
 
 +++
 
@@ -76,6 +77,14 @@ culpa qui officia deserunt mollit anim id est laborum.
 
 Use the `readfile` shortcode to add files to a page. This could be Markdown text or a code sample.
 
+You can add a JSON file like this:
+
+```md
+{{</* readfile file="data/test/test.json" highlight="json" */>}}
+```
+
+which will produce this:
+
 {{< readfile file="data/test/test.json" highlight="json" >}}
 
 ## Lists
@@ -374,11 +383,27 @@ Warnings point out something that could cause harm if ignored.
 {{< /warning >}}
 
 {{< danger >}}
-The reader should proceed with caution.
+The reader should proceed with caution. Ignoring this could break their deployment.
 {{< /danger >}}
 
 ## SVG Shortcode
 
 The SVG shortcode will add an inline SVG icon to a string of text:
 
 Click on the web asset icon ({{< svg file="themes/docs-new/static/images/web-asset.svg" >}}).
+
+## Buttons
+
+To create a link that looks like a button, just add add the `button` class to a link tag.
+
+```html
+<a href="#buttons" class="button">Link To Button Heading</a>
+```
+
+<!-- markdownlint-disable MD033 -->
+<a href="#buttons" class="button">Link To Button Heading</a>
+
+Disabled button:
+
+<a href="#buttons" class="button" disabled>Link To Button Heading</a>
+<!-- markdownlint-enable MD033 -->
diff --git a/layouts/partials/cli_chef_automate_toc.html b/layouts/partials/cli_chef_automate_toc.html
@@ -0,0 +1,48 @@
+<!-- This needs to be removed at some point in favor of the one here: '
+  https://github.com/chef/automate/blob/main/components/docs-chef-io/layouts/partials/cli_chef_automate_toc.html
+  This can be deleted after the one above in the automate repo is updated.
+-->
+
+<aside class="sticky sidebar hide-for-print" data-sticky data-top-anchor="utility-bar:bottom" data-btm-anchor="page-content:bottom">
+  <div id="table-of-contents">
+    <span>
+      <span class="mini-toc-nav">Table Of Contents</span>
+      <button class="close-button hide-for-large" aria-label="Close menu" type="button" data-close>
+        <span aria-hidden="true">&times;</span>
+      </button>
+    </span>
+    <a href="#{{ anchorize ( .Title )}}">{{ .Title }}</a>
+    <ul>
+      <li>
+        <a href = "#automate-cli-commands">Automate CLI Commands</a>
+        <ul>
+          {{ range .Site.Data.automate.cli_chef_automate.commands }}
+            {{ $command := "" }}
+            {{ if and (eq $.Page.Title "Automate CLI (HA)") (or (not .compatible_with) (eq .compatible_with "AutomateHA")) }}
+              {{ $command = .name }}
+            {{ end }}
+            {{ if and (eq $.Page.Title "Automate CLI (Standalone)") (or (not .compatible_with) (eq .compatible_with "Automate")) }}
+              {{ $command = .name }}
+            {{ end }}
+
+            {{ if ne $command "" }}
+              {{ if ne $command "chef-automate"}}
+                {{ $command := replaceRE `chef-automate ` "" $command }}
+                <li>
+                  <a href = "#{{ .name | urlize}}">{{ $command }}</a>
+                </li>
+              {{ else}}
+                <li>
+                  <a href = "#{{ .name | urlize}}">{{ $command }}</a>
+                </li>
+              {{ end }}
+            {{ end }}
+          {{ end }}
+        </ul>
+      </li>
+      <li>
+        <a href = "#error-codes">Error Codes</a>
+      </li>
+    </ul>
+  </div>
+</aside>
diff --git a/themes/docs-new/assets/js/feedback.js b/themes/docs-new/assets/js/feedback.js
@@ -1,3 +1,7 @@
+/*
+Feedback Buttons
+*/
+
 const yesButton = document.querySelector('.feedback-yes');
 const noButton = document.querySelector('.feedback-no');
 
@@ -43,3 +47,99 @@ if (noButton !== null ) {
     sendFeedback(0);
   });
 }
+
+/*
+Feedback Form
+*/
+
+const feedbackCharactersMinimumId = $("#feedback-min-characters");
+const feedbackButtonId = $("#feedback-form-submit-feedback");
+const feedbackId = $("#feedback-form-feedback");
+const minFeedbackLength = 100
+
+/*
+function feedbackLength()
+feedback-form-feedback input requires 100 character minimum
+Submit button feedback-form-submit-feedback is disabled until min character requirement is met
+feedback-min-characters label updates as number of characters changes
+*/
+
+function feedbackLength(){
+  const feedbackLength = feedbackId.val().length;
+
+  if (feedbackLength >= minFeedbackLength){
+    feedbackButtonId.prop("disabled", false);
+    feedbackCharactersMinimumId.text("0 characters left");
+  } else {
+    const remainingCharLength = minFeedbackLength - feedbackLength
+    feedbackCharactersMinimumId.text(remainingCharLength + " characters left");
+    feedbackButtonId.prop("disabled", true);
+  }
+}
+
+/*
+function submitContactFormFeedback
+Submit data to AWS from feedback-form
+On successful submit:
+- show success message
+- reset text in feedback-form-feedback
+- reset text in feedback-form-email
+- disable submit button feedback-form-submit-feedback
+On failed submit:
+- show failure message
+*/
+function validate(event)  {
+  event.preventDefault();
+  grecaptcha.execute();
+}
+
+function submitContactFormFeedback(event) {
+
+  const reCaptchaResponse = grecaptcha.getResponse();
+  const emailId = $("#feedback-form-email");
+  const responseMessageId = $("#feedback-form-thank-you-message");
+
+  const email = emailId.val();
+  const feedback = feedbackId.val();
+  const pageUrl = $("#feedback-form-page-url").val();
+  const ghUrl = $("#feedback-form-gh-url").val();
+  const pageTitle = $("#feedback-form-page-title").val();
+  const product = $("#feedback-form-chef-product").val();
+  const data = {
+    email : email,
+    feedback : feedback,
+    pageUrl : pageUrl,
+    ghUrl : ghUrl,
+    pageTitle : pageTitle,
+    product : product,
+    reCaptchaResponse : reCaptchaResponse
+  };
+
+  // console.log(data);
+
+  $.ajax({
+    type: "POST",
+    url : "https://nhvuhdbe97.execute-api.us-west-2.amazonaws.com/default/docs-feedback-form",
+    dataType: "json",
+    crossDomain: "true",
+    contentType: "application/json",
+    data: JSON.stringify(data),
+
+    success: function () {
+      // clear form and show a success message
+      // console.log("User input successfully submitted!")
+      emailId.val("");
+      feedbackId.val("");
+      responseMessageId.show();
+      feedbackButtonId.prop("disabled", true);
+    },
+    error: function(jqXHR, textStatus, errorThrown) {
+      // show an error message
+      // console.log("Failure");
+      // console.log(JSON.stringify(jqXHR));
+      // console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
+      responseMessageId.text("Unsuccessful :( You can also try sending an email to [email protected].");
+      responseMessageId.show();
+    }
+  });
+}