conwnet/github1s

One second to read GitHub code with VS Code.

github1s

One second to read GitHub code with VS Code.

Usage

Just add 1s after github and press Enter in the browser address bar for any repository you want to read.

For example, try it on the VS Code repo:

https://github1s.com/microsoft/vscode

You can also use https://gitlab1s.com or https://npmjs1s.com in the same way.

For browser extensions, see Third-party Related Projects.

Or save the following code snippet as a bookmarklet, you can use it to quickly switch between github.com and github1s.com (GitHub markdown doesn't allow js links, so just copy it into a bookmark).

javascript: window.location.href = window.location.href.replace(/github(1s)?.com/, function(match, p1) { return p1 ? 'github.com' : 'github1s.com' })

Develop in the cloud

To edit files, run Docker containers, create pull requests and more, click the "Develop your project on Gitpod" button in the status bar. You can also open the Command Palette (default shortcut Ctrl+Shift+P) and choose GitHub1s: Edit files in Gitpod.

Documentation

• How it works
• Roadmap

Enabling Private Repositories

If you want to view non-public repositories, you need to add an OAuth token. The token is stored only in your browser, and only send to GitHub when fetching your repository's files. Click on the icon near the bottom of the left-hand row of icons, and the dialog box will prompt you for it, and even take you to your GitHub settings page to generate one, if needed.

Screenshots

Development

Cloud-based development

You can start an online development environment with Gitpod by clicking the following button:

Local development

git clone [email protected]:conwnet/github1s.git
cd github1s
yarn
yarn watch
# The cli will automatically open http://localhost:8080 once the build is completed.
# You can visit http://localhost:8080/conwnet/github1s if it doesn't.

Local development with full VS Code build

You need these prerequisites (the same ones as for VS Code) for development with full VS Code build. Please make sure you could build VS Code locally before the watch mode.

To verify the build:

cd github1s
yarn build:vscode

After the initial successful build, you could use the watch mode:

cd github1s
yarn
yarn watch-with-vscode
# The cli will automatically open http://localhost:8080 once the build is completed.
# You can visit http://localhost:8080/conwnet/github1s if it doesn't.

... or ... VS Code + Docker Development

You can use the VS Code plugin Remote-Containers Dev Container to use a Docker container as a development environment.

1. Install the Remote-Containers plugin in VS Code & Docker

2. Open the Command Palette (default shortcut Ctrl+Shift+P) and choose Remote-Containers: Clone Repository in Container Volume...

3. Enter the repo, in this case https://github.com/conwnet/github1s.git or your forked repo

4. Pick either, Create a unique volume or Create a new volume

   • Now VS Code will create the docker container and connect to the new container so you can use this as a fully setup environment!

5. Open a new VS Code Terminal, then you can run the yarn commands listed above.

yarn
yarn watch
# The cli will automatically open http://localhost:8080 once the build is completed.
# You can visit http://localhost:8080/conwnet/github1s if it doesn't.

Format all codes

yarn format

It uses prettier to format all possible codes.

Build

yarn
yarn build

Feedback

• If something is not working, create an issue

Sponsors

The continued development and maintenance of GitHub1s is made possible by these generous sponsors:

Partners

We are partnered with OSS Insight to get the Trending Repositories & some more Interesting Analytics. OSS Insight provides deep insights into GitHub repos, developers, and curated repo lists from billions of GitHub events. It’s built with TiDB Cloud.

Maintainers! 😊

netcon 💻 🖋

xcv58 💻 🖋

Siddhant Khare 💻 🖋

Stargazers over time

Third-party Related Projects

Chrome Extensions

• Repositree (chouglesaud/repositree)
• github-code-viewer (febaoshan/edge-extensions-github-code-viewer)
• Github1s Extension (Darkempire78/GitHub1s-Extension)
• Github Web IDE (zvizvi/Github-Web-IDE)
• shortcut to github1s (katsuhisa91/github1s-shortcut)
• Github1s Shortut - Open source
• ⚡️ 1s to GitHub1s!
• github1s Google Chrome Extensions

Firefox Extensions

• Repositree (chouglesaud/repositree)
• Github1s Extension (Darkempire78/GitHub1s-Extension)
• Github1s (mcherifi/github1s-firefox-addon)
• Github Web IDE (zvizvi/Github-Web-IDE)

Microsoft Edge Extensions

• github-code-viewer (febaoshan/edge-extensions-github-code-viewer)
• Github Web IDE (zvizvi/Github-Web-IDE)

Safari Extension

• GitHub1s-For-Safari-Extension (code4you2021/GitHub1s-For-Safari-Extension)

Tampermonkey scripts

• Mr-B0b/TamperMonkeyScripts/vscode.js

github1s's Issues

求个 chrome 插件

鉴于鄙人不会前端开发等，蹲一个 feature

如何指定分支？

有些项目像 https://github.com/python/asyncio 的默认分支不是 master。

Mobile version

Hi,

Love this great project. Is it possible to hide/collapse the file chooser on mobile or somehow make this easier to use on mobile in general?

Support multiple file search

It looks like the current file search range is limited to opened files and I hope it will be able to search in the entire project.

Easy self hosting as personal vercel project

It would be good idea to add a one click deploy button in Readme

• Deploy Button Docs - Vercel

• It can be like this

  [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fconwnet%2Fgithub1s&project-name=github1s&repo-name=github1s)

  

• Vercel by-default has build command npm run build, which when tested by me builds the project fine.
  Took aroud 14m to build.

• The only thing I noticed which hinders simplicity, is to set Output Directory to dist

  

• If the output of build command goes to public this could be super easy to setup our own vercel instance :)

