From 09b74b513b27ccc61f3ab75b384721867e24aae2 Mon Sep 17 00:00:00 2001 From: jamerrq Date: Tue, 23 Jan 2024 11:43:13 -0500 Subject: [PATCH] =?UTF-8?q?=E2=9C=85=20stable=20version?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/components/blog/last-entries.tsx | 23 ++++++---- src/components/main/buttons.astro | 3 +- src/components/main/working-on.astro | 2 +- src/data/blog.json | 14 ++++-- src/data/resources.json | 13 ++++++ src/layouts/layout.astro | 11 +++++ src/pages/blog/building-this-website.md | 57 ++++++++++++++----------- src/pages/es/blog/acerca-de-esta-web.md | 48 +++++++++++---------- 9 files changed, 111 insertions(+), 62 deletions(-) diff --git a/package.json b/package.json index 405fe19..40d454c 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "astro": "astro", "lint": "prettier --write \"**/*.{js,jsx,ts,tsx,md,mdx,astro}\" && eslint --fix \"src/**/*.{js,ts,jsx,tsx,astro}\"", "check-tsx": "tsc --noEmit --skipLibCheck --project tsconfig.json", - "local-build-and-preview": "bun lint && bun run build && bun run preview" + "local-build-and-preview": "bun lint && bun check-tsx && bun run build && bun run preview" }, "type": "module", "devDependencies": { diff --git a/src/components/blog/last-entries.tsx b/src/components/blog/last-entries.tsx index 0697181..06b2bee 100644 --- a/src/components/blog/last-entries.tsx +++ b/src/components/blog/last-entries.tsx @@ -87,15 +87,20 @@ export default function LastEntries({ lang = 'en' }: { lang?: string }) {
  • {entry.date}
    • -
  • - - {lang === 'en' ? entry.title : entry.titleEs} - -
    - -
    - -
    • + +
  • +
    + {lang === 'en' ? entry.title : entry.titleEs} +
    + +
    +
    + +
    • +     ) })} diff --git a/src/components/main/buttons.astro b/src/components/main/buttons.astro index a962831..6b32d86 100644 --- a/src/components/main/buttons.astro +++ b/src/components/main/buttons.astro @@ -45,8 +45,9 @@ import Translator from '@components/icons/translator.astro' import Shuffle from '@components/icons/shuffle.astro' import GoBack from '@components/icons/go-back.astro' +console.log(process.env.NODE_ENV) const BOARD_BUTTON_STYLE = - process.env.NODE_ENV === 'development' ? '' : 'hidden' + process.env.NODE_ENV === 'development' ? 'hidden' : 'hidden' // {SVGS_STYLES} const SVGS_STYLES = [ diff --git a/src/components/main/working-on.astro b/src/components/main/working-on.astro index d960a51..0055dd6 100644 --- a/src/components/main/working-on.astro +++ b/src/components/main/working-on.astro @@ -99,7 +99,7 @@ const { lang = 'en' }: Props = Astro.props - {lang === 'en' ? '5+ months' : '5+ meses'} + {lang === 'en' ? '6+ months' : '6+ meses'} diff --git a/src/data/blog.json b/src/data/blog.json index e1dc5dc..a81f189 100644 --- a/src/data/blog.json +++ b/src/data/blog.json @@ -6,7 +6,7 @@ "titleEs": "El proceso de crear este sitio web con Astro y Tailwind CSS", "href": "blog/building-this-website", "hrefEs": "blog/acerca-de-esta-web", - "readTimeMins": "5", + "readTimeMins": "15", "tags": [ "astro", "tailwindcss", @@ -15,11 +15,19 @@ ] }, { - "title": "5+ years using Linux: My experience and setup", + "title": "5+ years using Linux: My experience and current setup", "date": "2024-Jan-16", "titleEs": "5+ años usando Linux: Mi experiencia y configuración actual", "href": "5-years-using-linux", - "hrefEs": "60-meses-con-linux" + "hrefEs": "60-meses-con-linux", + "readTimeMins": "10", + "tags": [ + "linux", + "ubuntu", + "zsh", + "i3wm", + "vim" + ] }, { "title": "Projects to develop in 2024", diff --git a/src/data/resources.json b/src/data/resources.json index 1863819..30258d7 100644 --- a/src/data/resources.json +++ b/src/data/resources.json @@ -69,6 +69,19 @@ { "title": "Color Palettes", "website": "https://colorhunt.co/" + }, + { + "title": "Awesome Lists", + "repository": "https://github.com/sindresorhus/awesome" + }, + { + "title": "Oh My Zsh", + "website": "https://ohmyz.sh/", + "repository": "https://github.com/ohmyzsh/ohmyzsh" + }, + { + "title": "Multithreading Tutorials", + "repository": "https://github.com/thanhit95/multi-threading" } ] } diff --git a/src/layouts/layout.astro b/src/layouts/layout.astro index a2b2fea..b5113c5 100644 --- a/src/layouts/layout.astro +++ b/src/layouts/layout.astro @@ -88,8 +88,14 @@ const BODY_CLASS = import.meta.env.MODE === 'development' ? 'debug-screens' : '' lightIcon.classList.remove('hidden') // en caso que se haya configurado previamente document.documentElement.classList.add('dark') + // remover la clase light si está presente + document.documentElement.classList.remove('light') } else { darkIcon.classList.remove('hidden') + // en caso que se haya configurado previamente + document.documentElement.classList.add('light') + // remover la clase dark si está presente + document.documentElement.classList.remove('dark') } const themeToggleBtn = document.getElementById('theme-toggle') @@ -102,18 +108,23 @@ const BODY_CLASS = import.meta.env.MODE === 'development' ? 'debug-screens' : '' if (localStorage.getItem('color-theme')) { if (localStorage.getItem('color-theme') === 'light') { document.documentElement.classList.add('dark') + // remover la clase light si está presente + document.documentElement.classList.remove('light') localStorage.setItem('color-theme', 'dark') } else { document.documentElement.classList.remove('dark') + // remover la clase dark si está presente localStorage.setItem('color-theme', 'light') } // se comprueba si el sistema operativo tiene configurado el tema oscuro } else if (document.documentElement.classList.contains('dark')) { document.documentElement.classList.remove('dark') + document.documentElement.classList.add('light') localStorage.setItem('color-theme', 'light') } else { document.documentElement.classList.add('dark') + document.documentElement.classList.remove('light') localStorage.setItem('color-theme', 'dark') } }) diff --git a/src/pages/blog/building-this-website.md b/src/pages/blog/building-this-website.md index e3782a8..44699cf 100644 --- a/src/pages/blog/building-this-website.md +++ b/src/pages/blog/building-this-website.md @@ -4,6 +4,8 @@ title: About this awesome website hrefLang: ../es/blog/acerca-de-esta-web/ --- +![og-image](https://jamerrq.deno.dev/og-image.png) + # Introduction Every developer needs a website. It's a place to showcase your work, your @@ -35,14 +37,15 @@ Next.js or Nuxt.js. It's up to you and the task you want to accomplish. ## Astro -I decided to use Astro. Astro is a framework that allows +I decided to use Astro. Astro is a framework that allows you to build websites using components. That is, you can create reusable components and combine them to build your website. In addition, Astro is framework-agnostic. This means that you can use almost any JavaScript framework to build your components in case you need interactivity. It's very easy to use and has very complete documentation. - +
    @@ -81,7 +84,8 @@ also that this would make it easy for me to adapt it to mobile devices. In addition, I decided to use Tailwind CSS to style the website. This article about Bento boxes talks in more detail about this type of design. -Web design trend: bento box +Web design trend: bento box # The Development @@ -90,37 +94,38 @@ This article about Bento boxes talks in more detail about this type of design. Once the design was defined, it was time to get to start the job. The first thing you usually do when you start a project is to create the project structure using your favorite package manager. Since a while ago I have been using -pnpm and I really like it. It's very fast and efficient, it +pnpm and I really like it. It's very fast and efficient, it has a very good caching system, and it's very easy to use. Indeed it is my preferred package manager for all my TS/JS projects. However, since this is a personal project, I felt free to continue exploring the new JS -runtime tool Bun. Bun is a new package manager that is still in +runtime tool Bun. Bun is a new package manager that is still in its early stages. It's very fast and efficient, it has a very good caching system, and it's easy to use and setup. +target="_blank" title="Bun.sh"> -
    Bun +
    + +Bun
    > target="_blank">Bun is an all-in-one JavaScript runtime & toolkit designed for speed, +> target="_blank" title="Bun.sh">Bun is an all-in-one JavaScript runtime & toolkit designed for speed, > complete with a bundler, test runner, and Node.js-compatible package manager. ## Development tools ### Rules and Syntax: ESLint -ESLint is a tool for identifying and reporting on patterns found in +ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.
    - +
    @@ -169,7 +176,8 @@ The truth about Tailwind CSS could write a whole article. It's just fascinating. If you want to know more about Tailwind CSS, I recommend the following article with 7 benefits that the framework offers:     Embracing the Utility-First Paradigm: +target="_blank" rel="noopener noreferrer" title="Embracing the Utility-First Paradigm: +Benefits of Tailwind CSS">Embracing the Utility-First Paradigm: Benefits of Tailwind CSS By my side, I can say that I love Tailwind CSS. Overall, it's very practical and @@ -179,21 +187,21 @@ icing on the cake. ### Husky Husky is a tool that allows you to run scripts when you commit or push code to +noreferrer" title="Husky">Husky is a tool that allows you to run scripts when you commit or push code to your repository. This is very useful to run tests, linting, or any other pre-commit/pre-push task. Check out the Husky documentation for more information. +noreferrer" title="Husky docs">Husky documentation for more information. ### Fonts: Fontsource Fontsource is a collection of open-source fonts that are +noreferrer" title="Fontsource">Fontsource is a collection of open-source fonts that are packaged into individual NPM packages for self-hosting in your web applications. Check out the Fontsource documentation for +target="_blank" rel="noopener noreferrer" title="Fontsource docs">Fontsource documentation for more information about the benefits and advantages of using this tool. ### Client Components: Preact @@ -226,14 +234,14 @@ project I could do with something lighter. That's why I decided to use Preact, which is an alternative to React that weighs only 3kB and has the same modern API. -Preact also comes with an implementation of the modern signals that allow you +Preact also comes with an implementation of the modern signals that allow you to create stateful components very easily. To be more specific, I needed a component that would render my projects through a section that could be iterated, and to be able to load the data dynamically with ease. -Preact is a fast 3kB alternative to React with the same modern API. It provides +Preact is a fast 3kB alternative to React with the same modern API. It provides the thinnest possible Virtual DOM abstraction on top of the DOM. The web is a stable platform, it's time we stopped reimplementing it in the name of portability. Preact is also a first-class citizen of the web platform. It @@ -241,7 +249,7 @@ differs from other frameworks in that it's meant to be included in your other assets and deployed as part of your site instead of being used to create a single-page application (SPA). - +
    @@ -258,10 +266,11 @@ possibility of using it in the future. ### Hosting: Deno Deploy -    Deno +Deno Deploy is a globally distributed platform for serverless JavaScript applications. Your JavaScript, TypeScript, and WebAssembly code runs on managed servers geographically close to your users, enabling low latency and faster response times. Deploy applications run on fast, light-weight V8 isolates rather than virtual machines, powered by the Deno runtime. - +
    diff --git a/src/pages/es/blog/acerca-de-esta-web.md b/src/pages/es/blog/acerca-de-esta-web.md index 29a6c8f..1895802 100644 --- a/src/pages/es/blog/acerca-de-esta-web.md +++ b/src/pages/es/blog/acerca-de-esta-web.md @@ -4,6 +4,8 @@ title: Sobre esta maravillosa página web hrefLang: ../../../blog/building-this-website --- +![og-image](https://jamerrq.deno.dev/og-image.png) + # Introducción Todo desarrollador necesita una página web. Es un lugar para mostrar tu trabajo, @@ -37,15 +39,14 @@ tarea que quieras realizar. ## Astro -Decidí usar Astro. Astro es un framework que te permite +Decidí usar Astro. Astro es un framework que te permite construir páginas web usando componentes. Es decir, puedes crear componentes reutilizables y combinarlos para construir tu página web. Además, Astro es framework-agnostic. Esto significa que puedes usar casi cualquier framework de JavaScript para construir tus componentes en caso de que necesites interactividad. Es muy fácil de usar y tiene una documentación muy completa. - +
    @@ -75,7 +76,7 @@ Además, decidí usar Tailwind CSS para darle estilo a la página web. Este artículo sobre Bento boxes habla con más detalle sobre este tipo de diseño. Web design trend: bento box +target="_blank" rel="noopener noreferrer" title="Web design trend: bento box">Web design trend: bento box # El Desarrollo @@ -84,27 +85,27 @@ target="_blank" rel="noopener noreferrer">Web design trend: bento box Una vez definido el diseño, era hora de ponerse manos a la obra. Lo primero que sueles hacer cuando empiezas un proyecto es crear la estructura del proyecto usando tu gestor de paquetes favorito. Desde hace un tiempo he estado usando -pnpm y +pnpm y me gusta mucho. Es muy rápido y eficiente, tiene un muy buen sistema de caché y es muy fácil de usar. De hecho, es mi gestor de paquetes preferido para todos mis proyectos de TS/JS. Sin embargo, como este es un proyecto personal, me sentí libre de seguir explorando la nueva herramienta de tiempo de ejecución de JS -Bun. Bun +Bun. Bun es un nuevo gestor de paquetes que todavía está en sus primeras etapas. Es muy rápido y eficiente, tiene un muy buen sistema de caché y es fácil de usar y configurar. +target="_blank" title="Bun.sh">
    Bun
    > target="_blank">Bun es un tiempo de ejecución y un conjunto de herramientas de JavaScript todo en uno diseñado para la velocidad, +> target="_blank" title="Bun.sh">Bun es un tiempo de ejecución y un conjunto de herramientas de JavaScript todo en uno diseñado para la velocidad, > completo con un empaquetador, un corredor de pruebas y un administrador de paquetes compatible con Node.js. ## Herramientas de desarrollo @@ -112,14 +113,14 @@ target="_blank"> ### Reglas y sintaxis: ESLint ESLint es una herramienta para identificar y reportar +target="_blank" title="Eslint">ESLint es una herramienta para identificar y reportar patrones encontrados en ECMAScript/JavaScript código, con el objetivo de hacer el código más consistente y evitar errores.
    - + es un formateador de código con opiniones. Aplica un estilo consistente analizando tu código y volviéndolo a imprimir con sus propias reglas que tienen en cuenta la longitud máxima de línea, envolviendo el código cuando sea necesario. @@ -149,12 +150,12 @@ con Prettier. ### Estilos: Tailwind CSS Tailwind CSS es un framework CSS que te permite crear estilos +noreferrer" title="Tailwind CSS">Tailwind CSS es un framework CSS que te permite crear estilos rápida y fácilmente. Es muy fácil de aprender y usar. Además, es muy flexible y te permite crear estilos personalizados. Por ejemplo, puedes crear tus propios colores, tamaños, espaciados, etc. - +
    @@ -166,7 +167,8 @@ artículo con 7 beneficios que ofrece el framework:     Embracing the Utility-First Paradigm: +target="_blank" rel="noopener noreferrer" title="Embracing the Utility-First Paradigm: +Benefits of Tailwind CSS">Embracing the Utility-First Paradigm: Benefits of Tailwind CSS Por mi parte, puedo decir que me encanta Tailwind CSS. En general, es muy @@ -176,22 +178,22 @@ ofrece son la guinda del pastel. ### Husky Husky es una herramienta que te permite ejecutar scripts cuando +noreferrer" title="Husky">Husky es una herramienta que te permite ejecutar scripts cuando haces commit o push a tu repositorio. Esto es muy útil para ejecutar tests, linting, o cualquier otra tarea pre-commit/pre-push. Revisa la documentación de Husky para más información. +rel="noopener noreferrer" title="Husky docs">documentación de Husky para más +información. ### Fuentes: Fontsource Fontsource es una colección de fuentes de código abierto que se +noreferrer" title="Fontsource">Fontsource es una colección de fuentes de código abierto que se empaquetan en paquetes NPM individuales para autohospedaje en tus aplicaciones web. Revisa la documentación de Fontsource para más información +rel="noopener noreferrer" title="Fontsource docs">documentación de Fontsource para más información sobre los beneficios y ventajas de usar esta herramienta. ### Componentes interactivos: Preact @@ -212,7 +214,7 @@ permiten crear componentes con estado muy fácilmente. Para ser más específico, necesitaba un componente que renderizara mis proyectos mediante una sección que se pudiera iterar, y poder cargar los datos de manera dinámica con facilidad. Preact es una alternativa rápida de 3kB a React con la misma API +noreferrer" title="Preactjs">Preact es una alternativa rápida de 3kB a React con la misma API moderna. Proporciona la abstracción de Virtual DOM más delgada posible sobre el DOM. La web es una plataforma estable, es hora de que dejemos de re implementarla en nombre de la portabilidad. Preact también es un ciudadano de primera clase @@ -220,7 +222,7 @@ de la plataforma web. Se diferencia de otros frameworks en que está destinado a ser incluido en tus otros activos y desplegado como parte de tu sitio en lugar de ser utilizado para crear una aplicación de página única (SPA). - +
    @@ -238,7 +240,7 @@ posibilidad de usarlo en el futuro. ### Hosting: Deno Deploy     Deno Deploy es una plataforma distribuida globalmente para +noreferrer" title="Deno Deploy">Deno Deploy es una plataforma distribuida globalmente para aplicaciones JavaScript sin servidor. Tu código JavaScript, TypeScript y WebAssembly se ejecuta en servidores administrados geográficamente cerca de tus usuarios, lo que permite una baja latencia y tiempos de respuesta más rápidos. @@ -246,7 +248,7 @@ Las aplicaciones de despliegue se ejecutan en aislamientos V8 rápidos y ligeros en lugar de máquinas virtuales, alimentadas por el tiempo de ejecución de Deno. - +