Created
September 6, 2019 14:46
-
-
Save betatim/abf4d05820a5abb5fe6ea17d1747e02f to your computer and use it in GitHub Desktop.
An idea for a new BinderHub UI
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>My page</title> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" /> | |
| <script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script> | |
| <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script> | |
| <script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js" crossorigin="anonymous"></script> | |
| <script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script> | |
| <!-- Fonts to support Material Design --> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" /> | |
| <!-- Icons to support Material Design --> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| <script type="text/babel"> | |
| const { | |
| colors, | |
| CssBaseline, | |
| MuiThemeProvider, | |
| Typography, | |
| Container, | |
| Button, | |
| makeStyles, | |
| createMuiTheme, | |
| Box, | |
| SvgIcon, | |
| Link, | |
| TextField, | |
| Paper, | |
| } = MaterialUI; | |
| // Create a theme instance. | |
| const theme = createMuiTheme({ | |
| palette: { | |
| primary: { | |
| main: '#F3A253', | |
| }, | |
| secondary: { | |
| main: '#19857b', | |
| }, | |
| error: { | |
| main: colors.red.A400, | |
| }, | |
| background: { | |
| default: '#f5f5f6', | |
| }, | |
| }, | |
| }); | |
| function LightBulbIcon(props) { | |
| return ( | |
| <SvgIcon {...props}> | |
| <path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z" /> | |
| </SvgIcon> | |
| ); | |
| } | |
| const useStyles = makeStyles(theme => ({ | |
| root: { | |
| margin: theme.spacing(6, 0, 3), | |
| }, | |
| lightBulb: { | |
| verticalAlign: 'middle', | |
| marginRight: theme.spacing(1), | |
| }, | |
| paper: { | |
| marginTop: theme.spacing(3), | |
| marginBottom: theme.spacing(3), | |
| padding: theme.spacing(2), | |
| [theme.breakpoints.up(600 + theme.spacing(3) * 2)]: { | |
| marginTop: theme.spacing(6), | |
| marginBottom: theme.spacing(6), | |
| padding: theme.spacing(3), | |
| }, | |
| }, | |
| })); | |
| function ProTip() { | |
| const classes = useStyles(); | |
| return ( | |
| <Typography className={classes.root} color="textSecondary"> | |
| <LightBulbIcon className={classes.lightBulb} /> | |
| Pro tip: See more{' '} | |
| <Link href="https://material-ui.com/getting-started/page-layout-examples/"> | |
| page layout examples | |
| </Link>{' '} | |
| on the Material-UI documentation. | |
| </Typography> | |
| ); | |
| } | |
| function App() { | |
| const classes = useStyles(); | |
| return ( | |
| <Container maxWidth="sm"> | |
| <Paper className={classes.paper}> | |
| <img id="logo" src="https://gke.mybinder.org/static/logo.svg?v=f9f0d927b67cc9dc99d788c822ca21c0" /> | |
| <Typography paragraph> | |
| Have a repository full of Jupyter notebooks? With Binder, open those notebooks in | |
| an executable environment, making your code immediately reproducible by anyone, | |
| anywhere. | |
| </Typography> | |
| <Box mb={2}> | |
| <form> | |
| <TextField | |
| id="outlined-uncontrolled" | |
| label="Repo Link" | |
| placeholder="https://github.com/<org>/<repo>" | |
| helperText="Link to a collection of notebooks" | |
| variant="outlined" | |
| fullWidth | |
| autoFocus | |
| required | |
| /> | |
| <Box display="flex" justifyContent="flex-end"> | |
| <Box mr={2}> | |
| <Button> | |
| Advanced | |
| </Button> | |
| </Box> | |
| <Button | |
| variant="contained" | |
| color="primary" | |
| > | |
| Launch | |
| </Button> | |
| </Box> | |
| </form> | |
| </Box> | |
| <Typography variant="h4" gutterBottom> | |
| Explanation | |
| </Typography> | |
| <ol> | |
| <li> | |
| <Typography paragraph> | |
| Provide in the above form a URL or a GitHub repository that contains Jupyter notebooks, as well as a branch, tag, or commit hash. Launch will build your Binder repository. If you specify a path to a notebook file, the notebook will be opened in your browser after building. | |
| </Typography> | |
| </li> | |
| <li> | |
| <Typography paragraph> | |
| Binder will search for a dependency file, such as requirements.txt or environment.yml, in the repository's root directory (more details on more complex dependencies in documentation). The dependency files will be used to build a Docker image. If an image has already been built for the given repository, it will not be rebuilt. If a new commit has been made, the image will automatically be rebuilt. | |
| </Typography> | |
| </li> | |
| <li> | |
| <Typography paragraph> | |
| A JupyterHub server will host your repository's contents. We offer you a reusable link and badge to your live repository that you can easily share with others. | |
| </Typography> | |
| </li> | |
| </ol> | |
| </Paper> | |
| </Container> | |
| ); | |
| } | |
| ReactDOM.render( | |
| <MuiThemeProvider theme={theme}> | |
| {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} | |
| <CssBaseline /> | |
| <App /> | |
| </MuiThemeProvider>, | |
| document.querySelector('#root'), | |
| ); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment