Skip to content

Commit

Permalink
chore: show news feed history (#21)
Browse files Browse the repository at this point in the history 
* chore: show news feed history

* chore: footer and more history
  • Loading branch information
@wodeni
wodeni authored Jan 3, 2024
1 parent 5154b3f commit 2f4029e
Show file tree
Hide file tree
Showing 3 changed files with 182 additions and 31 deletions.
84 changes: 65 additions & 19 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import edgeworth from "./assets/edgeworth.svg";
import mathdiagrams from "./assets/mathdiagrams.webp";
import Balls from "./Balls";
import Papers, { Paper } from "./Papers";
import { HTMLProps, ReactNode, useEffect, useState } from "react";
import { HTMLProps, ReactNode, useEffect, useRef, useState } from "react";
import { HashLink } from "react-router-hash-link";
import news from "./News";
import A from "./A";
Expand All @@ -22,26 +22,52 @@ import theme from "./theme";

const NewsFeed = () => {
const today = new Date();
const [isScrolled, setIsScrolled] = useState(false);
const scrollableDivRef = useRef<HTMLDivElement>(null);

useEffect(() => {
const handleScroll = () => {
if (scrollableDivRef.current !== null) {
const isAtTop = scrollableDivRef.current.scrollTop === 0;
setIsScrolled(!isAtTop);
}
};
if (scrollableDivRef.current !== null) {
const div = scrollableDivRef.current;
div.addEventListener("scroll", handleScroll);
// Cleanup function
return () => {
div.removeEventListener("scroll", handleScroll);
};
}
}, []);

return (
<div className="my-2">
{news
.filter(
({ time }) => time.getUTCFullYear() >= today.getUTCFullYear() - 1
)
.map(({ time, msg }, i) => (
<div
className="py-2 text-gray-500 md:text-sm dark:text-neutral-300"
key={`news-${i}`}
>
<div className="w-fit bg-gray-100 text-gray-400 rounded py-px px-1 dark:text-neutral-400 dark:bg-zinc-700">
{time.toLocaleString("default", {
month: "long",
year: "numeric",
})}
<div className="my-2 relative">
{isScrolled && (
<div className="invisible md:visible absolute top-0 left-0 right-0 h-10 bg-gradient-to-b from-white dark:from-zinc-800 to-transparent"></div>
)}
<div ref={scrollableDivRef} className="overflow-auto max-h-[50vh]">
{news
// .filter(
// ({ time }) => time.getUTCFullYear() >= today.getUTCFullYear() - 1
// )
.map(({ time, msg }, i) => (
<div
className="py-2 text-gray-500 md:text-sm dark:text-neutral-300 "
key={`news-${i}`}
>
<div className="w-fit bg-gray-100 text-gray-400 rounded py-px px-1 dark:text-neutral-400 dark:bg-zinc-700">
{time.toLocaleString("default", {
month: "long",
year: "numeric",
})}
</div>
{msg}
</div>
{msg}
</div>
))}
))}
</div>
<div className="invisible md:visible absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-white dark:from-zinc-800 to-transparent"></div>
</div>
);
};
Expand Down Expand Up @@ -288,6 +314,25 @@ const Section = ({
</div>
);
};
const Footer = () => (
<div className="md:col-span-3 mt-8 w-full flex flex-col text-sm justify-center items-center text-gray-500 dark:text-neutral-400">
<span className="mb-2">
© {new Date().getUTCFullYear()} Wode "Nimo" Ni.
{/* Last updated on{" "}
{new Date(document.lastModified).toLocaleString("default", {
month: "long",
day: "numeric",
year: "numeric",
})}
. */}
</span>
<div className={`flex items-start color-primary text-sm`}>
<Twitter />
<GitHub />
<Email />
</div>
</div>
);

const App: React.FC = () => {
const [darkMode, setDarkMode] = useState(
Expand Down Expand Up @@ -384,6 +429,7 @@ const App: React.FC = () => {
<NewsFeed />
</Section>
</div>
<Footer />
</div>
);
};
Expand Down
118 changes: 106 additions & 12 deletions src/News.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,18 +79,112 @@ const news: News[] = [
</>
),
},
{
time: new Date("2020-05-01"),
msg: (
<>
I'll join <A href="https://microsoft.github.io/prose/">PROSE</A> @
Microsoft Research as a Research Intern this summer!
</>
),
},
{
time: new Date("2020-04-01"),
msg: (
<>
The first conference paper on{" "}
<A href="https://penrose.cs.cm">Penrose</A>,{" "}
<i>"Penrose: From Mathematical Notation to Beautiful Diagrams,"</i> was
accepted by <A href="https://s2020.siggraph.org/">SIGGRAPH 2020</A>!
</>
),
},
{
time: new Date("2020-03-01"),
msg: (
<>
The CHI paper won a <b>Best Paper Honourable Mention award</b> 🏆!
</>
),
},
{
time: new Date("2020-01-01"),
msg: (
<>
Our paper{" "}
<i>
"How Domain Experts Create Conceptual Diagrams and Implications for
Tool Design"
</i>{" "}
was accepted by <A href="http://chi2020.acm.org/">CHI 2020</A> 🏖️!
</>
),
},
{
time: new Date("2019-10-01"),
msg: (
<>
I presented our papers at{" "}
<A href="http://plateau-workshop.org/">PLATEAU 2019</A> with Max and
Anael!
</>
),
},
{
time: new Date("2019-05-01"),
msg: (
<>
I finished 7th at the 2019{" "}
<A href="https://en.wikipedia.org/wiki/ACUI_Collegiate_Pocket_Billiards_National_Championship">
ACUI Collegiate Nine-ball National Championship
</A>{" "}
🎱!
</>
),
},
{
time: new Date("2019-05-01"),
msg: (
<>
Anael Kuperwajs,{" "}
<A href="https://www.linkedin.com/in/courtney-e-miller/">
Courtney Miller
</A>
, <A href="https://a9.io/">Max Krieger</A> will join us as{" "}
<A href="https://www.cmu.edu/scs/isr/reuse/">REUSE</A> students this
summer. Welcome!
</>
),
},
{
time: new Date("2018-04-01"),
msg: <>I will join CMU as a Ph.D. student!</>,
},
{
time: new Date("2018-01-01"),
msg: <>I will be one of the TAs for COMS 4115 again in Spring 2018.</>,
},
{
time: new Date("2017-10-01"),
msg: (
<>
Gave a talk at{" "}
<A href="https://2017.splashcon.org/event/dsldi-2017-substance-and-style-domain-specific-languages-for-mathematical-diagrams">
DSLDI 2017
</A>{" "}
in Vancouver, Canada.
</>
),
},
{
time: new Date("2017-05-01"),
msg: (
<>
Joined <A href="http://isri.cmu.edu/education/reu-se/">REU-SE</A>, a
summer research program, at Carnegie Mellon University.
</>
),
},
];

