feat: update TypeScript version and enhance NqCard and NqGrid components with new properties and styles

Author: onmax

docs/.vitepress/theme/index.ts

@@ -1,27 +1,16 @@
-import type { EnhanceAppContext, Theme } from 'vitepress'
 import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client'
 
-import { Layout } from 'nimiq-vitepress-theme'
+import { defineNimiqThemeConfig } from 'nimiq-vitepress-theme'
 
-import NqCard from 'nimiq-vitepress-theme/components/NqCard.vue'
-
-import NqGrid from 'nimiq-vitepress-theme/components/NqGrid.vue'
-
-import NqLargeCard from 'nimiq-vitepress-theme/components/NqLargeCard.vue'
 import ComponentPreview from './components/ComponentPreview.vue'
-import '@shikijs/vitepress-twoslash/style.css'
 
+import '@shikijs/vitepress-twoslash/style.css'
 import 'virtual:uno.css'
 
-export default {
-  Layout,
-  enhanceApp({ app }: EnhanceAppContext) {
+export default defineNimiqThemeConfig({
+  enhanceApp({ app }) {
     app.use(TwoslashFloatingVue)
 
     app.component('ComponentPreview', ComponentPreview)
-
-    app.component('NqCard', NqCard)
-    app.component('NqLargeCard', NqLargeCard)
-    app.component('NqGrid', NqGrid)
   },
-} satisfies Theme
+})

docs/.vitepress/theme/plugins/component-preview.ts

@@ -31,7 +31,8 @@ export default function (md: MarkdownRenderer) {
 
         // Push tokens
 
-        const dummyToken = new state.Token('', '', 0) // eslint-disable-line unused-imports/no-unused-vars
+        // eslint-disable-next-line unused-imports/no-unused-vars
+        const dummyToken = new state.Token('', '', 0)
         const tokens: Array<typeof dummyToken> = []
 
         const codeTemplateStart = new state.Token('html_inline', '', 0)

docs/vitepress-theme/frontmatter.md

@@ -19,20 +19,21 @@ The Nimiq Vitepress theme supports the following frontmatter options:
 
 ### General Options
 
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `title` | `string` | - | Page title, shown in browser tabs and search results |
-| `description` | `string` | - | Page description for SEO |
+| Option        | Type     | Default | Description                                          |
+| ------------- | -------- | ------- | ---------------------------------------------------- |
+| `title`       | `string` | -       | Page title, shown in browser tabs and search results |
+| `description` | `string` | -       | Page description for SEO                             |
 
 ### Layout Options
 
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `outline` | `boolean` | `true` if headings exist | Whether to show the outline (table of contents) |
-| `sidebar` | `boolean` | `true` if outline or widget is shown | Whether to show the secondary sidebar |
-| `widget` | `boolean` | `true` | Whether to show the widget area in the secondary sidebar |
+| Option             | Type      | Default                              | Description                                              |
+| ------------------ | --------- | ------------------------------------ | -------------------------------------------------------- |
+| `sidebar`          | `boolean` | `true`                               | Whether to show the sidebar                              |
+| `outline`          | `boolean` | `true` if headings exist             | Whether to show the outline (table of contents)          |
+| `secondarySidebar` | `boolean` | `true` if outline or widget is shown | Whether to show the secondary sidebar                    |
+| `widget`           | `boolean` | `true`                               | Whether to show the widget area in the secondary sidebar |
 
-## Controlling the Sidebar
+## Controlling the Secondary Sidebar
 
 The secondary sidebar contains both the outline (table of contents) and optional widget area. You can control them independently:
 
@@ -42,8 +43,8 @@ The secondary sidebar contains both the outline (table of contents) and optional
 outline: false
 widget: true
 
-# Or hide both by disabling the entire sidebar
-sidebar: false
+# Or hide both by disabling the entire secondary sidebar
+secondarySidebar: false
 ---
 ```
 
@@ -87,7 +88,7 @@ If you need to create reusable data structures for specific components, consider
 heroSection:
   title: Welcome to Nimiq
   description: The browser-first blockchain
-  cta: 
+  cta:
     label: Get Started
     url: /getting-started
 ---

eslint.config.js

@@ -9,4 +9,10 @@ export default antfu({
   rules: {
     'ts/explicit-function-return-type': 'off',
   },
+}, {
+  files: ['nimiq-vitepress-theme/src/components/NqCard.vue'],
+  rules: {
+    // https://github.com/vuejs/eslint-plugin-vue/issues/1577
+    'import/first': 'off',
+  },
 })

package.json

@@ -19,15 +19,15 @@
     "docs"
   ],
   "devDependencies": {
-    "@antfu/eslint-config": "^4.5.1",
+    "@antfu/eslint-config": "^4.7.0",
     "@types/node": "^22.13.9",
     "@unocss/eslint-config": "^66.0.0",
     "@unocss/eslint-plugin": "^66.0.0",
     "bumpp": "^10.0.3",
     "eslint": "^9.21.0",
     "eslint-plugin-format": "^1.0.1",
     "rimraf": "^6.0.1",
-    "typescript": "~5.8.2",
+    "typescript": "catalog:",
     "vite": "catalog:"
   },
   "pnpm": {

packages/nimiq-css/build.config.ts

@@ -1,30 +1,65 @@
+import fs from 'node:fs'
+import path from 'node:path'
 import { defineBuildConfig } from 'unbuild'
 
 export default defineBuildConfig([
   {
-    entries: [{
-      builder: 'mkdist',
-      input: './src',
-    },
+    entries: [
+      {
+        builder: 'mkdist',
+        input: './src',
+        pattern: ['**/*.ts'],
+        format: 'esm',
+        loaders: ['js'],
+      },
     ],
-    outDir: 'dist',
     declaration: true,
     clean: true,
-    rollup: {
-      emitCJS: false,
-      commonjs: false,
+    hooks: {
+      'mkdist:done': async (ctx) => {
+        if (ctx.options.stub)
+          return
+
+        // Copy ./src/css folder to ./dist/css without minification
+        const srcDir = path.resolve('./src/css')
+        const destDir = path.resolve('./dist/css')
+
+        // Create destination directory if it doesn't exist
+        if (!fs.existsSync(destDir)) {
+          fs.mkdirSync(destDir, { recursive: true })
+        }
+
+        // Copy all files from src/css to dist/css
+        copyDirectorySync(srcDir, destDir)
+        console.log('CSS files copied from src/css to dist/css')
+      },
     },
-    // hooks: {
-    //   'build:done': async () => {
-    // await copy('src/css', 'dist/css')
-    // },
-    // },
-  // {
-  //   entries: [
-  //     './src/css',
-  //   ],
-  //   outDir: 'dist/css',
-  //   clean: true,
-  // },
   },
 ])
+
+/**
+ * Recursively copy a directory
+ */
+function copyDirectorySync(src: string, dest: string) {
+  // Create destination directory if it doesn't exist
+  if (!fs.existsSync(dest)) {
+    fs.mkdirSync(dest, { recursive: true })
+  }
+
+  // Read all files and directories in the source
+  const entries = fs.readdirSync(src, { withFileTypes: true })
+
+  for (const entry of entries) {
+    const srcPath = path.join(src, entry.name)
+    const destPath = path.join(dest, entry.name)
+
+    if (entry.isDirectory()) {
+      // Recursively copy subdirectories
+      copyDirectorySync(srcPath, destPath)
+    }
+    else {
+      // Copy files
+      fs.copyFileSync(srcPath, destPath)
+    }
+  }
+}

packages/nimiq-css/src/css/utilities.css

@@ -5,6 +5,11 @@
   color: rgba(var(--nq-neutral-800));
 }
 
+.nq-basic {
+  font-size: 12px;
+  color: pink;
+}
+
 .nq-label {
   text-transform: uppercase;
   letter-spacing: 0.17em;

packages/nimiq-css/src/unocss/index.ts

@@ -99,16 +99,8 @@ export const presetNimiq = definePreset((options: NimiqPresetOptions = {}) => {
 
     const layer = `${prefix}${name}`
 
-    const content = readContent(name).replaceAll(
-      'data:image/svg+xml;',
-      'SEMICOLON_BUG_HACK',
-    )
-    const json = toJSON(content, {
-      stripComments: true,
-      comments: false,
-      ordered: false,
-      split: false,
-    })
+    const content = readContent(name).replaceAll('data:image/svg+xml;', 'SEMICOLON_BUG_HACK')
+    const json = toJSON(content, { stripComments: true, comments: false, ordered: false, split: false })
 
     const rulesNamesStr: string[] = []
     for (const key of Object.keys(json.children)) {