Lancer is a radically simple tool for building content-focused websites. It helps you:
Lancer DOES NOT cater to fully-JS-rendered apps. If you're building a full-fledged web app, only use Lancer for your landing and marketing pages. For your heavy application code, we recommend something like Ruby on Rails or Next.js.
To start a project from scratch:
$ mkdir my-proj && cd my-proj
$ npm init -y
$ npm install freelance
$ lancer init
$ echo 'It works!' > client/index.html
$ lance dev
Now visit http://localhost:8080.
If lance dev didn't work, you need to add ./node_modules/.bin to the beginning of your path.
lancer create my-projectdata/fileslance push https://example.comLance requires your content to be in a client/ folder. Take the following example:
client/
js/
app.js
product/
index.html
pricing.html
_layout.html
index.html
about-us.html
Any .html file in client/ is accessible via the root path. For example:
/about-us in the browser maps to client/about-us.html/product/pricing maps to client/product/pricing.html/ and /index.html in the browser map to client/index.html/product and /product/index.html in the browser map to client/product/index.htmlHowever, there are protections. Files that start with an underscore cannot be accessed directly by the browser. JavaScript and CSS files cannot be accessed either unless they are specifically bundled by a tag (see next section).
Applying this to the example:
js/app.js cannot be accessed unless a page has <script bundle="/js/app.js"></script>_layout.html cannot be accessed because it starts with an underscore.JavaScript and CSS files in client/ are not immediately accessible. However, you can put them on a page using the special attribute bundle on script tags and link tags:
<script bundle="/js/family-pic.js"></script>
<link rel="stylesheet" type="text/css" bundle="/styles/app.css">
Note how the script tag uses bundle= instead of src=, and the link tag uses bundle= instead of href=. This is how Lancer detects an asset bundle instead of a simple asset file.
JavaScript is bundled using Browserify, and CSS is bundled using PostCSS.
Simply create a client/public/ folder in your project. Any file in that folder will be publically accessible by the browser. This is good for small images, pdfs, etc.
Lancer gives you foundational layout and asset bundling functionality.
If you need to update content dynamically, you should probably use JavaScript to do so.
See docs for posthtml-expressions.
Take the following client/_layout.html file:
<html>
<head>
<block name='title'>
<title>Default Title</title>
</block>
</head>
<body>
<div class="content">
<block name="content"></block>
</div>
<footer>
<block name="footer">footer content</block>
</footer>
</body>
</html>
Notice how there are three <block> tags in that file. The one with name="content" is required in a layout, whereas the other two are optional.
To use a layout, reference it at the top of your file. Take the following client/index.html as an example:
<!--
layout: _layout.html
-->
<content-for name="title">
<title>Home | The Website</title>
</content-for>
<h1>Welcome to my Client's Website!</h1>
<p>Lorem ipsum blah so dah</p>
<content-for name="footer">
Footer stuff
</content-for>
Although there are only two <content-for> tags, all three <block> tags from the layout get filled. This is because any content NOT in a <content-for> tag gets inserted into the name="content" block automatically.
Tips:
<content-for> tags only work at the top-level of the file.<block> tags do not work within the following tags: title, style, script, iframe, xmp, noscript, noframes, noembed.TODO
https://sharp.pixelplumbing.com/api-resize#resize
Lancer uses CSS Next, a tool for converting future standards into cross-browser CSS. The keyword is standards. Unlike SASS or LESS, the features CSS Next makes available to you will eventually be built into all browsers.
If you haven't already, you should take a quick look at the features page, which will show you the syntax for said features. For example, nesting selectors by the spec looks a bit different coming from LESS or SASS:
.my-thing {
color: black;
/* WRONG */
.hidden { visibility: none; }
/* RIGHT */
& .hidden { visibility: none; }
}
@import statements will automatically inline file content. Example:
@import "common/layout.css";
@import "common/buttons.css";
TODO
<t>my.key_name</t>
hreflang attributes are added according to Google's recommendations
After you've committed your project to git:
$ heroku apps:create my-project
$ git push heroku master
$ heroku open
$ npm install
$ npm test # or npm test-watch
$ npm link # for running locally in your own project
$ npm build
FAQs
A radically simple framework for building client websites.
The npm package freelance receives a total of 1 weekly downloads. As such, freelance popularity was classified as not popular.
We found that freelance demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Newly introduced telemetry in devenv 1.4 sparked a backlash over privacy concerns, leading to the removal of its AI-powered feature after strong community pushback.
Security News
TC39 met in Seattle and advanced 9 JavaScript proposals, including three to Stage 4, introducing new features and enhancements for a future ECMAScript release.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.