Update Docs SEO

9 files changed, 26 insertions, 15 deletions

diff --git a/docs/src/_layout.pug b/docs/src/_layout.pug
index ad32f32..511d798 100644
--- a/docs/src/_layout.pug
+++ b/docs/src/_layout.pug
@@ -1,6 +1,15 @@
+block global
+  - var domain = 'https://picturepan2.github.io/spectre/'
+
 block variables
+  - var slug = ''
   - var title = 'Spectre.css - A Lightweight, Responsive and Modern CSS Framework'
-  - var description = ''
+  - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
+
+if slug
+  - var url = domain + slug + '.html'
+else 
+  - var url = domain
 
 doctype html
 html(lang='en')
@@ -10,6 +19,7 @@ html(lang='en')
     meta(name='robots' content='index, follow')
     meta(name='viewport' content='width=device-width, initial-scale=1.0, shrink-to-fit=no')
     meta(http-equiv='x-ua-compatible' content='ie=edge')
+    meta(name='description' content= description)
     meta(name='author' content='Yan Zhu')
     link(rel='shortcut icon' href='img/favicons/favicon.ico')
     link(rel='icon' href='img/favicons/favicon.png')
@@ -17,6 +27,7 @@ html(lang='en')
     link(rel='stylesheet' href='dist/spectre-icons.min.css')
     link(rel='stylesheet' href='dist/spectre-exp.min.css')
     link(rel='stylesheet' href='dist/docs.min.css')
+    link(rel='canonical' href= url)
 
   body
     block content
diff --git a/docs/src/_mixins.pug b/docs/src/_mixins.pug
index fa08cf6..e9f125e 100644
--- a/docs/src/_mixins.pug
+++ b/docs/src/_mixins.pug
@@ -1,6 +1,6 @@
 mixin docs-accordion(id, name, ...pages)
   .accordion
-    input(id='accordion-' + id type='checkbox' name='docs-accordion-checkbox' hidden='' checked=(current === id ? true : false))
+    input(id='accordion-' + id type='checkbox' name='docs-accordion-checkbox' hidden='' checked=(slug === id ? true : false))
     label.accordion-header.c-hand(for='accordion-' + id)= name
     .accordion-body
       ul.menu.menu-nav
diff --git a/docs/src/components.pug b/docs/src/components.pug
index 3af49c8..a9150d8 100644
--- a/docs/src/components.pug
+++ b/docs/src/components.pug
@@ -1,9 +1,9 @@
 extends _docs-layout.pug
 
 block variables
+  - var slug = 'components'
   - var title = 'Components - Spectre.css CSS Framework'
-  - var description = ''
-  - var current = 'components'
+  - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
 
 block docs-content
   //- Accordions
diff --git a/docs/src/elements.pug b/docs/src/elements.pug
index 3f2086f..17ea619 100644
--- a/docs/src/elements.pug
+++ b/docs/src/elements.pug
@@ -1,9 +1,9 @@
 extends _docs-layout.pug
 
 block variables
+  - var slug = 'elements'
   - var title = 'Elements - Spectre.css CSS Framework'
-  - var description = ''
-  - var current = 'elements'
+  - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
 
 block docs-content
   //- Typography
diff --git a/docs/src/experimentals.pug b/docs/src/experimentals.pug
index 41936b6..c888878 100644
--- a/docs/src/experimentals.pug
+++ b/docs/src/experimentals.pug
@@ -1,9 +1,9 @@
 extends _docs-layout.pug
 
 block variables
+  - var slug = 'experimentals'
   - var title = 'Experimentals - Spectre.css CSS Framework'
-  - var description = ''
-  - var current = 'experimentals'
+  - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
 
 block docs-content
   //- Experimentals
diff --git a/docs/src/getting-started.pug b/docs/src/getting-started.pug
index 60e1665..89c668b 100644
--- a/docs/src/getting-started.pug
+++ b/docs/src/getting-started.pug
@@ -1,9 +1,9 @@
 extends _docs-layout.pug
 
 block variables
+  - var slug = 'getting-started'
   - var title = 'Getting started - Spectre.css CSS Framework'
-  - var description = ''
-  - var current = 'getting-started'
+  - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
 
 block docs-content
   //- Introduction
diff --git a/docs/src/index.pug b/docs/src/index.pug
index 58de518..791a813 100644
--- a/docs/src/index.pug
+++ b/docs/src/index.pug
@@ -7,7 +7,7 @@ block content
         a.docs-logo(href='index.html')
           img(src='img/spectre-logo.svg' alt='Spectre.css CSS Framework')
           h2 SPECTRE
-      h1 Spectre.css
+      h1 SPECTRE.CSS
       h2
         | A #[u Lightweight], #[u Responsive] and #[u Modern] CSS Framework
       p
diff --git a/docs/src/layout.pug b/docs/src/layout.pug
index 4b1bd50..9df424a 100644
--- a/docs/src/layout.pug
+++ b/docs/src/layout.pug
@@ -1,9 +1,9 @@
 extends _docs-layout.pug
 
 block variables
+  - var slug = 'layout'
   - var title = 'Layout - Spectre.css CSS Framework'
-  - var description = ''
-  - var current = 'layout'
+  - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
 
 block docs-content
   //- Flexbox grid
diff --git a/docs/src/utilities.pug b/docs/src/utilities.pug
index c9e8ba2..e3a2b5f 100644
--- a/docs/src/utilities.pug
+++ b/docs/src/utilities.pug
@@ -1,9 +1,9 @@
 extends _docs-layout.pug
 
 block variables
+  - var slug = 'utilities'
   - var title = 'Utilities - Spectre.css CSS Framework'
-  - var description = ''
-  - var current = 'utilities'
+  - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
 
 block docs-content
   //- Colors