trys/sergey

A tiny lil' static site generator

Sergey

The little static site generator

Sergey is a tiny lil’ static site generator. It’s a progressive tool designed to site atop your already brilliant HTML. In essence, Sergey is HTML + partials with slots thrown in for good measure.

If you’ve ever had to make a change to every header on a totally static website, you’ll know how cumbersome and error-prone it is to copy and paste the changes through all the files. That’s where Sergey comes in. Sergey lets you move that header into a single, importable file, and helps you include it everywhere you need it.

• Read the getting started guide
• Slots explanation
• Command line options

$ npm install sergey

# Build the site
$ sergey

# Run Sergey in dev mode
$ sergey --watch

sergey's Issues

Doesnt work with Node v14.8.0

Output files are exactly the same as input

Expose PORT as an configurable option

Commenting out <sergey-import> block still builds it

this works
<sergey-import src="something" />

this also works 🤨 (unexpectedly)
<!-- <sergey-import src="something" /> -->

this is kind of a hack to fix it
<!-- <sergey-import -src="something" /> -->

I think commenting should turn off building an import.

Investigate markdown

Allow specifying configuration

Allow specifying configuration such as input folder, output folder, ignore whitelist/blacklist rules for file copying etc.

Nav Links not working

I tried switching the navigation from standard html to sergy-links, but they did not rendering as links.

Deploy to Netlify button

Endless loop error with custom build dir

It may a minor bug but i have to report this, i had an error while trying to use sergey with custom output build directory but with value ended with slash.

sergey --output=_site/

This will reproduce something like this:

I actually can get this run normally by removing the slash, but as i said before, this just report and hopefully you can fix this.

Sergey-link active class on two different links

When I click the navigation link to blog page, the active class is still on the e-commerce navigation link which is the index page link.
<sergey-link to="/pages/dashboards/blog.html" class="custom-nav-dropdown-item">Blog</sergey-link> <sergey-link to="/pages/dashboards/school.html" class="custom-nav-dropdown-item">School</sergey-link> <sergey-link to="/index.html" class="custom-nav-dropdown-item">E-commerce</sergey-link>

Support import parameters

Wouldn't it be amazing if we can do like

<sergey-import src="head" title="My custom title!"></sergey-import>

The ability to customize specific attributes within template files. This would allow so much customization and clean files :D

Support <sergey-link href=""> as well as to=""

Main license issue

Hello,

Could you please help me with some clarification about the main license of this component?

The LICENSE file states that it is MIT License and the package.json file in all versions of sergey states that it is ISC License.
Which one it is then?

Thanks a lot for your help.
Julia

Allow imports to be foldered

Ignore .idea folder

(Relevant for webstorm users) Don't copy everything in public folder, only the non-IDE files.

Vulnerability reported for marked 0.6.3

See advisory for markedversion 0.6.3. Consider upgrading the marked dependency to fix this.

Great project btw!

Does the _Import Folder allow subfolders?

Hello, just had a question, I have tried adding subfolders to the _imports folder, yet when I do, the files inside the subfolders are never imported to the final build. Does the variable IMPORTS accept an array of folders (within the .env file), or only a single folder to look for import files? Any help would be greatly appreciated!

Tests 😬

Gulp example

Is there an example to start/watch sergey from Gulp?

Named slots

Feature request: An import into an import

Hey, first of all: Thx for this dead simple SSG. Exactly what I´am searching for for a long time...

Is it possible (or will it be possible in the future) to import imports into imports ;-)
My idea is to use sergey as a component/design system. So for example I need a button.html imported into a navbar.html which is than importet into my index.html.

Imports distorting content due to JS `str.replace()` behavior

Import content containing the substring $$ gets distorted due to the replace function treating these as special patterns.

Absurd noise in console

(node:91690) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
(node:91690) UnhandledPromiseRejectionWarning: Couldn't create folder: ./public/why/
(node:91690) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)

Is it actually rebuilding here?

Detect file type from extension

