feat(docs): jazz up the docs site (#38594)

docs/components/cover.md

@@ -1,11 +1,12 @@
-<!-- _coverpage.md -->
+> ## Contribute to freeCodeCamp.org
 
-# ![logo](/components/logo.svg)
+## This community is possible thanks to thousands of kind volunteers like you.
 
-# Contribute to the freeCodeCamp.org
+## Here are some quick and fun ways you can help the community.
 
-> This community is possible thanks to thousands of kind volunteers like you.
+- <span class='cover-icon' style="color: #002ead;"><i class="fad fa-question-circle"></i></span> [Help by answering coding questions](https://www.freecodecamp.org/forum/?max_posts=1) on our community forum.
+- <span class='cover-icon' style="color: #00471b;"><i class="fad fa-comments-alt"></i></span> [Give feedback on coding projects](https://www.freecodecamp.org/forum/c/project-feedback?max_posts=1) built by campers.
+- <span class='cover-icon' style="color: #c4302b;"><i class="fab fa-youtube"></i></span> [Help us add subtitles (closed captions)](https://www.youtube.com/freecodecamp) to our YouTube channel videos.
+- <span class='cover-icon' style="color: #000000;"><i class="fab fa-github"></i></span> [Contribute to our open source codebase](#contribute-to-our-open-source-codebase) on GitHub.
 
-[Start contributing](/readme)
+[Read our contributing guidelines](/index.md)
-
-![color](#ffffff)

docs/components/sidebar.md

@@ -1,19 +1,19 @@
-- **Overview**
+- **<i class="fad fa-hourglass-start"></i> Getting Started**
-- [Introduction](/ 'Contribute to the freeCodeCamp.org Community')
+  - [Introduction](/index.md 'Contribute to the freeCodeCamp.org Community')
-- **Code Contribution Guides**
+- **<i class="fad fa-code"></i> Code Contribution Guides**
   - [How to work on coding challenges](/how-to-work-on-coding-challenges)
   - [How to setup freeCodeCamp locally](/how-to-setup-freecodecamp-locally)
   - [How to open a pull request](/how-to-open-a-pull-request)
   - [How to work on the news theme](/how-to-work-on-the-news-theme)
   - [How to work on the docs theme](/how-to-work-on-the-docs-theme)
-- **DevOps Guides**
+- **<i class="fad fa-laptop-code"></i> DevOps Guides**
-- [Overview and Workflows](/devops.md)
+  - [How we build, test and deploy](/devops.md)
-- **Flight Manuals (for Staff & Mods)**
+- **<i class="fad fa-plane-alt"></i> Flight Manuals (for Staff & Mods)**
   - [01 - List Virtual Machines](/flight-manuals/01-getting-list-of-virtual-machines.md)
   - [02 - Provision API Instances](/flight-manuals/02-spinning-api-instances.md)
   - [02 - Using Reply Templates](/flight-manuals/03-using-reply-templates.md)
 ----
-- **Community**
+- **<i class="fad fa-user-friends"></i> Our Community**
-- [GitHub Repository](https://github.com/freecodecamp/freecodecamp)
+  - [**<i class="fab fa-github"></i> GitHub Repository**](https://github.com/freecodecamp/freecodecamp)
-- [Contributors category on Forum](https://freecodecamp.org/forum/c/contributors)
+  - [**<i class="fab fa-discourse"></i> Contributors category on Forum**](https://freecodecamp.org/forum/c/contributors)
-- [Chat room for Contributors](https://gitter.im/FreeCodeCamp/Contributors)
+  - [**<i class="fab fa-gitter"></i> Contributors chat room on Gitter**](https://gitter.im/FreeCodeCamp/Contributors)

docs/components/theme.css

@@ -9,22 +9,14 @@
 
 body {
   font-size: 100%;
-  line-height: 1.5;
+  line-height: 2em;
-  color: var(--text-color-base);
+  color: var(--text-color);
 }
 
 * {
   text-decoration: none !important;
 }
 
-a {
-  transition: all 0.3s linear;
-}
-
-.github-corner {
-  z-index: 5;
-}
-
 /****** Universal Nav ****/
 
 .universal-nav {
@@ -52,26 +44,14 @@ a {
   margin-right: 0px;
 }
 
-.sidebar-toggle,
-.sidebar,
-.content {
-  margin-top: 38px;
-}
-
-.sidebar {
-  padding: 0px;
-}
-
 /****** Cover Page ******/
+
 section.cover {
-  padding-bottom: 112px; /* fixed footer (Netflix) height */
+  padding-bottom: 112px;
   height: auto;
   min-height: 100vh;
-  /**
+  background: #ffffff !important;
-   * Intended to defeat this inline style on initial boot that flashes when on page load:
+  color: var(--theme-color);
-   * https://github.com/docsifyjs/docsify/blob/8352a1e489abc2a7b6361fe02d696e1891a031cd/src/core/render/tpl.js#L56-L70
-   */
-  background: #fff !important;
 }
 
 section.cover .cover-main {
@@ -93,24 +73,53 @@ section.cover h1 {
 
 section.cover blockquote,
 section.cover blockquote p {
-  margin: 0;
+  margin: 1.5em 0;
+}
+
+section.cover a {
+  text-decoration: none;
+  border-bottom: 0.01rem solid var(--theme-color);
+  transition: all 0.3s ease;
+}
+
+section.cover a:hover {
+  border-color: var(--theme-color-dark);
+  color: var(--theme-color-dark);
+}
+
+section.cover a.anchor {
+  border: none;
+}
+
+.cover-icon {
+  margin-right: 0.75em;
 }
 
 section.cover ul {
-  font-size: 1.25rem;
+  font-size: 1.5rem;
   line-height: 2rem;
   display: grid;
   text-align: left;
   grid-column-gap: 16px;
   grid-row-gap: 20px;
-  grid-template-columns: repeat(2, 50%);
   list-style: none;
   max-width: unset;
   margin: 1.5em 0;
 }
 
-section.cover ul li {
+section.cover .cover-main > p:last-child a:last-child {
-  white-space: nowrap;
+  font-size: 1.5rem;
+  line-height: 2rem;
+  background-color: var(--theme-color);
+  color: #fff;
+}
+
+section.cover .cover-main > p:last-child a:last-child:hover {
+  font-size: 1.5rem;
+  line-height: 2rem;
+  background-color: var(--theme-color-dark);
+  color: #fff;
+  opacity: 1;
 }
 
 section.cover.show ~ .sidebar,
@@ -118,88 +127,6 @@ section.cover.show ~ .sidebar-toggle {
   display: none;
 }
 
-.cover-main .netflix-logo {
-  position: fixed;
-  display: flex;
-  align-items: center;
-  background: #ffffff;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  padding: 40px;
-  z-index: 5;
-}
-
-.cover-main .netflix-logo .logo {
-  width: 125px;
-  height: 32px;
-  background: url('images/Netflix_Logo.png');
-  background-size: 100%;
-  background-repeat: no-repeat;
-  background-position: center center;
-}
-
-.cover-main .buttons {
-  width: 100%;
-}
-
-.cover-main .buttons a {
-  font-weight: 700;
-  position: relative;
-  display: inline-block;
-  padding: 12px 25px;
-  font-size: 14px;
-  text-align: center;
-  line-height: 18px;
-  color: #221f1f;
-  background: #fff;
-  outline: none;
-  border: none;
-  background-color: #fff;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  cursor: pointer;
-  margin: 0 1rem;
-  color: var(--theme-color);
-  overflow: hidden;
-  transition: color 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
-  vertical-align: baseline;
-  text-transform: uppercase;
-}
-
-.cover-main .buttons a:before,
-.cover-main .buttons a:after {
-  content: '';
-  display: block;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  border: 2px solid var(--theme-color);
-  box-sizing: border-box;
-}
-
-.cover-main .buttons a:after {
-  background: var(--theme-color);
-  transform: translateX(-101%);
-  transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-
-.cover-main .buttons a:hover {
-  color: white;
-  box-shadow: 0 5px 16px rgba(229, 9, 20, 0.3);
-}
-
-.cover-main .buttons a:hover:after {
-  transform: translateX(0);
-}
-
-.cover-main .buttons a span {
-  position: relative;
-  z-index: 1;
-}
-
 @media (max-width: 850px) {
   section.cover ul {
     grid-template-columns: 100%;
@@ -232,6 +159,17 @@ section.cover.show ~ .sidebar-toggle {
 }
 
 /****** Sidebar Toggle ******/
+
+.sidebar-toggle,
+.sidebar,
+.content {
+  margin-top: 38px;
+}
+
+.sidebar {
+  padding: 0px;
+}
+
 .sidebar-toggle {
   cursor: pointer;
 }
@@ -303,14 +241,25 @@ body.close .github-corner {
 }
 
 /****** Markdown General ******/
-.markdown-section {
+
-  padding: 30px 30px 40px;
+.markdown-section p {
+  font-size: 18px;
+  line-height: 28px;
+}
+
+.markdown-section code {
+  background-color: #f8f8f8;
+  color: #525252;
+  padding: 0.05em 0.15em 0.15em 0.15em;
+  margin: 0.05em;
+  font-size: 16px;
+  line-height: 24px;
 }
 
 .markdown-section a {
   text-decoration: none;
-  border-bottom: 0.01rem solid var(--theme-color);
+  color: var(--theme-color);
-  transition: all 0.3s ease;
+  border-bottom: 0.1rem solid var(--theme-color);
 }
 
 .markdown-section a:hover {
@@ -322,48 +271,22 @@ body.close .github-corner {
   border: none;
 }
 
-/****** Markdown Table ******/
+.markdown-section a > code,
-.markdown-section table {
+.markdown-section a > strong > code {
-  display: table;
+  background-color: #f8f8f8;
+  color: #525252;
+  padding: 0.05em 0.15em 0 0.15em;
+  margin: 0.05em;
 }
 
-.markdown-section table tr {
+.markdown-section a > code:hover,
-  border-width: 0.15rem 0;
+.markdown-section a > code:active,
-  border-style: solid;
+.markdown-section a > strong > code:hover,
-  border-color: #f1f1f2;
+.markdown-section a > strong > code:active {
-}
+  background-color: #525252;
-
+  color: #f8f8f8;
-.markdown-section table thead tr {
+  padding: 0.05em 0.15em 0 0.15em;
-  text-transform: uppercase;
+  margin: 0.05em;
-  font-size: 90%;
-  border-top: none;
-}
-
-.markdown-section table tbody tr:last-of-type {
-  border-bottom: none;
-}
-
-.markdown-section table tr:nth-child(2n) {
-  background-color: transparent;
-}
-
-.markdown-section table td,
-.markdown-section table th {
-  border: none;
-  padding: 1.1rem 0.5rem;
-  text-align: left;
-}
-
-.markdown-section table td p {
-  margin: 0;
-}
-
-.markdown-section blockquote {
-  margin: 1em 0;
-}
-
-.markdown-section blockquote > p {
-  font-weight: 500;
 }
 
 .markdown-section em,

docs/devops.md

@@ -196,8 +196,9 @@ We thank you for reporting bugs that you encounter and help in making freeCodeCa
 
 Currently a public beta testing version is available at:
 
-<h1 align="center"><a href='https://www.freecodecamp.dev' _target='blank'><code>www.freecodecamp.dev</code></a></h1>
+<h1 align="center"><a href='https://www.freecodecamp.dev' _target='blank'>freecodecamp.dev</a></h1>
 
+> [!NOTE]
 > The domain name is different than **`freeCodeCamp.org`**. This is intentional to prevent search engine indexing and avoid confusion for regular users of the platform.
 
 ### Identifying the current version of the platforms
@@ -234,4 +235,4 @@ There are some known limitations and tradeoffs when using the beta version of th
 
 Please open fresh issues for discussions and reporting bugs. You can label them as **[`release: next/beta`](https://github.com/freeCodeCamp/freeCodeCamp/labels/release%3A%20next%2Fbeta)** for triage.
 
-You may send an email to `dev@freecodecamp.org` if you have any queries. As always all security vulnerabilities should be reported to `security@freecodecamp.org` instead of the public tracker and forum.
+You may send an email to `dev[at]freecodecamp.org` if you have any queries. As always all security vulnerabilities should be reported to `security[at]freecodecamp.org` instead of the public tracker and forum.

docs/how-to-setup-freecodecamp-locally.md

@@ -18,7 +18,9 @@ This is essential, as it allows you to work on your own copy of freeCodeCamp on
 **Follow these steps to fork the `https://github.com/freeCodeCamp/freeCodeCamp` repository:**
 
 1. Go to the freeCodeCamp repository on GitHub: <https://github.com/freeCodeCamp/freeCodeCamp>
+
 2. Click the "Fork" Button in the upper right-hand corner of the interface ([More Details Here](https://help.github.com/articles/fork-a-repo/))
+
 3. After the repository has been forked, you will be taken to your copy of the freeCodeCamp repository at `https://github.com/YOUR_USER_NAME/freeCodeCamp`
 
 ![GIF - How to fork freeCodeCamp on GitHub](./images/github/how-to-fork-freeCodeCamp.gif)

docs/index.html

@@ -24,12 +24,14 @@
     + 'Since 2015, 40,000 graduates have gotten jobs at tech '
     + 'companies including Google, Apple, Amazon, and Microsoft.' } name='twitter:description' />
 
-
   <!-- Theme -->
   <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css"> -->
   <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css">
   <!-- Custom theme stylesheet -->
   <link rel="stylesheet" href="components/theme.css">
+
+  <script src="https://kit.fontawesome.com/4b366379be.js" crossorigin="anonymous"></script>
+
 </head>
 
 <body>
@@ -46,10 +48,8 @@
       loadSidebar: 'components/sidebar.md',
 
       // Cover Page
-      /*
       coverpage: 'components/cover.md',
       onlyCover: true,
-      */
 
       // Navigation
       auto2top: true,
@@ -77,6 +77,22 @@
         tag: 'remote-markdown-url',
       },
 
+      plugins: [
+        function (hook, vm) {
+          hook.beforeEach(function (html) {
+            var url =
+              'https://github.com/freeCodeCamp/freeCodeCamp/blob/master/docs/' +
+              vm.route.file;
+            var editHtml = '[<i class="far fa-edit"></i> Edit this guide on GitHub](' + url + ')';
+            return (
+              html +
+              '\n----\n' +
+              editHtml
+            );
+          });
+        }
+      ]
+
     }
   </script>
 

docs/index.md

@@ -2,33 +2,21 @@
 
 The [freeCodeCamp.org](https://freecodecamp.org) community is possible thanks to thousands of kind volunteers like you. We welcome any and all contributions to the community and are excited to welcome you aboard.
 
-## Quick and fun ways you can help
-
-You can contribute to any of these:
-
-1. [Help by answering coding questions](https://www.freecodecamp.org/forum/?max_posts=1) on our community forum.
-
-2. [Give feedback on coding projects](https://www.freecodecamp.org/forum/c/project-feedback?max_posts=1) built by campers.
-
-3. [Help us add subtitles (closed captions)](https://www.youtube.com/freecodecamp) to our YouTube channel videos.
-
-4. [Contribute to our open source codebase](#contribute-to-our-open-source-codebase) on GitHub.
-
-   a. Create, update and fix bugs in our [coding challenges](#coding-challenges).
-
-   b. Help us fix bugs in freeCodeCamp.org's [learning platform](#learning-platform).
-
-   c. Help us translate freeCodeCamp.org to world languages.
-
 > [!NOTE]
 > Before you proceed, please take a quick 2 minutes to read our [Code of Conduct](https://www.freecodecamp.org/code-of-conduct). We enforce it strictly across our community. We want contributing to freeCodeCamp.org to be a safe and inclusive experience for everyone.
 
 Happy contributing.
 
-## Contribute to our open source codebase
+## Our open source codebase
 
 Our codebase has thousands of [coding challenges](https://www.freecodecamp.org/learn/) and other source code that power our learning platform.
 
+You are welcome to:
+
+- Create, update and fix bugs in our [coding challenges](#coding-challenges).
+- Help us fix bugs in freeCodeCamp.org's [learning platform](#learning-platform).
+- Help us translate freeCodeCamp.org to world languages.
+
 ### Coding Challenges
 
 All our coding challenges are curated by the community, bringing in expert knowledge from volunteers like you.
@@ -147,8 +135,8 @@ Be polite and patient. Our community of volunteers and moderators are always aro
 
 When in doubt, you can reach out to our platform dev team to help you with this:
 
-| Member               | Send message on Gitter                                          | DM on Twitter                                           |
+| Staff                | Send message on Gitter                                        | DM on Twitter                                         |
-| :------------------- | :-------------------------------------------------------------- | :------------------------------------------------------ |
+| :------------------- | :------------------------------------------------------------ | :---------------------------------------------------- |
 | Mrugesh Mohapatra    | [@raisedadead](https://gitter.im/raisedadead)                 | [@raisedadead](https://twitter.com/raisedadead)       |
 | Ahmad Abdolsaheb     | [@ahmadabdolsaheb](https://gitter.im/ahmadabdolsaheb)         | [@Abdolsaheb](https://twitter.com/Abdolsaheb)         |
 | Kristofer Koishigawa | [@scissorsneedfoodtoo](https://gitter.im/scissorsneedfoodtoo) | [@kriskoishigawa](https://twitter.com/kriskoishigawa) |