Firefox support

Any chance you guys are adding support for other browsers?

GitHub1s chrome extension

https://chrome.google.com/webstore/detail/github1s/lodjfmkfbfkpdhnhkcdcoonghhghbkhe/

ت

Not working on Microsoft Edge chromium browser

Version 79.0.309.65 (Official build) (64-bit)

Support scala syntax highlighting

Syntax highlight on scala files does not seem to work.

ت

要是有 Cloudflare worker 版本就更爽了

可以自己部署，还不需要服务器，还有 CDN

is it possible to support language server's extensions

I think if the web vscode could provide features of language servers, it would be extremely great.

I don't know whether there is some tech which could provide language server without a personal server to realize like use microsoft/vscode-cpptools: Official repository for the Microsoft C/C++ extension for VS Code. to index c++ code
use microsoft/vscode-python: Python extension for Visual Studio Code to support python.

Or support any other language server.

Any ideas?

Looking forward to yours feedback.

Submodules are not supported

Example:
https://github1s.com/microsoft/jacdac-ts

Disable the "Open with Github1s" Button for private repositories

First of all , this github1s is absolutely amazing , let me take this moment to congratulate the team behind this
Thank You !!!

Now coming to the issue , For the github1s chrome extension , it would be great to Not show or disable the "Open with Github1s" Button for private repositories.

How does this work?

Thank you for the project, it is really neat!

I assume it is quite different from things like https://github.com/cdr/code-server or gitpod.io, and that it works entirely in the browser – am I correct? If so, how is it done?

请求状态码返回404, Body里面数据是正常的

请求状态码返回404, Body里面数据是正常的
https://github1s.com/facebook/react
https://github1s.com/facebook/vs/workbench/workbench.web.api.css
https://github1s.com/facebook/vs/workbench/workbench.web.api.nls.js
https://github1s.com/facebook/vs/code/browser/workbench/workbench.js

还有我的Chrome69打开网页一片空白
改用FireFox78可以正常显示

GitHub policy violation

https://docs.github.com/en/github/site-policy/github-trademark-policy#what-is-a-github-trademark-policy-violation
Github1s may be violating github's policies.

Allow to edit files and then create a pull request

Or at least export a patch file or something. That would be really cool 😀
Awesome project!

Use GitHub GraphQL query to get the file content

There are multiple benefits to use GraphQL query instead of the RESTful endpoints:

1. It will have fewer network calls against the RESTful endpoint so that the rate-limited issue would be mitigated a lot. The current implementation is per file per call, and GraphQL query could easily change to per-directory per query and could be optimized further.
2. The current Quick Open feature (⌘P) supports the files only if they were opened before. This would be solved since GraphQL query could return all files & text content for a directory via a single query, and we could pre-populate the data to VSCode engine.
3. The implementation can leverage GraphQL client built-in cache feature like https://www.apollographql.com/docs/react/caching/cache-configuration/.
4. It's easier to add more GitHub-related features since no need to call different GitHub RESTful endpoints. Like switch branch, check out a previous commit, switch to a forked repo.

