feat(rentry): init #1198

thismoon · 2024-08-15T16:40:41Z

🎉 Theme for Rentry 🎉

Rentry.co is a markdown paste service with preview, custom urls and editing.¹

💬 Additional Comments 💬

there are classes but they were never used, instead the website is themed with hardcoded color values from bootstrap.min.css. so i had to theme every element individually

this specific table header in "how" is colored differently

because it's different than normal tables in user created pages

users can set text with custom colors using this syntax:

 %red% Colored Text %%

and while in theory it's possible to color them

    .color-change[style="color:red"]{
      color: @red !important
    }
    .color-change[style="color:green"]{
      color: @green !important
    }
    .color-change[style="color:blue"]{
      color: @blue !important
    }

there are too many colors. it's possible to color the main ones,
note: users still can still set custom colors with hex codes

 %#ACBDEF% Colored Text Hex %%

theming those colors would open a can of worms because this

 %violet% !~green; Combine With Text Color ~! %%

results in this

<span style="text-decoration-line:underline;text-decoration-color:green;color:violet">Combine With Text Color</span>

the only exception i did is coloring grey and #039205 because they're used in an official page

i added a regex for pages ending in /raw , pages starting with https://rentry.co/static/ and pages on the subdomain export3.rentry.co so they default to prefers-color-scheme (device theme) instead of @lightFlavor (default light theme because the way dark theme is set is by adding a class to the root but without it it's light theme, and these pages don't have a toggle button for dark theme but they follow the device theme instead)
also i think it's possible to only keep @base and @text only in the catppuccin mixin in that section but i'm not sure if i should do it

~~the accent color was never used~~ i forgot that ::selection{background-color: fade(@accent-color, 30%);} exists

the syntax highlighting is using CodeMirror. and while there is a theme for it, it's not present in tips-and-tricks.md. also i think its outdated. so i themed everything manually (according to the default light theme css)

🗒 Checklist 🗒

I have read and followed Catppuccin's submission guidelines.
I have made a new directory underneath /styles/<name-of-website> containing the contents of the /template directory.
- I have ensured that the new directory is in lower-kebab-case.
- I have followed the template and kept the preprocessor as LESS.
I have made sure to update the
userstyles.yml
file with information about the new userstyle.
I have included the following files:
- catppuccin.user.css - all the CSS for the userstyle, based on the
  template.
- preview.webp - composite image of all four individual flavor screenshots (taken with the default accent color of mauve) stitched together, generated via Catwalk.

uncenter · 2024-08-15T16:44:31Z

i didn't set the title as Feat/rentry. was that autogenerated? anyway i fixed it.

GitHub autofills it from the name of your branch.

uncenter

In general, a lot of missed nesting and not very organized. I recommend grouping things into semantic sections based on where/what pages elements appear on, and utilize blank lines between selectors to make it easier to read and signal a shift in the content.

uncenter · 2024-08-15T16:46:18Z

styles/rentry/catppuccin.user.css

+      color: @mauve;
+    }
+    .highlight .gt {
+      color: @sapphire;
+    }
+    .highlight .kt {
+      color: @pink;
+    }
+    .highlight .na {
+      color: @yellow;
+    }
+    .highlight .no {
+      color: @peach;
+    }
+    .highlight .ni {
+      color: @subtext0;
+    }
+    .highlight .ne {
+      color: @maroon;
+    }
+    .highlight .nl {
+      color: @yellow;
+    }
+    .highlight .nn {
+      color: @mauve;
+    }
+    .highlight .w {
+      color: @subtext1;
+    }
+    .highlight .sd {
+      color: @blue;
+    }
+    .highlight .se {
+      color: @peach;
+    }
+    .highlight .c,
+    .highlight .ch,
+    .highlight .cm,
+    .highlight .cpf,
+    .highlight .c1,
+    .highlight .cs {
+      color: @overlay2;
+    }
+    .highlight .k,
+    .highlight .kc,
+    .highlight .kd,
+    .highlight .kn,
+    .highlight .kp,
+    .highlight .kr,
+    .highlight .nb,
+    .highlight .nt,
+    .highlight .sx,
+    .highlight .bp {
+      color: @maroon;
+    }
+    .highlight .o,
+    .highlight .m,
+    .highlight .mb,
+    .highlight .mf,
+    .highlight .mh,
+    .highlight .mi,
+    .highlight .mo,
+    .highlight .il {
+      color: @teal;
+    }
+    .highlight .gh,
+    .highlight .gp {
+      color: @sapphire;
+    }
+    .highlight .s,
+    .highlight .sa,
+    .highlight .sb,
+    .highlight .sc,
+    .highlight .dl,
+    .highlight .s2,
+    .highlight .sh,
+    .highlight .s1 {
+      color: @green;
+    }
+    .highlight .nc,
+    .highlight .nf,
+    .highlight .fm {
+      color: @sky;
+    }
+    .highlight .nd,
+    .highlight .ow {
+      color: @mauve;
+    }
+    .highlight .nv,
+    .highlight .ss,
+    .highlight .vc,
+    .highlight .vg,
+    .highlight .vi,
+    .highlight .vm {
+      color: @lavender;
+    }
+    .highlight .si,
+    .highlight .sr {
+      color: @red;
+    }


