mirror of
https://github.com/visortelle/haskell-spotlight.git
synced 2024-09-11 12:05:29 +03:00
Continue rethinking homepage
This commit is contained in:
parent
62f7e85f8f
commit
66ddd8f9b4
@ -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>
|
||||
|
Before Width: | Height: | Size: 1002 B After Width: | Height: | Size: 510 B |
@ -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,
|
||||
|
@ -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;
|
||||
|
@ -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'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'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>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user