Initial blog

Author: usarral

.gitignore

@@ -0,0 +1,12 @@
+node_modules
+out
+public
+resources
+.DS_Store
+package-lock.json
+.now
+.env
+.lighthouseci
+
+.vercel
+.hugo_build.lock

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "tabWidth": 2,
+  "useTabs": false
+}

LICENSE

@@ -0,0 +1,316 @@
+const $ = selector => document.querySelector(selector)
+const $$ = selector => document.querySelectorAll(selector)
+
+const loadedScripts = []
+
+function loadScript(src) {
+  if (loadedScripts.includes(src)) return Promise.resolve()
+
+  return new Promise(function (resolve, reject) {
+    const s = document.createElement('script')
+    let r = false
+    s.type = 'text/javascript'
+    s.src = src
+    s.async = true
+    s.onerror = function (err) {
+      reject(err, s)
+    }
+    s.onload = s.onreadystatechange = function () {
+      // console.log(this.readyState); // uncomment this line to see which ready states are called.
+      if (!r && (!this.readyState || this.readyState === 'complete')) {
+        r = true
+        loadedScripts.push(src)
+        resolve()
+      }
+    }
+    const t = document.getElementsByTagName('script')[0]
+    t.parentElement.insertBefore(s, t)
+  })
+}
+
+// youtube functionality
+function createYoutubeFrame(id) {
+  const html =
+    "<div id='lightbox'><a href='#'><svg width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='#fff' stroke-width='1' stroke-linecap='square' stroke-linejoin='arcs'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg></a> <section> <div> <iframe src='https://www.youtube.com/embed/" +
+    id +
+    "?autoplay=1' width='560' height='315' frameborder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe></div></section></div>"
+  const fragment = document.createRange().createContextualFragment(html)
+  document.body.appendChild(fragment)
+
+  $('#lightbox a').addEventListener(
+    'click',
+    function (e) {
+      e.preventDefault()
+      const lightbox = $('#lightbox')
+      lightbox.parentNode.removeChild(lightbox)
+    },
+    { once: true }
+  )
+}
+
+$$('.youtube-link').forEach(function (link) {
+  link.addEventListener('click', function (e) {
+    e.preventDefault()
+    const id = this.getAttribute('data-id')
+    createYoutubeFrame(id)
+  })
+})
+
+class LiteYTEmbed extends window.HTMLElement {
+  async connectedCallback() {
+    this.videoId = this.getAttribute('videoid')
+
+    let playBtnEl = this.querySelector('.lty-playbtn')
+    // A label for the button takes priority over a [playlabel] attribute on the custom-element
+    this.playLabel = (playBtnEl && playBtnEl.textContent.trim()) || this.getAttribute('playlabel') || 'Play'
+
+    const isWebpSupported = await LiteYTEmbed.checkWebPSupport()
+
+    this.posterUrl = isWebpSupported
+      ? `https://i.ytimg.com/vi_webp/${this.videoId}/hqdefault.webp`
+      : `https://i.ytimg.com/vi/${this.videoId}/hqdefault.jpg`
+
+    // Warm the connection for the poster image
+    LiteYTEmbed.addPrefetch('preload', this.posterUrl, 'image')
+
+    this.style.backgroundImage = `url("${this.posterUrl}")`
+
+    // Set up play button, and its visually hidden label
+    if (!playBtnEl) {
+      playBtnEl = document.createElement('button')
+      playBtnEl.type = 'button'
+      playBtnEl.classList.add('lty-playbtn')
+      this.append(playBtnEl)
+    }
+    if (!playBtnEl.textContent) {
+      const playBtnLabelEl = document.createElement('span')
+      playBtnLabelEl.className = 'lyt-visually-hidden'
+      playBtnLabelEl.textContent = this.playLabel
+      playBtnEl.append(playBtnLabelEl)
+    }
+
+    // On hover (or tap), warm up the TCP connections we're (likely) about to use.
+    this.addEventListener('pointerover', LiteYTEmbed.warmConnections, { once: true })
+
+    // Once the user clicks, add the real iframe and drop our play button
+    // TODO: In the future we could be like amp-youtube and silently swap in the iframe during idle time
+    //   We'd want to only do this for in-viewport or near-viewport ones: https://github.com/ampproject/amphtml/pull/5003
+    this.addEventListener('click', e => this.addIframe())
+  }
+
+  static addPrefetch(kind, url, as) {
+    const linkEl = document.createElement('link')
+    linkEl.rel = kind
+    linkEl.href = url
+    if (as) {
+      linkEl.as = as
+    }
+    document.head.append(linkEl)
+  }
+
+  /**
+   * Check WebP support for the user
+   */
+  static checkWebPSupport() {
+    if (typeof LiteYTEmbed.hasWebPSupport !== 'undefined') { return Promise.resolve(LiteYTEmbed.hasWebPSupport) }
+
+    return new Promise(resolve => {
+      const resolveAndSaveValue = value => {
+        LiteYTEmbed.hasWebPSupport = value
+        resolve(value)
+      }
+
+      const img = new window.Image()
+      img.onload = () => resolveAndSaveValue(true)
+      img.onerror = () => resolveAndSaveValue(false)
+      img.src = 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA='
+    })
+  }
+
+  /**
+   * Begin pre-connecting to warm up the iframe load
+   * Since the embed's network requests load within its iframe,
+   *   preload/prefetch'ing them outside the iframe will only cause double-downloads.
+   * So, the best we can do is warm up a few connections to origins that are in the critical path.
+   *
+   * Maybe `<link rel=preload as=document>` would work, but it's unsupported: http://crbug.com/593267
+   * But TBH, I don't think it'll happen soon with Site Isolation and split caches adding serious complexity.
+   */
+  static warmConnections() {
+    if (LiteYTEmbed.preconnected) return
+
+    // The iframe document and most of its subresources come right off youtube.com
+    LiteYTEmbed.addPrefetch('preconnect', 'https://www.youtube-nocookie.com')
+    // The botguard script is fetched off from google.com
+    LiteYTEmbed.addPrefetch('preconnect', 'https://www.google.com')
+
+    // Not certain if these ad related domains are in the critical path. Could verify with domain-specific throttling.
+    LiteYTEmbed.addPrefetch('preconnect', 'https://googleads.g.doubleclick.net')
+    LiteYTEmbed.addPrefetch('preconnect', 'https://static.doubleclick.net')
+
+    LiteYTEmbed.preconnected = true
+  }
+
+  addIframe() {
+    const params = new URLSearchParams(this.getAttribute('params') || [])
+    params.append('autoplay', '1')
+
+    const iframeEl = document.createElement('iframe')
+    iframeEl.width = 560
+    iframeEl.height = 315
+    // No encoding necessary as [title] is safe. https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html#:~:text=Safe%20HTML%20Attributes%20include
+    iframeEl.title = this.playLabel
+    iframeEl.allow = 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'
+    iframeEl.allowFullscreen = true
+    // AFAIK, the encoding here isn't necessary for XSS, but we'll do it only because this is a URL
+    // https://stackoverflow.com/q/64959723/89484
+    iframeEl.src = `https://www.youtube-nocookie.com/embed/${encodeURIComponent(this.videoId)}?${params.toString()}`
+    this.append(iframeEl)
+
+    this.classList.add('lyt-activated')
+
+    // Set focus for a11y
+    this.querySelector('iframe').focus()
+  }
+}
+// Register custome element
+window.customElements.define('lite-youtube', LiteYTEmbed)
+
+// Show share only when needed
+const intersectionObserverOptions = {
+  rootMargin: '0px',
+  threshold: 1.0
+}
+
+const $share = document.getElementById('share')
+
+if ($share) {
+  const $articlePagination = document.getElementById('article-pagination')
+  const $footer = $('footer')
+  const elementToObserve = $articlePagination || $footer
+
+  const onIntersect = function (entries) {
+    const [entry] = entries
+    const hide = entry.boundingClientRect.top <= 0 || entry.isIntersecting
+    $share.classList.toggle('u-none', hide)
+  }
+
+  const observer = new window.IntersectionObserver(
+    onIntersect,
+    intersectionObserverOptions
+  )
+
+  observer.observe(elementToObserve)
+}
+
+const ALGOLIA_APPLICATION_ID = 'QK9VV9YO5F'
+const ALGOLIA_SEARCH_ONLY_API_KEY = '247bb355c786b6e9f528bc382cab3039'
+let algoliaIndex
+
+const $form = $('.ais-SearchBox-form')
+const $input = $('.ais-SearchBox-input')
+const $reset = $('.ais-SearchBox-reset')
+const $hits = $('#hits')
+
+function getAlgoliaIndex() {
+  if (algoliaIndex) return algoliaIndex
+  console.log('🚀 ~ file: scripts.js ~ line 222 ~ getAlgoliaIndex ~ algoliaIndex', algoliaIndex)
+
+  const algoliaClient = window.algoliasearch(ALGOLIA_APPLICATION_ID, ALGOLIA_SEARCH_ONLY_API_KEY, {
+    _useRequestCache: true
+  })
+  algoliaIndex = algoliaClient.initIndex('prod_blog_content')
+  return algoliaIndex
+}
+
+$form.addEventListener('submit', function (e) {
+  e.preventDefault()
+})
+
+$reset.addEventListener('click', function (e) {
+  $input.value = ''
+  $hits.innerHTML = ''
+})
+
+$input.addEventListener('input', async function (e) {
+  await loadScript('https://cdn.jsdelivr.net/npm/[email protected]/dist/algoliasearch-lite.umd.js')
+
+  const { value } = e.target
+  if (value === '') {
+    $hits.innerHTML = ''
+    $reset.setAttribute('hidden')
+  }
+
+  $reset.removeAttribute('hidden')
+  $hits.removeAttribute('hidden')
+
+  const algoliaIndex = getAlgoliaIndex()
+  algoliaIndex.search(value, {
+    hitsPerPage: 3
+  }).then(({ hits }) => {
+    let hitsHtml = ''
+    hits.forEach(hit => {
+      const {
+        link,
+        _highlightResult: {
+          title: { value: title },
+          description: { value: description }
+        }
+      } = hit
+
+      hitsHtml += `
+      <li class='ais-Hits-item'>
+        <a href='${link}'>
+          ${title}
+          <div>
+            <small>${description}</small>
+          </div>
+        </a>
+      </li>`
+    })
+
+    $hits.innerHTML = hitsHtml
+  })
+})
+
+// Table Of Contents script
+function initTableOfContents() {
+  const firstTableOfContentsElement = $('#TableOfContents-container li')
+  if (!firstTableOfContentsElement) return null
+
+  // activate first element of table of contents
+  firstTableOfContentsElement.classList.add('active')
+  // get all links from table of contents
+  const links = $$('#TableOfContents-container li a')
+
+  const changeBgLinks = entries => {
+    entries.forEach(entry => {
+      const { target, isIntersecting, intersectionRatio } = entry
+      if (isIntersecting && intersectionRatio >= 0.5) {
+        const id = target.getAttribute('id')
+        $('#TableOfContents-container li.active').classList.remove('active')
+        $(`nav li a[href="#${id}"]`).parentElement.classList.add('active')
+
+        links.forEach(link => {
+          link.addEventListener('click', (e) => {
+            $('#TableOfContents-container li.active').classList.remove('active')
+            link.parentElement.classList.add('active')
+          })
+        })
+      }
+    })
+  }
+
+  const options = {
+    threshold: 0.5,
+    rootMargin: '50px 0px -55% 0px'
+  }
+
+  const observer = new window.IntersectionObserver(changeBgLinks, options)
+
+  const articleTitles = $$('#article-content h2')
+  articleTitles.forEach(section => observer.observe(section))
+}
+
+initTableOfContents()
+

