Latest Updates for Animate.css v4 (#1106)

* Add community discord server * Add favicon and meta tags * Fix for Issue #1102 * Update build * Remove community Co-authored-by: Waren Gonzaga <warengonzaga.dev@gmail.com>
animate-css · Sep 7, 2020 · 888e110 · 888e110
1 parent 7adb3ab
commit 888e110
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 21 deletions.
diff --git a/animate.compat.css b/animate.compat.css
diff --git a/animate.css b/animate.css
@@ -1,6 +1,4 @@
-
-@charset "UTF-8";
-/*!
+@charset "UTF-8";/*!
  * animate.css - https://animate.style/
  * Version - 4.1.0
  * Licensed under the MIT license - http://opensource.org/licenses/MIT

diff --git a/animate.min.css b/animate.min.css
diff --git a/docs/img/animatecss-opengraph.jpg b/docs/img/animatecss-opengraph.jpg
diff --git a/docs/img/favicon.ico b/docs/img/favicon.ico
diff --git a/docs/index.html b/docs/index.html
@@ -1,13 +1,30 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>Animate.css</title>
-    <meta
-      name="description"
-      content="Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints."
-    />
+    <!-- Primary Meta Tags -->
+    <title>Animate.css | A cross-browser library of CSS animations.</title>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="title" content="Animate.css | A cross-browser library of CSS animations.">
+    <meta name="description" content="Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.">
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://animate.style">
+    <meta property="og:title" content="Animate.css | A cross-browser library of CSS animations.">
+    <meta property="og:description" content="Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.">
+    <meta property="og:image" content="img/animatecss-opengraph.jpg">
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image">
+    <meta property="twitter:url" content="https://animate.style">
+    <meta property="twitter:title" content="Animate.css | A cross-browser library of CSS animations.">
+    <meta property="twitter:description" content="Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.">
+    <meta property="twitter:image" content="img/animatecss-opengraph.jpg">
+
+    <!-- Favicon -->
+    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
+    <link rel="icon" href="img/favicon.ico" type="image/x-icon">
 
     <link rel="dns-prefetch" href="//fonts.googleapis.com" />
     <link

diff --git a/docsSource/template.html b/docsSource/template.html
@@ -1,13 +1,30 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>Animate.css</title>
-    <meta
-      name="description"
-      content="Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints."
-    />
+    <!-- Primary Meta Tags -->
+    <title>Animate.css | A cross-browser library of CSS animations.</title>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="title" content="Animate.css | A cross-browser library of CSS animations.">
+    <meta name="description" content="Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.">
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://animate.style">
+    <meta property="og:title" content="Animate.css | A cross-browser library of CSS animations.">
+    <meta property="og:description" content="Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.">
+    <meta property="og:image" content="img/animatecss-opengraph.jpg">
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image">
+    <meta property="twitter:url" content="https://animate.style">
+    <meta property="twitter:title" content="Animate.css | A cross-browser library of CSS animations.">
+    <meta property="twitter:description" content="Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.">
+    <meta property="twitter:image" content="img/animatecss-opengraph.jpg">
+
+    <!-- Favicon -->
+    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
+    <link rel="icon" href="img/favicon.ico" type="image/x-icon">
 
     <link rel="dns-prefetch" href="//fonts.googleapis.com" />
     <link

diff --git a/postcss.config.js b/postcss.config.js
@@ -1,8 +1,7 @@
 const fs = require('fs');
 const {homepage, version, author, animateConfig} = JSON.parse(fs.readFileSync('package.json'));
 
-const header = `
-@charset "UTF-8";
+const header = `@charset "UTF-8";
 
 /*!
  * animate.css - ${homepage}