Added emoji icon integration (#1575)

* Add emoji icons

* Generate new build and ensure build is sane on WSL (windows)

Normalize line endings to ensure when building in Windows Subsystem
for Linux that the results are sane.
Build new JS and CSS.

* Attempt to fix netlify issue

docs/extensions/pymdown.md

@@ -201,6 +201,35 @@ To view all the available short names and emoji available, see
 files containing the short names and emoji associated with each supported
 index.
 
+In addition, you can access all the Material icons and Fontawesome icons by using
+MkDocs Material's custom emoji index. It extends the Twemoji index with new short
+names that access any of the included icons. To use the custom index, you need to
+use the following options when including the Emoji extension:
+
+```
+  - pymdownx.emoji:
+      emoji_index: !!python/name:material.emoji.material
+      emoji_generator: !!python/name:material.emoji.to_svg
+```
+
+Then we can access any of the icons:
+
+=== "Markdown"
+    ```
+    We can use Material Icons :material-airplane:.
+
+    We can also use Fontawesome Icons :fontawesome-solid-ambulance:.
+
+    That's not all, we can also use Octicons :octicons-octoface:.
+    ```
+
+=== "Results"
+    We can use Material Icons :material-airplane:.
+
+    We can also use Fontawesome Icons :fontawesome-solid-ambulance:.
+
+    That's not all, we can also use Octicons :octicons-octoface:.
+
 !!! warning "Legal disclaimer"
 
     Material has no affiliation with [JoyPixles][15] or [Twemoji][14], both

material/assets/manifest.json

@@ -1,10 +1,10 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.d28521c5.min.js",
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.0e29fb74.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.d28521c5.min.js.map",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.0e29fb74.min.js.map",
-  "assets/javascripts/vendor.js": "assets/javascripts/vendor.5b460a48.min.js",
+  "assets/javascripts/vendor.js": "assets/javascripts/vendor.f45d2d8d.min.js",
-  "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.5b460a48.min.js.map",
+  "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.f45d2d8d.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.7f7c8775.min.js",
   "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.7f7c8775.min.js.map",
-  "assets/stylesheets/main.css": "assets/stylesheets/main.c3000690.min.css",
+  "assets/stylesheets/main.css": "assets/stylesheets/main.14de1027.min.css",
   "assets/stylesheets/palette.css": "assets/stylesheets/palette.4444686e.min.css"
 }

material/base.html

