Coder Social home page Coder Social logo

rackerlabs / support-how-to Goto Github PK

View Code? Open in Web Editor NEW
12.0 10.0 89.0 383.97 MB

:new: Rackspace How-To Support Articles :fire:

Home Page: https://docs.rackspace.com/support/how-to/

HTML 73.09% Ruby 0.14% Makefile 1.25% JavaScript 2.00% Python 12.05% Shell 11.47%
rackspace support how-to

support-how-to's Introduction

Support How-To

deploy status

This repository contains the source code for our https://docs.rackspace.com/support/ website.

The content is written in Goldmark-style Markdown and AsciiDoc. It is generated by Hugo.

Requirements

To build this site locally, you can either install the dependencies directly on your development machine.

Local set up

 npm i -g netlify-cli
 netlify init
 netlify build
 netlify dev
 netlify deploy

Install Hugo directly

To build the documentation locally, install Hugo and have the hugo command available in your PATH. Use Hugo version 0.78 or newer. You can install hugo by using your system’s package manager. For example, on OSX, type the following command to install hugo with Homebrew:

brew install hugo

For more information about how to install Hugo, see Hugo installation documentation.

Install Asciidoctor directly

The documentation build also requires the Asciidoctor Ruby package to process .adoc files. To avoid having to install Ruby packages as the root user (with sudo), add the following lines to the .bashrc (for Bash Shell) or .zshenv (for Z Shell) in your home directory:

export GEM_HOME=$HOME/.gem
if [ -d $GEM_HOME ]; then \
    export PATH=$GEM_HOME:$PATH; fi

Create the ~/.gem directory:

mkdir -p $HOME/.gem

Log in and log out (or source the environment file you changed previously) to pick up the changes.

Now, install Asciidoctor:

make install

Build the documentation locally

Build your content locally and check for build errors before submitting a pull request.

  1. Change directory to the root directory of your document repository.

  2. Type the following command:

netlify build

Start a local web server

To preview documents in a web browser such as Chrome, start the Hugo server on your device.

Hugo has a live serve command that runs a small, lightweight web server on your computer so you can test your site locally without needing to upload it anywhere. As you make changes to files in your project, it rebuilds your project and reloads the browser for you.

To start the Hugo server, perform the following steps:

  1. Change directory to the root directory of your document repository.

  2. Run the following command:

netlify dev

The Hugo server displays some messages while it starts up. The last line should be:

Web Server is available at http://localhost:1313/ (bind address 127.0.0.1) Press Ctrl+C to stop

You should now be able to access the Support How-To using the generated link. You cannot use the Support How-To dropdown to navigate to your new article. To access your article:

  1. Select the link generated by Hugo.

  2. In the search bar type '/support/how-to/' after the existing local address.

  3. Copy and paste the information from the slug section of your metadata after the '/support/how-to/' text.

This running instance supports live reload. Changes you make to files are automatically updated in your running instance.

Some files may not be supported for live reload. If you are not automatically seeing your changes, you may need to restart the server. You can restart the server by pressing 'ctrl-c' and running netlify dev again.

If everything is working as expected, you will see output similar to:

Start building sites …
hugo v0.84.2+extended darwin/amd64 BuildDate=unknown

                   | EN-US
-------------------+--------
  Pages            |  1838
  Paginator pages  |     0
  Non-page files   |   800
  Static files     |    89
  Processed images |     0
  Aliases          |     0
  Sitemaps         |     1
  Cleaned          |     0

Built in 3988 ms
Watching for changes in /rackerlabs/support-how-to/{archetypes,content,i18n,layouts,static}
Watching for config changes in /rackerlabs/support-how-to/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at //localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

   ┌─────────────────────────────────────────────────┐
   │                                                 │
   │   ◈ Server now ready on http://localhost:8888   │
   │                                                 │
   └─────────────────────────────────────────────────┘

This running instance supports live reload. Changes you make to files should be automatically updated in your running instance.

Some files may not be supported for live reload. If you are not automatically seeing your changes live you may need to restart the server. You can restart the server by pressing 'ctrl-c' and running netlify dev again.

Project directory structure

