Skip to content

Commit

Permalink
Switch docs to a new theme
Browse files Browse the repository at this point in the history 
This theme has a several improvements to help chalice users:

* Add a landing page that makes it clear what chalice does.
* Add a navbar to make it easy for customers to go to exactly
  where they want.
* Allow for additional resources to be added that aren't documentation,
  link to workshops, videos, additional content that's useful
  to chalice users.

This theme is a modified version of the smithy theme.
  • Loading branch information
@jamesls
jamesls committed Jun 18, 2020
1 parent f192a17 commit 687567e
Show file tree
Hide file tree
Showing 21 changed files with 1,779 additions and 39 deletions.
24 changes: 5 additions & 19 deletions docs/source/conf.py
View file
Expand Up @@ -113,25 +113,11 @@

# -- Options for HTML output ----------------------------------------------

# The theme to use for HTML and HTML Help pages. See the documentation for
# a list of builtin themes.
html_theme = 'alabaster'
# Guzzle theme options (see theme.conf for more information)

html_theme_options = {
'github_user': 'aws',
'github_repo': 'chalice',
'sidebar_width': '270px',
'page_width': '1020px',
'note_bg': '#f1f7f4',
'note_border': '#ccb7b7',
'pre_bg': '#fbfbfb',
'code_bg': '#fbfafa',
'show_powered_by': False,
'font_size': '16px',
'font_family': '"Open Sans", Helvetica, Arial, sans-serif',

}
# Our theme is based off the smithy theme but keep in mind that we heavily
# modify parts of the theme.
html_theme = 'smithy'
html_theme_path = ['./theme']
html_theme_options = {'ga_id': os.environ.get('_CHALICE_GA_ID', '')}


# The name for this set of Sphinx documents.
Expand Down
21 changes: 2 additions & 19 deletions docs/source/index.rst
View file
Expand Up @@ -50,24 +50,7 @@ Topics
.. toctree::
:maxdepth: 2

topics/routing
topics/views
topics/configfile
topics/multifile
topics/logging
topics/sdks
topics/stages
topics/packaging
topics/pyversion
topics/cfn
topics/tf
topics/authorizers
topics/events
topics/purelambda
topics/blueprints
topics/websockets
topics/cd
topics/experimental
topics/index


API Reference
Expand All @@ -85,7 +68,7 @@ Tutorials
.. toctree::
:maxdepth: 2

tutorials/websockets
tutorials/index

