Giter Club home page Giter Club logo

repo.js's Introduction

Repo.js

Repo.js is a jQuery plugin that lets you easily embed a Github repo onto your site. This is great for other plugin or library authors that want to showcase the contents of a repo on their project pages.

Repo.js uses Markus Ekwall's jQuery Vangogh plugin for styling of file contents. Vangogh, subsequently, utilizes highlight.js, written by Ivan Sagalaev for syntax highlighting.

Example Usage

$('body').repo({ user: 'darcyclarke', name: 'Repo.js' })

You can also reference a specific branch if you want:

$('body').repo({ user: 'jquery', name: 'jquery', branch: 'strip_iife' })

repo.js's People

Contributors

bryant1410 avatar darcyclarke avatar dchusovitin avatar deedubs avatar gitter-badger avatar jaschaephraim avatar richgilbank avatar rowanc avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

repo.js's Issues

Add Breadcrumb

The navigation would be easier if a breadcrumb was above of the files list. Like on GitHub.

Related to #7

https support

Is it possible that you add https support since the highlight packages get blocked on https

Website displaying incorrect code

On the Repo.js site you have this as a source example:

$('#repo').repo({ user: 'darcyclarke', 'Repo.js' });

But it should be:

$('#repo').repo({ user: 'darcyclarke', name: 'Repo.js' });

Bottom of the Repo cut off when opening first file in Chrome with clear cache

If I have an empty html document with nothing but a div to hold the repo when I first open a file it seems like the div calculates it height before all the GitHub like formatting has been applied so the bottom of the file is cut-off. After the first one has loaded all the rest of the files in the repo work fine because their formatting is applied before they are shown. I suspect it has something to do with the fonts not being downloaded the first time.

Last files doesn't appear.

Hello,
I'm on Firefox(15.0.1) in Windows and when I try to show my repository, I don't see the last files :

<script type="text/javascript" src="http://darcyclarke.me/dev/repojs/jquery.js"></script> <script type="text/javascript" src="http://darcyclarke.me/dev/repojs/repo.min.js"></script> <script> jQuery(function($){ $('#repo_serveurIRC').repo({ user: 'Neckara', name: 'IRCServer' }); });</script>

https://github.com/Neckara/IRCServer

In my case, on 12 files , 6 don't appear.
I try on Chrome (22.0.1229.79 m), the 6 files is missing too.
In Internet Explorer (8.0.7600.16385) nothing appear.

I try with the repo.min.js from this repo, it make only one difference on drupal : &#61467 appear at each line an go up the name of the files but out of drupal, I have a "?" instead.

In your first exemple : http://darcyclarke.me/dev/repojs/
I see only the 2 first files : fonts and README/md.

In the second exemple, 4 files is missing.
After crossdomain.xml, the file don't appear.

haha

How does it feel

Embed Gist?

Could you add support for embedding (any) Gist? I'm aware there are already other libs/JS which do this but would be nice if yours did it all.

How do we actually use this?

How to do we call this plugin? It seems we need to call the Repo.js script from our site and/or include the code ourselves correct?

I'm trying to get this into a joomla article so I can display a repo there instead of dealing with managing files on the joomla site.

I guess what I'm asking is more than the one line examples showing what I need to do to use Repo.js.

Uncaught TypeError: Object [object Object] has no method 'on'

When embedding this script in my page, I'm seeing an error on line 176

          // Bind to page links
            _this.container.on('click', 'a', function(e){

Can't tell if this is my fault or not - perhaps it's a loading issue. Any thoughts as to what might trigger that?

Issue With Dots In Repository Name

When using the following code:

<div id="repo">
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#repo').repo({ user: 'eat-sleep-code', name: 'powershell.iis' });
    });
</script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
<script type="text/javascript" src="/scripts/repo.min.js" defer="defer"></script>

The following error is thrown: Syntax error, unrecognized expression: [data-id^=powershell.iis]

Simply switching to another repo--such as the following--it works fine:

<div id="repo">
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#repo').repo({ user: 'eat-sleep-code', name: 'css' });
    });
</script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
<script type="text/javascript" src="/scripts/repo.min.js" defer="defer"></script>

How do I style it?

I love this plugin but it's just not my style. Thanks so much in advanced ! ๐Ÿ˜ƒ

Do not support Matlab file format supported by HIGHLIGHT.JS

Tested on Matlab files and it doesn't correctly highlight the source code.
To quickly test:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="js/repo.js"></script> <script> jQuery(function($){ $('#repo').repo({ user: 'awlab', name: 'simucell' }); }); </script>

Doesn't work on the Android browser

Appears to load, but does nothing:

Zoomed out
Zoomed in

I'm not sure if it's supposed to work or not on the Android browser, but I thought I would bring this to your attention.

Some Files Missing, Icons Missing

  • When using repo.js to display a repo on a website, not all the folder/files are included (IE10, Chrome).
  • Icons are not shown (IE10).
  • Clicking on the repo name hides the repo and the only way to get it back is by reloading the whole page (IE10, Chrome).

This is evident even on your own site; http://darcyclarke.me/dev/repojs/

Are there plans to fix this?

Display a specific file only

Is single file display planned? If for example I want to display a README.md
I think It can be interesting to create a GitHub powered website this way, what are your thoughts?

When clicking on a file, it opens twice.

While navigating through my repo, clicking on a file causes the file to be opened in two separate Repo.js blocks. The first block is cut off right at the bottom while the second is the full block. Navigating backward using breadcrumbs causes ONE of the blocks to disappear, while the other just stays open until I refresh the page.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.