fix: use js to render svg animations (ory#79)

Resolves a new sfari 13.1+ bug where animations stopped working.
NickUfer · Jul 2, 2020 · 86c6df3 · 86c6df3
1 parent c29785a
commit 86c6df3
Show file tree

Hide file tree

Showing 14 changed files with 2,335 additions and 294 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1 @@
+static/scripts/*
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -29,6 +29,14 @@ module.exports = {
       },
     },
     `gatsby-plugin-sharp`,
+    {
+      resolve: "gatsby-plugin-react-svg",
+      options: {
+        rule: {
+          include: /.*images\/animations\/.*\.svg$/ // See below to configure properly
+        }
+      }
+    },
     {
       resolve: `gatsby-transformer-remark`,
       options: {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "gatsby-plugin-offline": "~3.0.40",
     "gatsby-plugin-postcss": "~2.1.21",
     "gatsby-plugin-react-helmet": "~3.1.23",
+    "gatsby-plugin-react-svg": "^3.0.0",
     "gatsby-plugin-sharp": "^2.5.3",
     "gatsby-plugin-sitemap": "~2.2.29",
     "gatsby-plugin-typescript": "~2.1.27",
@@ -60,6 +61,7 @@
     "react-countup": "~4.3.2",
     "react-dom": "~16.13.0",
     "react-helmet": "~5.2.1",
+    "react-keyshape": "^3.3.0",
     "react-prism": "~4.3.2",
     "react-visibility-sensor": "~5.1.1",
     "regression": "~2.0.1",

diff --git a/src/.DS_Store b/src/.DS_Store
diff --git a/src/components/stats.tsx b/src/components/stats.tsx
@@ -236,7 +236,6 @@ class Stats extends Component<PropTypes, StateTypes> {
   }
 
   render() {
-    console.log(this.state)
     return (
       <div className={styles.stats}>
         <div className="container-fluid">

diff --git a/src/html.js b/src/html.js
@@ -23,74 +23,80 @@ import icon17 from './images/icon/mstile-310x310.png'
 export default function HTML(props) {
   return (
     <html {...props.htmlAttributes}>
-    <head>
-      <link rel="apple-touch-icon-precomposed" sizes="57x57" href={icon}/>
-      <link rel="apple-touch-icon-precomposed" sizes="114x114" href={icon1}/>
-      <link rel="apple-touch-icon-precomposed" sizes="72x72" href={icon2}/>
-      <link rel="apple-touch-icon-precomposed" sizes="144x144" href={icon3}/>
-      <link rel="apple-touch-icon-precomposed" sizes="60x60" href={icon4}/>
-      <link rel="apple-touch-icon-precomposed" sizes="120x120" href={icon5}/>
-      <link rel="apple-touch-icon-precomposed" sizes="76x76" href={icon6}/>
-      <link rel="apple-touch-icon-precomposed" sizes="152x152" href={icon7}/>
-      <link rel="icon" type="image/png" href={icon8}/>
-      <link rel="icon" type="image/png" href={icon9}/>
-      <link rel="icon" type="image/png" href={icon10}/>
-      <link rel="icon" type="image/png" href={icon11}/>
-      <link rel="icon" type="image/png" href={icon12}/>
-      <meta name="msapplication-TileImage" content={icon13}/>
-      <meta name="msapplication-square70x70logo" content={icon14}/>
-      <meta name="msapplication-square150x150logo" content={icon15}/>
-      <meta name="msapplication-wide310x150logo" content={icon16}/>
-      <meta name="msapplication-square310x310logo" content={icon17}/>
+      <head>
+        <link rel="apple-touch-icon-precomposed" sizes="57x57" href={icon} />
+        <link rel="apple-touch-icon-precomposed" sizes="114x114" href={icon1} />
+        <link rel="apple-touch-icon-precomposed" sizes="72x72" href={icon2} />
+        <link rel="apple-touch-icon-precomposed" sizes="144x144" href={icon3} />
+        <link rel="apple-touch-icon-precomposed" sizes="60x60" href={icon4} />
+        <link rel="apple-touch-icon-precomposed" sizes="120x120" href={icon5} />
+        <link rel="apple-touch-icon-precomposed" sizes="76x76" href={icon6} />
+        <link rel="apple-touch-icon-precomposed" sizes="152x152" href={icon7} />
+        <link rel="icon" type="image/png" href={icon8} />
+        <link rel="icon" type="image/png" href={icon9} />
+        <link rel="icon" type="image/png" href={icon10} />
+        <link rel="icon" type="image/png" href={icon11} />
+        <link rel="icon" type="image/png" href={icon12} />
+        <meta name="msapplication-TileImage" content={icon13} />
+        <meta name="msapplication-square70x70logo" content={icon14} />
+        <meta name="msapplication-square150x150logo" content={icon15} />
+        <meta name="msapplication-wide310x150logo" content={icon16} />
+        <meta name="msapplication-square310x310logo" content={icon17} />
 
-      <meta charSet="utf-8"/>
-      <meta httpEquiv="x-ua-compatible" content="ie=edge"/>
-      <meta
-        name="viewport"
-        content="width=device-width, initial-scale=1, shrink-to-fit=no"
-      />
-      {props.headComponents}
-      <script
-        dangerouslySetInnerHTML={{
-          __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+        <meta charSet="utf-8" />
+        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1, shrink-to-fit=no"
+        />
+        {props.headComponents}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
 new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
 j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
 })(window,document,'script','dataLayer','GTM-MJD22FZ');`,
-        }}
-      />
-    </head>
-    <body {...props.bodyAttributes}>
-    {props.preBodyComponents}
-    <noscript key="noscript" id="gatsby-noscript">
-      This app works best with JavaScript enabled.
-    </noscript>
-    <div
-      key={`body`}
-      id="___gatsby"
-      dangerouslySetInnerHTML={{ __html: props.body }}
-    />
-    {props.postBodyComponents}
-    <script
-      async
-      src="https://www.googletagmanager.com/gtag/js?id=UA-71865250-1"
-    />
-    <script
-      dangerouslySetInnerHTML={{
-        __html: `window.dataLayer = window.dataLayer || [];
+          }}
+        />
+        <script src="/scripts/keyshapejs-1.1.0.min.js" />
+      </head>
+      <body {...props.bodyAttributes}>
+        {props.preBodyComponents}
+        <noscript key="noscript" id="gatsby-noscript">
+          This app works best with JavaScript enabled.
+        </noscript>
+        <div
+          key={`body`}
+          id="___gatsby"
+          dangerouslySetInnerHTML={{ __html: props.body }}
+        />
+        {props.postBodyComponents}
+        <script
+          async
+          src="https://www.googletagmanager.com/gtag/js?id=UA-71865250-1"
+        />
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());
 
 gtag('config', 'UA-71865250-1');`,
-      }}
-    />
-    <noscript>
-      <iframe
-        src="https://www.googletagmanager.com/ns.html?id=GTM-MJD22FZ"
-        style={{ height: 0, width: 0, display: 'none', visibility: 'hidden' }}
-      />
-    </noscript>
-    </body>
+          }}
+        />
+        <noscript>
+          <iframe
+            src="https://www.googletagmanager.com/ns.html?id=GTM-MJD22FZ"
+            style={{
+              height: 0,
+              width: 0,
+              display: 'none',
+              visibility: 'hidden',
+            }}
+          />
+        </noscript>
+      </body>
     </html>
   )
 }

diff --git a/src/images/.DS_Store b/src/images/.DS_Store
diff --git a/src/images/animations/kratos.svg b/src/images/animations/kratos.svg
diff --git a/src/pages/kratos.tsx b/src/pages/kratos.tsx
@@ -7,18 +7,10 @@ import SEO from '../components/seo'
 import kratosPolyglot from '../images/kratos/svg_kratos_p.svg'
 import Stats from '../components/stats'
 import CodeBox, { Languages } from '../components/codebox'
-import kratosProcess from '../images/kratos/svg_kratos.svg'
+import KratosAnimation from '../images/animations/kratos.svg'
 import { brandPrefix } from '../config'
 import Collaborator from '../components/collaborator'
 
-const KratosAnimation = () => (
-  <img
-    alt="The ORY Kratos user login and registration service"
-    className="responsive"
-    src={kratosProcess}
-  />
-)
-
 const KratosSdk = () => (
   <img alt="ORY Kratos SDKs" className="responsive" src={kratosPolyglot} />
 )

diff --git a/src/pages/markdown/imprint.md b/src/pages/markdown/imprint.md
@@ -1,15 +1,15 @@
 ---
-published: true  
-path: '/imprint/'  
-title: 'Imprint'  
-metaTitle: 'ORY Imprint'  
-metaDescription: 'Read the ORY imprint.'  
-lastUpdatedAt: 'Apr 6th, 2020'  
+published: true
+path: '/imprint/'
+title: 'Imprint'
+metaTitle: 'ORY Imprint'
+metaDescription: 'Read the ORY imprint.'
+lastUpdatedAt: 'Apr 6th, 2020'
 ---
 
 **ORY Corp**  
 32 Veterans Lane, Ste A-128  
 Doylestown, PA 18901-3424  
-United States of America  
+United States of America
 
-E-Mail: [[email protected]](mailto:[email protected])  
+E-Mail: [[email protected]](mailto:[email protected])