VitePress

[42Willow]

Link to repository

https://github.com/42willow/vitepress

Screenshots

Any additional comments?

No response

Submission Guidelines

• [X] I have read and followed Catppuccin's submission guidelines.

[uncenter]

• We should probably figure out how to publish each flavor as a section/directory of an NPM package so you can just install it and import it instead of copying in a directory (the latter of which won't let you receive updates either).
• Would be nice to add justfile for ease of use with Whiskers (see https://github.com/catppuccin/fr33zmenu/blob/main/justfile for an example, just change the template filename).
• Along with the preview screenshots having an actual demo/example website (eventually vitepress.catppuccin.com once this is transferred!) would make it easier to explore the theme.

[42Willow]

Good idea

• [x] npm packages
• [x] justfile
• [ ] demo site (change to some other filler content)
• [x] default to mocha
• [x] move /docs example

[sgoudham]

Hey :wave: Sorry for the wait on this one.

I have a couple questions about the port/codebase:

1. Can we add a section on the FAQ on why Latte isn't included? I'm assuming this is because of a technical limitation of some sort? I can't think of any reason why Latte wouldn't be included if it is technically feasible. I'm even more confused by the fact that there is a Latte preview image but no CSS file for it.
2. I'm not a fan of copying the docs directory from catppuccin/catppuccin into this repository, please remove this and add some other markdown content for the demo site.
3. A little bit unsure why the theme is defaulting to macchiato in the index.js as we don't do that elsewhere. Please update this to default to mocha, if I'm understanding this correctly.

4. It would be a lot nicer if the code for the example site was in a subdirectory instead of being at the root level and inside /docs.

   Could you try to restructure the repository as outlined below?

   .
   ├── assets
   │   ├── frappe.webp
   │   ├── latte.webp
   │   ├── macchiato.webp
   │   ├── mocha.webp
   │   └── preview.webp
   ├── example
   │   ├── bun.lockb
   │   ├── package.json (for demo site)
   │   ├── src
   │   │   └── index.md
   │   └── tsconfig.json
   ├── LICENSE
   ├── package.json (for publishing to npm)
   ├── README.md
   ├── theme
   │   ├── frappe.css
   │   ├── index.js
   │   ├── macchiato.css
   │   └── mocha.css
   └── vitepress.tera

No. 4 is more of a refactoring exercise that can be carried out at later point but I'd be happy to merge if No. 1 -> No. 3 were explained / implemented.

Thanks!

[uncenter]

Can we add a section on the FAQ on why Latte isn't included? I'm assuming this is because of a technical limitation of some sort? I can't think of any reason why Latte wouldn't be included if it is technically feasible. I'm even more confused by the fact that there is a Latte preview image but no CSS file for it.

Below the usage section there is a note that says:

Frappe is included in all flavors as the light mode variant.

I believe that is a typo and is meant to say latte.

[42Willow]

Thanks for the detailed feedback and advice :)

I believe that is a typo and is meant to say latte. Oops sorry that’s a typo.

I am currently on holidays so I will get back to the feedback and finishing the port soon.

[42Willow]

I have no idea what I'm doing so could someone please take a look at https://github.com/42Willow/vitepress? I've tried to take on the feedback but I have limited experience with this stuff.

Using css to override the accent colour doesn't seem like the most elegant way to do it :thinking: https://github.com/42Willow/vitepress/tree/main/example/.vitepress/theme

[uncenter]

Can you make it so a single var var(--ctp-accent) changes those three brand colors?

[sgoudham]

Hey again :wave:, Just looking to understand where this port is at right now.

I have no idea what I'm doing so could someone please take a look at 42Willow/vitepress? I've tried to take on the feedback but I have limited experience with this stuff.

Were you able to get some help on this @42Willow?

[42Willow]

Hi, thanks for the reminder. I just need to invest some time into finishing off this port (I have been a little busy recently)

I was thinking of theming the CSS variables directly with JS/TS (similar to how daisyui does it) rather than using whiskers for templating - what do you think about this?

I'll have some time to look into this in an hour or so

docs

Edit: Ok I think it might be easier just to use the templated css files, I just don't know how to conditionally import them based on what's the current flavour Edit2: I figured it out but now I can't get it to work in a separate module Edit3: Check the ports discord forum, I'm stuck again

[42Willow]

Should be ready

[uncenter]

Theme looks good to me! We: added callout/alerts/admonition styling; added a step for setting (and set in the demo site) the markdown syntax highlighting theme to Catppuccin; added variables that themed the copy/copied clipboard icons; changed the demo site accent color to mauve; and did some documentation glow-ups!