REACT DIGITAL GARDEN
GitHub Repo Explorer (Knowledge Map)
I am developing many sample projects in Digital Garden. In order to explain the development process of these projects more clearly, I started to create Knowledge Maps.
GitHub is the platform with the most open source code. I think I can make different sample projects on visualising the repos on this platform.
For this, I develop a number of infrastructures and sample projects from simple to complex and develop these projects in a certain flow.
In order to better explain this development process, you can access sample applications made on this subject by clicking on the Knowledge Map or by going to the relevant examples through the links.
https://onurdayibasi.dev/github-repo-explorer-knowledge-map
As can be seen in Knowledge Map, our examples start with FileExplorer. The purpose of the FileExplorer project is to see the folders and files of the GitHub Repo in a line-by-line or tree structure.
We don’t always want to see the folder structure of the entire Repository, sometimes we want to focus on a certain folder and show the files under it. We want to focus or authorise a certain folder. You can click the SubTree node for this. In the example below, you can see that the react-ui-mechanics/admin-tool/ folder in the Medium Blog Samples Repository is focused.
You can then go to the FileExplorer and CodeDisplayer instance to see the contents of these files. When you click on a file you want from the tree on the left, you can see its contents in CodeEditor.
From here on, our flow is divided into 2 parts, the first is to see the contents of different repos and repos that we will add, and the other is to show these contents in ComplexLayout.
Firstly, let’s navigate between the predefined repos which are simple. In the picture below, we can view and navigate the files in the facebook/react repo.
Well, if we want to give ourselves a new repo address and view the contents of this repository, you can do this in UseOwnRepo in the next example.
Now let’s place the Layout in a slightly more complex structure. Let’s display it in an IDE Layout and we want to be able to open multiple files as Tabs at the same time and switch between them. I developed a Complex IDE example of this
So can we open this ComplexIDE through different repository? Of course yes, we have developed the Complex IDE with Predefined Repos example for this. Before going to Complex IDE, you can focus on the Repository you want by pressing the defined Repo Navigation Cards.
In the next example, you can dynamically create your own Repo Cards and open them in the desired Repository ComplexIDE. This project is called Complex IDE Use Own Repo
Note: As the Digital Garden continues to develop, I will continue to add new examples as new examples come in. I would be happy if you share this article with your circle as much as possible and applaud 👏.
