New Gist JS / CSS Feature -- Add Rule

[Aetherinox]

Hey,

The newest CSS / JS feature for gists is great. I've almost got it integrated, however, I noticed a rule that is missing in the gist CSS which Github Gists do use.

It is related to IFRAME

Github Gist CSS

.gist iframe.render-viewer {
	width: 100%;
	height: 480px;
	overflow: hidden;
	border: 0
}

OpenGist CSS

.opengist-embed audio,
.opengist-embed canvas,
.opengist-embed embed,
.opengist-embed iframe,
.opengist-embed img,
.opengist-embed object,
.opengist-embed svg,
.opengist-embed video {
	display: block;
	vertical-align: middle
}

When I integrate the code into my Obsidian vault, I can actually see my Gist in a widget, however, the iframe is not set to 100%.

---

Here is a few screenshots to show how it presently looks:

OpenGist Gist Example

And this is how it looks if I use a Github Gist:

Github Gist Example

So in short, if we can just add some type of iframe css rule to set width: 100%, that will be perfect.

It's not a super high priority, because on my end, I corrected it by just adding

container.setAttribute('width', '100%');

[Aetherinox]

Sorry, one more addition. The scrollbar when integrated is right up on the paste, and makes it especially hard to work with if you have a single line that is scrollable.

If there's any way to add a padding (or whatever you deem looking better).

.opengist-embed :is(:where(.dark) .dark\:border-gray-800) {
    padding-bottom: 20px;
}

Is the CSS class I used with inspect element

[Aetherinox]

Sorry to bug again, one more thing.

In my Obsidian program, I implemented a Theme selector to switch between Dark and Light. It works great, however, on the light theme, it doesn't use an actual defined white color. The codeblock background is transparent, so if your background is dark, then you get a dark background, and causes the text to also be dark.

Only thing that needs done here is just actually defining a light colored background-color.

The above example is just a standard HTML file with the embedded code provided by OpenGist, and then I forced the body to have a dark color via CSS.

---

99% of the new feature works great, just minor CSS tweaks need done.

[Aetherinox]

Alright, last one (I promise). And again, this is your program, so you choose what is best where, but I thought I'd bring this up.

---

In the screenshot, the top is Github, the bottom is your OpenGist.

Github appears to place the scrollbar right under the text. And then below that is the little "Hosted by Github". Opengist does the scrollbar at the very bottom, so the entire block can be scrolled.

If you look at me scrolling the bottom one (OpenGist), you'll notice the header background color abruptly stops after Hosted by Opengist, and then inherits whatever background color the page is using.

But with the top Github version, the only thing scrollable is the pasted text, so the Hosted with Github bar never moves, and there's no abrupt change in the background color.

Not a huge deal, but something to bring up.

Second and last issue, and again, this one is really just because the program Obsidian did this, and you couldn't have known unless you used the program. But your Opengist embedded block is a codeblock in the program obsidian, to make your paste show on my Obsidian.md note, I add the code:

```opengist
https://path/to/opengist/page
```

Obsidian takes that codeblock, and replaces it with the OpenGist page using an iframe.

Since it's technically a codeblock, if you look to the top right of the Opengist block in my screenshot, you'll see this "pencil" icon. That is so you can edit the code block. And it's overlapping the Opengist link you added labeled View Raw.

In my gif screenshot, I hovered my mouse over the elements.

---

Sorry to bring all these up. Just thought I'd point them out. I really do love the feature, and it's a huge benefit. So don't think I'm just griping lol.

I'm releasing an OpenGist plugin for the program Obsidian.md, and if others download it for their own install, I can already tell people are going to gripe about this stuff.

If you want to be able to see what I'm talking about instead of flying blind. You can install Obsidian.md and then install my plugin at https://github.com/Aetherinox/obsidian-opengist

They're easy to use.

[thomiceli]

Thanks for your feedback, definitely interesting :)

I will look into this, but some help would be welcome since i'm far from being a good frontend guy

[Aetherinox]

Sure thing, sorry to flood.

In a perfect world, I would make edits locally, and build my own running copy of OpenGist so that I can physically see the changes, and then test the results.

The not so perfect part is using Go. I've only utilized it in one project a long time ago. I do JS, TS, PHP, Lua and C#. Go is a whole new beast.

I'll have to look up some guides online on grabbing the files and creating an environment so that I can self host and make changes.

I got OpenGist to integrate perfectly in Obsidian, just a few minor tweaks left.

Edit. Alright, I got go installed, got the proper commands to build, and I can build the exe, just need to see why it's throwing

11:10AM FTL Failed to open manifest.json error="open manifest.json: The system cannot find the file specified."

Didn't see a manifest.json anywhere, and it wasn't generated on build.

Also checked the make file, but all I see are the instructions for a Linux build. I'm looking for a Windows build.

[Aetherinox]

Nevermind, I figured it out from reading through your makefile and your git workflow,

Just dropping this here as notes.

git clone --branch dev-1.7 https://github.com/thomiceli/opengist.git
cd opengist
npm ci
npx vite -c public/vite.config.js build
npx postcss "public/assets/embed-*.css" -c public/postcss.config.js --replace
go build -tags fs_embed -o opengist.exe
opengist.exe --config config.yml

[thomiceli]

I recently added a page explaining how to run Opengist with a dev env

https://github.com/thomiceli/opengist/blob/dev-1.7/docs/contributing/run-development.md

Also it would be better to make changes starting from the dev-1.7 branch (but i think i will change the git workflow somewhere near the future)

[Aetherinox]

Thanks. Alright I'll go with the 1.7 branch. Wasn't planning on doing edits just yet. Getting used to the environment.

[thomiceli]

Im guessing you dont have Make on your Windows, I would suggest using the docker dev environment :) (the commands are in the Makefile)

[Aetherinox]

Oddly enough, I do have make (through chocolatey.).

But usually when I build, I'm much more familiar with Linux. I use Windows because you know.... monopoly. and compatibility. But I don't have a full dev env set up on my Linux install.

But for some reason, make was screaming about not being able to find npm which I need to investigate. npm is in my windows env variables, and I can access it just fine.

Cleaning up build artifacts...
Installing NPM dependencies...
/usr/bin/sh: line 1: /cygdrive/e/Libraries/nodejs/npm: cannot execute: required file not found
Error: Failed to install NPM dependencies.
make: *** [Makefile:12: install] Error 1

So I need to see what is up with that, because it's actually printing the correct location (minus /cygdrive/), and npm is in there.

I use make for a few other projects (non-npm / node) and it works fine for those.

Windows is just a pain in the ass with this type of stuff. Linux I can run around freely and never have issues.

[Aetherinox]

Alright, I've got a feel for things now. I'll be a bit to work through and make the changes.

I had to finish the plugin today and make sure there was nothing else. Other than what I listed above, the rest worked perfect.

The only other thing I noticed different between Github GIsts and OpenGist, is Github having the ability to call a specific Gist in a bundle with gist.github.com/username/GIST_ID?file=GIST_FILE and then it will present json for that specific file.

But until I get completely familiar with this setup, that'll have to wait.

The ability to have dark mode is enough to be happy about.