Tidy docs site Features page (#4047)

* Fix Features page flexbox issue in production

* Remove unused Font Awesome Brands CSS from docs site

* Simplify FeatureList component

* Deduplicate page header component

docs/.vitepress/theme/components/FeatureList.vue

@@ -10,14 +10,12 @@ export default {
 
 <template>
 	<ul class="FeatureList">
-		<li v-for="item in items">
-			<span v-html="item.text"></span>
-			<ul v-if="item.items">
-				<li v-for="nested in item.items">
-					<span v-html="nested.text"></span>
-				</li>
-			</ul>
-		</li>
+		<template v-for="item in items" :key="item.id">
+			<li>
+				<span v-html="item.text"></span>
+				<FeatureList v-if="item.items" :items="item.items" />
+			</li>
+		</template>
 	</ul>
 </template>
 
@@ -27,19 +25,17 @@ export default {
 	padding-left: 1em;
 	list-style: disc;
 	line-height: 1.5;
-}
 
-.FeatureList ul {
-	padding-left: 1em;
-	list-style: disc;
-}
+	& ul {
+		padding-left: 1em;
+		list-style: disc;
+	}
 
-.FeatureList li {
-	margin-top: 0.5em;
-}
+	& li {
+		margin-top: 0.5em;
+	}
 
-@media (min-width: 640px) {
-	.FeatureList {
+	@media (min-width: 640px) {
 		font-size: 1.15rem;
 	}
 }

docs/.vitepress/theme/components/FeaturePage.vue

@@ -11,7 +11,6 @@
 
 .FeaturePage :deep(.container) {
 	display: flex;
-	flex-direction: column;
 	margin: 0 auto;
 	max-width: 1152px;
 }

docs/.vitepress/theme/components/FeaturePageSection.vue

@@ -29,7 +29,7 @@ export default {
 	padding: 0 24px;
 }
 
-.FeaturePageTitle + .FeaturePageSection {
+.PageHeader + .FeaturePageSection {
 	padding: 48px 24px 0;
 }
 
@@ -58,7 +58,7 @@ export default {
 		padding: 0 48px;
 	}
 
-	.FeaturePageTitle + .FeaturePageSection {
+	.PageHeader + .FeaturePageSection {
 		padding: 48px 48px 0;
 	}
 
@@ -84,7 +84,7 @@ export default {
 		padding: 0 64px;
 	}
 
-	.FeaturePageTitle + .FeaturePageSection {
+	.PageHeader + .FeaturePageSection {
 		padding: 64px 64px 0;
 	}
 

docs/.vitepress/theme/components/InstallPageTitle.vue

@@ -1,42 +0,0 @@
-<template>
-	<header class="InstallPageTitle">
-		<div class="container">
-			<h1>
-				<slot name="title"></slot>
-			</h1>
-			<p v-if="$slots.lead" class="lead">
-				<slot name="lead" />
-			</p>
-		</div>
-	</header>
-</template>
-
-<style scoped>
-.InstallPageTitle {
-	padding: 0 24px;
-	background-color: var(--vp-c-bg-alt);
-}
-
-.InstallPageTitle h1 {
-	margin: 0.75em 0;
-	font-size: 2rem;
-	font-weight: 700;
-	line-height: inherit;
-}
-
-@media (min-width: 640px) {
-	.InstallPageTitle {
-		padding: 0 48px;
-	}
-
-	.InstallPageTitle h1 {
-		font-size: 2.5rem;
-	}
-}
-
-@media (min-width: 960px) {
-	.InstallPageTitle {
-		padding: 0 64px;
-	}
-}
-</style>

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

@@ -1,5 +1,5 @@
 <template>
-	<header class="FeaturePageTitle">
+	<header class="PageHeader">
 		<div class="container">
 			<h1>
 				<slot name="title"></slot>
@@ -12,30 +12,26 @@
 </template>
 
 <style scoped>
-.FeaturePageTitle {
+.PageHeader {
 	padding: 0 24px;
 	background-color: var(--vp-c-bg-alt);
-}
 
-.FeaturePageTitle h1 {
-	margin: 0.75em 0;
-	font-size: 2rem;
-	font-weight: 700;
-	line-height: inherit;
-}
+	& h1 {
+		margin: 0.75em 0;
+		font-size: 2rem;
+		font-weight: 700;
+		line-height: inherit;
+	}
 
-@media (min-width: 640px) {
-	.FeaturePageTitle {
+	@media (min-width: 640px) {
 		padding: 0 48px;
-	}
 
-	.FeaturePageTitle h1 {
-		font-size: 2.5rem;
+		& h1 {
+			font-size: 2.5rem;
+		}
 	}
-}
 
-@media (min-width: 960px) {
-	.FeaturePageTitle {
+	@media (min-width: 960px) {
 		padding: 0 64px;
 	}
 }

docs/.vitepress/theme/index.js

@@ -1,6 +1,5 @@
 import Theme from 'vitepress/theme';
 import '@fortawesome/fontawesome-free/css/fontawesome.css';
-import '@fortawesome/fontawesome-free/css/brands.css';
 import '@fortawesome/fontawesome-free/css/solid.css';
 import './styles/base.css';
 import './styles/vars.css';

docs/features.md

@@ -4,16 +4,16 @@ title: Features
 ---
 
 <script setup>
-  import FeaturePageTitle from "./.vitepress/theme/components/FeaturePageTitle.vue";
+  import PageHeader from "./.vitepress/theme/components/PageHeader.vue";
   import FeaturePageSection from "./.vitepress/theme/components/FeaturePageSection.vue";
   import FeatureList from "./.vitepress/theme/components/FeatureList.vue";
   import { users, webDomains, mail, dns, databases, serverAdmin } from "./_data/features";
 </script>
 
 <FeaturePage>
-  <FeaturePageTitle>
+  <PageHeader>
     <template #title>Features</template>
-  </FeaturePageTitle>
+  </PageHeader>
   <FeaturePageSection image="/images/undraw_two_factor_authentication_namy.svg">
     <template #title>Users</template>
     <template #lead>Share access to your server with other users and restrict their resources.</template>

docs/install.md

@@ -4,7 +4,7 @@ title: Install
 ---
 
 <script setup>
-  import InstallPageTitle from "./.vitepress/theme/components/InstallPageTitle.vue";
+  import PageHeader from "./.vitepress/theme/components/PageHeader.vue";
   import InstallOptions from "./.vitepress/theme/components/InstallOptions.vue";
   import InstallOptionsSection from "./.vitepress/theme/components/InstallOptionsSection.vue";
   import { options } from "./_data/options";
@@ -12,12 +12,12 @@ title: Install
 </script>
 
 <InstallPage>
-  <InstallPageTitle>
-	<template #title>Install</template>
-  </InstallPageTitle>
+  <PageHeader>
+    <template #title>Install</template>
+  </PageHeader>
   <InstallOptionsSection>
-  	<template #list>
-	  <InstallOptions :items="options" :languages="languages"></InstallOptions>
-	</template>
+    <template #list>
+      <InstallOptions :items="options" :languages="languages"></InstallOptions>
+    </template>
   </InstallOptionsSection>
 </InstallPage>