Forem: Vlank

Configurar nic.ar + Cloudflare + Netlify

Vlank — Mon, 15 Jan 2024 16:10:21 +0000

¿Estás cansado de parecer una 🐀 presentando tu portfolio con el dominio .netlify.app porque no podes pagar un hosting ya que no tenes laburo?
No te puedo ayudar a encontrarlo, pero si a configurar tu dominio para no tener nada que envidiarle a los planes premium de SeñorHostinga. ¡Te dejo un temita de fondo y empecemos!

Dominio

El primer paso es conseguir un dominio en nic.ar para asignarlo como nuestro identificador en la web. Vas a tener que entrar con tu cuenta de AFIP (capaz bajarte la app y registrar tu biometría).

Luego vas a darle a registrar, te va a mostrar tus datos que por obvias razones no comparto y te va a redireccionar al pago (precios).

Siendo que PagoMisCuentas es una basura y te vas a derretir en el Rapipago, si no tenes una tarjeta de crédito podes usar esas tarjetas fintech prepagas que las toman como crédito (creo que usé la de Lemon) o probar con una de débito.

Cuando te confirme el pago y aparezca en Mis trámites > Finalizados podes continuar a la delegación

Delegación

Siendo que la navegación es un poco confusa, asegurate de entrar a nic.ar > Ingreso > N° de CUIT/CUIL y Clave Fiscal. De esta forma te va a redireccionar al portal en cuestión porque NI IDEA cómo encontrarlo en los trámites.

Allí te va a aparecer la opción para delegar tu dominio, donde vas a tener que ingresar los DNS que te otorgue Netlify o Cloudflare.

Al darle a delegar te vas a encontrar con los siguientes campos que te voy a explicar con qué llenar según el "resolvedor" de dominios que elijas.

DNS

Si vas a usar los DNS de Netlify, vas a tener que ir a tu sitio > Domain Management > Add domain alias.

Ej: Agregas tudominio.com.ar y www.tudominio.com.ar para que se encuentre tu sitio con ambos dominios

Luego, te va a requerir un DNS para encontrar tus dominios y tenes dos opciones

Opción 1 - Netlify

Usas los DNS de Netlify para que encuentren tu sitio.

Esto va a generarte unos 4 DNS que son los que vas a llenar uno por uno en la delegación que te mostré anteriormente.

Una vez que los guardes va a tomar un tiempo máximo de 24 horas hasta funcionar correctamente aunque suelen pasar unos minutos o una hora.

Opción 2 - Cloudflare

Siendo que Netlify puede hacer todo me dirás ¿para qué usar Cloudflare? Bueno, la versión gratuita de Cloudflare te permite ver métricas de países de los que viene tu tráfico sumado a protección contra ataques y cacheo (al menos automático hasta que sepa configurarlo y si no es pago).

A diferencia del paso anterior, vas a darle a donde dice "Awaiting external DNS" y esto te va a dar las configuraciones necesarias para Cloudflare. Ahora vamos a Cloudflare.

Configuración de DNS

Vas a cloudflare, te logueas (creas tu cuenta si no tenías), vas a añadir sitio, ingresás tu dominio, seleccionás la versión free, esperas a que escanee, saltas el "Add more DNS records" y confirmas el "Add records later". Vas a ver esto:

Más abajo, vas a encontrar las DNS que necesitas para nic.ar. El tiempo de espera es el mismo, Cloudflare te va a avisar cuando se haya realizado la propagación de tu dominio por los DNS (para que se encuentre en el mundo tudominio.com.ar).

Una vez que concluya, vas a la página principal del sitio

Ingresas a DNS settings y agregas 2 records (registros). Si queres activás el proxy (ofrece las protecciones que mencioné además de realizar la resolución de DNS).

