docs: add logo to overview (firebase#2944)

davcannon · Jul 13, 2020 · 93f3543 · 93f3543
1 parent 8bbc97e
commit 93f3543
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 5 deletions.
diff --git a/docs/overview.mdx b/docs/overview.mdx
@@ -2,9 +2,23 @@
 id: overview
 title: FlutterFire Overview
 sidebar_label: Overview
+hide_title: true
 ---
 
-Welcome to FlutterFire! 🔥
+<img
+  data-asset="false"
+  src="/img/flutterfire.svg"
+  alt="FlutterFire Logo"
+  style={{
+    height: 100,
+    display: "block",
+    margin: "0 auto",
+  }}
+/>
+
+<h1 style={{ textAlign: 'center', marginBottom: '4rem' }}>FlutterFire Overview</h1>
+
+Welcome to FlutterFire! 🔥 
 
 FlutterFire is a set of Flutter plugins which connect your Flutter application to [Firebase](https://firebase.com).
 
@@ -174,7 +188,7 @@ Once initialized, you're ready to get started using FlutterFire!
 
 ## Overriding Native SDK Versions
 
-FlutterFire internally sets the versions of the native SDKs that each module uses.  Each release is tested against a fixed
+FlutterFire internally sets the versions of the native SDKs that each module uses. Each release is tested against a fixed
 set of SDK version to ensure everything works as expected.
 
 If you wish to change these versions, you can manually override the native SDK versions
@@ -200,7 +214,6 @@ Open your `/ios/Podfile` and add any of the globals below to the top of the file
 $FirebaseSDKVersion = '21.1.0'
 ```
 
-
 ## Next Steps
 
 On its own the [`firebase_core`](!firebase_core) plugin provides basic functionality for usage with Firebase. FlutterFire is broken down

diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
@@ -36,6 +36,10 @@ module.exports = {
     },
     navbar: {
       title: 'FlutterFire',
+      logo: {
+        alt: 'FlutterFire Logo',
+        src: '/img/flutterfire_300x.png',
+      },
       links: [
         {
           to: 'docs/overview',

diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
@@ -70,7 +70,7 @@ function Home() {
           <h1>{siteConfig.title}</h1>
           <h2>{siteConfig.tagline}</h2>
           <div className={styles.actions}>
-            <Link to={`${siteConfig.baseUrl}docs`}>Get Started &raquo;</Link>
+            <Link to={`${siteConfig.baseUrl}docs/overview`}>Get Started &raquo;</Link>
             <Link to="https://github.com/firebaseextended/flutterfire">GitHub &raquo;</Link>
           </div>
         </div>

diff --git a/website/src/theme/MDXComponents/index.tsx b/website/src/theme/MDXComponents/index.tsx
@@ -1,8 +1,8 @@
 import React, { HTMLProps } from 'react';
 import Link from '@docusaurus/Link';
 import CodeBlock from '@theme/CodeBlock';
-import Heading from '@theme/Heading';
 import Tabs from '@theme/Tabs';
+import Heading from '@theme/Heading';
 import TabItem from '@theme/TabItem';
 import IdealImage from '@theme/IdealImage';
 import Zoom from 'react-medium-image-zoom';
@@ -41,6 +41,12 @@ export default {
   },
 
   img: (props: HTMLProps<HTMLImageElement>) => {
+    // @ts-ignore
+    if (props['data-asset'] === 'false') {
+      // @ts-ignore
+      return <img {...props} />;
+    }
+
     let alt = props.alt || '';
 
     // Prefix any alt tags with "hide:" to not show them as a caption