export `GitChangelogOptions` from "@nolebase/vitepress-plugin-git-changelog/vite/types";

[onmax]

First of all, amazing job! It is really inspiring to see all the plugins that you are working on and how well they perform!

I am building my own Vitepress Theme, and with that I also have my own vite.ts which I export so the user can register the Vite Plugin.

In this vite plugin, I would like to install the GitChangelogOptions so users don't have to do that themself. Therefore I want to give them an option to pass the options to the GitChangelogOptions.

Something like this:

export interface MyVitepressThemeVitePluginOptions {
  /**
   * Whether to enable the GitChangelog plugin.
   * An options object can be passed to configure the plugin.
   */
  gitChangelog?: false | GitChangelogOptions

}

The problem is that GitChangelogOptions is in vite/types.ts and it is not being exported. Could we change that somehow? Not sure if you want to add another entry point in unbuild.config.ts for vite/types or add an export in types/index.ts.

I can create the PR if we decide to move forwards :)

[nekomeowww]

Hi! Welcome to Nolebase community!

Oh... I never thought this scenario.

It's indeed better to expose the types (even group them into a dedicated entrypoint (i.e. /vite/types or types) with pure types.).

Besides the type exporting need, there was one challenge that I wasn't able to solve when working with wrapping the plugins for VitePress, and I would like to learn from you.

That is, for VitePress, there are actually two environments: Vue setup (client, browser runtime), and Vite & VitePress pre-processing (node, Node.js build-time), while GitChangelog fully relies on git command, with functions supported in GitChangelogOptions to be passed in for customizations. How is this even possible for MyVitepressThemeVitePluginOptions to hold both client and node side scripts and functions?

I tried to make a unified plugin for all the integrations plugins, but eventually landed on multiple split entrypoints, you can check it out:

https://github.com/nolebase/integrations/tree/main/packages/integrations/src/vitepress

[onmax]

That is, for VitePress, there are actually two environments: Vue setup (client, browser runtime), and Vite & VitePress pre-processing (node, Node.js build-time), while GitChangelog fully relies on git command, with functions supported in GitChangelogOptions to be passed in for customizations. How is this even possible for MyVitepressThemeVitePluginOptions to hold both client and node side scripts and functions?

For now I am in the exploration phase. I tried to use vitepress data loaders https://github.com/onmax/nimiq-ui/blob/main/packages/nimiq-vitepress-theme/src/lib/git.data.ts, but as you said, there are issues with the environments so that's why I am trying to implement your plugin.

At the moment I have the following:

Expand to see code

// vite plugin

import { GitChangelog } from "@nolebase/vitepress-plugin-git-changelog/vite";
import type { Plugin } from "vite";

export interface NimiqVitepressVitePluginOptions {
  /**
   * Whether to enable the GitChangelog plugin.
   * An options object can be passed to configure the plugin.
   */
  gitChangelog?: false | any

  /**
   * The URL of the Git repository.
   * This is used to generate the changelog.
   */
  repoURL: string
}

export function NimiqVitepressVitePlugin(options: NimiqVitepressVitePluginOptions): Plugin {
  const { gitChangelog = {} } = options;

  const plugins: Plugin[] = [];

  const repoURL = options.repoURL

  if (gitChangelog !== false)
    plugins.push({ ...GitChangelog({ repoURL, ...gitChangelog }), enforce: 'pre' })

  return {
    name: 'nimiq-vitepress-plugin',
    // enforce: 'pre',
    config: () => ({
      optimizeDeps: {
        exclude: [
          'nimiq-vitepress-theme',
          'virtual:nolebase-git-changelog',
        ],
      },
      ssr: {
        noExternal: [
          'nimiq-vitepress-theme',
        ],
      },
      define: {
        __GIT_REMOTE_URL__: JSON.stringify(repoURL),
      },
      plugins,
      resolve: {
        alias: {
        },
      },
    }),
  } satisfies Plugin;
}

export default NimiqVitepressVitePlugin

// theme.vitepress.ts

import type { Theme } from 'vitepress'
import type { DefineThemeNqVpOptions } from './types'
import NqCard from './components/NqCard.vue'
import NqGrid from './components/NqGrid.vue'
import NqLargeCard from './components/NqLargeCard.vue'
import Layout from './layout/Layout.vue'

import './assets/index.css'

export function defineNimiqThemeConfig(options: DefineThemeNqVpOptions): Theme {
  return {
    Layout,
    async enhanceApp(ctx) {
      if (options?.enhanceApp)
        options.enhanceApp(ctx)
      ctx.app.component('NqCard', NqCard)
      ctx.app.component('NqGrid', NqGrid)
      ctx.app.component('NqLargeCard', NqLargeCard)
    },
  }
}

<script setup lang="ts">
// contributors.vue - For now it is a copy from @nolebase/Contributors.vue
import { useChangelog } from '@nolebase/vitepress-plugin-git-changelog/client/composables/changelog';

const { authors } = useChangelog();
</script>

<template>
  <h2>
    {{ 'Contributors' }}
    <a class="header-anchor" f-mt-2xs href="#contributors" aria-label="Permalink to Contributors" />
  </h2>
  <div flex="~ wrap gap-16">
    <em v-if="!authors.length">
      No contributors available.
    </em>
    <template v-else>
      <template v-for="c of authors" :key="c.name">
        <a v-if="(typeof c.url !== 'undefined')" :href="c.url" flex="~ items-center gap-8">
          <img :src="c.avatarUrl" :alt="`The avatar of contributor named as ${c.name}`" f-size-lg rounded-full>
          {{ c.name }}
        </a>
        <div v-else flex="~ items-center gap-2">
          <img :src="c.avatarUrl" :alt="`The avatar of contributor named as ${c.name}`" f-size-lg rounded-full>
          {{ c.name }}
        </div>
      </template>
    </template>
  </div>
</template>

Summary:

1. Register vite plugin and register vitepress theme
2. Custom pnpm patch to export ONLY the composable, otherwise I got ✘ [ERROR] Could not resolve "../locales"
3. I need to solve the next problem: Failed to resolve import "virtual:nolebase-git-changelog"

I will keep you posted if I manage to make progress.

Thanks for you integrations!!

[onmax]

Hey, I managed to make it work!

Your implementation is really well thought out and clean. I enjoyed reading your code, I learned a lot :)

You can check out my final implementation if you are curious: https://github.com/onmax/nimiq-ui/blob/main/packages/nimiq-vitepress-theme/src/composables/useChangelog.ts

I had to patch the plugin to export some functions that I needed to build my own UI :)

[onmax]

Hey!

Having played around with my new theme in multiple projects, I was wondering whether it would be possible to apply my patch to the source code of your library.

I'd like to explain my situation in case you have a workaround.

1. I developed my Vitepress theme
2. In the same repository, I have implemented the patches locally. Then my /docs folder have the vitepress project.
3. In my other project, I also need to apply the patch manually, since the patch cannot be bundle in the release of npm:

• UnoCSS personal docs
• Nimiq Dev Center

For every project where I want to use my custom Vitepress theme, I need to patch the Git changelog.

For every project in which I want to use my custom Vitepress theme, I need to patch the Git changelog. The patch only includes new exports for the composable, as I have my own component.

Let me know your thoughts!

[nekomeowww]

Thanks for update.

Feel free to submit a new PR to include your patch.

[nekomeowww]

BTW, nice work on the Nimiq theme! I like your sidebar design, would love to integrated into my projects 😍.

[onmax]

Not my design though. I took a lot of inspiration: https://fumadocs.dev/docs/ui

And still quite early 🙈 for the public I think.

Any feedback or idea I appreciate it :)