Feuerfest

Photo by Teddy Yang: https://www.pexels.com/photo/people-inside-stadium-2263410/

I used Isso (Official Website, GitHub) to integrate comments into this block. This was a feature which I missed dearly as I value the input from others, but wouldn't go all the way in using a Wordpress installation or similar blogging software.

Isso integrates nicely, just two small changes to my blogs templates and done. All comments are stored in a SQLite DB on this host. This means no data sharing with services like Discourse, Google or the like. Additionally this has the benefit that no registration is required. As I hate it when I have to create yet another account to just write one or two sentences of feedback. More often than not I refrained from commenting because of this.

Comments have to pass a moderation for spam reasons though.

Photo by Markus Spiske: https://www.pexels.com/photo/green-and-yellow-printed-textile-330771/

I finally got around to update to the recent version of Bludit. And as I made two changes to files which will be overwritten, I made myself a small documentation.

Changing the default link target

Post with code example, here: https://admin.brennt.net/changing-the-default-link-target-in-bludits-tinymce

1. Open file bludit-folder/bl-plugins/tinymce/plugin.php file
2. Search for tinymce.init
3. Then we add the default_link_target: '_blank' parameter at the end of the list
4. Don't forget to add a semicolon behind the formerly last parameter

Keep the syntax highlighting

Original post: https://admin.brennt.net/bludit-and-syntax-highlighting

1. Open: bludit-folder/bl-plugins/tinymce/tinymce/plugins/codesample/plugin.min.js
2. Search for <pre and in the class property add line-numbers. It should now look like this: t.insertContent('<pre id="__new" class="language-'+a+' line-numbers">'+r+"</pre>")
3. A little after that pre you will also find t.dom.setAttrib(e,"class","language-"+a), add the line-numbers class in there too, it should look like this: t.dom.setAttrib(e,"class","line-numbers language-"+a)
4. Edit a random blogpost with code in it to verify that newly rendered pages get the line-numbers and syntax highlighting.

Enhancing Cookie security

Mozillas Observatory states that the Bludit Session Cookie is missing the samesite attribute and the Cookie name isn't prefixed with __Secure- or __Host-. I opened an issue for this on GitHub (Bludit issue #1582 Enhance cookie security by setting samesite attribute and adding __Secure- prefix to sessionname) but until this is integrated we can fix it in the following way:

1. Open bludit-folder/bl-kernel/helpers/session.class.php
2. Comment out the line containing: private static $sessionName = 'BLUDIT-KEY';
3. Copy & paste the following to change the Cookie name:

   • // Set the __Secure- prefix if site is called via HTTPS, preventing overwrites from insecure origins
     //   see: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#cookie_prefixes
     //private static $sessionName = 'BLUDIT-KEY';
     private static $sessionName = '__Secure-BLUDIT-KEY';

4. Search for the function session_set_cookie_params
5. Add the following line to add the samesite attribute to the Cookie by adding the following line. Also add a comma at the end of the formerly last line.
   • 'samesite' => 'strict'
6. it should looks like this:

   • session_set_cookie_params([
         'lifetime' => $cookieParams["lifetime"],
         'path' => $path,
         'domain' => $cookieParams["domain"],
         'secure' => $secure,
         'httponly' => true,
         'samesite' => 'strict'
     ]);

Check is the RSS-Feed works

1. Access https://admin.brennt.net/rss.xml and verify there is content displayed.
   • If not: Check if the RSS-Plugin works and is activated

Apply / check CSS changes

I made some small changes to the Solen Theme CSS. These must be re-done when the theme is updated.

1. Open bl-themes/solen-1.0/css/style.css
2. Change link color:
   • Element: .plugin a, ul li a, .footer_entry a, .judul_artikel a, line 5
   • Change: color: #DE004A;
   • To: color: #F06525;
3. Change link color when hovering:
   • Element: .plugin a:hover, ul li a:hover, .footer_entry a:hover, .judul_artikel a:hover, line 10
   • Change: color: #F06525;
   • To: color: #C68449;
