Skip to content

Commit ff65659

Browse files
jeffwilcoxjeffwilcox
committed
Updating pages
1 parent 08bb41c commit ff65659

7 files changed

Lines changed: 238 additions & 143 deletions

File tree

‎src/app/azure-credits/components/Apply.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
//
2+
// Copyright (c) Microsoft.
3+
// Licensed under the MIT license. See LICENSE file in the project root for full license information.
4+
//
5+
6+
const AzureCreditsApply = () => {
7+
return (
8+
<div>
9+
<div className="pb-2">
10+
<h4 className="h4">
11+
Apply for the Azure credits for open source projects program
12+
</h4>
13+
<p>
14+
The application form is not currently open.
15+
</p>
16+
</div>
17+
</div>
18+
);
19+
}
20+
21+
export default AzureCreditsApply;

‎src/app/azure-credits/components/DynamicContent.tsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
//
2+
// Copyright (c) Microsoft.
3+
// Licensed under the MIT license. See LICENSE file in the project root for full license information.
4+
//
5+
6+
'use client';
7+
8+
import { useState, useEffect } from 'react';
9+
import AzureCreditsOverview from './Overview';
10+
import AzureCreditsQuestions from './FAQ';
11+
import AzureCreditsApply from './Apply';
12+
13+
const FIRST_TAB = 'overview';
14+
// tabs are overview, faq, apply
15+
16+
// If no JavaScript, no content at all.
17+
// Otherwise, show the active content appropriately.
18+
19+
const AzureCreditsDynamicContent = () => {
20+
// Initialize with a default value
21+
const [activeTab, setActiveTab] = useState(FIRST_TAB);
22+
23+
// Update the active tab once the component mounts in the browser
24+
useEffect(() => {
25+
const hash = window.location.hash;
26+
const newActiveTab = hash ? hash.replace('#', '') : FIRST_TAB;
27+
setActiveTab(newActiveTab);
28+
29+
const handleHashChange = () => {
30+
const newHash = window.location.hash;
31+
const newTab = newHash ? newHash.replace('#', '') : FIRST_TAB;
32+
setActiveTab(newTab);
33+
}
34+
window.addEventListener('hashchange', handleHashChange);
35+
return () => {
36+
window.removeEventListener('hashchange', handleHashChange);
37+
}
38+
}, [setActiveTab]);
39+
40+
return (
41+
<div className="col-md-10 col-lg-7 mx-auto">
42+
<div className={['tabs__content', activeTab === 'overview' ? 'is-active' : ''].filter(x => x).join(' ')} data-tab="overview">
43+
<AzureCreditsOverview />
44+
</div>
45+
<div className={['tabs__content', activeTab === 'faq' ? 'is-active' : ''].filter(x => x).join(' ')} data-tab="faq">
46+
<AzureCreditsQuestions />
47+
</div>
48+
<div className={['tabs__content', activeTab === 'apply' ? 'is-active' : ''].filter(x => x).join(' ')} data-tab="apply">
49+
<AzureCreditsApply />
50+
</div>
51+
</div>
52+
);
53+
}
54+
55+
export default AzureCreditsDynamicContent;

‎src/app/azure-credits/components/FAQ.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
//
2+
// Copyright (c) Microsoft.
3+
// Licensed under the MIT license. See LICENSE file in the project root for full license information.
4+
//
5+
6+
const AzureCreditsQuestions = () => {
7+
return (
8+
<div className="pb-6">
9+
<h4 className="h4">
10+
Frequently asked questions
11+
</h4>
12+
<p>
13+
Frequently asked questions about the Azure credits for open source projects program.
14+
</p>
15+
<ul className="ul mt-4">
16+
<li>
17+
<b>What is this program?</b>
18+
<br />
19+
Microsoft offers grants of Azure credits to open source projects to help with their short-term development, infrastructure, and testing needs. Workloads such as long-term website hosting, continuous integration, and permanent database hosting are not a good fit for grant programs.
20+
</li>
21+
<li>
22+
<b>Why does Microsoft provide Azure credits?</b>
23+
<br />
24+
Microsoft recognizes the value of contributing to communities, and we are in a position to provide grants to support the ecosystem. Our product and service teams often build strategic relationships with communities and are able to choose to provide credit as a result.
25+
</li>
26+
<li>
27+
<b>What are the grants for and how long do they last?</b>
28+
<br />
29+
Most grants span a single Microsoft fiscal year, but strategic relationships with specific businesses may be available on other terms.
30+
</li>
31+
</ul>
32+
</div>
33+
);
34+
}
35+
36+
export default AzureCreditsQuestions;

