{"id":13649847,"url":"https://github.com/kireerik/refo","last_synced_at":"2026-01-31T01:40:32.067Z","repository":{"id":42341720,"uuid":"159562975","full_name":"kireerik/refo","owner":"kireerik","description":"A website template for the modern web. ⭐️ Star to support our work!","archived":false,"fork":false,"pushed_at":"2025-04-08T19:31:59.000Z","size":2339,"stargazers_count":13,"open_issues_count":2,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-22T15:44:02.074Z","etag":null,"topics":["build-tool","components","css","developer-tools","hot-module-replacement","html","javascript","landing-pages","modules","node","portfolio","resume","server","server-side-rendering","ssg","static","static-site","static-site-generator","web","web-performance"],"latest_commit_sha":null,"homepage":"https://kireerik.github.io/refo/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kireerik.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-11-28T20:49:29.000Z","updated_at":"2025-04-08T19:32:02.000Z","dependencies_parsed_at":"2024-03-12T04:26:41.815Z","dependency_job_id":"4f1e746c-c4ce-4387-9d9d-593892926b23","html_url":"https://github.com/kireerik/refo","commit_stats":null,"previous_names":[],"tags_count":12,"template":true,"template_full_name":null,"purl":"pkg:github/kireerik/refo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kireerik%2Frefo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kireerik%2Frefo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kireerik%2Frefo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kireerik%2Frefo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kireerik","download_url":"https://codeload.github.com/kireerik/refo/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kireerik%2Frefo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28926353,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-30T22:32:35.345Z","status":"ssl_error","status_checked_at":"2026-01-30T22:32:31.927Z","response_time":66,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["build-tool","components","css","developer-tools","hot-module-replacement","html","javascript","landing-pages","modules","node","portfolio","resume","server","server-side-rendering","ssg","static","static-site","static-site-generator","web","web-performance"],"created_at":"2024-08-02T02:00:27.899Z","updated_at":"2026-01-31T01:40:32.048Z","avatar_url":"https://github.com/kireerik.png","language":"JavaScript","funding_links":[],"categories":["ℹ️ Repositories/Starter Kits/Components"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eRefo\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n\tA website template for the modern web.\n\t\u003cbr\u003ePowerful developer experience meets lightweight output.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\t\u003ca title=\"Refo maintainability details\" href=\"https://codeclimate.com/github/kireerik/refo/maintainability\"\u003e\u003cimg alt=\"Refo maintainability details\" src=\"https://api.codeclimate.com/v1/badges/b6a2bf056f91db99df93/maintainability\"\u003e\u003c/a\u003e\n\t\u003ca title=\"Refo package downloads\" href=\"https://www.npmjs.com/package/refo\"\u003e\u003cimg alt=\"Refo package downloads\" src=\"https://img.shields.io/npm/dt/refo.svg\"\u003e\u003c/a\u003e\n\t\u003ca title=\"join the Refo community\" href=\"https://github.com/kireerik/refo/discussions\"\u003e\u003cimg alt=\"join the Refo community\" src=\"https://img.shields.io/github/discussions/kireerik/refo?labelColor=%238a2be2\u0026color=%238a2be2\u0026label=%F0%9F%92%AC%20join%20the%20community\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n\t\u003ca title=\"⯅ Upvote to support our work!\" href=\"https://www.producthunt.com/posts/refo?utm_source=badge-featured\u0026utm_medium=badge\u0026utm_souce=badge-refo\" target=\"_blank\"\u003e\u003cimg src=\"https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=443512\u0026theme=light\" alt=\"Refo - A\u0026#0032;website\u0026#0032;template\u0026#0032;for\u0026#0032;the\u0026#0032;modern\u0026#0032;web | Product Hunt\" style=\"width: 250px; height: 54px;\" width=\"250\" height=\"54\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n**Effortless Static Site Generation with Flexibility**\n\nFeeling overwhelmed by the static site generator landscape? Refo offers a refreshingly simple and customizable approach **built entirely on Node.js**.\n\nUnlike Jekyll, Gatsby, Astro and others, we let you leverage the power of Node.js modules directly. This means you can generate any kind of website you can imagine, all with the flexibility of your favorite Node.js libraries and servers.\n\n**Key benefits:**\n- **Effortless Development**: Edit your modules and see instant updates thanks to hot reloading.\n- **Unmatched Flexibility**: Import `SVG`s, utilize `raw` imports, and `style` your components with ease.\n- **Data-Driven Content**: Craft resumes, portfolios, or any data-driven website with ease.\n- **Highly Customizable**: No rigid folder structures, minify class names, or even swap out SolidJS for React – it's entirely up to you.\n\n**Go beyond the limitations of traditional static site generators. Embrace the power and flexibility of Refo for your next project!**\n\n\u003cp align=\"center\"\u003e\n\t⭐️ Star to support our work!\n\t\u003cbr\u003eGet notified about new releases via \u003ca title=\"GitPunch\" href=\"https://gitpunch.com/\"\u003e\u003cimg alt=\"GitPunch\" src=\"https://raw.githubusercontent.com/vfeskov/gitpunch/master/client/src/big-logo.png\" width=\"77\" height=\"18\"\u003e\u003c/a\u003e emails.\n\u003c/p\u003e\n\n## Features\n- (**H**ot) **M**odule **R**eloading using [dynohot](https://github.com/braidnetworks/dynohot)\n- JavaScript eXtensible markup language using \u003ca title=\"SolidJS · Reactive Javascript Library\" href=\"https://www.solidjs.com/\"\u003e\u003cimg alt=\"SolidJS\" src=\"https://www.solidjs.com/img/logo/with-wordmark/logo.svg\" width=\"\" height=\"18\"\u003e\u003c/a\u003e and [babel-preset-solid](https://github.com/solidjs/solid/tree/main/packages/babel-preset-solid)\n- [Node.js module customization](https://nodejs.org/api/module.html#customization-hooks)\n\t- importing SVGs as components\n\t- `raw` imports\n\t- (Java)Script bundling\n\t- Extensionless imports using [specifier-resolution-node](https://github.com/Poyoman39/specifier-resolution-node)\n- [Style](https://github.com/kireerik/refo/tree/main/index/module/style)d components using \u003ca title=\"Emotion\" href=\"https://emotion.sh/docs/introduction\"\u003e\u003cimg alt=\"Emotion\" src=\"https://raw.githubusercontent.com/emotion-js/emotion/f3b268f7c52103979402da919c9c0dd3f9e0e189/site/public/logo-96x96.png\" width=\"\" height=\"18\"\u003e Emotion\u003c/a\u003e\n\t- [Short class name](https://github.com/kireerik/refo/blob/main/index/module/style/css/getShortName.js)s (like `a`, `b`, `c`, ..., `aa`, `ab`, ...)\n\t- [Class name label](https://github.com/kireerik/refo/blob/main/index/module/style/css/getModuleName.js)s in `development` mode using [stack-tracer](https://github.com/bninni/stack-tracer)\n- [Image](https://github.com/kireerik/refo/blob/main/index/module/image.jsx) dimensions setting using [image-size](https://github.com/image-size/image-size)\n- \u003ca title=\"HTML5\" href=\"https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5\"\u003e\u003cimg alt=\"HTML5\" src=\"https://www.w3.org/html/logo/downloads/HTML5_Logo.svg\" width=\"\" height=\"18\"\u003e HTML\u003c/a\u003e and inline \u003ca title=\"CSS\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\"\u003e\u003cimg alt=\"CSS\" src=\"https://svgshare.com/i/ugQ.svg\" width=\"\" height=\"18\"\u003e CSS\u003c/a\u003e and \u003ca title=\"JavaScript\" href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript\"\u003e\u003cimg alt=\"JavaScript\" src=\"https://svgshare.com/i/ug3.svg\" width=\"\" height=\"18\"\u003e JS\u003c/a\u003e minification using [HTMLMinifier terser](https://github.com/terser/html-minifier-terser)\n- (Java)Script minification using [UglifyJS](https://skalman.github.io/UglifyJS-online/)\n- Client side [navigation](blob/main/example/index/navigator.js)\n- Link prefetching using [Quicklink](https://getquick.link/)\n- Lazy loading using [lazysizes](https://github.com/aFarkas/lazysizes)\n\u003cul\u003e\n\t\u003cli\u003e\u003ccode\u003eMarkdown\u003c/code\u003e support for strings in \u003ccode\u003eJSON\u003c/code\u003e files with \u003ca href=\"https://markdown-it.github.io/\"\u003emarkdown-it\u003c/a\u003e\u003c/li\u003e\n\t\t\u003cul\u003e\u003cli\u003eDuration calculation with \u003ca href=\"https://momentjs.com/\"\u003eMoment.js\u003c/a\u003e\u003c/li\u003e\u003c/ul\u003e\n\t\u003cli\u003e\u003ccode\u003ePDF\u003c/code\u003e generation using \u003ca title=\"Puppeteer\" href=\"https://developers.google.com/web/tools/puppeteer/\"\u003e\u003cimg alt=\"Puppeteer\" src=\"https://user-images.githubusercontent.com/10379601/29446482-04f7036a-841f-11e7-9872-91d1fc2ea683.png\" width=\"\" height=\"18\"\u003e Puppeteer\u003c/a\u003e with \u003ca href=\"https://github.com/gwuhaolin/chrome-finder\"\u003echrome-finder\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\n#### Highlights\n- Edit your resume data in a `JSON` file.\n- View and publish your resume as a `PDF`, an `HTML` `document` and or as a page on a website.\n\t- Design and customize resume layout with `HTML` and `CSS`.\n- Generate 1 or more `PDF`s supporting different formats like `Letter` and `A4`.\n\t- Refresh the `PDF` after saving changes to see the up to date `PDF`.\n\n## Getting Started\n- Initial steps\n\t- Install \u003ca title=\"Node.js\" href=\"https://nodejs.org/en/\"\u003e\u003cimg alt=\"Node.js\" src=\"https://upload.wikimedia.org/wikipedia/commons/d/d9/Node.js_logo.svg\" width=\"\" height=\"18\"\u003e\u003c/a\u003e, \u003ca title=\"Fast, disk space efficient package manager | pnpm\" href=\"https://pnpm.io/\"\u003e\u003cimg alt=\"pnpm\" src=\"https://d33wubrfki0l68.cloudfront.net/aad219b6c931cebb53121dcda794f6180d9e4397/17f34/assets/images/pnpm-standard-79c9dbb2e99b8525ae55174580061e1b.svg\" width=\"\" height=\"18\"\u003e\u003c/a\u003e and \u003ca title=\"Google Chrome\" href=\"https://www.google.com/chrome/\"\u003e\u003cimg alt=\"Google Chrome\" src=\"https://upload.wikimedia.org/wikipedia/commons/9/91/Google_Chrome_logo_and_wordmark_%282015%29.png\" width=\"\" height=\"18\"\u003e\u003c/a\u003e.\n\t- [Download](https://github.com/kireerik/refo/archive/refs/heads/main.zip) or [clone](x-github-client://openRepo/https://github.com/kireerik/refo) this repository.\n\t- Open a command prompt in this folder.\n\n\u003e Install dependencies:\n\u003e ```shell\n\u003e pnpm install\n\u003e ```\n\n\u003e Are you on some kind of Unix based system? Mac? Linux? If so you might want to change the `port` in the `index` module, which is set to `80` which works on Windows. [Superstatic](https://github.com/firebase/superstatic/)'s default is `3474` so you can remove it if you prefer.\n\nStart the server in development mode:\n\u003e ```shell\n\u003e pnpm dev\n\u003e ```\n\nVisit http://localhost/ to access the website.\n\n### Static site generation\nGenerate a static site:\n```shell\npnpm static\n```\nOpen the `index.html` within the `static` folder to access the website.\n\n## Main concept\n| `import`                                                    |   | generated file |\n| --- | --- | --- |\n| index/                                                      |   | `static`/ |\n| \u0026nbsp;\u0026nbsp; • favicon`.ico` (icon `file` (Node.js module)) |   | \u0026nbsp;\u0026nbsp; • favicon`.ico` |\n| \u0026nbsp;\u0026nbsp; • main`.js`​`.js` (Node.js `module`)            | → | \u0026nbsp;\u0026nbsp; • main`.js` |\n| \u0026nbsp;\u0026nbsp; • index`.html`​`.jsx` (Node.js `module`)        |   | \u0026nbsp;\u0026nbsp; • index`.html` |\n| firebase`.json`​`.js` (Node.js `module`)                     |   | firebase`.json` |\n\n\u003e The imported `file`s (which have a certain file extension (`ico`, `png`)) (Node.js) modules) copy the files themselves into the `static` folder when the modules are loaded. In module relading mode they remove them if they are not imported anymore.\n\n\u003e The `default` `export` of (Node.js) `module`s (which have a certain file extension (`js`, `json`, `html`) in their base file name) are written as the contents of the output files (into the `static` folder). The full file names of the output files are the base file names of the (Node.js) `module`s.\n\n\u003cp align=\"center\"\u003e⭐️ Star to support our work!\u003c/p\u003e\n\n## Simple page example source code\nindex`.html`​`.jsx` (`import`ed `module`):\n```Node.js\nimport template from '#@SolidJS/template'\n\nimport use from '#@style'\n\nconst [{styled}, extract] = use()\n\nconst Body = styled.body`\n\tfont-weight: bold;\n`\n\nexport default \u003c\u003e\n\t{template(`\u003c!DOCTYPE HTML\u003e`)}\n\t\u003chtml lang=\"en\"\u003e\n\t\t{template(`\u003chead\u003e`)}\n\t\t\t\u003cstyle\u003e{extract()}\u003c/style\u003e\n\t\t{template(`\u003c/head\u003e`)}\n\t\t\u003cBody\u003e\n\t\t\texample content\n\t\t\u003c/Body\u003e\n\t\u003c/html\u003e\n\u003c/\u003e\n```\n\nindex`.html` (generated file):\n```HTML\n\u003c!DOCTYPE HTML\u003e\u003chtml lang=en\u003e\u003chead\u003e\u003cstyle\u003e.a{font-weight:700}\u003c/style\u003e\u003c/head\u003e\u003cbody class=a\u003eexample content\u003c/body\u003e\u003c/html\u003e\n```\n\n## Deployment\n\n### [GitHub Pages](https://pages.github.com/)\nYou can deploy the static `docs` folder as it is.\n\nYou might want to change the `prefixum` in the following files according to the name of your `project site` repository:\n`index/index/site/`\n`main/`\n- [header/index.jsx#L6](https://github.com/kireerik/refo/blob/17b836cb6afa85373c3dc8591c2326a4c34b928a/example/index/index/site/main/header/index.jsx#L6)\n- [index.jsx#L7](https://github.com/kireerik/refo/blob/17b836cb6afa85373c3dc8591c2326a4c34b928a/example/index/index/site/main/index.jsx#L7)\n- `index/resume/index/index`\n   - [.jsx#L13](https://github.com/kireerik/refo/blob/17b836cb6afa85373c3dc8591c2326a4c34b928a/example/index/index/site/index/resume/index/index.jsx#L13)\n   - [/controls.jsx#L5](https://github.com/kireerik/refo/blob/17b836cb6afa85373c3dc8591c2326a4c34b928a/example/index/index/site/index/resume/index/index/controls.jsx#L5)\n\nYou can completely remove the `prefixum` in case you are publishing a `user or an organization site`.\n\n### [Firebase Hosting](https://firebase.google.com/products/hosting/)\n- Initial steps\n\t- Remove the `prefixum` from the files listed above under GitHub Pages Deployment.\n\t- Install and set up \u003ca title=\"Firebase CLI\" href=\"https://firebase.google.com/docs/cli/\"\u003e\u003cimg alt=\"Firebase\" src=\"https://firebase.google.com/downloads/brand-guidelines/SVG/logo-standard.svg\" width=\"\" height=\"18\"\u003e CLI\u003c/a\u003e.\n\t- Add a `.firebaserc` file with your Firebase project ID:\n\t\t```JSON\n\t\t{\n\t\t\t\"projects\": {\n\t\t\t\t\"default\": \"\u003cprojectId\u003e\"\n\t\t\t}\n\t\t}\n\t\t```\n\n\u003e Deploy your site to Firebase Hosting:\n\u003e ```shell\n\u003e pnpm deploy\n\u003e ```\n\n## Contribution\nIt can  be useful to separate the resume template and publish it as a new Refo package.\n\n\u003e [Open a new issue](https://github.com/kireerik/refo/issues/new) if you think so and let's discuss this. We can definitely implement this if it turns out to be useful.\n\n## About\n\nThis example uses Refo's JSON handler. So you can control how and whether certain properties are displayed from the [index/index/site/index/resume/data.js](https://github.com/kireerik/refo/blob/main/index/index/resume/data.js) file as described in Refo's readme at the [JSON handler](https://github.com/kireerik/refo#json-handler) Usage section.\n\n### Server\n\nThis project uses [superstatic](https://github.com/firebase/superstatic) to serve the generated static files. You can use any similar library to serve the files or no library at all in case you would like to browse the files directly. This can be useful for offline documentations for example.\n\nYou can remove superstatic and use [firebase-tools](https://github.com/firebase/firebase-tools) instead (which uses superstatic) if you prefer. In this case, you can modify the `scripts` in the `package.json` file and replace `superstatic` with `firebase serve` commands.\n\nThis project uses [concurrently](https://github.com/kimmobrunfeldt/concurrently) to run Refo in watch mode and serve the files with superstatic. You can use any similar library like [npm-run-all](https://github.com/mysticatea/npm-run-all) to run Refo and a server in parallel or no library at all if you don't need a file server.\n\nThe `firebase.json` file could be named as `superstatic.json` if you prefer. This template does not depend on Firebase itself. However, they provide one of if not the consistently fastest static hosting solution.\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ch3\u003eTemplating\u003c/h3\u003e\u003c/summary\u003e\n\nJavaScript [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) are used for templating HTML documents.\n\nThis example also uses [common-tags](https://github.com/declandewet/common-tags) in certain templates which allows using a shorter syntax in many cases.\n\nHere are some scenarios commonly used in this example:\n\nBy default you can display an optional value and use a [conditional operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) to prevent displaying false values like `undefined` for example:\n```JavaScript\nmodule.exports = `\n\t${item ? item : ''}\n`\n```\nCommon-tags does this for you. So you can use a shorter syntax with a tagged template literal:\n```JavaScript\nconst {html} = require('common-tags')\n\nmodule.exports = html`\n\t${item}\n`\n```\n\n\u0026nbsp;\n\nBy default you can display an optional template part and use a conditional operator to prevent displaying false values like `undefined` for example:\n```JavaScript\nmodule.exports = `\n\t${item ? `\n\t\t\u003cdiv\u003e\n\t\t\t` + item + `\n\t\t\u003c/div\u003e\n\t` : ''}\n`\n```\nWith common-tags you can use a simple condition with a [logical operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators) to achive the same:\n```JavaScript\nconst {html} = require('common-tags')\n\nmodule.exports = html`\n\t${item \u0026\u0026 `\n\t\t\u003cdiv\u003e\n\t\t\t` + item + `\n\t\t\u003c/div\u003e\n\t`}\n`\n```\n\n\u0026nbsp;\n\nBy default you can `join` the result when looping through an array of items to prevent displaying commas between the returned items:\n```JavaScript\nmodule.exports = `\u003csection\u003e\n\t${items.map(item =\u003e `\n\t\t\u003cdiv\u003e\n\t\t\t${item}\n\t\t\u003c/div\u003e\n\t`).join('')}\n\u003c/section\u003e`\n```\nCommon-tags does this for you. So you can use a shorter syntax:\n```JavaScript\nconst {html} = require('common-tags')\n\nmodule.exports = html`\u003csection\u003e\n\t${items.map(item =\u003e `\n\t\t\u003cdiv\u003e\n\t\t\t${item}\n\t\t\u003c/div\u003e\n\t`)}\n\u003c/section\u003e`\n```\n\n\u0026nbsp;\n\nWhen you are not using a tagged template literal with common-tags or with a similar library, then you can concatenate template parts with the `+` operator if you prefer:\n```JavaScript\nmodule.exports = `\n\t\u003cdiv\u003e\n\t\t` + item + `\n\t\u003c/div\u003e\n`\n```\nOr you can use a placeholder with the `${expression}` syntax instead:\n```JavaScript\nmodule.exports = `\n\t\u003cdiv\u003e\n\t\t${item}\n\t\u003c/div\u003e\n`\n```\nIn some cases, one of these can be easier to read than the other so you may use the style according to the context or you can choose one over the other and stay consistent. This example uses both.\n\u003c/details\u003e\n\n### Syntax highlighting\n\nSome code editors like [Atom](https://atom.io/) and GitHub, for example, highlights `html` tagged template literals as HTML as you can see this above as well.\n\n#### Sublime Text\n - Install [Package Control](https://packagecontrol.io/installation) and [JS Custom](https://packagecontrol.io/packages/JSCustom).\n - Go to `Preferencies / Package Settings / JS Custom / Settings`.\n - Edit the `JS Custom.sublime-settings — User` file:\n\t```JSON\n\t{\n\t\t\"configurations\": {\n\t\t\t\"Default\": {\n\t\t\t\t\"jsx\": true\n\t\t\t\t, \"custom_templates\": {\n\t\t\t\t\t\"styled_components\": true\n\t\t\t\t\t, \"lookaheads\": {\n\t\t\t\t\t\t\"\\\\\u003c\": \"scope:text.html.basic\"\n\n\t\t\t\t\t\t, \"\\\\.|height|padding|margin\": \"scope:source.js.css\"\n\n\t\t\t\t\t\t, \"import|minify|await|export|if|window|\\\\(|,\": \"scope:source.js\"\n\t\t\t\t\t}\n\t\t\t\t\t, \"tags\": {\n\t\t\t\t\t\t\"injectGlobal\": \"scope:source.js.css\"\n\t\t\t\t\t\t, \"css\": \"scope:source.js.css\"\n\n\t\t\t\t\t\t, \"html\": \"scope:text.html.basic\"\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\t```\n\nNow you can use the `JS Custom - Default` syntax highlight option for JavaScript files.\n\n## Usage\n\n### JSON handler\nThe JSON handler is a standalone package. It is mainly useful to handle resume related data, but you can use it for anything else too.\n\nYou can use it as you can see in the example ([asset/resume/getHandledJson.js](https://github.com/kireerik/refo/blob/ec14756dc0046ff7c007e0af1200f39678e3e632/example/asset/resume/getHandledJson.js#L9)) as well:\n\n```JavaScript\nconst handleJSON = require('refo-handle-json')\n\nvar json = JSON.parse(JSON.stringify(require('./data')))\n\njson = handleJSON(json)\n```\n\nIt is recommended to create a copy of the required JSON using the `JSON.parse(JSON.stringify(json))` functions for example when you are using Refo in `watch` mode ([related comment](https://github.com/sidorares/hot-module-replacement/issues/10#issuecomment-447473770)), because the JSON hander is changing object properties.\n\nThe JSON handler is parsing string object values as `Markdown` using markdown-it. Example: [example/asset/resume/data.json#L7](https://github.com/kireerik/refo/blob/90c4dd6b4010c14a6323833dc0af5c22d6676e12/example/asset/resume/data.json#L7)\n\nProperties which are ending with `-private` are ~~removed~~. Example: [example/asset/resume/data.json#L4](https://github.com/kireerik/refo/blob/90c4dd6b4010c14a6323833dc0af5c22d6676e12/example/asset/resume/data.json#L4)\n\u003cbr\u003eObjects which have a property named `private` are removed too.\n\nProperties which are ending with `-full` are only included when a second true value parameter is passed to the handler function. Example: [example/asset/resume/data.json#L8](https://github.com/kireerik/refo/blob/90c4dd6b4010c14a6323833dc0af5c22d6676e12/example/asset/resume/data.json#L8), [example/asset/resume/getHandledJson.js#L9](https://github.com/kireerik/refo/blob/main/example/asset/resume/getHandledJson.js#L9)\n\u003cbr\u003eObjects which have a property named `full` are only included when a second true value parameter is passed to the handler function.\n\n#### Period\n\nWhen an object contains a `startDate` property without an `endDate` property then a `hidePresent` property can be used to hide a present label and show the current year instead.\n\u003cbr\u003eA `hideEndDate` property can be used to hide the current year shown instead of a present label.\n\nA `hideDuration` property can be used to hide the calculated duration. Otherwise, a `duration` property is defined with the calculated duration (examples: 7 months, 1 year, 1.5 years, 2 years).\n\n## Contribution\nIt can be useful to create in-depth documentation about each Refo package.\n\n\u003e [Open a new issue](https://github.com/kireerik/refo/issues/new) if you think so and let's discuss this. We can definitely implement this if it turns out to be useful.\n\n## Who is using Refo\n- \u003ca title=\"Oengi.com\" href=\"https://oengi.com/\"\u003eOengi.com\u003c/a\u003e – Erik Engi's website and resume.\n\n\u003cp align=\"center\"\u003e\n\t\u003ca href=\"https://github.com/kireerik/refo/edit/main/README.md\"\u003ePropose file change\u003c/a\u003e to add your project here.\n\u003c/p\u003e\n\n## Inspiration\n- \u003ca title=\"JSON Resume\" href=\"https://jsonresume.org/\"\u003eJSON Resume\u003c/a\u003e\n\n#### Author\n- \u003ca title=\"Oengi.com\" href=\"https://oengi.com/\"\u003eErik Engi\u003c/a\u003e\n\n#### About the name\n**Re**sume + port**fo**lio = Refo\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkireerik%2Frefo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkireerik%2Frefo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkireerik%2Frefo/lists"}