Refine install script generator (hestiacp#4069)

Author: AlecRust

docs/.vitepress/theme/components/CopyToClipboardInput.vue

@@ -1,6 +1,12 @@
 <template>
 	<div class="CopyToClipboardInput" v-bind="$attrs">
-		<input type="text" class="CopyToClipboardInput-input" readonly :value="value" />
+		<input
+			type="text"
+			class="CopyToClipboardInput-input"
+			:value="value"
+			@focus="selectText"
+			readonly
+		/>
 		<button
 			type="button"
 			class="CopyToClipboardInput-button"
@@ -20,6 +26,12 @@ defineProps({
 	},
 });
 
+const selectText = (event) => {
+	const inputElement = event.target;
+	inputElement.select();
+	inputElement.removeEventListener("focus", selectText);
+};
+
 const copyToClipboard = (event) => {
 	const inputValue = event.target.previousSibling.value;
 	navigator.clipboard.writeText(inputValue).then(
@@ -38,36 +50,35 @@ const copyToClipboard = (event) => {
 
 <style scoped>
 .CopyToClipboardInput {
-	position: relative;
+	display: flex;
 }
 .CopyToClipboardInput-input {
 	font-size: 0.9em;
 	font-family: monospace;
+	flex-grow: 1;
 	border: 1px solid var(--vp-c-border);
-	border-radius: 4px;
+	border-top-left-radius: 4px;
+	border-bottom-left-radius: 4px;
 	background-color: var(--vp-c-bg);
-	width: 100%;
 	padding: 8px 13px;
-	padding-right: 53px;
-
-	&:hover {
-		border-color: var(--vp-c-border-hover);
-	}
 
 	&:focus {
-		border-color: var(--vp-c-brand);
+		border-color: var(--vp-button-brand-bg);
 	}
 }
 .CopyToClipboardInput-button {
-	position: absolute;
-	top: 1px;
-	right: 1px;
-	bottom: 1px;
-	border-top-right-radius: 3px;
-	border-bottom-right-radius: 3px;
-	color: var(--vp-c-brand);
+	font-size: 14px;
+	border-top-right-radius: 4px;
+	border-bottom-right-radius: 4px;
+	color: var(--vp-button-brand-text);
+	min-width: 73px;
 	font-weight: 600;
-	padding: 6px 10px;
-	background-color: var(--vp-c-bg);
+	padding: 5px 10px;
+	background-color: var(--vp-button-brand-bg);
+	transition: background-color 0.25s;
+
+	&:hover {
+		background-color: var(--vp-button-brand-hover-bg);
+	}
 }
 </style>

docs/_data/options.js

@@ -2,14 +2,14 @@ export const options = [
 	{
 		flag: 'port',
 		label: 'Port',
-		description: 'Change the port Hestia uses.',
+		description: 'Change the port Hestia uses',
 		type: 'text',
 		default: '8083',
 	},
 	{
 		flag: 'lang',
 		label: 'Language',
-		description: 'Change the ISO 639-1 language code.',
+		description: 'Change the ISO 639-1 language code',
 		type: 'select',
 		default: 'en',
 		options: [
@@ -60,124 +60,124 @@ export const options = [
 	{
 		flag: 'hostname',
 		label: 'Hostname',
-		description: 'Set a custom hostname.',
+		description: 'Set a custom hostname',
 		type: 'text',
 		default: '',
 	},
 	{
 		flag: 'email',
 		label: 'Email',
-		description: 'Set the admin account email.',
+		description: 'Set the admin account email',
 		type: 'text',
 		default: '',
 	},
 	{
 		flag: 'password',
 		label: 'Password',
-		description: 'Set the admin account password.',
+		description: 'Set the admin account password',
 		type: 'text',
 		default: '',
 	},
 	{
 		flag: 'apache',
 		label: 'Apache',
-		description: 'Web server with htaccess support.',
+		description: 'Web server with htaccess support',
 		default: 'yes',
 	},
 	{
 		flag: 'phpfpm',
 		label: 'PHP-FPM',
-		description: 'Process manager for executing PHP scripts.',
+		description: 'Process manager for executing PHP scripts',
 		default: 'yes',
 	},
 	{
 		flag: 'multiphp',
 		label: 'MultiPHP',
-		description: 'Allows installing multiple PHP versions.',
+		description: 'Allows installing multiple PHP versions',
 		default: 'no',
 	},
 	{
 		flag: 'vsftpd',
 		label: 'VSFTPD',
-		description: 'Lightweight, minimalist and secure FTP server.',
+		description: 'Lightweight, minimalist and secure FTP server',
 		default: 'yes',
 	},
 	{
 		flag: 'proftpd',
 		label: 'ProFTPD',
-		description: 'Advanced, modular FTP server that supports LDAP.',
+		description: 'Advanced, modular FTP server that supports LDAP',
 		default: 'no',
 	},
 	{
 		flag: 'named',
 		label: 'BIND',
-		description: 'Custom DNS name server.',
+		description: 'Custom DNS name server',
 		default: 'yes',
 	},
 	{
 		flag: 'mysql',
 		label: 'MariaDB',
-		description: 'Fork of MySQL with additional features and improvements.',
+		description: 'Fork of MySQL with additional features and improvements',
 		default: 'yes',
 	},
 	{
 		flag: 'mysql8',
 		label: 'MySQL 8',
-		description: 'Open-source relational database management system.',
+		description: 'Open-source relational database management system',
 		default: 'no',
 	},
 	{
 		flag: 'postgresql',
 		label: 'PostgreSQL',
-		description: 'Open-source relational database management system.',
+		description: 'Open-source relational database management system',
 		default: 'no',
 	},
 	{
 		flag: 'exim',
 		label: 'Exim',
-		description: 'Allows sending emails from web-mail or via SMTP.',
+		description: 'Allows sending emails from web-mail or via SMTP',
 		default: 'yes',
 	},
 	{
 		flag: 'dovecot',
 		label: 'Dovecot',
-		description: 'Receive emails and connect with email clients via IMAP/POP3.',
+		description: 'Receive emails and connect with email clients via IMAP/POP3',
 		default: 'yes',
 	},
 	{
 		flag: 'sieve',
 		label: 'Sieve',
-		description: 'Language for managing your own custom email filters.',
+		description: 'Language for managing your own custom email filters',
 		default: 'no',
 	},
 	{
 		flag: 'clamav',
 		label: 'ClamAV',
-		description: 'Scans your email inbox for viruses.',
+		description: 'Scans your email inbox for viruses',
 		default: 'yes',
 	},
 	{
 		flag: 'spamassassin',
 		label: 'SpamAssassin',
-		description: 'Filter out spam emails from your inbox.',
+		description: 'Filter out spam emails from your inbox',
 		default: 'yes',
 	},
 	{
 		flag: 'iptables',
 		label: 'iptables',
-		description: 'Allows firewall rule management within Hestia.',
+		description: 'Allows firewall rule management within Hestia',
 		default: 'yes',
 	},
 	{
 		flag: 'fail2ban',
 		label: 'Fail2Ban',
-		description: 'Provides brute force protection for SSH, email, FTP and databases.',
+		description: 'Provides brute force protection for SSH, email, FTP and databases',
 		default: 'yes',
 	},
 	{
 		flag: 'quota',
 		label: 'Filesystem quota',
-		description: 'Use hard disk space limits on user packages.',
+		description: 'Use hard disk space limits on user packages',
 		default: 'no',
 	},
 	{
@@ -189,13 +189,13 @@ export const options = [
 	{
 		flag: 'interactive',
 		label: 'Interactive install',
-		description: 'Run the install interactively.',
+		description: 'Run the install interactively',
 		default: 'yes',
 	},
 	{
 		flag: 'force',
 		label: 'Force installation',
-		description: 'Force the installation.',
+		description: 'Force the installation',
 		default: 'no',
 	},
 ];