luxolus/open-nomad
2
0
Fork 0
Code Issues 1 Pull requests Packages Releases Wiki Activity

Dependency updates and improvements

Browse source
This commit is contained in:
Jeff Escalante 2020-06-01 17:48:25 -04:00 committed by Kevin Pruett
parent c1af4da048
commit 6a1e059ff4
No known key found for this signature in database
GPG key ID: 7E24696E93F2D9A0
32 changed files with 4403 additions and 2788 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
website/.npm-upgrade.json
View file

@ -1,8 +0,0 @@
{
"ignore": {
"marked": {
"versions": "0.8.2",
"reason": "Breaks IE"
}
}
}

9
website/.stylelintrc.js
View file

@ -1,4 +1,11 @@
module.exports = {
...require('@hashicorp/nextjs-scripts/.stylelintrc.js'),
/* Specify overrides here */
rules: {
'selector-pseudo-class-no-unknown': [
true,
{
ignorePseudoClasses: ['first', 'last'],
},
],
},
}

434
website/README.md
View file

@ -1,16 +1,46 @@
# Nomad Website
# Nomad Documentation Website
[![Netlify Status](https://img.shields.io/netlify/57d01198-7abc-4c39-a89b-386a2fe7de09?style=flat-square)](https://app.netlify.com/sites/nomad-website/deploys)
This subdirectory contains the entire source for the [Nomad Website](https://nomadproject.io/). This is a [NextJS](https://nextjs.org/) project, which builds a static site from these source files.
<!--
This readme file contains several blocks of generated text, to make it easier to share common information
across documentation website readmes. To generate these blocks from their source, run `npm run generate:readme`
Any edits to the readme are welcome outside the clearly noted boundaries of the blocks. Alternately, a
block itself can be safely "forked" from the central implementation simply by removing the "BEGIN" and
"END" comments from around it.
-->
## Table of Contents
- [Contributions](#contributions-welcome)
- [Running the Site Locally](#running-the-site-locally)
- [Editing Markdown Content](#editing-markdown-content)
- [Editing Navigation Sidebars](#editing-navigation-sidebars)
- [Changing the Release Version](#changing-the-release-version)
- [Redirects](#redirects)
- [Browser Support](#browser-support)
- [Deployment](#deployment)
<!-- BEGIN: contributions -->
<!-- Generated text, do not edit directly -->
## Contributions Welcome!
If you find a typo or you feel like you can improve the HTML, CSS, or JavaScript, we welcome contributions. Feel free to open issues or pull requests like any normal GitHub project, and we'll merge it in 🚀
<!-- END: contributions -->
<!-- BEGIN: local-development -->
<!-- Generated text, do not edit directly -->
## Running the Site Locally
The website can be run locally through node.js or Docker. If you choose to run through Docker, everything will be a little bit slower due to the additional overhead, so for frequent contributors it may be worth it to use node. Also if you are a vim user, it's also worth noting that vim's swapfile usage can cause issues for the live reload functionality. In order to avoid these issues, make sure you have run `:set backupcopy=yes` within vim.
The website can be run locally through node.js or [Docker](https://www.docker.com/get-started). If you choose to run through Docker, everything will be a little bit slower due to the additional overhead, so for frequent contributors it may be worth it to use node.
> **Note:** If you are using a text editor that uses a "safe write" save style such as **vim** or **goland**, this can cause issues with the live reload in development. If you turn off safe write, this should solve the problem. In vim, this can be done by running `:set backupcopy=yes`. In goland, search the settings for "safe write" and turn that setting off.
### With Docker
@ -25,11 +55,16 @@ If your local development environment has a supported version (v10.0.0+) of [nod
- `npm install`
- `npm start`
and then visit `http://localhost:3000`.
...and then visit `http://localhost:3000`.
If you pull down new code from github, you should run `npm install` again. Otherwise, there's no need to re-run `npm install` each time the site is run, you can just run `npm start` to get it going.
## Editing Content
<!-- END: local-development -->
<!-- BEGIN: editing-markdown -->
<!-- Generated text, do not edit directly -->
## Editing Markdown Content
Documentation content is written in [Markdown](https://www.markdownguide.org/cheat-sheet/) and you'll find all files listed under the `/pages` directory.
@ -50,71 +85,18 @@ The significant keys in the YAML frontmatter are:
- `title` `(string)` - This is the title of the page that will be set in the HTML title.
- `description` `(string)` - This is a description of the page that will be set in the HTML description.
> ⚠️Since `api` is a reserved directory within NextJS, all `/api/**` pages are listed under the `/pages/api-docs` path.
### Editing Sidebars
The structure of the sidebars are controlled by files in the [`/data` directory](data).
- Edit [this file](data/docs-navigation.js) to change the **docs** sidebar
- Edit [this file](data/api-navigation.js) to change the **api docs** sidebar
To nest sidebar items, you'll want to add a new `category` key/value accompanied by the appropriate embedded `content` values.
- `category` values will be **directory names** within the `pages` directory
- `content` values will be **file names** within their appropriately nested directory.
> ⚠️ Since `api` is a reserved directory within NextJS, all `/api/**` pages are listed under the `/pages/api-docs` path.
### Creating New Pages
There is currently a small bug with new page creation - if you create a new page and link it up via subnav data while the server is running, it will report an error saying the page was not found. This can be resolved by restarting the server.
### Changing the Release Version
To change the version of Nomad displayed for download on the website, head over to `data/version.js` and change the number there. It's important to note that the version number must match a version that has been released and is live on `releases.hashicorp.com` -- if it does not, the website will be unable to fetch links to the binaries and will not compile. So this version number should be changed _only after a release_.
### Displaying a Prerelease
If there is a prerelease of any type that should be displayed on the downloads page, this can be done by editing `pages/downloads/index.jsx`. By default, the download component might look something like this:
```jsx
<ProductDownloader
product="Nomad"
version={VERSION}
downloads={downloadData}
community="/resources"
/>
```
To add a prerelease, an extra `prerelease` property can be added to the component as such:
```jsx
<ProductDownloader
product="Nomad"
version={VERSION}
downloads={downloadData}
community="/resources"
prerelease={{
type: 'release candidate', // the type of prerelease: beta, release candidate, etc.
name: 'v1.0.0', // the name displayed in text on the website
version: '1.0.0-rc1' // the actual version tag that was pushed to releases.hashicorp.com
}}
/>
```
This configuration would display something like the following text on the website, emphasis added to the configurable parameters:
```
A {{ release candidate }} for Nomad {{ v1.0.0 }} is available! The release can be <a href='https://releases.hashicorp.com/nomad/{{ 1.0.0-rc1 }}'>downloaded here</a>.
```
You may customize the parameters in any way you'd like. To remove a prerelease from the website, simply delete the `prerelease` paremeter from the above component.
### Markdown Enhancements
There are several custom markdown plugins that are available by default that enhance standard markdown to fit our use cases. This set of plugins introduces a couple instances of custom syntax, and a couple specific pitfalls that are not present by default with markdown, detailed below:
There are several custom markdown plugins that are available by default that enhance [standard markdown](https://commonmark.org/) to fit our use cases. This set of plugins introduces a couple instances of custom syntax, and a couple specific pitfalls that are not present by default with markdown, detailed below:
- If you see the symbols `~>`, `->`, `=>`, or `!>`, these represent [custom alerts](https://github.com/hashicorp/remark-plugins/tree/master/plugins/paragraph-custom-alerts#paragraph-custom-alerts). These render as colored boxes to draw the user's attention to some type of aside.
- If you see `@include '/some/path.mdx'`, this is a [markdown include](https://github.com/hashicorp/remark-plugins/tree/master/plugins/include-markdown#include-markdown-plugin). It's worth noting as well that all includes resolve from `website/pages/partials` by default.
- If you see `@include '/some/path.mdx'`, this is a [markdown include](https://github.com/hashicorp/remark-plugins/tree/master/plugins/include-markdown#include-markdown-plugin). It's worth noting as well that all includes resolve from `website/pages/partials` by default, and that changes to partials will not live-reload the website.
- If you see `# Headline ((#slug))`, this is an example of an [anchor link alias](https://github.com/hashicorp/remark-plugins/tree/je.anchor-link-adjustments/plugins/anchor-links#anchor-link-aliases). It adds an extra permalink to a headline for compatibility and is removed from the output.
- Due to [automatically generated permalinks](https://github.com/hashicorp/remark-plugins/tree/je.anchor-link-adjustments/plugins/anchor-links#anchor-links), any text changes to _headlines_ or _list items that begin with inline code_ can and will break existing permalinks. Be very cautious when changing either of these two text items.
@ -134,6 +116,338 @@ There are several custom markdown plugins that are available by default that enh
...while it perhaps would not be an improved user experience, no links would break because of it. The best approach is to **avoid changing headlines and inline code at the start of a list item**. If you must change one of these items, make sure to tag someone from the digital marketing development team on your pull request, they will help to ensure as much compatibility as possible.
### Custom Components
A number of custom [mdx components](https://mdxjs.com/) are available for use within any `.mdx` file. Each one is documented below:
#### Tabs
The `Tabs` component creates tabbed content of any type, but is often used for code examples given in different languages. Here's an example of how it looks from the Vagrant documentation website:
![Tabs Component](https://p176.p0.n0.cdn.getcloudapp.com/items/WnubALZ4/Screen%20Recording%202020-06-11%20at%2006.03%20PM.gif?v=1de81ea720a8cc8ade83ca64fb0b9edd)
It can be used as such within a markdown file:
````mdx
Normal **markdown** content.
<Tabs>
<Tab heading="CLI command">
<!-- Intentionally skipped line.. -->
```shell-session
$ command ...
```
<!-- Intentionally skipped line.. -->
</Tab>
<Tab heading="API call using cURL">
```shell-session
$ curl ...
```
</Tab>
</Tabs>
Contined normal markdown content
````
The intentionally skipped line is a limitation of the mdx parser which is being actively worked on. All tabs mst have a heading, and there is no limit to the number of tabs, though it is recommended to go for a maximum of three or four.
#### Enterprise Alert
This component provides a standard way to call out functionality as being present only in the enterprise version of the software. It can be presented in two contexts, inline or standalone. Here's an example of standalone usage from the Consul docs website:
![Enterprise Alert Component - Standalone](https://p176.p0.n0.cdn.getcloudapp.com/items/WnubALp8/Screen%20Shot%202020-06-11%20at%206.06.03%20PM.png?v=d1505b90bdcbde6ed664831a885ea5fb)
The standalone component can be used as such in markdown files:
```mdx
# Page Headline
<EnterpriseAlert />
Continued markdown content...
```
It can also receive custom text contents if you need to change the messaging but wish to retain the style. This will replace the text `This feature is available in all versions of Consul Enterprise.` with whatever you add. For example:
```mdx
# Page Headline
<EnterpriseAlert>
My custom text here, and <a href="#">a link</a>!
</EnterpriseAlert>
Continued markdown content...
```
It's important to note that once you are adding custom content, it must be html and can not be markdown, as demonstrated above with the link.
Now let's look at inline usage, here's an example:
![Enterprise Alert Component - Inline](https://p176.p0.n0.cdn.getcloudapp.com/items/L1upYLEJ/Screen%20Shot%202020-06-11%20at%206.07.50%20PM.png?v=013ba439263de8292befbc851d31dd78)
And here's how it could be used in your markdown document:
```mdx
### Some Enterprise Feature <EnterpriseAlert inline />
Continued markdown content...
```
It's also worth noting that this component will automatically adjust to the correct product colors depending on the context.
#### Other Components
Other custom components can be made available on a per-site basis, the above are the standards. If you have questions about custom components that are not documented here, or have a request for a new custom component, please reach out to @hashicorp/digital-marketing.
### Syntax Highlighting
When using fenced code blocks, the recommendation is to tag the code block with a language so that it can be syntax highlighted. For example:
````
```
// BAD: Code block with no language tag
```
```javascript
// GOOD: Code block with a language tag
```
````
Check out the [supported languages list](https://prismjs.com/#supported-languages) for the syntax highlighter we use if you want to double check the language name.
It is also worth noting specifically that if you are using a code block that is an example of a terminal command, the correct language tag is `shell-session`. For example:
🚫**BAD**: Using `shell`, `sh`, `bash`, or `plaintext` to represent a terminal command
````
```shell
$ terraform apply
```
````
✅**GOOD**: Using `shell-session` to represent a terminal command
````
```shell-session
$ terraform apply
```
````
<!-- END: editing-markdown -->
<!-- BEGIN: editing-docs-sidebars -->
<!-- Generated text, do not edit directly -->
## Editing Navigation Sidebars
The structure of the sidebars are controlled by files in the [`/data` directory](data). For example, [this file](data/docs-navigation.js) controls the **docs** sidebar. Within the `data` folder, any file with `-navigation` after it controls the navigation for the given section.
The sidebar uses a simple recursive data structure to represent _files_ and _directories_. A file is represented by a string, and a directory is represented by an object. The sidebar is meant to reflect the structure of the docs within the filesystem while also allowing custom ordering. Let's look at an example. First, here's our example folder structure:
```text
.
├── docs
│   └── directory
│   ├── index.mdx
│   ├── file.mdx
│   ├── another-file.mdx
│   └── nested-directory
│   ├── index.mdx
│   └── nested-file.mdx
```
Here's how this folder structure could be represented as a sidebar navigation, in this example it would be the file `website/data/docs-navigation.js`:
```js
export default {
category: 'directory',
content: [
'file',
'another-file',
{
category: 'nested-directory',
content: ['nested-file'],
},
],
}
```
- `category` values will be **directory names** within the `pages/<section>` directory
- `content` values will be **file names** within their appropriately nested directory
A couple more important notes:
- Within this data structure, ordering does not matter, but hierarchy does. So while you could put `file` and `another-file` in any order, or even leave one or both of them out, you could not decide to un-nest the `nested-directory` object without also un-nesting it in the filesystem.
- The `sidebar_title` frontmatter property on each `mdx` page is responsible for displaying the human-readable page name in the navigation.
- _By default_, every directory/category must have an `index.mdx` file. This file will be automatically added to the navigation as "Overview", and its `sidebar_title` property will set the human-readable name of the entire category.
Below we will discuss a couple of more unusual but still helpful patterns.
### Index-less Categories
Sometimes you may want to include a category but not have a need for an index page for the category. This can be accomplished, but a human-readable category name needs to be set manually, since the category name is normally pulled from the `sidebar_title` property of the index page. Here's an example of how an index-less category might look:
```text
.
├── docs
│   └── indexless-category
│   └── file.mdx
```
```js
// website/data/docs-navigation.js
export default {
category: 'indexless-category',
name: 'Indexless Category',
content: ['file'],
}
```
The addition of the `name` property to a category object is all it takes to be able to skip the index file.
### Custom or External Links
Sometimes you may have a need to include a link that is not directly to a file within the docs hierarchy. This can also be supported using a different pattern. For example:
```js
export default {
category: 'directory',
content: [
'file',
'another-file',
{ title: 'Tao of HashiCorp', href: 'https://www.hashicorp.com/tao-of-hashicorp' }
}
]
}
```
If the link provided in the `href` property is external, it will display a small icon indicating this. If it's internal, it will appear the same way as any other direct file link.
<!-- END: editing-docs-sidebars -->
<!-- BEGIN: releases -->
<!-- Generated text, do not edit directly -->
## Changing the Release Version
To change the version displayed for download on the website, head over to `data/version.js` and change the number there. It's important to note that the version number must match a version that has been released and is live on `releases.hashicorp.com` -- if it does not, the website will be unable to fetch links to the binaries and will not compile. So this version number should be changed _only after a release_.
### Displaying a Prerelease
If there is a prerelease of any type that should be displayed on the downloads page, this can be done by editing `pages/downloads/index.jsx`. By default, the download component might look something like this:
```jsx
<ProductDownloader
product="<Product>"
version={VERSION}
downloads={downloadData}
community="/resources"
/>
```
To add a prerelease, an extra `prerelease` property can be added to the component as such:
```jsx
<ProductDownloader
product="<Product>"
version={VERSION}
downloads={downloadData}
community="/resources"
prerelease={{
type: 'release candidate', // the type of prerelease: beta, release candidate, etc.
name: 'v1.0.0', // the name displayed in text on the website
version: '1.0.0-rc1', // the actual version tag that was pushed to releases.hashicorp.com
}}
/>
```
This configuration would display something like the following text on the website, emphasis added to the configurable parameters:
```
A {{ release candidate }} for <Product> {{ v1.0.0 }} is available! The release can be <a href='https://releases.hashicorp.com/<product>/{{ 1.0.0-rc1 }}'>downloaded here</a>.
```
You may customize the parameters in any way you'd like. To remove a prerelease from the website, simply delete the `prerelease` paremeter from the above component.
<!-- END: releases -->
<!-- BEGIN: redirects -->
<!-- Generated text, do not edit directly -->
## Redirects
This website structures URLs based on the filesystem layout. This means that if a file is moved, removed, or a folder is re-organized, links will break. If a path change is necessary, it can be mitigated using redirects.
To add a redirect, head over to the `_redirects` file - the format is fairly simple. On the left is the current path, and on the right is the path that should be redirected to. It's important to note that if there are links to a `.html` version of a page, that must also be explicitly redirected. For example:
```
/foo /bar 301!
/foo.html /bar 301!
```
This redirect rule will send all incoming links to `/foo` and `/foo.html` to `/bar`. For more details on the redirects file format, [check out the docs on netlify](https://docs.netlify.com/routing/redirects/rewrites-proxies). Note that it is critical that `301!` is added to every one-to-one redirect - if it is left off the redirect may not work.
There are a couple important caveats with redirects. First, redirects are applied at the hosting layer, and therefore will not work by default in local dev mode. To test in local dev mode, you can use [`netlify dev`](https://www.netlify.com/products/dev/), or just push a commit and check using the deploy preview.
Second, redirects do not apply to client-side navigation. By default, all links in the navigation and docs sidebar will navigate purely on the client side, which makes navigation through the docs significantly faster, especially for those with low-end devices and/or weak internet connections. In the future, we plan to convert all internal links within docs pages to behave this way as well. This means that if there is a link on this website to a given piece of content that has changed locations in some way, we need to also _directly change existing links to the content_. This way, if a user clicks a link that navigates on the client side, or if they hit the url directly and the page renders from the server side, either one will work perfectly.
Let's look at an example. Say you have a page called `/docs/foo` which needs to be moved to `/docs/nested/foo`. Additionally, this is a page that has been around for a while and we know there are links into `/docs/foo.html` left over from our previous website structure. First, we move the page, then adjust the docs sidenav, in `data/docs-navigation.js`. Find the category the page is in, and move it into the appropriate subcategory. Next, we add to `_redirects` as such:
```
/foo /nested/foo 301!
/foo.html /nested/foo 301!
```
Finally, we run a global search for internal links to `/foo`, and make sure to adjust them to be `/nested/foo` - this is to ensure that client-side navigation still works correctly. _Adding a redirect alone is not enough_.
One more example - let's say that content is being moved to an external website. A common example is guides moving to `learn.hashicorp.com`. In this case, we take all the same steps, except that we need to make a different type of change to the `docs-navigation` file. If previously the structure looked like:
```js
{
category: 'docs',
content: [
'foo'
]
}
```
If we no longer want the link to be in the side nav, we can simply remove it. If we do still want the link in the side nav, but pointing to an external destnation, we need to slightly change the structure as such:
```js
{
category: 'docs',
content: [
{ title: 'Foo Title', href: 'https://learn.hashicorp.com/<product>/foo' }
]
}
```
As the majority of items in the side nav are internal links, the structure makes it as easy as possible to represent these links. This alternate syntax is the most concise manner than an external link can be represented. External links can be used anywhere within the docs sidenav.
It's also worth noting that it is possible to do glob-based redirects, for example matching `/docs/*`, and you may see this pattern in the `_redirects` file. This type of redirect is much higher risk and the behavior is a bit more nuanced, so if you need to add a glob redirect, please reach out to the website maintainers and ask about it first.
<!-- END: redirects -->
<!-- BEGIN: browser-support -->
<!-- Generated text, do not edit directly -->
## Browser Support
We support the following browsers targeting roughly the versions specified.
| ![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_24x24.png) | ![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_24x24.png) | ![Opera](https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_24x24.png) | ![Safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_24x24.png) | ![Internet Explorer](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_24x24.png) |
| --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
| **Latest** | **Latest** | **Latest** | **Latest** | **11+** |
<!-- END: browser-support -->
<!-- BEGIN: deployment -->
<!-- Generated text, do not edit directly -->
## Deployment
This website is hosted on Netlify and configured to automatically deploy anytime you push code to the `stable-website` branch. Any time a pull request is submitted that changes files within the `website` folder, a deployment preview will appear in the github checks which can be used to validate the way docs changes will look live. Deployments from `stable-website` will look and behave the same way as deployment previews.
<!-- END: deployment -->

1
website/_redirects
View file

@ -166,6 +166,7 @@
# Docs
/docs/index /docs 301!
/api/index /api-docs 301!
/api-docs/index /api-docs 301!
/resources /resources 301!
/docs/agent/config.html /docs/configuration 301!
/docs/agent/config /docs/configuration 301!

1
website/components/basic-hero/style.css
View file

@ -21,6 +21,7 @@
display: flex;
flex-wrap: wrap;
justify-content: center;
/*
* Margins here compensate for extra 8px margin on buttons
* which are needed to center and space properly regardless of whether

16
website/components/case-study-carousel/style.css
View file

@ -27,7 +27,7 @@
width: 100%;
height: 500px;
position: absolute;
bottom: 0px;
bottom: 0;
z-index: -1;
}
@ -46,7 +46,7 @@
max-height: 40px;
width: 33.33%;
padding: 0 30px;
margin: 24px 0px;
margin: 24px 0;
@media (max-width: 800px) {
padding: 0 20px;
@ -88,6 +88,7 @@
outline: none !important;
}
}
/* End `nuka-carousel` styles */
& .side-control {
@ -122,7 +123,7 @@
width: 100%;
background: var(--white);
padding: 64px;
box-shadow: 0px 8px 22px #dedede;
box-shadow: 0 8px 22px #dedede;
@media (max-width: 800px) {
box-shadow: none;
@ -203,12 +204,13 @@
& .person-name {
& h5 {
margin: 0;
@media (max-width: 400px) {
font-size: 16px;
}
}
@media (max-width: 400px) {
& h5 {
font-size: 16px;
}
& p {
font-size: 15px;
}
@ -228,7 +230,7 @@
& .case {
color: var(--gray-5);
font-size: 24px;
line-height: 31px; /* Called for within the design, no custom property seemed appropriate*/
line-height: 31px; /* Called for within the design, no custom property seemed appropriate */
}
}

2
website/components/featured-slider-section/style.css
View file

@ -5,7 +5,7 @@
color: var(--white);
& h2 {
margin-top: 0px;
margin-top: 0;
color: var(--white);
text-align: center;
}

6
website/components/features-list/style.css
View file

@ -3,7 +3,7 @@
padding-bottom: 24px;
& h2 {
text-align: center;
margin-top: 0px;
margin-top: 0;
margin-bottom: 64px;
}
@ -72,11 +72,11 @@
}
&:nth-child(odd) {
margin-right: 0px;
margin-right: 0;
}
&:nth-child(even) {
margin-left: 0px;
margin-left: 0;
}
}
}

89
website/components/learn-nomad/style.css
View file

@ -66,12 +66,14 @@
}
& > a {
display: flex;
cursor: pointer;
margin: 0 16px;
width: 33.333%;
transition: box-shadow 0.25s, transform 0.25s, -webkit-transform 0.25s;
&:hover {
box-shadow: 0px 16px 28px rgba(37, 38, 45, 0.12);
box-shadow: 0 16px 28px rgba(37, 38, 45, 0.12);
transform: translateY(-4px);
}
@ -87,64 +89,59 @@
margin-bottom: 48px;
}
}
}
& > a {
display: flex;
cursor: pointer;
}
& > a .course {
border: 1px solid var(--gray-6);
display: flex;
flex-direction: column;
width: 100%;
& > div {
min-height: 200px;
padding: 25px;
}
& .image {
background: var(--gray-7);
position: relative;
& .course {
border: 1px solid var(--gray-6);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
& img {
max-width: 80px;
max-height: 80px;
& > div {
min-height: 200px;
padding: 25px;
}
}
& h4 {
color: var(--gray-2);
}
& .time {
color: var(--gray-4);
position: absolute;
top: 10px;
right: 10px;
}
& .content {
text-align: center;
background: #fff;
@media (max-width: 768px) {
& .image {
background: var(--gray-7);
position: relative;
display: flex;
justify-content: center;
align-items: center;
& img {
max-width: 80px;
max-height: 80px;
}
}
& h4 {
margin: 24px 0px;
color: var(--gray-2);
}
}
& .content label {
color: var(--nomad);
& .time {
color: var(--gray-4);
position: absolute;
top: 10px;
right: 10px;
}
& .content {
text-align: center;
background: #fff;
@media (max-width: 768px) {
display: flex;
justify-content: center;
align-items: center;
}
& h4 {
margin: 24px 0;
}
& label {
color: var(--nomad);
}
}
}
}
}

6
website/jsconfig.json Normal file
View file

@ -0,0 +1,6 @@
{
"compilerOptions": {
"baseUrl": "."
},
"exclude": ["node_modules", ".next", ".mdx-data", "out"]
}

47
website/layouts/api.jsx
View file

@ -1,30 +1,35 @@
import DocsPage from '@hashicorp/react-docs-page'
import order from '../data/api-navigation.js'
import order from 'data/api-navigation.js'
import { frontMatter as data } from '../pages/api-docs/**/*.mdx'
import Head from 'next/head'
import Link from 'next/link'
import { createMdxProvider } from '@hashicorp/nextjs-scripts/lib/providers/docs'
function ApiLayoutWrapper(pageMeta) {
const MDXProvider = createMdxProvider({ product: 'nomad' })
export default function ApiLayoutWrapper(pageMeta) {
function ApiLayout(props) {
return (
<DocsPage
{...props}
product="nomad"
head={{
is: Head,
title: `${pageMeta.page_title} | Nomad by HashiCorp`,
description: pageMeta.description,
siteName: 'Nomad by HashiCorp'
}}
sidenav={{
Link,
category: 'api-docs',
currentPage: props.path,
data,
order
}}
resourceURL={`https://github.com/hashicorp/nomad/blob/master/website/pages/${pageMeta.__resourcePath}`}
/>
<MDXProvider>
<DocsPage
{...props}
product="nomad"
head={{
is: Head,
title: `${pageMeta.page_title} | Nomad by HashiCorp`,
description: pageMeta.description,
siteName: 'Nomad by HashiCorp',
}}
sidenav={{
Link,
category: 'api-docs',
currentPage: props.path,
data,
order,
}}
resourceURL={`https://github.com/hashicorp/nomad/blob/master/website/pages/${pageMeta.__resourcePath}`}
/>
</MDXProvider>
)
}
@ -32,5 +37,3 @@ function ApiLayoutWrapper(pageMeta) {
return ApiLayout
}
export default ApiLayoutWrapper

4
website/layouts/docs.jsx
View file

@ -11,7 +11,7 @@ const MDXProvider = createMdxProvider({
additionalComponents: { Placement },
})
function DocsLayoutWrapper(pageMeta) {
export default function DocsLayoutWrapper(pageMeta) {
function DocsLayout(props) {
return (
<MDXProvider>
@ -41,5 +41,3 @@ function DocsLayoutWrapper(pageMeta) {
return DocsLayout
}
export default DocsLayoutWrapper

47
website/layouts/guides.jsx
View file

@ -1,30 +1,35 @@
import DocsPage from '@hashicorp/react-docs-page'
import order from '../data/guides-navigation.js'
import order from 'data/guides-navigation.js'
import { frontMatter as data } from '../pages/guides/**/*.mdx'
import Head from 'next/head'
import Link from 'next/link'
import { createMdxProvider } from '@hashicorp/nextjs-scripts/lib/providers/docs'
function GuidesLayoutWrapper(pageMeta) {
const MDXProvider = createMdxProvider({ product: 'nomad' })
export default function GuidesLayoutWrapper(pageMeta) {
function GuidesLayout(props) {
return (
<DocsPage
{...props}
product="nomad"
head={{
is: Head,
title: `${pageMeta.page_title} | Nomad by HashiCorp`,
description: pageMeta.description,
siteName: 'Nomad by HashiCorp'
}}
sidenav={{
Link,
category: 'guides',
currentPage: props.path,
data,
order
}}
resourceURL={`https://github.com/hashicorp/nomad/blob/master/website/pages/${pageMeta.__resourcePath}`}
/>
<MDXProvider>
<DocsPage
{...props}
product="nomad"
head={{
is: Head,
title: `${pageMeta.page_title} | Nomad by HashiCorp`,
description: pageMeta.description,
siteName: 'Nomad by HashiCorp',
}}
sidenav={{
Link,
category: 'guides',
currentPage: props.path,
data,
order,
}}
resourceURL={`https://github.com/hashicorp/nomad/blob/master/website/pages/${pageMeta.__resourcePath}`}
/>
</MDXProvider>
)
}
@ -32,5 +37,3 @@ function GuidesLayoutWrapper(pageMeta) {
return GuidesLayout
}
export default GuidesLayoutWrapper

47
website/layouts/intro.jsx
View file

@ -1,30 +1,35 @@
import DocsPage from '@hashicorp/react-docs-page'
import order from '../data/intro-navigation.js'
import order from 'data/intro-navigation.js'
import { frontMatter as data } from '../pages/intro/**/*.mdx'
import Head from 'next/head'
import Link from 'next/link'
import { createMdxProvider } from '@hashicorp/nextjs-scripts/lib/providers/docs'
function IntroLayoutWrapper(pageMeta) {
const MDXProvider = createMdxProvider({ product: 'nomad' })
export default function IntroLayoutWrapper(pageMeta) {
function IntroLayout(props) {
return (
<DocsPage
{...props}
product="nomad"
head={{
is: Head,
title: `${pageMeta.page_title} | Nomad by HashiCorp`,
description: pageMeta.description,
siteName: 'Nomad by HashiCorp'
}}
sidenav={{
Link,
category: 'intro',
currentPage: props.path,
data,
order
}}
resourceURL={`https://github.com/hashicorp/nomad/blob/master/website/pages/${pageMeta.__resourcePath}`}
/>
<MDXProvider>
<DocsPage
{...props}
product="nomad"
head={{
is: Head,
title: `${pageMeta.page_title} | Nomad by HashiCorp`,
description: pageMeta.description,
siteName: 'Nomad by HashiCorp',
}}
sidenav={{
Link,
category: 'intro',
currentPage: props.path,
data,
order,
}}
resourceURL={`https://github.com/hashicorp/nomad/blob/master/website/pages/${pageMeta.__resourcePath}`}
/>
</MDXProvider>
)
}
@ -32,5 +37,3 @@ function IntroLayoutWrapper(pageMeta) {
return IntroLayout
}
export default IntroLayoutWrapper

16
website/layouts/use-cases/index.jsx
View file

@ -1,6 +1,6 @@
import CallToAction from '@hashicorp/react-call-to-action'
import NomadEnterpriseInfo from '../../components/enterprise-info/nomad'
import BasicHero from '../../components/basic-hero'
import NomadEnterpriseInfo from 'components/enterprise-info/nomad'
import BasicHero from 'components/basic-hero'
export default function UseCaseLayout({ title, description, children }) {
return (
@ -12,13 +12,13 @@ export default function UseCaseLayout({ title, description, children }) {
{
text: 'Explore HashiCorp Learn',
url: 'https://learn.hashicorp.com/nomad',
type: 'outbound'
type: 'outbound',
},
{
text: 'Explore Documentation',
url: '/docs',
type: 'inbound'
}
type: 'inbound',
},
]}
/>
<div className="g-grid-container">
@ -35,13 +35,13 @@ export default function UseCaseLayout({ title, description, children }) {
{
text: 'Explore HashiCorp Learn',
type: 'outbound',
url: 'https://learn.hashicorp.com/nomad'
url: 'https://learn.hashicorp.com/nomad',
},
{
text: 'Explore Documentation',
type: 'inbound',
url: '/docs'
}
url: '/docs',
},
]}
/>
</div>

2
website/layouts/use-cases/style.css
View file

@ -1,7 +1,7 @@
#p-use-case {
& .features-header {
text-align: center;
margin-bottom: 0px;
margin-bottom: 0;
}
/* Overriding the g-text-split component to have

1
website/next.config.js
View file

@ -6,7 +6,6 @@ module.exports = withHashicorp({
transpileModules: ['is-absolute-url', '@hashicorp/react-mega-nav'],
mdx: { resolveIncludes: path.join(__dirname, 'pages/partials') },
})({
exportTrailingSlash: true,
experimental: {
modern: true,
rewrites: () => [

5952
website/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

23
website/package.json
View file

@ -10,17 +10,17 @@
"@hashicorp/react-call-to-action": "^0.2.0",
"@hashicorp/react-case-study-slider": "^2.1.0",
"@hashicorp/react-content": "^3.0.0-0",
"@hashicorp/react-docs-page": "^2.0.0",
"@hashicorp/react-docs-page": "^3.0.0",
"@hashicorp/react-docs-sidenav": "^3.2.3",
"@hashicorp/react-global-styles": "^4.4.0",
"@hashicorp/react-head": "^1.0.0",
"@hashicorp/react-hero": "^3.1.0",
"@hashicorp/react-head": "^1.1.1",
"@hashicorp/react-hero": "^3.1.1",
"@hashicorp/react-image": "^2.0.1",
"@hashicorp/react-inline-svg": "^1.0.0",
"@hashicorp/react-mega-nav": "^4.0.1-2",
"@hashicorp/react-product-downloader": "^3.2.0",
"@hashicorp/react-product-downloader": "^4.0.0",
"@hashicorp/react-section-header": "^2.0.0",
"@hashicorp/react-subnav": "^3.2.0",
"@hashicorp/react-subnav": "^3.2.2",
"@hashicorp/react-text-and-content": "^4.1.0",
"@hashicorp/react-text-split": "^0.3.0",
"@hashicorp/react-text-split-with-code": "0.1.0",
@ -28,14 +28,12 @@
"@hashicorp/react-use-cases": "^1.0.4",
"@hashicorp/react-vertical-text-block-list": "^2.0.1",
"babel-plugin-import-glob-array": "^0.2.0",
"imagemin-mozjpeg": "^8.0.0",
"imagemin-optipng": "^7.1.0",
"imagemin-svgo": "^7.1.0",
"isomorphic-unfetch": "^3.0.0",
"imagemin-mozjpeg": "^9.0.0",
"imagemin-optipng": "^8.0.0",
"imagemin-svgo": "^8.0.0",
"marked": "^0.7.0",
"next": "9.3.6",
"nprogress": "^0.2.0",
"nuka-carousel": "^4.6.7",
"next": "9.4.4",
"nuka-carousel": "^4.7.0",
"react": "^16.13.1",
"react-device-detect": "^1.12.1",
"react-dom": "^16.13.1"
@ -56,6 +54,7 @@
"export": "node --max-old-space-size=2048 ./node_modules/.bin/next export",
"format": "next-hashicorp format",
"generate:component": "next-hashicorp generate component",
"generate:readme": "next-hashicorp markdown-blocks README.md",
"lint": "next-hashicorp lint",
"start": "rm -rf .next/cache/next-babel-loader/ && next dev",
"static": "npm run build && npm run export && cp _redirects out/.",

34
website/pages/404.jsx
View file

@ -1,32 +1,2 @@
import Link from 'next/link'
import { useEffect } from 'react'
export default function NotFound() {
useEffect(() => {
if (
typeof window !== 'undefined' &&
typeof window?.analytics?.track === 'function' &&
typeof window?.document?.referrer === 'string' &&
typeof window?.location?.href === 'string'
)
window.analytics.track(window.location.href, {
category: '404 Response',
label: window.document.referrer || 'No Referrer',
})
}, [])
return (
<div id="p-404">
<h1>Page Not Found</h1>
<p>
We&lsquo;re sorry but we can&lsquo;t find the page you&lsquo;re looking
for.
</p>
<p>
<Link href="/">
<a>Back to Home</a>
</Link>
</p>
</div>
)
}
import NotFound from './not-found'
export default NotFound

12
website/pages/_app.js
View file

@ -10,10 +10,10 @@ import useAnchorLinkAnalytics from '@hashicorp/nextjs-scripts/lib/anchor-link-an
import MegaNav from '@hashicorp/react-mega-nav'
import AlertBanner from '@hashicorp/react-alert-banner'
import HashiHead from '@hashicorp/react-head'
import Footer from '../components/footer'
import ProductSubnav from '../components/subnav'
import Footer from 'components/footer'
import ProductSubnav from 'components/subnav'
import Error from './_error'
import alertBannerData, { ALERT_BANNER_ACTIVE } from '../data/alert-banner'
import alertBannerData, { ALERT_BANNER_ACTIVE } from 'data/alert-banner'
NProgress({ Router })
const { ConsentManager, openConsentManager } = createConsentManager({
@ -31,12 +31,6 @@ function App({ Component, pageProps }) {
siteName="Nomad by HashiCorp"
description="Nomad is a highly available, distributed, data-center aware cluster and application scheduler designed to support the modern datacenter with support for long-running services, batch jobs, and much more."
image="https://www.nomadproject.io/img/og-image.png"
stylesheet={[
{
href:
'https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&display=swap',
},
]}
icon={[{ href: '/favicon.ico' }]}
preload={[
{ href: '/fonts/klavika/medium.woff2', as: 'font' },

23
website/pages/docs/job-specification/expose.mdx
View file

@ -10,7 +10,15 @@ description: |-
# `expose` Stanza
<Placement
groups={['job', 'group', 'service', 'connect', 'sidecar_service', 'proxy', 'expose']}
groups={[
'job',
'group',
'service',
'connect',
'sidecar_service',
'proxy',
'expose',
]}
/>
The `expose` stanza allows configuration of additional listeners for the default Envoy sidecar
@ -126,7 +134,7 @@ job "expose-example" {
## `expose` Parameters
- `path` <code>([Path]: nil)</code> - A list of [Envoy Expose Path Configurations](/docs/job-specification/path)
- `path` <code>([Path]: nil)</code> - A list of [Envoy Expose Path Configurations](/docs/job-specification/expose/#path-1)
to expose through Envoy.
### `path` Parameters
@ -136,13 +144,12 @@ job "expose-example" {
- `protocol` `(string: required)` - Sets the protocol of the listener. Must be
`http` or `http2`. For gRPC use `http2`.
- `local_path_port` `(int: required)` - The port the service is listening to for connections to
the configured `path`. Typically this will be the same as the `service.port` value, but
could be different if for example the exposed path is intended to resolve to another task
in the task group.
the configured `path`. Typically this will be the same as the `service.port` value, but
could be different if for example the exposed path is intended to resolve to another task
in the task group.
- `listener_port` <code>([Port]: required)</code> - The name of the port to use
for the exposed listener. The port should be configured to [map inside](/docs/job-specification/network#to)
the task's network namespace.
for the exposed listener. The port should be configured to [map inside](/docs/job-specification/network#to)
the task's network namespace.
## `expose` Examples

19
website/pages/downloads/index.jsx
View file

@ -1,17 +1,16 @@
import fetch from 'isomorphic-unfetch'
import VERSION from '../../data/version.js'
import VERSION from 'data/version.js'
import ProductDownloader from '@hashicorp/react-product-downloader'
import Head from 'next/head'
import HashiHead from '@hashicorp/react-head'
export default function DownloadsPage({ downloadData }) {
export default function DownloadsPage({ releaseData }) {
return (
<div id="p-downloads" className="g-container">
<HashiHead is={Head} title="Downloads | Nomad by HashiCorp" />
<ProductDownloader
product="Nomad"
version={VERSION}
downloads={downloadData}
releaseData={releaseData}
community="/resources"
prerelease={{
type: 'Beta 1',
@ -26,16 +25,8 @@ export default function DownloadsPage({ downloadData }) {
export async function getStaticProps() {
return fetch(`https://releases.hashicorp.com/nomad/${VERSION}/index.json`)
.then(r => r.json())
.then(r => {
// TODO: restructure product-downloader to run this logic internally
return r.builds.reduce((acc, build) => {
if (!acc[build.os]) acc[build.os] = {}
acc[build.os][build.arch] = build.url
return acc
}, {})
})
.then(r => ({ props: { downloadData: r } }))
.then((res) => res.json())
.then((releaseData) => ({ props: { releaseData } }))
.catch(() => {
throw new Error(
`--------------------------------------------------------

12
website/pages/home/index.jsx
View file

@ -1,10 +1,10 @@
import FeaturesList from '../../components/features-list'
import HomepageHero from '../../components/homepage-hero'
import CaseStudyCarousel from '../../components/case-study-carousel'
import FeaturesList from 'components/features-list'
import HomepageHero from 'components/homepage-hero'
import CaseStudyCarousel from 'components/case-study-carousel'
import UseCases from '@hashicorp/react-use-cases'
import MiniCTA from '../../components/mini-cta'
import NomadEnterpriseInfo from '../../components/enterprise-info/nomad'
import LearnNomad from '../../components/learn-nomad'
import MiniCTA from 'components/mini-cta'
import NomadEnterpriseInfo from 'components/enterprise-info/nomad'
import LearnNomad from 'components/learn-nomad'
import CallToAction from '@hashicorp/react-call-to-action'
export default function Homepage() {

33
website/pages/not-found/index.jsx Normal file
View file

@ -0,0 +1,33 @@
import s from './style.module.css'
import Link from 'next/link'
import { useEffect } from 'react'
export default function NotFound() {
useEffect(() => {
if (
typeof window !== 'undefined' &&
typeof window?.analytics?.track === 'function' &&
typeof window?.document?.referrer === 'string' &&
typeof window?.location?.href === 'string'
)
window.analytics.track(window.location.href, {
category: '404 Response',
label: window.document.referrer || 'No Referrer',
})
}, [])
return (
<div className={s.root}>
<h1>Page Not Found</h1>
<p>
We&lsquo;re sorry but we can&lsquo;t find the page you&lsquo;re looking
for.
</p>
<p>
<Link href="/">
<a>Back to Home</a>
</Link>
</p>
</div>
)
}

36
website/pages/not-found/style.module.css Normal file
View file

@ -0,0 +1,36 @@
.root {
composes: .g-grid-container from global;
display: flex;
flex-direction: column;
justify-content: center;
margin: 64px auto; /* this is being overridden at the request of the learn team */
max-width: 784px;
min-height: 50vh;
padding-inline: 32px;
text-align: center;
@media (--large) {
padding-inline: 24px;
}
& h1 {
font-size: 1.5rem;
letter-spacing: -0.004em;
line-height: 1.375em;
@media (--medium-up) {
font-size: 1.75rem;
line-height: 1.321em;
}
@media (--large) {
font-size: 2rem;
letter-spacing: -0.006em;
line-height: 1.313em;
}
}
& a {
color: var(--highlight-color);
}
}

22
website/pages/partials/envvars.mdx
View file

@ -31,7 +31,7 @@
<code>NOMAD_SECRETS_DIR</code>
</td>
<td>
Path to the task's secrets directory. See
Path to the task&lsquo;s secrets directory. See
<a href="/docs/runtime/environment#task-directories">here</a> for more information.
</td>
</tr>
@ -73,19 +73,19 @@
<td>
<code>NOMAD_TASK_NAME</code>
</td>
<td>Task's name</td>
<td>Task&lsquo;s name</td>
</tr>
<tr>
<td>
<code>NOMAD_GROUP_NAME</code>
</td>
<td>Group's name</td>
<td>Group&lsquo;s name</td>
</tr>
<tr>
<td>
<code>NOMAD_JOB_NAME</code>
</td>
<td>Job's name</td>
<td>Job&lsquo;s name</td>
</tr>
<tr>
<td>
@ -110,12 +110,12 @@
<code>NOMAD_META_&lt;key&gt;</code>
</td>
<td>
The metadata value given by <code>key</code> on the task's metadata.
Note that this is different from
The metadata value given by <code>key</code> on the task&lsquo;s
metadata. Note that this is different from
<a href="/docs/runtime/interpolation#node-variables-">
<code>$&#123;meta.&lt;key&gt;&#125;</code>
</a>
which are keys in the node's metadata.
which are keys in the node&lsquo;s metadata.
</td>
</tr>
<tr>
@ -123,7 +123,7 @@
<code>VAULT_TOKEN</code>
</td>
<td>
The task's Vault token. See
The task&lsquo;s Vault token. See
<a href="/docs/vault-integration">Vault Integration</a>
for more details
</td>
@ -146,7 +146,7 @@
</td>
<td>
Port for the given port <code>label</code>. Driver-specified port when a
port map is used, otherwise the host's static or dynamic port
port map is used, otherwise the host&lsquo;s static or dynamic port
allocation. Services should bind to this port. See
<a href="/docs/job-specification/network">here for more</a> information.
</td>
@ -185,8 +185,8 @@
<td>
Port for the given port <code>label</code> and <code>task</code> for
tasks in the same task group. Driver-specified port when a port map is
used, otherwise the host's static or dynamic port allocation. Services
should bind to this port.
used, otherwise the host&lsquo;s static or dynamic port allocation.
Services should bind to this port.
</td>
</tr>
<tr>

17
website/pages/style.css
View file

@ -34,6 +34,7 @@
@import '~@hashicorp/react-text-split/dist/style.css';
@import '~@hashicorp/react-toggle/dist/style.css';
@import '~@hashicorp/react-use-cases/dist/style.css';
@import '~@hashicorp/react-use-cases/dist/style.css';
@import '~@hashicorp/react-vertical-text-block-list/dist/style.css';
/* Local Components */
@ -73,15 +74,15 @@
padding-top: 96px;
padding-bottom: 96px;
& > .g-section-header + *,
& > .g-container > .g-section-header + * {
margin-top: 72px;
}
& > .g-section-header + *,
& > .g-container > .g-section-header + * {
margin-top: 72px;
}
& > * + *,
& > .g-container > * + * {
margin-top: 96px;
}
& > * + *,
& > .g-container > * + * {
margin-top: 96px;
}
}
.g-section-block .button-container {

49
website/pages/use-cases/automated-service-networking-with-consul.jsx
View file

@ -1,6 +1,6 @@
import UseCasesLayout from '../../layouts/use-cases'
import UseCasesLayout from 'layouts/use-cases'
import TextSplitWithImage from '@hashicorp/react-text-split-with-image'
import FeaturedSliderSection from '../../components/featured-slider-section'
import FeaturedSliderSection from 'components/featured-slider-section'
export default function AutomatedServiceNetworkingWithConsulPage() {
return (
@ -19,13 +19,13 @@ export default function AutomatedServiceNetworkingWithConsulPage() {
text: 'Read More',
url:
'https://learn.hashicorp.com/nomad/operating-nomad/clustering#use-consul-to-automatically-cluster-nodes',
type: 'outbound'
}
]
type: 'outbound',
},
],
}}
image={{
url: require('./img/auto-clustering-with-consul.svg'),
alt: ''
alt: '',
}}
/>
@ -39,15 +39,14 @@ export default function AutomatedServiceNetworkingWithConsulPage() {
links: [
{
text: 'Read More',
url:
'/docs/integrations/consul-integration#service-discovery',
type: 'inbound'
}
]
url: '/docs/integrations/consul-integration#service-discovery',
type: 'inbound',
},
],
}}
image={{
url: require('./img/automated-service-discovery-with-consul.png'),
alt: ''
alt: '',
}}
/>
</div>
@ -62,13 +61,13 @@ export default function AutomatedServiceNetworkingWithConsulPage() {
{
text: 'Learn More',
url: '/docs/integrations/consul-connect',
type: 'inbound'
}
]
type: 'inbound',
},
],
}}
image={{
url: require('./img/auto-service-to-service-communications.svg'),
alt: ''
alt: '',
}}
/>
@ -79,11 +78,11 @@ export default function AutomatedServiceNetworkingWithConsulPage() {
logo: {
url:
'https://www.datocms-assets.com/2885/1582161366-deluxe-logo.svg',
alt: 'Deluxe'
alt: 'Deluxe',
},
image: {
url: require('./img/deluxe.png'),
alt: 'Deluxe Case Study'
alt: 'Deluxe Case Study',
},
heading: 'Deluxe',
content:
@ -92,18 +91,18 @@ export default function AutomatedServiceNetworkingWithConsulPage() {
text: 'Learn More',
url:
'https://www.hashicorp.com/resources/deluxe-hashistack-video-production',
type: 'outbound'
}
type: 'outbound',
},
},
{
logo: {
url:
'https://www.datocms-assets.com/2885/1582161581-seatgeek.svg',
alt: 'SeatGeek'
alt: 'SeatGeek',
},
image: {
url: require('./img/seatgeek.png'),
alt: 'Seat Geek Case Study'
alt: 'Seat Geek Case Study',
},
heading: 'SeatGeek',
content:
@ -112,9 +111,9 @@ export default function AutomatedServiceNetworkingWithConsulPage() {
text: 'Learn More',
url:
'https://www.hashicorp.com/resources/seatgeek-and-the-hashistack-a-tooling-and-automation-love-story',
type: 'outbound'
}
}
type: 'outbound',
},
},
]}
/>
</UseCasesLayout>

46
website/pages/use-cases/non-containerized-application-orchestration.jsx
View file

@ -1,6 +1,6 @@
import UseCasesLayout from '../../layouts/use-cases'
import UseCasesLayout from 'layouts/use-cases'
import TextSplitWithImage from '@hashicorp/react-text-split-with-image'
import FeaturedSliderSection from '../../components/featured-slider-section'
import FeaturedSliderSection from 'components/featured-slider-section'
export default function NonContainerizedApplicationOrchestrationPage() {
return (
@ -19,13 +19,13 @@ export default function NonContainerizedApplicationOrchestrationPage() {
text: 'Watch the Webinar',
url:
'https://www.hashicorp.com/resources/move-your-vmware-workloads-nomad',
type: 'outbound'
}
]
type: 'outbound',
},
],
}}
image={{
url: require('./img/non-containerized-orchestration.png'),
alt: 'Non-Containerized Orchestration'
alt: 'Non-Containerized Orchestration',
}}
/>
@ -34,11 +34,11 @@ export default function NonContainerizedApplicationOrchestrationPage() {
heading: 'Improve Resource Utilization with Bin Packing',
content:
'Improve resource utilization and reduce costs for non-containerized applications through Nomad’s bin-packing placements.',
textSide: 'left'
textSide: 'left',
}}
image={{
url: require('./img/bin-packing.svg'),
alt: 'Bin Packing'
alt: 'Bin Packing',
}}
/>
@ -52,13 +52,13 @@ export default function NonContainerizedApplicationOrchestrationPage() {
{
text: 'Read more',
url: 'https://learn.hashicorp.com/nomad/update-strategies',
type: 'outbound'
}
]
type: 'outbound',
},
],
}}
image={{
url: require('./img/zero-downtime-deployments.png'),
alt: ''
alt: '',
}}
/>
@ -67,11 +67,11 @@ export default function NonContainerizedApplicationOrchestrationPage() {
heading: 'Run On-Premise with Ease',
textSide: 'left',
content:
'Install and run Nomad easily on bare metal as a single binary and with the same ease as on cloud.'
'Install and run Nomad easily on bare metal as a single binary and with the same ease as on cloud.',
}}
image={{
url: require('./img/on-prem-with-ease.svg'),
alt: ''
alt: '',
}}
/>
@ -87,13 +87,13 @@ export default function NonContainerizedApplicationOrchestrationPage() {
text: 'Watch GrayMeta tech presentation',
url:
'https://www.hashicorp.com/resources/backend-batch-processing-nomad',
type: 'outbound'
}
]
type: 'outbound',
},
],
}}
image={{
url: require('./img/high-performance-batch-workloads.png'),
alt: ''
alt: '',
}}
/>
</div>
@ -105,11 +105,11 @@ export default function NonContainerizedApplicationOrchestrationPage() {
logo: {
url:
'https://www.datocms-assets.com/2885/1582149907-graymetalogo.svg',
alt: 'GrayMeta'
alt: 'GrayMeta',
},
image: {
url: require('./img/grey_meta.png'),
alt: 'GrayMeta Presentation'
alt: 'GrayMeta Presentation',
},
heading: 'GrayMeta',
content:
@ -118,9 +118,9 @@ export default function NonContainerizedApplicationOrchestrationPage() {
text: 'Watch Presentation',
url:
'https://www.hashicorp.com/resources/backend-batch-processing-nomad',
type: 'outbound'
}
}
type: 'outbound',
},
},
]}
/>
</UseCasesLayout>