Upgrade Notes
-------------
Expand Down
Binary file added docs/source/theme/.DS_Store
View file
Binary file not shown.
7 changes: 7 additions & 0 deletions docs/source/theme/smithy/globaltoc.html
View file
@@ -0,0 +1,7 @@
{#
basic/globaltoc.html
~~~~~~~~~~~~~~~~~~~~
#}
<div id="sidebar-navigation" class="hidden-xs">
{{ toctree(maxdepth=3, titles_only=True) }}
</div>
91 changes: 91 additions & 0 deletions docs/source/theme/smithy/landing.html
View file
@@ -0,0 +1,91 @@
<section id="landing-container">

<div id="splash">
<div class="width-wrapper">
<div class="splash-row">
<div class="splash-column">
<img id="splash-logo" src="{{ pathto('_static/img/chalice-logo-whitespace.png', 1) }}" alt="AWS Chalice" />
<div class="headline">
A Python framework for serverless applications
</div>
<a class="splash-link" href="quickstart.html">Get started</a>
</div>

<div class="splash-column">
<div class="highlight-chalice notranslate">
<div class="highlight">
<pre><a class="see-full-example" href="{{ pathto('quickstart') }}#complete-example">[full example]</a>
<span style="color: #f92672">from</span> <span style="color: #f8f8f2">chalice</span> <span style="color: #66d9ef">import</span> <span style="color: #f8f8f2">Chalice</span>

<span style="color: #f8f8f2">app</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">Chalice(app_name</span><span style="color: #f92672">=</span><span style="color: #e6db74">"helloworld"</span><span style="color: #f8f8f2">)</span>

<span style="color: #a6e22e">@app</span><span style="color: #f92672">.</span><span style="color: #f8f8f2">route(</span><span style="color: #e6db74">"/"</span><span style="color: #f8f8f2">)</span>
<span style="color: #66d9ef">def</span> <span style="color: #a6e22e">index</span><span style="color: #f8f8f2">():</span>
<span style="color: #66d9ef">return</span> <span style="color: #f8f8f2">{</span><span style="color: #e6db74">"hello"</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">"world"</span><span style="color: #f8f8f2">}</span>

<span style="color: #a6e22e">@app</span><span style="color: #f92672">.</span><span style="color: #f8f8f2">schedule(Rate(</span><span style="color: #ae81ff">5</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">unit</span><span style="color: #f92672">=</span><span style="color: #f8f8f2">Rate</span><span style="color: #f92672">.</span><span style="color: #f8f8f2">MINUTES))</span>
<span style="color: #66d9ef">def</span> <span style="color: #a6e22e">periodic_task</span><span style="color: #f8f8f2">(event):</span>
<span style="color: #66d9ef">return</span> <span style="color: #f8f8f2">{</span><span style="color: #e6db74">"hello"</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">"world"</span><span style="color: #f8f8f2">}</span>

<span style="color: #a6e22e">@app</span><span style="color: #f92672">.</span><span style="color: #f8f8f2">on_s3_event(bucket</span><span style="color: #f92672">=</span><span style="color: #e6db74">'mybucket'</span><span style="color: #f8f8f2">)</span>
<span style="color: #66d9ef">def</span> <span style="color: #a6e22e">s3_handler</span><span style="color: #f8f8f2">(event):</span>
<span style="color: #f8f8f2">print(event</span><span style="color: #f92672">.</span><span style="color: #f8f8f2">bucket,</span> <span style="color: #f8f8f2">event</span><span style="color: #f92672">.</span><span style="color: #f8f8f2">key)</span>

</pre>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="width-wrapper">
<div class="splash-row">
<img class="lp-image" src="{{ pathto('_static/img/coding.png', 1) }}" alt="Coding" />
<div class="splash-column">
<h2>Focus on writing your application code</h2>
<p>Focus on writing your application code
instead of the resources or services needed to deploy
your application. Chalice automatically determines how to
provision the necessary resources for your application.</p>
</div>
<img class="lp-image" src="{{ pathto('_static/img/programming.png', 1) }}" alt="Coding" />
<div class="splash-column">
<h2>A familiar decorator based API</h2>
<p>Chalice's API for writing serverless application uses a familiar
decorator-based syntax used in frameworks such as Flask,
bottle, and FastAPI. Skip the learning curve and get up and
running quickly.
</p>
</div>
<img class="lp-image" src="{{ pathto('_static/img/maintenance.png', 1) }}" alt="Coding" />
<div class="splash-column">
<h2>Supports multiple deployment systems</h2>
<p>Chalice supports multiple tools to deploy your application
including AWS CloudFormation, Terraform, and its own built-in
deployer based on the AWS SDK for Python. Use the deployment
tools and services you're already familiar with.</p>
</div>
</div>
</div>

<!-- Decide if we want the FAQ on the landing page or a separate page.
<div class="faq">
<div class="width-wrapper">
<h2 class="faq-heading">FAQs</h2>
<h2>Why should I use Chalice?</h2>
<p></p>
<h2>How does Chalice compare to SAM?</h2>
<p></p>
</div>
</div>
-->
<div class="width-wrapper">
<section class="relations">
<a class="next-page clearfix" href="{{ pathto('quickstart')}}">Quick start -&gt;</a>
</section>
<p></p>
</div>
</section>
170 changes: 170 additions & 0 deletions docs/source/theme/smithy/layout.html
View file
@@ -0,0 +1,170 @@
{%- extends "basic/layout.html" %}

{%- block extrahead %}
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{% endblock %}

{%- block scripts %}
{{ super() }}
<script type="text/javascript">
function _scroll(subjectId) {
var subjectElement = $(subjectId);
var actualSubjectHeight = subjectElement.height();
var startingPosition = subjectElement[0].getBoundingClientRect().top;
return function() {
var availableHeight = $(window).height() - startingPosition;
// Subtract the scroll position to account for sticky movement.
availableHeight += Math.min($(window).scrollTop(), 40);
var cappedHeight = Math.min(actualSubjectHeight, availableHeight);
if (subjectElement.css("height") !== cappedHeight) {
subjectElement.css("height", cappedHeight);
}
};
}

// Scroll and resize the the columns when scrolled.
$(function() {
var rightScroll = _scroll("#right-column > .column-body");
var scrollFn = function() {
rightScroll.call(this, arguments);
};
scrollFn();
$(window).scroll(scrollFn);
$(window).resize(scrollFn);
});

// Scroll spy to change highlighted navigation element.
$(function() {
var section = document.querySelectorAll(".section");
var sections = {};
var i = 0;
Array.prototype.forEach.call(section, function(e) {
sections[e.id] = e.offsetTop;
});
var scrollSpy = function() {
var scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
for (i in sections) {
if (sections[i] <= scrollPosition) {
$('#right-column .current').removeClass('current');
$("#right-column a[href='#" + i + "']").addClass('current');
}
}
};
$(window).scroll(scrollSpy);
scrollSpy();
});
</script>
{% if theme_ga_id %}
<script async src="https://www.googletagmanager.com/gtag/js?id={{ theme_ga_id }}"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', '{{ theme_ga_id }}');
</script>
{% endif %}
{%- endblock %}

{%- block css -%}
<link rel="stylesheet" href="{{ pathto('_static/bootstrap-reboot.css', 1) }}" type="text/css" />
{{ super() }}
<link rel="stylesheet" href="{{ pathto('_static/custom-tabs.css', 1) }}" type="text/css" />
{% endblock -%}

<div id="site-container">

{%- block header %}
<header>
<div class="header-flex width-wrapper">
<div class="site-logo">
<a href="{{ pathto(master_doc) }}">
<span class="logo-icon"><img src="{{ pathto('_static/img/chalice-logo-icon-small.png', 1) }}" /></span>
</a>
</div>

<ul id="page-navigation">
<li class="site-page first"><a href="{{ pathto('quickstart') }}">Quick Start</a></li>
<li class="site-page"><a href="{{ pathto('/tutorials/index') }}">Tutorials</a></li>
<li class="site-page"><a href="{{ pathto('/topics/index') }}">Topics</a></li>
<li class="site-page"><a href="{{ pathto('api') }}">API Reference</a></li>
<li class="site-page"><a href="https://github.com/aws/chalice">Code</a></li>
<li class="site-search hidden-sm">
<form action="{{ pathto('search') }}" method="get">
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
<input class="search-input" autocomplete="off" type="search" name="q" placeholder="Search" />
</form>
</li>
</ul>
</div>
</header>
{% endblock -%}

{%- block relbar1 %}{% endblock %}

{% block content %}
{% if pagename == "index" %}
{%- include 'landing.html' with context %}
{% endif %}
{% if pagename != "index" or builder == "singlehtml" %}
<section id="page-container">
<div class="width-wrapper flex">
<article id="document-body">
{% if parents %}
<ul class="rel-parents">
{%- for parent in parents %}
<li><a href="{{ parent.link|e }}" {% if loop.last %}{{ accesskey("U") }}{% endif %}>{{ parent.title }}</a></li>
{%- endfor %}
</ul>
{% endif %}
{% block body %} {% endblock %}
{% if prev or next %}
<section class="relations">
{% if prev %}
<a href="{{ prev.link|e }}" title="{{ _('previous chapter')}}" class="previous-page clearfix hidden-xs">← {{ prev.title }}</a>
{% endif %}
{%- if next and next.title != '&lt;no title&gt;' %}
<a href="{{ next.link|e }}" title="{{ _('next chapter')}}" class="next-page clearfix">{{ next.title }} →</a>
{%- endif %}
</section>
{% endif %}
{%- block content_footer %}{%- endblock %}
</article>

{%- if pagename not in ('search', 'contents', 'index', '404') -%}
<aside id="right-column" class="side-column hidden-sm">
<div class="column-body">
<section class="sidebar">
{% if prev or next %}
<section class="next-previous">
{% if prev %}
<a href="{{ prev.link|e }}" title="{{ _('previous chapter')}}" class="previous-page clearfix hidden-xs">← Prev</a>
{% endif %}
{%- if next and next.title != '&lt;no title&gt;' %}
<a href="{{ next.link|e }}" title="{{ _('next chapter')}}" class="next-page clearfix">Next →</a>
{%- endif %}
</section>
{% endif %}
{{ toc }}
</section>
</div>
</aside>
{%- endif -%}
</div>
</section>
{% endif %}
{% endblock %}

</div><!-- site-container -->

{%- block relbar2 %}{% endblock %}
{%- block footer %}
<footer id="footer">
<div class="width-wrapper">
<div class="copyright">
<p>©2020, Amazon Web Services, Inc or its affiliates. All rights reserved.</p>
</div>
</div>
</footer>
{%- endblock -%}
Binary file added docs/source/theme/smithy/static/.DS_Store
View file
Binary file not shown.

0 comments on commit 687567e

Please sign in to comment.