Skip to content

Commit 2cd5ba4

Browse files
mario-guerramario-guerra
committed
mini website refresh
1 parent 4605931 commit 2cd5ba4

12 files changed

+224
-48
lines changed

‎website/src/components/Video.astro

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
const { url } = Astro.props;
3+
---
4+
5+
<div class="video-container">
6+
<iframe
7+
width="100%"
8+
height="100%"
9+
src={url}
10+
title="YouTube video player"
11+
frameborder="0"
12+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
13+
referrerpolicy="strict-origin-when-cross-origin"
14+
allowfullscreen></iframe>
15+
</div>
16+
<style>
17+
.video-container {
18+
position: relative;
19+
width: 100%;
20+
padding-top: 56.25%; /* 16:9 Aspect Ratio */
21+
}
22+
.video-container iframe {
23+
position: absolute;
24+
top: 0;
25+
left: 0;
26+
width: 100%;
27+
height: 100%;
28+
}
29+
</style>

‎website/src/components/footer/footer.astro

+4-1
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,10 @@ const { class: className } = Astro.props;
112112
target="_blank"
113113
rel="noopener noreferrer"
114114
class="header-github-link"
115-
aria-label="Github repository"></a>
115+
aria-label="Github repository"
116+
>
117+
GitHub
118+
</a>
116119
</div>
117120
</div>
118121
<div class="top-separator"></div>

‎website/src/components/header/header.astro

+1
Original file line numberDiff line numberDiff line change
@@ -194,6 +194,7 @@ const { noDrawer } = Astro.props;
194194
<li><Link class="item link" href="/tooling">Tooling support</Link></li>
195195
</ul>
196196
</details>
197+
<Link class="item link" href="/videos">Videos</Link>
197198
<Link class="item link" href="/docs">Docs</Link>
198199
<Link class="item link" href="/playground">Playground</Link>
199200
<Link class="item link" href="/blog">Blog</Link>

‎website/src/components/homepage/hero-illustration.astro

+2-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import clsx from "clsx";
1414
/* Patch starlight tabs to look like fluent design */
1515
.hero-illustration > :global(starlight-tabs) {
1616
display: flex;
17-
flex-direction: column-reverse;
17+
flex-direction: column; /* Ensure tabs are above the content */
1818

1919
.tablist-wrapper {
2020
align-self: center;
@@ -59,6 +59,7 @@ import clsx from "clsx";
5959
font-size: 90%;
6060
}
6161
</style>
62+
6263
<div class="hero-illustration">
6364
<Tabs>
6465
<TabItem label="Http">

‎website/src/components/homepage/hero.astro

+30-8
Original file line numberDiff line numberDiff line change
@@ -60,10 +60,10 @@ import HeroIllustration from "./hero-illustration.astro";
6060

6161
.hero-title {
6262
text-align: center;
63-
font-size: 24px;
63+
font-size: 48px;
6464
font-style: normal;
65-
font-weight: 600;
66-
line-height: 100%; /* 24px */
65+
font-weight: 800;
66+
line-height: 100%;
6767
letter-spacing: -0.24px;
6868
}
6969

@@ -72,7 +72,7 @@ import HeroIllustration from "./hero-illustration.astro";
7272
font-size: 96px;
7373
font-style: normal;
7474
font-weight: 600;
75-
line-height: 100%; /* 96px */
75+
line-height: 1.5;
7676
letter-spacing: -1px;
7777
color: transparent;
7878

@@ -89,12 +89,14 @@ import HeroIllustration from "./hero-illustration.astro";
8989
@media only screen and (max-width: 1024px) {
9090
.hero-subtitle {
9191
font-size: 68px;
92+
line-height: 1.5;
9293
}
9394
}
9495

9596
@media only screen and (max-width: 728px) {
9697
.hero-subtitle {
9798
font-size: 48px;
99+
line-height: 1.5;
98100
}
99101
}
100102

@@ -130,6 +132,16 @@ import HeroIllustration from "./hero-illustration.astro";
130132
gap: 10px;
131133
flex: 1 0 0;
132134
align-self: stretch;
135+
height: 100vh; /* Ensure full visibility on 1080p monitor */
136+
}
137+
138+
.hero-buttons {
139+
display: flex;
140+
justify-content: center;
141+
gap: 8px;
142+
align-self: stretch;
143+
flex-wrap: wrap;
144+
order: -1; /* Move buttons to the top */
133145
}
134146