96
website/pages/use-cases/simple-container-orchestration.jsx
View file

@ -1,7 +1,7 @@
import UseCasesLayout from '../../layouts/use-cases'
import UseCasesLayout from 'layouts/use-cases'
import TextSplitWithCode from '@hashicorp/react-text-split-with-code'
import TextSplitWithImage from '@hashicorp/react-text-split-with-image'
import FeaturedSliderSection from '../../components/featured-slider-section'
import FeaturedSliderSection from 'components/featured-slider-section'
export default function SimpleContainerOrchestrationPage() {
return (
@ -18,10 +18,11 @@ export default function SimpleContainerOrchestrationPage() {
links: [
{
text: 'Read More',
url: 'https://learn.hashicorp.com/nomad?track=managing-jobs#managing-jobs',
type: 'outbound'
}
]
url:
'https://learn.hashicorp.com/nomad?track=managing-jobs#managing-jobs',
type: 'outbound',
},
],
}}
codeBlock={{
code: `task "webservice" {
@ -34,7 +35,7 @@ export default function SimpleContainerOrchestrationPage() {
}
}
}`,
language: 'hcl'
language: 'hcl',
}}
/>
@ -43,11 +44,11 @@ export default function SimpleContainerOrchestrationPage() {
heading: 'Run on-premise with ease',
textSide: 'left',
content:
'Install and run Nomad easily on bare metal as a single binary and with the same ease as on cloud.'
'Install and run Nomad easily on bare metal as a single binary and with the same ease as on cloud.',
}}
image={{
url: require('./img/on-prem-with-ease.svg'),
alt: ''
alt: '',
}}
/>
@ -62,9 +63,9 @@ export default function SimpleContainerOrchestrationPage() {
text: 'Watch Jet.com use case',
url:
'https://www.hashicorp.com/resources/running-windows-microservices-on-nomad-at-jet-com',
type: 'outbound'
}
]
type: 'outbound',
},
],
}}
codeBlock={{
code: `sc.exe start "Nomad"
@ -78,7 +79,7 @@ SERVICE_NAME: Nomad
CHECKPOINT : 0x0
WAIT_HINT : 0x0
PID : 8008
FLAGS :`
FLAGS :`,
}}
/>
@ -91,14 +92,15 @@ SERVICE_NAME: Nomad
links: [
{
text: 'Read more',
url: 'https://learn.hashicorp.com/nomad/operating-nomad/federation',
type: 'outbound'
}
]
url:
'https://learn.hashicorp.com/nomad/operating-nomad/federation',
type: 'outbound',
},
],
}}
codeBlock={{
code: 'nomad server join 1.2.3.4:4648',
prefix: 'dollar'
prefix: 'dollar',
}}
/>
@ -108,11 +110,11 @@ SERVICE_NAME: Nomad
heading: 'Edge Deployment with Simple Topology',
content:
'Deploy Nomad with a simple cluster topology on hybrid infrastructure to place workloads to the cloud or at the edge.',
textSide: 'right'
textSide: 'right',
}}
image={{
url: require('./img/edge-deployment.svg'),
alt: ''
alt: '',
}}
/>
</div>
@ -127,13 +129,13 @@ SERVICE_NAME: Nomad
{
text: 'Read more',
url: 'https://learn.hashicorp.com/nomad/update-strategies',
type: 'outbound'
}
]
type: 'outbound',
},
],
}}
image={{
url: require('./img/zero-downtime-deployments.png'),
alt: 'Zero Downtime Deployments'
alt: 'Zero Downtime Deployments',
}}
/>
@ -149,13 +151,13 @@ SERVICE_NAME: Nomad
text: 'Watch tech presentation from Citadel',
url:
'https://www.hashicorp.com/resources/end-to-end-production-nomad-citadel',
type: 'outbound'
}
]
type: 'outbound',
},
],
}}
image={{
url: require('./img/high-performance-batch-workloads.png'),
alt: ''
alt: '',
}}
/>
</div>
@ -170,13 +172,13 @@ SERVICE_NAME: Nomad
{
text: 'Read more',
url: '/docs/devices',
type: 'inbound'
}
]
type: 'inbound',
},
],
}}
image={{
url: require('./img/specialized-hardware.png'),
alt: 'Specialized Hardware'
alt: 'Specialized Hardware',
}}
/>
@ -185,11 +187,11 @@ SERVICE_NAME: Nomad
heading: 'Run stateful workloads',
content:
'Natively connect and run stateful services with storage volumes from third-party providers via the Container Storage Interface plugin system.',
textSide: 'right'
textSide: 'right',
}}
image={{
url: require('./img/csi.svg'),
alt: 'Stateful Workloads'
alt: 'Stateful Workloads',
}}
/>
@ -200,12 +202,12 @@ SERVICE_NAME: Nomad
logo: {
url:
'https://www.datocms-assets.com/2885/1582097215-roblox-white.svg',
alt: 'Roblox'
alt: 'Roblox',
},
image: {
url:
'https://www.datocms-assets.com/2885/1582096961-roblox-case-study.jpg',
alt: 'Roblox Nomad Case Study'
alt: 'Roblox Nomad Case Study',
},
heading: 'Roblox',
content:
@ -213,19 +215,19 @@ SERVICE_NAME: Nomad
link: {
text: 'Read Case Study',
url: 'https://www.hashicorp.com/case-studies/roblox',
type: 'outbound'
}
type: 'outbound',
},
},
{
logo: {
url:
'https://www.datocms-assets.com/2885/1529339316-logocitadelwhite-knockout.svg',
alt: 'Citadel'
alt: 'Citadel',
},
image: {
url:
'https://www.datocms-assets.com/2885/1509052483-hashiconf2017-end-to-end-production-nomad-at-citadel.jpg',
alt: 'Citadel Presentation'
alt: 'Citadel Presentation',
},
heading: 'Citadel',
content:
@ -234,19 +236,19 @@ SERVICE_NAME: Nomad
text: 'Learn More',
url:
'https://www.hashicorp.com/resources/end-to-end-production-nomad-citadel',
type: 'outbound'
}
type: 'outbound',
},
},
{
logo: {
url:
'https://www.datocms-assets.com/2885/1522341147-jet-white.svg',
alt: 'Jet'
alt: 'Jet',
},
image: {
url:
'https://www.datocms-assets.com/2885/1523635589-mohitarora.jpg',
alt: 'Jet Presentation'
alt: 'Jet Presentation',
},
heading: 'Jet.com',
content: 'Running Windows Microservices on Nomad',
@ -254,9 +256,9 @@ SERVICE_NAME: Nomad
text: 'Learn More',
url:
'https://www.hashicorp.com/resources/running-windows-microservices-on-nomad-at-jet-com',
type: 'outbound'
}
}
type: 'outbound',
},
},
]}
/>
</UseCasesLayout>

81
website/public/css/nprogress.css
View file

@ -1,81 +0,0 @@
/* Make clicks pass-through */
#nprogress {
pointer-events: none;
}
#nprogress .bar {
background: #29d;
position: fixed;
z-index: 1031;
top: 0;
left: 0;
width: 100%;
height: 2px;
}
/* Fancy blur effect */
#nprogress .peg {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px #29d, 0 0 5px #29d;
opacity: 1;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}
/* Remove these to get rid of the spinner */
#nprogress .spinner {
display: block;
position: fixed;
z-index: 1031;
top: 15px;
right: 15px;
}
#nprogress .spinner-icon {
width: 18px;
height: 18px;
box-sizing: border-box;
border: solid 2px transparent;
border-top-color: #29d;
border-left-color: #29d;
border-radius: 50%;
-webkit-animation: nprogress-spinner 400ms linear infinite;
animation: nprogress-spinner 400ms linear infinite;
}
.nprogress-custom-parent {
overflow: hidden;
position: relative;
}
.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
position: absolute;
}
@-webkit-keyframes nprogress-spinner {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes nprogress-spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}