I have been following the article Github Metadata with Jekyll and JavaScript which mentions how to use Github Repository Metadata using Jekyll and Javascript.
The article there says that you need to add the following to index.html before the link to an external JS file. Now repos is globally available so you can use it in our external JS file.
<script>
var repos = {{ site.github.public_repositories | jsonify }};
</script>
I have created an index.html file which contains the following contents.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>GitHub Repository</title>
</head>
<body>
<script>
var repos = {{ site.github.public_repositories | jsonify }};
</script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="github-repo.js"></script>
</body>
</html>
github-repo.js
$(document).ready(function(){
console.log(repos);
});
But, when I run the code I get Uncaught ReferenceError: repos is not defined error
