Update docs, styling (resolves #783)

package.json

@@ -24,7 +24,7 @@
     "ci": "biome ci . && installed-check --no-include-workspace-root --ignore-dev"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.8.3",
+    "@biomejs/biome": "1.9.1",
     "installed-check": "^9.3.0"
   }
 }

packages/docs/astro.config.ts

@@ -1,6 +1,8 @@
+import { rehypeHeadingIds } from '@astrojs/markdown-remark';
 import starlight from '@astrojs/starlight';
 import type { ExpressiveCodeTheme } from '@astrojs/starlight/expressive-code';
 import { defineConfig } from 'astro/config';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 import remarkDirective from 'remark-directive';
 import { fixInternalLinks } from './remark/fixInternalLinks.ts';
 import { transformDirectives } from './remark/transformDirectives.ts';
@@ -21,6 +23,7 @@ export default defineConfig({
   },
   markdown: {
     remarkPlugins: [fixInternalLinks, transformDirectives, remarkDirective],
+    rehypePlugins: [rehypeHeadingIds, rehypeAutolinkHeadings],
   },
   integrations: [
     starlight({

packages/docs/package.json

@@ -24,14 +24,16 @@
   },
   "dependencies": {
     "@astro-community/astro-embed-youtube": "0.5.3",
+    "@astrojs/markdown-remark": "^5.2.0",
     "@astrojs/starlight": "0.27.1",
+    "rehype-autolink-headings": "^7.1.0",
     "sharp": "0.33.5"
   },
   "devDependencies": {
     "@astrojs/check": "0.9.3",
     "@types/mdast": "4.0.4",
     "@types/unist": "3.0.3",
-    "astro": "4.15.6",
+    "astro": "4.15.7",
     "hastscript": "9.0.0",
     "picocolors": "^1.1.0",
     "remark-cli": "12.0.1",

packages/docs/src/content/docs/explanations/comparison-and-migration.md

@@ -87,22 +87,26 @@ knip --include exports,types,nsExports,nsTypes
 
 Use `knip --exports` to also include class and enum members.
 
-### More alternative/related projects
+## Related projects
 
-- [dependency-check][7]
-- [deadfile][8]
-- [npm-check][9] (used depcheck)
+Additional alternative and related projects include:
+
+- [deadfile][7]
+- [DepClean][8]
+- [dependency-check][9]
 - [find-unused-exports][10]
-- [ts-remove-unused][11]
+- [npm-check][11]
+- [ts-remove-unused][12]
 
 [1]: ../features/monorepos-and-workspaces.md
 [2]: ../overview/getting-started.mdx
 [3]: https://github.com/depcheck/depcheck
 [4]: https://github.com/smeijer/unimported
 [5]: https://github.com/nadeesha/ts-prune
 [6]: https://github.com/pzavolinsky/ts-unused-exports
-[7]: https://github.com/dependency-check-team/dependency-check
-[8]: https://github.com/M-Izadmehr/deadfile
-[9]: https://github.com/dylang/npm-check
+[7]: https://github.com/M-Izadmehr/deadfile
+[8]: https://github.com/mysteryven/depclean
+[9]: https://github.com/dependency-check-team/dependency-check
 [10]: https://github.com/jaydenseric/find-unused-exports
-[11]: https://github.com/line/ts-remove-unused
+[11]: https://github.com/dylang/npm-check
+[12]: https://github.com/line/ts-remove-unused

packages/docs/src/content/docs/guides/issue-reproduction.md

@@ -26,7 +26,7 @@ Issues containing just a screenshot, a snippet of output, or a snippet of source
 code don't tell the full picture. Only an actual reproduction of the issue with
 source code and configuration is complete and actionable.
 
-### Before opening an issue
+## Before opening an issue
 
 Before opening an issue, please make sure you:
 
@@ -38,7 +38,7 @@ Before opening an issue, please make sure you:
 Please file only a single issue at a time, so each of them can be labeled and
 tracked separately.
 
-### Templates
+## Templates
 
 A convenient way to create a minimal reproduction so is by starting with one of
 these templates in CodeSandbox or StackBlitz:
@@ -58,7 +58,7 @@ and reproduction.
 Providing a link to your existing project repository will likely not be
 considered "minimal".
 
-### Pull Request
+## Pull Request
 
 The optimal way is to add fixtures and/or failing tests to the Knip repository,
 and open a pull request to discuss the issue! Also see [instructions for

packages/docs/src/styles/content.css

@@ -1,3 +1,7 @@
+html {
+  scroll-behavior: smooth;
+}
+
 .content-panel + .content-panel {
   border: unset;
 }
@@ -37,7 +41,6 @@
 .sl-markdown-content h3 code {
   font-size: 0.9em;
   color: var(--sl-color-white);
-  /* margin-bottom: 0; */
 }
 
 .sl-markdown-content p code,
@@ -125,3 +128,9 @@ section.plugins li {
 .sl-markdown-content .starlight-aside {
   margin-top: 2rem;
 }
+
+:root[data-theme='light'] {
+  .logo-border {
+    border-color: var(--sl-color-black);
+  }
+}

packages/docs/src/styles/expressive-code.css

@@ -1,3 +1,7 @@
+.expressive-code figure.frame {
+  box-shadow: none;
+}
+
 .expressive-code .frame pre,
 .expressive-code .frame div {
   margin-top: unset;

packages/docs/src/styles/hero.css

@@ -16,16 +16,16 @@
   font-size: var(--sl-text-3xl);
 }
 
-.actions .primary {
+.actions .sl-link-button.primary {
   background-color: var(--sl-color-orange);
 }
 
-.actions .primary:hover {
+.actions .sl-link-button.primary:hover {
   background-color: var(--sl-color-bright-orange);
 }
 
 :root {
-  .actions .primary {
+  .actions .sl-link-button.primary {
     color: var(--sl-color-white);
     border: 1px solid var(--sl-color-white);
   }
@@ -36,12 +36,12 @@
     border-color: var(--sl-color-black);
   }
 
-  .actions .primary {
+  .actions .sl-link-button.primary {
     color: var(--sl-color-black);
     border: 2px solid var(--sl-color-black);
   }
 
-  .actions .primary svg {
+  .actions .sl-link-button.primary svg {
     color: var(--sl-color-black);
   }
 }

packages/docs/src/styles/links.css

@@ -6,6 +6,39 @@
   transition: border-color 300ms;
 }
 
+.sl-markdown-content {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    position: relative;
+
+    a::before {
+      content: '#';
+    }
+
+    a {
+      position: absolute;
+      top: 0;
+      left: 0;
+      margin-left: -1.5rem;
+      text-decoration: none;
+      border-bottom: none;
+      opacity: 0;
+      color: var(--sl-color-text);
+      transition:
+        color 0.3s,
+        opacity 0.3s;
+    }
+
+    &:hover a {
+      opacity: 1;
+    }
+  }
+}
+
 .right-sidebar a:hover,
 .sidebar-content a:hover,
 .sidebar-content a:hover {

packages/docs/src/styles/theme-light.css

@@ -6,5 +6,5 @@
   --sl-color-accent: var(--sl-color-orange);
   --sl-color-accent-low: var(--sl-color-orange);
   --sl-icon-color: var(--sl-color-white);
-  --sl-color-bg-inline-code: var(--sl-color-gray-5);
+  --sl-color-bg-inline-code: var(--sl-color-gray-6);
 }