harunpehlivan
3/11/2018 - 12:53 PM
Documentation Page
Documentation Page
<link href="https://rawgit.com/bomholtm/fcc-portfolio/master/_assets/css/bootstrap400beta2.min.css" rel="stylesheet" />
body
font-family: "Roboto", sans-serif
button:focus, a:focus
outline: 0
text-decoration: none
.navbar
border-bottom: 0.0625rem solid #F5EEFE
background-color: #FFF
box-shadow: 0 0.25rem 0.3125rem 0 rgba(116, 76, 158, 0.07), 0 0.0625rem 0.625rem 0 rgba(157, 124, 191, 0.06), 0 0.125rem 0.25rem -0.0625rem rgba(157, 124, 191, 0.1)
.navbar-brand
img
height: 2rem
width: 2rem
h1
color: #26202C
font-size: 1.5rem
font-weight: 500
padding: 0
margin: 0
span
color: rgba(0, 0, 0, 0.7)
font-weight: 300
.navbar-toggler
color: #9D7CBF
padding: 0
.navbar-icons
a
color: #9D7CBF
margin: 0 0 0 1.5rem
&:hover
color: #744D9E
.disabled
color: #868E96
text-decoration: none
margin: 0 0.75rem 0 0
&:hover
color: #868E96
.navbar-nav
padding-bottom: 1rem
@media (min-width: 768px)
padding: 0
.nav-item
padding: 0.0625rem 0
.nav-link, .dropdown-menu .dropdown-item
color: rgba(0, 0, 0, 0.7)
display: inline-block
width: inherit
font-size: 0.875rem
padding: 0 0.1875rem
text-decoration: none
&:hover
background-color: #E0D6EB
text-decoration: none
&:focus
background-color: transparent
text-decoration: none
.header
color: #9D7CBF
font-size: 0.875rem
display: block
text-transform: uppercase
letter-spacing: 0.0625rem
margin: 1.125rem 0 0.375rem 0
&:hover
text-decoration: none
#alt-navbar
.dropdown-toggle:after
vertical-align: middle
.dropdown-menu
border: none
padding: 0
margin: 0
ul
list-style: none
padding: 0 0.1875rem
li
padding: 0.0625rem
.dropdown-item.active
background-color: transparent
font-weight: 500
&:before
color: #9D7CBF
content: "• "
#navbar
background-color: #F6F3F8
position: fixed
width: 17.5rem
overflow-y: auto
z-index: 1
height: 100vh
ul
padding: 4rem 1.125rem 1.125rem
.nav-link.active
background-color: transparent
font-weight: 500
&:before
color: #9D7CBF
content: "• "
#main-doc
color: #3D3347
flex-basis: 100%
padding-top: 5rem
z-index: 2
background-color: #FFF
@media (min-width: 768px)
margin-left: 16rem
border-left: 0.0625rem solid #EDE7F1
section
padding: 1rem
@media (min-width: 768px)
padding: 1rem 10%
h1
font-size: 1.75rem
font-weight: 500
margin-bottom: 1rem
h2
font-size: 1.25rem
font-weight: 600
margin: 1.75rem 0 1rem 0
ol
padding: 0 0 0 1.25rem
a
color: inherit
text-decoration: none
transition: all 100ms cubic-bezier(0.4, 0, 0.2, 1)
border-bottom: 0.0625rem solid #E0D6EB
box-shadow: inset 0 -0.0625rem 0 0 #E0D6EB
font-weight: 600
&:hover
background-color: #E0D6EB
.code
background-color: #FCF6F0
border-radius: 0.1875rem
width: fit-content
padding: 1rem
margin: 1rem 0
code
color: inherit
font-family: "Roboto Mono", monospace
font-size: 0.875rem
background-color: #FCF6F0
border-radius: 0.1875rem
.purple
color: #B3568B
.blue
color: #538EB6
.green
color: #6F8F39
.empty
padding-bottom: 7.5rem!important
footer
height: 42px
color: #C8B5D4
background-color: #EDE7F1
font-weight: 500
width: 100%
text-align: center
a
color: #C8B5D4
line-height: 2.625rem
position: relative
top: 0.125rem
&:focus, &:hover, &:visited
color: #C8B5D4
text-decoration: none
.fa-lg
vertical-align: text-top
margin-right: 0.25rem
<script src="https://rawgit.com/bomholtm/fcc-portfolio/master/_assets/js/jquery321.min.js"></script>
<script src="https://rawgit.com/bomholtm/fcc-portfolio/master/_assets/js/propper1123.min.js"></script>
<script src="https://rawgit.com/bomholtm/fcc-portfolio/master/_assets/js/bootstrap400beta.min.js"></script>
const projectName = "technical-docs-page";
localStorage.setItem("example_project", "Technical Docs Page");
$(function(){
$("a[href*='#']:not([href='#'])").click(function(){
if(location.pathname.replace(/^\//,"") == this.pathname.replace(/^\//,"") && location.hostname == this.hostname){
var target = $(this.hash);
target = target.length ? target : $("[name=" + this.hash.slice(1) +"]");
if (target.length){
$("html, body").animate({
scrollTop: target.offset().top - 80
}, 1000);
return false;
}
}
});
});
$("#quickStartDropdown").click(function(){
$("#referenceDropdown").dropdown("toggle");
$("#contributingDropdown").dropdown("toggle");
});
$("#referenceDropdown").click(function(){
$("#quickStartDropdown").dropdown("toggle");
$("#contributingDropdown").dropdown("toggle");
});
$("#contributingDropdown").click(function(){
$("#quickStartDropdown").dropdown("toggle");
$("#referenceDropdown").dropdown("toggle");
});
$(".dropdown-item").click(function(){
$(".navbar-collapse").collapse("hide");
});
$("body").scrollspy({
target: ".navbar",
offset: 80
});
<nav class="navbar navbar-expand-md fixed-top">
<a class="navbar-brand" href="#">
<img src="https://rawgit.com/bomholtm/fcc/master/_assets/CODEPEN/documentation_page/gatsby.svg" class="d-inline-block align-middle" alt="">
<h1 class="d-inline-block align-middle">Gatsby <span class="d-none d-md-inline-block">Documentation</span><span class="d-md-none">Docs</span></h1>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#alt-navbar" aria-controls="alt-navbar" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars fa-lg"></i>
</button>
<div class="collapse navbar-collapse" id="alt-navbar">
<ul class="navbar-nav mr-auto d-md-none">
<li class="nav-item dropdown show">
<a class="header dropdown-toggle" href="#" id="quickStartDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">quick start</a>
<div class="dropdown-menu show" aria-labelledby="quickStartDropdown">
<ul>
<li>
<a class="dropdown-item" href="#Getting_Started">Getting Started</a>
</li>
<li>
<a class="dropdown-item" href="#Migrating_from_v0_to_v1">Migrating from v0 to v1</a>
</li>
<li>
<a class="dropdown-item" href="#Building_with_Components">Building with Components</a>
</li>
<li>
<a class="dropdown-item" href="#Querying_with_GraphQL">Querying with GraphQL</a>
</li>
<li>
<a class="dropdown-item" href="#Lifecycle_APIs">Lifecycle APIs</a>
</li>
<li>
<a class="dropdown-item" href="#Deploying">Deploying</a>
</li>
<li>
<a class="dropdown-item" href="#Starters">Starters</a>
</li>
<li>
<a class="dropdown-item" href="#Plugins">Plugins</a>
</li>
<li>
<a class="dropdown-item" href="#PRPL_Pattern">PRPL Pattern</a>
</li>
<li>
<a class="dropdown-item" href="#Gatsby_on_Windows">Gatsby on Windows</a>
</li>
</ul>
</div>
</li>
<li class="nav-item dropdown">
<a class="header dropdown-toggle" href="#" id="referenceDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">reference</a>
<div class="dropdown-menu" aria-labelledby="referenceDropdown">
<ul>
<li>
<a class="dropdown-item" href="#Node_Interface">Node Interface</a>
</li>
<li>
<a class="dropdown-item" href="#API_Specification">API Specification</a>
</li>
<li>
<a class="dropdown-item" href="#Bound_Action_Creators">Bound Action Creators</a>
</li>
<li>
<a class="dropdown-item" href="#Gatsby_Browser_APIs">Gatsby Browser APIs</a>
</li>
<li>
<a class="dropdown-item" href="#Gatsby_Node_APIs">Gatsby Node APIs</a>
</li>
<li>
<a class="dropdown-item" href="#Gatsby_SSR_APIs">Gatsby SSR APIs</a>
</li>
</ul>
</div>
</li>
<li class="nav-item dropdown">
<a class="header dropdown-toggle" href="#" id="contributingDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">contributing</a>
<div class="dropdown-menu" aria-labelledby="contributingDropdown">
<ul>
<li>
<a class="dropdown-item" href="#How_to_Contribute">How to Contribute</a>
</li>
<li>
<a class="dropdown-item" href="#Gatsby_Style_Guide">Gatsby Style Guide</a>
</li>
<li>
<a class="dropdown-item" href="#Design_Principles">Design Principles</a>
</li>
</ul>
</div>
</li>
</ul>
<span class="navbar-icons ml-auto d-none d-md-flex">
<div class="dropdown">
<a class="dropdown-toggle disabled" href="#" id="versionDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Version 1.0</a>
<div id="test" class="dropdown-menu dropdown-menu-right" aria-labelledby="versionDropdown">
<a class="dropdown-item" href="#">Latest (1.x)</a>
<a class="dropdown-item" href="#">Version 0</a>
</div>
</div>
<a href="https://github.com/gatsbyjs/gatsby" target="_blank" rel="noopener noreferrer">
<i class="fa fa-github fa-lg"></i>
</a>
<a href="https://stackoverflow.com/questions/tagged/gatsby" target="_blank" rel="noopener noreferrer">
<i class="fa fa-stack-overflow fa-lg"></i>
</a>
<a href="https://twitter.com/gatsbyjs" target="_blank" rel="noopener noreferrer">
<i class="fa fa-twitter fa-lg"></i>
</a>
</span>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<nav class="navbar d-none d-md-block" id="navbar">
<header class="d-none"></header>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<span class="header">quick start</span>
</li>
<li class="nav-item">
<a class="nav-link" href="#Getting_Started">Getting Started</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Migrating_from_v0_to_v1">Migrating from v0 to v1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Building_with_Components">Building with Components</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Querying_with_GraphQL">Querying with GraphQL</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Lifecycle_APIs">Lifecycle APIs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Deploying">Deploying</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Starters">Starters</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Plugins">Plugins</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#PRPL_Pattern">PRPL Pattern</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Gatsby_on_Windows">Gatsby on Windows</a>
</li>
<li class="nav-item">
<span class="header">reference</span>
</li>
<li class="nav-item">
<a class="nav-link" href="#Node_Interface">Node Interface</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#API_Specification">API Specification</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Bound_Action_Creators">Bound Action Creators</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Gatsby_Browser_APIs">Gatsby Browser APIs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Gatsby_Node_APIs">Gatsby Node APIs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Gatsby_SSR_APIs">Gatsby SSR APIs</a>
</li>
<li class="nav-item">
<span class="header">contributing</span>
</li>
<li class="nav-item">
<a class="nav-link" href="#How_to_Contribute">How to Contribute</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Gatsby_Style_Guide">Gatsby Style Guide</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Design_Principles">Design Principles</a>
</li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="Getting_Started">
<header><h1>Getting Started</h1></header>
<p>Gatsby is a blazing-fast static site generator for React.</p>
<h2>Install Gatsby's command line tool</h2>
<p><code>npm install --global gatsby-cli</code></p>
<h2>Using the Gatsby CLI</h2>
<ol>
<li>Create a new site. <code>gatsby new gatsby-site</code></li>
<li><code>cd gatsby-site</code></li>
<li><code>gatsby develop</code> will start a hot-reloading development environment accessible at <code>localhost:8000</code></li>
<li>Try editing the javascript pages in <code>src/pages</code>. Saved changes will live reload in the browser.</li>
<li><code>gatsby build</code> will perform an optimized production build for your site generating static HTML and per-route JavaScript code bundles.</li>
<li><code>gatsby serve</code> starts a local HTML server for testing your built site.</li>
</ol>
<h2>Using other starters</h2>
<p>Running <code>gatsby new</code> installs the default Gatsby starter. There are <a href="#Starters">many other official and community starters</a> you can use to kickstart building your Gatsby site.</p>
<h2>Work through the tutorial</h2>
<p>It walks you through building a Gatsby site from scratch to a finished polished site. <a href="https://www.gatsbyjs.org/tutorial/" target="_blank" rel="noopener noreferrer">Go to the tutorial</a>.</p>
</section>
<section class="main-section" id="Migrating_from_v0_to_v1">
<header><h1>Migrating from v0 to v1</h1></header>
<h2>Move source directories (pages, components, utils, etc.) under <code>src</code></h2>
<p><a href="https://github.com/gatsbyjs/gatsby/issues/814" target="_blank" rel="noopener noreferrer">We moved site source files under a “src” directory</a> to cleanly separate them from config/data/build folders so to make integration with various JavaScript tooling (e.g. <a href="https://github.com/prettier/prettier" target="_blank" rel="noopener noreferrer">Prettier</a>) simpler.</p>
<p>Everything related to webpack, loaders, Babel, React should work nearly identically under v1 of Gatsby compared to v0 so this part of the migration is super easy.</p>
<div class="code">
<code><span class="purple">mkdir</span> src</code><br>
<code><span class="purple">git mv</span> pages src</code><br>
<code><span class="purple">git mv</span> components src</code><br>
<code><span class="purple">git mv</span> utils src</code><br>
<code>...</code><br>
</div>
<h2>Replace react-router’s Link component with gatsby-link</h2>
<p><code>gatsby-link</code> is a wrapper for the <code><Link></code> component in react-router. It automatically prefixes urls and handles prefetching. Add <code>gatsby-link</code> to your project by running:</p>
<p><code>npm install --save gatsby-link</code></p>
<p><code>gatsby-link</code> auto-detects whether to use a plain <code><Link></code> or <code><NavLink></code> based on what props you pass it. There’s no need to wrap <code><IndexLink></code> because it was dropped in react-router v4 in favor of the <code>exact</code> prop.</p>
<div class="code">
<code><span class="blue">import</span> Link <span class=" blue">from</span> <span class="purple">'gatsby-link'</span></code><br><br>
<code><span class="green">// Equivalent to react-router's <Link></span></code><br>
<code><<span class="blue">Link</span> <span class="purple">to</span>="<span class="blue">/page-2/</span>">Page <span class="blue">2</span></<span class="blue">Link</span>></code><br><br>
<code><span class="green">// Equivalent to react-router's <NavLink></span></code><br>
<code><<span class="blue">Link</span> <span class="purple">to</span>="<span class="blue">/page-2/</span>" <span class="purple">activeClassName</span>="<span class="blue">selected</span>">Page <span class="blue">2</span></<span class="blue">Link</span>></code><br><br>
<code><span class="green">// `exact` prop replaces <IndexLink> from react-router v3</span></code><br>
<code><<span class="blue">Link</span> <span class="purple">to</span>="<span class="blue">/</span>" <span class="purple">exact</span>>Home</<span class="blue">Link</span>></code><br>
</div>
<p>Prefixing links is also now handled automatically by our new <code><Link></code> component so remove usages of <code>prefixLink</code> in links.</p>
<p>Use <code>gatsby-link</code> everywhere and things will Just Work™.</p>
</section>
<section class="main-section empty" id="Building_with_Components">
<header><h1>Building with Components</h1></header>
<a href="https://www.gatsbyjs.org/docs/building-with-components/" target="_blank" rel="noopener noreferrer">https://www.gatsbyjs.org/docs/building-with-components/</a>
</section>
<section class="main-section empty" id="Querying_with_GraphQL">
<header><h1>Querying with GraphQL</h1></header>
<a href="https://www.gatsbyjs.org/docs/querying-with-graphql/" target="_blank" rel="noopener noreferrer">https://www.gatsbyjs.org/docs/querying-with-graphql/</a>
</section>
<section class="main-section empty" id="Lifecycle_APIs">
<header><h1>Lifecycle APIs</h1></header>
<a href="https://www.gatsbyjs.org/docs/gatsby-lifecycle-apis/" target="_blank" rel="noopener noreferrer">https://www.gatsbyjs.org/docs/gatsby-lifecycle-apis/</a>
</section>
<section class="main-section empty" id="Deploying">
<header><h1>Deploying</h1></header>
<a href="https://www.gatsbyjs.org/docs/deploy-gatsby/" target="_blank" rel="noopener noreferrer">https://www.gatsbyjs.org/docs/deploy-gatsby/</a>
</section>
<section class="main-section empty" id="Starters">
<header><h1>Starters</h1></header>
<a href="https://www.gatsbyjs.org/docs/gatsby-starters/" target="_blank" rel="noopener noreferrer">https://www.gatsbyjs.org/docs/gatsby-starters/</a>
</section>
<section class="main-section empty" id="Plugins">
<header><h1>Plugins</h1></header>
<a href="https://www.gatsbyjs.org/docs/plugins/" target="_blank" rel="noopener noreferrer">https://www.gatsbyjs.org/docs/plugins/</a>
</section>
<section class="main-section empty" id="PRPL_Pattern">
<header><h1>PRPL Pattern</h1></header>
<a href="https://www.gatsbyjs.org/docs/prpl-pattern/" target="_blank" rel="noopener noreferrer">https://www.gatsbyjs.org/docs/prpl-pattern/</a>
</section>
<section class="main-section empty" id="Gatsby_on_Windows">
<header><h1>Gatsby on Windows</h1></header>
<a href="https://www.gatsbyjs.org/docs/gatsby-on-windows/" target="_blank" rel="noopener noreferrer">https://www.gatsbyjs.org/docs/gatsby-on-windows/</a>
</section>
<section class="main-section empty" id="Node_Interface">
<header><h1>Node Interface</h1></header>
<a href="https://www.gatsbyjs.org/docs/node-interface/" target="_blank" rel="noopener noreferrer">https://www.gatsbyjs.org/docs/node-interface/</a>
</section>
<section class="main-section empty" id="API_Specification">
<header><h1>API Specification</h1></header>
<a href="https://www.gatsbyjs.org/docs/api-specification/" target="_blank" rel="noopener noreferrer">https://www.gatsbyjs.org/docs/api-specification/</a>
</section>
<section class="main-section empty" id="Bound_Action_Creators">
<header><h1>Bound Action Creators</h1></header>
<a href="https://www.gatsbyjs.org/docs/bound-action-creators/" target="_blank" rel="noopener noreferrer">https://www.gatsbyjs.org/docs/bound-action-creators/</a>
</section>
<section class="main-section empty" id="Gatsby_Browser_APIs">
<header><h1>Gatsby Browser APIs</h1></header>
<a href="https://www.gatsbyjs.org/docs/browser-apis/" target="_blank" rel="noopener noreferrer">https://www.gatsbyjs.org/docs/browser-apis/</a>
</section>
<section class="main-section empty" id="Gatsby_Node_APIs">
<header><h1>Gatsby Node APIs</h1></header>
<a href="https://www.gatsbyjs.org/docs/node-apis/" target="_blank" rel="noopener noreferrer">https://www.gatsbyjs.org/docs/node-apis/</a>
</section>
<section class="main-section empty" id="Gatsby_SSR_APIs">
<header><h1>Gatsby SSR APIs</h1></header>
<a href="https://www.gatsbyjs.org/docs/ssr-apis/" target="_blank" rel="noopener noreferrer">https://www.gatsbyjs.org/docs/ssr-apis/</a>
</section>
<section class="main-section empty" id="How_to_Contribute">
<header><h1>How to Contribute</h1></header>
<a href="https://www.gatsbyjs.org/docs/how-to-contribute/" target="_blank" rel="noopener noreferrer">https://www.gatsbyjs.org/docs/how-to-contribute/</a>
</section>
<section class="main-section empty" id="Gatsby_Style_Guide">
<header><h1>Gatsby Style Guide</h1></header>
<a href="https://www.gatsbyjs.org/docs/gatsby-style-guide/" target="_blank" rel="noopener noreferrer">https://www.gatsbyjs.org/docs/gatsby-style-guide/</a>
</section>
<section class="main-section empty" id="Design_Principles">
<header><h1>Design Principles</h1></header>
<a href="https://www.gatsbyjs.org/docs/design-principles/" target="_blank" rel="noopener noreferrer">https://www.gatsbyjs.org/docs/design-principles/</a>
</section>
<footer>
<a href="https://github.com/bomholtm/fcc" target="_blank" rel="noopener noreferrer"><i class="fa fa-github-alt fa-lg"></i> bomholtm / fcc</a>
</footer>
</main>
</div>
</div>
Documentation Page
freeCodeCamp beta
Build a Technical Documentation Page
A Pen by HARUN PEHLİVAN on CodePen.