Update Docs SEO

16 files changed, 41 insertions, 16 deletions

diff --git a/docs/components.html b/docs/components.html
index fb05df4..a931381 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -6,6 +6,7 @@
     <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="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.">
     <meta name="author" content="Yan Zhu">
     <link rel="shortcut icon" href="img/favicons/favicon.ico">
     <link rel="icon" href="img/favicons/favicon.png">
@@ -13,6 +14,7 @@
     <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="https://picturepan2.github.io/spectre/components.html">
   </head>
   <body>
     <div class="docs-container off-canvas off-canvas-sidebar-show">
diff --git a/docs/elements.html b/docs/elements.html
index f7a196a..174bda8 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -6,6 +6,7 @@
     <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="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.">
     <meta name="author" content="Yan Zhu">
     <link rel="shortcut icon" href="img/favicons/favicon.ico">
     <link rel="icon" href="img/favicons/favicon.png">
@@ -13,6 +14,7 @@
     <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="https://picturepan2.github.io/spectre/elements.html">
   </head>
   <body>
     <div class="docs-container off-canvas off-canvas-sidebar-show">
diff --git a/docs/experimentals.html b/docs/experimentals.html
index b6a535a..47c51e9 100644
--- a/docs/experimentals.html
+++ b/docs/experimentals.html
@@ -6,6 +6,7 @@
     <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="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.">
     <meta name="author" content="Yan Zhu">
     <link rel="shortcut icon" href="img/favicons/favicon.ico">
     <link rel="icon" href="img/favicons/favicon.png">
@@ -13,6 +14,7 @@
     <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="https://picturepan2.github.io/spectre/experimentals.html">
   </head>
   <body>
     <div class="docs-container off-canvas off-canvas-sidebar-show">
diff --git a/docs/getting-started.html b/docs/getting-started.html
index 95c1e6e..3046848 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -6,6 +6,7 @@
     <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="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.">
     <meta name="author" content="Yan Zhu">
     <link rel="shortcut icon" href="img/favicons/favicon.ico">
     <link rel="icon" href="img/favicons/favicon.png">
@@ -13,6 +14,7 @@
     <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="https://picturepan2.github.io/spectre/getting-started.html">
   </head>
   <body>
     <div class="docs-container off-canvas off-canvas-sidebar-show">
diff --git a/docs/index.html b/docs/index.html
index 1445c23..64b8f71 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -6,6 +6,7 @@
     <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="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.">
     <meta name="author" content="Yan Zhu">
     <link rel="shortcut icon" href="img/favicons/favicon.ico">
     <link rel="icon" href="img/favicons/favicon.png">
@@ -13,13 +14,14 @@
     <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="https://picturepan2.github.io/spectre/">
   </head>
   <body>
     <div class="section section-hero bg-gray">
       <div class="grid-hero container grid-lg text-center" id="overview">
         <div class="docs-brand"><a class="docs-logo" href="index.html"><img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework">
             <h2>SPECTRE</h2></a></div>
-        <h1>Spectre.css</h1>
+        <h1>SPECTRE.CSS</h1>
         <h2>A 
           <u>Lightweight</u>, 
           <u>Responsive</u> and 
diff --git a/docs/layout.html b/docs/layout.html
index f3549b5..11f9ab6 100644
--- a/docs/layout.html
+++ b/docs/layout.html
@@ -6,6 +6,7 @@
     <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="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.">
     <meta name="author" content="Yan Zhu">
     <link rel="shortcut icon" href="img/favicons/favicon.ico">
     <link rel="icon" href="img/favicons/favicon.png">
@@ -13,6 +14,7 @@
     <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="https://picturepan2.github.io/spectre/layout.html">
   </head>
   <body>
     <div class="docs-container off-canvas off-canvas-sidebar-show">
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
diff --git a/docs/utilities.html b/docs/utilities.html
index eb89ed7..7fad7e0 100644
--- a/docs/utilities.html
+++ b/docs/utilities.html
@@ -6,6 +6,7 @@
     <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="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.">
     <meta name="author" content="Yan Zhu">
     <link rel="shortcut icon" href="img/favicons/favicon.ico">
     <link rel="icon" href="img/favicons/favicon.png">
@@ -13,6 +14,7 @@
     <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="https://picturepan2.github.io/spectre/utilities.html">
   </head>
   <body>
     <div class="docs-container off-canvas off-canvas-sidebar-show">