Refine install generator page (hestiacp#4060)

* Tidy install builder, fix tooltip positioning

* Tidy install script generator docs

* Add "View requirements" button to Install page

Author: AlecRust

docs/.vitepress/theme/components/InstallBuilder.vue

@@ -78,7 +78,6 @@
 <script setup>
 import { ref, watchEffect } from "vue";
 import CopyToClipboardInput from "./CopyToClipboardInput.vue";
-import FloatingVue from "floating-vue";
 
 const { options } = defineProps({
 	options: {
@@ -149,13 +148,17 @@ h2 {
 .output-card {
 	background-color: var(--vp-c-bg-alt);
 	border-radius: 10px;
-	padding: 30px 40px;
+	padding: 30px;
 	margin-top: 40px;
 	margin-bottom: 40px;
+
+	@media (min-width: 640px) {
+		padding: 30px 50px;
+	}
 }
 .option-list {
 	display: grid;
-	grid-gap: 20px;
+	grid-gap: 23px;
 	margin-bottom: 50px;
 
 	@media (min-width: 640px) {
@@ -188,8 +191,8 @@ h2 {
 	justify-content: space-between;
 }
 .option-icon {
-	padding: 5px 0 5px 10px;
-	margin-left: 5px;
+	padding: 5px;
+	margin-right: -5px;
 
 	& i {
 		opacity: 0.7;

docs/.vitepress/theme/components/PageHeader.vue

@@ -4,9 +4,9 @@
 			<h1>
 				<slot name="title"></slot>
 			</h1>
-			<p v-if="$slots.lead" class="lead">
-				<slot name="lead" />
-			</p>
+			<div v-if="$slots.aside">
+				<slot name="aside" />
+			</div>
 		</div>
 	</header>
 </template>
@@ -15,6 +15,8 @@
 .container {
 	display: flex;
 	margin: 0 auto;
+	align-items: center;
+	justify-content: space-between;
 	max-width: 1152px;
 }
 .PageHeader {

docs/docs/community/install-script-generator.md

@@ -1,6 +1,15 @@
-# Install Script Generator
+# Install script generator
 
-By [Gabriel Claudiu Maftei](https://github.com/gabizz/)  
-[View the project](https://gabizz.github.io/hestiacp-scriptline-generator/) – [Source code](https://github.com/gabizz/hestiacp-scriptline-generator)
+These are some install script generators created by the community:
 
-Tiny online app aimed to generate the necessary scriptline for an unattended Hestia Control Panel installation.
+- [hestiacp-scriptline-generator](https://github.com/gabizz/hestiacp-scriptline-generator)
+
+  Tiny online app aimed to generate the necessary command for an unattended Hestia Control Panel installation.
+
+- [HestiaCP-Command-Creator](https://github.com/turbopixel/HestiaCP-Command-Creator)
+
+  Vue.js based web app to generate the command line for an unattended Hestia Control Panel installation.
+
+We thank the community for these contributions, which our [official install script generator](/install) is inspired by.
+
+Please note that that we can only ensure that the official install script generator is up to date with the latest release.

docs/install.md

@@ -12,6 +12,33 @@ title: Install
 <InstallPage>
   <PageHeader>
     <template #title>Install</template>
+    <template #aside>
+      <a class="header-button" href="./docs/introduction/getting-started.html#requirements">
+        View requirements
+      </a>
+    </template>
   </PageHeader>
   <InstallBuilder :options="options"></InstallBuilder>
 </InstallPage>
+
+<style>
+.header-button {
+  display: inline-block;
+  border: 1px solid transparent;
+  font-weight: 600;
+  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
+  border-radius: 20px;
+  padding: 0 20px;
+  line-height: 38px;
+  font-size: 14px;
+  border-color: var(--vp-button-alt-border);
+  color: var(--vp-button-alt-text);
+  background-color: var(--vp-button-alt-bg);
+
+  &:hover {
+    border-color: var(--vp-button-alt-hover-border);
+    color: var(--vp-button-alt-hover-text);
+    background-color: var(--vp-button-alt-hover-bg);
+  }
+}
+</style>