Add tabs for webserver configuration so page isn't so long (#320)

* Adds Tabs to web-server config for 1.X

Also remove package-lock.json as we use yarn 👍

* redesign tabs

* Changes.

Co-authored-by: Jakob Schrettenbrunner <dev@schrej.net>

.vuepress/config.js

@@ -18,6 +18,7 @@ module.exports = {
         ['vuepress-plugin-container', {
             type: 'danger',
         }],
+        ['tabs'],
     ],
     configureWebpack: {
         serve: {
@@ -237,5 +238,5 @@ module.exports = {
             require('autoprefixer'),
             require('cssnano'),
         ]
-    }
+    },
 };

.vuepress/theme/styles/main.css

@@ -11,5 +11,6 @@
 @import "./badges.css";
 @import "./etline.css";
 @import "./slick.css";
+@import "./tabs.css";
 
-@import "tailwindcss/utilities";
+@import "tailwindcss/utilities";

.vuepress/theme/styles/tabs.css

@@ -0,0 +1,53 @@
+.tabs-component {
+  @apply my-6;
+}
+
+ul.tabs-component-tabs {
+  @apply rounded-t p-1 m-0;
+}
+
+.tabs-component-tab {
+  @apply border-b-2 border-grey-light inline-block text-sm font-bold text-grey-darker mr-0 list-none;
+}
+
+.tabs-component-tab:hover {
+  @apply bg-grey-lighter text-grey-darkest;
+}
+
+.tabs-component-tab.is-active {
+  @apply text-blue border-b-2 border-blue;
+}
+
+.tabs-component-tab.is-disabled * {
+  @apply text-grey-light cursor-not-allowed;
+}
+
+.tabs-component-tab-a {
+  @apply inline-block py-2 px-4;
+  color: inherit;
+}
+.tabs-component-tab-a:hover {
+  @apply no-underline;
+}
+
+.tabs-component-panels {
+  @apply rounded-b py-6 px-4;
+}
+
+@media (min-width: 768px) {
+  ul.tabs-component-tabs {
+    @apply border-0 -mx-2;
+    padding-bottom: 2px;
+  }
+  .tabs-component-tab {
+    @apply border-b-2 border-grey-light px-2;
+  }
+  .tabs-component-tab-a {
+    @apply py-1 px-2;
+  }
+
+  .tabs-component-panels {
+    @apply -mx-5 p-5 rounded;
+
+  }
+}

package.json

@@ -3,8 +3,10 @@
     "@vuepress/plugin-google-analytics": "^1.0.0-rc.1",
     "jquery": "^3.3.1",
     "slick-carousel": "^1.8.1",
+    "vue-tabs-component": "^1.5.0",
     "vuepress": "^1.5.4",