4. Fix position of the blockquote bar:
   • Element: blockquote::box-shadow, line 24
   • Change:  box-shadow: inset 5px 0 rgb(255, 165, 0);
   • To:  box-shadow: -5px 0px 0px 0px rgb(255, 165, 0);
5. Format code in posts:
   • Add the following element after line 37:

   • /* My custom stuff */
     code {
         font-size: 87.5%;
         color: #e83e8c;
         word-wrap: break-word;
         font-family: 'Roboto Mono', monospace;
     }

6. Same padding-bottom as padding-top for header:
   • Element .section_title, line 136
   • Change: padding-bottom: 0px;
   • To: padding-bottom: 0.6em;
7. Disable the white blur for the introduction texts:
   • Element: .pratinjau_artikel p:after, line 277
   • Change background: linear-gradient(to right, transparent, #ffffff 80%);
   • To: background: 0% 0%;

Solen-Theme changes

1. Make header smaller:
   • Open solen-1.2/php/mini-hero.php
   • Remove line 4: <h2 class="hero_welcome"><?php echo $L->get('welcome'); ?></h2>

Photo by Monstera: https://www.pexels.com/photo/woman-holding-book-with-blank-pages-6373293/

When creating links in TinyMCE the link-plugin is configured to open links in the current window. As this is the default setting. However I don't like this and changed it every time. And when you change something every single time, you should just make it your new default.

Luckily TinyMCE has good documentation about every plugin. So we learn about the default_link_target parameter we can utilize to achieve exactly this.

We open the bludit-folder/bl-plugins/tinymce/plugin.php file and search for tinymce.init. Then we add the default_link_target: '_blank' parameter at the end of the list. Don't forget to add a semicolon behind the formerly last parameter.

In the end it looks like this:

        tinymce.init({
                selector: "#jseditor",
                auto_focus: "jseditor",
                element_format : "html",
                entity_encoding : "raw",
                skin: "oxide",
                schema: "html5",
                statusbar: false,
                menubar:false,
                branding: false,
                browser_spellcheck: true,
                pagebreak_separator: PAGE_BREAK,
                paste_as_text: true,
                remove_script_host: false,
                convert_urls: true,
                relative_urls: false,
                valid_elements: "*[*]",
                cache_suffix: "?version=$version",
                $document_base_url
                plugins: ["$plugins"],
                toolbar1: "$toolbar1",
                toolbar2: "$toolbar2",
                language: "$lang",
                content_css: "$content_css",
                codesample_languages: [$codesampleConfig],
                default_link_target: '_blank'
        });

And now generated links will per-default open in a new window.

Photo by Pixabay: https://www.pexels.com/photo/computer-c-code-276452/

Bludit offers syntax highlighting via TinyMCE and it's codesample plugin, which you have to enable in the TinyMCE plugin settings first. But it offers only limited support. No Bash, no Puppet, no Perl and so on. Also I wanted line numbering when in code blocks for easier orientation. This is also not included.

The Prism.js library however offers support for many more languages and also some nice Plugins. For example for line-numbering.

To make everything work, the following tasks are necessary:

1. Download & install the Bludit-Prism Plugin from here: https://plugins.bludit.com/plugin/prism
2. Replace prism.js and prism.css files included in this Plugin with newer ones from https://prismjs.com/
   • As the one included in the Bludit Prism-Plugin only has support for: HTML/XML, JavaScript, CSS, PHP, Ruby, Python, Java, C, C#, C++
3. Add our new languages to the codesamples config in the TinyMCE plugin config. This will add them in the dropdown-menu when inserting a code-sample block
4. Edit the plugin.min.js file from the TinyMCE codesample plugin to automatically included the line-numbers plugin into the HTML pre-element.
   • Found this solution here: https://github.com/tinymce/tinymce/issues/2771#issuecomment-232910444

For a general overview, and a little bit of background why the Prism plugin was created, see this link: https://forum.bludit.org/viewtopic.php?t=1818

As I'm somewhat new to Bludit I can't assess if this is the best approach. But for me it works. ;-)

1. Download & install the Bludit-Prism Plugin from here: https://plugins.bludit.com/plugin/prism
   • Then activate it on the Bludit Plugins page
2. Download prism.js and prism.css from https://prismjs.com/
   • Include all languages and plugins you need
   • Note: You need to use the JS and CSS-file from the same generation! You can't mix features or versions.
3. Go to: bludit-folder/bl-plugins/prism and make a backup copy of the original files

   • mv js/prism.js js/prism.js.backup
     mv css/prism.css css/prism.css.backup
     

4. Download new prism.js and prism.css and put into the correct folders
5. Go to: Plugins -> TinyMCE -> Codesample languages and add your new languages, in my case:
   • Bash sh|RegEx regex|Puppet puppet|Perl perl|Python python|HTML/XML markup|JavaScript javascript|CSS css|PHP php|Ruby ruby
   • Unrelated side info: This will be written in the file bludit-folder/bl-content/databases/plugins/tinymce/db.php. I was just curious how/where this change is persisted.
6. Now you will have syntax highlighting. But only in the generated HTML files, not in the TinyMCE code-blocks!
7. To automatically include the line-numbers plugin from Prism.js we need to include the "line-numbers" class into the pre-element. This is done in the following way:
   • Open: bludit-folder/bl-plugins/tinymce/tinymce/plugins/codesample/plugin.min.js
   • Search for <pre and in the class property add line-numbers. It should now look like this: t.insertContent('<pre id="__new" class="language-'+a+' line-numbers">'+r+"</pre>")
   • A little after that pre you will also find t.dom.setAttrib(e,"class","language-"+a), add the line-numbers class in there too, it should look like this: t.dom.setAttrib(e,"class","line-numbers language-"+a)
   • Again, thanks to this comment on GitHub: https://github.com/tinymce/tinymce/issues/2771#issuecomment-232910444
8. Keep in mind: As Bludit is a static file generator, your previously generated pages won't get this automatically. Here you will have to edit the pre-element manually.

If you are interested in some examples, have a look at this page: https://admin.brennt.net/syntax-highlighting-test with line-numbering and without, etc.

Photo by Steve Johnson from Pexels: https://www.pexels.com/photo/four-white-travel-adapters-1694830/

If you run Bludit you might want to give the Admin Bar Plugin a try. It adds a admin bar on top or bottom (configureable) which gives you this neat & handy "Edit post" button when you are logged in. Also quicklinks to all relevant sections (Content, Categories, General, Settings, etc.) and a "New post" button.

Handy.

My recommendation:

• Show site name: Enabled
  • Name of your site with link to it. Useful if you need to get to the front page quickly
• Show extended menu: Enabled (Default)
• Show site settings: Disabled (Default)
• Position of admin bar: Bottom (Default)
  • Else it will overlap with your static sites and search bar

Photo by freestocks.org: https://www.pexels.com/photo/person-holding-space-gray-iphone-5-34407/

1. Make sure your Content-Security-Policy header allows it. This should be enough to see the thumbnail and play the video:
   • In your CSP configuration:
     • frame-src youtube-nocookie.com www.youtube-nocookie.com youtube.com www.youtube.com;
     • img-src 'self' data: https://i.ytimg.com;
     • youtube-nocookie.com is the domain if you choose the privacy option when generating shared links
     • i.ytimg.com is needed for the preview thumbnails
   • If you want CSS, etc. you may need to configure additional headers
   • If you omit this step and you DO have a CSP in place, your browser will just show a "This content has been blocked by a policy"-message or similar. Open your browsers developer console to check for CSP related errors.
2. In Bludit, go to: Plugins -> TinyMCE -> Settings
3. Add media to the "Toolbar top" and "Plugins" fields. Now the button for easier embedding of videos will show up.
   • Of course you can also copy&paste the iFrame-code from the Youtube-Share link and use the source code view (<> Button) to insert it manually.
4. Profit!