export default news;

// <!-- - **May 2020** I'll join [PROSE](https://microsoft.github.io/prose/) @ Microsoft Research as a Research Intern this summer! -->
// <!-- - **Apr 2020** The first conference paper on [Penrose](https://github.com/penrose/penrose), _"Penrose: From Mathematical Notation to Beautiful Diagrams,"_ was accepted by [SIGGRAPH 2020](https://s2020.siggraph.org/)! -->
// <!-- - **Mar 2020** The CHI paper won a Best Paper Honourable Mention award🏆! -->
// <!-- - **Jan 2020** Our paper _"How Domain Experts Create Conceptual Diagrams and Implications for Tool Design"_ was ~~conditionally~~ accepted by [CHI 2020](http://chi2020.acm.org/)🏖️! -->
// <!-- - **Oct 2019** I presented our papers at [PLATEAU 2019](http://plateau-workshop.org/) with Max and Anael! -->
// <!-- - **May 2019** I finished 7th at the 2019 [ACUI Collegiate Nine-ball National Championship](https://en.wikipedia.org/wiki/ACUI_Collegiate_Pocket_Billiards_National_Championship):8ball:! -->
// <!-- - **May 2019** Anael Kuperwajs, [Courtney Miller](https://www.linkedin.com/in/courtney-e-miller/), [Max Krieger](https://a9.io/) will join us as [REUSE](https://www.cmu.edu/scs/isr/reuse/) students this summer. Welcome! -->
// <!-- - **April 2018** I will join CMU as a Ph.D. student! -->
// <!-- - **January 2018** I will be one of the TAs for COMS 4115 again in Spring 2018. -->
// <!-- - **October 2017** Gave a talk at [DSLDI 2017](https://2017.splashcon.org/event/dsldi-2017-substance-and-style-domain-specific-languages-for-mathematical-diagrams) in Vancouver, Canada. -->
// <!-- - __May 2017__ Joined [REU-SE](http://isri.cmu.edu/education/reu-se/), a summer research program, at Carnegie Mellon University. -->
11 changes: 11 additions & 0 deletions src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,14 @@
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import url("https://fonts.googleapis.com/css2?family=Open+Sans");

/* For Webkit-based browsers (Chrome, Safari and Opera) */
.scrollbar-hide::-webkit-scrollbar {
display: none;
}

/* For IE, Edge and Firefox */
.scrollbar-hide {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}

0 comments on commit 2f4029e

Please sign in to comment.