Tipo: A ; Nombre: tudominio.com.ar; IPv4: 75.2.60.5 (vas a ver que es lo mismo que te aparece cuando clickeaste "Awaiting external DNS".
Tipo: CNAME ; Nombre: www ; IPv4: elnombrededominiode.netlify.app

Luego, vas a volver a Netlify, y en un tiempo se va a ir ese cartel de Awaiting External DNS. Sin embargo, es necesario que actives las DNS de Netlify también.
¿Por qué? No estoy seguro, pero sin eso Cloudflare no estaba encontrando mi sitio, así que puede ser que necesita las DNS para encontrar el dominio midominio.netlify.app
Si sabes por qué o cometí algún error en los registros, dejame tu comentario para ayudarnos.

How to make a Dark-Mode in ASP.NET MVC 7

Vlank — Sat, 02 Sep 2023 23:35:29 +0000

While creating my portfolio I found the need to implement a dark mode with no more than a few tools, because this project was made to learn ASP.NET, not a javascript framework. So go on...

Tools

C#
CSS
JavaScript

Some background

When I was researching about how to make a dark mode I found this website. I followed up the "body-class" method, all worked fine but when I refresh the page the theme doesn't persist. ~~Then, I tried to save data to local storage with JavaScript, but it didn't work, so I decided to use cookies.~~

Method 1 - LocalStorage

In this way, we keep the changes of the view on the client-side.

Step 1

Add a class to the components that you want to change their theme. This class will be your default theme, so keep it in mind.

// Shared/_Layout.cshtml
<body class="dark-theme">
  @RenderBody()
<script src="~/js/site.js" asp-append-version="true"></script>
</body>
// Views/Home
<div class="home-lower dark-theme">
</div>

Step 2

Add a script to remove the class name based on the local storage variable name.

const themeName = 'dark-theme';
const itemDivs = document.querySelectorAll('.dark-theme');
const themeSwitcher = document.getElementById('theme-switcher');
const darkTheme = localStorage.getItem(themeName);

if(darkTheme === null){
localStorage.setItem(themeName,"active");
} else if(darkTheme === "active"){
addTheme();
} else {
removeTheme();
}

themeSwitcher.addEventListener('click',function (){
let currentTheme = localStorage.getItem(themeName);
if(currentTheme === "inactive"){
localStorage.setItem(themeName,"active");
addTheme();
} else if (currentTheme === "active"){
localStorage.setItem(themeName,"inactive");
removeTheme();
}
})

function removeTheme(){
itemDivs.forEach(itemDiv => {
itemDiv.classList.remove(themeName);
});
}

function addTheme(){
itemDivs.forEach(itemDiv => {
itemDiv.classList.add(themeName);
});
}

Step 3

Add a button with an id to be listened by the event from the script (tutorial)

<button class="btn-toggle" id="theme-switcher"></button>

Step 4

Add your css rules to change your colors based on class name

body {
    background-color: white;
}
body.dark-theme {
    background-color: gray;
}

Method 2 - Cookies

This way, you need to call an action in the controller to make a new request to the server, but you will need to update the DOM with Javascript (Looking back, it sounds terrible to separate the logic between client and server).

HTTP Context

Reading about the request pipeline, we can find HttpContext class, which describes request and response information. In this case, we need to read the user request available through the Request member.

public abstract class HttpContext
{
  public abstract HttpRequest Request { get; }
}

And what do we need to know about the request? 🍪🍪🍪

Cookies

We will use cookies to store our dark theme information in something like ["dark-theme" = true]and it is available through the Cookies request member.

public abstract class HttpRequest
{
  public abstract IRequestCookieCollection Cookies { get; set; }
}

Executing request

As I tried to avoid using javascript except to handle the DOM, we will use an Action from our Controller to check if the user is requesting dark or light theme. Let's go

How it works?

The theme changer will be executed on the Home view of my website. It will trigger another action method from the HomeController and redirect to the Index action of that controller.

Step 1

Add a class to the components that you want to change their theme. This class will be your default theme, so keep it in mind.

// Shared/_Layout.cshtml
<body class="dark-theme">
  @RenderBody()
<script src="~/js/site.js" asp-append-version="true"></script>
</body>
// Views/Home
<div class="home-lower dark-theme">
</div>

Step 2

Add a script to remove the class name based on the cookie name. I use the readCookie method from a Quirksmode post and the script from ChatGPT because is not a technology that I handle.
⚠️ It's important that your template runs javascript on the pages where you will use the method to change the theme, that's why I used the base layout from ASP.NET

// wwwroot/js/site.js
const darkTheme = 'dark-theme'; // Your class name
const itemDivs = document.querySelectorAll('.dark-theme');
// If dark theme is active, remove class names
if(readCookie(darkTheme) === 'true'){
    itemDivs.forEach(itemDiv => {
        itemDiv.classList.remove(darkTheme);
    });
}

function readCookie(name) {
    const nameEQ = name + "=";
    const ca = document.cookie.split(';');
    for(let i=0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0)===' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

Step 3

Add a button to execute an action method called ToggleTheme in your HomeController

<div>
  <a asp-action="ToggleTheme" asp-controller="Home">
</div>

Step 4

Add a method to set a default cookie called as your theming class
(dark-theme == false equals to "keep class name", and yeah, it is bad, do it better)

public class HomeController : Controller
{
  public IActionResult Index()
    {
        var requestCookie = HttpContext.Request.Cookies;
        var response = HttpContext.Response.Cookies;
        if (!requestCookie.ContainsKey("dark-theme"))
        {
            response.Append("dark-theme","false");
        }
        return View("Home");
    }
}

Add a method to change your cookie value based on user request and redirect to index because when you return the view your url will be like /Home/ToggleTheme

public IActionResult ToggleTheme()
{
   var requestCookies = HttpContext.Request.Cookies;
   var responseCookies = HttpContext.Response.Cookies;
   if (requestCookies.ContainsKey("dark-theme") && requestCookies["dark-theme"]!.Contains("false"))
     {
         responseCookies.Append("dark-theme","true");
     }
     else
     {
         responseCookies.Append("dark-theme","false");
     }
     return RedirectToAction("Index");
}

Step 5

Add your css rules to change your colors based on class name

body {
    background-color: white;
}
body.dark-theme {
    background-color: gray;
}

That's all

If you have any corrections I look forward to your comments, I didn't find much information on StackOverflow or Youtube so I made it with what I know. I hope I haven't forgotten anything

Code: https://gitlab.com/vlank/portfolio

Greetings from 🇦🇷