As suggested, inferring the as attribute could be a nice touch to keep import tags succinct.

How do I put all initial files in src folder and then create public folder?

Nested templates: first closing tag closes parent instead of child

Issue

Nesting templates causes the parent to close on the closing tag of the child template.

Expected behavior

The last newly opened <sergey-template> tag should close at the subsequent </sergey-template>.

How to reproduce

The </sergey-template> tag after 'article' closes the name="main" template tag instead of the expected name="classes" template tag.

<sergey-template name="main">
    <sergey-import src="grid-item">
        <sergey-template name="classes">article</sergey-template>
        <sergey-template name="content">
            Test
        </sergey-template>
    </sergey-import>

    < more html />

<sergey-template/>

[example]: HTML SyntaxError: Unexpected closing tag "p"

sergey/example/index.html

Lines 97 to 98 in 268496c

	<p></p>This public folder is the one to upload to your web server. If you’re deploying via Git (say to Netlify), you can add
	public/ to your .gitignore file.</p>

Solution:
Remove the </p> before the content starts.

npm run dev returns error

When running npm run dev on the basic starter setup, I get the following error in the terminal:

Couldn't create folder: ./public/

and when I open up localhost:8080, all that shows up is the text: Cannot GET /.

This is my first time using sergey and I'm super excited, so thanks for any help or advice!

Ho to use ENV to change default options?

I really love Sergey. it is exectly what I was looking for my static HTML creation but instruction for using .env is beat unclear. example will help. Can we use Sergey in parallel with gulp?

Deletes folder and can't recreate it

When using sergey to copy over static files and folders I get the error

node:internal/process/promises:246

          triggerUncaughtException(err, true /* fromPromise */);

          ^


[Error: ENOENT: no such file or directory, copyfile './src/README.md' -> './src/../public/README.md'] {
�
  errno: -2,

  code: 'ENOENT',

  syscall: 'copyfile',

  path: './src/README.md',

  dest: './src/../public/README.md'

}

Node.js v17.3.0

error Command failed with exit code 1.

because sergey empties the output folder to copy over the files but for some reason does not try to recreate the folders.

Can sergey NOT delete folder but just files?

Website updates

• Favicon (priorities, trys...)
• Open graph
• Little triangle thing
• Actual docs
• Some analytics
• Alpha and feedback

Excluding folders

• Env option
• Combine with any .gitignore

Running on 0.0.0.0

Hi,

I was wondering if there is an option, or if it would be an enhancement, to run the dev server on 0.0.0.0? I tend to develop in PuTTy from a Windows machine which requires I run any dev servers on a network. I didn't see anything but the option to change the port in the options on the sergey.cool site.

This would be a massive help. Thanks.

Look into double/single quotes for tags

Watch the _imports folder

Or whatever the env says

Watch for new files, and bring them into the watch list

Ability to use scss

hi,
This may be a feature request or an issue. I am able to use scss with sergy using node-sass.
It tried to create an _imports folder inside styles folder and it compiled as expected. Is this a proper way of using scss with sergey ?
please refer my package.json here

sergey-import weird issue

<sergey-import src="news-item" /> works but <sergey-import src="news-item"></sergey-import> dosn't

<sergey-import src="template">
  <sergey-template name="page">news</sergey-template>
  <sergey-template name="title">Новости</sergey-template>
  <sergey-template name="main">
    Main content goes here!
    <sergey-import src="news-item">
    </sergey-import>
    More content
  </sergey-template>
</sergey-import

Auto refresh in dev mode --watch

Could it be possible to add a auto refresh function to the dev mode --watch?

Remove .html from the URL in npm run dev

Is any preferred way to remove the .html file extension from the url when using the npm run dev command?

slot names - no underscores?

It appears that underscores are not permitted in slot names. Is that correct? If so, it would be helpful to note that somewhere in the docs. Thanks!

Spaces

Hello,

First of all, thank you for your work. It is very useful.

Suggestions:

