3 ms·

Hey guys, I wrote this very simple SSG, and would like to receive feedback on how to simplify code. Also, I would be happy to fix any bug.

pwenzel 5y ago
My needs might be different than yours. For me personally, and being a fan of Jekyll, I come to expect the following from any static site generator: 1. Layouts / Template Inheritance 2. Sass Compiler 3. Live Reload Love the baseline set of tools here though!
- malkosta 5y ago
  Live Reload should be easy. I prefer pure CSS and pure HTML. But opened an exception for Markdown, for the sake of writing posts. I don't know what you mean by 1, I thought I achieved that with: <partial src="partials/layout.html"> My fancy content </partial>
cxr 5y ago
In your post you write: > Just like every dev writing a blog, my first question was: What is the minimum set of features to maintain it comfortably? Then you created a program in JS that requires NodeJS to run. But cool programs written in JS don't require NodeJS when it's not necessary. They just run in the browser. PS: Really cool static site generators that shoot for simplicity don't require you to create extra template files written in a new, made-up template language. When you want to create a new post, you give it (a) the static files from your existing site and (b) the markdown for your new post. The "templating" engine inspects your existing posts (incl. e.g. class attributes) and then copies the same document structure into a new file, except with the right stuff (timestamp, title and heading, post content...) substituted in to the places where it's supposed to go.
- tln 5y ago
  Got any links for some of the "Really cool static site generators"?
- malkosta 5y ago
  Yes. I'm looking to remove NodeJS dependency, but I will probably have to switch languages since JS itself doesn't let me read files from disk, to run the preprocessing.
  - cxr 5y ago
    Browsers have supported file input elements and file drag-and-drop for a while. <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file https://developer.mozilla.org/en-US/docs/Web/HTML/Element/in...> <https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_a...>
- malkosta 5y ago
  Something like this does the job for you...basically applies the template and whatever metadata you give to the .md file. for file in *.md; do pandoc --quiet --template template.html $file -o "${file%.*}.html" done But I wanted a flexible way to reuse components. So I need the <partial> trick to support outer and inner partials in the reusable components. For example a form that I want to reuse on some pages, or a custom call to action.
  - cxr 5y ago
    Sorry, I don't think you understand. First, I'm not looking for help finding a tool that does what I describe. Second, that Pandoc invocation doesn't do what I describe. I'm saying no template file. Let's say you have static site today with your lost post being "2022/03/31/working-on-a-new-tool.html". To author your new post, the tool could derive the template based on what the actual, HTML-formatted version of your last post looks like, and then it would substitute the new post content into the appropriate places. For example, where your previous post has a date stamp indicating it was published on March 31, the tool would put the date of the new post. Where your previous post has the title in an H1 or whathaveyou, your new title would appear. Where the main text of your last post appears, the main text of your new post appears. This would all be written into a new file. There's no need for an explicit template file. PS: Pandoc doesn't run in the browser, either. You're already going to have your browser open to check the output. Its runtime is both powerful enough, and it's right there, so use it. No need to bring other runtimes into this.
tln 5y ago
Nice work on this! I'd suggest publishing to npm so that it can be run with npx. Check out fncli if you want to add some command line args... might be nice to specify some of the config that way

pwenzel 5y ago

My needs might be different than yours. For me personally, and being a fan of Jekyll, I come to expect the following from any static site generator: 1. Layouts / Template Inheritance 2. Sass Compiler 3. Live Reload Love the baseline set of tools here though!

malkosta 5y ago
Live Reload should be easy. I prefer pure CSS and pure HTML. But opened an exception for Markdown, for the sake of writing posts. I don't know what you mean by 1, I thought I achieved that with: <partial src="partials/layout.html"> My fancy content </partial>

cxr 5y ago

In your post you write: > Just like every dev writing a blog, my first question was: What is the minimum set of features to maintain it comfortably? Then you created a program in JS that requires NodeJS to run. But cool programs written in JS don't require NodeJS when it's not necessary. They just run in the browser. PS: Really cool static site generators that shoot for simplicity don't require you to create extra template files written in a new, made-up template language. When you want to create a new post, you give it (a) the static files from your existing site and (b) the markdown for your new post. The "templating" engine inspects your existing posts (incl. e.g. class attributes) and then copies the same document structure into a new file, except with the right stuff (timestamp, title and heading, post content...) substituted in to the places where it's supposed to go.

tln 5y ago
Got any links for some of the "Really cool static site generators"?
malkosta 5y ago
Yes. I'm looking to remove NodeJS dependency, but I will probably have to switch languages since JS itself doesn't let me read files from disk, to run the preprocessing.
- cxr 5y ago
  Browsers have supported file input elements and file drag-and-drop for a while. <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file https://developer.mozilla.org/en-US/docs/Web/HTML/Element/in...> <https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_a...>
malkosta 5y ago
Something like this does the job for you...basically applies the template and whatever metadata you give to the .md file. for file in *.md; do pandoc --quiet --template template.html $file -o "${file%.*}.html" done But I wanted a flexible way to reuse components. So I need the <partial> trick to support outer and inner partials in the reusable components. For example a form that I want to reuse on some pages, or a custom call to action.
- cxr 5y ago
  Sorry, I don't think you understand. First, I'm not looking for help finding a tool that does what I describe. Second, that Pandoc invocation doesn't do what I describe. I'm saying no template file. Let's say you have static site today with your lost post being "2022/03/31/working-on-a-new-tool.html". To author your new post, the tool could derive the template based on what the actual, HTML-formatted version of your last post looks like, and then it would substitute the new post content into the appropriate places. For example, where your previous post has a date stamp indicating it was published on March 31, the tool would put the date of the new post. Where your previous post has the title in an H1 or whathaveyou, your new title would appear. Where the main text of your last post appears, the main text of your new post appears. This would all be written into a new file. There's no need for an explicit template file. PS: Pandoc doesn't run in the browser, either. You're already going to have your browser open to check the output. Its runtime is both powerful enough, and it's right there, so use it. No need to bring other runtimes into this.

tln 5y ago

Nice work on this! I'd suggest publishing to npm so that it can be run with npx. Check out fncli if you want to add some command line args... might be nice to specify some of the config that way