Refactor DocumentationVersionHint component and update styles

.github/actions/pnpm-setup/action.yml

@@ -5,16 +5,16 @@
 name: pnpm Setup
 description: Install Node and pnpm, install dependencies
 runs:
-  using: "composite"
+  using: 'composite'
   steps:
     - uses: pnpm/action-setup@v4
       with:
-        version: 9
+        version: 10
         run_install: false
 
     - uses: actions/setup-node@v4
       with:
-        node-version: '20'
+        node-version: '22'
         cache: 'pnpm'
 
     - run: pnpm install

.github/workflows/ci.yml

@@ -16,7 +16,7 @@ jobs:
       - uses: ./.github/actions/pnpm-setup
 
       - name: Lint
-        run: pnpm run lint:hard
+        run: pnpm run lint
 
       - name: Build
         run: pnpm run build

.github/workflows/dod-checker.yml

@@ -4,12 +4,12 @@ on:
     types: [opened, edited, synchronize]
 
 concurrency:
-  group: pr-{{ github.event.pull_request.number }}
+  group: 'pr-${{ github.event.pull_request.number }}'
   cancel-in-progress: true
 
 jobs:
   check-dod:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
     steps:
       - name: Print Pull Request ID
         run: |

.github/workflows/draft-deploy.yml

@@ -21,7 +21,7 @@ jobs:
         shell: bash
         run: |
           mkdir -p dist/docs
-          mv build dist/docs/2.2/
+          mv build dist/v2/
 
       - name: Netlify Deploy
         uses: netlify/actions/cli@master
@@ -47,6 +47,6 @@ jobs:
           issue-number: ${{ github.event.pull_request.number }}
           body: |
             Netlify Draft Deployment
-            URL: ${{ steps.netlify.outputs.NETLIFY_URL }}/docs/2.2
+            URL: ${{ steps.netlify.outputs.NETLIFY_URL }}/v2
             Logs: ${{ steps.netlify.outputs.NETLIFY_LOGS_URL }}
           edit-mode: replace

.github/workflows/publish.yml

@@ -35,7 +35,7 @@ jobs:
 
       - name: Bump version
         shell: bash
-        run: pnpm version patch --no-git-tag-version
+        run: pnpm version prerelease --no-git-tag-version
 
       - name: Commit and push changes
         uses: stefanzweifel/git-auto-commit-action@v5

.npmrc

@@ -1,9 +1 @@
-# - npm
-legacy-peer-deps=true
-save-exact=true
-
-# - pnpm
-auto-install-peers=true
-prefer-offline=true
 shamefully-hoist=true
-strict-peer-dependencies=false

.prettierrc.json

@@ -0,0 +1,5 @@
+{
+	"printWidth": 120,
+	"singleQuote": true,
+	"useTabs": true
+}

docusaurus.config.js → docusaurus.config.ts

@@ -1,16 +1,19 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
-const { themes } = require('prism-react-renderer');
+import { themes } from 'prism-react-renderer';
+import type { Config } from '@docusaurus/types';
+import type { PostCssOptions } from '@docusaurus/types';
+import tailwindcss from 'tailwindcss';
+import autoprefixer from 'autoprefixer';
 
-const PUBLIC_BASE_URL = 'https://public-ui.github.io/';
+const PUBLIC_BASE_URL = 'https://public-ui.github.io';
 
