Merge pull request #351 from microsoft/octogonz/playground-iframe
Convert the TSDoc Playground to be loadable as an iframe
This commit is contained in:
Коммит
97e070cd5a
|
@ -1,130 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta charset="utf-8" />
|
||||
<meta content='text/html; charset=utf-8' http-equiv='Content-Type'>
|
||||
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="A doc comment standard for TypeScript">
|
||||
<meta property="og:description" content="A doc comment standard for TypeScript" />
|
||||
<meta name="msapplication-TileColor" content="#da532c">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="theme-color" content="#000000">
|
||||
|
||||
|
||||
<title>TSDoc Playground</title>
|
||||
|
||||
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="https://tsdoc.org/styles.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom fonts for this template -->
|
||||
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- Custom fonts for this template -->
|
||||
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar sticky-top navbar-light flex-md-nowrap docsite-header">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="/">
|
||||
<img src="https://tsdoc.org/images/tsdoc-white.svg"
|
||||
style="height: 40px" alt="TSDoc" title="TSDoc" />
|
||||
</a>
|
||||
<div>
|
||||
|
||||
<!-- SEARCH BOX - BEGIN -->
|
||||
<form action="#" class="form" style="display: inline-block; vertical-align: middle;">
|
||||
<label class="sr-only" for="search-input">Search documentation</label>
|
||||
<input class="form-control" id="search-input" name="search" type="text" placeholder='search docs...' />
|
||||
</form>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.min.js"></script>
|
||||
<script>
|
||||
// Configure top_nav.js
|
||||
var searchClient = algoliasearch('W2G1E3U5T0', 'a0ab6dfc3db0c301b0ca8e725af85641');
|
||||
window.searchIndex = searchClient.initIndex('tsdoc.org');
|
||||
</script>
|
||||
<script src="https://tsdoc.org/scripts/top_nav.js"></script>
|
||||
|
||||
<!-- SEARCH BOX - END -->
|
||||
|
||||
|
||||
<a class="btn navbar-btn " href="https://tsdoc.org/">
|
||||
Intro
|
||||
</a>
|
||||
|
||||
<a class="btn navbar-btn " href="https://tsdoc.org/pages/tags/alpha">
|
||||
Tags
|
||||
</a>
|
||||
|
||||
<a class="btn navbar-btn " href="https://tsdoc.org/pages/resources/github">
|
||||
GitHub
|
||||
</a>
|
||||
|
||||
<a class="btn navbar-btn " href="https://tsdoc.org/pages/resources/help">
|
||||
Help
|
||||
</a>
|
||||
|
||||
<a class="btn navbar-btn navbar-btn-main " href="https://tsdoc.org/play">
|
||||
Playground
|
||||
</a>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<div id="root" class="container-fluid docsite-main">
|
||||
|
||||
<div id="root">
|
||||
{{#each scriptsToInclude}}
|
||||
<script type="text/javascript" src="{{url}}"></script>
|
||||
{{/each}}
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Footer -->
|
||||
<footer id="scripted-footer" class="docsite-footer p-3 bg-light">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-3">
|
||||
<p class="text-muted small">© 2020 Microsoft</p>
|
||||
</div>
|
||||
<div class="col-9 d-none d-md-block text-right">
|
||||
<ul class="list-inline">
|
||||
|
||||
<li class="list-inline-item">
|
||||
<a href="https://tsdoc.org/">Intro</a>
|
||||
</li>
|
||||
|
||||
<li class="list-inline-item">
|
||||
<a href="https://tsdoc.org/pages/tags/alpha">Tags</a>
|
||||
</li>
|
||||
|
||||
<li class="list-inline-item">
|
||||
<a href="https://tsdoc.org/pages/resources/github">GitHub</a>
|
||||
</li>
|
||||
|
||||
<li class="list-inline-item">
|
||||
<a href="https://tsdoc.org/pages/resources/help">Help</a>
|
||||
</li>
|
||||
|
||||
<li class="list-inline-item">
|
||||
<a href="https://tsdoc.org/play">Playground</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -224,7 +224,6 @@ export class CodeEditor extends React.Component<ICodeEditorProps, ICodeEditorSta
|
|||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
flex: 1,
|
||||
height: '1000px',
|
||||
minHeight: '400px',
|
||||
marginTop: '10px',
|
||||
...this.props.style
|
||||
|
|
|
@ -93,7 +93,6 @@ export class TabPane extends React.Component<ITabPaneProps, ITabPaneState> {
|
|||
|
||||
const tabPaneStyle: React.CSSProperties = {
|
||||
...this.props.style,
|
||||
height: '1000px',
|
||||
minWidth: 0,
|
||||
minHeight: '400px',
|
||||
marginTop: '20px'
|
||||
|
|
|
@ -1,3 +1,46 @@
|
|||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
margin: 0;
|
||||
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
#root {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
|
||||
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #212529;
|
||||
text-align: left;
|
||||
background-color: #fff;
|
||||
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
optgroup,
|
||||
textarea {
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.doc-section {
|
||||
font-family: Tahoma, sans-serif;
|
||||
font-size: 16px;
|
||||
|
|
Загрузка…
Ссылка в новой задаче