Continue rethinking homepage

hackage-ui/components/icons/discourse.svg

@@ -1,9 +1,5 @@
 <svg focusable="false" viewBox="0 0 64 64" tabindex="-1">
-  <script xmlns="" />
+  <path d="M32.58 12.17c-6.867.004-13.225 3.62-16.738 9.52s-3.663 13.213-.395 19.252L11.92 52.286l12.663-2.86a19.49 19.49 0 1 0 8.015-37.256z" />
+  <path d="M44.454 16.208c6.114 6.482 7.05 16.286 2.274 23.81s-14.047 10.846-22.514 8.07L11.92 52.292l12.663-2.867c9.02 4.074 19.66.74 24.74-7.754s2.986-19.445-4.87-25.464z" />
   <path d="M32.27 0C14.9 0 .293 14.075.293 31.442V64l31.972-.03c17.36 0 31.442-14.617 31.442-31.978S49.614 0 32.27 0z" />
-  <path d="M32.58 12.17c-6.867.004-13.225 3.62-16.738 9.52s-3.663 13.213-.395 19.252L11.92 52.286l12.663-2.86a19.49 19.49 0 1 0 8.015-37.256z" fill="#5e5086" />
-  <path d="M48.042 19.802c5.404 7.085 5.312 16.934-.224 23.917s-15.103 9.32-23.235 5.676L11.92 52.292l12.89-1.523c8.546 5.006 19.488 2.804 25.43-5.12s4.996-19.044-2.2-25.848z" fill="#ffffff" />
-  <path d="M44.454 16.208c6.114 6.482 7.05 16.286 2.274 23.81s-14.047 10.846-22.514 8.07L11.92 52.292l12.663-2.867c9.02 4.074 19.66.74 24.74-7.754s2.986-19.445-4.87-25.464z" fill="#5e5086" />
-  <path d="M16.612 41.374a19.49 19.49 0 0 1 31.442-21.578 19.49 19.49 0 0 0-32.607 21.146L11.92 52.286z" fill="#5e5086" />
-  <path d="M15.447 40.942a19.49 19.49 0 0 1 29.007-24.734A19.49 19.49 0 0 0 14.244 40.64l-2.318 11.652z" fill="#ffffff" />
 </svg>

hackage-ui/components/layout/A.tsx

@@ -3,6 +3,7 @@
 import { LinkHTMLAttributes, forwardRef, ForwardedRef, useContext } from 'react';
 import Link, { LinkProps } from 'next/link';
 import AppContext from '../AppContext';
+import omit from 'lodash/omit';
 
 type ExtAProps = LinkHTMLAttributes<HTMLAnchorElement> & { analytics: { featureName: string, eventParams: Gtag.EventParams } };
 type AProps = ExtAProps & LinkProps;
