chore(deps): website: upgrade vuepress 1.x to 2.x (#2980)

* Upgrade vuepress to 2.x

* Add i18n support

* Apply suggestions from code review

* Update runatlantis.io/.vuepress/config.js

* Update runatlantis.io/es/README.md

* Delete README.md

* Delete README.md

* Delete README.md

* Update runatlantis.io/.vuepress/config.js

* Update runatlantis.io/.vuepress/config.js

* Update config.js

* Use Overview name for specific children

* Add comment for algolia API key

* Register Home.vue

* Convert Home.vue stylus to SCSS

* Regenerate yarn.lock

* Regenerate yarn.lock

* Regenerate yarn.lock

* Regenerate yarn.lock

* Regenerate yarn.lock
This commit is contained in:
nitrocode
2023-01-18 16:07:59 -06:00
committed by GitHub
parent 823f9e2a07
commit b248299e8d
10 changed files with 1557 additions and 8298 deletions

3
.gitignore vendored
View File

@@ -8,7 +8,7 @@ output
.cover
.terraform/
node_modules/
**/.vuepress/dist
**/.vuepress/*
helm/test-values.yaml
*.swp
golangci-lint
@@ -16,6 +16,7 @@ atlantis
.devcontainer
atlantis.env
*.act
package-lock.json
# gitreleaser
dist/

View File

@@ -1,7 +1,9 @@
{
"license": "Apache-2.0",
"devDependencies": {
"@vuepress/plugin-google-analytics": "^1.9.7",
"vuepress": "^1.9.7"
"@vuepress/plugin-docsearch": "^2.0.0-beta.60",
"@vuepress/plugin-google-analytics": "^2.0.0-beta.60",
"vuepress": "^2.0.0-beta.60"
},
"scripts": {
"website:dev": "vuepress dev runatlantis.io",

View File

@@ -1,8 +1,39 @@
module.exports = {
title: 'Atlantis',
description: 'Atlantis: Terraform Pull Request Automation',
import { googleAnalyticsPlugin } from '@vuepress/plugin-google-analytics'
import { docsearchPlugin } from '@vuepress/plugin-docsearch'
import { getDirname, path } from '@vuepress/utils'
import { defaultTheme, defineUserConfig } from 'vuepress'
const __dirname = getDirname(import.meta.url)
export default defineUserConfig({
alias: {
'@theme/Home.vue': path.resolve(__dirname, './theme/components/Home.vue'),
},
locales: {
'/': {
lang: 'en-US',
title: 'Atlantis',
description: 'Atlantis: Terraform Pull Request Automation',
},
/*
'/es/': {
lang: 'es-ES',
title: 'Atlantis',
description: 'Atlantis: Automatización de Pull Requests para Terraform',
},
*/
},
plugins: [
['@vuepress/google-analytics', { ga: "UA-6850151-3", }]
googleAnalyticsPlugin({
id: 'UA-6850151-3',
}),
docsearchPlugin({
// We internally discussed how this API key is exposed in the code and decided
// that it is a non-issue because this API key can easily be extracted by
// looking at the browser dev tools since the key is used in the API requests.
apiKey: '3b733dff1539ca3a210775860301fa86',
indexName: 'runatlantis',
}),
],
head: [
['link', { rel: 'icon', type: 'image/png', href: '/favicon-196x196.png', sizes: '196x196' }],
@@ -18,29 +49,43 @@ module.exports = {
['link', { rel: 'apple-touch-icon-precomposed', sizes: '120x120', href: '/apple-touch-icon-120x120.png' }],
['link', { rel: 'apple-touch-icon-precomposed', sizes: '76x76', href: '/apple-touch-icon-76x76.png' }],
['link', { rel: 'apple-touch-icon-precomposed', sizes: '152x152', href: '/apple-touch-icon-152x152.png' }],
['meta', {name: 'msapplication-TileColor', content: '#FFFFFF' }],
['meta', {name: 'msapplication-TileImage', content: '/mstile-144x144.png' }],
['meta', {name: 'msapplication-square70x70logo', content: '/mstile-70x70.png' }],
['meta', {name: 'msapplication-square150x150logo', content: '/mstile-150x150.png' }],
['meta', {name: 'msapplication-wide310x150logo', content: '/mstile-310x150.png' }],
['meta', {name: 'msapplication-square310x310logo', content: '/mstile-310x310.png' }],
['meta', { name: 'msapplication-TileColor', content: '#FFFFFF' }],
['meta', { name: 'msapplication-TileImage', content: '/mstile-144x144.png' }],
['meta', { name: 'msapplication-square70x70logo', content: '/mstile-70x70.png' }],
['meta', { name: 'msapplication-square150x150logo', content: '/mstile-150x150.png' }],
['meta', { name: 'msapplication-wide310x150logo', content: '/mstile-310x150.png' }],
['meta', { name: 'msapplication-square310x310logo', content: '/mstile-310x310.png' }],
['link', { rel: 'stylesheet', sizes: '152x152', href: 'https://fonts.googleapis.com/css?family=Lato:400,900' }],
['meta', {name: 'google-site-verification', content: 'kTnsDBpHqtTNY8oscYxrQeeiNml2d2z-03Ct9wqeCeE' }]
['meta', { name: 'google-site-verification', content: 'kTnsDBpHqtTNY8oscYxrQeeiNml2d2z-03Ct9wqeCeE' }],
],
themeConfig: {
docsBranch: "main",
themePlugins: {
activeHeaderLinks: false,
algolia: {
apiKey: '3b733dff1539ca3a210775860301fa86',
indexName: 'runatlantis'
},
},
theme: defaultTheme({
docsBranch: "main",
logo: '/hero.png',
nav: [
{text: 'Home', link: '/'},
{text: 'Guide', link: '/guide/'},
{text: 'Docs', link: '/docs/'},
{text: 'Blog', link: 'https://medium.com/runatlantis'}
],
locales: {
'/': {
selectLanguageName: 'English',
navbar: [
{ text: 'Home', link: '/' },
{ text: 'Guide', link: '/guide/' },
{ text: 'Docs', link: '/docs/' },
{ text: 'Blog', link: 'https://medium.com/runatlantis' },
],
},
/*
'/es/': {
selectLanguageName: 'Spanish',
navbar: [
{ text: 'Home', link: '/es/' },
{ text: 'Guide', link: '/es/guide/' },
{ text: 'Docs', link: '/es/docs/' },
{ text: 'Blog', link: 'https://medium.com/runatlantis' },
],
},
*/
},
sidebar: {
'/guide/': [
'',
@@ -49,8 +94,8 @@ module.exports = {
],
'/docs/': [
{
title: 'Installing Atlantis',
collapsable: true,
text: 'Installing Atlantis',
collapsible: true,
children: [
'installation-guide',
'requirements',
@@ -58,14 +103,17 @@ module.exports = {
'webhook-secrets',
'deployment',
'configuring-webhooks',
'provider-credentials'
'provider-credentials',
]
},
{
title: 'Configuring Atlantis',
collapsable: true,
text: 'Configuring Atlantis',
collapsible: true,
children: [
['configuring-atlantis', 'Overview'],
{
text: 'Overview',
link: 'configuring-atlantis',
},
'server-configuration',
'server-side-repo-config',
'pre-workflow-hooks',
@@ -80,37 +128,43 @@ module.exports = {
'terraform-cloud',
'using-slack-hooks',
'stats',
'faq'
'faq',
]
},
{
title: 'Using Atlantis',
collapsable: true,
text: 'Using Atlantis',
collapsible: true,
children: [
['using-atlantis', 'Overview']
{
text: 'Overview',
link: 'using-atlantis',
},
]
},
{
title: 'How Atlantis Works',
collapsable: true,
text: 'How Atlantis Works',
collapsible: true,
children: [
['how-atlantis-works', 'Overview'],
{
text: 'Overview',
link: 'how-atlantis-works',
},
'locking',
'autoplanning',
'automerging',
'security'
'security',
]
},
{
title: 'Real-time Terraform Logs',
collapsable: true,
text: 'Real-time Terraform Logs',
collapsible: true,
children: [
'streaming-logs'
'streaming-logs',
]
},
{
title: 'Troubleshooting',
collapsable: true,
text: 'Troubleshooting',
collapsible: true,
children: [
'troubleshooting-https',
]
@@ -119,6 +173,6 @@ module.exports = {
},
repo: 'runatlantis/atlantis',
docsDir: 'runatlantis.io',
editLinks: true,
}
}
editLink: true,
})
})

View File

@@ -0,0 +1,41 @@
.theme-container {
&.home-custom {
.hero {
h1 {
font-size: 64px;
font-family: Lato, sans-serif;
font-weight: 900;
color: #222;
}
img {
height: 200px;
}
}
p {
&.description {
position: relative;
&:before {
position: absolute;
content: '';
width: 40px;
height: 3px;
top: -19px;
left: 50%;
margin-left: -20px;
background: #f36;
}
}
}
.feature {
h2 {
color: #222;
}
p {
color: #222;
}
}
}
}
.sidebar-heading {
font-size: inherit;
}

View File

@@ -1,38 +0,0 @@
.theme-container.home-custom {
.hero {
h1 {
font-size: 64px
font-family: Lato, sans-serif
font-weight: 900
color: #222
}
img {
height: 200px
}
}
p.description {
position: relative
}
p.description:before {
position: absolute;
content: '';
width: 40px;
height: 3px;
top: -19px;
left: 50%;
margin-left: -20px;
background: #ff3366;
}
.feature {
h2 {
color: #222
}
p {
color: #222
}
}
}
.sidebar-heading {
font-size: inherit
}

View File

@@ -0,0 +1,4 @@
$accentColor: #0074db;
$textColor: #2c3e50;
$borderColor: #eaecef;
$codeBgColor: #282c34;

View File

@@ -1,4 +0,0 @@
$accentColor = #0074db
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34

View File

@@ -174,225 +174,292 @@
}
</script>
<style lang="stylus">
<style lang="scss">
// colors
$accentColor = #3eaf7c
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34
$arrowBgColor = #ccc
$accentColor: #3eaf7c;
$textColor: #2c3e50;
$borderColor: #eaecef;
$codeBgColor: #282c34;
$arrowBgColor: #ccc;
// layout
$navbarHeight = 3.6rem
$sidebarWidth = 20rem
$contentWidth = 740px
$navbarHeight: 3.6rem;
$sidebarWidth: 20rem;
$contentWidth: 740px;
// responsive breakpoints
$MQNarrow = 959px
$MQMobile = 719px
$MQMobileNarrow = 419px
$MQNarrow: 959px;
$MQMobile: 719px;
$MQMobileNarrow: 419px;
$homeWidth = 960px
$buttonColor = #34be68
$darkBackground = rgb(250, 250, 250)
.container
padding-top 3.6rem
.home
padding 0 2rem
max-width $homeWidth
margin 0px auto 80px
.hero
text-align center
img
max-height 280px
display block
margin 3rem auto 1.5rem
h1
font-size 3rem
h1, .description, .action
margin 1.8rem auto
.description
max-width 35rem
font-family Lato, sans-serif
font-size 1.9rem
line-height 1.3
color lighten($textColor, 20%)
.action
display inline
.action-button
display inline-block
font-size 1.2rem
color #fff
background-color $buttonColor
padding 0.8rem 1.6rem
border-radius 4px
transition background-color .1s ease
box-sizing border-box
border-bottom 1px solid darken($buttonColor, 10%)
margin: 0 10px
&:hover
background-color lighten($buttonColor, 10%)
&.-nofill
color darken($buttonColor, 10%)
background-color white
border 2px solid darken($buttonColor, 10%)
padding 0.7rem 1.5rem
&:hover
color #fff
background-color $buttonColor
h2
border-bottom none
.companies
text-align center
margin-top: 40px
h2
color lighten($textColor, 20%)
font-size 1.3rem
.company-list
display flex
align-items center
align-content stretch
justify-content space-between
.company
flex-grow 1
flex-basis 25%
max-width 25%
text-align center
font-family Lato, sans-serif
font-size 1.6rem
line-height 1.3
color lighten($textColor, 20%)
border-right: 1px solid $borderColor
&.-last
border-right: none
.features
border-top 1px solid $borderColor
padding 1.2rem 0
margin-top 0
.footer
padding 2.5rem
border-top 1px solid $borderColor
text-align center
color lighten($textColor, 25%)
$homeWidth: 960px;
$buttonColor: #34be68;
$darkBackground: rgb(250, 250, 250);
.getting-started-footer
padding 2.5rem 0
margin 0 auto
.workflow-container
border-top 2px solid $borderColor
.container {
padding-top: 3.6rem;
}
.workflow
text-align center
margin: 80px auto
max-width $homeWidth
.home {
padding: 0 2rem;
max-width: $homeWidth;
margin: 0px auto 80px;
.hero {
text-align: center;
img {
max-height: 280px;
display: block;
margin: 3rem auto 1.5rem;
}
h1 {
font-size: 3rem;
}
h1, .description, .action {
margin: 1.8rem auto;
}
.description {
max-width: 35rem;
font-family: Lato, sans-serif;
font-size: 1.9rem;
line-height: 1.3;
color: lighten($textColor, 20%);
}
.action {
display: inline;
}
.action-button {
display: inline-block;
font-size: 1.2rem;
color: #fff;
background-color: $buttonColor;
padding: 0.8rem 1.6rem;
border-radius: 4px;
transition: background-color .1s ease;
box-sizing: border-box;
border-bottom: 1px solid darken($buttonColor, 10%);
margin: 0 10px;
&:hover {
background-color: lighten($buttonColor, 10%);
}
&.-nofill {
color: darken($buttonColor, 10%);
background-color: white;
border: 2px solid darken($buttonColor, 10%);
padding: 0.7rem 1.5rem;
&:hover {
color: #fff;
background-color: $buttonColor;
}
}
}
}
h2 {
border-bottom: none;
}
.companies {
text-align: center;
margin-top: 40px;
h2 {
color: lighten($textColor, 20%);
font-size: 1.3rem;
}
}
.company-list {
display: flex;
align-items: center;
align-content: stretch;
justify-content: space-between;
}
.company {
flex-grow: 1;
flex-basis: 25%;
max-width: 25%;
text-align: center;
font-family: Lato, sans-serif;
font-size: 1.6rem;
line-height: 1.3;
color: lighten($textColor, 20%);
border-right: 1px solid $borderColor;
&.-last {
border-right: none;
}
}
.features {
border-top: 1px solid $borderColor;
padding: 1.2rem 0;
margin-top: 0;
}
.footer {
padding: 2.5rem;
border-top: 1px solid $borderColor;
text-align: center;
color: lighten($textColor, 25%);
}
}
.getting-started-footer {
padding: 2.5rem 0;
margin: 0 auto;
}
.workflow-container {
border-top: 2px solid $borderColor;
}
.workflow {
text-align: center;
margin: 80px auto;
max-width: $homeWidth;
img {
width 100%
width: 100%;
}
.mobile {
display none
display: none;
}
.steps-container
max-width $homeWidth
margin 0 auto
padding 0 10px
.steps
display flex
flex-flow row nowrap
justify-content flex-start
.step
text-align: center
flex-grow 0
flex-shrink 0
flex-basis 192px
&.-first
padding-right 10px
.steps-container {
max-width: $homeWidth;
margin: 0 auto;
padding: 0 10px;
.steps {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
.step {
text-align: center;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 192px;
&.-first {
padding-right: 10px;
}
}
}
}
}
.benefits-container
border-top 1px solid darken($darkBackground, 10%)
.benefit-container
border-bottom 1px solid darken($darkBackground, 10%)
.title
padding-top 40px
text-align center
&.-dark
background-color rgb(250, 250, 250)
&.-green
background-color #61c589
color white
.benefit
max-width $homeWidth
margin: 0 auto
display flex
flex-flow row wrap
align-items center
.item
flex-basis 50%
flex-grow 1
min-width 250px
.image
padding 40px
text-align center
img
max-height 200px
.description
padding 40px
h2
border none
ul
list-style-type: none
padding-left 0
li
display flex
align-items center
line-height 25px
margin-bottom 20px
.checkmark
width 20px
margin-right 10px
vertical-align middle
align-self baseline
padding-top 5px
.benefits-container {
border-top: 1px solid darken($darkBackground, 10%);
.benefit-container {
border-bottom: 1px solid darken($darkBackground, 10%);
.title {
padding-top: 40px;
text-align: center;
}
&.-dark {
background-color: rgb(250, 250, 250);
}
&.-green {
background-color: #61c589;
color: white;
}
.benefit {
max-width: $homeWidth;
margin: 0 auto;
display: flex;
flex-flow: row wrap;
align-items: center;
.item {
flex-basis: 50%;
flex-grow: 1;
min-width: 250px;
.image {
padding: 40px;
text-align: center;
img {
max-height: 200px;
}
}
}
.description {
padding: 40px;
h2 {
border: none;
}
ul {
list-style-type: none;
padding-left: 0;
}
li {
display: flex;
align-items: center;
line-height: 25px;
margin-bottom: 20px;
}
.checkmark {
width: 20px;
margin-right: 10px;
vertical-align: middle;
align-self: baseline;
padding-top: 5px;
}
}
}
}
}
@media (max-width: $MQMobile)
.home
.features
flex-direction column
.feature
max-width 100%
padding 0 2.5rem
@media (max-width: $MQMobile) {
.home {
.features {
flex-direction: column
}
.feature {
max-width: 100%;
padding: 0 2.5rem;
}
}
.workflow
.mobile
display block
.desktop
display none
.workflow {
.mobile {
display: block;
}
.desktop {
display: none;
}
}
.benefits-container
.benefit-container
.benefit
flex-direction column
.item
&.image
order -1
.benefits-container {
.benefit-container {
.benefit {
flex-direction: column;
.item {
&.image {
order: -1;
}
}
}
}
}
}
@media (max-width: $MQMobileNarrow) {
.home {
padding-left: 1.5rem;
padding-right: 1.5rem;
.hero {
img {
max-height: 210px;
margin: 2rem auto 1.2rem;
}
h1 {
font-size: 2rem;
}
h1, .description, .action {
margin: 1.2rem auto;
}
.description {
font-size: 1.2rem;
}
.action-button {
font-size: 1rem;
padding: 0.6rem 1.2rem;
}
}
.feature {
h2 {
font-size: 1.25rem;
}
}
}
}
@media (max-width: $MQMobileNarrow)
.home
padding-left 1.5rem
padding-right 1.5rem
.hero
img
max-height 210px
margin 2rem auto 1.2rem
h1
font-size 2rem
h1, .description, .action
margin 1.2rem auto
.description
font-size 1.2rem
.action-button
font-size 1rem
padding 0.6rem 1.2rem
.feature
h2
font-size 1.25rem
</style>

View File

@@ -31,10 +31,10 @@ If installing on a single repository, navigate to the repository home page and c
- **NOTE** If you're adding a webhook to multiple repositories, each repository will need to use the **same** secret.
- select **Let me select individual events**
- check the boxes
- **Pull request reviews**
- **Pushes**
- **Issue comments**
- **Pull requests**
- **Pull request reviews**
- **Pushes**
- **Issue comments**
- **Pull requests**
- leave **Active** checked
- click **Add webhook**
- See [Next Steps](#next-steps)
@@ -93,8 +93,8 @@ Webhooks are installed at the [team project](https://docs.microsoft.com/en-us/az
- Select **Project settings** in the lower-left corner
- Select **Service hooks**
- If you see the message "You do not have sufficient permissions to view or configure subscriptions." you need to ensure your user is a member of either the organization's "Project Collection Administrators" group or the project's "Project Administrators" group.
- To add your user to the Project Collection Build Administrators group, navigate to the organization level, click **Organization Settings** and then click **Permissions**. You should be at `https://dev.azure.com/<organization>/_settings/groups`. Now click on the **<organization>/Project Collection Administrators** group and add your user as a member.
- To add your user to the Project Administrators group, navigate to the project level, click **Project Settings** and then click **Permissions**. You should be at `https://dev.azure.com/<organization>/<project>/_settings/permissions`. Now click on the **[<project>]/Project Administrators** group and add your user as a member.
- To add your user to the Project Collection Build Administrators group, navigate to the organization level, click **Organization Settings** and then click **Permissions**. You should be at `https://dev.azure.com/<organization>/_settings/groups`. Now click on the **\<organization\>/Project Collection Administrators** group and add your user as a member.
- To add your user to the Project Administrators group, navigate to the project level, click **Project Settings** and then click **Permissions**. You should be at `https://dev.azure.com/<organization>/<project>/_settings/permissions`. Now click on the **\<project\>/Project Administrators** group and add your user as a member.
- Click **Create subscription** or the green plus icon to add a new webhook
- Scroll to the bottom of the list and select **Web Hooks**
- Click **Next**
@@ -117,7 +117,6 @@ Repeat the process above until you have webhook subscriptions for the following
- See [Next Steps](#next-steps)
## Next Steps
* To verify that Atlantis is receiving your webhooks, create a test pull request
to your repo.
* To verify that Atlantis is receiving your webhooks, create a test pull request to your repo.
* You should see the request show up in the Atlantis logs at an `INFO` level.
* You'll now need to configure Atlantis to add your [Provider Credentials](provider-credentials.md)

9125
yarn.lock

File diff suppressed because it is too large Load Diff