feat: add api section

source/index.md

@@ -28,14 +28,14 @@ comments: false
  <i class="fa fa-cloud-upload"></i>
  </div>
  <h3 class="intro-feature-title">One-Command Deployment</h3>
- <p class="intro-feature-desc">You only need one command to deploy your site to GitHub Pages, Heroku or other platforms.</p>
+ <p class="intro-feature-desc">You only need one command to deploy your site to GitHub Pages, Heroku, Netlify, Vercel or other platforms.</p>
  </div></li><li class="intro-feature-wrap">
  <div class="intro-feature">
  <div class="intro-feature-icon">
  <i class="fa fa-cog"></i>
  </div>
  <h3 class="intro-feature-title">Plugins</h3>
- <p class="intro-feature-desc">Features powerful APIs for limitless extensibility. Various plugins are available to support most template engines (EJS, Pug, Nunjucks, and many others). Easily integrate with existing NPM packages (Babel, PostCSS, Less/Sass, etc).</p>
+ <p class="intro-feature-desc">Various plugins are available to generate sitemap and RSS, insert player for audio or video, intergrate search engine and support most template engines.</p>
  </div>
  </li>
 </ul>

themes/navy/languages/en.yml

@@ -11,6 +11,10 @@ index:
  get_started: Get started
  theme_intro: Choose from a huge library of spectacular, feature-packed and customizable themes. Create your own using any compatible template engines.
  theme_link: Explore themes
+ plugin_intro_title: Powerful API
+ plugin_intro: Features powerful APIs for limitless extensibility. Easily integrate with your existing toolchains (Babel, UglifyJS, PostCSS, HTMLMinifier and many others).
+ plugin_link: Explore Plugins
+ api_link: View API docs
 
 page:
  contents: Contents
@@ -74,4 +78,4 @@ sidebar:
  migrator: Migrator
  processor: Processor
  renderer: Renderer
- tag: Tag
+ tag: Tag

themes/navy/layout/index.njk

@@ -57,3 +57,23 @@
  </div>
  </div>
 </div>
+
+<div id="plugin-wrap">
+ <div class="wrapper">
+ <div class="inner plugin-wrapper">
+ <div class="plugin-thumbnail">
+ <div class="plugin-thumbnail-container">
+ <img src="/img/carbon.svg">
+ </div>
+ </div>
+ <div class="plugin-intro">
+ <div class="plugin-intro-container">
+ <h2 class="plugin-intro-title">{{ __('index.plugin_intro_title') }}</h2>
+ <p class="plugin-intro-text">{{ __('index.plugin_intro') }}</p>
+ <a href="/plugins/" class="plugin-link">{{ __('index.plugin_link') }}</a>
+ <a href="/api/" class="plugin-link">{{ __('index.api_link') }}</a>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>

themes/navy/source/css/_partial/index.styl

@@ -4,6 +4,7 @@
 
 #banner-title,
 .theme-intro-title
+.plugin-intro-title
  line-height: 1.15
  font-weight: 300
  font-family: font-title
@@ -17,6 +18,7 @@
  padding-top: 100px
 
 .theme-intro-title
+.plugin-intro-title
  margin-bottom: 24px
  padding-top: 24px
  @media mq-normal
@@ -167,6 +169,7 @@
 
 #intro-get-started-link
 #theme-link
+.plugin-link
  font-size: 18px
  font-family: font-title
  display: inline-block
@@ -191,6 +194,13 @@
  background: @border-color
  color: lighten(color-navy, 10%)
 
+.plugin-link
+ color: color-border
+ border-color: color-border
+ &:hover
+ background: @border-color
+ color: lighten(color-navy, 20%)
+
 #theme-wrap
  background: lighten(color-navy, 10%)
  border-top: 1px solid #161d24
@@ -202,7 +212,16 @@
  @media mq-normal
  padding: 96px 64px
 
+#plugin-wrap
+ background: lighten(color-navy, 20%)
+ padding: 32px
+ @media mq-tablet
+ padding: 64px 64px
+ @media mq-normal
+ padding: 96px 64px
+
 .theme-wrapper
+.plugin-wrapper
  display: flex
  flex-wrap: wrap
  color: rgba(255, 255, 255, 0.8)
@@ -213,28 +232,39 @@
  order: 0
  width: 50%
 
+.plugin-thumbnail
+ width: 100%
+ @media mq-normal
+ order: 2
+ width: 50%
+
 .theme-thumbnail-container
+.plugin-thumbnail-container
  margin-right: auto
  margin-left: auto
  width: 90%
 
 .theme-thumbnail img
+.plugin-thumbnail img
  max-width: 100%
  box-shadow: 6px 6px 12px 0 rgba(0,0,0,.4)
 
 .theme-intro
+.plugin-intro
  width: 100%
  @media mq-normal
  width: 50%
 
 .theme-intro-container
+.plugin-intro-container
  margin-right: auto
  margin-left: auto
  text-align: center
  @media mq-normal
  width: 80%
 
 .theme-intro-text
+.plugin-intro-text
  color: rgba(255, 255, 255, 0.6)
  line-height: 1.5
  font-size: 16px