135147
@media only screen and (max-width: 728px) {
@@ -142,14 +154,24 @@ import HeroIllustration from "./hero-illustration.astro";
142154
<div class="hero-container">
143155
<div class="hero-content">
144156
<h1 class="hero-title">TypeSpec</h1>
145-
<div class="hero-subtitle">Describe APIs</div>
157+
<div class="hero-subtitle">Design APIs</div>
146158
<DescriptionText size="large" className="hero-description">
147-
Describe your data up front and generate schemas, API specifications, client / server code,
159+
Design your data up front and generate schemas, API specifications, client / server code,
148160
docs, and more.
149161
</DescriptionText>
150162
<div class="hero-buttons">
151-
<Button as="a" appearance="primary" href={Links.docs}> Get Started </Button>
152-
<Button as="a" appearance="outline" href={Links.playground}> Try it out </Button>
163+
<Button as="a" appearance="primary" href={Links.docs} title="Install TypeSpec">
164+
Install
165+
</Button>
166+
<Button
167+
as="a"
168+
appearance="outline"
169+
class="highlight"
170+
href={Links.playground}
171+
title="Try the Playground"
172+
>
173+
Playground
174+
</Button>
153175
</div>
154176
</div>
155177
<div class="hero-demo">

‎website/src/components/release-notification.astro

-13
Original file line numberDiff line numberDiff line change
@@ -29,19 +29,6 @@ if (!last.data.version) {
2929
import Link from "@typespec/astro-utils/components/link.astro";
3030
---
3131

32-
<script>
33-
document.addEventListener("DOMContentLoaded", () => {
34-
const els = document.querySelectorAll(".new-version-banner") as any as HTMLElement[];
35-
const today = new Date();
36-
els.forEach((el) => {
37-
const releaseDate = new Date(el.dataset.releasedate!);
38-
if (today.getTime() - releaseDate.getTime() > 7 * 86400000 /* 7 days */) {
39-
els.forEach((x) => x.classList.add("hide"));
40-
}
41-
});
42-
});
43-
</script>
44-
4532
<style>
4633
.new-version-banner {
4734
border: 1px solid var(--colorBrandBackground);

‎website/src/components/video-data.ts

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
export const videoData = [
2+
{
3+
url: "https://www.youtube.com/embed/yfCYrKaojDo",
4+
featured: true,
5+
thumbnail: "https://via.placeholder.com/300x200",
6+
},
7+
{
8+
url: "https://www.youtube.com/embed/y0LOXYklsMg",
9+
featured: false,
10+
thumbnail: "https://via.placeholder.com/300x200",
11+
},
12+
{
13+
url: "https://www.youtube.com/embed/F8a6qOpMpcM",
14+
featured: false,
15+
thumbnail: "https://via.placeholder.com/300x200",
16+
},
17+
{
18+
url: "https://www.youtube.com/embed/3Q6xWbWTSaU",
19+
featured: false,
20+
thumbnail: "https://via.placeholder.com/300x200",
21+
},
22+
{
23+
url: "https://www.youtube.com/embed/EINevYeNosc",
24+
featured: false,
25+
thumbnail: "https://via.placeholder.com/300x200",
26+
},
27+
{
28+
url: "https://www.youtube.com/embed/xDbC7Mhi9wM",
29+
featured: false,
30+
thumbnail: "https://via.placeholder.com/300x200",
31+
},
32+
{
33+
url: "https://www.youtube.com/embed/cuYWVKa79IQ",
34+
featured: false,
35+
thumbnail: "https://via.placeholder.com/300x200",
36+
},
37+
// Add more videos here
38+
];

‎website/src/pages/blog/index.astro

+3
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ import BaseLayout from "@site/src/layouts/base-layout.astro";
44
import BlogPostPreview from "./_BlogPostPreview.astro";
55
66
const posts = await getCollection("blog");
7+
8+
// Sort posts by date in descending order
9+
posts.sort((a, b) => b.data.publishDate.getTime() - a.data.publishDate.getTime());
710
---
811

912
<style>

‎website/src/pages/community.astro

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
import BaseLayout from "../layouts/base-layout.astro";
3+
---
4+
5+
<BaseLayout>
6+
<div class="community" style="padding: 20px; margin: 0 auto; max-width: 800px;">
7+
<h1 style="color: #4A90E2;">Welcome</h1>
8+
<p>Welcome to the TypeSpec community! We're glad you're here.</p>
9+
10+
<h2 style="color: #4A90E2;">GitHub</h2>
11+
<p>
12+
We love stars so make sure you <a href="https://github.com/microsoft/typespec"
13+
>star us on GitHub</a
14+
>.
15+
</p>
16+
17+
<h2 style="color: #4A90E2;">Contributing</h2>
18+
<p>
19+
Check out our <a href="https://github.com/microsoft/typespec/blob/main/CONTRIBUTING.md"
20+
>contributing guide</a
21+
> if you would like to contribute to TypeSpec.
22+
</p>
23+
24+
<h2 style="color: #4A90E2;">Community Discord</h2>
25+
<p>
26+
Join our community <a href="https://aka.ms/typespec/discord">Discord Server</a> to connect with
27+
other developers using TypeSpec.
28+
</p>
29+
30+
<h2 style="color: #4A90E2;">Discussion</h2>
31+
<p>
32+
Ask questions on <a href="https://github.com/microsoft/typespec/discussions"
33+
>Github Discussion</a
34+
>.
35+
</p>
36+
</div>
37+
</BaseLayout>

‎website/src/pages/community.md

-23
This file was deleted.

‎website/src/pages/index.astro

+10-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import OverviewIllustration from "../components/homepage/overview-illustration.a
77
import { Links } from "../constants";
88
import Section from "../components/section.astro";
99
import FeatureList from "../components/feature-list.astro";
10-
import { link } from "@typespec/astro-utils/utils/link";
10+
import { link } from "../utils/index";
1111
import ExtensibilityIllustration from "../components/homepage/extensibility-illustration.astro";
1212
import LightDarkImg from "../components/light-dark-img.astro";
1313
import OpenAPI3HeroIllustration from "@site/src/components/homepage/openapi3-hero-illustration.astro";
@@ -53,6 +53,14 @@ import Button from "../components/button.astro";
5353
align-self: stretch;
5454
}
5555

56+
.overview-summary .primary-text {
57+
font-size: 2em; /* Make the text 2x larger */
58+
}
59+
60+
.overview-description {
61+
text-align: center; /* Center the paragraph */
62+
}
63+
5664
.closing {
5765
display: flex;
5866
padding: 80px 60px;
@@ -88,7 +96,7 @@ import Button from "../components/button.astro";
8896
<SectionedLayout>
8997
<div class="overview">
9098
<div class="overview-summary">
91-
<PrimaryText>Why TypeSpec</PrimaryText>
99+
<PrimaryText className="primary-text">Why TypeSpec</PrimaryText>
92100
<div class="overview-subtitle">API-First for developers</div>
93101
<DescriptionText size="large" className="overview-description">
94102
With TypeSpec, remove the handwritten files that slow you down, and generate

‎website/src/pages/videos.astro

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
---
2+
import Video from "@site/src/components/Video.astro";
3+
import { videoData } from "@site/src/components/video-data.ts";
4+
import BaseLayout from "@site/src/layouts/base-layout.astro";
5+
6+
const featuredVideo = videoData.find((video) => video.featured);
7+
const otherVideos = videoData.filter((video) => !video.featured);
8+
---
9+
10+
<BaseLayout>
11+
<div class="content">
12+
<section class="intro">
13+
<p>Learn more about TypeSpec and how it can help you design and build APIs at scale.</p>
14+
</section>
15+
<section class="list">
16+
<div class="featured-video">
17+
{
18+
featuredVideo && (
19+
<section>
20+
<h2>Featured Video</h2>
21+
<Video url={featuredVideo.url} />
22+
</section>
23+
)
24+
}
25+
</div>
26+
<div class="video-grid">
27+
{
28+
otherVideos.map((video) => (
29+
<div class="video-box">
30+
<Video url={video.url} />
31+
</div>
32+
))
33+
}
34+
</div>
35+
</section>
36+
</div>
37+
</BaseLayout>
38+
39+
<style>
40+
.content {
41+
background-color: var(--colorNeutralBackground3);
42+
min-height: 100%;
43+
padding: 20px;
44+
box-sizing: border-box;
45+
}
46+
.intro {
47+
text-align: center;
48+
margin-bottom: 20px;
49+
font-size: 1.2em;
50+
}
51+
.list {
52+
max-width: 90%;
53+
margin: auto;
54+
}
55+
.featured-video {
56+
text-align: center;
57+
margin-bottom: 10px;
58+
}
59+
.video-grid {
60+
display: grid;
61+
grid-template-columns: repeat(2, minmax(300px, 1fr));
62+
gap: 16px;
63+
padding: 10px;
64+
}
65+
.video-box {
66+
padding: 10px; /* Reduced padding for spacing */
67+
margin: 10px; /* Consistent margin */
68+
/* Remove fixed height */
69+
}
70+
</style>

0 commit comments

Comments
 (0)