@@ -41,7 +41,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.c3000690.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.14de1027.min.css' | url }}">
       {% if palette.primary or palette.accent %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.4444686e.min.css' | url }}">
       {% endif %}
@@ -178,8 +178,8 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/vendor.5b460a48.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/vendor.f45d2d8d.min.js' | url }}"></script>
-      <script src="{{ 'assets/javascripts/bundle.d28521c5.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.0e29fb74.min.js' | url }}"></script>
       {%- set translations = {} -%}
       {%- for key in [
         "clipboard.copy",

material/emoji.py

@@ -0,0 +1,67 @@
+"""
+Emoji extras for Material.
+
+Override the Twemoji Index with an extended version that includes short names for Material icons, Fontawesome, etc.
+"""
+import os
+import glob
+import copy
+from pymdownx import twemoji_db
+from pymdownx.emoji import TWEMOJI_SVG_CDN, add_attriubtes
+import codecs
+import xml.etree.ElementTree as etree
+
+RESOURCES = os.path.dirname(os.path.abspath(__file__))
+
+
+def material():
+    """Provide a copied Twemoji index with additional codes for Material included icons."""
+
+    # Copy the Twemoji index
+    index = {
+        "name": 'twemoji',
+        "emoji": copy.deepcopy(twemoji_db.emoji),
+        "aliases": copy.deepcopy(twemoji_db.aliases)
+    }
+
+    # Find our icons
+    icon_path = os.path.join(RESOURCES, '.icons')
+    norm_base = icon_path.replace('\\', '/') + '/'
+    for result in glob.glob(icon_path.replace('\\', '/') + '/**/*.svg', recursive=True):
+        name = ':{}:'.format(result.replace('\\', '/').replace(norm_base, '', 1).replace('/', '-').lstrip('.')[:-4])
+        if name not in index['emoji'] and name not in index['aliases']:
+            # Easiest to just store the path and pull it out from the index
+            index["emoji"][name] = {'name': name, 'path': result}
+
+    return index
+
+
+def to_svg(index, shortname, alias, uc, alt, title, category, options, md):
+    """Return SVG element."""
+
+    is_unicode = uc is not None
+
+    if is_unicode:
+        svg_path = TWEMOJI_SVG_CDN
+
+        attributes = {
+            "class": options.get('classes', index),
+            "alt": alt,
+            "src": "%s%s.svg" % (
+                options.get('image_path', svg_path),
+                uc
+            )
+        }
+
+        if title:
+            attributes['title'] = title
+
+        add_attriubtes(options, attributes)
+
+        return etree.Element("img", attributes)
+    else:
+        el = etree.Element('span', {"class": options.get('classes', index)})
+        svg_path = md.inlinePatterns['emoji'].emoji_index['emoji'][shortname]['path']
+        with codecs.open(svg_path, 'r', encoding='utf-8') as f:
+            el.text = md.htmlStash.store(f.read())
+        return el

mkdocs.yml

@@ -103,8 +103,8 @@ markdown_extensions:
   - pymdownx.critic
   - pymdownx.details
   - pymdownx.emoji:
-      emoji_index: !!python/name:pymdownx.emoji.twemoji
+      emoji_index: !!python/name:material.emoji.material
-      emoji_generator: !!python/name:pymdownx.emoji.to_svg
+      emoji_generator: !!python/name:material.emoji.to_svg
   # - pymdownx.highlight:
   #     linenums_style: pymdownx-inline
   - pymdownx.inlinehilite

netlify.toml

@@ -22,5 +22,5 @@
 publish = "site"
 command = """
 pip install mkdocs-minify-plugin
-mkdocs build
+python -m mkdocs build
 """

src/assets/stylesheets/extensions/pymdown/_emoji.scss

@@ -34,4 +34,8 @@
     width: px2em(18px);
     vertical-align: -15%;
   }
+
+  span.twemoji {
+    display: inline-block;
+  }
 }

src/emoji.py

@@ -0,0 +1,67 @@
+"""
+Emoji extras for Material.
+
+Override the Twemoji Index with an extended version that includes short names for Material icons, Fontawesome, etc.
+"""
+import os
+import glob
+import copy
+from pymdownx import twemoji_db
+from pymdownx.emoji import TWEMOJI_SVG_CDN, add_attriubtes
+import codecs
+import xml.etree.ElementTree as etree
+
+RESOURCES = os.path.dirname(os.path.abspath(__file__))
+
+
+def material():
+    """Provide a copied Twemoji index with additional codes for Material included icons."""
+
+    # Copy the Twemoji index
+    index = {
+        "name": 'twemoji',
+        "emoji": copy.deepcopy(twemoji_db.emoji),
+        "aliases": copy.deepcopy(twemoji_db.aliases)
+    }
+
+    # Find our icons
+    icon_path = os.path.join(RESOURCES, '.icons')
+    norm_base = icon_path.replace('\\', '/') + '/'
+    for result in glob.glob(icon_path.replace('\\', '/') + '/**/*.svg', recursive=True):
+        name = ':{}:'.format(result.replace('\\', '/').replace(norm_base, '', 1).replace('/', '-').lstrip('.')[:-4])
+        if name not in index['emoji'] and name not in index['aliases']:
+            # Easiest to just store the path and pull it out from the index
+            index["emoji"][name] = {'name': name, 'path': result}
+
+    return index
+
+
+def to_svg(index, shortname, alias, uc, alt, title, category, options, md):
+    """Return SVG element."""
+
+    is_unicode = uc is not None
+
+    if is_unicode:
+        svg_path = TWEMOJI_SVG_CDN
+
+        attributes = {
+            "class": options.get('classes', index),
+            "alt": alt,
+            "src": "%s%s.svg" % (
+                options.get('image_path', svg_path),
+                uc
+            )
+        }
+
+        if title:
+            attributes['title'] = title
+
+        add_attriubtes(options, attributes)
+
+        return etree.Element("img", attributes)
+    else:
+        el = etree.Element('span', {"class": options.get('classes', index)})
+        svg_path = md.inlinePatterns['emoji'].emoji_index['emoji'][shortname]['path']
+        with codecs.open(svg_path, 'r', encoding='utf-8') as f:
+            el.text = md.htmlStash.store(f.read())
+        return el

webpack.config.ts

@@ -290,7 +290,7 @@ export default (_env: never, args: Configuration): Configuration[] => {
                 "{#-\n" +
                 "  This file was automatically generated - do not edit\n" +
                 "-#}\n"
-              return banner + minhtml(content.toString(), {
+              return banner + minhtml(content.toString().replace(/\r\n/gm, "\n"), {
                 collapseBooleanAttributes: true,
                 includeAutoGeneratedTags: false,
                 minifyCSS: true,