{"id":15497185,"url":"https://github.com/jwerle/canvas-sketch-render-service","last_synced_at":"2025-04-22T21:33:10.987Z","repository":{"id":57193775,"uuid":"183114745","full_name":"jwerle/canvas-sketch-render-service","owner":"jwerle","description":"A HyperSource service based on HyperDrive that converts a Canvas Sketch project into production bundle.","archived":false,"fork":false,"pushed_at":"2019-04-25T17:26:22.000Z","size":32,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-14T13:45:30.455Z","etag":null,"topics":["canvas","hypersource","render","service","sketch","websocket"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jwerle.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-04-24T00:16:30.000Z","updated_at":"2023-02-20T16:31:10.000Z","dependencies_parsed_at":"2022-09-15T22:31:11.151Z","dependency_job_id":null,"html_url":"https://github.com/jwerle/canvas-sketch-render-service","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jwerle%2Fcanvas-sketch-render-service","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jwerle%2Fcanvas-sketch-render-service/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jwerle%2Fcanvas-sketch-render-service/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jwerle%2Fcanvas-sketch-render-service/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jwerle","download_url":"https://codeload.github.com/jwerle/canvas-sketch-render-service/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250328982,"owners_count":21412729,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","hypersource","render","service","sketch","websocket"],"created_at":"2024-10-02T08:31:28.843Z","updated_at":"2025-04-22T21:33:10.956Z","avatar_url":"https://github.com/jwerle.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"canvas-sketch-render-service\n============================\n\nA [HyperSource](https://github.com/jwerle/hypersource) service based\non HyperDrive that converts a\n[Canvas Sketch]( https://github.com/mattdesl/canvas-sketch) project\ninto production bundle delivered back to you in a HyperDrive archive.\n\n## Installation\n\n```js\n$ npm install canvas-sketch-render-service\n```\n\nor (see usage)\n\n```sh\n$ npx canvas-sketch-render-service [options]\n```\n\n## Usage\n\n**canvas-sketch-render-service** can be used in various ways. The\nservice can be started by running the `canvas-sketch-render-service`\ncommand with a few arguments or by using the module directly to create\nand run your own server.\n\n### Command Line\n\n```\nusage: canvas-sketch-render-service [-hDV] [options]\n\nwhere options can be:\n\n  -r, --registry \u003cpath\u003e   Path to HyperDrive registry\n  -d, --data \u003cpath\u003e       Path to where temporary data cache\n  -p, --port \u003cport\u003e       Server port to listen on\n  -H, --host \u003chost\u003e       Server host to listen on\n  -D, --debug             Enable debug output\n  -h, --help              Show this message\n  -V, --version           Show program version\n\n```\n\nStart a server running on port `3000` by running:\n\n```sh\n$ canvas-sketch-render-service --port 3000\n```\n\nBy default the command line program will create and access a registry at\n`./canvas-sketch-registry` if one is not supplied. The path should point\nto a [HyperDrive](https://github.com/mafintosh/hyperdrive) instance\nwhere the `key` and `secret_key` files are accessible. If you need to\nsupply your own registry where the keys are not living along the SLEEP\nfiles, then you will need to consume the module.\n\nSet the path to a HyperDrive instance\n\n```sh\n$ canvas-sketch-render-service --port 3000 --registry data\nUsing registry at /home/werle/repos/canvas-sketch-render-service/data\nUsing TMPDIR at /tmp\nCanvasSketch render server listening on ws://127.0.0.1:3000\n```\n\n### Module\n\nThe server can be started programmatically by using the module code\ndirectly.\n\n```js\nconst { createServer } = require('canvas-sketch-render-service')\nconst hyperdrive = require('hyperdrive')\nconst ram = require('random-access-memory')\n\nconst registry = hyperdrive('/path/to/drive', getHyperDriveOptions())\nconst server = createServer({ registry })\n\nserver.listen(3000, (err) =\u003e {\n  console.log(err);\n  console.log('listening on', server.address());\n})\n```\n\n## API\n\n### `server = createServer(opts)`\n\nCreate a new `canvas-sketch-render-service` server where `opts` can be\n\n```js\n{\n  registry: Object, // A HyperDrive instance that will be the registry\n  server: Object, // An optional HTTP server for the WebSocket server\n  tmpdir: String, // Path to a temporary data cache directory\n}\n```\n\n## Client API\n\nUsers can submit a new sketch to be built by opening up a WebSocket to\n`/:key` where `:key` is a hex encoded 64 character long string that\nrepresents the public key of the HyperDrive archive that contains the\nassets.\n\n```js\nconst key = drive.key.toString('hex')\nconst socket = new WebSocket(`ws://your-domain.com/${key}`)\n```\n\nThe socket connection should be a pure\n[hypercore-protocol](https://github.com/mafintosh/hypercore-protocol)\nreplication stream. The client should replicate the HyperDrive\narchive associated with the public key in the URI.\n\n```js\nstream.pipe(socket).pipe(stream)\n```\n\nThe `'handshake'` event indicates that the service has established a\nchannel and provides a response key to read output from the service. The\nclient should replicate the response archive from the server. This has\nthe final built sketch!\n\n```js\nstream.on('handshake', () =\u003e {\n  const response = hyperdrive(ram, stream.remoteUserData)\n  response.replicate({ stream, live: true })\n})\n```\n\nThe server should send the built asset to the response archive. The\nclient can listen for the `'update'` event which should indicate the\nserver has sent the built sketch.\n\n```js\nresponse.on('update', () =\u003e {\n  response.readFile('index.html', (err, buf) =\u003e {\n    console.log(buf.toString() // '\u003c!doctype html\u003e\u003chtml lang=en\u003e\u003cmeta char ...'\n  })\n})\n```\n\n## Example\n\nBelow is a simple example of an in memory registry and\n`canvas-sketch-render-service` server.\n\n### Server\n\n```js\nconst { createServer } = require('canvas-sketch-render-service')\nconst hyperdrive = require('hyperdrive')\nconst ram = require('random-access-memory')\n\nconst registry = hyperdrive(ram)\nconst server = createServer({ registry })\n\nregistry.ready(() =\u003e {\n  registry.writeFile('dat.json', JSON.stringify({\n    title: 'A Canvas Sketch Rendering Service',\n    description: 'Try me out',\n  }))\n})\n\nserver.listen(3000, (err) =\u003e {\n  console.log(err);\n  console.log('listening on', server.address());\n})\n```\n\n### Client\n\nThe client example bundles a sketch and sends it to the server. The\nresponse is then written to disk.\n\n```js\nconst hyperdrive = require('hyperdrive')\nconst WebSocket = require('simple-websocket')\nconst mkdirp = require('mkdirp')\nconst pify = require('pify')\nconst pump = require('pump')\nconst ram = require('random-access-memory')\nconst fs = require('fs')\n\nconst bundle = hyperdrive(ram)\n\nbundle.ready(async () =\u003e {\n  const key = bundle.key.toString('hex')\n  const socket = new WebSocket(`ws://localhost:3000/${key}`)\n\n  bundle.writeFile('package.json', Buffer.from(`\n    {\n      \"name\": \"my-sample-sketch\",\n      \"version\": \"1.0.0\",\n      \"description\": \"\",\n      \"main\": \"index.js\",\n      \"author\": \"\",\n      \"license\": \"ISC\",\n      \"dependencies\": {\n        \"canvas-sketch\": \"^0.3.0\",\n        \"canvas-sketch-util\": \"^1.8.0\",\n      }\n    }\n  `))\n\n  bundle.writeFile('index.js', Buffer.from(`\n    const canvasSketch = require('canvas-sketch');\n\n    // Sketch parameters\n    const settings = {\n      dimensions: 'a4',\n      pixelsPerInch: 300,\n      units: 'in'\n    };\n\n    // Artwork function\n    const sketch = () =\u003e {\n      return ({ context, width, height }) =\u003e {\n        // Margin in inches\n        const margin = 1 / 4;\n\n        // Off-white background\n        context.fillStyle = 'hsl(0, 0%, 98%)';\n        context.fillRect(0, 0, width, height);\n\n        // Gradient foreground\n        const fill = context.createLinearGradient(0, 0, width, height);\n        fill.addColorStop(0, 'cyan');\n        fill.addColorStop(1, 'orange');\n\n        // Fill rectangle\n        context.fillStyle = fill;\n        context.fillRect(margin, margin, width - margin * 2, height - margin * 2);\n      };\n    };\n\n    // Start the sketch\n    canvasSketch(sketch, settings);\n  `)\n\n  const stream = bundle.replicate({ live: true }).once('handshake', onhandshake)\n  pump(stream, socket, stream)\n\n  function onhandshake() {\n    console.log('Handshake complete')\n    const response = hyperdrive(ram, stream.remoteUserData, { sparse: true })\n\n    response.replicate({ stream, live: true })\n    response.on('update', onupdate)\n\n    console.log('Waiting for response from server')\n    async function onupdate() {\n      const output = path.resolve(__dirname, 'build/')\n      await pify(mkdirp)(output)\n\n      const reader = response.createReadStream('index.html')\n      const writer = fs.createWriteStream(path.resolve(output, 'index.html'))\n\n      pump(reader, writer)\n    }\n  }\n})\n```\n\n## Browser Preview\n\nThe `canvas-sketch-render-service` server also runs\n[hyperdrive-http](https://github.com/datproject/hyperdrive-http)\nmiddleware over the supplied registry. All submissions are stored in the\nregistry indexed by their public key.\n\nBelow is an example of an archive made available over HTTP:\n\n```\nhttp://localhost:3000/a9143642ef9afeb7b414af89a183f779c520417f006ef5f623d42040bb3ceeda\n```\n\n## License\n\nMIT\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjwerle%2Fcanvas-sketch-render-service","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjwerle%2Fcanvas-sketch-render-service","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjwerle%2Fcanvas-sketch-render-service/lists"}