-
Notifications
You must be signed in to change notification settings - Fork 48
/
index.html
186 lines (177 loc) · 7.93 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
---
layout: default
---
<div class="mk-masthead__content">
<h1 class="mk-masthead__content__title">Metal<sup>3</sup></h1>
<h3 class="mk-masthead__content__sub-title">Metal<sup>3</sup> (pronounced “metal cubed”) is an open-source project that provides a set of tools for managing bare-metal infrastructure using Kubernetes.
</h3>
<a href="https://book.metal3.io/developer_environment/tryit" class="mk-button mk-button--primary">Get Started</a>
<a href="https://book.metal3.io/introduction.html" class="mk-button mk-button--primary">User Guide</a>
</div>
</section>
<main class="mk-main mk-main__homepage">
<div class="mk-main__content--home">
<section class="mk-why-baremetal mk-main__section">
<div>
<header class="mk-main__header">
<h2 class="mk-heading mk-heading--xl mk-m-border">Why Metal<sup>3</sup></h2>
</header>
<h3>Mission</h3>
<p>
The Metal<sup>3</sup> Project's mission is to empower organizations with a flexible,
open-source solution for bare metal provisioning that combines
the benefits of bare metal performance with the ease of use and
automation provided by Kubernetes.
</p><br>
<h3>Goals</h3>
<p class="mk-heading--md">There are a number of great open source tools for bare metal host provisioning,
including Ironic.
Metal<sup>3</sup> aims to build on these technologies to provide a Kubernetes native API for managing bare
metal hosts via a provisioning stack that is also running on Kubernetes. We believe that Kubernetes
Native Infrastructure, or managing your infrastructure just like your applications, is a powerful next
step in the evolution of infrastructure management.</p><br>
<p class=" mk-heading--md">
The Metal<sup>3</sup> project is also building integration with the Kubernetes
cluster-api project, allowing Metal<sup>3</sup> to be used as an infrastructure
backend for Machine objects from the Cluster API. <br> These components integrate
seamlessly to leverage the Kubernetes ecosystem and automate the provisioning
and management of bare-metal infrastructure.
</p><br>
</div>
</section>
<section class="mk-why-baremetal mk-main__section">
<header class="mk-main__header">
<h2 class="mk-heading mk-heading--xl mk-m-border">Metal<sup>3</sup> Components</h2>
</header>
<div class="mk-why-baremetal__cards">
<div class="mk-why-baremetal__card">
<div class="mk-why-baremetal__header">
<div class="icon">
<img src="/assets/images/computer.png" alt="" />
</div>
<a href="https://book.metal3.io/capm3/introduction.html"><h3>Cluster API Provider Metal<sup>3</sup></h3></a>
</div>
<div class="mk-why-baremetal__body">
<p>
Enables the creation and management of
physical servers using the Kubernetes Cluster API.
</p><br>
</div>
</div>
<div class="mk-why-baremetal__card">
<div class="mk-why-baremetal__header">
<div class="icon">
<img src="/assets/images/BMO.png" alt="" />
</div>
<a href="https://book.metal3.io/bmo/introduction.html#bare-metal-operator"><h3>Bare Metal Operator</h3></a>
</div>
<div class="mk-why-baremetal__body">
<p>
Automates the provisioning of
bare-metal servers using the open-source Ironic project.
</p>
</div>
</div>
<div id="mk-why-baremetal__card-dropdown" class="mk-why-baremetal__card">
<div class="mk-why-baremetal__header">
<div class="icon">
<img src="/assets/images/ironic.svg" alt="" />
</div>
<a href="https://book.metal3.io/ironic/introduction.html"><h3>Ironic</h3></a>
</div>
<div class="mk-why-baremetal__body">
<p>
The core component in Metal<sup>3</sup> responsible
for the provisioning and management of bare metal servers.
</p><br>
<div id="mk-why-baremetal__dropdown-content" class="mk-why-baremetal__dropdown-content" style="display: none">
<h3>Hardware Manager</h3>
<p>
Acts as a plugin or driver within Ironic to communicate with the underlying
hardware resources effectively.
</p><br>
<h3>Ironic Image</h3>
<p>
The container image used to run OpenStack Ironic as part of Metal<sup>3</sup>
</p>
</div>
<div class="mk-why-baremetal__button-container" >
<button id="mk-why-baremetal__dropdown-button" class="mk-button mk-button--read-more">+</button>
</div>
</div>
</div>
<div id="mk-why-baremetal__ipam-card" class="mk-why-baremetal__card" style="display: none; gap: var(--mk--spacer--md);">
<div class="mk-why-baremetal__header">
<div class="icon">
<img src="/assets/images/public-service.png" alt="" />
</div>
<a href="https://book.metal3.io/ipam/introduction.html"><h3>IP Address Manager</h3></a>
</div>
<div class="mk-why-baremetal__body">
<p>
Enables Metal<sup>3</sup> to provision bare metal servers with the necessary network configurations
</p>
</div>
</div>
</div>
<button id="mk-why-baremetal__more-button" class="mk-button mk-button--read-more">More +</button>
</section>
<section class="mk-blog-baremetal mk-main__section">
<header class="mk-main__header">
<h2 class="mk-heading mk-heading--xl mk-m-border">What's new?</h2>
</header>
<div class="mk-blog-meta__preview__scroll-wrapper">
{% for post in site.posts limit:3 %}
<a href="{{ post.url }}" class="mk-blog-meta__card">
<h3 class="mk-heading--lg mk-blog-meta__title">{{ post.title }}</h3>
<time
datetime="1999-12-23"
class="mk-blog-meta__timestamp mk-blog-meta__item mk-blog-meta__timestamp--dark"
>{{ post.date | date: "%a, %-d/%m/%y" }}</time
>
</a>
{% endfor %}
</div>
<a
href="{{ site.baseurl }}/blog/index.html"
class="mk-button mk-button--link"
>More Blogs</a
>
</section>
<section class="mk-community mk-main__section">
<header class="mk-main__header mk-community__header">
<h2 class="mk-heading mk-heading--xl mk-m-border">Still have more questions?</h2>
<h3 class="mk-heading mk-heading--md"><a href="{{ site.baseurl }}/community-resources.html">Connect</a> with the Metal3.io community to learn more, contribute ideas, and help build the future of Metal3.io. Learn more about how to make the most of the Metal3io features in your work.
</h3>
<a href="{{ site.baseurl }}/community-resources.html" class="mk-button mk-button--primary mk-community__button">Join the Conversation</a>
</header>
<div class="mk-community__image">
<img src="/assets/images/community-image.jpg" alt="">
</div>
</section>
<script>
let dropDownBtn = document.querySelector("#mk-why-baremetal__dropdown-button")
let dropDownCnt = document.querySelector("#mk-why-baremetal__dropdown-content")
let cardDropDown = document.querySelector("#mk-why-baremetal__card-dropdown")
let dropDownIpam = document.querySelector("#mk-why-baremetal__ipam-card")
let moreBtn = document.querySelector("#mk-why-baremetal__more-button")
dropDownBtn.addEventListener("click",() => {
if(dropDownCnt.style.display == "none"){
cardDropDown.style.height = "auto"
dropDownCnt.style.display = "block"
}else{
cardDropDown.style.height = "15rem"
dropDownCnt.style.display = "none"
}
})
moreBtn.addEventListener("click", () => {
console.log("clicked")
if(dropDownIpam.style.display == "none"){
dropDownIpam.style.display = "block"
moreBtn.textContent = "Less -"
}else {
dropDownIpam.style.display = "none"
moreBtn.textContent = "More +"
}
})
</script>