Merge pull request #1 from migtarx/post/onboarding

Post/onboarding

content/posts/onboarding/index.es.md

@@ -0,0 +1,37 @@
++++
+title = 'Finalmente un blog'
+date = 2023-10-30
+author = "migtarx"
+slug = "onboarderland"
+translationKey = "i18n-onboarderland"
+description = "¡Finalmente una forma de compartir mis experiencias y también documentar todos mis procesos! ¡Esto parece prometedor!"
+draft = false
+cover = "posts/img/image1.jpg"
++++
+Pues tras muchos amagos, y metiendo el hocico en el mundo de los blogs, de refilon me encontre la pagina web ([apalrd.net](https://www.apalrd.net/)) de un youtuber norte americano que sigo hace tiempo [apalrd](https://www.youtube.com/@apalrdsadventures) (un geek de administrar sistemas y proxmox).
+
+El caso es que urgando en su pagina encontre que estaba hecha con algo que se llamaba **[HUGO](https://gohugo.io/)**. 
+- "Pero Miguel, que leches es **HUGO**?!"
+
+Pues **HUGO** es un generador de sitios web estáticos de código abierto que facilita la creación de páginas web rápidas y flexibles, con una estructura simplificada basada en archivos de texto plano y plantillas personalizables. Por lo que con un simple archivo markdown es una tonteria escribir posts nuevos.
+
+No es como un wordpress, que no tienes que saber de nada para levantar un blog y crear posts...pero lo que me mola de HUGO es lo flexible que es ante lo que yo quiera cambiar (estilos, estructura de las paginas...) y sobre todo, los trozos de codigo se ven espectaculares!
+
+```java
+  public class HelloWorld {
+    public static void main(String[] args) {
+        System.out.println("Hello, World!");
+    }
+  }
+```
+Hace que no usaba java por lo menos año y medio jaja (en realidad le he pedido a chatGPT que me haga un codigo de ejemplo), pero mas que nada porque creo que es el lenguaje que mas me permite lucir las cajas de codigo.
+
+El caso es que con **HUGO** en un dia he aprendido a mas o menos usarlo (configurar un tema, crear posts y traducciones). Y en lo que me sobro de dia preparar un mini servidor web express (MVP) para servir los estaticos tras la build de **HUGO** y configurar el repo y los workflows de github para desplegar en mi servidor. 
+
+>En otros posts hablaremos de mis workflows (son una chorrada) y sobre como tengo montado mi servidor con proxomox.
+
+La unica pega que le encuentro a HUGO es que para interactuar con tus lectores te toca ingniarte algo. En mi caso, a pesar de que HUGO genere archivos estaticos, se pueden seguir incluyendo llamadas fetch o XHR al backend que sirve los estaticos (en mi caso express), asi que algo me ingeniare para organizar votaciones de nuevos posts y una especie de newsletter.
+
+La verdad es que no se que mas contaros! Creo que como primera entrada no esta mal. Tengo un monton de ganas de compartir mis conocimientos y experiencias con vosotros. Aun estoy pensando de que sera mi proxi post...
+
+Quien sabe, igual sobre mi transicion sobre ser un HATER DE APPLE a que todos mis dispositivos de mi dia a dia sean de ellos. O sobre workflows en github?  

content/posts/onboarding/index.md

@@ -0,0 +1,38 @@
++++
+title = 'Finally a Blog'
+date = 2023-10-30T22:13:09+01:00
+author = "migtarx"
+slug = "onboarderland"
+translationKey = "i18n-onboarderland"
+description = "Finally a way to share my experiences and also to document all my processes! This looks promising!"
+draft = false
+cover = "posts/img/image1.jpg"
++++
+
+So, after many hesitations and poking around in the world of blogs, I stumbled upon the website of a North American YouTuber I've been following for a while, [apalrd](https://www.youtube.com/@apalrdsadventures) (a geek in systems administration and Proxmox).
+
+Digging into his website, I discovered it was built with something called **[HUGO](https://gohugo.io/)**.
+- "But Miguel, what on earth is **HUGO**?!"
+
+Well, **HUGO** is an open-source static website generator that simplifies the creation of fast and flexible web pages. It uses a streamlined structure based on plain text files and customizable templates. With a simple markdown file, creating new posts is a piece of cake.
+
+It's not like WordPress, where you don't need to know anything to set up a blog and create posts... but what excites me about HUGO is its flexibility in accommodating whatever changes I want (styles, page structures...), and especially how spectacular code snippets look!
+
+```java
+public class HelloWorld {
+  public static void main(String[] args) {
+    System.out.println("Hello, World!");
+  }
+}
+```
+It's been at least a year and a half since I last used Java, haha (I actually asked ChatGPT to generate an example code for me), but mainly because I believe it's the language that best showcases code blocks.
+
+The thing is, with **HUGO**, in a day, I've managed to learn how to use it more or less (setting up a theme, creating posts, and translations). And with the time I had left in the day, I set up a mini Express web server (MVP) to serve the static files after the **HUGO** build and configured the repository and GitHub workflows to deploy on my server.
+
+>In other posts, I'll discuss my workflows (they're simple) and how I have my server set up with Proxmox.
+
+The only drawback I find with HUGO is that if you want to interact with your readers, you have to come up with something. In my case, even though HUGO generates static files, you can still include fetch calls or XHR to the backend serving the static files (in my case, Express), so I'll come up with something to organize voting for new posts and a kind of newsletter.
+
+Honestly, I don't know what else to tell you! I think it's not a bad first entry. I'm really excited to share my knowledge and experiences with all of you. I'm still contemplating what my next post will be...
+
+Who knows, maybe about my transition from being an APPLE HATER to having all my day-to-day devices from them? Or perhaps about workflows in GitHub?

hugo.toml

@@ -6,31 +6,20 @@ publishDir = "src/public"
 
 [params]
   contentTypeName = "posts"
-
   defaultTheme = "dark"
-
-  # if you set this to 0, only submenu trigger will be visible
   showMenuItems = 2
-
-  # Show reading time in minutes for posts
   showReadingTime = false
-
-  # Show table of contents at the top of your posts (defaults to false)
-  # Alternatively, add this param to post front matter for specific posts
-  # toc = true
-
-  # Show full page content in RSS feed items
-  #(default is Description or Summary metadata in the front matter)
   rssFullText = true
 defaultContentLanguage = "en"
 [languages]
   [languages.es]
+    languageName = "es"
     title = "El blog de migtarx"
     subtitle = "Las aventuras del chico tech"
     keywords = ""
     copyright = ""
     menuMore = "Mostrar mas"
-    writtenBy = "Escritor por"
+    writtenBy = "Escrito por"
     readMore = "Leer mas"
     readOtherPosts = "Leer otros articulos"
     newerPosts = "Articulos nuevos"
@@ -42,15 +31,8 @@ defaultContentLanguage = "en"
       logoText = "migtarx"
       logoHomeLink = "/"
     [languages.es.menu]
-      [[languages.es.menu.main]]
-        identifier = "about"
-        name = "About"
-        url = "/about"
-      [[languages.es.menu.main]]
-        identifier = "enlang"
-        name = "EN"
-        url = "/"
   [languages.en]
+   languageName = "en"
     title = "migtarx blog"
     subtitle = "the adventures of a tech guy"
     keywords = ""
@@ -68,11 +50,3 @@ defaultContentLanguage = "en"
       logoText = "migtarx"
       logoHomeLink = "/"
     [languages.en.menu]
-      [[languages.en.menu.main]]
-        identifier = "about"
-        name = "About"
-        url = "/about"
-      [[languages.en.menu.main]]
-        identifier = "eslang"
-        name = "ES"
-        url = "/es"

resources/_gen/assets/scss/css/style.scss_f120a3f402b106f64b18d498afd3d82e.content

@@ -381,6 +381,15 @@ body {
   @media (max-width: 684px) {
     body {
       font-size: 1rem; } }
+.post a {
+  color: #27aff8; }
+
+.post-title {
+  color: #27aff8; }
+
+.current-language {
+  display: block !important; }
+
 h1, h2, h3, h4, h5, h6 {
   line-height: 1.3; }
 

themes/hello-friend/assets/css/main.scss

@@ -28,6 +28,18 @@ body {
   }
 }
 
+.post a {
+  color: #27aff8;
+}
+
+.post-title {
+  color: #27aff8;
+}
+
+.current-language{
+  display: block !important;
+}
+
 h1, h2, h3, h4, h5, h6 {
   line-height: 1.3;
 }

themes/hello-friend/assets/js/theme.js

@@ -1,31 +1,8 @@
 // Toggle theme
 
 const localTheme = window.localStorage && window.localStorage.getItem("theme");
-const themeToggle = document.querySelector(".theme-toggle");
 
 if (localTheme) {
   document.body.classList.remove("light-theme", "dark-theme");
   document.body.classList.add(localTheme);
-}
-
-themeToggle.addEventListener("click", () => {
-  const themeUndefined = !new RegExp("(dark|light)-theme").test(document.body.className);
-  const isOSDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-
-  if (themeUndefined) {
-    if (isOSDark) {
-      document.body.classList.add("light-theme");
-    } else {
-      document.body.classList.add("dark-theme");
-    }
-  } else {
-    document.body.classList.toggle("light-theme");
-    document.body.classList.toggle("dark-theme");
-  }
-
-  window.localStorage &&
-    window.localStorage.setItem(
-      "theme",
-      document.body.classList.contains("dark-theme") ? "dark-theme" : "light-theme",
-    );
-});
+}

themes/hello-friend/layouts/partials/header.html

@@ -11,9 +11,11 @@
           </svg>
         </span>
       {{ end }}
-      <span class="theme-toggle">
-        {{ partial "theme-icon.html" . }}
-      </span>
+      {{ if eq .Site.Language.Lang "es" }}
+          <a href="/"><img src="/img/uk.png" style="height: 30px"></a>
+        {{ else }}
+        <a href="/es"><img src="/img/es.png" style="height: 30px"></a>
+        {{ end }}
     </span>
   </span>
 </header>