documentation

chibicode · Mar 8, 2018 · 6775aac · 6775aac
1 parent 1250bbc
commit 6775aac
Show file tree

Hide file tree

Showing 44 changed files with 673 additions and 439 deletions.
diff --git a/docs/_config.yml b/docs/_config.yml
@@ -13,7 +13,7 @@
 # you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
 # You can create any custom variable you would like, and they will be accessible
 # in the templates via {{ site.myvariable }}.
-title: AWS-Amplify Developer Documentation
+title: AWS Amplify Developer Documentation
 email: [email protected]
 description: >- # this means to ignore newlines until "baseurl:"
   Write an awesome description for your new site here. You can edit this
@@ -59,20 +59,20 @@ amplify:
     color_theme:  # Available themes: blue (default), green, purple, red and yellow
     header:
         logo:
-            text: AWS-Amplify
+            text: AWS Amplify
             image: true
         nav:
             - item_name: Quick Start
               item_url: '/media/quick_start/index.html'
-            - item_name: Developer Guide
+            - item_name: Docs
               item_url: '/media/developer_guide/index.html'
             - item_name: API
               item_url: '/api/index.html'
             - item_name: Community
               item_url: 'https://gitter.im/AWS-Amplify/Lobby/'
             - item_name: Blog
-              item_url: '#sdf'
-            - item_name: Github
+              item_url: '/blog'
+            - item_name: 
               item_icon: github
               item_url: 'https://github.com/aws/aws-amplify'
     footer:
@@ -177,6 +177,13 @@ category_list:
           excerpt: Console logging utility.
           cta: Read more
           url: '/media/logger_guide/index.html'  
+    -  category: CLI
+       title: CLI
+       subs:
+        - title: AWS Mobile CLI
+          excerpt: A CLI to create and manage your app's backend. 
+          cta: Read more
+          url: '/media/cli_guide/index.html'       
 
 defaults:
   -

diff --git a/docs/amplify-theme/_includes/site-footer.html b/docs/amplify-theme/_includes/site-footer.html
@@ -10,11 +10,12 @@
 					{% endif %}
 
 					{% if site.amplify.footer.content.copyright %}
-						<hr>
+				 
 						<p class="site-footer__copyright">
 							{{ site.amplify.footer.content.logo.text }} </br>
 							{{ site.amplify.footer.content.copyright }}
 						</p>
+
 					{% endif %}
 				</div><!-- /.col -->
 				{% if site.amplify.footer.social_list %}
@@ -42,3 +43,13 @@
 <script type="text/javascript" src="{% if jekyll.environment == 'production' %}{{ site.amplify.baseurl }}{% endif %}/amplify-theme/assets/js/scripts.js"></script>
 
 {% include google-analytics.html %}
+
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> 
+<script type="text/javascript"> docsearch({ 
+ apiKey: '0d52a3ea92602545de13731e81c3c7f8', 
+ indexName: 'aws_amplify', 
+ inputSelector: '#search-input', 
+//  algoliaOptions: {"facetFilters":["tags:current"],"hitsPerPage":5},      
+ debug: false // Set debug to true if you want to inspect the dropdown 
+}); 
+</script> 
diff --git a/docs/amplify-theme/_includes/site-head.html b/docs/amplify-theme/_includes/site-head.html
@@ -11,3 +11,4 @@
 <link rel="icon" href="{% if jekyll.environment == 'production' %}{{ site.amplify.baseurl }}{% endif %}/favicon.ico" type="image/x-icon">
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,500,500i,700,700i|Noto+Sans:400,400i,700,700i|Source+Code+Pro&amp;subset=latin-ext">
 <link rel="stylesheet" href="{% if jekyll.environment == 'production' %}{{ site.amplify.baseurl }}{% endif %}/amplify-theme/assets/css/style.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" /> 
diff --git a/docs/amplify-theme/_includes/site-header.html b/docs/amplify-theme/_includes/site-header.html
@@ -34,6 +34,9 @@
 									</a>
 								</li>
 							{% endfor %}
+							<li class="site-search">
+								<a> <input placeholder="Search..." type="text" id='search-input'/> </a>
+							</li>
 						</ul><!-- /.site-header__nav -->
 						<button class="offcanvas-toggle visible-xs">
 							<span></span>

diff --git a/docs/amplify-theme/_layouts/categories.html b/docs/amplify-theme/_layouts/categories.html
@@ -20,7 +20,7 @@
 										<span class="marketing-grid-item">
 											<div class="marketing-grid-content" data-mh>
 												<h1 class="marketing-grid__title"><b>{{ item.title }}</b></h1>
