Merge pull request #535 from Pelican-Elegant/bug-fixes

New feats and bug fixes

.pre-commit-config.yaml

@@ -1,17 +1,20 @@
+exclude: '^static/css/elegant.prod.css'
 fail_fast: true
 repos:
+- repo: meta
+  hooks:
+  - id: check-useless-excludes
 - repo: https://github.com/prettier/prettier
-  rev: master
+  rev: 1.19.1
   hooks:
   - id: prettier
     files: \.(css|js|md|markdown|json)
-    exclude: ^static/(tipuesearch|magnific)
 - repo: https://github.com/python/black
-  rev: master
+  rev: 19.10b0
   hooks:
   - id: black
 - repo: https://github.com/pre-commit/pre-commit-hooks
-  rev: master
+  rev: v2.4.0
   hooks:
   - id: check-added-large-files
   - id: check-ast

.travis.yml

@@ -4,6 +4,9 @@ dist: trusty
 python:
 - '3.6'
 
+env:
+- NODE_VERSION="12.13.1"
+
 branches:
   only:
   - master
@@ -20,6 +23,9 @@ cache:
 - directories:
   - $HOME/.cache/pre-commit
 
+before_install:
+- nvm install $NODE_VERSION
+
 install:
 - pip install -r documentation/requirements.txt
 - pip install -U html5validator

.yaspeller.json

@@ -20,6 +20,7 @@
     "BestAzon",
     "bestazon",
     "bing",
+    "blockquote",
     "blog-o-matic",
     "BrowserSync",
     "cd",
@@ -29,6 +30,7 @@
     "commitizen",
     "config",
     "crafted",
+    "cssmin",
     "customizable",
     "customizations",
     "delinkification",
@@ -46,6 +48,7 @@
     "github",
     "github.com",
     "google",
+    "GulpJS",
     "gulpjs",
     "Gómez",
     "https",
@@ -55,6 +58,7 @@
     "jinja2",
     "jQuery",
     "js",
+    "jsx",
     "LaTeX",
     "lightbox",
     "LiveReload",
@@ -77,21 +81,26 @@
     "newbies",
     "newline",
     "nofollow",
+    "noopener",
     "OneLink",
     "onelink",
     "organizational",
     "Pablo",
     "Pablo's",
     "pelicanconf",
+    "permalink",
     "permalinks",
     "peru",
     "photogallery",
     "piexif",
+    "PostCSS",
+    "postcss",
     "Pygments",
     "README",
     "rebase",
     "rebasing",
     "refactor",
+    "rel",
     "reST",
     "reStructuredText",
     "resubmitting",
@@ -109,10 +118,9 @@
     "statcounter",
     "submitter",
     "sudo",
-    "Šuklje",
     "takeaways",
-    "talha",
     "Talha",
+    "talha",
     "Talha's",
     "talha131",
     "talham",
@@ -128,14 +136,17 @@
     "uncollapsed",
     "understandability",
     "unhide",
+    "unmaintained",
     "unordered",
     "validator",
     "versioning",
     "virtualenv",
+    "webassets",
     "webmasters",
     "Wegner",
     "whitespace",
     "yaml",
-    "yaspeller"
+    "yaspeller",
+    "Šuklje"
   ]
 }

documentation/content/101 Quick Start/security.md

