Skip to content

Commit 3dfab60

Browse files
mario-guerramario-guerra
authored
mini website refresh (#6493)
1) Made changes based on Matt Gertz's written feedback. 2) Added `Videos` page populated with links to Youtube videos about TypeSpec 3) Made release banner at top always visible 4) Made new `Community` page component instead of markdown file for better formatting 5) Reordered blog page so most recent posts show up on top.
1 parent 27d57cb commit 3dfab60

12 files changed

+232
-55
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

+19-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
import { Links } from "@site/src/constants";
3+
import { Icon } from "@astrojs/starlight/components";
34
import ThemePicker from "@typespec/astro-utils/components/theme-picker.astro";
45
import Link from "@typespec/astro-utils/components/link.astro";
56
import MicrosoftLogo from "./microsoft-logo.astro";
@@ -100,19 +101,33 @@ const { class: className } = Astro.props;
100101
background-color: var(--colorBrandForeground1);
101102
border-radius: 50%;
102103
}
104+
105+
.icon {
106+
color: var(--colorNeutralForeground1); /* Set icon color to black */
107+
}
108+
109+
.icon:hover {
110+
color: var(--colorNeutralForeground2); /* Set icon hover color to white */
111+
}
103112
</style>
104113
<footer class:list={["footer", className]} data-theme="dark">
105114
<div class="top">
106115
<div class="main">
107116
<div class="main-title">TypeSpec</div>
108117
<div class="main-description">Follow us for latest updates, contributions, and more.</div>
109118
<div>
110-
<a
119+
<Link
120+
class="item icon link"
111121
href="https://github.com/microsoft/typespec"
112122
target="_blank"
113-
rel="noopener noreferrer"
114-
class="header-github-link"
115-
aria-label="Github repository"></a>
123+
rel="noopener noreferrer"><Icon name="github" label="github" /></Link
124+
>
125+
<Link
126+
class="item icon link"
127+
href="https://aka.ms/typespec/discord"
128+
target="_blank"
129+
rel="noopener noreferrer"><Icon name="discord" label="discord" /></Link
130+
>
116131
</div>
117132
</div>
118133
<div class="top-separator"></div>

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

+1
Original file line numberDiff line numberDiff line change
@@ -195,6 +195,7 @@ const { noDrawer } = Astro.props;
195195
</ul>
196196
</details>
197197
<Link class="item link" href="/docs">Docs</Link>
198+
<Link class="item link" href="/videos">Videos</Link>
198199
<Link class="item link" href="/playground">Playground</Link>
199200
<Link class="item link" href="/blog">Blog</Link>
200201
<Link class="item link" href="/community">Community</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

+23-12
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import HeroIllustration from "./hero-illustration.astro";
1010
background-repeat: no-repeat;
1111
width: 100%;
1212
background-size: 100vw 94%;
13-
1413
display: flex;
1514
padding: 120px 80px 52px 80px;
1615
flex-direction: column;
@@ -60,10 +59,10 @@ import HeroIllustration from "./hero-illustration.astro";
6059

6160
.hero-title {
6261
text-align: center;
63-
font-size: 24px;
62+
font-size: 48px;
6463
font-style: normal;
65-
font-weight: 600;
66-
line-height: 100%; /* 24px */
64+
font-weight: 800;
65+
line-height: 100%;
6766
letter-spacing: -0.24px;
6867
}
6968

@@ -72,10 +71,9 @@ import HeroIllustration from "./hero-illustration.astro";
7271
font-size: 96px;
7372
font-style: normal;
7473
font-weight: 600;
75-
line-height: 100%; /* 96px */
74+
line-height: 1.5;
7675
letter-spacing: -1px;
7776
color: transparent;
78-
7977
background: linear-gradient(
8078
127deg,
8179
#6dc2b1 -17.91%,
@@ -89,12 +87,14 @@ import HeroIllustration from "./hero-illustration.astro";
8987
@media only screen and (max-width: 1024px) {
9088
.hero-subtitle {
9189
font-size: 68px;
90+
line-height: 1.5;
9291
}
9392
}
9493

9594
@media only screen and (max-width: 728px) {
9695
.hero-subtitle {
9796
font-size: 48px;
97+
line-height: 1.5;
9898
}
9999
}
100100

@@ -130,6 +130,7 @@ import HeroIllustration from "./hero-illustration.astro";
130130
gap: 10px;
131131
flex: 1 0 0;
132132
align-self: stretch;
133+
height: 100vh; /* Ensure full visibility on 1080p monitor */
133134
}
134135

135136
@media only screen and (max-width: 728px) {
@@ -142,15 +143,25 @@ import HeroIllustration from "./hero-illustration.astro";
142143
<div class="hero-container">
143144
<div class="hero-content">
144145
<h1 class="hero-title">TypeSpec</h1>
145-
<div class="hero-subtitle">Describe APIs</div>
146+
<div class="hero-buttons">
147+
<Button as="a" appearance="primary" href={Links.docs} title="Install TypeSpec">
148+
Install
149+
</Button>
150+
<Button
151+
as="a"
152+
appearance="outline"
153+
class="highlight"
154+
href={Links.playground}
155+
title="Try the Playground"
156+
>
157+
Playground
158+
</Button>
159+
</div>
160+
<div class="hero-subtitle">Design APIs</div>
146161
<DescriptionText size="large" className="hero-description">
147-
Describe your data up front and generate schemas, API specifications, client / server code,
162+
Design your data up front and generate schemas, API specifications, client / server code,
148163
docs, and more.
149164
</DescriptionText>
150-
<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>
153-
</div>
154165
</div>
155166
<div class="hero-demo">
156167
<HeroIllustration />

‎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

0 commit comments

Comments
 (0)