Sample GraphQL query:

https://gist.github.com/MichaelCurrin/6777b91e6374cdb5662b64b8249070ea

and screenshot via https://docs.github.com/en/graphql/overview/explorer

The blocker I saw is the GitHub GraphQL API needs authentication: https://docs.github.com/en/graphql/guides/forming-calls-with-graphql. Which could use the OAuth flow to build a UI redirect page to request before users start to use:
https://docs.github.com/en/developers/apps/authorizing-oauth-apps#web-application-flow

Replace should be disabled in read-only mode

If the files are read only the global search's replace function should be disabled. There's no use to it and it can be confusing to the user.

GitLab and other hosting services

Can support be added for GitLab and other hosting services.

天若有情天亦老, 人间正道是沧桑

出自***写于 1949 年的七律诗《人民解放军占领南京》。

Dart support for file association

Hi,

Thanks for all the awesome effort.

Could we have dart file association plz or if I am missing something plz let me know.

Best,
Hari

Support viewing different Git Branches. Currently, viewing source from other git tree/branch is broken.

Try going to https://github1s.com/JetBrains/kotlin/tree/1.0.1_/br145

The files are not displayed!

Although files are displayed as expected for Master branch here: https://github1s.com/JetBrains/kotlin

This could mean different git tree/branch is not supported and files are not shown.

Browser extension that adds an Open in VSCode UI element for single-click opens.

This would make it very easy to open and browse around code repositories without having to clone locally. I don't know how hard it would be to make + publish this so feel free to say it's out of scope.

This project is really nice, thanks for making it!

Use Vercel to host the app

Using the GitHub page to host the app has several drawbacks:

1. Not easy to preview the pending change
2. No existing CI/CD support
3. No way to have a preview version for PR

I suggest using https://vercel.com/ to host the app. This is a version I deployed: https://test.xcv58.vercel.app/conwnet/github1s/blob/HEAD/src/vs/code/browser/workbench/workbench.ts

There are two drawbacks:

Price

And the drawback is Vercel is not a free service but the price is cheap https://vercel.com/pricing. I paid around $3 per month and the majority part is custom domains.

And I can help to request a free or discounted account for this project.

CI/CD setup

I don't know whether Vercel supports the toolchain to build VSCode. I could reach to their customer support to check whether there is any similar setup/use-case.

But in the worst case, we could use CircleCI (free service) to build the artifact and integrate it with Vercel.

---

Just for reference

The steps to deploy under my Vercel account:

1. Run yarn & yarn build
2. cd dist and make a vercel.json file with the content:

{
  "routes": [{
      "src": "/static/(.*)",
      "dest": "/images/$1"
    },
    {
      "src": "/favicon.ico",
      "dest": "/favicon.ico"
    },
    {
      "src": "/manifest.json",
      "dest": "/manifest.json"
    },
    {
      "src": ".*",
      "dest": "/index.html"
    }
  ]
}

3. Install the Vercel CLI https://vercel.com/download
4. Run vercel login command to login
5. Run vercel to deploy.

二进制数据可以添加到预览中么？

比如图片之类的

Branches with "/" are not rendered

For now, acessing https://github1s.com/[user]/[repo]/tree/[branch] gives empty files if branch has "/", which is common when using gitflow

I've made a minimal reproduction repository

Activating extension 'vscode.typescript-language-features' failed: Can't find variable: Worker.

First up, this is awesome!!!

I see an error popup in bottom right:

Activating extension 'vscode.typescript-language-features' failed: Can't find variable: Worker.

Upon loading any URL eg: https://github1s.com/conwnet/github1s/blob/HEAD/src/vs/github1s/util.ts

Ctrl+P doesn't prevent default print dialogue

Ctrl+P correctly brings up file autocomplete, but doesn't prevent the default browser action and so browser shows print dialog on top.

support github gist

means we can use gist.github1s.com to open the gist via vscode online

Add a material icon theme

Something like this:
https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

Thanks!

Support kotlin syntax highlight

support to language mode change to kotlin
if you don't mind, tell me how to add language support

Ctrl+P navigation only available for opened files

