githubnext / blocks

A set of files to use as input for Blocks.

GitHub Next

This repo is a public point of contact for the GitHub Next team!

• For more about us, visit githubnext.com
• Join us on the GitHub Next Discord! A space for discussing our projects, and connecting with other folks who are passionate about the future of software development and developer experiences.

✌️❤️

blocks's Issues

design feedback

👍

Annotated component

Commit preview is misleading

I programatically updated a configuration file and when I saw the commit preview I thought that I'd deleted the whole file except the first line

Upon closer inspection, the first line changes, and lines 28 onwards have been removed. This would have been more apparent if unchanged lines were included in the diff (without + or -)

design feedback

👍

Annotated component

What is this?

I don't know about the padding

https://composable-github.vercel.app/?owner=githubnext&repo=composable-github-test&path=Button.jsx&viewerOverride=annotate-react&debug=1

Use of <details> and <summary> tags in MD files not working

GitHub MD preview currently supports the display/action of the <details> and <summary> tags, but the Beta MD Blocks Editor does not show these as expected:

https://blocks.githubnext.com/paulhibbitts/cmpt-363-222-pages-blocks/blob/main/ux-techniques-guide-no-divs.md?blockKey=githubnext__blocks-examples__markdown-block&fileRef=

Same file on GitHub:
https://github.com/paulhibbitts/cmpt-363-222-pages-blocks/blob/main/ux-techniques-guide-no-divs.md

Thanks very much,
Paul

LFS files and symlinks don't work well

• For large files stored in LFS props.content is a pointer to the actual blob and not the content. It would be nice if there is a flag indicating such cases (or other tooling to deal with such files).
• For symbolic links to files props.content is the content of the target. Symbolic links to directories seems to break the interface - it gets stuck with the loading message and there is an error in the console

(reported in Discord)

What is this?

I don't know about the padding

<iframe src="http://localhost:3000/?owner=githubnext&repo=composable-github-test&path=Button.jsx&viewerOverride=annotate-react&debug=1" />

List selection issues with the default Markdown block

With the default Markdown block, It seems that having text selected and expanding the selection to include a list entry item totally breaks the current selection by expanding it to the top of the document.

Here is a video repro:

selection.mp4

MD image with class not displaying

