Cdnjs: [Request] Add videojs-markers

[PeterDaveHello]

Library name: videojs-markers
Git repository url: https://github.com/spchuang/videojs-markers
License(s): MIT
Official homepage: http://sampingchuang.com/videojs-markers

In this issue, we are going to host a new web front-end library on cdnjs, so that web developer can easily use it on our free CDN without additional download/upload process 🚀 .

If you'll like to work locally, I'll suggest you start with sparseCheckout: https://github.com/cdnjs/cdnjs/blob/master/documents/sparseCheckout.md, since there are too many files in this repo, without sparseCheckout, the whole process will be super slow, using git command line can learn more skills and experience, if you don't like that, instead, you can also just do it on GitHub, it's more convenient, but it may be a little bit harder to fix problems on GitHub gui.

Here are the docs about how to add a library:

• https://github.com/cdnjs/cdnjs#adding-a-new-or-updating-an-existing-library
• https://github.com/cdnjs/cdnjs/blob/master/.github/CONTRIBUTING.md#d-adding-a-new-library

We'll also ask to setup auto-update config so that the added libraries can be updated to the latest version easily:

• https://github.com/cdnjs/cdnjs/blob/master/documents/autoupdate.md

For beginners who is interested in join and help add this library, please feel free to tell me what kind of help you'll need, we'll help you send the valid pull request, thanks 😄 .

[abdulamite]

Hi, I am interested in joining and helping out in this community. This is my first open source, and I would love some guidance as to how to get started, and be a valuable member of this community. I will do my part, and read all the docs to get started, and I look forward to working on this if you will have me!

[PeterDaveHello]

Hi @abdulamite, welcome aboard!

As you can see, there are some references above, there is also a CONTRIBUTING doc, I'm not sure how much do you know about git and GitHub, the work flow of open source project on GitHub, maybe you can reveal about yourself and let us know what kind of help we can provide?

[PeterDaveHello]

@hare1039 @sufuf3 @extend1994 @clairetsai818 please help @abdulamite when he needs help!

[abdulamite]

I am familiar with github and it's services, but I am interested in learning about the specific steps that are taken when adding a new library in this community. I have read over the docs several times, but I am wondering if there is someone who can kind of guide me through my first library contribution so that I may use it as a learning experience. I promise to not be too annoying about it. :)

[extend1994]

@abdulamite Is there anything in more details I can help you? :smiley:

[abdulamite]

@extend1994 I have read over the documentation, but I am still having questions about the process of adding a new library. I am familiar with all of the concepts and terminology, though I was wondering if if I could possibly work with a more experienced member so that I can use it as a learning experience so I may continue to contribute on my own. All I am really looking for is kind of a general process that you follow when approaching adding a new library to the service.

[extend1994]

@abdulamite
Let's take this library for example. If I am in charge of this lib (I work locally), I will do the following steps.
Pretend I am under root directory at very first.

1. git clone https://github.com/spchuang/videojs-markers.git
2. cd videojs-markers
3. git checkout 0.7.0 (the latest stable version)
4. under any folder of cdnjs. git checkout -b videojs-markers
5. under ~/cdnjs/ajax/libs/. mkdir videojs-markers/0.7.0 (Please also make sure sparseCheckout is enabled)
6. mv ~/videojs-markers/dist/* videojs-markers/0.7.0 or cp ~/videojs-markers/dist/* videojs-markers/0.7.0.
7. mv ~/videojs-markers/package.json videojs-markers or cp ~/videojs-markers/package.json videojs-markers.
8. Under ~/cdnjs, use ./tools/fixFormat.js to clear fields we don't need in package.json.
9. Required field of package.json are "name", "filename", "version", "description", "keywords", "repository", "author", "license" and npm or git auto-update. Optional one is "homepage". Here is an example for you: https://github.com/cdnjs/cdnjs/blob/master/ajax/libs/expr-eval/package.json and here is the document of auto-update: https://github.com/cdnjs/cdnjs/blob/master/documents/autoupdate.md. I will add fields accordingly (also take bower.json as the reference). In this case, it will be like

{
  "name": "videojs-markers",
  "filename": "videojs-markers.min.js",
  "version": "0.7.0",
  "description": "video marker breaks plugin for video.js",
  "repository": {
    "type": "git",
    "url": "https://github.com/spchuang/videojs-markers.git"
  },
  "keywords": [
    "videojs",
    "tags",
    "marker",
    "video",
    "player"
  ],
  "author": "spchuang",
  "license": "MIT",
  "autoupdate": {
    "source": "git",
    "target": "git://github.com/spchuang/videojs-markers.git",
    "fileMap": [
      {
        "basePath": "dist",
        "files": [
          "**/*"
        ]
      }
    ]
  }
}