Nesting please.

Also please make sure you haven't just taken their colors and made them Catppuccin- syntax highlighting needs to match how our style guide is, so look at how code looks in (paste it in to) VS Code or Neovim or whatever your editor is and try to match the classes as well as you can.

i tried to match the colors in 1e1ec94 (#1198) with the vscode(/ium) theme and it became more accurate however there are things i can't solve such as special characters ((){}.<>=*:;) being in the same color due to using the same class (.p) (style-guide.md says that symbols and atoms(?) should be red so i made it red)

if you notices any issues with the syntax highlighting please point them out

uncenter · 2024-08-15T16:47:42Z

styles/rentry/catppuccin.user.css

+    .admonition-title::before,
+    .admonition.warning > .admonition-title::before,
+    .admonition.danger > .admonition-title::before {
+      filter: none !important;
+    }
+    .admonition.info,
+    .admonition.hint,
+    .admonition.tip {
+      color: @blue;
+      background: fade(@blue, 25%);
+    }
+    .admonition.info > .admonition-title::before,
+    .admonition.hint > .admonition-title::before,
+    .admonition.tip > .admonition-title::before {
+      @svg: escape(
+        '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="@{blue}" viewBox="0 0 16 16"><path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13h-5a.5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm3 8.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1-.5-.5z"/></svg>'
+      );
+      content: url("data:image/svg+xml,@{svg}");
+    }
+    .admonition.note,
+    .admonition.important {
+      color: @green;
+      background-color: fade(@green, 25%);
+    }
+    .admonition.greentext {
+      color: @green;
+      background-color: fade(@yellow, 25%);
+    }
+    .admonition.note > .admonition-title:before,
+    .admonition.important > .admonition-title:before,
+    .admonition.greentext > .admonition-title:before {
+      @svg: escape(
+        '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="@{green}" viewBox="0 0 16 16"><path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm8.93 4.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM8 5.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/></svg>'
+      );
+      content: url("data:image/svg+xml,@{svg}");
+    }
+    .admonition.warning {
+      color: @yellow;
+      background-color: fade(@yellow, 25%);
+    }
+    .admonition.warning > .admonition-title:before,
+    .admonition.caution > .admonition-title:before,
+    .admonition.attention > .admonition-title:before {
+      @svg: escape(
+        '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="@{yellow}" viewBox="0 0 16 16"><path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/></svg>'
+      );
+      content: url("data:image/svg+xml,@{svg}");
+    }
+    .admonition.danger {
+      color: @red;
+      background-color: fade(@red, 25%);
+    }
+    .admonition.danger > .admonition-title:before,
+    .admonition.error > .admonition-title:before {
+      @svg: escape(
+        '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="@{red}" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/></svg>'
+      );
+      content: url("data:image/svg+xml,@{svg}");
+    }


Some nesting would be nice here.

this one should be solved with da5f71b

uncenter · 2024-08-15T16:48:11Z

styles/rentry/catppuccin.user.css

+    // editor
+    .CodeMirror-line::selection,
+    .CodeMirror-line > span::selection,
+    .CodeMirror-line > span > span::selection {
+      background-color: fade(@accent-color, 30%);
+    }
+    .cm-formatting-admonition {
+      color: @yellow;
+    }
+    .cm-mark {
+      color: @yellow;
+    }
+    .cm-link {
+      color: @blue;
+    }
+    .cm-url {
+      color: @sky;
+    }
+    .cm-formatting-toc {
+      color: @mauve;
+    }
+    .cm-variable-2 {
+      color: @green;
+    }
+    .cm-keyword {
+      color: @pink;
+    }
+    .cm-meta {
+      color: @subtext0;
+    }
+    .cm-comment {
+      color: @pink !important;
+    }
+    .cm-hr {
+      color: @surface2;
+    }
+    // markdown
+    .cm-header {
+      color: @text;
+    }


Same thing with my other syntax highlighting comment, make sure it actually resembles our syntax highlighting ports.

the style guide is focused on code based syntax highlighting (terminals, code editors) but these are colors for (afaik) rentry specific syntax (i don't know other languages that support something specific like ==marks== or how i am supposed to theme a [TOC] element). i guess the closest thing would be markdown but this seems like it's own thing

uncenter

Delete/danger buttons (.btn-danger) are incorrectly themed by the default button styling, you'll want to add a section for .btn-danger below the .btn part.

EDIT: .btn-success also has the same issue, an eaxmple of this button is the Save button.

thismoon · 2024-08-15T17:28:31Z

how do i fix Unoptimized SVG detected (catppuccin/optimized-svgs)? do i put svgs into svgo? was this mentioned somewhere in the docs? i only found it in this js file (which does use svgo)

edit: i did put the svgs into svgo, and the issue is still there. are there specific arguments that i should use?

off topic

ghost · 2024-08-15T18:14:00Z

how do i fix Unoptimized SVG detected (catppuccin/optimized-svgs)?

@thismoon your supposed to add fill="@{blue}" to path and not svg like in the docs

thismoon · 2024-08-15T18:27:10Z

@thismoon your supposed to add fill="@{blue}" to path and not svg like in the docs

thanks for the suggestion @somerand0mcat, but it didn't fix the issue

GenShibe · 2024-08-15T19:16:21Z

@thismoon your supposed to add fill="@{blue}" to path and not svg like in the docs

thanks for the suggestion @somerand0mcat, but it didn't fix the issue

run deno task lint:fix and it'll optimize the svgs for you

thismoon · 2024-08-15T19:42:42Z

run deno task lint:fix and it'll optimize the svgs for you

thanks! this fixed it. i forgot about this part in the docs

uncenter · 2024-08-15T20:09:33Z

how do i fix Unoptimized SVG detected (catppuccin/optimized-svgs)?

@thismoon your supposed to add fill="@{blue}" to path and not svg like in the docs

This is not true Omar. Some SVGs can be themed by setting the fill color for the whole image, others (like the one in the docs) only need/should have the fill color set for a specific path.

uncenter · 2024-08-15T20:10:58Z

run deno task lint:fix and it'll optimize the svgs for you

thanks! this fixed it. i forgot about this part in the docs

Glad you figured it out. It can be confusing, are you in the Catppuccin Discord? We have a channel there exclusively for userstyles and userstyles help. Happy to answer any questions you ever have there!

thismoon · 2024-08-15T20:24:26Z

Glad you figured it out. It can be confusing, are you in the Catppuccin Discord? We have a channel there exclusively for userstyles and userstyles help. Happy to answer any questions you ever have there!

yeah im in the discord server, i didn't know there was a forum thread for userstyles. will ask questions there next time. thanks

isabelroses · 2024-08-21T19:45:23Z

styles/rentry/catppuccin.user.css

+==/UserStyle== */
+
+@-moz-document domain('rentry.org'), domain('rentry.co') {
+  :root.dark-mode {


Suggested change

:root.dark-mode {

.dark-mode {

ghost

nice work! next time you should run deno task lint:fix && deno task format to both fix any lint errors and format the code

scripts/userstyles.yml

uncenter · 2024-08-22T14:02:49Z

styles/rentry/catppuccin.user.css

Looking much much better. Do you mind adding comments for the types of tokens? E.g. constants, variables, keywords, strings, punctuation, operators, comments, etc.

Also, on those few remaining innaccuracies - I would go side by side with the playground on https://shiki.style/ (scroll down a bit, change the language to something like JavaScript and the theme to Catppuccin ) and compare the Shiki highlighting to how it looks on Rentry (paste the demo code Shiki has into a Rentry markdown code block).

Co-authored-by: uncenter <[email protected]>

thismoon · 2024-08-22T16:39:17Z

thismoon dismissed isabelroses’s stale review

what? i didn't do that

uncenter · 2024-08-22T16:42:22Z

thismoon dismissed isabelroses’s stale review

what? i didn't do that

It's automatic when you push a new commit, ensures that an approval doesn't stay after something has changed.

thismoon · 2024-08-22T16:47:09Z

I think i messed it up by renaming the branch
i will open a new pr i guess?

uncenter · 2024-08-22T16:48:07Z

Ahah you don't need to rename the branch in the future. That doesn't have any effect outside of this PR so it doesn't matter what the name of the branch is as long as you can find it!

thismoon added 2 commits August 15, 2024 17:05

feat(rentry): init

c6e4b34

fix(rentry): table background colors

afd9dea

thismoon requested a review from a team as a code owner August 15, 2024 16:40

thismoon changed the title ~~Feat/rentry~~ feat(rentry): init Aug 15, 2024

uncenter requested changes Aug 15, 2024

View reviewed changes

thismoon added 2 commits August 15, 2024 17:53

fix(rentry): fix linting issues

dc7eed3

fix(rentry): add nesting

da5f71b

thismoon added 4 commits August 15, 2024 18:29

fix(rentry): remove extra "transparent"

7f91058

fix(rentry): optimize svgs

921c184

fix(rentry): duplicate .highlight selector

2c2ff14

fix(rentry): unthemed danger and success buttons

4657b4a

fix(rentry): svg fill attribute placement

e6a35e5

fix(rentry): selection background color in the code editor

1509743

fix(rentry): linting issues 2

8a9961b

fix(rentry) syntax highlighting colors

1e1ec94

thismoon requested a review from uncenter August 15, 2024 20:51

uncenter requested a review from isabelroses August 21, 2024 19:38

isabelroses previously approved these changes Aug 21, 2024

View reviewed changes

ghost approved these changes Aug 22, 2024

View reviewed changes

uncenter requested changes Aug 22, 2024

View reviewed changes

scripts/userstyles.yml Outdated Show resolved Hide resolved

uncenter reviewed Aug 22, 2024

View reviewed changes

fix(rentry): update rentry.co's name in userstyles.yml

6ed420d

Co-authored-by: uncenter <[email protected]>

thismoon dismissed isabelroses’s stale review via 6ed420d August 22, 2024 16:37

fix(rentry.co): update name (rentry -> rentry.co)

2329770

thismoon closed this Aug 22, 2024

thismoon deleted the feat/rentry branch August 22, 2024 16:46

thismoon mentioned this pull request Aug 22, 2024

feat(rentry.co): init #1227

Merged

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(rentry): init #1198

feat(rentry): init #1198

thismoon commented Aug 15, 2024 •

edited

Loading

uncenter commented Aug 15, 2024

uncenter left a comment

uncenter Aug 15, 2024

uncenter Aug 15, 2024

thismoon Aug 15, 2024

uncenter Aug 15, 2024

thismoon Aug 15, 2024

uncenter Aug 15, 2024

thismoon Aug 15, 2024

uncenter left a comment •

edited

Loading

thismoon commented Aug 15, 2024 •

edited

Loading

ghost commented Aug 15, 2024 •

edited by ghost

Loading

thismoon commented Aug 15, 2024

GenShibe commented Aug 15, 2024

thismoon commented Aug 15, 2024

uncenter commented Aug 15, 2024

uncenter commented Aug 15, 2024

thismoon commented Aug 15, 2024

isabelroses Aug 21, 2024

ghost left a comment

uncenter Aug 22, 2024

uncenter Aug 22, 2024

thismoon commented Aug 22, 2024

uncenter commented Aug 22, 2024

thismoon commented Aug 22, 2024

uncenter commented Aug 22, 2024

feat(rentry): init #1198

feat(rentry): init #1198

Conversation

thismoon commented Aug 15, 2024 • edited Loading

🎉 Theme for Rentry 🎉

💬 Additional Comments 💬

🗒 Checklist 🗒

uncenter commented Aug 15, 2024

uncenter left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

uncenter left a comment • edited Loading

Choose a reason for hiding this comment

thismoon commented Aug 15, 2024 • edited Loading

ghost commented Aug 15, 2024 • edited by ghost Loading

thismoon commented Aug 15, 2024

GenShibe commented Aug 15, 2024

thismoon commented Aug 15, 2024

uncenter commented Aug 15, 2024

uncenter commented Aug 15, 2024

thismoon commented Aug 15, 2024

Choose a reason for hiding this comment

ghost left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

thismoon commented Aug 22, 2024

uncenter commented Aug 22, 2024

thismoon commented Aug 22, 2024

uncenter commented Aug 22, 2024

thismoon commented Aug 15, 2024 •

edited

Loading

uncenter left a comment •

edited

Loading

thismoon commented Aug 15, 2024 •

edited

Loading

ghost commented Aug 15, 2024 •

edited by ghost

Loading