How to specify different readme files for github and npm - github

Both use the README.md as the description when you publish. A common practice is to use a single shared file.
But what if I need to have the different Readme and still publish it from a single local repo with no manual editing/replacement
PS
I tried to use "readme": "npm-readme.md" in package.json but it displays a value of this field, not the content of а file

For some reason zavr's answer (using README and README.md) didn't work when I tried it (probably the logic used by NPM has changed). But what did work is putting the GitHub README into .github directory (this is allowed according to their docs), and using the root README.md as the version for NPM along the lines of
<!-- README for NPM; the one for GitHub is in .github directory. -->
<badges>
<a brief description>
Please refer to the [GitHub README](https://github.com/<your repo>#readme) for full documentation.
Luckily, for GitHub .github/README.md seems to take priority over README.md.
Update 2021-02-06: a quick note about best practice. NPM wouldn't let you update the readme without bumping the package version, and in reality you often need to make updates, sometimes minor, to the docs. So I'd recommend to provide full docs in the GitHub readme, but still give a short description of the library on NPM, which in combination with keywords field of package.json will make the package more discoverable. It's also a good idea to include badges in the NPM readme because that will increase the quality score displayed by NPM (see discussion of "branding" score in this article).

Good question mate! I prefer GitHub to NPM for a number of reasons, such as
a) the column on NPM is to narrow and all tables start to scroll
b) there is no padding when images are aligned to left of right
c) the TOC navigation does not work because anchor links are generated differently on GitHub and npm
Therefore I found a solution: add a README file, which will be read by NPM, and keep README.md file which will be read by GitHub. Easy-peasy but no guarantee it will continue to work.

One solution can be to use two readme files and rename them using npm scripting during npm publish.
This can be done as follows.
On source control, we would have the following files:
README.md - This is the default git readme where you would document your source.
npm.README.md - This would be the readme that would be seen on NPM.
Next, we would have the following in package.json (note that some contents are omitted).
{
...
"scripts": {
...
"build": "...",
"use:npmReadme": "mv 'README.md' 'git.README.md' && mv 'npm.README.md' 'README.md'",
"use:gitReadme": "mv 'README.md' 'npm.README.md' && mv 'git.README.md' 'README.md'",
"prepublishOnly": "run-s build use:npmReadme",
"postpublish": "npm run use:gitReadme"
},
"dependencies": {
...
},
"devDependencies": {
...
"npm-run-all": "^4.1.2",
...
}
}
In devDependencies, the npm-run-all package is used. This allows using the run-s command to run specified npm scripts sequentially.
in the scripts section, we have the following scripts:
Scripts to Rename README files
use:npmReadme - This simply backs up the current git specific readme, and then renames npm.README.md to be the default README.md.
use:gitReadme - This simply reverts back to using the git specific readme as the default README.md.
prepublishOnly
This is executed BEFORE the package is prepared and packed, and ONLY on npm publish. (Does not run with npm install).
Here, the solution is built, and then we run use:npmReadme.
postPublish
This is executed AFTER the package is published on npm.
Here, we run use:gitReadme to revert the readme files back to their original state.
More information on prepublishOnly and postPublish can be found here.

keshav.bahadoor's answer inspired me to use similar approach in GitHub workflows.
I'm using it as following:
- uses: actions/checkout#v2
...
- run: mv NPM-README.md README.md
...
- run: npm publish --access public
I'm moving NPM-README.md to README.md only during workflow and not committing.
rest of the workflow yaml file
Note: This is working for GitHub workflows, not makes sense to use in your local.

(the more good one) If we named the npm readme to README.md and the GitHub readme to readme.md. Then we can add readme.md for the npm ignore .npmignore and add the README.md for gitignore .gitignore.
(the more bad one) Add npm.README.md and git.README.md. Remove the npm. or git. when commiting or publishing the git or npm.

Related

Running a project with forked version of material-ui

