{"id":20660994,"url":"https://github.com/liatemplates/explaingit","last_synced_at":"2026-04-12T11:50:22.084Z","repository":{"id":107259599,"uuid":"250260307","full_name":"LiaTemplates/ExplainGit","owner":"LiaTemplates","description":"Port of ExplainGit to LiaScript for enabling interactive git courses","archived":false,"fork":false,"pushed_at":"2020-04-14T09:19:59.000Z","size":53,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-17T06:22:03.634Z","etag":null,"topics":["git","liascript","liascript-template","markdown","oer"],"latest_commit_sha":null,"homepage":"https://liascript.github.io/course/?https://github.com/liaTemplates/ExplainGit","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LiaTemplates.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-03-26T13:03:42.000Z","updated_at":"2022-02-22T12:18:25.000Z","dependencies_parsed_at":null,"dependency_job_id":"78e7dd91-396a-4dc3-bd19-1e4a455e2fea","html_url":"https://github.com/LiaTemplates/ExplainGit","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/LiaTemplates/ExplainGit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaTemplates%2FExplainGit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaTemplates%2FExplainGit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaTemplates%2FExplainGit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaTemplates%2FExplainGit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LiaTemplates","download_url":"https://codeload.github.com/LiaTemplates/ExplainGit/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaTemplates%2FExplainGit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270657715,"owners_count":24623465,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-16T02:00:11.002Z","response_time":91,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["git","liascript","liascript-template","markdown","oer"],"created_at":"2024-11-16T19:06:44.829Z","updated_at":"2026-04-12T11:50:17.049Z","avatar_url":"https://github.com/LiaTemplates.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!--\nauthor:   Yannik Höll\nemail:    labruzzler@gmail.com\nversion:  0.0.2\nlanguage: en\nnarrator: US English Female\n\ncomment:  This template offers two macros for integrating ExplainGit, which uses\n  D3 to visualize simple git branching operations. This simple project is\n  designed to help people understand some basic git concepts visually.\n\nlogo:  https://upload.wikimedia.org/wikipedia/commons/e/e0/Git-logo.svg\n\nattribute: ExplainGit is based on the project of onlywei, see the original\n  project at https://github.com/onlywei/explain-git-with-d3\n\n@ExplainGit: @ExplainGit._eval_(@uid, )\n\n@ExplainGit.eval: @ExplainGit._eval_(@uid,```@0```)\n\n@ExplainGit._eval_\n\u003cscript\u003e\nfunction git(input) {\n  if (window.git) {\n    let srcdoc = window.git.replace(\"var cmds = \\\"\\\";\", \"var cmds = \\\"\" + input + \"\\\";\")\n\n    let frame = document.getElementById(\"eval_@0\");\n    frame.srcdoc = srcdoc\n  } else {\n    setTimeout(function(){git(input)}, 100)\n    }\n}\n\ngit(`@1`.replace(/\\n/g, \"|\").trim())\n\u003c/script\u003e\n\n\n\u003ciframe width=100% height=500px id=\"eval_@0\"\u003e\u003c/iframe\u003e\n@end\n\n\n@onload\n\nwindow.git = `\u003c!DOCTYPE html\u003e\n  \u003chtml\u003e\n  \u003chead\u003e\n  \u003cmeta http-equiv=\"content-type\" content=\"text/html; charset=UTF-8\" /\u003e\n  \u003ctitle\u003eImplementation of explaingit with d3 for LiaScript\u003c/title\u003e\n  \u003cscript src=\"https://d3js.org/d3.v5.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://cdn.jsdelivr.net/gh/LiaTemplates/ExplainGit/bundle.min.js\"\u003e\u003c/script\u003e\n  \u003clink rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css\"\u003e\n  \u003clink rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/1140/2.0/1140.css\"\u003e\n  \u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/LiaTemplates/ExplainGit/explaingit.min.css\"\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n\n  \u003cdiv id=\"ExplainGitZen-Container\" style=\"display:none\"\u003e\n      \u003cdiv class=\"playground-container\"\u003e\u003c/div\u003e\n  \u003c/div\u003e\n\n  \u003csvg version=\"1.1\" baseProfile=\"full\"\n       xmlns=\"http://www.w3.org/2000/svg\"\n       xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n       xmlns:ev=\"http://www.w3.org/2001/xml-events\"\n       width=\"0\" height=\"0\"\u003e\n\n      \u003cmarker id=\"triangle\" refX=\"5\" refY=\"5\" markerUnits=\"strokeWidth\" fill=\"#666\"\n              markerWidth=\"4\" markerHeight=\"3\" orient=\"auto\" viewBox=\"0 0 10 10\"\u003e\n          \u003cpath d=\"M 0 0 L 10 5 L 0 10 z\"/\u003e\n      \u003c/marker\u003e\n      \u003cmarker id=\"faded-triangle\" refX=\"5\" refY=\"5\" markerUnits=\"strokeWidth\" fill=\"#DDD\"\n              markerWidth=\"4\" markerHeight=\"3\" orient=\"auto\" viewBox=\"0 0 10 10\"\u003e\n          \u003cpath d=\"M 0 0 L 10 5 L 0 10 z\"/\u003e\n      \u003c/marker\u003e\n      \u003cmarker id=\"brown-triangle\" refX=\"5\" refY=\"5\" markerUnits=\"strokeWidth\" fill=\"#663300\"\n              markerWidth=\"4\" markerHeight=\"3\" orient=\"auto\" viewBox=\"0 0 10 10\"\u003e\n          \u003cpath d=\"M 0 0 L 10 5 L 0 10 z\"/\u003e\n      \u003c/marker\u003e\n  \u003c/svg\u003e\n\n  \u003cscript type=\"text/javascript\"\u003e\n    var cmds = \"\";\n\n    if(cmds) {\n      explainGit.reset();\n\n      const gitHubJson = {\n        name: 'Zen',\n        height: '100%',\n        commitData: [\n          {id: 'e137e9b', tags: ['master'], message: 'first commit'}\n        ],\n        initialMessage: \"\",\n        cmds: cmds.split(\"|\").filter(cmd =\u003e cmd !== \"\" \u0026\u0026 cmd !== \"create origin\")\n      };\n\n      if(cmds.includes(\"create origin\")) {\n        gitHubJson[\"originData\"] = [{id: 'e137e9b', tags: ['master'], message: 'first commit'}]\n        gitHubJson.commitData[0].tags = [\"origin/master\", \"master\"]\n      }\n\n      explainGit.open(gitHubJson);\n    } else {\n      explainGit.reset();\n\n      explainGit.open({\n          name: 'Zen',\n          height: '100%',\n          commitData: [{id: 'e137e9b', tags: ['master'], message: 'first commit'}],\n          initialMessage:\n              'Type in your git commands below.'\n      });\n    }\n\n  \u003c/script\u003e\n  \u003c/body\u003e\n  \u003c/html\u003e`\n\n@end\n--\u003e\n\n## ExplainGit for LiaScript\n\nImplementation of __ExplainGit with D3__ for LiaScript\n\n[Original Source Code](https://github.com/onlywei/explain-git-with-d3)\n\n[Original Website](https://onlywei.github.io/explain-git-with-d3/)\n\n[LiaScript Page](https://liascript.github.io/course/?https://github.com/liaTemplates/ExplainGit)\n\nThere are three ways to use this template. The easiest way is to use the\n`import` statement and the URL of the raw text-file of the master branch or any\nother branch or version. But you can also copy the required functionality\ndirectly into the header of your Markdown document, see therefor the\n[Implementation](#Implementation). And of course, you could also clone this\nproject and change it, as you wish.\n\n1. Load the macros via\n\n   `import: https://github.com/liaTemplates/ExplainGit/master/README.md`\n\n2. Copy the definitions into your Project\n\n3. Clone this repository on GitHub\n\n## `@ExplainGit`\n\nYou can use the `@ExplainGit` macro to create a blank repository with only one\ninitial commit.\n\n@ExplainGit\n\n## `@ExplainGit.eval`\n\nOr you can use the `@ExplainGit.eval` macro for preconfiguring your repository\nwith git commands.\n\nYou can use `create origin` to enable the remote origin. \u003cbig style='color:\nred'\u003eA big issue is that the used framework doesn't support branches in the\nremote origin!\u003c/big\u003e\n\n\u003cp style=\"color:green\"\u003e__Example:__\u003c/p\u003e\n\n```` markdown\n``` text  @ExplainGit.eval\ngit commit\ngit commit -m Hello World\ngit branch dev\ngit checkout dev\ngit commit -m dev commit\ngit checkout master\ngit commit -m master commit\n```\n````\n\nThis code generates the repository below.\n\n``` text  @ExplainGit.eval\ngit commit\ngit commit -m Hello World\ngit branch dev\ngit checkout dev\ngit commit -m dev commit\ngit checkout master\ngit commit -m master commit\n```\n\n\n## Implementation\n\n````` html\n@ExplainGit: @ExplainGit._eval_(@uid, )\n\n@ExplainGit.eval: @ExplainGit._eval_(@uid,```@0```)\n\n@ExplainGit._eval_\n\u003cscript\u003e\nfunction git(input) {\n  if (window.git) {\n    let srcdoc = window.git.replace(\"var cmds = \\\"\\\";\", \"var cmds = \\\"\" + input + \"\\\";\")\n\n    let frame = document.getElementById(\"eval_@0\");\n    frame.srcdoc = srcdoc\n  } else {\n    setTimeout(function(){git(input)}, 100)\n    }\n}\n\ngit(`@1`.replace(/\\n/g, \"|\").trim())\n\u003c/script\u003e\n\n\n\u003ciframe width=100% height=500px id=\"eval_@0\"\u003e\u003c/iframe\u003e\n@end\n\n\n@onload\n\nwindow.git = `\u003c!DOCTYPE html\u003e\n  \u003chtml\u003e\n  \u003chead\u003e\n  \u003cmeta http-equiv=\"content-type\" content=\"text/html; charset=UTF-8\" /\u003e\n  \u003ctitle\u003eImplementation of explaingit with d3 for LiaScript\u003c/title\u003e\n  \u003cscript src=\"https://d3js.org/d3.v5.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://cdn.jsdelivr.net/gh/LiaTemplates/ExplainGit/bundle.min.js\"\u003e\u003c/script\u003e\n  \u003clink rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css\"\u003e\n  \u003clink rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/1140/2.0/1140.css\"\u003e\n  \u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/LiaTemplates/ExplainGit/explaingit.min.css\"\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n\n  \u003cdiv id=\"ExplainGitZen-Container\" style=\"display:none\"\u003e\n      \u003cdiv class=\"playground-container\"\u003e\u003c/div\u003e\n  \u003c/div\u003e\n\n  \u003csvg version=\"1.1\" baseProfile=\"full\"\n       xmlns=\"http://www.w3.org/2000/svg\"\n       xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n       xmlns:ev=\"http://www.w3.org/2001/xml-events\"\n       width=\"0\" height=\"0\"\u003e\n\n      \u003cmarker id=\"triangle\" refX=\"5\" refY=\"5\" markerUnits=\"strokeWidth\" fill=\"#666\"\n              markerWidth=\"4\" markerHeight=\"3\" orient=\"auto\" viewBox=\"0 0 10 10\"\u003e\n          \u003cpath d=\"M 0 0 L 10 5 L 0 10 z\"/\u003e\n      \u003c/marker\u003e\n      \u003cmarker id=\"faded-triangle\" refX=\"5\" refY=\"5\" markerUnits=\"strokeWidth\" fill=\"#DDD\"\n              markerWidth=\"4\" markerHeight=\"3\" orient=\"auto\" viewBox=\"0 0 10 10\"\u003e\n          \u003cpath d=\"M 0 0 L 10 5 L 0 10 z\"/\u003e\n      \u003c/marker\u003e\n      \u003cmarker id=\"brown-triangle\" refX=\"5\" refY=\"5\" markerUnits=\"strokeWidth\" fill=\"#663300\"\n              markerWidth=\"4\" markerHeight=\"3\" orient=\"auto\" viewBox=\"0 0 10 10\"\u003e\n          \u003cpath d=\"M 0 0 L 10 5 L 0 10 z\"/\u003e\n      \u003c/marker\u003e\n  \u003c/svg\u003e\n\n  \u003cscript type=\"text/javascript\"\u003e\n    var cmds = \"\";\n\n    if(cmds) {\n      explainGit.reset();\n\n      const gitHubJson = {\n        name: 'Zen',\n        height: '100%',\n        commitData: [\n          {id: 'e137e9b', tags: ['master'], message: 'first commit'}\n        ],\n        initialMessage: \"\",\n        cmds: cmds.split(\"|\").filter(cmd =\u003e cmd !== \"\" \u0026\u0026 cmd !== \"create origin\")\n      };\n\n      if(cmds.includes(\"create origin\")) {\n        gitHubJson[\"originData\"] = [{id: 'e137e9b', tags: ['master'], message: 'first commit'}]\n      }\n\n      explainGit.open(gitHubJson);\n    } else {\n      explainGit.reset();\n\n      explainGit.open({\n          name: 'Zen',\n          height: '100%',\n          commitData: [{id: 'e137e9b', tags: ['master'], message: 'first commit'}],\n          initialMessage:\n              'Type in your git commands below.'\n      });\n    }\n\n  \u003c/script\u003e\n  \u003c/body\u003e\n  \u003c/html\u003e`\n\n@end\n`````\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliatemplates%2Fexplaingit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fliatemplates%2Fexplaingit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliatemplates%2Fexplaingit/lists"}