https://github.com/codemeasandwich/auto-docs
A screenshot & markdown generator
https://github.com/codemeasandwich/auto-docs
Last synced: 10 months ago
JSON representation
A screenshot & markdown generator
- Host: GitHub
- URL: https://github.com/codemeasandwich/auto-docs
- Owner: codemeasandwich
- Created: 2017-12-08T13:53:40.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2019-01-30T13:40:45.000Z (over 7 years ago)
- Last Synced: 2025-07-07T11:44:49.509Z (about 1 year ago)
- Language: JavaScript
- Size: 145 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: ReadMe.md
Awesome Lists containing this project
README
## A screenshot & markdown generator
[](https://www.npmjs.com/package/auto-docs)
### Installing
* npm install -g testcafe
* npm install -g docsify-cli
* npm install --save-dev auto-docs
### In you package.json
```json
"scripts": {
"manual": "testcafe \"chrome:headless --kiosk --incognito --force-device-scale-factor=1.5\" node_modules/auto-docs/ -s docs/pics",
"files": "node node_modules/auto-docs/",
"serve": "docsify serve docs"
}
```
**To generate with screenshots** `npm run manual`
also
**To run without [brower commands](#brower-commands) use** `npm run files`
Once generated.
**To run document server** `npm run serve`
How you can open [localhost:3000](http://localhost:3000)
# Api
### brower commands
* navigateTo: go to a given url - (url)
* typeText: enter text into an input - (selecter,text)
* click: click on an element - (selecter)
### document commands
* description: Add basic text to document - (text)
* screenshot: Capture the screen and add to document - (screenshot_name,[diff]) ***diff** defult to `true`* check if the screen has chacked
* link: Add a link to document (title,url)
* img: Add a image to document (title,url)
* lang: apply translation from ##.json `` lang`message` ``
* Injects new text into language json file if new/missing
* generating of language json file if missing
* With value passion recording. Used in language like *Arabic, Chinese, Hindi, Japanese etc..*
* code: Add a block of code to document (source,[type]) ***type** of optional*
* pageBreak: Add a link break to document () ~ No arguments
* title: Add a heading to document (text) or (level,text) *to set the depth of the sub heading*
* youtube: A thumbnail link to a video (video_id,[start from X sec]) ***start** of optional*
* You will need a "playbutton.png" in your "pics" folder
* You will also need the CSS to place the button
CSS: youtube button placement
Add this CSS
```
p{
position: relative;
}
img[alt='videobutton']{
pointer-events: none;
position: absolute;
z-index: 3;
top: calc( 50% - 50px);
left: calc( 50% - 50px);
width: 100px;
}
```
JS: embed youtube video
Add this index.html
```JS
window.$docsify = {
plugins: [
function (hook, vm) {
hook.afterEach(function(html, next) {
if(html.includes("youtube")){
$(html).find("img[src*='youtube']").parent().toArray()
.map(elem => $(elem))
.forEach( elemA =>{
const link = elemA.attr("href")
const [id ,time] = link.split("/").pop().split("?")
const start = time ? time.match(/\d+/)[0] : 0
const elemToReplace = elemA.parent().html().replace(new RegExp(" data-origin=", "g"),"data-origin=")
const newElem = ``
html = html.replace(elemToReplace,newElem)
} )
}
next(html)
})
}
]
// ...
}
```
## Config file
From with the manual folder you should place a **config.json** file
Example:
```json
{
"server":"http://localhost:3000/myapp/",
"only":["1-Welcome","1-How to log in"],
"waitBeforeScreenShot":1000,
"login":{
"user":["#username", "admin"],
"pass":["#password", "admin"],
"url":"login.html",
"button":"#loginButton"
}
}
```
* server: the path to your server
* only: An array of file steps to the page you want to regenerate *optional!*
* waitBeforeScreenShot: how long to wite for taking a ScreenShot *optional!* (Default: 0)
* login: login credentials to use