-/** @type {import('@docusaurus/types').Config} */
-const config = {
+const config: Config = {
 	title: 'KoliBri - Public UI',
 	tagline: 'The accessible Web Component Library',
-	url: 'https://public-ui.github.io',
-	baseUrl: '/docs/2.2/',
+	url: PUBLIC_BASE_URL,
+	baseUrl: '/v2/',
 	onBrokenLinks: 'throw',
 	trailingSlash: false,
 	onBrokenMarkdownLinks: 'warn',
@@ -33,11 +36,11 @@ const config = {
 		[
 			'classic',
 			/** @type {import('@docusaurus/preset-classic').Options} */
-			({
+			{
 				docs: {
-					routeBasePath: '/',
+					routeBasePath: '/docs',
 					sidebarCollapsible: true,
-					sidebarPath: require.resolve('./sidebars.js'),
+					sidebarPath: './sidebars.js',
 					// Remove this to remove the "edit this page" links.
 					// editUrl: 'https://github.com/public-ui/documentation/blob/main/packages/docusaurus/',
 					// lastVersion: 'current',
@@ -49,23 +52,22 @@ const config = {
 					// },
 				},
 				blog: false,
-				pages: false,
 				sitemap: {
 					changefreq: 'daily',
 					priority: 0.5,
 					ignorePatterns: ['/blog/tags/**', '/docs/tags/**'],
 					filename: 'sitemap.xml',
 				},
 				theme: {
-					customCss: require.resolve('./src/css/custom.css'),
+					customCss: './src/css/custom.css',
 				},
-			}),
+			},
 		],
 	],
 
 	themeConfig:
 		/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
-		({
+		{
 			navbar: {
 				title: 'KoliBri',
 				logo: {
@@ -78,24 +80,28 @@ const config = {
 						position: 'left',
 						dropdownActiveClassDisabled: true,
 						dropdownItemsAfter: [
+							{
+								type: 'html',
+								className: 'dropdown-archived-versions',
+								value: '<strong class="dropdown__link">Version 2</strong>',
+							},
 							{
 								type: 'html',
 								value: '<hr class="dropdown-separator">',
 							},
 							{
 								type: 'html',
 								className: 'dropdown-archived-versions',
-								value: '<b>Archive</b>',
+								value: '<span class="dropdown__link">Version 1</span>',
 							},
-							{ to: `${PUBLIC_BASE_URL}docs/2.2/`, label: '2.2' },
 						],
 					},
 					{
 						label: 'Dokumentation',
-						to: '/',
+						to: '/docs',
 						position: 'left',
 					},
-					{ to: `${PUBLIC_BASE_URL}blog`, label: 'Blog', position: 'left' },
+					{ to: `${PUBLIC_BASE_URL}/blog`, label: 'Blog', position: 'left' },
 					{ type: 'search', position: 'right' },
 					// {
 					// 	href: 'https://public-ui.github.io/designer',
@@ -120,15 +126,15 @@ const config = {
 						items: [
 							{
 								label: 'Dokumentation',
-								to: '/',
+								to: '/docs',
 							},
 							{
 								label: 'Blog',
-								to: `${PUBLIC_BASE_URL}blog`,
+								to: `${PUBLIC_BASE_URL}/blog`,
 							},
 							{
 								label: 'Impressum',
-								to: `${PUBLIC_BASE_URL}docs/impressum`,
+								to: `${PUBLIC_BASE_URL}/docs/impressum`,
 							},
 						],
 					},
@@ -180,18 +186,23 @@ const config = {
 					dark: 'forest',
 				},
 			},
-		}),
+		},
 	markdown: {
 		mermaid: true,
 	},
 	plugins: [
 		async () => {
 			return {
 				name: 'docusaurus-tailwindcss',
-				configurePostCss(postcssOptions) {
+
+				configurePostCss(postcssOptions: PostCssOptions) {
 					// Appends TailwindCSS and AutoPrefixer.
-					postcssOptions.plugins.push(require('tailwindcss'));
-					postcssOptions.plugins.push(require('autoprefixer'));
+					if (!Array.isArray(postcssOptions.plugins)) {
+						postcssOptions.plugins = [];
+					}
+
+					postcssOptions.plugins.push(tailwindcss());
+					postcssOptions.plugins.push(autoprefixer());
 					return postcssOptions;
 				},
 			};
@@ -239,4 +250,4 @@ const config = {
 	themes: ['@docusaurus/theme-mermaid'],
 };
 
-module.exports = config;
+export default config;