Here are something worth special attention:
a. we must have .min file in filename. If there is no official minified file, you will need to minify it on your own. For me, I use https://github.com/PeterDaveHello/web-minify-helper as my minified tool.
b. If the homepage of the lib is the same as repo. Just ignore it. Don't fill out it in package.json.
c. the fileMap changes by different file structures of libs. If all the files we need are under dist, we will use the rule **/*. For more details about the rules, you can take a look at https://github.com/isaacs/node-glob.

1. Test the branch locally, npm test
2. Test auto-update config. If git auto-update, go root directory ./autoupdate/autoupdate.js run <folder_name>; If npm auto-update, go ~/cdnjs ./auto-update.js run <folder_name>. In this case, ./autoupdate/autoupdate.js run videojs-markers
3. git add . and git commit -v. The commit message will be

Add [email protected] w/ git auto-update
close #9816, cc @spchuang

If you have any other questions, just ask :smile: . I will try my best to explain and help you.

[abdulamite]

This is a huge help! Thank you so much! I will get right on this when I get a chance! You have been such a tremendous help and I very much appreciate your time. @extend1994 I look forward to working more closely with this community,

[abdulamite]

so I have managed to perform the
git pull origin master --depth 10
command, though when I finish running it, I receive the following error
sparse checkout leaves no entry on working directory
the area that I am primarily having trouble with on your explanation is on step 5 where you are going in an creating the directory for the Videojs-markers service.

[PeterDaveHello]

@abdulamite you need to setup .git/info/sparse-checkout with something will be checked out before git pull

[abdulamite]

Yeah so I believe that I have done that with the following commands:
git config core.sparseCheckout true
echo '/ajax/libs/videojs-markers/*' >> .git/info/sparse-checkout
but I believe that I may be doing this incorrectly. Could you please explain.

[PeterDaveHello]

@abdulamite that's almost correct, the path you setup, actually doesn't exist on master branch, so that's the point I mentioned.

Try to add the content in the template to your config, it'll help:
https://github.com/cdnjs/cdnjs/blob/master/tools/sparse-checkout.template

[abdulamite]

I apologize for the continuous stream of questions, but I have almost got it. So I have gotten to step 8 on the instructions list, where we run the file fixFormat.js, though I am unsure how you are running this command. I notice this JS file, so are you using node to run this on the package.json file?

[PeterDaveHello]

@abdulamite we use node to run it, if you have nodejs installed, simply run "./tools/fixFormat.js", it should work!

[abdulamite]

So when I am ruining it with node I am getting this error,
module.js:472
throw err;
cannot find module async

[PeterDaveHello]

@abdulamite Forgot to install dependency via "npm install" ?

[abdulamite]

@PeterDaveHello @extend1994
Awesome so I have all of that working, but now I am at step 9 with the package.json file. So after running the fixFormat.js on package.json my file looks somthing like this:

{ 
  "name": "videojs-markers",
  "description": "video marker breaks plugin for video.js",
  "version": "0.7.0"
}

I see that there are many required fields that must be filled out such as "name", "filename", "version", "description", "keywords", "repository", "author", "license" , and I am wonder how these get filled in. Am I going in adding this information my self, or is this being pulled externally?

[extend1994]

@abdulamite

1. "name" should be the same as the library name which you want to add and the folder name (ajax/libs/<lib_name>).
2. The filename should point to the main file of a lib. For example, filename.min.js or filename.min.css. And minify the files if needed. Like I explain in the last comment.
3. "version" should be the version of the lib you want to add.
4. Try to find "description", "keywords", "author" in package.json or bower.json in the upstream. If there is not, you will need to write for the lib or open an issue to ask the author if he/she can provide it. For "keywords", you can try to add it on your own by typing some words in search engine such as Google to see if you can see the repository or the homepage of the library in the first page of the search result. For instance, after search videojs marker video player on Google, we can see repository of videojs-markers.
5. For "author", you can also open an issue to ask what you should write or see the author's GitHub page.
   The format of "repository" basically is

"repository": {
   "type": "git",
   "url": "https://github.com/<author_account>/<repo_name>.git"
},

Only fill out it on our own when there is no such information in the upstream.

1. If there is no "license" info in package.json or bower.json, you can refer something like LICENSE.txt under repository.

[abdulamite]

@extend1994
So after going through that, now I am seeing the following errors when I run the NPM test command.
I see that it is have problems with the npm filemap validation in the package.json file. Is there any advice that you might be able to provde.

[abdulamite]

@extend1994 @PeterDaveHello
I have just sent my commit! I am so excited! I really hope I did it all right, I tried my hardest to follow all the directions, and I think that I've got it!

[PeterDaveHello]

@abdulamite nice! We'll see!

[extend1994]

@abdulamite Don't forget to send a pull request :+1: Looking forward to it :smile:

[PeterDaveHello]

Just updated both of your comments, try to use "```js" syntax for your code block to make it beauty and readable, see: https://help.github.com/articles/creating-and-highlighting-code-blocks/

[abdulamite]

@PeterDaveHello Thank you for that. I will keep that in mind for future comments!
@extend1994 So I have done git add . and git commit -v with the proper commit message, though I am having some trouble submitting the pull request based on the steps that you mentioned earlier. Would you possibly be able to tell me more about it. I would just like to make sure I do it properly so that I don't send a bad pull request.

[PeterDaveHello]

@abdulamite No worries.

What's detail of the trouble you mention here? Any error message?

[abdulamite]

So I am just having trouble with the next steps. So I am trying to send the pull request though I am not seeing my branch when I am trying to compare branches. For some reference, I have followed all of the steps that @extend1994 had mentioned earlier in this thread. I think this may be because of my remote origin. I had used the git remote add origin git://github.com/cdnjs/cdnjs.git from the sparse checkout documentation.

[PeterDaveHello]

@abdulamite do you mean you can't compare on CDNJS repository on GitHub website?

Would you please show me the result of your git branch and git remote -v commands?

[abdulamite]

I think I have just realized my mistake after running those commands. I am realizing that I can't compare the branches because I am on master. I think I may have forgotten to run the git checkout -b videojs-markers command.
Here are the results from the commands you had requested.

[PeterDaveHello]

@abdulamite so I think can compare it now 👍

[abdulamite]

I am sorry I am still unsure how I can compare them from the pull request screen. Could you please let me know which branches I should select if I am only on master.

[PeterDaveHello]

@abdulamite You should now create a branch from the master branch first, since we don't accept pull request from master branch, but in fact even you're on master branch, you should be able to compare it.

[abdulamite]

so I have created my branch, should I just see my videojs-markers branch in the pull requests area now? or would I need to push?

[PeterDaveHello]

@abdulamite of course you'll need to push it out, or nobody knows/sees it.

[abdulamite]

@PeterDaveHello I apolagize for all the newbie questions, I am still trying to slowly learn it all.
Though, I did run into the following issue when trying to push.

```
C:\Users\ichis\Desktop\cjscdnjs>git push origin videojs-markers
remote: Permission to cdnjs/cdnjs.git denied to abdulamite.
fatal: unable to access 'https://github.com/cdnjs/cdnjs.git/': The requested URL returned error: 403

[PeterDaveHello]

@abdulamite not a problem and no worries. The problem is because you have no permission on cdnjs/cdnjs.

You just need to simply add your forked repository as a valid remote:

git remote add abdulamite https://github.com/abdulamite/cdnjs.git

Then push it out

git push abdulamite videojs-markers

To learn more about the pull reuqest flow, see:
https://git-scm.com/book/en/v2/GitHub-Contributing-to-a-Project

[abdulamite]

@PeterDaveHello Thank you for being so patient with. This has been an awesome experience and I have already learned so much from working on this small section of the project!

[PeterDaveHello]

@abdulamite Glad you like it and that's what I believe an open source project should be, keep going 👍

[abdulamite]

So after I perform the push, I am not seeing my videojs-markers, where might I find the push that I have just sent?

[PeterDaveHello]

@abdulamite You should see it here: https://github.com/abdulamite/cdnjs/branches, so looks like the push was failed.

[abdulamite]

ah alright , that's what I was thinking, I will go back and make sure it is all working properly

[PeterDaveHello]

@abdulamite I believe that there would be error message if you pushed failed, maybe be more careful with the outputs will help.

[abdulamite]

So I encountered an issue with my pull request where I must rebase the branch with master. Should I just run the following commands to rebase with master?

git rebase master
git add  .
git commit -v
git push abdulamite videojs-markers

here is the link to my error.
https://ci.cdnjs.com/cdnjs/cdnjs/7415

[PeterDaveHello]

@abdulamite You need to pull master branch from origin remote first, then git rebase master videojs-markers, and git push abdulamite videojs-markers --force

[abdulamite]

so I am just curious about the first command, so I just want to be sure. So it should be something like this?

git pull origin master
git rebase master videojs-markers
git push abdulamite videojs-markers --force

[PeterDaveHello]

@abdulamite
Correct, you got it, but if your master branch is not clean, contains the commit in the pull request, in the situation as you say you did not a branch from the beginning, use pull with '--rebase', that's all.

[abdulamite]

so from here how should I handle the pull request? should I open a new pull request? close the previous one?

[PeterDaveHello]

@abdulamite Nope, the steps are correct and will fix the PR.

[abdulamite]

so when I tried to send the push request I get a message saying everything is up to date.

[PeterDaveHello]

So I think you didn't rebase your branch with the latest master branch with success?

[abdulamite]

So I am still having trouble rebasing my branch, I keep getting messages saying everything is already up to date, and I have tried reading more about it online, but I can't find a solid answer.

[extend1994]

@abdulamite
Could you please show your results of following commands?

git branch
git log --summary

Thanks!

[PeterDaveHello]

@extend1994 It's impossible to directly paste result of git log unless you set a number for it ...

[PeterDaveHello]

@abdulamite please give us the output of these commands:

1. git log -5 --pretty='format:%h - %s - %an %ai' master
2. git log -5 --pretty='format:%h - %s - %an %ai' videojs-markers
3. git remote -v

[extend1994]

Sorry I didn't request it in a clear way! 5 outputs should be enough, thanks @PeterDaveHello

[abdulamite]

So when trying to run the command I am getting a syntax error that is saying the following:

git log -5 --pretty=format:%h - %s - %an %ai
fatal: ambiguous argument '%s': unknown revision or path not in the working tree.
Use '--' to separate paths from revisions, like this:
'git [...] -- [...]'

thought when I run git log, the command runs just fine, but ofcourse with the huge list of records

[extend1994]

@abdulamite It seems that you missed the symbol '
Command should be git log -5 --pretty='format:%h - %s - %an %ai'
Let's try again :)

[abdulamite]

Ah I see what the issue actually was, so I tried it with single quotes and I was having problems, though when using cmd, you have to use " ", I should really just switch to a linux only machine.

[abdulamite]

Here are my results from running the supplied commands:

[extend1994]

@abdulamite
According to your result of command git log -5 --pretty='format:%h - %s - %an %ai' master , it seems that you actually didn't pull master branch from origin remote successfully, because the latest record is Apr 25 but it should be May 3.
So let's try

1. Make sure you are on branch videojs-markers by command git branch, or you have to type git checkout videos-markers
2. Pull master branch from origin remote: git pull origin master:master
3. Rebase the branch videos-markers: git rebase master
   3.5 You can check if the branch is new enough by command git log and you should be able to see commits on May 4 now.
4. Push branch: git push abdulamite videojs-markers --force

[PeterDaveHello]

The problem is that the origin remote url is wrong, 100 times re-pull won't fix it.

@abdulamite try to add a new remote named cdnjs via:
git remote add cdnjs git://cdnjs.peterdavehello.org/cdnjs

Then pull from cdnjs instead of origin, the problem should be fixed.

[abdulamite]

so I was able to pull from origin, though now I am encountering the following error while trying to rebase:

[PeterDaveHello]

Out of memory

😓

[abdulamite]

I fixed it!

[abdulamite]

yay!!!