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

This commit is contained in:
Mrugesh Mohapatra
2020-04-21 06:56:45 +05:30
committed by GitHub
parent 0541506488
commit 3c81587924
7 changed files with 140 additions and 209 deletions

View File

@ -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)

View File

@ -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 work on coding challenges](/how-to-work-on-coding-challenges)
- [How to setup freeCodeCamp locally](/how-to-setup-freecodecamp-locally) - [How to setup freeCodeCamp locally](/how-to-setup-freecodecamp-locally)
- [How to open a pull request](/how-to-open-a-pull-request) - [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 news theme](/how-to-work-on-the-news-theme)
- [How to work on the docs theme](/how-to-work-on-the-docs-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) - [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 - Provision API Instances](/flight-manuals/02-spinning-api-instances.md)
- [02 - Using Reply Templates](/flight-manuals/03-using-reply-templates.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)

View File

@ -9,22 +9,14 @@
body { body {
font-size: 100%; font-size: 100%;
line-height: 1.5; line-height: 2em;
color: var(--text-color-base); color: var(--text-color);
} }
* { * {
text-decoration: none !important; text-decoration: none !important;
} }
a {
transition: all 0.3s linear;
}
.github-corner {
z-index: 5;
}
/****** Universal Nav ****/ /****** Universal Nav ****/
.universal-nav { .universal-nav {
@ -52,26 +44,14 @@ a {
margin-right: 0px; margin-right: 0px;
} }
.sidebar-toggle,
.sidebar,
.content {
margin-top: 38px;
}
.sidebar {
padding: 0px;
}
/****** Cover Page ******/ /****** Cover Page ******/
section.cover { section.cover {
padding-bottom: 112px; /* fixed footer (Netflix) height */ padding-bottom: 112px;
height: auto; height: auto;
min-height: 100vh; 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 { section.cover .cover-main {
@ -93,24 +73,53 @@ section.cover h1 {
section.cover blockquote, section.cover blockquote,
section.cover blockquote p { 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 { section.cover ul {
font-size: 1.25rem; font-size: 1.5rem;
line-height: 2rem; line-height: 2rem;
display: grid; display: grid;
text-align: left; text-align: left;
grid-column-gap: 16px; grid-column-gap: 16px;
grid-row-gap: 20px; grid-row-gap: 20px;
grid-template-columns: repeat(2, 50%);
list-style: none; list-style: none;
max-width: unset; max-width: unset;
margin: 1.5em 0; 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, section.cover.show ~ .sidebar,
@ -118,88 +127,6 @@ section.cover.show ~ .sidebar-toggle {
display: none; 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) { @media (max-width: 850px) {
section.cover ul { section.cover ul {
grid-template-columns: 100%; grid-template-columns: 100%;
@ -232,6 +159,17 @@ section.cover.show ~ .sidebar-toggle {
} }
/****** Sidebar Toggle ******/ /****** Sidebar Toggle ******/
.sidebar-toggle,
.sidebar,
.content {
margin-top: 38px;
}
.sidebar {
padding: 0px;
}
.sidebar-toggle { .sidebar-toggle {
cursor: pointer; cursor: pointer;
} }
@ -303,14 +241,25 @@ body.close .github-corner {
} }
/****** Markdown General ******/ /****** 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 { .markdown-section a {
text-decoration: none; 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 { .markdown-section a:hover {
@ -322,48 +271,22 @@ body.close .github-corner {
border: none; 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, .markdown-section em,

View File

@ -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: 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. > 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 ### 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. 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.

View File

@ -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:** **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> 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/)) 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` 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) ![GIF - How to fork freeCodeCamp on GitHub](./images/github/how-to-fork-freeCodeCamp.gif)

View File

@ -24,12 +24,14 @@
+ 'Since 2015, 40,000 graduates have gotten jobs at tech ' + 'Since 2015, 40,000 graduates have gotten jobs at tech '
+ 'companies including Google, Apple, Amazon, and Microsoft.' } name='twitter:description' /> + 'companies including Google, Apple, Amazon, and Microsoft.' } name='twitter:description' />
<!-- Theme --> <!-- Theme -->
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css"> --> <!-- <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"> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css">
<!-- Custom theme stylesheet --> <!-- Custom theme stylesheet -->
<link rel="stylesheet" href="components/theme.css"> <link rel="stylesheet" href="components/theme.css">
<script src="https://kit.fontawesome.com/4b366379be.js" crossorigin="anonymous"></script>
</head> </head>
<body> <body>
@ -46,10 +48,8 @@
loadSidebar: 'components/sidebar.md', loadSidebar: 'components/sidebar.md',
// Cover Page // Cover Page
/*
coverpage: 'components/cover.md', coverpage: 'components/cover.md',
onlyCover: true, onlyCover: true,
*/
// Navigation // Navigation
auto2top: true, auto2top: true,
@ -77,6 +77,22 @@
tag: 'remote-markdown-url', 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> </script>

View File

@ -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. 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] > [!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. > 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. 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. 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 ### Coding Challenges
All our coding challenges are curated by the community, bringing in expert knowledge from volunteers like you. 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: 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) | | Mrugesh Mohapatra | [@raisedadead](https://gitter.im/raisedadead) | [@raisedadead](https://twitter.com/raisedadead) |
| Ahmad Abdolsaheb | [@ahmadabdolsaheb](https://gitter.im/ahmadabdolsaheb) | [@Abdolsaheb](https://twitter.com/Abdolsaheb) | | Ahmad Abdolsaheb | [@ahmadabdolsaheb](https://gitter.im/ahmadabdolsaheb) | [@Abdolsaheb](https://twitter.com/Abdolsaheb) |
| Kristofer Koishigawa | [@scissorsneedfoodtoo](https://gitter.im/scissorsneedfoodtoo) | [@kriskoishigawa](https://twitter.com/kriskoishigawa) | | Kristofer Koishigawa | [@scissorsneedfoodtoo](https://gitter.im/scissorsneedfoodtoo) | [@kriskoishigawa](https://twitter.com/kriskoishigawa) |