-												<p>{{ item.excerpt }}</p>
+												<h4>{{ item.excerpt }}</h4>
 											</div><!-- /.nav-grid__content -->
 										</span><!-- /.nav-grid__item -->
 									</div><!-- /.col -->

diff --git a/docs/amplify-theme/_layouts/default.html b/docs/amplify-theme/_layouts/default.html
@@ -14,6 +14,18 @@
 						<span class="">Edit this page</span> 
 					</a>				
 				</div>
+
+				{% if site.category_list %}
+						{% for category in site.category_list %}
+							{% for item in category.subs %}
+								{% assign url = page.url | append: "index.html" %}
+								{% if url == item.url  %}
+									{% assign isPageInCategories = true %}	
+								{% endif %}	
+							{% endfor %}
+						{% endfor %}
+				{% endif %}
+
 				<div class="row">
 					<div class="col-md-7">
 						<div class="content">
@@ -24,24 +36,26 @@
 						<div class="sections-list-wrapper">
 							<div class="sections-list js-affix js-scrollspy hidden-xs hidden-sm">
 								<div class="dev-guide">
-									{% if site.category_list %}
+									{% if site.category_list and isPageInCategories %}
 										<ul class="level-1 nav">
 											{% for category in site.category_list %}
 												{% for item in category.subs %}
 													{% assign url = page.url | append: "index.html" %}
 													{% if url == item.url  %}
-														<div class='in-this-page js-sections'>
-															<div class='section-header'>{{ item.title }}</div>
-														</div>	
+														<div class='in-this-page js-sections'></div>
 													{% else %}
-														<li class="section-link" >
+														<li class="section-link">
 															<a href="{{ item.url }}">{{ item.title }}</a>
 														</li>
 													{% endif %}	
 												{% endfor %}
 											{% endfor %}
 										</ul>
 									{% endif %}
+									{% if isPageInCategories != true  %}
+										<small>In this page</small>
+										<div class='in-this-page js-sections'></div>
+									{% endif %}	
 								</div>						
 							</div><!-- /.sections-list -->
 							<div class='list-all'></div>

diff --git a/docs/amplify-theme/_layouts/homepage.html b/docs/amplify-theme/_layouts/homepage.html
@@ -60,6 +60,11 @@ <h1 class="hero-subheader__title">{{ page.title }}</h1>
 				</div><!-- /.row -->
 			</div><!-- /.container -->
 		</div><!-- /.hero-subheader -->
+		<div class="photo-credit">
+			<span>
+				Photo by <a target="_new" href="https://unsplash.com/@juandinella?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Juan Di Nella</a>
+			</span>
+		</div>
 
 		{% if page.marketing_message%}
 		<div class="section section--darker-theme-color-bg">

diff --git a/docs/amplify-theme/_sass/_variables.scss b/docs/amplify-theme/_sass/_variables.scss
@@ -36,7 +36,7 @@ $color-callout-warning: #fffae9 !default;
 $color-callout-danger: #ffedeb !default;
 
 // Footer
-$color-footer-bg: #f5f5f5 !default;
+$color-footer-bg: white !default;
 $color-footer-copyright: #bdbdbd !default;
 
 // Social list
@@ -50,8 +50,8 @@ $color-theme-red: #FFECE6 !default;
 $color-theme-yellow: #FCFDE8 !default;
 
 /* ----- Font families ----- */
-$font-family-primary: 'Noto Sans', sans-serif !default;
-$font-family-secondary: 'Montserrat', sans-serif !default;
+$font-family-primary: '"Amazon Ember",Arial,sans-serif', sans-serif !default;
+$font-family-secondary: '"Amazon Ember",Arial,sans-serif', sans-serif !default;
 $font-family-monospace: 'Source Code Pro', monospace !default;
 
 /* ----- Font sizes ----- */

