Skip to content

Convert site to React #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
346 changes: 0 additions & 346 deletions about.html

This file was deleted.

2 changes: 1 addition & 1 deletion css/styles.css
100755 → 100644
Original file line number Diff line number Diff line change
Expand Up @@ -408,4 +408,4 @@ box-shadow: 0px 0px 19px 0px rgba(0, 0, 0, 0.16);
/* .main-logo{
width: 150px;
} */
}
}
342 changes: 0 additions & 342 deletions index.html

This file was deleted.

20 changes: 2 additions & 18 deletions js/main.js
Original file line number Diff line number Diff line change
@@ -1,20 +1,4 @@
$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
if (!$(this).next().hasClass('show')) {
$(this).parents('.dropdown-menu').first().find('.show').removeClass('show');
}
var $subMenu = $(this).next('.dropdown-menu');
$subMenu.toggleClass('show');


$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
$('.dropdown-submenu .show').removeClass('show');
});


return false;
});

/**
/**
* When the user scrolls down 500px from the top of the document, show the button
*/
window.onscroll = function() { scrollFunction() };
Expand All @@ -33,4 +17,4 @@ function scrollFunction() {
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
}
37 changes: 37 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
{
"name": "simpleitk-site",
"version": "1.0.0",
"description": "SimpleITK website built with React",
"main": "src/index.js",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-bootstrap": "^1.6.1",
"bootstrap": "^4.6.0",
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-brands-svg-icons": "^5.15.3",
"@fortawesome/react-fontawesome": "^0.1.14",
"react-router-dom": "^5.2.0"
},
"devDependencies": {
"react-scripts": "4.0.3"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
240 changes: 0 additions & 240 deletions privacy_policy.html

This file was deleted.

62 changes: 62 additions & 0 deletions public/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<!-- SimpleITK Favicon -->
<link rel="icon" type="image/png" href="images/favicon/favicon.png">

<title>SimpleITK - Home</title>

<!-- Feather Icons - Used for main menu dropdown arrows -->
<script src="https://unpkg.com/feather-icons"></script>

<!-- Google fonts CSS - Used for all site fonts -->
<link href="https://fonts.googleapis.com/css?family=Libre+Franklin:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap" rel="stylesheet">

<!-- Font Awesome CSS - Used for site icons e.g. Github, Discourse -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

<!-- Bootstrap core CSS - Base CSS framework for site -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- Custom styles for SimpleITK -->
<link href="css/styles.css" rel="stylesheet">

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push(
{'gtm.start': new Date().getTime(),event:'gtm.js'}
);var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-N38XC8T');</script>
<!-- End Google Tag Manager -->
</head>

<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N38XC8T"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

<div id="root"></div>

<!-- Bootstrap core JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<!-- Main.js -->
<script src="js/main.js"></script>

<!-- Feather icons -->
<script>
feather.replace()
</script>
</body>

</html>
25 changes: 25 additions & 0 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import NavbarComponent from './components/Navbar';
import Hero from './components/Hero';
import Footer from './components/Footer';
import About from './components/About';
import PrivacyPolicy from './components/PrivacyPolicy';

const App = () => {
return (
<Router>
<div>
<NavbarComponent />
<Switch>
<Route exact path="/" component={Hero} />
<Route path="/about" component={About} />
<Route path="/privacy-policy" component={PrivacyPolicy} />
</Switch>
<Footer />
</div>
</Router>
);
};

export default App;
186 changes: 186 additions & 0 deletions src/components/About.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,186 @@
import React from 'react';
import { Container, Row, Col, Jumbotron } from 'react-bootstrap';

const About = () => {
return (
<div>
<Jumbotron fluid className="bg-white border-bottom about-hero">
<Container>
<Row>
<Col className="text-center p-5">
<h2 className="text-brand font-weight-bold mb-5">About SimpleITK</h2>
<p>
SimpleITK is a simplified programming interface to the algorithms and data structures of the{' '}
<a className="about-link" href="https://github.com/InsightSoftwareConsortium/ITK" target="_blank" rel="noopener noreferrer">
Insight Toolkit
</a>{' '}
(ITK). It supports interfaces for multiple programming languages including C++, Python, R, Java, C#, Lua, Ruby and TCL. These bindings enable scientists to develop image analysis workflows in the programming language they are most familiar with. The toolkit supports more than 15 different image file formats, provides over 280 image analysis filters, and implements a unified interface to the ITK intensity-based registration framework.
</p>
</Col>
</Row>
</Container>
</Jumbotron>

<Container>
<Row noGutters>
<Col md={6} className="p-5">
<h3 className="text-brand font-weight-bold">Applications</h3>
<p>
The SimpleITK community includes researchers from a variety of domains that require image analysis capabilities without requiring extensive expertise in software development. Originally the community consisted primarily of researchers from the biomedical sciences, though it has since expanded to many other disciplines. In the context of bio-medicine, the toolkit has been used in the analysis of anatomical structures imaged with CT, MR, and PET, and analysis of cellular structures imaged using dual photon microscopy, focused ion beam scanning electron microscopy and focal plane array microscopy.
</p>
<p>
Outside of bio-medicine the toolkit has been used in a broad range of applications, from{' '}
<a className="about-link" href="https://link.springer.com/article/10.1007/s00216-018-1156-x" target="_blank" rel="noopener noreferrer">
identification of microplastics
</a>{' '}
in micro-Fourier transform infrared microscopy, to{' '}
<a className="about-link" href="https://www.sciencedirect.com/science/article/pii/S0378775316312381" target="_blank" rel="noopener noreferrer">
analysis of fuel cells
</a>{' '}
using X-ray tomography, and for{' '}
<a className="about-link" href="https://www.sciencedirect.com/science/article/pii/S0034425718304115" target="_blank" rel="noopener noreferrer">
alignment of remote sensing images
</a>{' '}
acquired by unmanned aerial systems. Outside of the research setting, the toolkit is used in medical image analysis courses at multiple academic institutions, allowing students to focus more on the algorithms and less on learning complex software interfaces.
</p>
</Col>
<Col md={6} className="p-5">
<h3 className="text-brand font-weight-bold">History</h3>
<p>
SimpleITK was created as part of a concerted effort to simplify the use of the Insight Toolkit, making it more accessible to a wider audience. The initial funding for the toolkit was provided by the United States National Library of Medicine (NLM) under the American Recovery and Reinvestment Act (ARRA), with the initial version of the toolkit developed as a collaboration between The Mayo Clinic, Kitware Inc, The University of Iowa and NLM's intramural research program. The first major release of the toolkit was announced in April-May 2017.
</p>
<p>
Between 2013 and 2019, development was supported by the NLM intramural research program with collaborators at The University of Iowa and Monash University. Since 2019, SimpleITK development is supported by the Office of Cyber Infrastructure and Computational Biology at the National Institute of Allergy and Infectious Diseases.
</p>
</Col>
</Row>
</Container>

<Jumbotron fluid className="bg-white border-top about-hero">
<Container>
<Row>
<Col className="p-5">
<h2 className="text-brand font-weight-bold">License</h2>
<p>
The SimpleITK project is part of the{' '}
<a className="about-link" href="http://www.insightsoftwareconsortium.org" target="_blank" rel="noopener noreferrer">
Insight Software Consortium
</a>{' '}
a non-profit educational consortium dedicated to promoting and maintaining open-source, freely available software for medical image analysis. The copyright is held by{' '}
<a className="about-link" href="https://numfocus.org" target="_blank" rel="noopener noreferrer">
NumFOCUS
</a>
. The SimpleITK software is distributed under the{' '}
<a className="about-link" href="https://github.com/SimpleITK/SimpleITK/blob/master/LICENSE" target="_blank" rel="noopener noreferrer">
Apache License 2.0
</a>
.
</p>
</Col>
</Row>
</Container>
</Jumbotron>

<Jumbotron fluid className="bg-white border-top about-hero">
<Container>
<Row>
<Col className="p-5">
<h2 className="text-brand font-weight-bold">Citation</h2>
<p>If you found SimpleITK useful in your research, support our efforts by citing the relevant publication(s):</p>
<ul>
<li>
R. Beare, B. C. Lowekamp, Z. Yaniv, “Image Segmentation, Registration and Characterization in R with SimpleITK”, J Stat Softw, 86(8),{' '}
<a className="about-link" target="_blank" rel="noopener noreferrer" href="https://www.jstatsoft.org/article/view/v086i08">
doi: 10.18637/jss.v086.i08
</a>
, 2018.
</li>
<li>
Z. Yaniv, B. C. Lowekamp, H. J. Johnson, R. Beare, “SimpleITK Image-Analysis Notebooks: a Collaborative Environment for Education and Reproducible Research”, J Digit Imaging.,{' '}
<a className="about-link" target="_blank" rel="noopener noreferrer" href="https://link.springer.com/article/10.1007%2Fs10278-017-0037-8">
doi: 10.1007/s10278-017-0037-8, 31(3): 290-303
</a>
, 2018.
</li>
<li>
B. C. Lowekamp, D. T. Chen, L. Ibáñez, D. Blezek, “The Design of SimpleITK”, Front. Neuroinform., 7:45.{' '}
<a className="about-link" target="_blank" rel="noopener noreferrer" href="https://www.frontiersin.org/articles/10.3389/fninf.2013.00045/full">
doi: 10.3389/fninf.2013.00045
</a>
, 2013.
</li>
</ul>
</Col>
</Row>
</Container>
</Jumbotron>

<Jumbotron fluid className="bg-white border-top about-hero">
<Container>
<Row>
<Col className="p-5">
<h2 className="text-brand font-weight-bold mb-5 text-center">SimpleITK Logos</h2>
<Row>
<Col md={12} className="mb-4">
<div className="card about-card">
<div className="about-full-logos align-self-center">
<img src="images/SimpleITK-Icons/s-name-full-transparent.png" className="about-full-logos-img" alt="S-full-Transparent" />
</div>
<div className="card-body border-top text-center">
<h5 className="card-title">Download</h5>
<p>
<a role="button" className="btn btn-about-logos" href="images/SimpleITK-Icons/s-name-full-transparent.png" target="_blank" rel="noopener noreferrer">
S Full + Name Transparent (PNG), 1798 × 364, 20KB
</a>
</p>
<p>
<a href="images/SimpleITK-Icons/s-name-full-white.jpg" target="_blank" rel="noopener noreferrer" role="button" className="btn btn-about-logos">
S Full + Name White (JPG), 1798 × 364, 81KB
</a>
</p>
<p>
<a href="images/SimpleITK-Icons/s-name-full.svg" target="_blank" rel="noopener noreferrer" role="button" className="btn btn-about-logos">
S Full + Name (SVG), 5KB
</a>
</p>
</div>
</div>
</Col>
<Col md={12} className="mb-4">
<div className="card about-card">
<img src="images/SimpleITK-Icons/s-full-transparent.png" className="align-self-center about-s-logo my-3" alt="S-full-Transparent" />
<div className="card-body border-top text-center">
<h5 className="card-title">Download</h5>
<p>
<a href="images/SimpleITK-Icons/s-full-transparent.png" target="_blank" rel="noopener noreferrer" role="button" className="btn btn-about-logos">
S Full Transparent (PNG), 229 × 337, 6KB
</a>
</p>
<p>
<a href="images/SimpleITK-Icons/s-small-transparent.png" target="_blank" rel="noopener noreferrer" role="button" className="btn btn-about-logos">
S Small Transparent (PNG), 115 × 169, 3KB
</a>
</p>
<p>
<a href="images/SimpleITK-Icons/s-small-white.jpg" target="_blank" rel="noopener noreferrer" role="button" className="btn btn-about-logos">
S Small White (JPG), 115 × 169, 27KB
</a>
</p>
<p>
<a href="images/SimpleITK-Icons/s-small.svg" target="_blank" rel="noopener noreferrer" role="button" className="btn btn-about-logos">
S Small (SVG), 884 bytes
</a>
</p>
</div>
</div>
</Col>
</Row>
</Col>
</Row>
</Container>
</Jumbotron>
</div>
);
};

export default About;
Loading