├── [archetypes]- Directory where you define the content, tags, categories, etc.
├── [content] - Directory that contains the content of the site.
├── [assets] - Directory that contains stylesheets.
├── [src] - Directory that contains Javascript.
├── [i18n] - Directory that contains Language Support.
├── [layouts] - Directory that contains Go HTML/template library used to template and format the site.
├── [public] - (Doesn't exist until generated) Directory that contains the generated content for the site.  Should be part of your git.ignore file.
├── [static] - Directory for any static files to be compiled into the web site (fav icons, etc.).
├── Makefile
├── config.toml - Main configuration file, where you define the web site title, URL, language, etc.
├── README.adoc (This file)

support-how-to's People

Contributors

anamcd-lab avatar asmita32675 avatar cal27279 avatar catlook avatar chesshacker avatar chri2547 avatar csilva235 avatar cyrichardson avatar dependabot[bot] avatar hikarutilmitt avatar inflatador avatar jrgarval avatar kylelaffoon avatar lfielder avatar maevegoetz avatar man-chung avatar meker12 avatar nimbinatus avatar rackerkate avatar rackerrnorwood avatar reneerendon avatar robb-romans avatar rohi2305 avatar ssalinas24 avatar sterling463 avatar tekwrit avatar toosalgado18 avatar viridaria avatar williamloy avatar wstubbs12 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

support-how-to's Issues

Bug: Button size not consistent

The buttons seem to have changed to be sized based on the length of the text inside rather than a static width:

production:
Screen Shot 2020-08-13 at 4 04 58 PM

test:
Screen Shot 2020-08-13 at 4 05 03 PM

Bug: Text is clickable rather than button

The buttons are not actually clickable items, it's the text inside the button that's active as a link. On the live site, you can click anywhere in the button and activate the link, but in testing you have to click directly on the text inside the button.

Bug: Numbered lists in FAQ breaks format

There seems to be an existing issue with numbered lists (#35) but it is breaking the formatting of the FAQ questions:

Screen Shot 2020-08-18 at 8 13 32 AM

If you open the "How do I view my invoice" question, you can see that the exposed steps are meant to be a numbered list, so they are both not numbered and not indented correctly:
Screen Shot 2020-08-18 at 8 13 49 AM

Bug: selected vs hover state

Maybe this is by design, but a tab that I hover over becomes the same color as the selected tab. I find this confusing, it looks like a bug to me (but it may be the way it's designed).

Screen Shot 2020-08-13 at 1 15 52 PM

Mobile accordion menu

support.rackspace.com/how-to on the legacy site uses an accordion style menu that I believe is easier to navigate than the chosen mobile layout on the netlify site.

I recommend using the accordion style menu.

Update and test new feedback widget link

Update and test new feedback widget link

<!--BEGIN QUALTRICS WEBSITE FEEDBACK SNIPPET-->
<script type='text/javascript'>
(function(){var g=function(e,h,f,g){
this.get=function(a){for(var a=a+"=",c=document.cookie.split(";"),b=0,e=c.length;b<e;b++){for(var d=c[b];" "==d.charAt(0);)d=d.substring(1,d.length);if(0==d.indexOf(a))return d.substring(a.length,d.length)}return null};
this.set=function(a,c){var b="",b=new Date;b.setTime(b.getTime()+6048E5);b="; expires="+b.toGMTString();document.cookie=a+"="+c+b+"; path=/; "};
this.check=function(){var a=this.get(f);if(a)a=a.split(":");else if(100!=e)"v"==h&&(e=Math.random()>=e/100?0:100),a=[h,e,0],this.set(f,a.join(":"));else return!0;var c=a[1];if(100==c)return!0;switch(a[0]){case "v":return!1;case "r":return c=a[2]%Math.floor(100/c),a[2]++,this.set(f,a.join(":")),!c}return!0};
this.go=function(){if(this.check()){var a=document.createElement("script");a.type="text/javascript";a.src=g;document.body&&document.body.appendChild(a)}};
this.start=function(){var t=this;"complete"!==document.readyState?window.addEventListener?window.addEventListener("load",function(){t.go()},!1):window.attachEvent&&window.attachEvent("onload",function(){t.go()}):t.go()};};
try{(new g(100,"r","QSI_S_ZN_7WEcCqVEECKBeIt","https://zn7weccqveeckbeit-rackspaceinc.siteintercept.qualtrics.com/SIE/?Q_ZID=ZN_7WEcCqVEECKBeIt")).start()}catch(i){}})();
</script><div id='ZN_7WEcCqVEECKBeIt'><!--DO NOT REMOVE-CONTENTS PLACED HERE--></div>
<!--END WEBSITE FEEDBACK SNIPPET-->

Prepend Rackspace site to Google search query

Prepend appropriate site string such as site:docs.rackspace.comto the search query, so that results in our site are favored. (or other appropriate method to the implementation)

Legacy site:
image

This testing site:
image

Public google.com search page with site:support.rackspace.com vlanas the search query:
image

Bug: No FAQ collapsable questions

The questions on the FAQ page are meant to be expandable and they aren't rendering that way. I believe it's set to have h4 headers activate the styling.

production:
Screen Shot 2020-08-13 at 3 57 07 PM

testing:
Screen Shot 2020-08-13 at 3 57 13 PM

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.