In VSCode, Ctrl+P is used to navigate between files in the workspace, either opened recently or not ever opened. But in github1s.com, the Ctrl+P panel only shows opened files. I guess it's due to some lazy loading mechanism, but is it possible to navigate between all files in the repository instead of loaded files only?

Sample screenshot:

Fuzzy file search

Ctrl+F already opens the 'Open File' pull-down. It also has autocomplete to navigate to the next directory. What would be really useful however is a fuzzy search to navigate to another file. This should be a lot easier to do than #13, because you 'only' need to search for the search string in the file names/tree.

Blank page when Javascript is disabled

I'm testing the NoScript plugin and github1s display nothing when Javascript is disabled.

I suggest to add a text to explain that Javascript must be enabled to use that website. The <noscript> tag could be used.

Support for private repositories

Probably we can do it through Github OAuth App with repo read permission

Error for open url "https://github1s.com/microsoft/vscode" in chrome browser

ERR The Web Worker Extension Host did not start in 10s: Error: The Web Worker Extension Host did not start in 10s
at https://github1s.com/static-62eb1a5/vscode/vs/workbench/workbench.web.api.js:4802:845
workbench.web.api.js:1727 ERR ENOPRO: No file system provider found for resource 'github1s://microsoft%2Bvscode%2Bhead/'
at _.withProvider (https://github1s.com/static-62eb1a5/vscode/vs/workbench/workbench.web.api.js:1747:504)
at async _.doWatch (https://github1s.com/static-62eb1a5/vscode/vs/workbench/workbench.web.api.js:1759:648)
workbench.web.api.js:1727 ERR No file system provider found for resource 'github1s://microsoft%2Bvscode%2Bhead/': ENOPRO: No file system provider found for resource 'github1s://microsoft%2Bvscode%2Bhead/'
at _.withProvider (https://github1s.com/static-62eb1a5/vscode/vs/workbench/workbench.web.api.js:1747:504)
at async _.doResolveFile (https://github1s.com/static-62eb1a5/vscode/vs/workbench/workbench.web.api.js:1748:554)
at async _.resolve (https://github1s.com/static-62eb1a5/vscode/vs/workbench/workbench.web.api.js:1748:279)
at async Promise.all (index 0)

edge和chrome插件来了

感谢大佬，借着你的这个东西，撸了个可以用于edge和chrome的插件。
源码和使用方法在这：https://github.com/febaoshan/edge-extensions-github-code-viewer

edge商店审核中，chrome无法支付5美元，所以现阶段只能下载源码解压后用浏览器的开发者模式加载解压的扩展程序。
有chrome开发者账号的可以直接发布插件，但是名字需要为：github-code-viewer。

谢谢。

Window closed when typing CTRL+W

The default behavior from VSCode when you type CTRL+W is certainly to close the tab, not the entire IDE, and I'm used to using that combination. When used in github1s sites though, the window is closed (sure a warning is showed first, but after the first try the window gets closed).

It would avoid some frustration if CTRL+W closed tabs instead of the actual chrome tab, there may be reasons these can't be done though, but just pointing it out here.

Awesome project.

Change "Open with Github1s" to simply "Github1s" (like Gitpod)

Takes up more space than necessary and is logically redundant.
To compare, Gitpod just has a button that says Gitpod and that's all it needs, it's the only button.

I suppose you could call it personal preference, but I think most people would prefer a change like this.

Thanks!

中文会乱码

如题，环境为Windows 10，firefox 85

Some features don't work if third party cookies are blocked

For example, readme is not visible

Support Golang syntax highlighting

Images are not shown

Is there any support of defining extensions to use per repo?

Is there any support of defining extensions to use per repo?
Like the .vscode/extensions.json and the recommendations part?

I showed this by changing the url of a repo for someone, changing github to github1s, and the reaction was the same as for me, really cool, but he wanted the go to implementation in c#-interface-methods, and I guess that's only adding an c#-extension, but does those things work on this online version of vscode?

This is Amazing!

May I ask what API you use? Is it an official browser version of VSCode provided by Microsoft? I would like to read more about it.

support for other scm

Support other scm (gitlab, gitea) when selfhosting for an other git platform.

想要搜索功能完善

唱跳rap篮球+鼠标左键跳转的功能也安排一下吧求求