docs(site): tidy layout of required/optional pills

JamieMason · Dec 30, 2023 · 698742e · 698742e
1 parent 2315227
commit 698742e
Show file tree

Hide file tree

Showing 15 changed files with 248 additions and 195 deletions.
diff --git a/site/src/components/pill/optional.astro b/site/src/components/pill/optional.astro
@@ -1,20 +1,28 @@
 <style>
-.pill {
-  display: inline-flex;
-  padding-top: 0.125rem;
-  padding-bottom: 0.125rem;
-  padding-left: 0.625rem;
-  padding-right: 0.625rem;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  font-weight: 500;
-  align-items: center;
-  border-radius: 9999px;
-}
-.gray {
-  background-color: #f3f4f6;
-  color: #1f2937;
-}
+  .cols {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .pill {
+    display: inline-flex;
+    padding-top: 0.125rem;
+    padding-bottom: 0.125rem;
+    padding-left: 0.625rem;
+    padding-right: 0.625rem;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    font-weight: 500;
+    align-items: center;
+    border-radius: 9999px;
+  }
+  .gray {
+    background-color: #f3f4f6;
+    color: #1f2937;
+  }
 </style>
 
-<span class='pill gray'>Optional</span>
+<div class="cols">
+  <slot />
+  <span class="pill gray">Optional</span>
+</div>
diff --git a/site/src/components/pill/required.astro b/site/src/components/pill/required.astro
@@ -1,20 +1,28 @@
 <style>
-.pill {
-  display: inline-flex;
-  padding-top: 0.125rem;
-  padding-bottom: 0.125rem;
-  padding-left: 0.625rem;
-  padding-right: 0.625rem;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  font-weight: 500;
-  align-items: center;
-  border-radius: 9999px;
-}
-.red {
+  .cols {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .pill {
+    display: inline-flex;
+    padding-top: 0.125rem;
+    padding-bottom: 0.125rem;
+    padding-left: 0.625rem;
+    padding-right: 0.625rem;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    font-weight: 500;
+    align-items: center;
+    border-radius: 9999px;
+  }
+  .red {
   background-color: #fee2e2;
   color: #991b1b;
 }
 </style>
 
-<span class='pill red'>Required</span>
+<div class="cols">
+  <slot />
+  <span class='pill red'>Required</span>
+</div>
diff --git a/site/src/content/docs/command/lint-semver-ranges.mdx b/site/src/content/docs/command/lint-semver-ranges.mdx
@@ -5,7 +5,6 @@ title: lint-semver-ranges
 import ConfigOption from '@site/partials/option/_config.mdx';
 import FilterOption from '@site/partials/option/_filter.mdx';
 import HelpOption from '@site/partials/option/_help.mdx';
-import IndentOption from '@site/partials/option/_indent.mdx';
 import SourceOption from '@site/partials/option/_source.mdx';
 import SpecsOption from '@site/partials/option/_specs.mdx';
 import TypesOption from '@site/partials/option/_types.mdx';
@@ -35,10 +34,6 @@ Check whether dependency versions used within "dependencies", "devDependencies"
 
 <TypesOption command="lint-semver-ranges" />
 
-### indent
-
-<IndentOption command="lint-semver-ranges" />
-
 ### help
 
 <HelpOption command="lint-semver-ranges" />

diff --git a/site/src/content/docs/config/version-groups/banned.mdx b/site/src/content/docs/config/version-groups/banned.mdx
@@ -28,9 +28,10 @@ Find and remove dependencies which you've decided should never be used.
 
 ## Configuration
 
-### isBanned
-
-<RequiredPill />
+<RequiredPill>
+  {/**/}
+  ### isBanned
+</RequiredPill>
 
 This property activates this behaviour for a given Version Group.
 
@@ -45,22 +46,27 @@ This property activates this behaviour for a given Version Group.
 }
 ```
 
-### dependencies
-
-<Dependencies />
-
-### dependencyTypes
-
-<DependencyTypes />
-
-### specifierTypes
-
-<SpecifierTypes />
-
-### label
-
-<Label />
-
-### packages
-
-<Packages />
+<Dependencies>
+  {/**/}
+  ### dependencies
+</Dependencies>
+
+<DependencyTypes>
+  {/**/}
+  ### dependencyTypes
+</DependencyTypes>
+
+<SpecifierTypes>
+  {/**/}
+  ### specifierTypes
+</SpecifierTypes>
+
+<Label>
+  {/**/}
+  ### label
+</Label>
+
+<Packages>
+  {/**/}
+  ### packages
+</Packages>
diff --git a/site/src/content/docs/config/version-groups/ignored.mdx b/site/src/content/docs/config/version-groups/ignored.mdx
@@ -22,9 +22,10 @@ Have syncpack ignore the versions of these dependencies completely.
 
 ## Configuration
 
-### isIgnored
-
-<RequiredPill />
+<RequiredPill>
+  {/**/}
+  ### isIgnored
+</RequiredPill>
 
 This property activates this behaviour for a given Version Group.
 
@@ -39,22 +40,27 @@ This property activates this behaviour for a given Version Group.
 }
 ```
 
-### dependencies
-
-<Dependencies />
-
-### dependencyTypes
-
-<DependencyTypes />
-
-### specifierTypes
-
-<SpecifierTypes />
-
-### label
-
-<Label />
-
-### packages
-
-<Packages />
+<Dependencies>
+  {/**/}
+  ### dependencies
+</Dependencies>
+
+<DependencyTypes>
+  {/**/}
+  ### dependencyTypes
+</DependencyTypes>
+
+<SpecifierTypes>
+  {/**/}
+  ### specifierTypes
+</SpecifierTypes>
+
+<Label>
+  {/**/}
+  ### label
+</Label>
+
+<Packages>
+  {/**/}
+  ### packages
+</Packages>
diff --git a/site/src/content/docs/config/version-groups/lowest-version.mdx b/site/src/content/docs/config/version-groups/lowest-version.mdx
@@ -28,28 +28,34 @@ Fix mismatched versions in this group by choosing the lowest/oldest semver versi
 
 ## Configuration
 
-### preferVersion
-
-<RequiredPill />
+<RequiredPill>
+  {/**/}
+  ### preferVersion
+</RequiredPill>
 
 Defaults to `highestSemver` but can be optionally changed to `lowestSemver`.
 
-### dependencies
-
-<Dependencies />
-
-### dependencyTypes
-
-<DependencyTypes />
-
-### specifierTypes
-
-<SpecifierTypes />
-
-### label
-
-<Label />
-
-### packages
-
-<Packages />
+<Dependencies>
+  {/**/}
+  ### dependencies
+</Dependencies>
+
+<DependencyTypes>
+  {/**/}
+  ### dependencyTypes
+</DependencyTypes>
+
+<SpecifierTypes>
+  {/**/}
+  ### specifierTypes
+</SpecifierTypes>
+
+<Label>
+  {/**/}
+  ### label
+</Label>
+
+<Packages>
+  {/**/}
+  ### packages
+</Packages>
diff --git a/site/src/content/docs/config/version-groups/pinned.mdx b/site/src/content/docs/config/version-groups/pinned.mdx
@@ -22,9 +22,10 @@ Pin the version of all dependencies in this group to match a specific version yo
 
 ## Configuration
 
-### pinVersion
-
-<RequiredPill />
+<RequiredPill>
+  {/**/}
+  ### pinVersion
+</RequiredPill>
 
 The version specifier you would like to use, this can be anything supported by a package manager.
 
@@ -39,22 +40,27 @@ The version specifier you would like to use, this can be anything supported by a
 }
 ```
 
-### dependencies
-
-<Dependencies />
-
-### dependencyTypes
-
-<DependencyTypes />
-
-### specifierTypes
-
-<SpecifierTypes />
-
-### label
-
-<Label />
-
-### packages
-
-<Packages />
+<Dependencies>
+  {/**/}
+  ### dependencies
+</Dependencies>
+
+<DependencyTypes>
+  {/**/}
+  ### dependencyTypes
+</DependencyTypes>
+
+<SpecifierTypes>
+  {/**/}
+  ### specifierTypes
+</SpecifierTypes>
+
+<Label>
+  {/**/}
+  ### label
+</Label>
+
+<Packages>
+  {/**/}
+  ### packages
+</Packages>