‎src/app/azure-credits/components/Overview.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
//
2+
// Copyright (c) Microsoft.
3+
// Licensed under the MIT license. See LICENSE file in the project root for full license information.
4+
//
5+
6+
const AzureCreditsOverview = () => {
7+
return (
8+
<div className="pb-6">
9+
<h4 className="h4">
10+
Azure credits for open source projects
11+
</h4>
12+
<p>
13+
Many Microsoft product teams grant Azure credits to open source communities
14+
to support their work. These credits augment other complementary programs
15+
such as GitHub repositories, CI/CD with GitHub Actions, as well as financial
16+
contributions through the Microsoft FOSS Fund, foundation memberships, and
17+
other ecosystem support.
18+
</p>
19+
<p>
20+
Microsoft not currently accepting new applications from projects directly and
21+
is instead relying on strategic, organic relationships between Microsoft
22+
businesses and the open source that they depend on.
23+
</p>
24+
</div>
25+
);
26+
}
27+
28+
export default AzureCreditsOverview;

‎src/app/azure-credits/components/Tabs.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
//
2+
// Copyright (c) Microsoft.
3+
// Licensed under the MIT license. See LICENSE file in the project root for full license information.
4+
//
5+
6+
'use client';
7+
8+
import { useState, useEffect } from 'react';
9+
10+
export const TABS = {
11+
'overview': 'Overview',
12+
'faq': 'FAQ',
13+
'apply': 'Apply',
14+
};
15+
16+
const FIRST_TAB = Object.keys(TABS)[0];
17+
18+
const AzureCreditsTabs = () => {
19+
// Initialize with a default value
20+
const [activeTab, setActiveTab] = useState(FIRST_TAB);
21+
22+
// Update the active tab once the component mounts in the browser
23+
useEffect(() => {
24+
const hash = window.location.hash;
25+
const newActiveTab = hash ? hash.replace('#', '') : FIRST_TAB;
26+
setActiveTab(newActiveTab);
27+
28+
const handleHashChange = () => {
29+
const newHash = window.location.hash;
30+
const newTab = newHash ? newHash.replace('#', '') : FIRST_TAB;
31+
setActiveTab(newTab);
32+
}
33+
window.addEventListener('hashchange', handleHashChange);
34+
return () => {
35+
window.removeEventListener('hashchange', handleHashChange);
36+
}
37+
}, [setActiveTab]);
38+
39+
return (
40+
<div className="tabs__tabs" role="tablist">
41+
{Object.entries(TABS).map(([key, label]) => (
42+
<a
43+
key={key}
44+
className={['tabs__tab', activeTab === key ? 'is-active' : ''].filter(x => x).join(' ')}
45+
role="tab"
46+
href={`#${key}`}
47+
data-tab={key}
48+
>
49+
{label}
50+
</a>
51+
))}
52+
</div>
53+
);
54+
}
55+
56+
export default AzureCreditsTabs;

‎src/app/azure-credits/page.tsx‎

Lines changed: 22 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,11 @@
44
//
55

66
import { Metadata } from 'next';
7+
import AzureCreditsTabs from './components/Tabs';
8+
import AzureCreditsOverview from './components/Overview';
9+
import AzureCreditsQuestions from './components/FAQ';
10+
import AzureCreditsApply from './components/Apply';
11+
import AzureCreditsDynamicContent from './components/DynamicContent';
712