I want to start contributing to material-ui but before I submit a Pull Request I'd like to visually confirm that my changes have the desired effect. I followed the "install" page at material-ui.com and now I can run docs locally but I'm not sure what that does for me. I'd like to make a new barebones project that uses the material-ui that I have forked. Ideally it would use the material-ui that is on my local machine and not in my remote repo (this would allow me to make quick changes locally rather than having to push every time I want to see the consequences of a change). Is this possible?
You can use npm link to create a material-ui symbolic link inside node_modules that actually points to your forked version's physical folder. https://docs.npmjs.com/cli/link
Example:
cd ~/projects/material-ui # go into your forked directory
npm link # creates global link
cd ~/projects/my_project # go into your project directory
npm link material-ui # link-install the package

npm install and build of forked github repo

I'm using a module for my angular app called angular-translate. However, I've had to make a few small modifications to the source code to get everything working the way I'd like, and now I want to persist those changes on npm install. A colleague suggested that I fork the repo of the source code and point to my forked repo as a dependency, which I've tried in these ways, e.g.
npm install https://github.com/myRepo/angular-translate
npm install https://github.com/myRepo/angular-translate/archive/master.tar.gz
The first gives me a directory like this with no build. Just a package.json, .npmignore, and some markdown files
-angular-translate
.npmignore
.nvmrc
CHANGELOG.md
package.json
etc
The second npm install gives me the full repo, but again I don't get a build like when I use the command npm install angular-translate. I've seen some dicussion of running the prepublish script, but I'm not sure how to do this when installing all the modules. I've also tried publishing the fork as my own module to the npm registry, but again I get no build, and I'm not sure that's the right thing to do...
I apologise for my ignorance on the topic. I don't have a huge amount of experience with npm. Would love to get some feedback on this issue. It seems like it could be a common enough issue when modifications need to be made to a package's source code? Maybe there's a better solution?
Try npm install <ghusername>/<repoName>, where <ghUsername> is your GitHub username (without the #) and <repoName> is the name of the repository. That should correctly install it. You will most likely want to use the --save or --save-dev flag with the install command to save dependency in your package.json.
If that isn't working correctly, check the contents of your .npmignore file.
Don't panic if the install command takes a long time; installing from a git repository is slower than installing from the npm registry.
Edit:
Your problem is that in your case, dist/ is not committed to the repo (since it is in the .gitignore). That is where the actual code lives. dist/ is built from the files in src/ before the package is published to the npm registry, but dist/ is never committed to the repo.
It's ugly, but in this case you will have to remove dist/ from the .gitignore and then run:
npm run build
git add .
git commit
git push
(Ensure that you have run npm install first)
You then should be able to install from github.
There might be another way to do this using a prepare script, but I'm not sure if that's possible; I've never tried it. Edit: Cameron Tacklind has written an excellent answer detailing how to do this: https://stackoverflow.com/a/57829251/7127751
TL;DR use a prepare script
and don't forget package.json#files or .npmignore
Code published to npmjs.com is often not what's in the repository for the package. It is common to "compile" JavaScript source files into versions meant for general consumption in libraries. That's what's usually published to npmjs.com.
It is so common that it's a feature of npm to automatically run a "build" step before publishing (npm publish). This was originally called prepublish. It seems that Npm thought it would be handy to also run the prepublish script on an npm install since that was the standard way to initialize a development environment.
This ended up leading to some major confusion in the community. There are very long issues on Github about this.
In the end, in an effort to not change old behavior, they decided to add two more automatic scripts: prepublishOnly and prepare.
prepublishOnly does what you expect. It does not run on npm install. Many package maintainers just blindly switched to this.
But there was also this problem that people wanted to not depend on npmjs.com to distribute versions of packages. Git repositories were the natural choice. However it's common practice to not commit "compiled" files to git. That's what prepare was added to handle...
prepare is the correct way
If you have a repository with source files but a "build" step is necessary to use it,
prepare does exactly what you want in all cases (as of npm 4).
prepare: Run both BEFORE the package is packed and published, on local npm install without any arguments, and when installing git dependencies.
You can even put your build dependencies into devDependencies and they will be installed before prepare is executed.
Here is an example of a package of mine that uses this method.
Problems with .gitignore
There is one issue with this option that gets many people.
When preparing a dependency, Npm and Yarn will keep only the files that are listed in the files section of package.json.
One might see that files defaults to all files being included and think they're done.
What is easily missed is that .npmignore mostly overrides the files directive and, if .npmignore does not exist, .gitignore is used instead.
So, if you have your built files listed in .gitignore, like a sane person, and don't do anything else, prepare will seem broken.
If you fix files to only include the built files or add an empty .npmignore, you're all set.
My recommendation
Set files (or, by inversion, .npmignore) such that the only files actually published are those needed by users of the published package. Imho, there is no need to include uncompiled sources in published packages.
Original answer: https://stackoverflow.com/a/57503862/4612476
Update for those using npm 5:
As of npm#5, prepublish scripts are deprecated.
Use prepare for build steps and prepublishOnly for upload-only.
I found adding a "prepare": "npm run build" to scripts fixed all my problems.
Just use the command npm install git+https://git#github.com/myRepo/angular-translate.git. Thanks.
To piggyback off of #RyanZim's excellent answer, postinstall is definitely a valid option for this.
Either do one of the following:
Update the package.json in your forked repo to add a postinstall element to scripts. In here, run whatever you need to get the compiled output (Preferred).
Update your package.json, and add a postinstall that updates the necessary directory in node_modules.
If you've forked another persons repository, then it might be worth raising an issue to illustrate the issue that installing their package through GitHub does not work as it does not provide the necessary means to build the script. From there, they can either accept a PR to resolve this with a postinstall, or they can reject it and you can do #2.
If you are using yarn like me. Imagine that you want to use a package like this:
yarn add ghasemikasra39/gridfs-easy --save where the ghasemikasra39 is the username and gridfs-easy is the name of the repo

Github pages cannot display markdown correctly

I am using github pages + jekyll to establish my blog.
It worked properly before pushed my latest commit. This commit adds a cname file and just edits some words without any alterations over the architecture of my site.
- <h3 class="description">aaaaaaaaaa</h3>
+ <h3 class="description">bbbbbbbbbb</h3>
After that markdown does not appear properly.
When I write #head1. It does not appear title head1, it just appears #head1 directly.
However, if I use jekyll serve build in localhost:4000, it appears correctly.
This is my _config.yml:
markdown: kramdown
markdown_ext: markdown,mkd,mkdn,md
textile_ext: textile
highlighter: pygments
Any ideas what has been causing this error?
UPDATED!
This is most likely due to Jekyll 3 upgrade on GitHub Pages.
From May 1st 2016 on, GitHub will not support rdiscount nor redcarpet anymore. Also, since February 1st, GitHub Pages only supports rouge:
Starting May 1st, 2016, GitHub Pages will only support kramdown,
Jekyll's default Markdown engine.
GitHub Pages now only supports
Rouge.
You can check this out here.
In order to deal with it, proceed as the following:
First, try as explained on this answer. Instead of #Heading you'll write # Heading.
Second, adjust your _config.yml: change highlighter and markdown for
highlighter: rouge
markdown: kramdown
kramdown:
input: GFM
Third, to build your site locally, use Bundler, the method recommended by GitHub:
Install Bundler:
gem install bundler
Then run bundle update - this will update all your gems, including github-pages, if you already have this gem installed locally.
Then, create a Gemfile (leave it without any file extension) with the following content:
source 'https://rubygems.org'
gem 'github-pages'
Save it to your project's root.
Then, run bundle install on your project. This will create a file called Gemfile.lock and will install all required gems and their dependencies.
Finally, run bundle exec jekyll serve --watch and you'll be able to view your website locally exactly as you'll view online (when hosting on GitHub).
You should be OK by then!
PS. If your project needs more gems, as jekyll-paginate or jekyll-mentions, you'll need to add them to the Gemfile, for example:
source 'https://rubygems.org'
gem 'github-pages'
gem 'jekyll-paginate'
Also, add them to your project's _config.yml:
gems:
- jekyll-paginate
- jekyll-mentions
Here you'll see a list of gem versions currently supported by GitHub Pages. Here you read about Upgrading Jekyll 2 to 3.
Hope to have helped!
A slight observation running my own Jekyll powered github pages blog,
A space between the # representing the heading size, and the heading text is important otherwise the markdown will not display as intended. Therefore with your example, I would display my markdown heading as,
# Zookeeper Atomic Broadcast for heading 1
## Zookeeper Atomic Broadcast for heading 2
### Zookeeper Atomic Broadcast for heading 3
#### Zookeeper Atomic Broadcast for heading 4
##### Zookeeper Atomic Broadcast for heading 5
GitHub support markdown as well jekyll.
First of all rename your file with the .md extension
If you have .nojekyll in your folder it will disable njekyll.
Verify that you don't have this is your folder.
Read the docs && GitHub relevant doc on how to prepare and deploy
Running Jekyll
Use the command git checkout to switch to the default branch that the GitHub Pages build server uses to generate your site. The default branch you switch to depends on the type of GitHub Pages site you're building.
For Project Pages sites, switch to gh-pages.
For User Pages or Organization Pages sites, switch to master. For more information, see "User, Organization, and Project Pages".
Use the command bundle exec jekyll serve in the root of your repository to run the GitHub Pages build server with Bundler.
bundle exec jekyll serve
Navigate to http://localhost:4000 to see your local site.

Push yeoman project to github

I try to work on a yeoman project with a team. After generating the angularjs code with > yo angular and pushed the folder to github
git add .
git push
git commit origin master
and when I clone the code from git github I have this error
Fatal error: Unable to find local grunt.
If you're seeing this message, either a Gruntfile wasn't found or
grunt hasn't been installed locally to your project. For more
information about installing and configuring grunt, please see the
Getting Started guide:
http://gruntjs.com/getting-started
so I deleted every thing from .gitignore and pushed everything again, I had this warning
The file will have its original line endings in your working
directory.
So I am quite sure it's not going to work and it's not the best way to do it. Can someone help me on how to upload the yeoman project ?
I think that angular generator for Yeoman already creates a package.json file with grunt defined as dependency along with all its task. So the correct way to compile a project after the clone is to install all npm dependencies locally using:
npm install
then run grunt to compile everything:
grunt
Of course you must have grunt-cli globally installed, which is used to run grunt locally. To install it you have to use the following command where -g defined the global install (default is local):
npm install -g grunt-cli
First of all, i think you have a typo in your question, you have mixed commit and push commands:
git add .
git commit -m 'commit message' // message is optional
git push origin master
First message appears because you don't have an installed Grunt. Install it in your working directory:
npm install grunt --save-dev
Starting with Grunt v0.4, you should never install Grunt itself
globally. For more information about why, please read this. Source: grunt-cli docs.
If it is alredy listed in the devDependencies, just run:
npm install
The second one is caused by line-endings. It is a good practice to include .gitattributes file in your repo. File's content should be:
* text=auto
Read about this file: docs. Or there is another method. It is described in this question.

Files from Yeoman web-app that needs to be committed in SCM/GIT

When we do "yo webapp" (assuming webapp generator is installed), it scaffold projects which contains file relevant to bower, grunt and then there is app folder, which we all know what's it about.
My question is, out of this structure what are the files that needs to be maintained in SCM, Should it be only app directory or should it whole structure ?(assuming there are no additional grunt task or any build file changes from earlier scaffolding)
Yeoman webapp generator will produce a .gitignore file which includes files that should not be committed to a SCM. This file includes the following directories:
node_modules
dist
.tmp
.sass-cache
bower_components
test/bower_components
It is clear that .tmp and .sass-cache have no reason to be in the repo as they both are only temporary.
There is however a discussion whether bower (and rarely node) dependencies should be checked in. For most projects I recommend not to.
Please note that in either case one should never change the packages directly in the bower_components or node_modules folder as any change will be lost at next bower install or npm install. A fork of the original project (either as a independent repo or to folder in the project - e.g. lib) is a better idea - a follow up pull request would then add a lot of karma :)
The dist folder with the build of the application may be committed depending on your deployment method. There is a very good guide on deployment on Yeoman site.
As a start, you should put everything into SCM with the exception of app/bower_components, test/bower_components and node_modules. All files under these directories come from public repo, either node or bower repo.
In this setup, whenever another developer checkout from SCM, he needs to run 2 commands: npm install and bower install. What I typically do is I create a file called install.sh (install.bat on Windows) and have these 2 commands inside this script file. In this way, when you find that you need to run more commands for initialization, you can easily add to this script file and new developers can just checkout and run install.sh.
In some cases, I found that I need to perform small modification to a public library. In this case, I will check this library inside bower_components into SCM as well. This is not common, but it happens.