Skip to content

Commit

Permalink
Pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@RexSkz
RexSkz committed May 15, 2024
1 parent fa5f8ab commit 462975a
Show file tree
Hide file tree
Showing 4 changed files with 564 additions and 0 deletions.
1 change: 1 addition & 0 deletions docs/CNAME
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
tsx-browser-compiler.js.org
360 changes: 360 additions & 0 deletions docs/index.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,360 @@
:root {
--playground-background: #f2f4f6;
--playground-code-background: #fafcff;
--playground-text-color: #333;
--playground-button-background: #fff;
--playground-button-hover-background: #f0f0f0;
--playground-divider-color: #e2e4e6;
--playground-controls-height: 48px;
--playground-tabs-height: 32px;
--playground-tabs-tab-active-border-color: #3ae;
--playground-close-icon-height: 16px;
--playground-code-selection-color: #b5bbc6;
--playground-link-color: blue;
}
html,
body {
margin: 0;
}
body[data-theme='dark'] {
--playground-background: #1e1e1e;
--playground-code-background: #1e1e1e;
--playground-text-color: #fff;
--playground-button-background: #333;
--playground-button-hover-background: #666;
--playground-divider-color: #444;
--playground-tabs-tab-active-border-color: #3ae;
--playground-close-icon-height: 16px;
--playground-code-selection-color: #444;
--playground-link-color: #3ae;
}
body,
input {
font-family: Roboto, Helvetica, Tahoma, Arial, 'Noto Sans CJK', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'WenQuanYi Micro Hei', sans-serif;
}
a {
color: var(--playground-link-color);
}
.app {
display: flex;
height: 100vh;
flex-direction: column;
background: var(--playground-background);
font-size: 14px;
}
.app,
.app div {
box-sizing: border-box;
}
.app pre {
background: var(--playground-code-background) !important;
white-space: pre-wrap;
}
.app .controls {
display: flex;
height: var(--playground-controls-height);
padding: 0 8px;
flex-shrink: 0;
align-items: center;
border-bottom: 1px solid var(--playground-divider-color);
color: var(--playground-text-color);
}
.app .controls h1 {
padding: 0 8px;
margin: 0;
font-size: 14px;
font-weight: 500;
line-height: var(--playground-controls-height);
}
.app .controls h1 small {
margin-left: 8px;
font-size: 12px;
font-weight: normal;
}
.app .controls h1 + div {
margin: 0 8px 0 auto;
}
.app .controls-buttons {
display: flex;
align-items: center;
}
.app .controls-buttons button {
box-sizing: border-box;
margin-right: 8px;
padding: 4px 4px;
background: var(--playground-button-background);
border-radius: 4px;
border: 1px solid var(--playground-divider-color);
color: var(--playground-text-color);
font-size: 12px;
vertical-align: middle;
cursor: pointer;
}
.app .controls-buttons button:active {
background: var(--playground-button-hover-background);
}
.app .controls-buttons label {
position: relative;
display: inline-flex;
align-items: center;
padding: 4px 8px;
font-size: 12px;
}
.app .controls-buttons label .icon {
z-index: 2;
pointer-events: none;
}
.app .controls-buttons label input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--playground-button-background);
border: 1px solid var(--playground-divider-color);
border-radius: 4px;
margin: 0 4px 0 0;
appearance: none;
cursor: pointer;
outline: 2px solid transparent;
transition: outline-color 0.2s;
}
.app .controls-buttons label + label input {
border-left: none;
}
.app .controls-buttons label.checked input {
outline-color: var(--playground-tabs-tab-active-border-color);
z-index: 1;
}
.app .controls-buttons label:first-of-type input {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.app .controls-buttons label:last-of-type input {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.app .playground {
display: flex;
max-height: calc(100% - var(--playground-controls-height));
flex-grow: 1;
}
.app .playground > * {
flex: 1;
}
.app .playground-layout-horizontal {
flex-direction: row;
}
.app .playground-layout-horizontal > * {
width: 33.33%;
border-right: 1px solid var(--playground-divider-color);
}
.app .playground-layout-horizontal > *:last-child {
border-right: none;
}
.app .playground-layout-vertical {
flex-direction: column;
}
.app .playground-layout-vertical > * {
height: 33.33%;
border-bottom: 1px solid var(--playground-divider-color);
}
.app .playground-layout-vertical > *:last-child {
border-bottom: none;
}
.app .playground-tabs {
display: flex;
flex-shrink: 0;
align-items: flex-start;
overflow-x: auto;
color: var(--playground-text-color);
user-select: none;
}
.app .playground-tabs-tab {
position: relative;
display: inline-block;
height: var(--playground-tabs-height);
box-sizing: border-box;
padding: 0 8px;
border: none;
border-radius: 0;
border-right: 1px solid var(--playground-divider-color);
background: transparent;
cursor: pointer;
font-size: 14px;
line-height: var(--playground-tabs-height);
white-space: nowrap;
}
.app .playground-tabs-tab-with-suffix {
padding-right: 0;
}
.app .playground-tabs-tab:hover,
.app .playground-tabs-tab-active {
background: var(--playground-code-background);
}
.app .playground-tabs-tab:before {
position: absolute;
top: 0;
right: 0;
left: 0;
display: block;
height: 2px;
background: transparent;
transition: background 0.2s;
content: '';
}
.app .playground-tabs-tab-active:before {
background: var(--playground-tabs-tab-active-border-color);
}
.app .playground-tabs-tab input {
color: var(--playground-text-color);
}
.app .playground-editor {
display: flex;
flex-direction: column;
color: var(--playground-text-color);
}
.app .playground-editor-tabs-add {
padding: 0 8px;
}
.app .playground-editor-tabs-close {
width: var(--playground-close-icon-height);
height: var(--playground-close-icon-height);
padding: 0;
border: none;
border-radius: 2px;
margin: 4px;
background: transparent;
cursor: pointer;
line-height: var(--playground-close-icon-height);
}
.app .playground-editor-tabs-close:not(.app .playground-editor-tabs-close-disabled):hover,
.app .playground-editor-tabs-close:not(.app .playground-editor-tabs-close-disabled):focus {
background: var(--playground-button-hover-background);
outline: none;
}
.app .playground-editor-tabs button {
color: var(--playground-text-color);
}
.app .playground-editor-tabs input {
margin-bottom: -3px;
padding: 0 0 2px;
border: none;
border-bottom: 1px solid var(--playground-divider-color);
background: var(--playground-background);
font-size: 14px;
outline: none;
}
.app .playground-editor-code {
overflow: auto;
flex-grow: 1;
background: var(--playground-code-background);
}
.app .playground-editor-code-inner {
position: relative;
min-height: calc(100% - var(--playground-tabs-height));
}
.app .playground-editor-code-inner pre,
.app .playground-editor-code-inner textarea {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 8px;
border: none;
margin: 0;
font-family: monospace;
font-size: 14px;
}
.app .playground-editor-code-inner textarea {
position: absolute;
top: 0;
left: 0;
background: transparent;
color: var(--playground-text-color);
outline: none;
resize: none;
-webkit-text-fill-color: transparent;
}
.app .playground-editor-code-inner textarea::selection {
background: var(--playground-code-selection-color);
}
.app .playground-editor-code-inner pre {
position: relative;
z-index: 1;
background: transparent !important;
pointer-events: none;
}
.app .playground-editor-code-placeholder {
position: absolute;
top: 0;
right: 0;
left: 0;
padding: 8px;
color: #999;
font-family: monospace;
font-size: 14px;
pointer-events: none;
}
.app .playground-compile-result {
display: flex;
flex-direction: column;
color: var(--playground-text-color);
position: relative;
overflow: hidden;
}
@keyframes loading-show {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0);
}
}
.app .playground-compile-result-loading {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 8px 16px;
background: var(--playground-tabs-tab-active-border-color);
color: #fff;
animation: loading-show 0.5s ease-out forwards;
}
.app .playground-compile-result > pre {
overflow: auto;
flex-grow: 1;
padding: 8px;
margin: 0;
}
.app .playground-compile-result-error {
padding: 8px;
overflow-y: auto;
border-top: 1px solid var(--playground-divider-color);
color: red;
}
.app .playground-compile-result-error pre {
padding: 0;
margin: 0 0 16px;
background: transparent !important;
}
.app .playground-previewer {
position: relative;
overflow: auto;
background: var(--playground-code-background);
color: var(--playground-text-color);
}
.app .playground-error-boundary {
padding: 8px;
border: 1px solid red;
border-radius: 4px;
margin: 8px;
background: transparent !important;
color: red;
}
.icon {
--icon-size: 16px;
display: inline-block;
width: var(--icon-size);
height: var(--icon-size);
color: var(--playground-text-color);
}
34 changes: 34 additions & 0 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<title>TSX Browser Compiler Playground</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script async src="https://www.googletagmanager.com/gtag/js?id=G-QZVF1HM8N5"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-QZVF1HM8N5');
</script>
</head>
<body>
<script>
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.setAttribute('data-theme', 'dark');
}
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
document.body.setAttribute('data-theme', event.matches ? 'dark' : 'light');
});
</script>
<div id="root"></div>
<script src="https://unpkg.com/react@18.2.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/typescript@5.1.6/lib/typescript.js"></script>
<script src="https://unpkg.com/prettier@3.2.5/standalone.js"></script>
<script src="https://unpkg.com/prettier@3.2.5/plugins/estree.js"></script>
<script src="https://unpkg.com/prettier@3.2.5/plugins/babel.js"></script>
<script src="https://unpkg.com/less@4.2.0/dist/less.js"></script>
<script src="index.js"></script>
</body>
</html>
Loading

0 comments on commit 462975a

Please sign in to comment.