121 lines
72 KiB
HTML
121 lines
72 KiB
HTML
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||
|
|
<title>Seamonkey+Hugo=Win!</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
As one of my favorite philosophers like to say, let's begin by
|
||
|
|
defining our terms?<br>
|
||
|
|
<h2>What is Seamonkey?</h2>
|
||
|
|
From <a moz-do-not-send="true"
|
||
|
|
href="https://en.wikipedia.org/wiki/SeaMonkey">Wikipedia</a>:<br>
|
||
|
|
<br>
|
||
|
|
<blockquote> SeaMonkey is a free and open-source Internet suite. It
|
||
|
|
is the continuation of the former Mozilla Application Suite, based
|
||
|
|
on the same source code,[6] which itself grew out of Netscape
|
||
|
|
Communicator and formed the base of Netscape 6 and Netscape 7.<br>
|
||
|
|
<br>
|
||
|
|
SeaMonkey was created in 2005 after the Mozilla Foundation decided
|
||
|
|
to focus on the standalone projects Firefox and Thunderbird. The
|
||
|
|
development of SeaMonkey is community-driven, in contrast to the
|
||
|
|
Mozilla Application Suite, which until its last released version
|
||
|
|
(1.7.13) was governed by the Mozilla Foundation. The new
|
||
|
|
project-leading group is called the SeaMonkey Council</blockquote>
|
||
|
|
More importantly for what we're doing, what is the function that
|
||
|
|
allows us to write documents? That would be the built-in Composer.<br>
|
||
|
|
<blockquote>SeaMonkey Composer is a WYSIWYG HTML editor descended
|
||
|
|
from Mozilla Composer. Its main user interface features four tabs:
|
||
|
|
Normal (WYSIWYG), HTML tags, HTML code, and browser preview. The
|
||
|
|
generated code is HTML 4.01 Transitional.</blockquote>
|
||
|
|
What does that mean for us? That means that we have a mature FOSS
|
||
|
|
HTML editor. However it's a got some secret sauce that I haven't
|
||
|
|
seen in any other editor.<br>
|
||
|
|
<h2>Working with Images</h2>
|
||
|
|
Normally when you're working with Hugo, you need to both upload any
|
||
|
|
images to a static images folder and you need to add in the code to
|
||
|
|
the page to be able to show them. However, since we're looking for
|
||
|
|
an easier way to do this, we want to see how Seamonkey will work
|
||
|
|
with images.<br>
|
||
|
|
<br>
|
||
|
|
Let's take a look at the original HTML source code from the post
|
||
|
|
that I wrote recently on <a moz-do-not-send="true"
|
||
|
|
href="https://theinfopunk.com/osint/geoguessr1/">Geoguessr</a>. <br>
|
||
|
|
<br>
|
||
|
|
<img
|
||
|
|
src="data:image/png;base64,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
|
||
|
|
alt=""><br>
|
||
|
|
<br>
|
||
|
|
Instead of doing the standard <code><img src="image.png"></code>
|
||
|
|
function that you would expect with HTML, it actually incorporates
|
||
|
|
the image directly into the HTML by converting it to base64. This
|
||
|
|
means that you don't need to upload multiple files. You just need to
|
||
|
|
upload a single file that contains everything.<br>
|
||
|
|
<h2>What about Markdown?</h2>
|
||
|
|
If you've been working with Hugo, you probably know that it works
|
||
|
|
natively with Markdown documents, not with the html that Seamonkey
|
||
|
|
provides. Unfortunately that also means that you will need to
|
||
|
|
convert the HTML to Markdown. It's pretty simple to do, but it is an
|
||
|
|
extra step. To do this, I suggest using <a moz-do-not-send="true"
|
||
|
|
href="https://pandoc.org/">Pandoc</a>.<br>
|
||
|
|
<br>
|
||
|
|
Pandoc is great in that it handles both the HTML that is created by
|
||
|
|
Seamonkey and the markdown that is used by Hugo very well. The
|
||
|
|
command is pretty simple:<br>
|
||
|
|
<br>
|
||
|
|
<code>pandoc -f html -t markdown mydocument.html -o mydocument.md</code><br>
|
||
|
|
<br>
|
||
|
|
With this command we are telling Pandoc to convert from HTML to
|
||
|
|
Markdown. The original document name is mydocument.html and we want
|
||
|
|
it to output it mydocument.md<br>
|
||
|
|
<h2>What about Hugo?</h2>
|
||
|
|
Is there anything special that you need to do with Hugo? Not really,
|
||
|
|
but I would do it the following way to ensure that Hugo is OK with
|
||
|
|
the markdown file from Pandoc, but this is probably not the only
|
||
|
|
way.<br>
|
||
|
|
<br>
|
||
|
|
Create a new post:<br>
|
||
|
|
<br>
|
||
|
|
hugo new content posts/mydocument.md<br>
|
||
|
|
<br>
|
||
|
|
Then get the headers section from this file:<br>
|
||
|
|
<code><br>
|
||
|
|
</code><code>+++</code><code><br>
|
||
|
|
</code><code>title = "Mydocument"</code><code><br>
|
||
|
|
</code><code>date = "2023-09-09T14:15:52+02:00"</code><code><br>
|
||
|
|
</code><code>author = ""</code><code><br>
|
||
|
|
</code><code>authorTwitter = "" #do not include @</code><code><br>
|
||
|
|
</code><code>cover = ""</code><code><br>
|
||
|
|
</code><code>tags = ["", ""]</code><code><br>
|
||
|
|
</code><code>keywords = ["", ""]</code><code><br>
|
||
|
|
</code><code>description = ""</code><code><br>
|
||
|
|
</code><code>showFullContent = false</code><code><br>
|
||
|
|
</code><code>readingTime = false</code><code><br>
|
||
|
|
</code><code>hideComments = false</code><code><br>
|
||
|
|
</code><code>color = "" #color from the theme settings</code><code><br>
|
||
|
|
</code><code>+++</code><br>
|
||
|
|
<br>
|
||
|
|
And then add it to the mydocument.md that was created by
|
||
|
|
Pandoc. After that copy the full file back to the posts
|
||
|
|
directory or where ever you want to it to go and then run the hugo
|
||
|
|
command like you normally would.<br>
|
||
|
|
<br>
|
||
|
|
What does this do for me?<br>
|
||
|
|
<br>
|
||
|
|
In my opinion, it simplifies the creation of new pages for Hugo.
|
||
|
|
Yes, you can write the Markdown files by hand if you prefer. I know
|
||
|
|
a lot of people do. However, if you're using Hugo as a blogging
|
||
|
|
platform and you want to quickly write a page with images without a
|
||
|
|
lot of hassle, this is amazing. To me, this combination is a
|
||
|
|
Wordpress killer. The main reason I kept going back to Wordpress is
|
||
|
|
because it was a lot easier to just write without worrying about a
|
||
|
|
lot of extra details that I am prone to forget. Using this method, I
|
||
|
|
can simply write, save, convert to markdown, and then use the files
|
||
|
|
in hugo. Granted, there are more steps that just pushing "Publish"
|
||
|
|
but the pages that I create are simple. They have no cookies. They
|
||
|
|
have no intrusive Javascript. They are just simple pages that share
|
||
|
|
the information that I want to share.<br>
|
||
|
|
<h2> </h2>
|
||
|
|
</body>
|
||
|
|
</html>
|