When I declare a <sergey-slot /> but do not send any content to it with <sergey-import src="...">, because on that particular page it is not needed, the slot creates a line break in the resulting HTML code. It would be desirable that if no data arrives in the slot, there is no line break there.

When content with tabs (spaces) is sent to the slot, the first line of the slot content is tabbed correctly in the resulting HTML, but subsequent lines do not retain the original tabbing. Could this be checked?

I use: Linux Mint, node: v16.13.2

I can't wait to see the next version of Sergey SSG.

Unavailable import will cause the next one to fail, but subsequent ones import properly.

I have a number of pages with this working: <sergey-import src="header" />

However sometimes a random page simply won't import a certain file properly.

It may import a footer or similar but even that worked intermittently.

Has anyone else had a problem with imports randomly not working?

Regex /s not supported in lower node version

Getting regex error on index.js line 50. I am on node 8.9.4. I cannot update node to later versions due to restrictions.
On searching, it looks like this error is related to regex /s being used.

`sergey --watch` compiles continuously (not just on save)

Steps to reproduce the issue

1. Get started following the walkthrough.
2. Type npm run dev or sergey --watch in your terminal.
3. Sergey notifies you via terminal, "Sergey running on http://localhost:8080"
4. Now that we're watching for changes, change something in the HTML file.

Results

The first change after running sergey --watch results in a continuous, looping compilation.

Expected results

Is Sergey supposed to only compile once on save?

If this behavior is expected, please close this issue.

Environment

OSX Catalina 10.15.7. Tried multiple different versions of Node (v10.24.0, v12.19.9, v14.16.0).

File called "contenteditable.html" excluded from build

I created a file in the root called contenteditable.html, and ran sergey.

Expected outcome: a file called contenteditable.html appears in the public folder
Actual outcome: the file did not appear.

I renamed the file, and this appeared in the public folder.

Investigate fsevents errors in Netlify

Only recompile affected files in watch mode

chokidar passes the path, so once merged with the root, this shouldn't be too difficult

Long tag imports in a <sergey-template> prevent the whole template from compiling

This prevents the entire content template from compiling:

<sergey-import src="template">
    <sergey-template name="content">
        <sergey-import src="map"></sergey-import>
    </sergey-template>
</sergey-import>

This self-closing version is right as rain:

<sergey-import src="template">
    <sergey-template name="content">
        <sergey-import src="map" />
    </sergey-template>
</sergey-import>

Named slots not working

Unfortunately named slots are not working.

I have:

index.html

<html>
<sergey-import src="head">
	<sergey-template name="title">My title</title></sergey-template>
</sergey-import>

head.html

<head>
	<meta charset="utf-8">
	<meta content="width=device-width, initial-scale=1.0" name="viewport">
	<title><sergey-slot name="title" /></title>
</head>

The result in the published index.html is:

<html>
<head>
	<meta charset="utf-8">
	<meta content="width=device-width, initial-scale=1.0" name="viewport">
	<title><sergey-slot name="title" /></title>
</head>

Any ideas how to fix that?

UPDATE

Sorry, after upgrading NodeJS and reinstalling Sergey, it's working again

UnhandledPromiseRejection error when running sergey --watch concurrently with another script

I regularly use sass in my sites, so I usually run this to make sure my compiled CSS is up to date.

$ sass --style=compressed --quiet scss/styles.scss css/styles.css --watch

Now I also want to deploy my Sergey site to localhost, so

$ sergey --watch

However, although just editing HTML files is fine, as soon as I edit my SCSS, sergey throws an error,

$ sergey --watch
Compiled in 290ms
Sergey running on http://localhost:8080
Compiled in 371ms
node:internal/process/promises:246
          triggerUncaughtException(err, true /* fromPromise */);
          ^

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "Couldn't create folder: ./public/path/to/a/random/folder/".] {
  code: 'ERR_UNHANDLED_REJECTION'
}

Am I missing something...? since running concurrent commands like this, I think, is quite common, but I haven't seen anyone reporting this problem here.