Partial list of KaTeX users (#1569)

* Partial list of KaTeX users

Fix #305 (though work should be ongoing) by incorporating users
from that issue.  Also render project names.

* Ordering and link fixes

* Add more projects, allow non-square images

* Bug fix

* Implement comments

* Remove Bokeh

* Switch Gradescope logo, fix layout for small screens

* Implement @ylemkimon's comments

* Add expii logo

* Avoid master link

docs/libs.md

@@ -17,6 +17,9 @@ These libraries are maintained by third-parties.
 ### Angular2+
 - [ng-katex](https://github.com/garciparedes/ng-katex): Angular module to write beautiful math expressions with TeX syntax boosted by KaTeX library
 
+### iOS
+- [KaTeX-iOS](https://github.com/ianarawjo/KaTeX-iOS): iOS UIView that renders TeX expressions with KaTeX
+
 ### React
 - [react-latex](https://github.com/zzish/react-latex): React component to render latex strings, based on KaTeX
 - [react-katex](https://github.com/talyssonoc/react-katex): React components that use KaTeX to typeset math expressions

website/pages/en/users.js

@@ -20,7 +20,10 @@ class Users extends React.Component {
         const showcase = siteConfig.users.map((user, i) => {
             return (
               <a href={user.infoLink} key={i}>
-                <img src={user.image} alt={user.caption} title={user.caption} />
+                <div className="imgbox">
+                  <img src={user.image} alt={user.caption} title={user.caption} />
+                </div>
+                <p>{user.caption}</p>
               </a>
             );
         });
@@ -31,7 +34,7 @@ class Users extends React.Component {
               <div className="showcaseSection">
                 <div className="prose">
                   <h1>Who is Using KaTeX?</h1>
-                  <p>KaTeX is used by many projects</p>
+                  <p>KaTeX is used by many projects:</p>
                 </div>
                 <div className="logos">{showcase}</div>
                 <p>Are you using KaTeX?</p>

website/siteConfig.js

@@ -22,17 +22,105 @@ embed.register('stylesheet',
 
 /* List of projects/orgs using your project for the users page */
 const users = [
+    {
+        caption: 'Khan Academy',
+        image: 'https://avatars0.githubusercontent.com/u/15455',
+        infoLink: 'https://www.khanacademy.org/',
+    },
+    {
+        caption: 'CindyJS',
+        image: 'https://cindyjs.org/assets/img/logo.png',
+        infoLink: 'https://cindyjs.org/',
+    },
+    {
+        caption: 'CoCalc',
+        image: 'https://cdn.rawgit.com/sagemathinc/cocalc/baa4fc57/src/webapp-lib/cocalc-logo.svg',
+        infoLink: 'https://cocalc.com/',
+    },
+    {
+        caption: 'Dropbox Paper',
+        image: 'https://aem.dropbox.com/cms/content/dam/dropbox/www/en-us/branding/app-paper-ios@2x.png',
+        infoLink: 'https://paper.dropbox.com/',
+    },
+    {
+        caption: 'Editor.md',
+        image: 'https://pandao.github.io/editor.md/images/logos/editormd-logo-180x180.png',
+        infoLink: 'https://pandao.github.io/editor.md/en.html',
+    },
+    {
+        caption: 'Expii',
+        image: baseUrl + 'img/expii_logo.png',
+        infoLink: 'https://www.expii.com/',
+    },
     {
         caption: 'GitLab',
         image: 'https://gitlab.com/gitlab-com/gitlab-artwork/raw/master/logo/logo-square.png',
         infoLink: 'https://gitlab.com/',
-        pinned: true,
+    },
+    {
+        caption: 'Gatsby',
+        image: 'https://www.gatsbyjs.org/monogram.svg',
+        infoLink: 'https://www.gatsbyjs.org/',
+    },
+    {
+        caption: 'Gitter',
+        image: 'https://assets.gitlab-static.net/uploads/-/system/project/avatar/3601513/gitter_logo.png',
+        infoLink: 'https://gitter.im/',
+    },
+    {
+        caption: 'Gradescope',
+        image: baseUrl + 'img/gradescope_logo.png',
+        infoLink: 'https://www.gradescope.com/',
+    },
+    {
+        caption: 'hack.chat',
+        image: 'https://hack.chat/apple-icon-180x180.png',
+        infoLink: 'https://hack.chat/',
+    },
+    {
+        caption: 'Idyll',
+        image: 'https://cdn.rawgit.com/idyll-lang/idyll-lang.github.io/src/images/logo.svg',
+        infoLink: 'https://idyll-lang.org/',
+    },
+    {
+        caption: 'Messenger',
+        image: 'https://en.facebookbrand.com/wp-content/uploads/2016/09/messenger_icon2.png',
+        infoLink: 'https://www.messenger.com/',
+    },
+    {
+        caption: 'Observable',
+        image: 'https://pbs.twimg.com/profile_images/970805785503477760/HfTZJiZo_400x400.jpg',
+        infoLink: 'https://beta.observablehq.com/',
+    },
+    {
+        caption: 'Quill',
+        image: 'https://quilljs.com/assets/images/logo.svg',
+        infoLink: 'https://quilljs.com/',
+    },
+    {
+        caption: 'Rocket.Chat',
+        image: 'https://cdn.rawgit.com/RocketChat/Rocket.Chat.Artwork/1f7b68b78878fcef47f32aa0965930a1c12cd0b4/Logos/icon.svg',
+        infoLink: 'https://rocket.chat/',
+    },
+    {
+        caption: 'Slides',
+        image: 'https://s3.amazonaws.com/uploads.uservoice.com/logo/design_setting/116173/original/slides-symbol-150x150.png',
+        infoLink: 'https://slides.com/',
+    },
+    {
+        caption: 'Spinning Numbers',
+        image: 'https://spinningnumbers.org/i/sn_logo2.svg',
+        infoLink: 'https://spinningnumbers.org/',
+    },
+    {
+        caption: 'StackEdit',
+        image: 'https://cdn.rawgit.com/benweet/stackedit/0632445a/src/assets/iconStackedit.svg',
+        infoLink: 'https://stackedit.io/',
     },
     {
         caption: 'Vade Mecum Shelf',
-        image: 'https://raw.githubusercontent.com/tonton-pixel/vade-mecum-shelf/master/icons/icon.png',
+        image: 'https://cdn.rawgit.com/tonton-pixel/vade-mecum-shelf/43013aec/icons/icon.png',
         infoLink: 'https://github.com/tonton-pixel/vade-mecum-shelf/',
-        pinned: true,
     },
 ];
 

website/static/css/custom.css

@@ -40,6 +40,28 @@
     text-decoration: none;
 }
 
+.showcaseSection .logos .imgbox {
+    width: 168px;   /* 128px for img + 20*2 for padding */
+    height: 168px;  /* 128px for img + 20*2 for padding */
+    position: relative;
+}
+
+@media only screen and (max-width: 735px) {
+    .showcaseSection .logos .imgbox {
+        width: 104px;   /* 64px for img + 20*2 for padding */
+        height: 104px;  /* 64px for img + 20*2 for padding */
+        position: relative;
+    }
+}
+
+.showcaseSection .logos .imgbox img {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+}
+
 /* Add special CSS for supported.md rendered on mobile */
 @media screen and (max-width: 480px) {
     /* We have two styles for very narrow screens.