Skip to content

Commit d644281

Browse files
kauskokausko
committed
feat: paper dropdown links in hero and footer
1 parent 62af725 commit d644281

File tree

3 files changed

+129
-59
lines changed

3 files changed

+129
-59
lines changed

‎docusaurus.config.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,10 @@ const config: Config = {
105105
label: "GitHub",
106106
href: "https://github.com/ProvenanceWidgets/ProvenanceWidgets",
107107
},
108+
{
109+
label: "2024 TVCG paper",
110+
href: "https://doi.org/10.1109/TVCG.2024.3456144",
111+
},
108112
{
109113
label: "arXiv Preprint",
110114
href: "https://arxiv.org/abs/2407.17431",

‎src/pages/index.module.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
padding: 4rem 0;
88
text-align: center;
99
position: relative;
10-
overflow: hidden;
1110
}
1211

1312
.features {

‎src/pages/index.tsx

Lines changed: 125 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,38 @@
1-
import clsx from 'clsx';
2-
import Link from '@docusaurus/Link';
3-
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
4-
import Layout from '@theme/Layout';
5-
import Heading from '@theme/Heading';
6-
import styles from './index.module.css';
7-
import React from 'react';
1+
import clsx from "clsx";
2+
import Link from "@docusaurus/Link";
3+
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
4+
import Layout from "@theme/Layout";
5+
import Heading from "@theme/Heading";
6+
import styles from "./index.module.css";
7+
import React from "react";
88

99
declare global {
1010
namespace JSX {
1111
interface IntrinsicElements {
12-
'web-provenance-slider': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>
13-
'web-provenance-dropdown': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>
14-
'web-provenance-multiselect': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>
15-
'web-provenance-checkbox': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>
16-
'web-provenance-radiobutton': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>
17-
'web-provenance-inputtext': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>
12+
"web-provenance-slider": React.DetailedHTMLProps<
13+
React.HTMLAttributes<HTMLElement>,
14+
HTMLElement
15+
>;
16+
"web-provenance-dropdown": React.DetailedHTMLProps<
17+
React.HTMLAttributes<HTMLElement>,
18+
HTMLElement
19+
>;
20+
"web-provenance-multiselect": React.DetailedHTMLProps<
21+
React.HTMLAttributes<HTMLElement>,
22+
HTMLElement
23+
>;
24+
"web-provenance-checkbox": React.DetailedHTMLProps<
25+
React.HTMLAttributes<HTMLElement>,
26+
HTMLElement
27+
>;
28+
"web-provenance-radiobutton": React.DetailedHTMLProps<
29+
React.HTMLAttributes<HTMLElement>,
30+
HTMLElement
31+
>;
32+
"web-provenance-inputtext": React.DetailedHTMLProps<
33+
React.HTMLAttributes<HTMLElement>,
34+
HTMLElement
35+
>;
1836
}
1937
}
2038
}
@@ -23,7 +41,9 @@ function HomepageHeader() {
2341
const { siteConfig } = useDocusaurusContext();
2442
const [isCopied, setIsCopied] = React.useState(false);
2543

26-
const copyToClipboard = () => {
44+
const copyToClipboard = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
45+
e.stopPropagation();
46+
e.preventDefault();
2747
const citation = `@article{narechania2024provenancewidgets,
2848
title = {{ProvenanceWidgets}: {A Library of UI Control Elements to Track and Dynamically Overlay Analytic Provenance}},
2949
shorttitle = {{ProvenanceWidgets}},
@@ -33,14 +53,14 @@ function HomepageHeader() {
3353
url = {https://doi.org/10.1109/TVCG.2024.3456144},
3454
year = {2024},
3555
publisher = {IEEE}
36-
}`
56+
}`;
3757
navigator.clipboard.writeText(citation);
3858
setIsCopied(true);
3959
setTimeout(() => setIsCopied(false), 2000);
40-
}
60+
};
4161

4262
return (
43-
<header className={clsx('hero hero--primary', styles.heroBanner)}>
63+
<header className={clsx("hero hero--primary", styles.heroBanner)}>
4464
<div className="container">
4565
<Heading as="h1" className="hero__title hidden sm:block">
4666
{siteConfig.title}
@@ -49,49 +69,89 @@ function HomepageHeader() {
4969
Provenance Widgets
5070
</Heading>
5171
<p className="hero__subtitle">{siteConfig.tagline}</p>
52-
<p className='blog-authors-list-page'>
72+
<p className="blog-authors-list-page">
5373
{(siteConfig.customFields["authors"] as string[]).join(", ")}
5474
<br />
5575
{(siteConfig.customFields["institutes"] as string[]).join(" and ")}
5676
</p>
5777
<div className="flex flex-column justify-content-center align-items-center gap-2 md:flex-row">
58-
<Link
59-
className="button button--secondary button--lg"
60-
to="/docs"
61-
>
78+
<Link className="button button--secondary button--lg" to="/docs">
6279
Get Started
6380
</Link>
64-
<Link
65-
className="button button--outline button--secondary button--lg"
66-
style={{ color: 'var(--ifm-background-surface-color)' }}
67-
to="https://arxiv.org/pdf/2407.17431">
68-
Read the Paper (VIS 2024)
69-
</Link>
70-
<Link
71-
className="button button--outline button--secondary button--lg"
72-
style={{ color: 'var(--ifm-background-surface-color)', display: 'flex', alignItems: 'center', gap: '0.5rem' }}
73-
onClick={copyToClipboard}
74-
>
75-
Cite (bibtex)
76-
{
77-
isCopied ?
78-
<svg
79-
viewBox="0 0 24 24"
80-
className="copyButtonSuccessIcon_node_modules-@docusaurus-theme-classic-lib-theme-CodeBlock-CopyButton-styles-module"
81-
style={{ position: 'relative', width: '1.125rem', height: '1.125rem', transform: 'none', left: 0, top: 0, opacity: 1 }}
82-
>
83-
<path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
84-
</svg>
85-
:
86-
<svg
87-
viewBox="0 0 24 24"
88-
className="copyButtonIcon_node_modules-@docusaurus-theme-classic-lib-theme-CodeBlock-CopyButton-styles-module"
89-
style={{ position: 'relative', width: '1.125rem', height: '1.125rem' }}
90-
>
91-
<path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path>
92-
</svg>
93-
}
94-
</Link>
81+
<div className="dropdown dropdown--hoverable">
82+
<button
83+
className="button button--outline button--secondary button--lg"
84+
style={{ color: "var(--ifm-background-surface-color)" }}
85+
>
86+
📃 Paper
87+
</button>
88+
<ul className="dropdown__menu">
89+
{[
90+
{
91+
title: "2024 TVCG paper",
92+
url: "https://doi.org/10.1109/TVCG.2024.3456144",
93+
},
94+
{
95+
title: "arXiv Preprint",
96+
url: "https://arxiv.org/pdf/2407.17431",
97+
},
98+
{
99+
title: (
100+
<div className="flex gap-2" onClick={copyToClipboard}>
101+
{isCopied ? (
102+
<svg
103+
viewBox="0 0 24 24"
104+
className="copyButtonSuccessIcon_node_modules-@docusaurus-theme-classic-lib-theme-CodeBlock-CopyButton-styles-module"
105+
style={{
106+
position: "relative",
107+
width: "1.125rem",
108+
height: "1.125rem",
109+
transform: "none",
110+
left: 0,
111+
top: 0,
112+
opacity: 1,
113+
}}
114+
>
115+
<path
116+
fill="currentColor"
117+
d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
118+
></path>
119+
</svg>
120+
) : (
121+
<svg
122+
viewBox="0 0 24 24"
123+
className="copyButtonIcon_node_modules-@docusaurus-theme-classic-lib-theme-CodeBlock-CopyButton-styles-module"
124+
style={{
125+
position: "relative",
126+
width: "1.125rem",
127+
height: "1.125rem",
128+
}}
129+
>
130+
<path
131+
fill="currentColor"
132+
d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
133+
></path>
134+
</svg>
135+
)}
136+
Cite (bibtex)
137+
</div>
138+
),
139+
url: "#",
140+
},
141+
].map(({ title, url }) => (
142+
<li key={url}>
143+
<a
144+
className="dropdown__link text--left"
145+
href={url}
146+
target="_blank"
147+
rel="noreferrer"
148+
>
149+
{title}
150+
</a>
151+
</li>
152+
))}
153+
</ul>
154+
</div>
95155
</div>
96156
</div>
97157
</header>
@@ -101,12 +161,19 @@ function HomepageHeader() {
101161
export default function Home(): JSX.Element {
102162
const { siteConfig } = useDocusaurusContext();
103163
return (
104-
<Layout
105-
title={siteConfig.title}
106-
description={siteConfig.tagline}>
164+
<Layout title={siteConfig.title} description={siteConfig.tagline}>
107165
<HomepageHeader />
108-
<main className='flex justify-content-center container py-4'>
109-
<iframe width="750" height="450" src="https://www.youtube.com/embed/7l6jKbS2SFI?si=PDoRfnujOQZZ_8gn" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen></iframe>
166+
<main className="flex justify-content-center container py-4">
167+
<iframe
168+
width="750"
169+
height="450"
170+
src="https://www.youtube.com/embed/7l6jKbS2SFI?si=PDoRfnujOQZZ_8gn"
171+
title="YouTube video player"
172+
frameBorder="0"
173+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
174+
referrerPolicy="strict-origin-when-cross-origin"
175+
allowFullScreen
176+
></iframe>
110177
</main>
111178
</Layout>
112179
);

0 commit comments

Comments
 (0)