Code Monkey home page Code Monkey logo

spank's Introduction

spank

Static Site Generator (SSG)

Exports HTML pages from your SPA

Usage

//spank.config.js
module.exports = {
  sitemap: 'path/to/a-list-of-urls.json',
  template: 'dist/__index.html',
  script: 'dist/main.js',
  outputDir: 'dist'
}

open your terminal and type

npx spank
Note

spank can also be used without a config. Use npx spank --help for parameters.


Config options

prop default description
sitemap array of paths. Eg. ['/', '/about', '/contact']. Can also be a path to a .js file exporting an array of paths. Eg. ./sitemap.js
template dist/__app.html path to the HTML template to render the SPA in. Often static/index.html
script dist/build/bundle.js Path to the app script. Often dist/build/bundle.js or dist/build/main.js
outputDir dist Folder to save HTML files to.
forceIndex false Write /about to about/index.html instead of about.html
inlineDynamicImports false Required if app uses dynamic imports
concurrently 3 Max simultaneous running jobs
eventName If specified, HTMLs aren't saved till the page has emitted the event.
host http://jsdom.ssr Simulated host
blacklist [] List of paths to be ignored. Regular expressions are supported when using spank.config.js
depth 2 How far to crawl any path in the sitemap
ssrOptions {} Options to be passed to tossr

How does it work?

For each path in the sitemap, Spank creates a corresponding SPA in a simulated browser. Spank will crawl pages in the sitemap as far as depth is set. The HTML for each page is then saved to the output folder.


routify

spank's People

Contributors

jakobrosenberg avatar juljimm avatar knopki 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

Watchers

 avatar  avatar  avatar  avatar  avatar

spank's Issues

Runtime error if package.json does not contain a field "dependencies"

Failed on project with dev-dependencies only:

➜ spank
⠋ Looking for matching config(node:21433) UnhandledPromiseRejectionWarning: TypeError: Cannot convert undefined or null to object
    at Function.assign (<anonymous>)
    at getFrameworkConfig (/home/sk/dev/<cut>/node_modules/spank/getConfig.js:23:12)
    at Object.getConfig (/home/sk/dev/<cut>/node_modules/spank/getConfig.js:11:35)
    at cli (/home/sk/dev/<cut>/node_modules/spank/cli.js:8:51)
    at Object.<anonymous> (/home/sk/dev/<cut>/node_modules/spank/cli.js:29:3)
    at Module._compile (internal/modules/cjs/loader.js:955:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
    at Module.load (internal/modules/cjs/loader.js:811:32)
    at Function.Module._load (internal/modules/cjs/loader.js:723:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1043:10)
(node:21433) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:21433) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
⠙ Looking for matching config⏎                                                                >

Not Working with Vite CSS Code Split

When Vite cssCodeSplit option is set to true, Spank does not gererate HTML files with content inside.

Without cssCodeSplit:

image

With cssCodeSplit:

image

As you can see, without cssCodeSplit the content are all inside the HTML as it is intended to be.
Additionally, with CSS Code Split, it shows some errors on terminal:

[tossr] /index Waited for the event "app-loaded", but timed out after 5000 ms.
⠇ Exporting 5 of 5 /settings[tossr] /settings Waited for the event "app-loaded", but timed out after 5000 ms.

Not usable on Linux because of carriage return on shebang line

[email protected] doesn't work on Linux:

> node_modules/.bin/spank
/usr/bin/env: ‘node\r’: No such file or directory

It's because of DOS-style CR-LF line endings and not Unix-style LF line endings:

➜ file node_modules/spank/cli.js
node_modules/spank/cli.js: Node.js script, ASCII text executable, with CRLF line terminators

Simple convertation (sed -e 's/\r//g' -i node_modules/spank/cli.js) fixes this.

multiple folders when building with routify's $url

Firstly, I must commend your amazing works. They've made life easier.

When I use routify's helper function $url to generate links, spank goes on to generate multiple recursive folders and files. When I use normal href, it works fine.
Something like:

── register
│   ├── contact-us
│   │   ├── contact-us
│   │   │   └── index.html
│   │   ├── index.html
│   │   ├── privacy-policy
│   │   │   └── index.html
│   │   └── terms
│   │   └── index.html
│   ├── index.html
│   ├── privacy-policy
│   │   ├── contact-us
│   │   │   └── index.html
│   │   ├── index.html
│   │   ├── privacy-policy
│   │   │   └── index.html
│   │   └── terms
│   │   └── index.html

