Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dbartholomae/jsx-readme
Generate Readme files with a React-like syntax and package.json-aware helpers.
https://github.com/dbartholomae/jsx-readme
hacktoberfest jsx markdown readme
Last synced: 7 days ago
JSON representation
Generate Readme files with a React-like syntax and package.json-aware helpers.
- Host: GitHub
- URL: https://github.com/dbartholomae/jsx-readme
- Owner: dbartholomae
- License: mit
- Created: 2020-09-08T11:07:13.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-06-24T05:53:45.000Z (6 months ago)
- Last Synced: 2024-12-10T07:10:58.251Z (16 days ago)
- Topics: hacktoberfest, jsx, markdown, readme
- Language: TypeScript
- Homepage: https://dbartholomae.github.io/jsx-readme/
- Size: 1.42 MB
- Stars: 15
- Watchers: 3
- Forks: 19
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
- Support: SUPPORT.md
Awesome Lists containing this project
README
# jsx-readme
[](https://npmjs.org/package/jsx-readme)
[](https://npm-stat.com/charts.html?package=jsx-readme)
[](https://bundlephobia.com/result?p=jsx-readme)
[](https://github.com/dbartholomae/jsx-readme/issues)
[](https://david-dm.org/dbartholomae/jsx-readme)
[](https://david-dm.org/dbartholomae/jsx-readme?type=dev)
[](https://github.com/dbartholomae/jsx-readme)
[](https://github.com/semantic-release/semantic-release#badge)
[](https://dbartholomae.github.io/jsx-readme)
[](http://hits.dwyl.com/dbartholomae/jsx-readme)
[](https://github.com/dbartholomae/jsx-readme/blob/main/LICENSE)
[](https://codecov.io/gh/dbartholomae/jsx-readme)
[](https://github.com/dbartholomae/jsx-readme/actions?query=workflow%3A"Build%20and%20deploy")
[](https://discord.com/invite/X9HRSK5)
[](https://cla-assistant.io/dbartholomae/jsx-readme)
[](https://github.com/dbartholomae/jsx-readme)
Generate Readme files with a React\-like syntax and package\.json\-aware helpers\.
## 🛠 Installation
Add `jsx-readme` and `ts-node` to your `devDependencies`.
```sh
npm i jsx-readme ts-node -D
```
Add these configs to your `tsconfig.json`:
```json
{
"compilerOptions": {
"resolveJsonModule": true,
"jsx": "react"
}
}
```
Create a README.MD template (you may copy the example from this repo examples/README.md.tsx and edit to your taste). Add the following script to your `package.json`:
```json
{
"scripts": {
"generate:readme": "ts-node README.md.tsx"
}
}
```
## 🔬 Examples
### package.json
```json
{
"name": "jsx-readme",
"version": "0.0.0",
"description": "Generate Readme files with a React-like syntax and package.json-aware helpers.",
"main": "lib/index.js",
"types": "lib/index.d.ts",
"scripts": {
"build": "rimraf lib && tsc -p tsconfig.build.json",
"docs": "typedoc && touch docs/.nojekyll",
"lint": "eslint src/**/*.ts src/**/*.tsx examples/**/*.tsx",
"test": "jest && pkg-ok"
},
"engines": {
"node": ">=12.4.0"
},
"files": [
"lib"
],
"keywords": [
"Markdown",
"generator",
"JSX",
"MD",
"Readme"
],
"author": "Daniel Bartholomae (https://startup-cto.net)",
"license": "MIT",
"homepage": "https://dbartholomae.github.io/jsx-readme-test-fixture",
"repository": "[email protected]:dbartholomae/jsx-readme-test-fixture.git",
"bugs": "https://github.com/dbartholomae/jsx-readme-test-fixture/issues",
"directories": {
"lib": "lib",
"doc": "docs",
"example": "examples"
},
"dependencies": {
"jsx-md": "^1.2.0"
},
"devDependencies": {
"@commitlint/cli": "^9.1.2",
"@commitlint/config-conventional": "^9.1.2",
"@semantic-release/git": "^9.0.0",
"@types/jest": "^26.0.10",
"@types/react": "^16.9.49",
"@typescript-eslint/eslint-plugin": "^4.1.0",
"@typescript-eslint/parser": "^4.1.0",
"eslint": "^7.8.1",
"eslint-config-prettier": "^6.10.1",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.20.6",
"husky": "^4.2.5",
"jest": "^26.4.2",
"lint-staged": "^10.2.13",
"pkg-ok": "^2.3.1",
"prettier": "^2.1.0",
"rimraf": "^3.0.2",
"semantic-release": "^17.1.1",
"ts-jest": "^26.2.0",
"tslib": "^2.0.1",
"typedoc": "^0.19.1",
"typedoc-plugin-param-names": "^1.0.2",
"typedoc-plugin-sourcefile-url": "^1.0.6",
"typescript": "^4.0.2"
}
}
```
### README.md.tsx
```tsx
// We need to tell the JSX transpiler that in this file,
// instead of React we use the custom createElement and Fragment
// functions from jsx-readme
/* @jsx MD */
/* @jsxFrag Fragment */
import type { Component } from "jsx-readme";
import MD, {
BadgesFromPkg,
CodecovBadge,
ContributingSection,
DescriptionFromPkg,
ExamplesFromPkg,
Fragment,
GithubWorkflowBadge,
CLAAssistantBadge,
HomepageFromPkg,
renderToFile,
TitleFromPkg,
DiscordBadge,
HacktoberfestBadge,
LicenseBadge,
LicenseFromPkg,
ContributorsSectionFromPkg,
} from "jsx-readme";
import { CodeBlock, Heading, InlineCode, LineBreak } from "jsx-md";
import pkg from "./package.json";
const Readme: Component = () => (
{/* Create a header with title, badges and description inferred from package.json */}
{/* Add additional badges. */}
{/* You can use the components from jsx-md to build custom markdown. */}
🛠 Installation
Add jsx-readme and ts-node{" "}
to your devDependencies.
npm i jsx-readme ts-node -D
Add these configs to your tsconfig.json:
{`
{
"compilerOptions": {
"resolveJsonModule": true,
"jsx": "react"
}
}
`}
Create a README.MD template (you may copy the example from this repo
examples/README.md.tsx and edit to your taste). Add the following script to
your package.json:
{`
{
"scripts": {
"generate:readme": "ts-node README.md.tsx"
}
}
`}
{/* Create an example section based on all files from the example directory set up in package.json */}
{/* Create a section linking to the homepage from package.json */}
{/* Create a section linking to the contributing guidelines file */}
{/* Create a section linking to the contributors of the repo */}
{/* Create a section linking to the license file. */}
);
void renderToFile("./test/README.actual.md", );
```
## 🏠 Homepage
You can find more about this on [https://dbartholomae.github.io/jsx-readme](https://dbartholomae.github.io/jsx-readme).
## 🖋️ Contributing
If you are interested in contributing to this repository, please read up on the details in our [contributing guidelines](./CONTRIBUTING.md).
## 💼 Contributors
This package only works thanks to [all of our contributors](https://github.com/dbartholomae/jsx-readme/graphs/contributors).
dbartholomae
semantic-release-bot
junwen-k
KwanJunWen
MDShields7
AJMcDee
tancredosouza
anshdhinhgra47
Pipo93
jruipinto
Ruchika30
[+ 2 contributors](https://github.com/dbartholomae/jsx-readme/graphs/contributors)
## 🤝 Show your support
Give a ⭐ if this package helped you! You can also support the development of this package by funding.
* [github.com](https://github.com/sponsors/dbartholomae)
## 📜 License
MIT. See [LICENSE file](./LICENSE) for details.