assets/js/scripts.js

@@ -0,0 +1,35 @@
+baseURL = "https://blog.usarr.tech"
+languageCode = "es-ES"
+title = "Blog | Usarral"
+
+disableHugoGeneratorInject = true
+defaultContentLanguage = "es"
+preserveTaxonomyNames = true
+paginate = 7
+
+[permalinks]
+  posts = "/:filename/"
+
+[params]
+  description = "Blog | Usarral"
+  image = "/favicon/apple-touch-icon.png"
+
+[markup]
+  [markup.highlight]
+    guessSyntax = true
+    noClasses = false
+    tabWidth = 2
+
+[markup.goldmark.renderer]
+unsafe= true
+
+[outputs]
+home = ["HTML", "RSS", "Algolia"]
+
+[outputFormats]
+  [outputFormats.Algolia]
+    baseName = "algolia"
+    mediaType = "application/json"
+    isPlainText = true
+    notAlternative = true
+

assets/js/t.js

@@ -0,0 +1,25 @@
+---
+title: "Instalación de Hugo CMS"
+date: 2022-09-28
+topic: javascript
+toc: true
+tags:
+    - terminal
+---
+## Instalación Hugo en Windows
+
+Para instalar Hugo en Linux lo primero que vamos a hacer es comprobar si tenemos snap, para ello utilizaremos el siguiente comando:
+
+```sh
+snap version
+
+```
+## Instalación Hugo en Windows
+
+Para instalar Hugo en Linux lo primero que vamos a hacer es comprobar si tenemos snap, para ello utilizaremos el siguiente comando:
+
+```sh
+snap version
+
+```
+