update logo, closes #64

gatsby-config.ts

@@ -17,6 +17,13 @@ export const plugins = [
       name: `content`,
     },
   },
+  {
+    resolve: `gatsby-source-filesystem`,
+    options: {
+      path: `${__dirname}/src/assets`,
+      name: `assets`,
+    },
+  },
   `gatsby-plugin-sharp`,
   {
     resolve: `gatsby-plugin-mdx`,

src/components/Logo.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { graphql, useStaticQuery } from 'gatsby';
+import Img from 'gatsby-image';
+
+export default function Logo(props) {
+  const data = useStaticQuery(graphql`
+    query {
+      file(relativePath: { eq: "logo.png" }) {
+        childImageSharp {
+          fixed(height: 36, quality: 100) {
+            ...GatsbyImageSharpFixed
+          }
+        }
+      }
+    }
+  `);
+  return (
+    <Img fixed={data.file.childImageSharp.fixed} alt="USACO Guide" {...props} />
+  );
+}

src/components/ModuleLayout/ModuleLayout.tsx

@@ -1,29 +1,25 @@
 import * as React from 'react';
 import Transition from '../Transition';
 import { useContext, useRef, useState } from 'react';
-// @ts-ignore
-import logo from '../../assets/logo.svg';
 import {
   ModuleFrequency,
   ModuleInfo,
   ModuleLinkInfo,
 } from '../../models/module';
 import { graphql, Link, useStaticQuery } from 'gatsby';
-import MODULE_ORDERING, {
-  Chapter,
-  SECTION_LABELS,
-} from '../../../content/ordering';
+import MODULE_ORDERING, { SECTION_LABELS } from '../../../content/ordering';
 import ModuleFrequencyDots from './ModuleFrequencyDots';
 import ContactUsSlideover from '../ContactUsSlideover/ContactUsSlideover';
 import MarkCompleteButton from './MarkCompleteButton';
 import ModuleConfetti from './ModuleConfetti';
 import TextTooltip from '../Tooltip/TextTooltip';
 import UserDataContext, { UserLang } from '../../context/UserDataContext';
-import { NavLinkGroup, SidebarNav } from './SidebarNav/SidebarNav';
+import { SidebarNav } from './SidebarNav/SidebarNav';
 import { graphqlToModuleLinks } from '../../utils/utils';
 import ModuleLayoutContext from '../../context/ModuleLayoutContext';
 import TableOfContentsSidebar from './TableOfContents/TableOfContentsSidebar';
 import TableOfContentsBlock from './TableOfContents/TableOfContentsBlock';
+import Logo from '../Logo';
 
 const Frequency = ({ frequency }: { frequency: ModuleFrequency }) => {
   const textColors = [
@@ -377,7 +373,7 @@ export default function ModuleLayout({
                 </div>
                 <div className="flex-1 h-0 pt-5 overflow-y-auto">
                   <Link className="flex-shrink-0 flex items-center px-4" to="/">
-                    <img className="h-12 w-auto" src={logo} alt="USACO Guide" />
+                    <Logo />
                   </Link>
                   <div className="mt-4 px-6">
                     <Breadcrumbs />
@@ -407,8 +403,8 @@ export default function ModuleLayout({
           style={{ width: '20rem' }}
         >
           <div className="h-0 flex-1 flex flex-col pt-5 overflow-y-auto">
-            <Link className="flex items-center flex-shrink-0 px-4" to="/">
-              <img className="h-12 w-auto" src={logo} alt="USACO Guide" />
+            <Link className="flex items-center flex-shrink-0 px-4 pb-2" to="/">
+              <Logo />
             </Link>
             {/* Sidebar component, swap this element with another sidebar if you like */}
             <nav className="mt-2 flex-1 bg-white">

src/components/TopNavigationBar.tsx

@@ -1,11 +1,8 @@
 import * as React from 'react';
-// @ts-ignore
-import logo from '../assets/logo.svg';
-// @ts-ignore
-import logoSquare from '../assets/logo-square.png';
 import { useState } from 'react';
 import { SECTION_LABELS, SECTIONS } from '../../content/ordering';
 import { Link } from 'gatsby';
+import Logo from './Logo';
 
 export default function TopNavigationBar() {
   const [isMobileNavOpen, setIsMobileNavOpen] = useState(false);
@@ -35,7 +32,7 @@ export default function TopNavigationBar() {
               {/*  src={logo}*/}
               {/*  alt="USACO Guide"*/}
               {/*/>*/}
-              <img className="block h-12 w-auto" src={logo} alt="USACO Guide" />
+              <Logo className="block" />
             </Link>
             <div className="hidden lg:ml-6 xl:ml-12 lg:flex space-x-8">
               {links.map((link, idx) => (

src/pages/dashboard.tsx

@@ -1,10 +1,8 @@
 import * as React from 'react';
-import { graphql, Link, PageProps } from 'gatsby';
+import { graphql, PageProps } from 'gatsby';
 import Layout from '../components/layout';
 import SEO from '../components/seo';
-import { useState } from 'react';
 import DashboardProgress from '../components/Dashboard/DashboardProgress';
-import SectionProgressBar from '../components/Dashboard/SectionProgressBar';
 import UserDataContext from '../context/UserDataContext';
 import WelcomeBackBanner from '../components/Dashboard/WelcomeBackBanner';
 import {

src/templates/syllabusTemplate.tsx

@@ -65,7 +65,6 @@ export default function Template(props) {
     (acc, cur) => [...acc, ...cur.items.map(x => x.frontmatter.id)],
     []
   );
-  console.log(moduleIDs);
   let moduleProgressInfo = getProgressInfo(
     moduleIDs,
     userProgressOnModules,