@@ -14,7 +15,7 @@ export const ExtA = forwardRef((props: ExtAProps, ref: ForwardedRef<HTMLAnchorEl
   return (
     <a
       ref={ref}
-      {...props}
+      {...omit(props, 'analytics')}
       onClick={(e) => {
         appContext.analytics?.gtag('event', `FeatureUsed`, {
           description: props.href,

hackage-ui/components/pages/home/HomePage.module.css

@@ -10,7 +10,7 @@
   background-color: var(--purple-color-2);
   position: relative;
   overflow: hidden;
-  padding-bottom: 64rem;
+  padding-bottom: 8rem;
 }
 
 .greeting:after {
@@ -46,6 +46,10 @@
   padding: 32rem 24rem;
 }
 
+.content {
+  padding-top: 48rem;
+}
+
 .packageLists {
   display: flex;
   margin: 0 auto;
@@ -60,8 +64,34 @@
   max-width: var(--max-content-width);
   margin: auto;
   margin-bottom: 24rem;
+  display: flex;
+  align-items: center;
 }
 
+.packageListsHeaderLink {
+  display: flex;
+  align-items: flex-end;
+  font-weight: normal;
+  font-size: 14rem;
+  justify-content: center;
+  border-radius: 6rem;
+  background-color: var(--purple-color-2);
+  color: #fff;
+  padding: 8rem 18rem;
+  margin-left: 24rem;
+  box-shadow: 0rem 2rem 4rem rgb(0 0 0 / 27%);
+}
+
+.packageListsHeaderIcon {
+  position: relative;
+  top: -1rem;
+}
+.packageListsHeaderIcon svg {
+  width: 18rem;
+  height: 18rem;
+  margin-right: 8rem;
+  fill: #fff;
+}
 
 .packageList {
   display: flex;

hackage-ui/components/pages/home/HomePage.tsx

@@ -3,11 +3,13 @@ import s from './HomePage.module.css';
 import SidebarButton from "../../forms/SidebarButton"; // Temporary here.
 import GitHubIcon from '!!raw-loader!../../icons/github.svg';
 import TwitterIcon from '!!raw-loader!../../icons/twitter.svg';
+import DiscourseIcon from '!!raw-loader!../../icons/discourse.svg';
 import Footer from "../../layout/Footer";
 import SvgIcon from "../../icons/SVGIcon";
 import VerticalList, { Item } from "../../widgets/VerticalList";
 import AppContext from "../../AppContext";
 import { useContext, useEffect } from "react";
+import { ExtA } from "../../layout/A";
 
 export type HomeProps = {
   editorsPick: Item[]
@@ -39,84 +41,87 @@ const Home = (props: HomeProps) => {
       <div className={s.greeting}>
         <div className={s.greetingContent}>
           <h1 className={s.greetingHeader}>The Haskell Community’s<br /> Home Page</h1>
-        </div>
-      </div>
-      <div className={s.gettingStarted}>
-        <div style={{ display: 'flex' }}>
-          <SidebarButton
-            onClick={() => { }} href="https://github.com/visortelle/hackage-ui/issues/"
-            overrides={{ style: { flex: 'initial', backgroundColor: 'var(--text-color)', marginBottom: '12rem', justifyContent: 'flex-start', padding: '12rem 24rem', fontSize: '18rem', marginRight: '24rem' } }}
-          >
-            <SvgIcon svg={GitHubIcon} />
-            <div>Contribute on GitHub</div>
-          </SidebarButton>
 
-          <SidebarButton
-            onClick={() => { }} href="https://twitter.com/HackageUI"
-            overrides={{ style: { flex: 'initial', backgroundColor: '#00ACEE', marginBottom: '12rem', justifyContent: 'flex-start', padding: '12rem 24rem', fontSize: '18rem' } }}
-          >
-            <SvgIcon svg={TwitterIcon} />
-            <div>Follow us on Twitter</div>
-          </SidebarButton>
-        </div>
-        <div style={{ width: '48rem' }}></div>
-        <div>
+          <div className={s.gettingStarted}>
+            <SidebarButton
+              onClick={() => { }} href="https://github.com/visortelle/hackage-ui/issues/"
+              overrides={{ style: { flex: 'initial', backgroundColor: 'var(--text-color)', marginBottom: '12rem', justifyContent: 'flex-start', padding: '12rem 24rem', fontSize: '18rem', marginRight: '24rem' } }}
+            >
+              <SvgIcon svg={GitHubIcon} />
+              <div>Contribute on GitHub</div>
+            </SidebarButton>
 
-        </div>
-      </div>
-
-      <div className={s.packageLists}>
-
-        <div className={s.packageList}>
-          <h3 className={s.packageListHeader}>⭐️ Editor&apos;s Pick</h3>
-          <VerticalList items={props.editorsPick} getHref={(item) => `/package/${item.title}`} count={props.packageListsSize} analytics={{ screenName }} linksType="external" />
-        </div>
-
-        <div className={s.packageList}>
-          <h3 className={s.packageListHeader}>Haskell Jobs</h3>
-          <VerticalList items={[]} getHref={(item) => `/package/${item.title}`} count={10} analytics={{ screenName }} linksType="external" />
-        </div>
-      </div>
-
-
-      <h2 className={s.packageListsHeader}>Community</h2>
-      <div className={s.packageLists}>
-
-        <div className={s.packageList}>
-          <h3 className={s.packageListHeader}>🔥 Hot</h3>
-          <VerticalList items={props.community.latest} getHref={(item) => `/package/${item.title}`} count={props.packageListsSize} analytics={{ screenName }} linksType="external" />
-        </div>
-
-        <div className={s.packageList}>
-          <h3 className={s.packageListHeader}>⏰ Latest</h3>
-          <VerticalList items={props.community.latest} getHref={(item) => `/package/${item.title}`} count={props.packageListsSize} analytics={{ screenName }} linksType="external" />
+            <SidebarButton
+              onClick={() => { }} href="https://twitter.com/HackageUI"
+              overrides={{ style: { flex: 'initial', backgroundColor: '#00ACEE', marginBottom: '12rem', justifyContent: 'flex-start', padding: '12rem 24rem', fontSize: '18rem' } }}
+            >
+              <SvgIcon svg={TwitterIcon} />
+              <div>Follow us on Twitter</div>
+            </SidebarButton>
+          </div>
         </div>
 
       </div>
 
-      <h2 className={s.packageListsHeader}>
-        📦 Packages
-        <span style={{ opacity: '0.66', marginLeft: '8rem', fontSize: '18rem' }}>{props.packages.totalCount} total</span> {/* TODO - make it a link to the all packages list */}
-      </h2>
-      <div className={s.packageLists}>
-        <div className={s.packageList}>
-          <h3 className={s.packageListHeader}>Most Downloaded</h3>
-          <VerticalList items={props.packages.top} getHref={(item) => `/package/${item.title}`} count={props.packageListsSize} analytics={{ screenName }} linksType="internal" />
+      <div className={s.content}>
+
+        <h2 className={s.packageListsHeader}>
+          Community
+          <ExtA href="https://discourse.haskell.org/" analytics={{ featureName: 'GoToDiscourse', eventParams: {} }} className={s.packageListsHeaderLink}>
+            <div className={s.packageListsHeaderIcon}><SvgIcon svg={DiscourseIcon} /></div>discourse.haskell.org
+          </ExtA>
+        </h2>
+        <div className={s.packageLists}>
+
+          <div className={s.packageList}>
+            <h3 className={s.packageListHeader}>🔥 Hot</h3>
+            <VerticalList items={props.community.latest} getHref={(item) => `/package/${item.title}`} count={props.packageListsSize} analytics={{ screenName }} linksType="external" />
+          </div>
+
+          <div className={s.packageList}>
+            <h3 className={s.packageListHeader}>⏰ Latest</h3>
+            <VerticalList items={props.community.latest} getHref={(item) => `/package/${item.title}`} count={props.packageListsSize} analytics={{ screenName }} linksType="external" />
+          </div>
+
         </div>
 
-        <div className={s.packageList}>
-          <h3 className={s.packageListHeader}>Just Updated</h3>
-          <VerticalList items={props.packages.recentlyUpdated} getHref={(item) => `/package/${item.title}`} count={props.packageListsSize} analytics={{ screenName }} linksType="internal" />
+        <div className={s.packageLists}>
+
+          <div className={s.packageList}>
+            <h3 className={s.packageListHeader}>⭐️ Editor&apos;s Pick</h3>
+            <VerticalList items={props.editorsPick} getHref={(item) => `/package/${item.title}`} count={props.packageListsSize} analytics={{ screenName }} linksType="external" />
+          </div>
+
+          <div className={s.packageList}>
+            <h3 className={s.packageListHeader}>Haskell Jobs</h3>
+            <VerticalList items={[]} getHref={(item) => `/package/${item.title}`} count={10} analytics={{ screenName }} linksType="external" />
+          </div>
         </div>
 
-        <div className={s.packageList}>
-          <h3 className={s.packageListHeader}>Recently Visited</h3>
-          <VerticalList items={[]} getHref={() => '#'} count={0} analytics={{ screenName }} linksType="internal" />
-        </div>
-      </div>
+        <h2 className={s.packageListsHeader}>
+          📦 Packages
+          <span style={{ opacity: '0.66', marginLeft: '8rem', fontSize: '18rem' }}>{props.packages.totalCount} total</span> {/* TODO - make it a link to the all packages list */}
+        </h2>
+        <div className={s.packageLists}>
+          <div className={s.packageList}>
+            <h3 className={s.packageListHeader}>Most Downloaded</h3>
+            <VerticalList items={props.packages.top} getHref={(item) => `/package/${item.title}`} count={props.packageListsSize} analytics={{ screenName }} linksType="internal" />
+          </div>
 
-      <div className={s.footer}>
-        <Footer />
+          <div className={s.packageList}>
+            <h3 className={s.packageListHeader}>Just Updated</h3>
+            <VerticalList items={props.packages.recentlyUpdated} getHref={(item) => `/package/${item.title}`} count={props.packageListsSize} analytics={{ screenName }} linksType="internal" />
+          </div>
+
+          <div className={s.packageList}>
+            <h3 className={s.packageListHeader}>Recently Visited</h3>
+            <VerticalList items={[]} getHref={() => '#'} count={0} analytics={{ screenName }} linksType="internal" />
+          </div>
+        </div>
+
+        <div className={s.footer}>
+          <Footer />
+        </div>
       </div>
     </div>
   );