tangled
alpha
login
or
join now
danabra.mov
/
typelex
56
fork
atom
An experimental TypeSpec syntax for Lexicon
56
fork
atom
overview
issues
1
pulls
2
pipelines
tweaks
danabra.mov
5 months ago
720408d9
a584749e
1/1
deploy.yaml
success
53s
+10
-13
2 changed files
expand all
collapse all
unified
split
README.md
packages
website
src
pages
index.astro
-2
README.md
···
4
4
5
5
See https://typelex.org/
6
6
7
7
-
**This is an early-stage experiment. It’s probably buggy as hell.**
8
8
-
9
7
Design is not final and might change. Ideas welcome.
10
8
11
9
## Playground
+10
-11
packages/website/src/pages/index.astro
···
1
1
---
2
2
-
import Playground from '../components/Playground';
3
2
import { highlightCode } from '../utils/shiki';
4
3
import { compileToJson } from '../utils/compile';
5
4
import { createPlaygroundUrl } from '../utils/playground-url';
···
236
235
<nav class="hero-actions">
237
236
<a href="#install" class="install-cta">Try It</a>
238
237
<a href="https://tangled.org/@danabra.mov/typelex/blob/main/DOCS.md" target="_blank" rel="noopener noreferrer" class="star-btn">
239
239
-
Read Documentation
238
238
+
Read Docs
240
239
</a>
241
240
</nav>
242
241
</header>
···
277
276
<h2>Install</h2>
278
277
<div class="install-grid">
279
278
<div class="install-notice">
280
280
-
<p class="notice-text">This is an early-stage experiment. It's probably buggy as hell.</p>
279
279
+
<p class="notice-text">This is an early-stage experiment. Design and syntax may change.</p>
281
280
</div>
282
281
<div class="install-step playground-step">
283
282
<div class="step-number">0</div>
···
498
497
499
498
header {
500
499
text-align: center;
501
501
-
padding: 3rem 1rem 2rem;
500
500
+
padding: 3rem 1rem 0.5rem;
502
501
margin: 0 auto;
503
502
}
504
503
···
649
648
650
649
.hero-actions {
651
650
display: flex;
652
652
-
flex-direction: column;
653
653
-
gap: 1rem;
651
651
+
flex-direction: row;
652
652
+
flex-wrap: wrap;
653
653
+
gap: 0.75rem;
654
654
margin-top: 2.5rem;
655
655
align-items: center;
656
656
+
justify-content: center;
656
657
}
657
658
658
659
@media (min-width: 640px) {
659
660
.hero-actions {
660
660
-
flex-direction: row;
661
661
-
justify-content: center;
662
661
gap: 1rem;
663
662
}
664
663
}
···
797
796
798
797
.install-notice {
799
798
padding: 1rem 1.5rem;
800
800
-
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
801
801
-
border: 2px solid #ef4444;
799
799
+
background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
800
800
+
border: 2px solid #f59e0b;
802
801
border-radius: 10px;
803
802
text-align: left;
804
803
}
···
808
807
font-size: 1.0625rem;
809
808
line-height: 1.5;
810
809
font-weight: 700;
811
811
-
color: #991b1b;
810
810
+
color: #92400e;
812
811
}
813
812
814
813
.install-grid {