Merge pull request #351 from microsoft/octogonz/playground-iframe

Convert the TSDoc Playground to be loadable as an iframe
This commit is contained in:
Pete Gonzalez 2023-05-11 19:55:30 -07:00 коммит произвёл GitHub
Родитель a4114a0538 9d24c75777
Коммит 97e070cd5a
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 4AEE18F83AFDEB23
4 изменённых файлов: 49 добавлений и 114 удалений

Просмотреть файл

@ -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">&copy; 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;