feature (content): Using Shiki Transformers about website HOT 14 CLOSED

@rishi-raj-jain JS implementation looks good and according the shiki transformers docs 👏

Regarding CSS I'd like to:

• move it up to the @layer components
• adjust scss classes
• add before items as + and —
• update colors for dark theme support

.has-diff code .line {
  @apply pl-6;

  &.diff {
    &.add {
      @apply bg-code-green-1/10 before:absolute before:left-2 before:text-code-green-1 before:content-['+'];
    }
    &.remove {
      @apply bg-code-red-1/10 before:absolute before:left-2 before:text-code-red-1/50 before:content-['—'];
    }
  }
}

from website.

@rishi-raj-jain I also noticed that we need to update our copy button with styles and functionality in case of transformers.

Styles

It's good for dark theme

But has a lack of background for light theme

Functionality
According the functionality on original shiki transformers page, copy button shouldn't copy removed lines of code. I guess we need to improve it in the same way

If you want me, I can help you with this, uploading my commit

from website.

@saimonkat

Appreciate your detailed review.

Yes, it'd be great to have help from you!

from website.

Would you be open to committing the changes as you suggested earlier as well? I'm happy to as well.

from website.

@rishi-raj-jain ok sure, I'll commit my updates now.

Copy button would take extra time by the way, but I'll work on this too.

from website.

Thank you, @saimonkat!

from website.

Added a fix, please review @saimonkat.

from website.

@rishi-raj-jain Thanks! I'm not home now, but overall looks like a good fix overall by the code 🔥 I'll review closer when I'm back home

from website.

Hey @rishi-raj-jain your fix looks really good and works good as well, thank you!

I just optimized it a little bit and I think we're ready!

from website.

@saimonkat Thank you!

I've simplified it even further: 92f6c2e.

Feel free to drop an approving review for it.

from website.

Being addressed in #1724.

from website.

JS: https://github.com/neondatabase/website/pull/1724/files#diff-09b768860037e61d5b8f3b59dffc714d602d84d23886eeb513e520c45aae274d
CSS: https://github.com/neondatabase/website/pull/1724/files#diff-24af49ca5abe8cb68bafd6b913d714250978eec3978bb9fa35a2f9c097eaaf91

from website.

@rishi-raj-jain updated styles for highlighting and fix for copy button in #1724.

There is only one bug left, removed line of code provides empty line in result of copying:

Hope you could help me to take a look at this commit 8b55b94

from website.

Taking a look now!

from website.