dr_domi/udlbook
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #203 from tomheaton/more-news

Browse Source 
website: changes to news section
This commit is contained in:
udlbook
2024-06-21 09:51:51 -04:00
committed by GitHub
parent c3ce38410c d1df6426b2
commit 9aeda14efa
8 changed files with 160 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc.cjs
View File

@@ -1,6 +1,6 @@
module.exports = { module.exports = {
root: true, root: true,
env: { browser: true, es2020: true }, env: { browser: true, es2020: true, node: true },
extends: [ extends: [
"eslint:recommended", "eslint:recommended",
"plugin:react/recommended", "plugin:react/recommended",

1
package.json
View File

@@ -3,6 +3,7 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"homepage": "https://udlbook.github.io/udlbook", "homepage": "https://udlbook.github.io/udlbook",
"type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "vite build", "build": "vite build",

4
src/components/Footer/index.jsx
View File

@@ -33,7 +33,7 @@ const socials = [
]; ];
export default function Footer() { export default function Footer() {
const toggleHome = () => { const scrollToHome = () => {
scroll.scrollToTop(); scroll.scrollToTop();
}; };
@@ -43,7 +43,7 @@ export default function Footer() {
<FooterWrap> <FooterWrap>
<SocialMedia> <SocialMedia>
<SocialMediaWrap> <SocialMediaWrap>
<SocialLogo to="/udlbook" onClick={toggleHome}> <SocialLogo to="/udlbook" onClick={scrollToHome}>
Understanding Deep Learning Understanding Deep Learning
</SocialLogo> </SocialLogo>
<WebsiteRights> <WebsiteRights>

18
src/components/HeroSection/HeroElements.jsx
View File

@@ -274,3 +274,21 @@ export const HeroFollowBlock = styled.div`
font-size: 14px; font-size: 14px;
} }
`; `;
export const HeroNewsMoreButton = styled.button`
background: #fff;
color: #000;
font-size: 16px;
padding: 10px 24px;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 20px;
margin-bottom: 20px;
align-self: center;
&:hover {
background: #000;
color: #fff;
}
`;

178
src/components/HeroSection/index.jsx
View File

@@ -13,14 +13,15 @@ import {
HeroNewsItem, HeroNewsItem,
HeroNewsItemContent, HeroNewsItemContent,
HeroNewsItemDate, HeroNewsItemDate,
HeroNewsMoreButton,
HeroNewsTitle, HeroNewsTitle,
HeroRow, HeroRow,
Img, Img,
UDLLink, UDLLink,
} from "@/components/HeroSection/HeroElements"; } from "@/components/HeroSection/HeroElements";
import img from "@/images/F23.prince.learning.turquoise.jpg"; import img from "@/images/book_cover.jpg";
import { useState } from "react";
export default function HeroSection() {
const citation = ` const citation = `
@book{prince2023understanding, @book{prince2023understanding,
author = "Simon J.D. Prince", author = "Simon J.D. Prince",
@@ -31,103 +32,81 @@ export default function HeroSection() {
} }
`; `;
return ( const news = [
<HeroContainer id="home"> {
<HeroContent> date: "05/22/24",
<HeroRow> content: (
<HeroColumn1>
<HeroNewsBlock>
<HeroNewsTitle>RECENT NEWS:</HeroNewsTitle>
<HeroNewsItem>
<HeroNewsItemDate>05/22/24</HeroNewsItemDate>
<HeroNewsItemContent> <HeroNewsItemContent>
{" "}
New{" "} New{" "}
<UDLLink href="https://www.borealisai.com/research-blogs/neural-tangent-kernel-applications/"> <UDLLink href="https://borealisai.com/research-blogs/neural-tangent-kernel-applications/">
{" "} blog
blog{" "}
</UDLLink>{" "} </UDLLink>{" "}
about the applications of the neural tangent kernel. about the applications of the neural tangent kernel.
</HeroNewsItemContent> </HeroNewsItemContent>
</HeroNewsItem> ),
},
<HeroNewsItem> {
<HeroNewsItemDate>05/10/24</HeroNewsItemDate> date: "05/10/24",
content: (
<HeroNewsItemContent> <HeroNewsItemContent>
{" "}
Positive{" "} Positive{" "}
<UDLLink href="https://github.com/udlbook/udlbook/blob/main/public/NMI_Review.pdf"> <UDLLink href="https://github.com/udlbook/udlbook/blob/main/public/NMI_Review.pdf">
review review
</UDLLink>{" "} </UDLLink>{" "}
in Nature Machine Intelligence. in Nature Machine Intelligence.
</HeroNewsItemContent> </HeroNewsItemContent>
</HeroNewsItem> ),
},
{/* <HeroNewsItem> // {
<HeroNewsItemDate>03/12/24</HeroNewsItemDate> // date: "03/12/24",
<HeroNewsItemContent> // content: <HeroNewsItemContent>Book now available again.</HeroNewsItemContent>,
{" "} // },
Book now available again. {
</HeroNewsItemContent> date: "02/21/24",
</HeroNewsItem> content: (
<HeroNewsItem>
<HeroNewsItemDate>02/21/24</HeroNewsItemDate>
<HeroNewsItemContent> <HeroNewsItemContent>
New blog about the{" "} New blog about the{" "}
<UDLLink href="https://www.borealisai.com/research-blogs/the-neural-tangent-kernel/"> <UDLLink href="https://borealisai.com/research-blogs/the-neural-tangent-kernel/">
Neural Tangent Kernel.
</UDLLink>
</HeroNewsItemContent>
<HeroNewsItemContent> Book now available again.</HeroNewsItemContent>
</HeroNewsItem> */}
<HeroNewsItem>
<HeroNewsItemDate>02/21/24</HeroNewsItemDate>
<HeroNewsItemContent>
New blog about the{" "}
<UDLLink href="https://www.borealisai.com/research-blogs/the-neural-tangent-kernel/">
Neural Tangent Kernel Neural Tangent Kernel
</UDLLink> </UDLLink>
. .
</HeroNewsItemContent> </HeroNewsItemContent>
</HeroNewsItem> ),
{/* <HeroNewsItem> },
<HeroNewsItemDate>02/15/24</HeroNewsItemDate> // {
// date: "02/15/24",
// content: (
// <HeroNewsItemContent>
// First printing of book has sold out in most places. Second printing available
// mid-March.
// </HeroNewsItemContent>
// ),
// },
{
date: "01/29/24",
content: (
<HeroNewsItemContent> <HeroNewsItemContent>
{" "}
First printing of book has sold out in most places. Second
printing available mid-March.
</HeroNewsItemContent>
</HeroNewsItem>
<HeroNewsItemContent> First printing of book has sold out in most places. Second printing available mid-March.</HeroNewsItemContent>
</HeroNewsItem> */}
<HeroNewsItem>
<HeroNewsItemDate>01/29/24</HeroNewsItemDate>
<HeroNewsItemContent>
{" "}
New blog about{" "} New blog about{" "}
<UDLLink href="https://www.borealisai.com/research-blogs/gradient-flow/"> <UDLLink href="https://borealisai.com/research-blogs/gradient-flow/">
{" "}
gradient flow gradient flow
</UDLLink>{" "} </UDLLink>{" "}
published. published.
</HeroNewsItemContent> </HeroNewsItemContent>
</HeroNewsItem> ),
<HeroNewsItem> },
<HeroNewsItemDate>12/26/23</HeroNewsItemDate> {
date: "12/26/23",
content: (
<HeroNewsItemContent> <HeroNewsItemContent>
{" "}
Machine Learning Street Talk{" "} Machine Learning Street Talk{" "}
<UDLLink href="https://www.youtube.com/watch?v=sJXn4Cl4oww"> <UDLLink href="https://youtube.com/watch?v=sJXn4Cl4oww">podcast</UDLLink> discussing
{" "} book.
podcast{" "}
</UDLLink>{" "}
discussing book.
</HeroNewsItemContent> </HeroNewsItemContent>
</HeroNewsItem> ),
<HeroNewsItem> },
<HeroNewsItemDate>12/19/23</HeroNewsItemDate> {
date: "12/19/23",
content: (
<HeroNewsItemContent> <HeroNewsItemContent>
Deeper Insights{" "} Deeper Insights{" "}
<UDLLink href="https://podcasts.apple.com/us/podcast/understanding-deep-learning-with-simon-prince/id1669436318?i=1000638269385"> <UDLLink href="https://podcasts.apple.com/us/podcast/understanding-deep-learning-with-simon-prince/id1669436318?i=1000638269385">
@@ -135,35 +114,61 @@ export default function HeroSection() {
</UDLLink>{" "} </UDLLink>{" "}
discussing book. discussing book.
</HeroNewsItemContent> </HeroNewsItemContent>
</HeroNewsItem> ),
<HeroNewsItem> },
<HeroNewsItemDate>12/06/23</HeroNewsItemDate> {
date: "12/06/23",
content: (
<HeroNewsItemContent> <HeroNewsItemContent>
{" "} <UDLLink href="https://borealisai.com/news/understanding-deep-learning/">
<UDLLink href="https://www.borealisai.com/news/understanding-deep-learning/">
Interview Interview
</UDLLink>{" "} </UDLLink>{" "}
with Borealis AI. with Borealis AI.
</HeroNewsItemContent> </HeroNewsItemContent>
</HeroNewsItem> ),
<HeroNewsItem> },
<HeroNewsItemDate>12/05/23</HeroNewsItemDate> {
date: "12/05/23",
content: (
<HeroNewsItemContent> <HeroNewsItemContent>
{" "}
Book released by{" "} Book released by{" "}
<UDLLink href="https://mitpress.mit.edu/9780262048644/understanding-deep-learning/"> <UDLLink href="https://mitpress.mit.edu/9780262048644/understanding-deep-learning/">
The MIT Press The MIT Press
</UDLLink> </UDLLink>
. .
</HeroNewsItemContent> </HeroNewsItemContent>
),
},
];
export default function HeroSection() {
const [showMoreNews, setShowMoreNews] = useState(false);
const toggleShowMore = () => {
setShowMoreNews((p) => !p);
};
return (
<HeroContainer id="home">
<HeroContent>
<HeroRow>
<HeroColumn1>
<HeroNewsBlock>
<HeroNewsTitle>RECENT NEWS:</HeroNewsTitle>
{(showMoreNews ? news : news.slice(0, 7)).map((item, index) => (
<HeroNewsItem key={index}>
<HeroNewsItemDate>{item.date}</HeroNewsItemDate>
{item.content}
</HeroNewsItem> </HeroNewsItem>
))}
<HeroNewsMoreButton onClick={toggleShowMore}>
{showMoreNews ? "Show less" : "Show more"}
</HeroNewsMoreButton>
</HeroNewsBlock> </HeroNewsBlock>
<HeroCitationTitle>CITATION:</HeroCitationTitle> <HeroCitationTitle>CITATION:</HeroCitationTitle>
<HeroCitationBlock> <HeroCitationBlock>
<pre> <pre>
<code> <code>{citation}</code>
<>{citation}</>
</code>
</pre> </pre>
</HeroCitationBlock> </HeroCitationBlock>
<HeroFollowBlock> <HeroFollowBlock>
@@ -177,11 +182,12 @@ export default function HeroSection() {
</HeroColumn1> </HeroColumn1>
<HeroColumn2> <HeroColumn2>
<HeroImgWrap> <HeroImgWrap>
<Img src={img} alt="UDL Book" /> <Img src={img} alt="Book Cover" />
</HeroImgWrap> </HeroImgWrap>
<HeroLink href="https://github.com/udlbook/udlbook/releases/download/v4.0.1/UnderstandingDeepLearning_05_27_24_C.pdf"> <HeroLink href="https://github.com/udlbook/udlbook/releases/download/v4.0.1/UnderstandingDeepLearning_05_27_24_C.pdf">
Download full pdf (27 May 2024) Download full PDF (27 May 2024)
</HeroLink> </HeroLink>
<br />
<HeroDownloadsImg <HeroDownloadsImg
src="https://img.shields.io/github/downloads/udlbook/udlbook/total" src="https://img.shields.io/github/downloads/udlbook/udlbook/total"
alt="download stats shield" alt="download stats shield"

12
src/components/Navbar/index.jsx
View File

@@ -6,7 +6,7 @@ import {
NavLinks, NavLinks,
NavLogo, NavLogo,
NavMenu, NavMenu,
} from "./NavbarElements"; } from "@/components/Navbar/NavbarElements";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { FaBars } from "react-icons/fa"; import { FaBars } from "react-icons/fa";
import { IconContext } from "react-icons/lib"; import { IconContext } from "react-icons/lib";
@@ -17,11 +17,7 @@ export default function Navbar({ toggle }) {
useEffect(() => { useEffect(() => {
const changeNav = () => { const changeNav = () => {
if (window.scrollY >= 80) { setScrollNav(window.scrollY >= 80);
setScrollNav(true);
} else {
setScrollNav(false);
}
}; };
window.addEventListener("scroll", changeNav); window.addEventListener("scroll", changeNav);
@@ -31,7 +27,7 @@ export default function Navbar({ toggle }) {
}; };
}, []); }, []);
const toggleHome = () => { const scrollToHome = () => {
scroll.scrollToTop(); scroll.scrollToTop();
}; };
@@ -40,7 +36,7 @@ export default function Navbar({ toggle }) {
<IconContext.Provider value={{ color: "#fff" }}> <IconContext.Provider value={{ color: "#fff" }}>
<Nav scrollNav={scrollNav}> <Nav scrollNav={scrollNav}>
<NavbarContainer> <NavbarContainer>
<NavLogo to="/udlbook/" onClick={toggleHome}> <NavLogo to="/udlbook/" onClick={scrollToHome}>
<h1> Understanding Deep Learning </h1> <h1> Understanding Deep Learning </h1>
</NavLogo> </NavLogo>
<MobileIcon onClick={toggle}> <MobileIcon onClick={toggle}>

0
src/images/F23.prince.learning.turquoise.jpg → src/images/book_cover.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 282 KiB

After

Width:  |  Height:  |  Size: 282 KiB

2
src/pages/index.jsx
View File

@@ -12,7 +12,7 @@ export default function Index() {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const toggle = () => { const toggle = () => {
setIsOpen(!isOpen); setIsOpen((p) => !p);
}; };
return ( return (