Skip to content

Instantly share code, notes, and snippets.

@majames
Last active March 20, 2019 21:30
Show Gist options
  • Save majames/ced1ca6df59eb166ad4ffb49eba54e5c to your computer and use it in GitHub Desktop.
Save majames/ced1ca6df59eb166ad4ffb49eba54e5c to your computer and use it in GitHub Desktop.
[GREENDOC] Static HTML Files
// File located in @kaggle/web package under src/datasets/pages/listing
// HTMLWebpackPlugin option overrides
// https://github.com/jantimon/html-webpack-plugin
module.exports = {
title: 'Datasets | Kaggle',
meta: {
"twitter:card": "summary",
"twitter:site": "some-site"
}
}
[Route("datasets")]
public async Task<ActionResult> ViewDatasetListing() {
if (/*user is auth'd*/) {
return ServeStaticFile("datasets", "listing");
} else {
return PageNotFound();
}
}
<!-- File located in @kaggle/web package under src/entry -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><%= htmlWebpackPlugin.options.title %></title>
<style>
html,
body {
height: 100%;
margin: 0;
}
.header {
padding: 0;
}
#root {
height: 100%;
}
</style>
</head>
<body>
<div id="root"></div>
<div id="modal-root"></div>
</body>
</html>
// File located in @kaggle/web package under src/datasets/pages/listing
import { render } from 'react-dom';
import { PageScaffold } from '../../../design/components/PageScaffold';
import { ListingApp } from '../../components/ListingApp';
ReactDOM.render(
<PageScaffold>
<ListingApp />
</PageScaffold>
document.getElementById("root")
);
import * as React from 'react';
const UserContext = React.createContext<User>();
/**
* Component does two things:
* 1. Wraps page specific component with a header and footer
* 2. Sets up context for injecting cross-cutting concern data
*/
class PageScaffold extends React.Component<{ children: React.ReadNode }, State> {
componentDidMount() {
// request for cross cutting concern stuff sent here
// e.g. for user data
}
render() {
const { user } = this.state;
// also show loading state when cross-cutting data has NOT been retrieved yet
return (
<UserContext.Provider data={user}>
<Header />
{children}
<Footer />
<UserContext.Provider/>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment