Proton Beta Released

[joeworkman]

Check out Proton: https://github.com/foundation/proton

The release makes proton leaps and bounds better than beta 2. If you have not given proton a shot, definitely start playing with v0.3.0.

Updates

• The README file is packed full of information. Anyone want to help make it better?
• New init command helps you get a new proton project started.
• New data commands helps you visualize that data used to compile a page.
• Code completely refactored into more sustainable classes.
• More misc fixes and improvements.

You can update proton simply by running proton self-update. Enjoy the update!

[joeworkman]

New docs site! https://docs.page/foundation/proton

[ITZAP]

There is another similar Website Builder under development named Astro, view on GitHub here which was featured by Kevin Powell on YouTube, watch video here.

@joeworkman can you see any significant differences between your Proton project and this other Astro project?

[joeworkman]

I have seen Astro. While there are some similarities, as there is with most template systems, they are quite different. I have not used Astro but from what I have seen...

• Proton has zero opinions on your CSS and JS setups. You can do whatever you want for that. It does not force you into any path.
• Proton does not use NPM. Therefore, it will not muddy the waters with the NPM dependency black hole.
• Proton has a more powerful templating system
• Proton has a much easier to use and powerful data system
• Proton has batch page generation based on data.

I did file some feature requests based on some of Astros feature set that I thought were a great idea: Sitemap and RSS support is a great idea. Should be pretty simple to implement into Proton.

[joeworkman]

Beta 4 was just released! https://github.com/foundation/proton/releases/tag/v0.4.0

Updates

• New docs at https://docs.page/foundation/proton
• New Assets api to copy non-template content into your generated site
• Generate a sitemap.xml file for all pages
• Fixed a bug with data processing for batch generated pages

You can update proton simply by running proton self-update. Enjoy the update!

[benthien]

I am interested in trying Proton. I have a question on the documentation. In the config file proton.xml there is an element under layout called rules. I'm not sure what is being specified there.

[joeworkman]

Layout rules allow you to apply a layout to all pages within a folder.

layouts:
   rules:
       blog: blog.html

In the above configuration all pages inside of a blog folder will be assigned the blog.html layout. This is a 100% optional feature.

[benthien]

I have a question about twig. Handlebar uses {{> partial name}} to insert partials. How do you insert partials in twig?

[joeworkman]

https://twig.symfony.com/doc/3.x/templates.html#including-other-templates

[benthien]

I have another question related to the conversion of handlebars to twig. Consider a data file datafile.yml containing an array of objects as shown in array.docx. In one of the pages we have a handlebars loop
{{#each datafile.array}}

inside the loop there are references to {{prop1}} and {{prop2}}

{{/each}}
How do we do the equivalent in Twig?

[joeworkman]

If you look at that same exact URL that I have sent you before, you will see that there is support for for loops.

{% for user in users %}
        <li>{{ user.username|e }}</li>
{% endfor %}

[joeworkman]

Proton Beta 5 Released

See the release notes at: https://github.com/foundation/proton/releases/tag/v0.5.0

[benthien]

I updated to Proton Beta 5 and tried the new template proton init --template=sites. I got one error, but it seemed to have worked. I then ran yarn install which had two warnings, but seemed to work. I then ran proton build which produced the desired html file. Here are screen shots of the results produced after each command:

[joeworkman]

Thank you! What version of PHP do you have installed? I will work on handling issues like that unlink error more gracefully. You may want to manually delete the .git folder inside of the project. This is so that you can create a new git project in that directory and it wont be linked to the template repo.

I am glad that it worked pretty well for you. I look forward to see how proton works out for your workflow.

[benthien]

I'm using PHP version 8.1.1.

[benthien]

I don't think the new template is handling foundation correctly. I ran the command proton init --template=sites, I then substituted the index.html file from the zurb template https://github.com/foundation/foundation-zurb-template/tree/master/src/pages for index.md. I then ran yarn install and proton build as before. The html file produced renders the text correctly but not the foundation components.

[joeworkman]

The HTML is not the same. That is a good idea though. So the site.js and site.css files don't get generated in the dust/assets folder?

[benthien]

They get generated. The dist/assets/js folder contains site.js and a vendors folder with jquery.min.js and what-input.min.js. The dist/assets/styles folder contains site.css which appears to be the standard foundation css. The site.js file has been modified from what it was in src/assets/js.

[joeworkman]

Then it sounds correct. You should be able to use foundation in any of the page templates and it should work.

[benthien]

There is a problem with the default layout for the Proton template. Here is what I did to make the test with the zurb-template index'html file work. In default.html I deleted all the initial forward slashes in the paths to the css and javascript files. For example, /assets/js/site.js goes to assets/js/site.js and /assets/js/vendor/jquery.min.js goes to assets/js/vendor/jquery.min.js. In addition, I replaced foundation.js with site.js in the final script. With these changes the correct output was produced.

[benthien]

The test continues to work if you remove all the preloads and the two scripts
<script src="assets/js/vendor/jquery.min.js"></script> and
<script src="assets/js/vendor/what-input.min.js"></script> from the default layout default.html. It appears that dist/assets/js/site.js contains what is needed to run foundation projects.

[benthien]

With the changes to the default layout mentioned previously I was able to build a site with proton that I had previously built with Panini and the zurb template. However, there are some items that I would like to find a better way to accomplish. Items such as images in src/assets go to the top level of dist and not to dist/assets which I prefer. I got around this by putting the items in a second assets folder inside src/assets. Is there a better was to accomplish this? In addition, files in src/pages other than index.html don't go to the same file name in dist. Instead, a page like mypage.html goes to a folder named mypage in dist that contains a file index.html. I got around this by putting a data statement output: mypage.html in the front matter of mypage.html. However, this seems awkward and I was wondering if there was an easier way. I also miss the handlebar helper ifpage to do something if you are on a specific page. I used an alternative of placing a data statement mypage: true in the front matter of mypage.html and using the construct {% if mypage %} ,,, {% endif %}. Is there an easier way of doing this? In general, I like proton very much. It is very fast and avoids most of the dependency issues of node. Is there a plan to include browser sync capability?

[benthien]

Thank you for explaining what autoindex does. That was my biggest issue. I can see the flexibility that moving items in src/assets to the top level in dist provides. I use ifpage primarily to highlight the element in the navigation topbar that is in use. Using the if conditional to test a top matter data item works as an alternative. I have some php files in my site where ifpage didn't work before. However, ifpage was convenient for html files.

[joeworkman]

I am pretty sure that you could accomplish something similar to the ifpage using blocks in twig. Its not the same but you should be able to do what you want.

https://twig.symfony.com/doc/3.x/tags/extends.html

[joeworkman]

Blocks allow you to define a default value in the layout. Then you can override or add-to the block from a layout inside of a page.

[benthien]

I can see that blocks are a powerful tool, but I think using local data variables is an easier way to replace ifpage. For a file about.html I set

---
about : true
---

at the top of about.html. Since undefined is considered false in other files, I can use
{% if about %} ... {% endif %}
to do something special when I am in about.html. For example, I can use

<li class="{% if about%}active{% endif %}"><a href="/about.html">About</a></li>

in a list defining a menu to highlight the menu item About when I am in about.html.

[joeworkman]

I decided to start a discussions page for Proton. Let's continue at foundation/proton#11

Feel free to start new threads there for various ideas and issues that you run into.