diff --git a/docs/amplify-theme/_sass/components/_hero-subheader.scss b/docs/amplify-theme/_sass/components/_hero-subheader.scss
@@ -5,7 +5,6 @@
 /* ----- General ----- */
 .hero-subheader {
 	color: $color-dark-blue;
-	background-color: $color-theme-blue;
 	background-image: url("../images/layout/background.jpg");
 	padding: 3.75rem 0 (4.6875rem - 1.25rem) 0;
 	background-position: center;
@@ -72,3 +71,14 @@
 .hero-subheader__btn-more {
 	color: inherit;
 }
+
+
+.photo-credit {
+    font-size: 10px;
+    bottom: -340px;
+    left: 90%;
+    color: lightgray;
+    margin-top: -30px;
+    text-align: right;
+    padding-right: 30px;
+}
diff --git a/docs/amplify-theme/_sass/components/_nav-grid.scss b/docs/amplify-theme/_sass/components/_nav-grid.scss
@@ -19,7 +19,7 @@
 .nav-grid__item {
 	@include link-reset;
 	display: block;
-	background-color: $color-theme-blue;
+	background-color: white;
 	border: 1px solid rgba($color-dark-blue, .2);
 	border-radius: 3px;
 	margin-bottom: .9375rem;
@@ -32,11 +32,10 @@
 	&:hover,
 	&:active,
 	&:focus {
-		border-color: $color-dark-blue;
+		border-color: orange;
 
 		.nav-grid__btn {
-			border-color: $color-dark-blue;
-
+			border-color: orange;
 			.icon {
 				@include translate(.625rem, 0);
 			}

diff --git a/docs/amplify-theme/_sass/components/_sections-list.scss b/docs/amplify-theme/_sass/components/_sections-list.scss
@@ -26,13 +26,21 @@
 
 /* ----- List ----- */
 .sections-list {
+
+	a.section-head {
+		font-weight: bold;
+		font-size: 17px;
+	}
+
+
 	ul {
 		ul {
 			margin-top: .625rem;
 			margin-bottom: 0;
 		}
 
 		li {
+
 			margin-bottom: .625rem;
 			border-left: 1px solid #eee;
 			transition: border .2s;
@@ -41,15 +49,15 @@
 			padding-left:0px;
 
 			&.active {
-				border-left-color: $color-dark-blue;
+				border-left-color: black;
 			}
 
 			&.section-link {
 				a {
-					padding-left:0px;
+					padding-left:20px;
 				}
 			}
-
+			
 			&.has-submenu {
 				//padding-right: 1.25rem;
 				//font-weight: bold;
@@ -108,6 +116,7 @@
 					text-decoration: underline;
 				}
 			}
+
 		}
 	}
 }

diff --git a/docs/amplify-theme/_sass/components/_site-footer.scss b/docs/amplify-theme/_sass/components/_site-footer.scss
@@ -24,8 +24,9 @@
 
 	img {
 		display: block;
-		width: rem;
-		margin-top:5px;
+		width: 140px;
+		margin-top: 5px;
+		margin-left: -20px;
 	}
 }
 

diff --git a/docs/amplify-theme/_sass/components/_site-header.scss b/docs/amplify-theme/_sass/components/_site-header.scss
@@ -6,10 +6,10 @@
 .site-header {
 	position: fixed;
 	width: 100%;
-	height:  5.625rem;
+	height:  3.5rem;
 	border-bottom: 1px solid rgba($color-dark-blue, .15);
 	z-index:999;
-	background-color:#E8F2FC;
+	background-color:white;
 }
 
 
@@ -19,9 +19,10 @@
 	display: block;
 	float: left;
 	color: $color-dark-blue;
-	font-family: $font-family-secondary;
-	font-size: 1.45em;
-	line-height: 5.625rem;
+	font-family: $font-family-primary;
+	font-size: 1.25em;
+	line-height: 3.625rem;
+	font-weight: 600;
 
 	&:hover,
 	&:focus,
@@ -31,7 +32,7 @@
 
 	img {
 		height: calc(2.25rem);
-		margin-top:25px;
+		margin-top:10px;
 	}
 }
 
@@ -53,17 +54,17 @@
 		display: block;
 		font-size: .875em;
 		font-weight: 500;
-		font-family: $font-family-secondary;
-		line-height: calc(5.625rem - 1px);
+		font-family: $font-family-primary;
+		line-height: calc(3.5rem - 1px);
 		text-transform: uppercase;
-		border-bottom: 1px solid;
+		border-bottom: 2px solid;
 		border-color: transparent;
 		transition: border-color .2s;
 
 		&:hover,
 		&:focus,
 		&:active {
-			border-color: $color-dark-blue;
+			border-color: orange;
 		}
 	}
 }
@@ -121,14 +122,15 @@
 
 /* ----- Offcanvas toggle ----- */
 .offcanvas-toggle {
-	height: calc(5.625rem - 1px);
+	height: calc(3.5rem - 1px);
 	width: 5.625rem;
 	cursor: pointer;
 	position: fixed;
 	right: 0;
 	top: 0;
 	@include translate3d(0, 0, 0);
 	z-index: $z-index-offcanvas-toggle;
+	margin-top: -12px;
 
 	span {
 		display: block;

diff --git a/docs/amplify-theme/_sass/objects/_buttons.scss b/docs/amplify-theme/_sass/objects/_buttons.scss
@@ -23,7 +23,7 @@
 
 .btn--dark {
 	color: $color-white;
-	background-color: $color-dark-blue;
+	background-color: orange;
 	padding: .5625rem 1.5625rem;
 	transition: color .2s, background-color .2s;