@@ -0,0 +1,18 @@
+Title: Elegant Is Safe
+Tags: security,
+Category: 101 — Quick Start
+Date: 2019-12-02 11:45
+Slug: elegant-is-safe
+Subtitle:
+Summary:
+Keywords:
+Authors: Talha Mansoor
+
+Static sites are usually safer than server side rendered sites. There can be some edge cases though even for a static site.
+
+We came to know about a potential security issue that involves, `target="_blank"`. We have updated our code to follow the recommended fix.
+
+You can read more about the issue and its fix at these links,
+
+1. [About rel=noopener](https://mathiasbynens.github.io/rel-noopener/)
+1. [react/jsx-no-target-blank](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-target-blank.md)

documentation/content/Components/add-license.md

@@ -13,7 +13,7 @@ You can optionally define `SITE_LICENSE` variable in Pelican configuration. It w
 For example,
 
 ```python
-SITE_LICENSE = """Content licensed under <a rel="license"
+SITE_LICENSE = """Content licensed under <a rel="license nofollow noopener noreferrer"
     href="http://creativecommons.org/licenses/by/4.0/" target="_blank">
     Creative Commons Attribution 4.0 International License</a>."""
 ```

documentation/content/Components/blockquote.md

@@ -0,0 +1,27 @@
+Title: Blockquote Style
+Tags: style, typography
+Category: Components
+Date: 2019-12-01 18:41
+Slug: blockquote-style
+Authors: Talha Mansoor
+Subtitle:
+Summary:
+Keywords:
+
+<!-- yaspeller ignore:start -->
+
+This is how blockquotes appear in the Elegant theme.
+
+> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque eu tincidunt tortor aliquam nulla facilisi. Nibh tortor id aliquet lectus proin nibh nisl condimentum id.
+>
+> Lobortis feugiat vivamus at augue. Sed augue lacus viverra vitae congue eu consequat. Elit pellentesque habitant morbi tristique senectus et. Netus et malesuada fames ac turpis egestas.
+>
+> Porttitor rhoncus dolor purus non enim praesent elementum facilisis. Augue eget arcu dictum varius duis at consectetur.
+>
+> Pharetra pharetra massa massa ultricies mi quis. Vulputate enim nulla aliquet porttitor lacus luctus accumsan. Pulvinar neque laoreet suspendisse interdum.
+>
+> Ultrices eros in cursus turpis massa tincidunt dui ut ornare. Sem et tortor consequat id porta nibh venenatis. Nulla facilisi morbi tempus iaculis urna id volutpat lacus.
+>
+> Arcu ac tortor dignissim convallis aenean. Mauris pharetra et ultrices neque ornare. Scelerisque fermentum dui faucibus in ornare. Nibh tellus molestie nunc non blandit.
+
+<!-- yaspeller ignore:end -->

documentation/content/Components/heading.md

@@ -0,0 +1,39 @@
+Title: Headings Style
+Tags: style, typography
+Category: Components
+Date: 2019-12-01 10:38
+Slug: headings-style
+Authors: Talha Mansoor
+Subtitle:
+Summary:
+Keywords:
+
+Following are the examples of headings as they appear inside an article.
+
+<!-- yaspeller ignore:start -->
+
+# Heading 1 `code` <small>small</small>
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque eu tincidunt tortor aliquam nulla facilisi. Nibh tortor id aliquet lectus proin nibh nisl condimentum id. Lobortis feugiat vivamus at augue. Sed augue lacus viverra vitae congue eu consequat.
+
+## Heading 2 `code` <small>small</small>
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque eu tincidunt tortor aliquam nulla facilisi. Nibh tortor id aliquet lectus proin nibh nisl condimentum id. Lobortis feugiat vivamus at augue. Sed augue lacus viverra vitae congue eu consequat.
+
+### Heading 3 `code` <small>small</small>
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque eu tincidunt tortor aliquam nulla facilisi. Nibh tortor id aliquet lectus proin nibh nisl condimentum id. Lobortis feugiat vivamus at augue. Sed augue lacus viverra vitae congue eu consequat.
+
+#### Heading 4 `code` <small>small</small>
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque eu tincidunt tortor aliquam nulla facilisi. Nibh tortor id aliquet lectus proin nibh nisl condimentum id. Lobortis feugiat vivamus at augue. Sed augue lacus viverra vitae congue eu consequat.
+
+##### Heading 5 `code` <small>small</small>
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque eu tincidunt tortor aliquam nulla facilisi. Nibh tortor id aliquet lectus proin nibh nisl condimentum id. Lobortis feugiat vivamus at augue. Sed augue lacus viverra vitae congue eu consequat.
+
+###### Heading 6 `code` <small>small</small>
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque eu tincidunt tortor aliquam nulla facilisi. Nibh tortor id aliquet lectus proin nibh nisl condimentum id. Lobortis feugiat vivamus at augue. Sed augue lacus viverra vitae congue eu consequat.
+
+<!-- yaspeller ignore:end -->

documentation/content/Components/links.md

@@ -0,0 +1,43 @@
+Title: Hyperlinks Styles
+Tags: style
+Category: Components
+Date: 2019-12-02 15:09
+Slug: hyperlinks-styles
+Authors: Talha Mansoor
+Subtitle:
+Summary:
+Keywords:
+
+Elegant has three styles for hyperlinks that you can use.
+
+## Muted Style
+
+This is the default style of link.
+
+[Example Link - Use Firefox Browser](https://www.mozilla.org/en-US/firefox/new/) to support open web standards.
+
+This style is very suitable for long-form articles. To read the rationale behind this choice, read our help article [Why Does Elegant Look The Way It Does?]({filename}../Contributing/why-look-and-feel.md).
+
+## Amplified Style
+
+We understand not all links should be muted. Some links require attention.
+
+[Example Link - Use Firefox Browser](https://www.mozilla.org/en-US/firefox/new/){: class="ampl"} to support open web standards. <!-- yaspeller ignore -->
+
+To use this style, you need to enable [Markdown attribute list extension](https://python-markdown.github.io/extensions/attr_list/){:class="ampl"}. <!-- yaspeller ignore -->
+
+```
+# Plugins and extensions
+MARKDOWN = {
+    "extension_configs": {
+        "markdown.extensions.extra": {},
+        "markdown.extensions.meta": {},
+    }
+}
+```
+
+Then use this style using `ampl` class.
+
+```text
+[Example Link](https://www.mozilla.org/){: class="ampl"} blah blah
+```

documentation/content/Components/permalink.md

@@ -0,0 +1,57 @@
+Title: Permalinks To Headings
+Tags: navigation,
+Category: Components
+Date: 2019-12-02 11:05
+Slug: permalinks-to-headings
+Subtitle:
+Summary:
+Keywords:
+
+First, you need to enable the `toc` extension for Markdown in your Pelican configuration.
+
+```python
+MARKDOWN = {
+  'extension_configs': {
+    'markdown.extensions.toc': {}
+  }
+}
+```
+
+Then enable `permalink` option available for the `toc` extension.
+
+```python
+MARKDOWN = {
+  'extension_configs': {
+    'markdown.extensions.toc': {
+      'permalink': 'true',
+    }
+  }
+}
+```
+
+Enabling the `permalink` option will provide direct links to each heading.
+
+Hover over following example heading to see the permalink.
+
+## Example Heading
+
+You would get this,
+
+![Permalinks example using Markdown]({static}/images/elegant-theme-toc-permalinks.png)
+
+!!! Tip Recommendation
+
+    When set to True the paragraph symbol `¶` or `¶` is used by Python markdown.
+    This becomes part of the RSS feed.
+
+    We recommend setting permalink option to a space.
+
+```python
+MARKDOWN = {
+  'extension_configs': {
+    'markdown.extensions.toc': {
+      'permalink': ' ',
+    }
+  }
+}
+```

documentation/content/Components/table-of-contents.md

@@ -71,29 +71,6 @@ This is the content of my sample blog post.
 I will end my example here.
 ```
 
-### Enabling Permalinks
-
-Although it is not required, we recommend you to take advantage of `permalink` option available for the
-`toc` extension.
-
-Enabling the `permalink` option will
-provide direct links to each section.
-
-![Permalinks example using Markdown]({static}/images/elegant-theme-toc-permalinks.png)
-
-To enable this option, you need to add the `'permalink': 'true'` property to the
-`'markdown.extensions.toc'` section that was added in the previous section.
-
-```python
-MARKDOWN = {
-  'extension_configs': {
-    'markdown.extensions.toc': {
-      'permalink': 'true',
-    }
-  }
-}
-```
-
 ### Other Options
 
 For other options available for the Markdown Table of Contents extension, refer to the