I use Docsify.js.org to display Markdown files, and when including a class the image does not display as expected (but was working in a standard GitHub repo, and as included below):
![UX - User Experience](https://github.com/paulhibbitts/cmpt-363-222-pages-blocks/raw/main/images/12650723674_d5c85af332_k.jpg ':class=banner-image')

Thanks very much,
Paul

Help tired developers by making the URL swap step to use Blocks super obvious

Problem:

I spent a while looking around trying to figure out how to use blocks on repos that were not the demo repo.

Why I got confused:

The words that were supposed to tell me what to do were
We've created an app at: [blocks.githubnext.com](https://blocks.githubnext.com/) that lets you view your files and repositories with different Blocks.

Unfortunately, I had attempted to try out Blocks when I had some time to play around with it, which was late at night after my brain had stopped working.

I misinterpreted the words above to mean "here is the URL to the demo" instead of "swap out that base URL for the normal github.com base url that you're used to in any repository". This caused me to keep looking for instructions elsewhere.

Suggestion:

Make it more explicit what steps to take to try Blocks on your own repository by adding another sentence.

At the end of this sentence:
We've created an app at: [blocks.githubnext.com](https://blocks.githubnext.com/) that lets you view your files and repositories with different Blocks.
insert the following:
To try out blocks, swap out https://blocks.githubnext.com/ for https://github.com/ in the URL to a repo's README.

<BlockComponent> in Markdown is rendered, should stay code

Wanted to showcase the custom block I created and how to embed it in the README of the repo.
With the below Markdown I would expect the BlockComponent to be rendered once, and once the code being displayed. Instead the BlockComponent inside the Markdown code block is also interpreted.
See: https://blocks.githubnext.com/duerrsimon/gradio-block/blob/main/README.md?blockKey=githubnext__blocks-examples__markdown-block&fileRef=

<BlockComponent block={{"owner":"duerrsimon","repo":"gradio-block","id":"hfspaces-block","type":"file"}} context={{"repo":"gradio-block","owner":"duerrsimon","path":"example/hf.yml","sha":"main","file":"README.md"}} />

Demo

<BlockComponent block={{"owner":"duerrsimon","repo":"gradio-block","id":"hfspaces-block","type":"file"}} context={{"repo":"gradio-block","owner":"duerrsimon","path":"example/hf.yml","sha":"main","file":"README.md"}} />

consider open-sourcing Blocks platform to take contributions

Raised in Discord

Divs causing various display issues in MD files

When Divs are included in MD files the display the file seems to be severely impacted. For example, this file (scroll down):

https://blocks.githubnext.com/paulhibbitts/cmpt-363-222-pages-blocks/blob/main/home.md?blockKey=githubnext__blocks-examples__markdown-block&fileRef=

By removing the divs, the same content is rendered as basically expected:
https://blocks.githubnext.com/paulhibbitts/cmpt-363-222-pages-blocks/blob/main/home-no-divs.md?blockKey=githubnext__blocks-examples__markdown-block&fileRef=

If additional info is helpful please let me know.

Thank you,
Paul

support passing parameters to BlockComponent tags in Markdown

E.g. to control the display of a file, like showing different versions of an install command for npm, yarn, etc.

Inconsistencies in Markdown block when compared to GitHub

There are currently a few inconsistencies for displaying the Markdown content in Blocks vs how it is rendered by GitHub itself.

This issue should help listing these inconsistencies.
Be aware that those are only the ones I so far have found. There may be more...

I found the issues while looking at the README.md for one of my repositories (Andre601/AdvancedServerList) through blocks.githubnext.com

1. <img> display ignores width/height and also has weird spacing

<img> tags used in the README don't have their height attributes ignored, making the SVG in my case default to its default sizing.

Additionally are the images themself separated into individual lines with huge spaces, while on GitHub they display next to each other (As I intended).

Screenshots:

• Blocks:
  
• GitHub:
  

2. Reference Links are not linking (While still being highlighted)

Links using the Reference link format ([text][link_name]) don't actually make an embedded link. Instead is the text highlighted in blue, while the [link_name] is shown at the end (Also highlighted).

Screenshots:

• Blocks:
  
• GitHub:
  

3. Tables are not rendered

Tables aren't rendered at all.

Screenshots:

• Blocks:
  
• GitHub:
  

blocks crashes on empty repos

Reported in Discord, see https://blocks.githubnext.com/docimin/blocks/blob/master

Embedded iFrames are cut off by Commits panel.

When the Commits panel is visible the right-hand side of embedded iFrame content is cut off, as shown below:

Embedded images, however, are automatically resized:

UPDATE: This is also the case if the width of the Browser window is reduced.

Thanks very much,
Paul

consider supporting Clipboard API

feedback from @HiDeoo:

I tried adding a copy to the clipboard button but due to the iframe setup, it looks like it's not possible to use the Clipboard API as we get a DOMException: The Clipboard API has been blocked because of a permissions policy applied to the current document.. The iframe allow attribute is currently set to camera;microphone;xr-spatial-tracking. Is there any plan / thoughts regarding adding at least clipboard-write (clipboard-read may be too much) to the list of allowed permissions? (ref: https://web.dev/async-clipboard/#permissions-policy-integration - cross-origin syntax: https://stackoverflow.com/a/69741484/1945960)

Feedback: this should be an internal tool for GitHub to develop its own supported products

GitHub Blocks allows people to add all kinds of JavaScript and HTML to MySpacify their page at http://github.com/user/repo

Here's why I don't support releasing this product for general availability.

---

Safety

If you can inject interactive elements into a page there is more risk of injecting bad elements. When I visit a github.com/... page, I am expecting that GitHub controls at least the formatting of that page. That is why GitHub hosts customer-generated webpages on github.io.

Portability

Any kind of github.com–myspace-app is only runnable on GitHub.com. Even if GitHub open sourced its full vocabulary like Slack Blocks did, GitLab and others are not going to implement it. And even if they did implement it, GitHub would keep incrementing it, breaking compatibilty.

I have a lot of respect for Microsoft nowadays because it delivers great tools and they are portable. GitHub Blocks is a deviation from this path.

These blocks should be built-in and maintained by GitHub

The first selling point on the marketing page for "kinds of blocks you can create" is a 3D model viewer.

If GitHub wants to support 3D models, that's great! It does a pretty good with CSV files already. This should be done at the GitHub level, not at the customers level. I can't think of anybody using GitHub that can or should be able to come up with a 3D viewer. Do you really want to browse GitHub repos and some of them have 3D viewers and some of them don't?

A P5 viewer? Just update GitHub Flavored Markdown to render every [...p5.js](some P5) link and in the READMEs shown on http://github.com/... show it that way every time.

Zero people complained when GitHub changed how CSV files render for everybody. Be fearless and deploy more of these good updates that are already built and demonstrated here as Blocks—but do it for everybody just like the CSV updates.

We already have great way do all these things... the GitHub Pages

Do you want a quick way to allow people visiting your project to edit a webpage, contribute their first commit, or consume some content in your repository?

Well I've got the solution for you, it's GitHub Pages! With GitHub Pages and some great GitHub APIs, you can access all repository content and history, render it however you want, and make it better! All of that lives on a webpage hosted for free by GitHub, updated every commit, and you can even host it on your own domain if you want to!

Some off-the-shelf projects exist like prose. But also remember... anything you could do with GitHub Blocks can be done with GitHub Pages. You can probably even translate from the former to the latter just using VS Code, adding a comment // translate this to an HTML widget and pressing enter.* (*Fees apply for using GitHub Copilot.)

Blocks is still great, but it should live as a debugging tool rather than a product candidate

But again, blocks is really cool as an internal GitHub tool. Maybe some non-GitHub-employees can recommend improvements to the GitHub CSV viewer. Great! And I welcome this community involvement. I already CMD-OPT-I all kinds of websites I don't own to add features (Google Docs dark mode anyone?) . Having a first-party, first-rate tinkering experience with GitHub's interface is really cool.

But let's say I build a better way to render CSV files (maybe a way to add a row, which generates a PR). It might be cool to deploy that on my on GitHub repo page. But how much cooler would it be if GitHub accepted that change and deployed it for the billions of GitHub visitors on the millions of GitHub repos across the GitHub universe?

---

Please don't pick one of these points, refute it, and say this issue is dead. These are four independent points, each of which individually should be good enough to stop Blocks from reaching general availability.

---

I didn't see a discussions tab or anywhere mentioned to give durable, discussable feedback (i.e. not Discord) so I hope this post is welcome here.

Discord Link Invalid

I'm trying to join the discord server using the link given in the Readme
https://discord.gg/githubnext
However it says that the invite link is not valid.

(Don't know where else to raise this, cause need to join discord before raising any issues there 😅 )

The "Explain" block attempts a POST request that returns a 405 (method not allowed) status when attempting to explain code

When using the "Explain" block, which is supposed to explain code using ML, it returns a blank response. The reason for this is that it's trying to make POST request that returns a 405 response (method not allowed).

Some reasons why this might be happening might be:

• The server does not accept POST requests to that URL or there’s a redirect involved converting the request to a GET.
• Your browser is making a preflight request, which uses the OPTIONS HTTP method. This is to check whether the server will allow the POST request (the 405 status code is sent in the response to the OPTIONS request, not the POST request).
• The POST method might not be allowed on which you are sending the request and the request is simply denying you to make any POST request by sending 405 error response

See the screenshots below for more details. The endpoint it is trying to reach is "https://blocks-sandbox.githubnext.com/api/explain", so it could also be that you have to remove the 'sandbox' part from it.

Screenshot of the POST request that's not being allowed

Example of 'blank' explanation returned by the "Explain" block

The "Explain" block

list of files in file tree wrongly includes files that start with the same name as the parent directory

looks like we are matching files that have the parent directory name as a prefix, even when they aren't actually in the directory. (reported in Discord)

Sandbox-Block: Block not found

what i do:

i open this link:

• https://blocks.githubnext.com/githubnext/blocks/blob/main/examples/lodash%20docs/index.md?fileRef=&blockKey=githubnext__blocks-examples__markdown-block

what i see

• error message: Block not found

what i expect

• to see the example as block

screenshot

Lodash blocks outdated

It looks like the blocks at https://blocks.githubnext.com/githubnext/blocks/blob/main/examples/lodash%20docs/index.md?blockKey=githubnext__blocks-examples__markdown-block&fileRef=&fullscreen=0 have an old definition of "sandbox". Maybe this change to "JS sandbox" now?

Only when I change the block type, I can see the preview in the lodash example readme.

image block doesn't work for .ico files?

Reported in Discord

Expanded list of contributors shakes uncontrollably

When expanded on hover, placing the pointer in the blank space between two icons makes the list enter a infinite shake between expanding and shrinking. Best explained visually:

Screen.Recording.2023-03-01.at.16.08.08.mov

Browser: Firefox on macOS

What is this?

I don't know about the padding

<iframe src="http://localhost:3000/?owner=githubnext&repo=composable-github-test&path=Button.jsx&viewerOverride=annotate-react&debug=1" />

test

test

https://composable-github.vercel.app?owner=githubnext&repo=composable-github-test&path=Button.jsx&viewerOverride=annotate-react&annotations=%5B%7B%22geometry%22%3A%7B%22type%22%3A%22RECTANGLE%22%2C%22x%22%3A30.389221556886227%2C%22y%22%3A17.105263157894736%2C%22width%22%3A24.550898203592816%2C%22height%22%3A40.789473684210535%7D%2C%22data%22%3A%7B%22text%22%3A%22hmmm%20what%20is%20this%22%2C%22id%22%3A0.6427315218880166%7D%7D%2C%7B%22geometry%22%3A%7B%22type%22%3A%22RECTANGLE%22%2C%22x%22%3A46.706586826347305%2C%22y%22%3A44.73684210526316%2C%22width%22%3A11.077844311377241%2C%22height%22%3A1.3157894736842124%7D%2C%22data%22%3A%7B%22text%22%3A%22123%5Cn%22%2C%22id%22%3A0.818403110675786%7D%7D%5D

consider adding "scope" to block metadata

Some blocks may make sense only in certain contexts, e.g. a block intended to be used in Markdown. We could add metadata to restrict what scope they appear in.

Feedback from @HiDeoo:

• Is there any plan for marking some blocks as only usable directly in Markdown and not be listed in the block picker search bar in the "fullscreen file renderer view"? My block (and I think there may be more) feels relevant embedded in the middle of a markdown file but kinda makes no sense alone in the other view.

repo link in block picker is missing the actual repo name

Reported in Discord. For example, the link for a blocks-examples blocks has https://github.com/githubnext/ without blocks-examples.

Sunset repository

The GitHub Blocks experiment has concluded, so this repository should either be archived or have a note added.