Please, look into it at your convenience. The workaround is to have normal

<a href='/take-me-home'>...</a>

instead of

<a href={$url('take-me-home')}>...</a>

Thanks.

UnhandledPromiseRejection

Rollup works but spank fails--I think I'm missing something obvious.

✔ Found matching config: Routify 2
✔ Found matching config: Routify 2
✔ Inline dynamic imports
⠙ Exporting 3 of 29 /demo1/new/
/
false
/
/
false
node:internal/process/promises:225
          triggerUncaughtException(err, true /* fromPromise */);
          ^

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "TypeError: Cannot read property 'h' of undefined".] {
  code: 'ERR_UNHANDLED_REJECTION'
}
npm ERR! code 1
npm ERR! path /workspace/envstats/WebAPI/ClientApp
npm ERR! command failed
npm ERR! command sh -c spank

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/vscode/.npm/_logs/2020-12-19T00_28_11_790Z-debug.log

And this log file:

0 verbose cli [
0 verbose cli   '/usr/bin/node',
0 verbose cli   '/usr/lib/node_modules/npm/bin/npm-cli.js',
0 verbose cli   'exec',
0 verbose cli   '--',
0 verbose cli   'spank'
0 verbose cli ]
1 info using [email protected]
2 info using [email protected]
3 timing config:load:defaults Completed in 1ms
4 timing config:load:file:/usr/lib/node_modules/npm/npmrc Completed in 0ms
5 timing config:load:builtin Completed in 0ms
6 timing config:load:cli Completed in 1ms
7 timing config:load:env Completed in 1ms
8 timing config:load:file:/workspace/envstats/WebAPI/ClientApp/.npmrc Completed in 0ms
9 timing config:load:project Completed in 0ms
10 timing config:load:file:/home/vscode/.npmrc Completed in 0ms
11 timing config:load:user Completed in 0ms
12 timing config:load:file:/usr/etc/npmrc Completed in 1ms
13 timing config:load:global Completed in 1ms
14 timing config:load:cafile Completed in 0ms
15 timing config:load:validate Completed in 0ms
16 timing config:load:setUserAgent Completed in 0ms
17 timing config:load:setEnvs Completed in 1ms
18 timing config:load Completed in 5ms
19 verbose npm-session e242f07d77785c2b
20 timing npm:load Completed in 10ms
21 timing command:exec Completed in 13334ms
22 verbose stack Error: command failed
22 verbose stack     at ChildProcess.<anonymous> (/usr/lib/node_modules/npm/node_modules/@npmcli/promise-spawn/index.js:64:27)
22 verbose stack     at ChildProcess.emit (node:events:376:20)
22 verbose stack     at maybeClose (node:internal/child_process:1055:16)
22 verbose stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:288:5)
23 verbose pkgid [email protected]
24 verbose cwd /workspace/envstats/WebAPI/ClientApp
25 verbose Linux 4.19.104-microsoft-standard
26 verbose argv "/usr/bin/node" "/usr/lib/node_modules/npm/bin/npm-cli.js" "exec" "--" "spank"
27 verbose node v15.3.0
28 verbose npm  v7.0.14
29 error code 1
30 error path /workspace/envstats/WebAPI/ClientApp
31 error command failed
32 error command sh -c spank
33 verbose exit 1

Need a way to not follow URLs

I'm attempting to generate a static site with routify export, which directed my to spank. However, when I try to generate the site I get a structure like this:

── page1
│   ├── index.html
│   └── mailto:[email protected]
│       ├── index.html
│       └── mailto:[email protected]
│           └── index.html
── page2
│   ├── index.html
│   └── mailto:[email protected]
│       ├── index.html
│       └── mailto:[email protected]
│           └── index.html
...

etc, for every page. What's going on is I have a mailto: link in my footer, so it's on every page. This link is recursively crawled, which leads to a 404 (the index.html subtree), and that error gets crawled again, to a depth of 2 for every page I have. I tried adding target="_self" and rel="nofollow" attributes, but they didn't help and I didn't see any documented way to not follow a link. Is there one in the works or could I help add it?

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.