Commit b35f5489 authored by Dominik Schwabe's avatar Dominik Schwabe
Browse files

added webis header and footer

parent 64a507df
{
"name": "api",
"version": "1.4.1",
"version": "1.5",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "api",
"version": "1.4.1",
"version": "1.5",
"license": "ISC",
"dependencies": {
"axios": "^0.21.1",
......
{
"name": "frontend",
"version": "1.4.1",
"version": "1.5",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "frontend",
"version": "1.4.1",
"version": "1.5",
"dependencies": {
"dexie-react-hooks": "^1.0.6",
"is-url": "^1.2.4",
<!DOCTYPE html>
<html>
<head>
<title>Webis Demo TL;DR</title>
<meta charset="utf-8" />
<meta name="description" content="Short description of the Demo" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="copyright" content="&copy; 2021 Webis" />
<link rel="icon" type="image/png" href="https://assets.webis.de/img/favicon.png" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Summarization</title>
<script>
window.addEventListener("dragover", (e) => e.preventDefault(), false);
window.addEventListener("drop", (e) => e.preventDefault(), false);
</script>
<link rel="stylesheet" href="https://assets.webis.de/css/style.css?1624547108" />
</head>
<script>
window.addEventListener("dragover", (e) => e.preventDefault(), false);
window.addEventListener("drop", (e) => e.preventDefault(), false);
</script>
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Demo",
"name": "*name of the demo",
"description": "*synopsis, short description of the demo",
"text": "*demo, any other text",
"url": "*link that leads to this HTML web page.",
"sameAs": "*is there an id link, e.g. from zenodo?",
"keywords": ["*some", "*key", "*words", "*to describe the demo"],
"creator": [
{
"@type": "Organization",
"url": "https://webis.de/",
"name": "The Web Technology & Information Systems Network",
"alternateName": "Webis"
},
{
"@id": "*orcid id if available",
"@type": "Person",
"url": "*https://www.uni-weimar.de/en/media/chairs/computer-science-department/webis/people/#name",
"affiliation": "*Bauhaus-Universit\u00e4t Weimar",
"name": "*last name, first name"
},
{
"@id": "*orcid id if available",
"@type": "Person",
"url": "*https://www.uni-weimar.de/en/media/chairs/computer-science-department/webis/people/#name",
"affiliation": "*Bauhaus-Universit\u00e4t Weimar",
"name": "*last name, first name"
}
],
"includedInDataCatalog": {},
"distribution": []
}
</script>
<body>
<div id="root"></div>
</body>
......
import React, {useContext} from "react";
import { FaCog } from "react-icons/fa";
import React, { useContext } from "react";
import { FaCog, FaGithub, FaTwitter, FaYoutube } from "react-icons/fa";
import { Link, Redirect, Route, Router, Switch, useLocation } from "react-router-dom";
import { About } from "./components/About";
......@@ -7,75 +7,145 @@ import { Evaluate } from "./components/Evaluate";
import { Summarize } from "./components/Summarize";
import { VisualizationOverview } from "./components/Visualize";
import { MetricsProvider } from "./contexts/MetricsContext";
import { SettingsContext, SettingsProvider } from "./contexts/SettingsContext";
import { SummarizersProvider } from "./contexts/SummarizersContext";
import { SettingsProvider, SettingsContext } from "./contexts/SettingsContext"
import history from "./history";
const App = () => (
<MetricsProvider>
<SummarizersProvider>
<SettingsProvider>
<Router history={history}>
<Content />
</Router>
</SettingsProvider>
</SummarizersProvider>
</MetricsProvider>
const routes = [
["/summarize", "Summarize", Summarize],
["/evaluate", "Evaluate", Evaluate],
["/visualize", "Visualize", VisualizationOverview],
["/about", "About", About],
];
const Footer = () => (
<footer className="uk-section uk-section-muted footer-section" style={{ paddingBottom: "30px" }}>
<div className="uk-container">
<div className="uk-grid uk-grid-small uk-margin-top">
<div className="uk-width-expand uk-visible@s" />
<div>
&copy; 2021 <a href="https://webis.de/">Webis Group</a>{" "}
<span className="uk-padding-small">&bull;</span>
<a href="https://github.com/webis-de" style={{ paddingRight: "5px" }}>
<FaGithub style={{ width: "15px" }} />
</a>
<a href="https://twitter.com/webis_de" style={{ paddingRight: "5px" }}>
<FaTwitter style={{ width: "15px" }} />
</a>
<a href="https://www.youtube.com/webis">
<FaYoutube style={{ width: "15px" }} />
</a>
<span className="uk-padding-small">&bull;</span>
<a href="https://webis.de/people.html">Contact</a>{" "}
<span className="uk-padding-small">&bull;</span>
<a href="https://webis.de/legal.html">Impressum / Terms / Privacy</a>
</div>
</div>
</div>
</footer>
);
const Content = () => {
const routes = [
["/summarize", "Summarize", Summarize],
["/evaluate", "Evaluate", Evaluate],
["/visualize", "Visualize", VisualizationOverview],
["/about", "About", About],
];
const NavbarLogo = () => (
<ul className="uk-navbar-nav">
<li>
<a href="https://webis.de/">
<img
src="https://assets.webis.de/img/webis-logo.png"
alt="Webis Logo"
className="uk-logo"
/>
<span style={{ marginLeft: "10px" }}>Webis.de</span>
</a>
</li>
</ul>
);
const NavbarRight = ({ children }) => <div className="uk-navbar-right uk-light">{children}</div>;
const NavbarLeft = ({ children }) => <div className="uk-navbar-left uk-light">{children}</div>;
const NavbarContent = () => {
const location = useLocation();
const {minOverlap, setMinOverlap, allowSelfSimilarities, toggleAllowSelfSimilarities} = useContext(SettingsContext)
return (
<>
<div className="uk-background-secondary global-nav uk-flex" data-uk-sticky>
<nav
className="uk-navbar-container uk-navbar-transparent uk-container uk-light"
data-uk-navbar="mode: click"
style={{ flex: "1 0" }}
>
<div className="uk-navbar-item uk-logo">
<a href="/">TL;DR</a>
</div>
<div className="uk-navbar-right">
<ul className="uk-navbar-nav">
{routes.map(([path, readable]) => (
<li key={path} className={path === location.pathname ? "uk-active" : null}>
<Link to={path}>{readable}</Link>
</li>
))}
</ul>
</div>
</nav>
<div className="uk-flex uk-flex-center" style={{ marginLeft: "0px", marginRight: "50px" }}>
<FaCog className="hover-gray" style={{ minWidth: "20px" }} />
<div uk-dropdown="mode: click; pos: bottom-left">
<h3>Highlighting</h3>
<div className="uk-flex">
<div style={{width: "20px"}} />
<div>
<ul className="uk-navbar-nav">
{routes.map(([path, readable]) => (
<li key={path} className={path === location.pathname ? "uk-active" : null}>
<Link to={path}>{readable}</Link>
</li>
))}
</ul>
);
};
const WebisPath = () => (
<nav className="uk-container">
<ul className="uk-breadcrumb">
<li>
<a href="https://webis.de">Webis.de</a>
</li>
<li>
<a href="https://webis.de/research.html">Research</a>
</li>
<li>
<a href="https://webis.de/research/tldr.html">TL;DR</a>
</li>
<li className="uk-disabled">
<a href="/#">Demo</a>
</li>
</ul>
</nav>
);
const Navbar = () => (
<>
<div className="uk-background-secondary global-nav uk-flex" data-uk-sticky>
<nav
className="uk-navbar-container uk-navbar-transparent uk-container "
data-uk-navbar="mode: click"
style={{ flex: "1 0" }}
>
<NavbarLeft>
<NavbarLogo />
</NavbarLeft>
<NavbarRight>
<NavbarContent />
</NavbarRight>
<NavbarOptions />
</nav>
</div>
<WebisPath />
</>
);
const NavbarOptions = () => {
const { minOverlap, setMinOverlap, allowSelfSimilarities, toggleAllowSelfSimilarities } =
useContext(SettingsContext);
return (
<div className="uk-flex uk-flex-center" style={{ marginLeft: "30px" }}>
<FaCog className="hover-gray" style={{ minWidth: "20px" }} />
<div uk-dropdown="mode: click; pos: bottom-left">
<h3>Highlighting</h3>
<div className="uk-flex">
<div style={{ width: "20px" }} />
<div>
<div className="uk-margin">
<h4>minimal overlap</h4>
<div className="margin-between-20">
{[1, 2, 3, 4, 5].map((num) => (
<label key={num} style={{ whiteSpace: "nowrap" }}>
{num}
<input type="radio" value={num} checked={num === minOverlap} onChange={(e) => setMinOverlap(e.target.value)} />
<input
type="radio"
value={num}
checked={num === minOverlap}
onChange={(e) => setMinOverlap(e.target.value)}
/>
</label>
))}
</div>
</div>
<div className="uk-flex uk-flex-middle">
<h4 style={{margin: "0", marginRight: "20px"}}>allow self-similarities</h4>
<h4 style={{ margin: "0", marginRight: "20px" }}>allow self-similarities</h4>
<input
style={{margin:"0"}}
style={{ margin: "0" }}
className="uk-checkbox"
checked={allowSelfSimilarities}
readOnly
......@@ -83,23 +153,42 @@ const Content = () => {
type="checkbox"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
<div className="uk-margin" />
<Switch>
{routes.map(([path, , component]) => (
<Route key={location.key} path={path} component={component} />
))}
<Redirect to={routes[0][0]} />
</Switch>
<div className="uk-margin-large-bottom" />
</>
const Content = () => {
const location = useLocation();
return (
<main className="uk-section uk-section-default">
<div className="uk-container">
<h3>TL;DR</h3>
<Switch>
{routes.map(([path, , component]) => (
<Route key={location.key} path={path} component={component} />
))}
<Redirect to={routes[0][0]} />
</Switch>
</div>
</main>
);
};
const App = () => (
<MetricsProvider>
<SummarizersProvider>
<SettingsProvider>
<Router history={history}>
<Navbar />
<Content />
<Footer />
</Router>
</SettingsProvider>
</SummarizersProvider>
</MetricsProvider>
);
export default App;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment