Can this theme use TypeScript? (For utterances dymanic color change)

[im-coder-lg]

Got a question. Can I use TypeScript here? Because, in #302, I got a question, how to change Utterances color dynamically as the theme color changes. So, how can I get Typescript here if I can, or if I can't, how to get it here?

[sylhare]

Allow, as of now it is not possible, you could use a javascript script like we did for the dark-theme, if utterances doesn't offer the possibility.

[danisztls]

That reminded me that I am postponing updating Cusdis integration to support this: https://github.com/djyde/cusdis/issues/59#issuecomment-835123606

[im-coder-lg]

Well, any kind of plugins for that? Because, I found a method to change Utterances color dynamically with TS(TypeScript)

[danisztls]

TypeScript compiles to JavaScript. And you can rewrite any TypeScript to JS even though it may be more verbose or difficult.

[im-coder-lg]

So, I will add links to two files. Can I convert them to JS from TS?

[im-coder-lg]

And how?

[sylhare]

Well, any kind of plugins for that? Because, I found a method to change Utterances color dynamically with TS(TypeScript)

Do you have the link to that typescript code?

[im-coder-lg]

it's on #302, some guy named Tyson Williams' Blog, the link is there.

[im-coder-lg]

This link: https://tysonwilliams.coding.blog/2021-06-21_lock_hunter

Originally posted by @rsnpj in https://github.com/sylhare/Type-on-Strap/issues/302#issuecomment-879621029

[sylhare]

Yes that's a post article where it is indeed working, however you talked about Typescript code in utterances to allow that. Do you have a link to the procedure with the typescript code to enable utterances to auto change theme?

[im-coder-lg]

In that blog, at the end, he gave some link to edit his files. I went there, went to the root directory and went into the .codedoc directory. Then, I got into components or something like that and checked it there. I will post the link to the utterances dir here. One min...

[im-coder-lg]

Is that a glitch?

[sylhare]

I guess so I deleted it

[im-coder-lg]

Ok...

[im-coder-lg]

The TS code was short, like less than 10 lines too.

[sylhare]

In that blog, at the end, he gave some link to edit his files. I went there, went to the root directory and went into the .codedoc directory. Then, I got into components or something like that and checked it there. I will post the link to the utterances dir here. One min...

Where is that code? I can't find it. Can you paste it?

[im-coder-lg]

This one: https://github.com/TysonMN/tyson-williams-blog/tree/master/.codedoc/components/utterances

[im-coder-lg]

It has two files, a normal TS file with those lines and another style file.

[sylhare]

Humm then maybe we can do it via js the same we did for cusdis:

I paste it here for ref:

import { themedStyle } from '@connectv/jss-theme';
import { CodedocTheme } from '@codedoc/core';
import { ThemedComponentThis } from '@connectv/jss-theme';
import { RendererLike } from '@connectv/html';

import { UtterancesStyle } from './style';

export interface UtterancesOptions {
  theme: string;
}

export function Utterances(
  this: ThemedComponentThis,
  options: UtterancesOptions,
  renderer: RendererLike<any, any>,
) {
  const classes = this.theme.classes(UtterancesStyle);
  let theme = 'github-light';
  if (options && options.theme && options.theme !== '') theme = options.theme;
  const attributes = {
    'data-repo': 'TysonMN/tyson-williams-blog',
    'data-issue-term': 'pathname',
    'data-label': '💬comments',
    'data-theme': theme,
    'crossorigin': 'anonymous'
  }
  return <div class={`${classes.utterancesTransparentIframe}`}>
           <script src='https://utteranc.es/client.js'
                   {...attributes}
                   async />
         </div>
}

export const UtterancesStyle = themedStyle<CodedocTheme>(_ => ({
utterancesTransparentIframe: {
   '& iframe.utterances-frame': { background: 'transparent' },
 }
}));

[im-coder-lg]

How do we do that? New to JS that's why.

[im-coder-lg]

Moreover, we need that codedoc dependency

[im-coder-lg]

lemme try that same thing in my gitpod.

[im-coder-lg]

yo @sylhare check this: https://3000-salmon-swallow-p0pcmux1.ws-us11.gitpod.io/2021-06-21_lock_hunter basically I forked the repo and opened it in my gitpod. Then, got the dependencies via codedoc and voila! this is how it gotta work.

[sylhare]

Basically when you change the theme, you would need to load a new div with the utterances comments but with the new theme in theme. We don't need codedoc as it is an equivalent to jekyll to generate the blog. We cqn just copy how it is done.

Or we could try to see if changing manually the theme works like with cusdis.

[im-coder-lg]

yup, maybe? did you check the gitpod link i put above?

[im-coder-lg]

okay, i am pausing the gitpod workspace, but will open it later. tired as of now and got some work too. I will open it soon AND give access to you and @danisztls because I think he is a JavaScript expert.

[danisztls]

Wow! So many dependencies.

[danisztls]

okay, i am pausing the gitpod workspace, but will open it later. tired as of now and got some work too. I will open it soon AND give access to you and @danisztls because I think he is a JavaScript expert.

Nah. I can hack things when I put time and effort but I never used TypeScript.

[im-coder-lg]

Well, I think TS is same as JS. Need your idea too tho.

[sylhare]

Anyway jekyll is a static site, so let's not create too much code for something that should go to utterances. @coder-lg You can create a ticket in their project to give a way to handle dark / light theme changes with data-theme.

[danisztls]

TS is a superset of JS, it has more language features (syntactic sugar) aimed at OOP and higher abstraction but they are close.

[danisztls]

Look here: https://github.com/sylhare/Type-on-Strap/blob/05926f38caf0c7a90406b141f865915529482630/_includes/social/utterances.html

And here: https://github.com/sylhare/Type-on-Strap/blob/master/assets/js/partials/dark-mode.js

Instead of setting Utterances theme from site config you can write a script to init it. You can listen for changes on session storage and get the theme data that dark mode script set.

But what I recommend is that you open an issue on the project as it current design is bad. It would a lot simpler and easier if Utterances used CSS variables for theming. Also, unless your site looks similar to Github, the comments section will have an alien look with different colors and fonts.

[im-coder-lg]

But what I recommend is that you open an issue on the project as it current design is bad.

Yup, since I wanted to know about it, I opened one at utterance/utterances and noticed that others also asked for it.

[im-coder-lg]

But they use SCSS which I think is a form of CSS. Why do we need only CSS?

[danisztls]

@coder-lg SCSS is not dynamic. It compiles to CSS. By having multiple CSS data structs (aka themes) you can use JS and/or prefers-color-scheme to set theme on the fly. Look at _variables.scss for reference. The implementation of Sass that Jekyll (and most others) use don't even work with themes. Try using a Sass variable as a value for a variable it would be interpreted as a literal.

[im-coder-lg]

I did not understand that. But can you change it dynamically?

[im-coder-lg]

I think it is because of coding.blog. Because, it is a domain hoster and uses TS

[im-coder-lg]

moreover, it was actually a plugin or something of sorts by Connect Platform, the maker of coding.blog. I asked Tyson Williams and he told that it was a prebuilt plugin that sends multiple requests and doesn't use CSS. It uses prebuilt themes of Utterances and changes it like that. That code @sylhare put above was the final edition. The original code was in the src directory.

[im-coder-lg]

https://github.com/TysonMN/tyson-williams-blog/issues/33#issuecomment-881801786 If you look at that comment, he says that he adds the code to his markdown and then it gets extracted to a separate component. I signed up for a domain as codedoc to check how it works. Will see that and report here. Till then, I would close this issue. When I reopen, I will give the result I got.

[TysonMN]

I am not very good at web programming, so I can't directly contribute to this conversation. @loreanvictor is the lead developer of CODEDOC. Many he can help you understand how CODEDOC's DarkLight component works.

[im-coder-lg]

I understood that, @TysonMN but the dilemma is, how to convert TS to JS? This is a Jekyll site that's why.

[TysonMN]

My understanding of TS is that it can be used anywhere JS is used because part of the build process is transpiling TS to JS.

[sylhare]

I link the utterances issue that you created here: https://github.com/utterance/utterances/issues/549 I'd rather not try to hack the codedoc typescript component to make it work here.

[im-coder-lg]

So, almost a month since I got the CODEDOC blog, and it is really dynamic. It has two files, a style file for the styling and an index file where you add the repo, label, issue name, and theme(in config?), so, if we try recreating that with HTML, JS and TS, and add some more configuration in the config, it might work, right?

[im-coder-lg]

Suggestion: using JSX, because JSX is JS and HTML combined, might work.

[sylhare]

I will close this one for now.