-    "vuepress-plugin-container": "^2.1.3"
+    "vuepress-plugin-container": "^2.1.3",
+    "vuepress-plugin-tabs": "^0.3.0"
   },
   "scripts": {
     "build": "vuepress build",

panel/1.0/webserver_configuration.md

@@ -1,36 +1,26 @@
 # Webserver Configuration
 
-[[toc]]
-
 ::: danger
-You should remove the default Apache or NGINX configuration as it will expose application secrets to malicious
+You should remove the default Apache or NGINX configuration as it will expose application secrets to malicious users by default.
-users by default.
+:::
+::: warning
+When using the SSL configuration you MUST create SSL certificates, otherwise your webserver will fail to start. See [Creating SSL Certificates](/tutorials/creating_ssl_certificates.html) documentation page for how to create these certificates before continuing.
 :::
 
-## NGINX
+:::: tabs
-You should paste the contents of the file below, replacing `<domain>` with the domain you intend to use for the panel in a file called
+::: tab "Nginx With SSL"
-`pterodactyl.conf`, and place it in `/etc/nginx/sites-available/`, or &mdash; if on CentOS, `/etc/nginx/conf.d/`.
+## NGINX With SSL
 
-### NGINX With SSL
+You should paste the contents of the file below, replacing `<domain>` with your domain name being used in a file called
-This configuration assumes that you will be using SSL on both the Panel and Daemons for significantly improved communication
+`pterodactyl.conf` and place it in `/etc/nginx/sites-available/`, or &mdash; if on CentOS, `/etc/nginx/conf.d/`.
-security between users and the Panel. You will need to get a valid SSL certificate which can be done for free by using
-Let's Encrypt. 
-
-::: warning 
-When using the SSL configuration you MUST create SSL certificates, otherwise your NGINX will fail to start.  See [Creating SSL Certificates](/tutorials/creating_ssl_certificates.html) documentation page for how to create these certificates before continuing.
-:::
 
 <<< @/.snippets/webservers/nginx-php7.4.conf{5,11,26-27}
 
-Continue reading to the bottom of this section for the final steps with NGINX!
-
-### NGINX Without SSL
-
-<<< @/.snippets/webservers/nginx-php7.4-nossl.conf{3}
-
 ### Enabling Configuration
+
 The final step is to enable your NGINX configuration and restart it.
-``` bash
+
+```bash
 # You do not need to symlink this file if you are using CentOS.
 sudo ln -s /etc/nginx/sites-available/pterodactyl.conf /etc/nginx/sites-enabled/pterodactyl.conf
 
@@ -38,32 +28,71 @@ sudo ln -s /etc/nginx/sites-available/pterodactyl.conf /etc/nginx/sites-enabled/
 systemctl restart nginx
 ```
 
-## Apache
+:::
-You should paste the contents of the file below, replacing `<domain>` with the domain you intend to use for the panel in a file called
+::: tab "Nginx Without SSL"
-`pterodactyl.conf`, and place it in `/etc/apache2/sites-available`, or &mdash; if on CentOS, `/etc/httpd/conf.d/`.
+
+## NGINX Without SSL
+
+You should paste the contents of the file below, replacing `<domain>` with your domain name being used in a file called
+`pterodactyl.conf` and place it in `/etc/nginx/sites-available/`, or &mdash; if on CentOS, `/etc/nginx/conf.d/`.
+
+<<< @/.snippets/webservers/nginx-php7.4-nossl.conf{3}
+
+### Enabling Configuration
+
+The final step is to enable your NGINX configuration and restart it.
+
+```bash
+# You do not need to symlink this file if you are using CentOS.
+sudo ln -s /etc/nginx/sites-available/pterodactyl.conf /etc/nginx/sites-enabled/pterodactyl.conf
+
+# You need to restart nginx regardless of OS.
+systemctl restart nginx
+```
+
+:::
+::: tab "Apache With SSL"
+
+## Apache With SSL
+
+You should paste the contents of the file below, replacing `<domain>` with your domain name being used in a file called
+`pterodactyl.conf` and place it in `/etc/apache2/sites-available`, or &mdash; if on CentOS, `/etc/httpd/conf.d/`.
 
 Note: When using Apache, make sure you have the `libapache2-mod-php` package installed or else PHP will not display on your webserver.
 
-### Apache With SSL
-Like the nginx configuration, this assumes you will be using SSL on both the Panel and Daemons for improved security.
-
-::: warning
-When using the SSL configuration you MUST create SSL certificates, otherwise your Apache will fail to start.  See [Creating SSL Certificates](/tutorials/creating_ssl_certificates.html) documentation page for how to create these certificates before continuing.
-:::
-
 <<< @/.snippets/webservers/apache.conf{2,8,17-18}
-
-### Apache Without SSL
-
-<<< @/.snippets/webservers/apache-nossl.conf{2}
-
 ### Enabling Configuration
+
 Once you've created the file above, simply run the commands below. If you are on CentOS _you do not need to run the commands
 below!_ You only need to run `systemctl restart httpd`.
 
-``` bash
+```bash
 # You do not need to run any of these commands on CentOS
 sudo ln -s /etc/apache2/sites-available/pterodactyl.conf /etc/apache2/sites-enabled/pterodactyl.conf
 sudo a2enmod rewrite
 systemctl restart apache2
 ```
+
+:::
+::: tab "Apache Without SSL"
+## Apache Without SSL
+
+You should paste the contents of the file below, replacing `<domain>` with your domain name being used in a file called
+`pterodactyl.conf` and place it in `/etc/apache2/sites-available`, or &mdash; if on CentOS, `/etc/httpd/conf.d/`.
+
+Note: When using Apache, make sure you have the `libapache2-mod-php` package installed or else PHP will not display on your webserver.
+
+<<< @/.snippets/webservers/apache-nossl.conf{2}
+### Enabling Configuration
+Once you've created the file above, simply run the commands below. If you are on CentOS _you do not need to run the commands
+below!_ You only need to run `systemctl restart httpd`.
+
+```bash
+# You do not need to run any of these commands on CentOS
+sudo ln -s /etc/apache2/sites-available/pterodactyl.conf /etc/apache2/sites-enabled/pterodactyl.conf
+sudo a2enmod rewrite
+systemctl restart apache2
+```
+
+:::
+::::

yarn.lock

@@ -8007,6 +8007,11 @@ vue-style-loader@^4.1.0:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
+vue-tabs-component@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/vue-tabs-component/-/vue-tabs-component-1.5.0.tgz#9b2f02adbc9bb58395729d68c4906a795a20d728"
+  integrity sha512-ld4p+hv49Fimw+zv/7GQqMhbjAHjpbWF3UiJtmMaSnvLKbsB1ysfs9dQH0SZ8NvdYpqqKay/VLIqR9yXgse1Sg==
+
 vue-template-compiler@^2.6.10:
   version "2.6.11"
   resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz#c04704ef8f498b153130018993e56309d4698080"
@@ -8052,6 +8057,11 @@ vuepress-plugin-smooth-scroll@^0.0.3:
   dependencies:
     smoothscroll-polyfill "^0.4.3"
 
+vuepress-plugin-tabs@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/vuepress-plugin-tabs/-/vuepress-plugin-tabs-0.3.0.tgz#e95fb98d3736af450a9baaf1a09b8677983ca8d8"
+  integrity sha512-jooDlcMdBqhXgIaF1awFSaOTM56mleP6bbCiGxyQxTZexfvCfDvZhNLGpyXqMQA50ZmNGmvLrK82YYb63k1jfA==
+
 vuepress@^1.5.4:
   version "1.5.4"
   resolved "https://registry.yarnpkg.com/vuepress/-/vuepress-1.5.4.tgz#282d2412c1c7269d8bd93b83d421ef53b77b45f6"