813
export const metadata: Metadata = {
914
title: 'Azure Credits for Open Source Projects',
@@ -21,163 +26,43 @@ export default function AzureCredits() {
2126
</div>
2227
</div>
2328
</div>
29+
{/*
2430
<div className="wrapper-full bg-light">
2531
<div className="wrapper my-6 py-4">
2632
<div className="col-md-10 col-lg-7 mx-auto">
2733
<h3 className="h4 font-weight-400 mb-4">
28-
We are offering Azure credits to open source projects for their use for testing, builds,
29-
and other infrastructure support needs. Projects must apply for credits. Applications are
30-
reviewed and applicants will be contacted with a decision within 3-4 weeks.
34+
Introduction text
3135
</h3>
3236
</div>
3337
</div>
3438
</div>
39+
*/}
3540
<div className="tabs">
3641
<nav className="wrapper my-6" data-require-javascript="yes" data-javascript-show="immediate">
3742
<div className="col-md-10 col-lg-7 mx-auto">
3843
<div className="tabs__tabs" role="tablist">
39-
<a className="tabs__tab is-active" role="tab" href="#credits-overview" data-tab="credits-overview">Overview</a>
40-
<a className="tabs__tab" href="#credits-faq" role="tab" data-tab="credits-faq">FAQ</a>
41-
<a className="tabs__tab" href="#credits-apply" role="tab" data-tab="credits-apply">Apply</a>
44+
<AzureCreditsTabs />
4245
</div>
4346
</div>
4447
</nav>
4548
<div className="wrapper my-6 pt-lg-3 pb-4">
46-
<div className="col-md-10 col-lg-7 mx-auto">
47-
<noscript><h2>Overview</h2></noscript>
48-
<div className="tabs__content is-active" data-tab="credits-overview">
49-
{/* OVERVIEW */}
50-
51-
<div className="pb-6">
52-
<h4 className="h4">
53-
Azure credits for open source projects
54-
</h4>
55-
<p>
56-
Microsoft makes renewable Azure credits available in terms up to a year
57-
to select open source projects for test, build, and other development work.
58-
</p>
59-
<p>
60-
Here's how some of the projects
61-
participating in the program are benefitting from Azure credits:
62-
</p>
63-
<ul className="ul mt-4">
64-
<li>
65-
<b>FreeBSD</b>
66-
<br />
67-
FreeBSD is a Unix-like operating system for servers, desktops, and embedded platforms. Azure credits have helped developers to work on custom kernels.
68-
They are now releasing more timely updates for security advisories for third-party software and spinning up larger VM classes for package building
69-
and smaller VM classes for testing, both of which are hugely helpful to their developers.
70-
</li>
71-
<li>
72-
<b>AlmaLinux</b>
73-
<br />
74-
AlmaLinux OS is a 1:1 binary compatible clone of RHEL®, guided and built by the community. They were the first downstream RHEL clone to be
75-
released after the announcement by RedHat that support for CentOS Linux was ending, and their goal is to provide an option for folks who
76-
have historically used CentOS Linux, and for whom CentOS Stream is not an option. The AlmaLinux OS Foundation is a 501(c)(6) non-profit
77-
created for the benefit of the AlmaLinux OS community.
78-
</li>
79-
<li>
80-
<b>Haskell</b>
81-
<br />
82-
Haskell is a purely functional programming language. Azure credits are helping their continuous integration system, releases, their GitLab instances,
83-
and other builds.
84-
</li>
85-
<li>
86-
<b>Snakemake</b>
87-
<br />
88-
The Snakemake workflow management system is a tool for creating reproducible and scalable data analyses. Workflows are described via a human-readable,
89-
Python-based language, and Snakemake enables these to be seamlessly scaled to server, cluster, grid, and cloud environments.
90-
</li>
91-
</ul>
92-
</div>
93-
94-
{/* end OVERVIEW */}
95-
</div>
96-
<div className="tabs__content" data-tab="credits-faq">
97-
<noscript><h2>FAQ</h2></noscript>
98-
{/* FAQ */}
99-
100-
<div className="pb-6">
101-
<h4 className="h4">
102-
Frequently asked questions
103-
</h4>
104-
<p>
105-
Frequently asked questions about the Azure credits for open source projects program.
106-
</p>
107-
<ul className="ul mt-4">
108-
<li>
109-
<b>What is this program?</b>
110-
<br />
111-
Microsoft is offering grants of Azure credits to open source projects to help with their short-term development, infrastructure, and testing needs. Workloads such as long-term website hosting, continuous integration, and permanent database hosting are not a good fit for this program.
112-
</li>
113-
<li>
114-
<b>Why is Microsoft running this program?</b>
115-
<br />
116-
We are giving back to the open source ecosystem we participate in and depend on.
117-
</li>
118-
<li>
119-
<b>What are the grants for and how long do they last?</b>
120-
<br />
121-
Each grant will be given through May 31st of the calendar year. Applicants will need to re-apply each year if they would like credits again.
122-
</li>
123-
<li>
124-
<b>What open source projects are eligible to apply?</b>
125-
<br />
126-
Any open source project with an <a href="https://opensource.org/licenses/category">OSI-approved license </a> and a formalized Code of Conduct is eligible
127-
to apply.
128-
</li>
129-
<li>
130-
<b>How do I apply?</b><br />
131-
Fill out and submit the application form on the Apply tab.
132-
</li>
133-
<li>
134-
<b>If granted credits, what is required?</b><br />
135-
Projects will need to have or setup some kind of Microsoft account (Outlook.com mail, or have a Microsoft 365 account) to
136-
connect the subscription to. Azure requires a credit card to connect to a subscription as well. Notice is provided before
137-
credits expire if you need to spin down resources or cancel the subscription to avoid charge.
138-
</li>
139-
<li>
140-
<b>When will I be notified of the decision on my application?</b>
141-
<br />
142-
We review all applications and notify all applicants of our decisions within 3-4 weeks.
143-
</li>
144-
</ul>
49+
<AzureCreditsDynamicContent />
50+
{/* No JavaScript: entire set of content */}
51+
<noscript>
52+
<div className="col-md-10 col-lg-7 mx-auto">
53+
<div className="tabs__content is-active" data-tab="credits-overview">
54+
<h2>Overview</h2>
55+
<AzureCreditsOverview />
14556
</div>
146-
147-
{/* end FAQ */}
148-
</div>
149-
<div className="tabs__content" data-tab="credits-apply">
150-
<noscript><h2>Apply</h2></noscript>
151-
<div className="pb-2">
152-
<h4 className="h4">
153-
Apply for the Azure credits for open source projects program
154-
</h4>
155-
<p>
156-
You can use this page to apply for the Azure credits for open source projects program.
157-
</p>
57+
<div className="tabs__content" data-tab="credits-faq">
58+
<h2>FAQ</h2>
59+
<AzureCreditsQuestions />
15860
</div>
159-
<p>
160-
Applications to the program will be reviewed and you will receive a notification of the decision within 3-4 weeks.
161-
</p>
162-
<div className="ul mt-4">
163-
<iframe
164-
title="Azure Credits Application"
165-
width="640px"
166-
height="480px"
167-
src= "https://forms.office.com/Pages/ResponsePage.aspx?id=v4j5cvGGr0GRqy180BHbR90vS-jx9TxHvDhlVnIdXodUQUZMWE1BNVZXVTgxWEVGMk8zNEtNWDZKQSQlQCN0PWcu&embed=true"
168-
frameBorder={0}
169-
marginWidth={0}
170-
marginHeight={0}
171-
style={{
172-
border: "none",
173-
maxWidth: "100%",
174-
maxHeight: "100vh"
175-
}}
176-
allowFullScreen={true}
177-
></iframe>
61+
<div className="tabs__content" data-tab="credits-apply">
62+
<AzureCreditsApply />
17863
</div>
17964
</div>
180-
</div>
65+
</noscript>
18166
</div>
18267
</div>
18368
</article>

0 commit comments

Comments
 (0)