yipes, starting to modify react code

replacing SVGs with PNGs in HomepageFeatures

Author: kenstir

docusaurus.config.ts

@@ -4,7 +4,7 @@ import type * as Preset from '@docusaurus/preset-classic';
 
 const config: Config = {
   title: 'Hemlock Docs',
-  tagline: 'Hemlock is the mobile apps for Evergreen™ libraries',
+  tagline: 'Hemlock is the mobile app for Evergreen™ libraries',
   favicon: 'img/favicon.ico',
 
   url: 'https://kenstir.github.io',
@@ -65,21 +65,33 @@ const config: Config = {
       style: 'dark',
       links: [
         {
-          title: 'Related Repositories',
           items: [
             {
-              label: 'Android App Source Code',
+              label: 'Android App',
               href: 'https://github.com/kenstir/hemlock',
             },
+          ],
+        },{
+          items: [
             {
-              label: 'iOS App Source Code',
+              label: 'iOS App',
               href: 'https://github.com/kenstir/hemlock-ios',
             },
+          ],
+        },{
+          items: [
             {
-              label: 'Push Notification Service Source Code',
+              label: 'Push Notification Service',
               href: 'https://github.com/kenstir/hemlock-sendmsg',
             },
           ],
+        },{
+          items: [
+            {
+              label: 'Evergreen',
+              href: 'https://evergreen-ils.org/',
+            },
+          ],
         },
       ],
       copyright: `Copyright © ${new Date().getFullYear()} Kenneth H. Cox. Built with Docusaurus.`,

src/components/HomepageFeatures/index.tsx

@@ -4,48 +4,46 @@ import styles from './styles.module.css';
 
 type FeatureItem = {
   title: string;
-  Svg: React.ComponentType<React.ComponentProps<'svg'>>;
+  Img: React.ComponentType<React.ComponentProps<'png'>>;
   description: JSX.Element;
 };
 
 const FeatureList: FeatureItem[] = [
   {
-    title: 'Easy to Use',
-    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
+    title: 'Android',
+    Img: require('@site/static/img/screenshot-android.png').default,
     description: (
       <>
-        Docusaurus was designed from the ground up to be easily installed and
-        used to get your website up and running quickly.
+        Hemlock is a native Android app, written in Kotlin.
       </>
     ),
   },
   {
-    title: 'Focus on What Matters',
-    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
+    title: 'iOS',
+    Img: require('@site/static/img/screenshot-ios.png').default,
     description: (
       <>
-        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
-        ahead and move your docs into the <code>docs</code> directory.
+        Hemlock is a native iOS app, written in Swift.
       </>
     ),
   },
   {
-    title: 'Powered by React',
-    Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
+    title: 'Powered by Evergreen™',
+    Img: require('@site/static/img/screenshot-staffclient.png').default,
     description: (
       <>
-        Extend or customize your website layout by reusing React. Docusaurus can
-        be extended while reusing the same header and footer.
+        Hemlock uses the same Evergreen server
+        as the online catalog, so it never has stale data.
       </>
     ),
   },
 ];
 
-function Feature({title, Svg, description}: FeatureItem) {
+function Feature({title, Img, description}: FeatureItem) {
   return (
     <div className={clsx('col col--4')}>
       <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
+        <img className={styles.featureImg} src={Img} alt={title} />
       </div>
       <div className="text--center padding-horiz--md">
         <Heading as="h3">{title}</Heading>

src/components/HomepageFeatures/styles.module.css

@@ -5,7 +5,7 @@
   width: 100%;
 }
 
-.featureSvg {
-  height: 200px;
+.featureImg {
+  height: 420px;
   width: 200px;
 }

src/pages/index.tsx

@@ -16,6 +16,7 @@ function HomepageHeader() {
           {siteConfig.title}
         </Heading>
         <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <p className="hero__subtitle">These are the docs</p>
         <div className={styles.buttons}>
           <Link
             className="button button--secondary button--lg"