gitgraph.js
gitgraph.js copied to clipboard
nicoespeon
Need Good documentation
Hi @aldrinrayen 👋
Sure, something is certainly not clear enough. Are you coming from the website? Or referring to the README instructions? Both?
Also, are you using the React or the JS library?
Finally, could you tell me if there are specific questions you're struggling with? This is to help me understand what I should improve for the documentation.
Might also be related to the lack of API documentation, which we'll include soon #274
Hi,
I am a little bit stuck too.
I am trying to create a simple local HTML page containing gitgraph, but I don't know where to start.
I know JS basics. I know node.js. I don't know Typescript (and examples seem to be in TS)
So yes, there is a lack of documentation when you are starting... from zero. At least a minimum working example would be something to start from. Not just pieces of code that you don't know where to put
Your work seems to be great, but useless without this minimum of information
Got it, it makes sense indeed. I'll address the issue of the library not being available easily outside of NPM with #283
Until then, I'd suggest to use the v1 which documentation is available at https://gitgraphjs.com/v1 — there is no clear link to this page as I want this issue to be temporary and will make good enough docs for anyone to start hacking with the lib without having to set up a node project and code an SPA.
I was able to install NPM but I'm still unclear how to use gitgraph even with NPM. I did npm init and installed gitgraph/js and jsdom, but I don't know how to actually create a full NPM project that will actually run. Right now I have an index.html that looks like:
<!DOCTYPE html>
<html>
<head>
<!-- … -->
</head>
<body>
<!-- DOM element in which we'll mount our graph -->
<div id="#graph-container"></div>
</body>
</html>
and index.js which looks like:
var http = require("http");
var fs = require("fs")
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
http.createServer(function (request, response) {
fs.readFile('./index.html', null, function(err, data) {
if (err) {
console.log(err.stack);
response.writeHead(404);
response.end('File Not Found');
} else {
const document = new JSDOM(data).window.document
const { createGitgraph } = require("@gitgraph/js");
const graphContainer = document.getElementById("graph-container");
const gitgraph = createGitgraph(graphContainer);
const master = gitgraph.branch("master");
master.commit("Initial commit");
const develop = gitgraph.branch("develop");
develop.commit("Add TypeScript");
const aFeature = gitgraph.branch("a-feature");
aFeature.commit("Make it work");
develop.merge(aFeature);
develop.commit("Prepare v1");
master.merge(develop).tag("v1.0.0");
response.writeHead(200, {'Content-Type': 'text/html'});
response.end(document.documentElement.outerHTML);
}
});
}).listen(8080);
console.log('Server running at http://127.0.0.1:8080/');
However when I run I get an error from bundle.umd.js:
Server running at http://127.0.0.1:8080/
C:\Users\path\to\project\node_modules\@gitgraph\js\lib\bundle.umd.js:9
var svg = document.createElementNS(SVG_NAMESPACE, "svg");
^
ReferenceError: document is not defined
at createSvg (C:\Users\path\to\project\node_modules\@gitgraph\js\lib\bundle.umd.js:9:15)
at createGitgraph (C:\Users\path\to\project\node_modules\@gitgraph\js\lib\bundle.umd.js:302:15)
at C:\Users\path\to\project\index.js:19:21
at FSReqWrap.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:53:3)
It would be helpful if the NPM documentation outlined more of how to set up the project. Thanks.
@aldrinrayen @lauhub @csmith-morningstar I just released a version of @gitgraph/js with a browser bundle.
I put the usage instructions in the README:Â https://github.com/nicoespeon/gitgraph.js/tree/master/packages/gitgraph-js#example-with-browser-bundle
Can you try and let me know if that's clear enough? If so, I'll update the website to explain how to use the lib without npm.
I love this library but I was also struggling with the documentation. This was perfect for getting me going: https://github.com/nicoespeon/gitgraph.js/tree/master/packages/gitgraph-js#example-with-browser-bundle
but stuff like wanting to change authors, colors etc I started looking into the source code because I don't find documentation around the different methods interfaces. The best I found was: https://github.com/nicoespeon/gitgraph.js/blob/master/packages/gitgraph-js/MIGRATE_FROM_GITGRAPH.JS.md
Hope that helps you
Hello, today I try to use this library, but I can't find what to pass in .commit() or .merge() when I want to change to hash/author/etc. Is the reference document there or it is not built up?
