how add this?

[MikeCZ23]

i want only this add on my website. how?

[brenoepics]

Hi, here is the component:
https://github.com/brenoepics/vitepress-carbon/blob/main/packages/theme/src/theme/components/VPHighlight.vue
https://github.com/brenoepics/vitepress-carbon/blob/main/packages/theme/src/theme/components/VPHero.vue#L32

you can just reimplement it on your theme.

[MikeCZ23]

How i can add to theme/index.ts and .vitepress/config.mts?

[brenoepics]

Hi, sorry for the delay, I had to export the components and do some changes, now you can use any component from vitepress-carbon/components in other vitepress themes.

example here -> https://stackblitz.com/edit/vp-carbon-hero
(you need to install vitepress-carbon at least 1.4.4)

[MikeCZ23]

thank you it works, but I have Layout: () => h(Layout), for giscus plugin and this will disable it. is it possible to have both?

can i use png instead of an emoji?

can i change color icon glow and highlight line?

[brenoepics]

You can change Layout.vue to something like

<script setup lang="ts">
import HomeHeroComponent from "./HomeHeroComponent.vue";

</script>

<template>
  <Layout>
    <template #home-hero-info>
      <HomeHeroComponent/>
    </template>
    <template #doc-after>
      <div v-if="frontmatter.comments !== false" :key="title" class="giscus">
        /* Add the Giscus component here */
      </div>
    </template>
</template>

regarding to emoji, png, svg.. it is possible yeah, same type as vitepress hero image.

//HomeHeroComponent.vue
<script setup>
import { VPHighlight } from 'vitepress-carbon/components';
import { useData } from 'vitepress';

const { frontmatter: fm } = useData();

const name = fm.value.hero.name;
const text = fm.value.hero.text;
const tagline = fm.value.hero.tagline;

const icon = {
  src: 'path/to/icon.png',
  alt: 'Icon description',
  width: '24',
  height: '24',
  wrap: false
};

const colors = ['transparent', 'var(--vp-c-brand-1)', 'var(--vp-c-brand-3)'];
</script>
<template>
  <div class="hero-container">
    <VPHighlight class="git-highlight" :icon="icon" :stringHighlightColors="colors" />
    <div class="hero-content">
      <h1 v-if="name" class="name">
        <span v-html="name" class="clip"></span>
      </h1>
      <p v-if="text" v-html="text" class="text"></p>
      <p v-if="tagline" v-html="tagline" class="tagline"></p>
    </div>
  </div>
</template>

There is a problem with changing colors this way, but tomorrow I will make another release with this fix and more components.

[MikeCZ23]

thank you, the png works
but giscus doesn't.

[brenoepics]

How your Layout.vue and index.ts looks like?

[MikeCZ23]

Github error:
In localhost works fine

vitepress v1.3.4

- building client + server bundles...

(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
✓ building client + server bundles...
build error:
Unknown file extension ".vue" for /home/runner/work/mikecz23.github.io/mikecz23.github.io/node_modules/vitepress-carbon/dist/theme/components/VPAlgoliaSearchBox.vue
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".vue" for /home/runner/work/mikecz23.github.io/mikecz23.github.io/node_modules/vitepress-carbon/dist/theme/components/VPAlgoliaSearchBox.vue
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:160:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:203:36)
    at defaultLoad (node:internal/modules/esm/load:143:22)
    at async ModuleLoader.load (node:internal/modules/esm/loader:553:7)
    at async ModuleLoader.moduleProvider (node:internal/modules/esm/loader:434:45)
Error: Process completed with exit code 1.```

[brenoepics]

https://github.com/MikeCZ23/mikecz23.github.io/blob/main/.vitepress/config.ts#L47
You might add something like:

  vite: {
    ssr: {
      noExternal: [ /\.css$/, /\.vue$/, /^vitepress-carbon/]
    },
   //...
  },

[MikeCZ23]

vitepress v1.3.4

- building client + server bundles...

(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
✓ building client + server bundles...
(node:1989) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/home/runner/work/mikecz23.github.io/mikecz23.github.io/node_modules/mark.js/src/vanilla.js:1
import MarkJS from './lib/mark';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (node:internal/modules/cjs/loader:1378:20)
    at Module._compile (node:internal/modules/cjs/loader:1428:41)
    at Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
    at Module.load (node:internal/modules/cjs/loader:[12](https://github.com/MikeCZ23/mikecz23.github.io/actions/runs/11347081613/job/31557618137#step:6:13)88:32)
    at Module._load (node:internal/modules/cjs/loader:1104:12)
    at cjsLoader (node:internal/modules/esm/translators:346:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:286:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:234:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:473:24)
    at async build (file:///home/runner/work/mikecz23.github.io/mikecz23.github.io/node_modules/vitepress/dist/node/serve-CFRRJDfQ.js:47051:24)

Node.js v20.[17](https://github.com/MikeCZ23/mikecz23.github.io/actions/runs/11347081613/job/31557618137#step:6:18).0
Error: Process completed with exit code 1.

[MikeCZ23]

You can check my repo
https://github.com/MikeCZ23/mikecz23.github.io

Strange. On localhost this work

[brenoepics]

bump vitepress-carbon to 1.4.6, this was caused because vitepress uses vanilla js version of Mark.js while you and vitepress-carbon specify type: "module", it might be fine now.

[MikeCZ23]

thx gitub pages work

but localhost no. Never mind. I downgrade on localhost on v1.4.5