brandonweiss / charge Goto Github PK
View Code? Open in Web Editor NEW⚡️ An opinionated, zero-config static site generator.
Home Page: https://charge.js.org
License: MIT License
⚡️ An opinionated, zero-config static site generator.
Home Page: https://charge.js.org
License: MIT License
Dependabot can't resolve your JavaScript dependency files.
As a result, Dependabot couldn't update your dependencies.
The error Dependabot encountered was:
Error while updating /yarn.lock:
Couldn't find any versions for "scheduler" that matches "^16.6.2"
If you think the above is an error on Dependabot's side please don't hesitate to get in touch - we'll do whatever we can to fix it.
You can mention @dependabot in the comments below to contact the Dependabot team.
Hi there, just came across Charge. Reading the idea and concept behind it sounds great!
Just wondering how difficult is to implement support for typescript
and .tsx
? I saw that Charge uses babel and so considering TS support in Babel 7 would not it be an easy implementation? I could also make PR if you could point out where I should look into!
Dependabot can't resolve your JavaScript dependency files.
As a result, Dependabot couldn't update your dependencies.
The error Dependabot encountered was:
Error while updating /yarn.lock:
Couldn't find any versions for "@babel/parser" that matches "^7.1.3"
If you think the above is an error on Dependabot's side please don't hesitate to get in touch - we'll do whatever we can to fix it.
You can mention @dependabot in the comments below to contact the Dependabot team.
When updating the meta
export of a page, my other components that consume that export don't get rebuilt. For example, if I have a blog with articles as pages and a home page that enumerates and links to all articles, the home page will not rebuild when updating the meta
data of an article.
Is there an option to import a CSS like in other stacks? I know about @emotion/styled
. I just search an option to reuse components form create-react-app
import from "./styles.css" // 🧨 here
export default ({text}) => (
<div className="Tooltip">
{text}
</div>
)
So I started using charge
today and I really like the idea of it.
The problem is that live reloading does not work out of the box, I think the issue is with browsersync
because I installed reload
and set it to listen to tmp/target
directory and it was working well.
Here are some stats of my computer
System:
OS: Linux 4.15 Ubuntu 18.04.2 LTS (Bionic Beaver)
CPU: (4) x64 AMD A8-6410 APU with AMD Radeon R5 Graphics
Memory: 2.58 GB / 14.64 GB
Container: Yes
Shell: 2.7.1 - /usr/bin/fish
Binaries:
Node: 8.11.4 - ~/.config/fnm/bin/node
Yarn: 1.12.3 - ~/.linuxbrew/bin/yarn
npm: 5.6.0 - ~/.config/fnm/bin/npm
Browsers:
Chrome: 73.0.3683.86
Firefox: 66.0.2
So as soon as I added CSS I got the BrowserSync is active notification and did live reload.
Hi. Charge looks promising, but I'm not clear on fetching data. I noticed an emphasis on using JSON files for data, but does this project support fetching data from a CMS and creating a build with that data?
Would you consider minifying the CSS output (when running charge build
) using a PostCSS plugin? For example, using something like cssnano
.
This seems like it would fit with the “it works the way you probably expect it to” philosophy as long as only safe minification techniques are enabled.
It would be nice to move the node engine version down to 8.10.0.
According to https://node.green/ versions 8.10.0 to 9.11.2 are the same in terms of compatibility.
By moving the engine requirement down to 8.10.0 we will be able to create a static build on Zeit Now 2.0
It has been mentioned before briefly in another issue but then it seems it wasn't discussed any further.
#1095 (comment)
My use case for internationalization is pretty much the same. Is this something we can achieve with the current version of Charge? If not, what would need to happen to make this possible?
For example a CNAME file.
Hi - thanks for publishing Charge
I like the easyness of your concept but wonder how you manage offline states / apps when alny having SSR. Any ideas for that?
We currently work with Gatsby just to get this feature ob offline support from webpack.
Thanks for your feedback (when not surfin or thinking about surfin)
Tom
Hi! first of all thanks for creating this project, I've spent the last months looking for a SSG generator like this one without much success.
There are some features I would like to behave differently so I've forked your project and implemented one of them (transform myfile.html.mdx
into myfile/index.html
) and more changes will land soon.
I understand why this should not be the default behaviour so if this is ever to be merged back into Charge it should be under a setting IMHO.
AFAIK you don't want this tool to be configurable and I understand that point, just wanted to doble check while also tasting the community interest in having configuration options for Charge.
This can be done with a .chargerc.json
file as many other tools but it's not my favourite option. I think CLI parameters would work great for a tool like this (charge --pages-as-directories serve
?)
Hi,
Thanks a lot for making and sharing Charge. I find it elegant and beautiful.
I went on StaticGen and looked at every JavaScript-based one. I could not find a single one that I thought was simple, well-documented, had the features I needed, was actively maintained, and was designed and worked the way I wanted.
Spot on. I turned to a Nikola, a Python SSG. But I miss JSX, so it would be fun to try to rewrite my website in Charge.
However, it looks like I would have to write a fair bit of code to replicate the features of my existing bootblog4 site — e.g. tagging, post lists and RSS. I can’t find much in the way of guidance to set this up. So, I’m hesitant to give Charge a try.
This is not a complaint or anything like that. I just wanted to offer a perspective from someone who almost started using Charge — in case it’s useful.
I tried a simple example of using emotion, but the styling doesn't seem to work as expected. Oddly, when I inspect the page, I'm seeing elements with the appropriate styling applied (at least as the inspector sees it), but anything from the rule itself doesn't apply. As an example, I created a simple element with a background-image and a fixed height. The render height remained 0.
Do you have an example of using Emotion?
I'm getting the following error in my console:
[browser] › 🔄 reloading
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
[builder] › 🔨 building Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
There's no callstack or component stack so there's no way to debug this. Can we get a stack to go with the error to aid in debugging problems?
Hi again,
Minor thing - when working in dev mode, changes to components in the components folder do not appear to live reload.
Oddly, the browser does refresh, but any changes to components do not yet appear. When a change is made to the layout.html.jsx
file, the changes then appear.
My setup is still mostly as-is with the example files at the moment. Interested to hear if anyone else can repro.
🙏
I was expecting that any index.html.jsx
file would automatically work as a clean URL when placed inside a folder.
Example:
A file placed in /changelog/index.html.jsx
would be loaded when visiting the http://localhost:2468/changelog URL
Instead, the default system forces you to go to http://localhost:2468/changelog/index.html
Is there any way to make it work as I intend? Thanks!
Unfortunately, at the moment Charge does not work on Windows 😞
I added Windows to the build matrix on Travis CI, so it’s possible to see the failed tests.
It’s probably all path delimiter issues (hardcoding /
rather than handling the delimiter in a cross-platform way), so hopefully it won’t take too long to fix.
Hello I have successfully used Charge in my website. Mainly for displayed projects using json data.
Some alternatives (supersets) of JSON could be used to ease the data creation.
https://github.com/hjson/hjson-js
https://github.com/json5/json5
But maybe a simple js file that exports an object could work for data too.
It would be helpful specially for multiline strings.
Thanks for this awesome project 👍
First of all, what a wonderful tool you built there as Gatsby is really overkill with the project I'm working right now. Just curious, does Charge support using custom PostCSS config through postcss.config.js
? I am trying to import Tailwind and other useful stuff into my project and can't seem to find it at the docs at all. :/
I would like to autogenerate a table of contents for my mdx components. Could you add access to the remark-toc plugin?
Now it can only access the React component object for a page in the pages
object.
It would be flexible if we can also get the parsed HTML content for a page when we want to use the content of a page in files other than jsx
and mdx
.
To reduce render-blocking resources, I defer CSS loading using something like this in the document <head>
:
<link rel="preload" href="/assets/css/styles.css" as="style" onLoad="this.onLoad=null;this.rel='stylesheet'" />
<noscript><link href="/assets/css/styles.css" as="style" rel="stylesheet" /></noscript>
Charge will strip out the onLoad
attribute however. Just wondering - is there a way to ensure this gets built in the compiled HTML source?
Any help appreciated. Love Charge.js btw!
I'm setting up a dead simple page using Charge (love it btw.)
It's just a page telling the user they are blocked. But I need to display the URL that they are trying to access.
Normally I'd just use window.location
for this. But when it's rendered server side there is no window.
And since no React is ever run in the browser, it never runs my line of JavaScript.
I tried creating another js file and importing it hoping it would get served with the HTML. But no :(
How do I serve a simple piece of JavaScript in the browser with Charge?
I'm even okay if it means adding a script tag to the React code, but that doesn't seem to work either :(
My process
git clone https://github.com/brandonweiss/charge.git
cd charge
yarn install
node cli.js [build|serve] docs/ tmp/
Receive this error for either build
or serve
:
Error: Unknown language: `text` is not registered
I want to mention that I'm really interested in Charge and hope it becomes bigger. I may be forking to see what I can get into it (generalize for myself and others Charge included) so I'd like to be able to play around with it more.
Having to make a feature request here to request access to a Remark plugin seems very burdensome. Would it be possible to allow arbitrary Remark and mdx plugins to be loaded without changing Charge?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.