Skip to content
Snippets Groups Projects
Verified Commit afc4d6ba authored by fauno's avatar fauno
Browse files

fix: cambiar <code> por <pre>

parent 8a8e5878
No related branches found
No related tags found
1 merge request!12#15
Showing
with 67 additions and 67 deletions
......@@ -19,35 +19,35 @@ created_at: 2023-02-21 00:00:00.000000000 +00:00
last_modified_at: 2023-10-19 21:12:51.838318119 +00:00
---
<h1 style="text-align:start" id="configurar-el-entorno-de-trabajo-con-haini.sh">Configurar el entorno de trabajo con haini.sh</h1><p style="text-align:start">Usamos <a href="https://git-scm.com/" rel="noopener" target="_blank" referrerpolicy="strict-origin-when-cross-origin">Git</a> para gestionar los cambios y <a href="https://0xacab.org/sutty/haini.sh" rel="noopener" target="_blank" referrerpolicy="strict-origin-when-cross-origin">haini.sh</a> para tener un entorno de desarrollo reproducible.</p><p style="text-align:start">Llamamos "hain" al entorno que haini.sh reproduce.</p><h2 style="text-align:start" id="configurar-0xacab">Configurar 0xacab</h2><p style="text-align:start">Hay que agregar llaves SSH al perfil de 0xacab.org para poder trabajar con repositorios.</p><code>cd # asegurarnos que estamos en home ~
<h1 style="text-align:start" id="configurar-el-entorno-de-trabajo-con-haini.sh">Configurar el entorno de trabajo con haini.sh</h1><p style="text-align:start">Usamos <a href="https://git-scm.com/" rel="noopener" target="_blank" referrerpolicy="strict-origin-when-cross-origin">Git</a> para gestionar los cambios y <a href="https://0xacab.org/sutty/haini.sh" rel="noopener" target="_blank" referrerpolicy="strict-origin-when-cross-origin">haini.sh</a> para tener un entorno de desarrollo reproducible.</p><p style="text-align:start">Llamamos "hain" al entorno que haini.sh reproduce.</p><h2 style="text-align:start" id="configurar-0xacab">Configurar 0xacab</h2><p style="text-align:start">Hay que agregar llaves SSH al perfil de 0xacab.org para poder trabajar con repositorios.</p><pre>cd # asegurarnos que estamos en home ~
ls .ssh/
# si no dice nada o solo dice known_hosts, necesitamos crear una llave
ssh-keygen -t ed25519
cat .ssh/id_ed25519.pub # copiar lo que sale de acá
</code><p style="text-align:start">Ir a <a href="https://0xacab.org/-/profile/keys" rel="noopener" target="_blank" referrerpolicy="strict-origin-when-cross-origin">https://0xacab.org/-/profile/keys</a>, pegar la llave ahí y guardar.</p><h2 style="text-align:start" id="entorno-de-trabajo">Entorno de trabajo</h2><p style="text-align:start">Cosas generales que podemos ir incorporando/preparando:</p><ul>
</pre><p style="text-align:start">Ir a <a href="https://0xacab.org/-/profile/keys" rel="noopener" target="_blank" referrerpolicy="strict-origin-when-cross-origin">https://0xacab.org/-/profile/keys</a>, pegar la llave ahí y guardar.</p><h2 style="text-align:start" id="entorno-de-trabajo">Entorno de trabajo</h2><p style="text-align:start">Cosas generales que podemos ir incorporando/preparando:</p><ul>
<li><p style="text-align:start">Vamos a usar mucha terminal, elijamos una que nos resulte cómoda de leer. Por lo general fondos oscuros cansan menos la vista, muchas distribuciones configuran sus terminales con transparencia, se puede cambiar en sus opciones. También una tipografía con alto que nos resulte cómodo ayuda un montón.</p></li>
<li>
<p style="text-align:start">Prompt: La información que muestra la terminal a la izquierda de donde podemos escribir comandos se llama "prompt". Por defecto suele mostrar el directorio actual. Es importante prestarle atención porque es un indicador de dónde estamos parades.</p>
<p style="text-align:start">En los ejemplos no lo ponemos porque cada prompt puede ser diferente, uno con información mínima y útil podría ser:</p>
<code>echo 'export PS1="\$(git rev-parse --abbrev-ref HEAD) \W &gt;_ "' &gt;&gt; ~/.bashrc
<pre>echo 'export PS1="\$(git rev-parse --abbrev-ref HEAD) \W &gt;_ "' &gt;&gt; ~/.bashrc
source ~/.bashrc
# Cambia el prompt a: rama_de_git nombre_del_directorio &gt;_ a partir de acá podemos escribir
# Por ejemplo:
rails sutty &gt;_ make serve
</code><p style="text-align:start">Tené en cuenta que esta prompt no va a estar en la terminal dentro de hain.</p>
</pre><p style="text-align:start">Tené en cuenta que esta prompt no va a estar en la terminal dentro de hain.</p>
</li>
<li>
<p style="text-align:start">Editor de texto. El que queramos, con resaltado de sintaxis, indentación (sangría!) automática y un esquema de colores que nos resulte cómodo.</p>
<code># La variable de entorno EDITOR contiene nuestro editor por defecto, si la queremos cambiar, agregamos al final de estos archivos, son `&gt;&gt;`, cuidado!! `&gt;` pisa todo el contenido (a quién se le ocurren estas cosas.)
<pre># La variable de entorno EDITOR contiene nuestro editor por defecto, si la queremos cambiar, agregamos al final de estos archivos, son `&gt;&gt;`, cuidado!! `&gt;` pisa todo el contenido (a quién se le ocurren estas cosas.)
echo 'export EDITOR=vim' &gt;&gt; ~/.bashrc # Cambiar vim por lo que corresponda
echo 'export EDITOR=vim' &gt;&gt; ~/.bash_profile
# Hace falta reiniciar la terminal o hacer esto para que tome efecto inmediato
source ~/.bashrc
</code><p style="text-align:start">Tené en cuenta que esta prompt no va a estar en la terminal dentro de hain.</p>
</pre><p style="text-align:start">Tené en cuenta que esta prompt no va a estar en la terminal dentro de hain.</p>
</li>
<li>
<p style="text-align:start">Herramientas: Instalar y configurar git y git-lfs, make y task/go-task.</p>
<code># Crear el archivo ~/Project/Sutty/.gitconfig con la configuración específica para Sutty
<pre># Crear el archivo ~/Project/Sutty/.gitconfig con la configuración específica para Sutty
[user]
name = NOMBRE
email = MAIL@sutty.nl
......@@ -86,31 +86,31 @@ smudge = git-lfs smudge -- %f
[includeIf "gitdir:~/Projects/Sutty"]
path = ~/Project/Sutty/.gitconfig
</code>
</pre>
</li>
<li><p style="text-align:start">Paciencia :P</p></li>
<li><p style="text-align:start">A veces da fiaca pero para practicarlo podemos tomar notas colectivas en pads que nos vayan quedando como documentación para ir emprolijando.</p></li>
<li><p style="text-align:start">Directorio de trabajo. Para no tener los proyectos flotando por todos lados, podemos tener un directorio/carpeta de trabajo para Sutty donde coloquemos todos los proyectos, por ejemplo:</p></li>
</ul><code># Asegurarnos que estamos en nuestro directorio de origen ("home")
</ul><pre># Asegurarnos que estamos en nuestro directorio de origen ("home")
cd ~
# Crear el directorio de trabajo
mkdir -p Projects/Sutty
</code><p style="text-align:start">A partir de este momento, todos los comandos que corramos en esta guía a menos que se indique lo contrario implican que se abrió la terminal y se cambió la posición a este directorio, con:</p><code>cd Projects/Sutty
</code><p style="text-align:start">Puede ser el nombre que queramos pero todo tendría que estar dentro de un directorio para que no lo perdamos y no tengamos que recordar donde estaba cada cosa cuando la queramos ir a buscar.</p><blockquote class="blockquote"><p style="text-align:start">Nota: los próximos comandos son ejemplos y no van a funcionar ya que no tenemos los repositorios clonados todavía.</p></blockquote><p style="text-align:start">Para poder trabajar con comodidad y no estar pensando dónde estamos parades en cada comando (o correrlos donde no corresponda y obtener errores inesperados que nos hagan perder el tiempo buscándolos), la recomendación es trabajar siempre desde el directorio de origen/raíz de cada proyecto. Si vamos a trabajar en sutty, lo primero que hacemos es:</p><code>cd ~/Projects/Sutty/sutty
</code><p style="text-align:start">Y a partir de ese momento no volvemos a usar <code>cd</code> para movernos a otro lado. Si queremos abrir un archivo, en lugar de movernos al directorio y después abrirlo, podemos usar su ubicación relativa a la raíz:</p><code>vim app/controllers/post_controller.rb
</code><p style="text-align:start">Al cerrar el editor estaremos en el mismo directorio.</p><p style="text-align:start">Si queremos movernos rápido, podemos hacer:</p><code>cd app/controllers/
</pre><p style="text-align:start">A partir de este momento, todos los comandos que corramos en esta guía a menos que se indique lo contrario implican que se abrió la terminal y se cambió la posición a este directorio, con:</p><pre>cd Projects/Sutty
</pre><p style="text-align:start">Puede ser el nombre que queramos pero todo tendría que estar dentro de un directorio para que no lo perdamos y no tengamos que recordar donde estaba cada cosa cuando la queramos ir a buscar.</p><blockquote class="blockquote"><p style="text-align:start">Nota: los próximos comandos son ejemplos y no van a funcionar ya que no tenemos los repositorios clonados todavía.</p></blockquote><p style="text-align:start">Para poder trabajar con comodidad y no estar pensando dónde estamos parades en cada comando (o correrlos donde no corresponda y obtener errores inesperados que nos hagan perder el tiempo buscándolos), la recomendación es trabajar siempre desde el directorio de origen/raíz de cada proyecto. Si vamos a trabajar en sutty, lo primero que hacemos es:</p><pre>cd ~/Projects/Sutty/sutty
</pre><p style="text-align:start">Y a partir de ese momento no volvemos a usar <pre>cd</pre> para movernos a otro lado. Si queremos abrir un archivo, en lugar de movernos al directorio y después abrirlo, podemos usar su ubicación relativa a la raíz:</p><pre>vim app/controllers/post_controller.rb
</pre><p style="text-align:start">Al cerrar el editor estaremos en el mismo directorio.</p><p style="text-align:start">Si queremos movernos rápido, podemos hacer:</p><pre>cd app/controllers/
...
cd -
</code><p style="text-align:start">El <code>-</code> en <code>cd</code> indica el directorio anterior, podemos ir y venir entre uno y otro rápidamente así.</p><p style="text-align:start">Usando ubicaciones relativas podemos abrir archivos de otros proyectos también:</p><code>vim ../sutty-base-jekyll-theme/_layouts/default.html
</code><h2 style="text-align:start" id="haini.sh">Haini.sh</h2><p style="text-align:start">Tuvimos muchos problemas instalando dependencias de Sutty en las computadoras de cada desarrolladorx, entonces creamos esta herramienta para simplificarlo.</p><p style="text-align:start">Para bajarla:</p><code># Clonar el repositorio dentro de Sutty
</pre><p style="text-align:start">El <pre>-</pre> en <pre>cd</pre> indica el directorio anterior, podemos ir y venir entre uno y otro rápidamente así.</p><p style="text-align:start">Usando ubicaciones relativas podemos abrir archivos de otros proyectos también:</p><pre>vim ../sutty-base-jekyll-theme/_layouts/default.html
</pre><h2 style="text-align:start" id="haini.sh">Haini.sh</h2><p style="text-align:start">Tuvimos muchos problemas instalando dependencias de Sutty en las computadoras de cada desarrolladorx, entonces creamos esta herramienta para simplificarlo.</p><p style="text-align:start">Para bajarla:</p><pre># Clonar el repositorio dentro de Sutty
cd ~/Projects/Sutty
# Es importante que sea ahí! Los otros repositorios asumen que está en `../haini.sh`
git clone git@0xacab.org:sutty/haini.sh.git
</code><p style="text-align:start">Los distintos repositorios van a usar haini.sh automáticamente, y la primera vez que lo uses se va a generar el entorno automáticamente.</p><h3 style="text-align:start" id="importar-certificados">Importar certificados</h3><p style="text-align:start">Por más que haini.sh importa los certificados que genera al sistema ya sea dentro y afuera de haini.sh, Firefox y Chrome no toman los certificados del sistema y usan su propia lista. Hay que importarlos manualmente, así es en Firefox:</p><ol>
</pre><p style="text-align:start">Los distintos repositorios van a usar haini.sh automáticamente, y la primera vez que lo uses se va a generar el entorno automáticamente.</p><h3 style="text-align:start" id="importar-certificados">Importar certificados</h3><p style="text-align:start">Por más que haini.sh importa los certificados que genera al sistema ya sea dentro y afuera de haini.sh, Firefox y Chrome no toman los certificados del sistema y usan su propia lista. Hay que importarlos manualmente, así es en Firefox:</p><ol>
<li><p style="text-align:start">Ir a <a rel="noopener" target="_blank" referrerpolicy="strict-origin-when-cross-origin">about:preferences#privacy</a> y apretar en "Ver certificados..."</p></li>
<li><p style="text-align:start">Ir a la pestaña de "Autoridades" y apretar en "Importar..."</p></li>
<li><p style="text-align:start">Seleccionar el certificado en <code>Sutty/hain/usr/local/share/ca-certificates/ca-sutty.crt</code></p></li>
</ol><h2 style="text-align:start" id="sutty">Sutty</h2><p style="text-align:start">Estas instrucciones son específicas para el desarrollo del <em>panel</em> Sutty y no para otros componentes.</p><h3 style="text-align:start" id="base-de-datos">Base de datos</h3><p style="text-align:start">Al principio usábamos bases de datos SQLite3, pero ahora necesitamos características específicas de PosgreSQL (como el buscador). El servidor de PG corre dentro de Hain, con lo que no tenemos que hacer nada más.</p><h3 style="text-align:start" id="configuracion-inicial">Configuración inicial</h3><p style="text-align:start">Solo hay que hacerla una vez!</p><code>cd ~/Projects/Sutty
<li><p style="text-align:start">Seleccionar el certificado en <pre>Sutty/hain/usr/local/share/ca-certificates/ca-sutty.crt</pre></p></li>
</ol><h2 style="text-align:start" id="sutty">Sutty</h2><p style="text-align:start">Estas instrucciones son específicas para el desarrollo del <em>panel</em> Sutty y no para otros componentes.</p><h3 style="text-align:start" id="base-de-datos">Base de datos</h3><p style="text-align:start">Al principio usábamos bases de datos SQLite3, pero ahora necesitamos características específicas de PosgreSQL (como el buscador). El servidor de PG corre dentro de Hain, con lo que no tenemos que hacer nada más.</p><h3 style="text-align:start" id="configuracion-inicial">Configuración inicial</h3><p style="text-align:start">Solo hay que hacerla una vez!</p><pre>cd ~/Projects/Sutty
# Clonar el repositorio de git de Sutty
git clone git@0xacab.org:sutty/sutty.git
......@@ -152,6 +152,6 @@ make rake args="db:migrate"
# Llenar la base de datos con una semilla. Concretamente, esto crea pseudo-sitios necesarios para el funcionamiento correcto del panel.
make rake args="db:seed"
</code><h3 style="text-align:start" id="iniciar-el-entorno-de-trabajo">Iniciar el entorno de trabajo</h3><p style="text-align:start">Para poder desarrollar Sutty y hacer pruebas en vivo, iniciamos el servidor de desarrollo:</p><code>make serve
</pre><h3 style="text-align:start" id="iniciar-el-entorno-de-trabajo">Iniciar el entorno de trabajo</h3><p style="text-align:start">Para poder desarrollar Sutty y hacer pruebas en vivo, iniciamos el servidor de desarrollo:</p><pre>make serve
# Se puede cerrar con control+C, también conocido como ^C
</code><p style="text-align:start">A partir de ahí podemos abrirlo en el navegador de trabajo con la dirección <a href="https://panel.sutty.local:3000/" rel="noopener" target="_blank" referrerpolicy="strict-origin-when-cross-origin">https://panel.sutty.local:3000/</a></p><p style="text-align:start">Cuando hagamos cambios en los archivos, Rails los detecta y recarga la información. Con esto podemos desarrollar haciendo pruebas en vivo.</p><h2 style="text-align:start" id="tienda">Tienda</h2><p style="text-align:start">TODO: escribir comandos, cambiar si cambia <a href="https://0xacab.org/sutty/haini.sh/-/issues/23" rel="noopener" target="_blank" referrerpolicy="strict-origin-when-cross-origin">haini.sh#23</a></p><p style="text-align:start">Es necesario crear una base de datos <code>tienda</code> con usuarix <code>tienda</code> sin contraseña, antes del paso <code>bundle exec rake db:setup</code>.</p>
\ No newline at end of file
</pre><p style="text-align:start">A partir de ahí podemos abrirlo en el navegador de trabajo con la dirección <a href="https://panel.sutty.local:3000/" rel="noopener" target="_blank" referrerpolicy="strict-origin-when-cross-origin">https://panel.sutty.local:3000/</a></p><p style="text-align:start">Cuando hagamos cambios en los archivos, Rails los detecta y recarga la información. Con esto podemos desarrollar haciendo pruebas en vivo.</p><h2 style="text-align:start" id="tienda">Tienda</h2><p style="text-align:start">TODO: escribir comandos, cambiar si cambia <a href="https://0xacab.org/sutty/haini.sh/-/issues/23" rel="noopener" target="_blank" referrerpolicy="strict-origin-when-cross-origin">haini.sh#23</a></p><p style="text-align:start">Es necesario crear una base de datos <pre>tienda</pre> con usuarix <pre>tienda</pre> sin contraseña, antes del paso <pre>bundle exec rake db:setup</pre>.</p>
\ No newline at end of file
......@@ -18,15 +18,15 @@ created_at: 2023-03-06 00:00:00.000000000 +00:00
last_modified_at: 2024-01-04 16:15:09.927175994 +00:00
---
<h1 style="text-align:start" id="clonar-sitio-nuevo-de-sutty">Clonar sitio nuevo de Sutty</h1><p style="text-align:start">En sutty tenemos un directorio dedicado a los respositorios donde esta hain.sh : <code>cd ~/proyectos/sutty/</code></p><p style="text-align:start"># crear un sitio desde sutty-base</p><p style="text-align:start">## local y pushear a 0xacab </p><ol>
<h1 style="text-align:start" id="clonar-sitio-nuevo-de-sutty">Clonar sitio nuevo de Sutty</h1><p style="text-align:start">En sutty tenemos un directorio dedicado a los respositorios donde esta hain.sh : <pre>cd ~/proyectos/sutty/</pre></p><p style="text-align:start"># crear un sitio desde sutty-base</p><p style="text-align:start">## local y pushear a 0xacab </p><ol>
<li><p style="text-align:start"> `git clone git@0xacab.org:sutty/jekyll/$nombredesitio-jekyll-theme.git` $nombredesitio-jekyll-theme</p></li>
<li><p style="text-align:start"> `git lfs fetch pull checkout`</p></li>
</ol><p style="text-align:start"> 3. `git remote set-url origin NEW_URL`</p><p style="text-align:start"> 4. `git remote add upstream git@0xacab.org:sutty/jekyll/sutty-base-jekyll-theme.git</p><p style="text-align:start">5. `git lfs fetch upstream --all`</p><p style="text-align:start">6. `git lfs push origin master -all`</p><p style="text-align:start">7. `git push origin master`</p><p style="text-align:start">`</p><p style="text-align:start">## 0xacab dar acceso a escritura y llaves</p><p style="text-align:start"></p><h1 style="text-align:start" id="sutty-base-2.0">sutty-base 2.0</h1><p style="text-align:start">En la version 2.0 de sutty base usamos 2 herramientas nuevas. `task` o `go-task` para instalar y gestionar las flags de compilación, instalación de gemas. con `go-task --list` muestra las tareas disponibles a ejecutar.</p><p style="text-align:start">Dentro del repositorio:</p><p style="text-align:start">1. <code>task bundle</code> para instalar dependencias de jekyll</p><p style="text-align:start">2. <code>task pnpm</code> para instalar dependencias de esbuild (js)</p><p style="text-align:start">3. <code>task build</code> para construir el sitio y publicarlo en <code>https://$sitio.sutty.local:4000</code></p><p style="text-align:start"></p><h1 style="text-align:start" id="sutty-base-1.0">sutty-base 1.0</h1><h2 style="text-align:start" id="instalamos-dependencias-con">instalamos dependencias con <code>make $flag</code>
</ol><p style="text-align:start"> 3. `git remote set-url origin NEW_URL`</p><p style="text-align:start"> 4. `git remote add upstream git@0xacab.org:sutty/jekyll/sutty-base-jekyll-theme.git</p><p style="text-align:start">5. `git lfs fetch upstream --all`</p><p style="text-align:start">6. `git lfs push origin master -all`</p><p style="text-align:start">7. `git push origin master`</p><p style="text-align:start">`</p><p style="text-align:start">## 0xacab dar acceso a escritura y llaves</p><p style="text-align:start"></p><h1 style="text-align:start" id="sutty-base-2.0">sutty-base 2.0</h1><p style="text-align:start">En la version 2.0 de sutty base usamos 2 herramientas nuevas. `task` o `go-task` para instalar y gestionar las flags de compilación, instalación de gemas. con `go-task --list` muestra las tareas disponibles a ejecutar.</p><p style="text-align:start">Dentro del repositorio:</p><p style="text-align:start">1. <pre>task bundle</pre> para instalar dependencias de jekyll</p><p style="text-align:start">2. <pre>task pnpm</pre> para instalar dependencias de esbuild (js)</p><p style="text-align:start">3. <pre>task build</pre> para construir el sitio y publicarlo en <pre>https://$sitio.sutty.local:4000</pre></p><p style="text-align:start"></p><h1 style="text-align:start" id="sutty-base-1.0">sutty-base 1.0</h1><h2 style="text-align:start" id="instalamos-dependencias-con">instalamos dependencias con <pre>make $flag</pre>
</h2><ol start="2">
<li><p style="text-align:start">make bundle (instalar gemas)</p></li>
<li><p style="text-align:start">make yarn (instalar node y bootstrap)</p></li>
</ol><h2 style="text-align:start" id="construimos-el-sitio-y-lo-servimos">construimos el sitio y lo servimos</h2><ol start="4">
<li><p style="text-align:start">make build (construir el sitio)</p></li>
<li><p style="text-align:start">make serve servir el sitio en <code>$sitio.sutty.local:4000</code></p></li>
<li><p style="text-align:start">make serve servir el sitio en <pre>$sitio.sutty.local:4000</pre></p></li>
<li><p style="text-align:start">make webpack-dev-server (correr webpack para ejecutar el servidor de javascript local)</p></li>
</ol>
\ No newline at end of file
......@@ -16,6 +16,6 @@ usuaries:
last_modified_at: 2023-04-22 14:24:34.413140294 +00:00
---
<h2 style="text-align:start" id="borrar-gemas-de-sitios">Borrar gemas de sitios</h2><p style="text-align:start">estas se regeneran cuando se intentan usar los sitios, así que se pueden borrar si se necesita espacio temporalmente.</p><code>cd /srv/sutty/srv/http/data/_storage
<h2 style="text-align:start" id="borrar-gemas-de-sitios">Borrar gemas de sitios</h2><p style="text-align:start">estas se regeneran cuando se intentan usar los sitios, así que se pueden borrar si se necesita espacio temporalmente.</p><pre>cd /srv/sutty/srv/http/data/_storage
# acá, la carpeta `gems` tiene las gemas de los sitios
rm -r gems</code><p style="text-align:start">en el futuro estas se van a limpiar automáticamente mensualmente.</p><h2 style="text-align:start" id="sacar-logs-de-sitios">Sacar logs de sitios</h2><p style="text-align:start">los logs de los sitios a veces pesan bastante. son <code>/srv/sutty/srv/http/data/_storage/*.psql.gz</code>. para ver el espacio que ocupan, podés usar <code>du -hc /srv/sutty/srv/http/data/_storage/*.psql.gz</code>.</p>
\ No newline at end of file
rm -r gems</pre><p style="text-align:start">en el futuro estas se van a limpiar automáticamente mensualmente.</p><h2 style="text-align:start" id="sacar-logs-de-sitios">Sacar logs de sitios</h2><p style="text-align:start">los logs de los sitios a veces pesan bastante. son <pre>/srv/sutty/srv/http/data/_storage/*.psql.gz</pre>. para ver el espacio que ocupan, podés usar <pre>du -hc /srv/sutty/srv/http/data/_storage/*.psql.gz</pre>.</p>
\ No newline at end of file
......@@ -21,4 +21,4 @@ created_at: 2023-09-19 16:00:42.152749042 +00:00
last_modified_at: 2023-09-20 19:25:29.609090608 +00:00
---
<p style="text-align:start">Con el uso componentes, en lugar de usar <code>include</code> podemos usar <code>include_cached</code>. Lo que hace es que si no cambian los valores de los parámetros del componente, use la primera versión que generó. Si tenemos un montón de componentes reutilizados, ahorramos tiempo de compilación de sitios.</p><p style="text-align:start">En lugar de:</p><p style="text-align:start"><code>{% include plantilla.html %}</code></p><p style="text-align:start">esto propone hacer:</p><p style="text-align:start"><code>{% include_cached plantilla.html %}</code></p>
\ No newline at end of file
<p style="text-align:start">Con el uso componentes, en lugar de usar <pre>include</pre> podemos usar <pre>include_cached</pre>. Lo que hace es que si no cambian los valores de los parámetros del componente, use la primera versión que generó. Si tenemos un montón de componentes reutilizados, ahorramos tiempo de compilación de sitios.</p><p style="text-align:start">En lugar de:</p><p style="text-align:start"><pre>{% include plantilla.html %}</pre></p><p style="text-align:start">esto propone hacer:</p><p style="text-align:start"><pre>{% include_cached plantilla.html %}</pre></p>
\ No newline at end of file
......@@ -22,4 +22,4 @@ created_at: 2023-09-19 18:33:02.308831807 +00:00
last_modified_at: 2023-09-21 17:29:55.428325758 +00:00
---
<p style="text-align:start">Si usaron el panel en <code>testing</code> cuando debería haber estado en <code>content</code>, se pueden traer todos los commits hechos por el panel asi:</p><p style="text-align:start"><code>git log --oneline --no-merges im-defensoras.testing.sutty.nl ^content -- _en _es public | cut -d " " -f 1 | tac | xargs -P 1 git cherry-pick</code></p><p style="text-align:start">Si salen conflictos hay que resolverlos con <code>git mergetool</code> y luego continuar con <code>git cherry-pick --continue</code>. si dice que el cherry-pick está vacío, se lo puede saltear con <code>git cherry-pick --skip</code></p><p style="text-align:start">Lo que hace el script es buscar todos los commits que apliquen a idiomas y public entre testing y content, invertir el orden y cherry-pickearlos todos juntos.</p>
\ No newline at end of file
<p style="text-align:start">Si usaron el panel en <pre>testing</pre> cuando debería haber estado en <pre>content</pre>, se pueden traer todos los commits hechos por el panel asi:</p><p style="text-align:start"><pre>git log --oneline --no-merges im-defensoras.testing.sutty.nl ^content -- _en _es public | cut -d " " -f 1 | tac | xargs -P 1 git cherry-pick</pre></p><p style="text-align:start">Si salen conflictos hay que resolverlos con <pre>git mergetool</pre> y luego continuar con <pre>git cherry-pick --continue</pre>. si dice que el cherry-pick está vacío, se lo puede saltear con <pre>git cherry-pick --skip</pre></p><p style="text-align:start">Lo que hace el script es buscar todos los commits que apliquen a idiomas y public entre testing y content, invertir el orden y cherry-pickearlos todos juntos.</p>
\ No newline at end of file
......@@ -21,4 +21,4 @@ created_at: 2023-09-20 16:10:34.673078750 +00:00
last_modified_at: 2023-09-20 16:10:34.680861460 +00:00
---
<p style="text-align:start">Venimos usando <a href="http://conventionalcommits.org" rel="noopener" target="_blank" referrerpolicy="strict-origin-when-cross-origin">conventionalcommits.org</a> para indicar si es un arreglo o una feature y el número de issue para que queden vinculados commits a issues.</p><p style="text-align:start">Un mensaje de commit sería así:</p><p style="text-align:start"><code>fix: arreglada tal cosa #XX</code> donde XX es el número de issue</p><p style="text-align:start"><code>feat: componente botón #XX</code> para algo nuevo</p>
\ No newline at end of file
<p style="text-align:start">Venimos usando <a href="http://conventionalcommits.org" rel="noopener" target="_blank" referrerpolicy="strict-origin-when-cross-origin">conventionalcommits.org</a> para indicar si es un arreglo o una feature y el número de issue para que queden vinculados commits a issues.</p><p style="text-align:start">Un mensaje de commit sería así:</p><p style="text-align:start"><pre>fix: arreglada tal cosa #XX</pre> donde XX es el número de issue</p><p style="text-align:start"><pre>feat: componente botón #XX</pre> para algo nuevo</p>
\ No newline at end of file
......@@ -22,4 +22,4 @@ created_at: 2023-09-20 14:30:50.405327477 +00:00
last_modified_at: 2023-09-20 14:35:18.527006948 +00:00
---
<h1 style="text-align:start" id="agregar-o-modificar-registros-dns">Agregar o modificar registros dns</h1><p style="text-align:start">En el dns del dominio, si no lo gestionamos nosotres, hay que agregar o pedir que agreguen:</p><p style="text-align:start"><code>@ ANAME 60 sutty.nl. www ANAME 60 sutty.nl.</code></p><p style="text-align:start">Se lee en este orden <code>registro tipo duración valor </code>y quiere decir que el dominio principal y www comparten las mismas direcciones ip que sutty. Si nosotres hacemos cambios en nuestra infra, el dominio se actualiza solo.</p><h1 style="text-align:start" id="crear-dominios-alternativos-para-el-sitio">Crear dominios alternativos para el sitio</h1><p style="text-align:start">En la consola de rails del panel:</p><p style="text-align:start"><code># encontrar el sitio site = Site.find_by_name 'fecunda-doulas' # configurarle los dominios site.deploys.create type: 'DeployAlternativeDomain', hostname: 'fecunda-doulas.com.' site.deploys.create type: 'DeployAlternativeDomain', hostname: 'www.fecunda-doulas.com.'</code></p><p style="text-align:start"><strong>El punto al final de cada dominio es importante, porque sino el panel va a creer que el sitio es fecunda-doulas.com.sutty.nl</strong></p><p style="text-align:start">Luego hay que publicar los cambios, pero primero hay que asegurarse que todo este mergeado en la rama principal y de ahi a <code>content</code></p><p style="text-align:start">Al crear los dominios en la consola del panel y en el dns, automáticamente se generan los certificados.</p>
\ No newline at end of file
<h1 style="text-align:start" id="agregar-o-modificar-registros-dns">Agregar o modificar registros dns</h1><p style="text-align:start">En el dns del dominio, si no lo gestionamos nosotres, hay que agregar o pedir que agreguen:</p><p style="text-align:start"><pre>@ ANAME 60 sutty.nl. www ANAME 60 sutty.nl.</pre></p><p style="text-align:start">Se lee en este orden <pre>registro tipo duración valor </pre>y quiere decir que el dominio principal y www comparten las mismas direcciones ip que sutty. Si nosotres hacemos cambios en nuestra infra, el dominio se actualiza solo.</p><h1 style="text-align:start" id="crear-dominios-alternativos-para-el-sitio">Crear dominios alternativos para el sitio</h1><p style="text-align:start">En la consola de rails del panel:</p><p style="text-align:start"><pre># encontrar el sitio site = Site.find_by_name 'fecunda-doulas' # configurarle los dominios site.deploys.create type: 'DeployAlternativeDomain', hostname: 'fecunda-doulas.com.' site.deploys.create type: 'DeployAlternativeDomain', hostname: 'www.fecunda-doulas.com.'</pre></p><p style="text-align:start"><strong>El punto al final de cada dominio es importante, porque sino el panel va a creer que el sitio es fecunda-doulas.com.sutty.nl</strong></p><p style="text-align:start">Luego hay que publicar los cambios, pero primero hay que asegurarse que todo este mergeado en la rama principal y de ahi a <pre>content</pre></p><p style="text-align:start">Al crear los dominios en la consola del panel y en el dns, automáticamente se generan los certificados.</p>
\ No newline at end of file
......@@ -27,29 +27,29 @@ last_modified_at: 2023-09-20 19:32:27.637633085 +00:00
<li><p style="text-align:start">Separar el diseño en componentes mínimos, a veces los componentes están compuestos de otros componentes, separar todo lo más que podamos (aunque se usen una sola vez). Por regla general cualquier cosa que no es parte de la grilla/wireframe es un componente</p></li>
<li><p style="text-align:start">Abrir un issue por cada componente con recorte de pantalla, funcionamiento, etc</p></li>
</ul><h2 style="text-align:start" id="maquetado">maquetado</h2><h3 style="text-align:start" id="componentes">componentes</h3><ul>
<li><p style="text-align:start">Los componentes van dentro de <code>_includes/</code></p></li>
<li><p style="text-align:start">Si un componente tiene variantes, hacer un directorio <code>_includes/component/</code> y dentro poner todas las variantes</p></li>
<li><p style="text-align:start">Empezar el archivo con un bloque de <code>{% comment %}</code> con la descripción y la documentación de los parámetros en este formato: <code>@param :NOMBRE [TIPO] DESCRIPCION</code> donde NOMBRE es el nombre del parámetro que se usa al llamarlo <code>{% include componente.html NOMBRE=VALOR %}</code>, TIPO es el tipo de VALOR (<code>String</code>, <code>Integer</code>, <code>Array</code>, <code>Hash</code>, <code>HTML</code>, <code>Boolean</code> --por lo general va a ser <code>String</code> o <code>HTML</code>) y DESCRIPCION una ayuda (esto sigue el formato de <a href="https://yardoc.org/" rel="noopener" target="_blank" referrerpolicy="strict-origin-when-cross-origin">https://yardoc.org/</a>)</p></li>
<li><p style="text-align:start">Los componentes van dentro de <pre>_includes/</pre></p></li>
<li><p style="text-align:start">Si un componente tiene variantes, hacer un directorio <pre>_includes/component/</pre> y dentro poner todas las variantes</p></li>
<li><p style="text-align:start">Empezar el archivo con un bloque de <pre>{% comment %}</pre> con la descripción y la documentación de los parámetros en este formato: <pre>@param :NOMBRE [TIPO] DESCRIPCION</pre> donde NOMBRE es el nombre del parámetro que se usa al llamarlo <pre>{% include componente.html NOMBRE=VALOR %}</pre>, TIPO es el tipo de VALOR (<pre>String</pre>, <pre>Integer</pre>, <pre>Array</pre>, <pre>Hash</pre>, <pre>HTML</pre>, <pre>Boolean</pre> --por lo general va a ser <pre>String</pre> o <pre>HTML</pre>) y DESCRIPCION una ayuda (esto sigue el formato de <a href="https://yardoc.org/" rel="noopener" target="_blank" referrerpolicy="strict-origin-when-cross-origin">https://yardoc.org/</a>)</p></li>
<li><p style="text-align:start">Luego viene el componente en sí</p></li>
<li>
<p style="text-align:start">Formato de nombres para parámetros</p>
<ul>
<li><p style="text-align:start">Nombre del atributo al que aplican, por ejemplo <code>href</code> para indicar que va a ir al <code>href</code> de un</p></li>
<li><p style="text-align:start">Nombre del elemento + atributo, si acepta varios atributos del mismo nombre, por ejemplo <code>a_class</code> y <code>img_class</code> son clases para un y un dentro del mismo componente</p></li>
<li><p style="text-align:start">Nombre del atributo al que aplican, por ejemplo <pre>href</pre> para indicar que va a ir al <pre>href</pre> de un</p></li>
<li><p style="text-align:start">Nombre del elemento + atributo, si acepta varios atributos del mismo nombre, por ejemplo <pre>a_class</pre> y <pre>img_class</pre> son clases para un y un dentro del mismo componente</p></li>
</ul>
</li>
<li><p style="text-align:start">Los componentes solo usan valores que se pasan como parámetros, no usan <code>{{ page }}</code> ni <code>{{ content }}</code></p></li>
<li><p style="text-align:start">Se puede pasar HTML como parámetro usando un <code>{% capture %}</code></p></li>
<li><p style="text-align:start">Los componentes solo usan valores que se pasan como parámetros, no usan <pre>{{ page }}</pre> ni <pre>{{ content }}</pre></p></li>
<li><p style="text-align:start">Se puede pasar HTML como parámetro usando un <pre>{% capture %}</pre></p></li>
</ul><h3 style="text-align:start" id="scss">SCSS</h3><ul>
<li><p style="text-align:start">Las variables se definen en <code>_data/theme.yml</code>, acepta strings, booleans, números, hashes y arrays (no anidadas)</p></li>
<li><p style="text-align:start">Las variables se definen en <pre>_data/theme.yml</pre>, acepta strings, booleans, números, hashes y arrays (no anidadas)</p></li>
<li><p style="text-align:start">Pueden ser variables de bootstrap o variables que nos inventemos</p></li>
<li><p style="text-align:start">Las variables se importan en <code>assets/css/styles.scss</code> no tenemos que hacer nada</p></li>
<li><p style="text-align:start">La convención es snake case <code>nombre_de_variable</code> en yaml y luego en scss se llaman con kebab case <code>nombre-de-variable</code> esto es para que puedan ser llamadas en liquid</p></li>
<li><p style="text-align:start">Las variables se importan en <pre>assets/css/styles.scss</pre> no tenemos que hacer nada</p></li>
<li><p style="text-align:start">La convención es snake case <pre>nombre_de_variable</pre> en yaml y luego en scss se llaman con kebab case <pre>nombre-de-variable</pre> esto es para que puedan ser llamadas en liquid</p></li>
</ul><h2 style="text-align:start" id="testing">testing</h2><ul>
<li><p style="text-align:start">Para poder testear cada componente por separado, se crea un archivo del mismo nombre en <code>_includes/theme/COMPONENTE.html</code></p></li>
<li><p style="text-align:start">Para poder testear cada componente por separado, se crea un archivo del mismo nombre en <pre>_includes/theme/COMPONENTE.html</pre></p></li>
<li><p style="text-align:start">En este archivo se cargan ejemplos de uso del componente con distintos valores hardcodeados, no es necesario traerlos de un post (que quizás no exista, es decir que no hay dependencia entre carga de contenido y componentes)</p></li>
<li><p style="text-align:start">Este archivo también puede contener texto para documentar</p></li>
<li><p style="text-align:start">Si estamos demostrando el uso de una utilidad definida en <code>_sass/helpers.scss</code>, podemos llamar a las variables de SCSS con <code>{{ site.data.theme.VARIABLE }}</code></p></li>
<li><p style="text-align:start">Para poder importar esta prueba de componente hay que agregar el nombre del archivo sin .html en <code>_data/components.yml</code>. si el componente tiene que ocupar todo el ancho de la pantalla (como un menú o footer), puede ir en <code>_data/full_width_components.yml</code></p></li>
<li><p style="text-align:start">Todos los componentes van a estar disponibles en <code>https://SITIO.testing.sutty.nl/theme/#componente</code></p></li>
<li><p style="text-align:start">Si estamos demostrando el uso de una utilidad definida en <pre>_sass/helpers.scss</pre>, podemos llamar a las variables de SCSS con <pre>{{ site.data.theme.VARIABLE }}</pre></p></li>
<li><p style="text-align:start">Para poder importar esta prueba de componente hay que agregar el nombre del archivo sin .html en <pre>_data/components.yml</pre>. si el componente tiene que ocupar todo el ancho de la pantalla (como un menú o footer), puede ir en <pre>_data/full_width_components.yml</pre></p></li>
<li><p style="text-align:start">Todos los componentes van a estar disponibles en <pre>https://SITIO.testing.sutty.nl/theme/#componente</pre></p></li>
</ul>
\ No newline at end of file
......@@ -23,4 +23,4 @@ created_at: 2023-09-20 16:17:14.844007591 +00:00
last_modified_at: 2023-09-21 15:36:17.192892702 +00:00
---
<p style="text-align:start">Empecemos a usar <code>lg</code> en lugar de <code>md</code> para distinguir desktop de celular, la tabla sería:</p><p style="text-align:start">| modificador | dispositivo |</p><p style="text-align:start">| (sin modificador) | celular |</p><p style="text-align:start">| md | tablet |</p><p style="text-align:start">| lg | desktop |</p><p style="text-align:start">| xl | tv/mac |</p>
\ No newline at end of file
<p style="text-align:start">Empecemos a usar <pre>lg</pre> en lugar de <pre>md</pre> para distinguir desktop de celular, la tabla sería:</p><p style="text-align:start">| modificador | dispositivo |</p><p style="text-align:start">| (sin modificador) | celular |</p><p style="text-align:start">| md | tablet |</p><p style="text-align:start">| lg | desktop |</p><p style="text-align:start">| xl | tv/mac |</p>
\ No newline at end of file
......@@ -22,6 +22,6 @@ created_at: 2023-09-20 14:40:38.568511947 +00:00
last_modified_at: 2023-09-20 14:40:38.576074067 +00:00
---
<p style="text-align:start">Primero hay que configurar <code>git</code> (una sola vez):</p><code>git config --global merge.tool vimdiff
<p style="text-align:start">Primero hay que configurar <pre>git</pre> (una sola vez):</p><pre>git config --global merge.tool vimdiff
git config --global mergetool.keepBackup false
</code><p style="text-align:start">Cuando tenemos conflictos con <code>git mergetool</code> se abre un <code>vimdiff</code> donde se pueden buscar los conflictos con este comando <code>/\v^[&lt;&gt;=]{7}</code></p>
\ No newline at end of file
</pre><p style="text-align:start">Cuando tenemos conflictos con <pre>git mergetool</pre> se abre un <pre>vimdiff</pre> donde se pueden buscar los conflictos con este comando <pre>/\v^[&lt;&gt;=]{7}</pre></p>
\ No newline at end of file
......@@ -21,7 +21,7 @@ created_at: 2023-09-20 16:24:09.739322240 +00:00
last_modified_at: 2023-09-21 15:33:44.194628033 +00:00
---
<p style="text-align:start">Cuando escribimos yaml a mano es una buena práctica poner doble comillas si es una <code>string</code>, que previene dos cosas:</p><ul>
<p style="text-align:start">Cuando escribimos yaml a mano es una buena práctica poner doble comillas si es una <pre>string</pre>, que previene dos cosas:</p><ul>
<li><p style="text-align:start">el intérprete no tiene que adivinar si el valor es un texto u otro valor (la comilla indica que siempre es texto)</p></li>
<li><p style="text-align:start">errores de sintaxis difíciles de debuguear por usar caracteres especiales dentro de una string, especialmente los <code>:</code> donde yaml cree que estás empezando otro valor</p></li>
</ul><p style="text-align:start">Además queda más consistente que usar comillas simples porque si estás escribiendo una string con comillas simples (por ejemplo usando contracciones en inglés) queda más prolijo usar el mismo tipo de comillas para todo:</p><p style="text-align:start"></p><p style="text-align:start"><code>hola: esto es un error de sintaxis por los dos puntos:</code></p><p style="text-align:start"><code>chau: 'se puede escribir con comillas simples'</code></p><p style="text-align:start"><code>ingles: "pero después hay que pasar a dobles si escribís cosas como don't"</code></p><p style="text-align:start"><code>escapar: "ademas se pueden usar caracteres de escape como \" y \n"</code></p><p style="text-align:start"></p>
\ No newline at end of file
<li><p style="text-align:start">errores de sintaxis difíciles de debuguear por usar caracteres especiales dentro de una string, especialmente los <pre>:</pre> donde yaml cree que estás empezando otro valor</p></li>
</ul><p style="text-align:start">Además queda más consistente que usar comillas simples porque si estás escribiendo una string con comillas simples (por ejemplo usando contracciones en inglés) queda más prolijo usar el mismo tipo de comillas para todo:</p><p style="text-align:start"></p><p style="text-align:start"><pre>hola: esto es un error de sintaxis por los dos puntos:</pre></p><p style="text-align:start"><pre>chau: 'se puede escribir con comillas simples'</pre></p><p style="text-align:start"><pre>ingles: "pero después hay que pasar a dobles si escribís cosas como don't"</pre></p><p style="text-align:start"><pre>escapar: "ademas se pueden usar caracteres de escape como \" y \n"</pre></p><p style="text-align:start"></p>
\ No newline at end of file
......@@ -22,9 +22,9 @@ last_modified_at: 2023-09-20 15:16:38.674361401 +00:00
---
<p style="text-align:start"></p><ul>
<li><p style="text-align:start">al clonar un proyecto, empezar una rama <code>theme</code></p></li>
<li><p style="text-align:start">en esta rama siempre van los cambios realizados a <code>_data/theme.yml</code>, <code>assets/css/styles.scss</code> y <code>_sass/</code>. o sea, todo lo que sea estilos (la idea es no generar conflictos)</p></li>
<li><p style="text-align:start">al analizar el diseño, se dan de alta colores (<code>$colors</code>), relaciones de aspecto (<code>embed_responsive_aspect_ratios</code>), tamaños de margen/espaciado (<code>$spacers</code>), todo lo que salga del diseño y sea reutilizable</p></li>
<li><p style="text-align:start">si al trabajar con un componente necesitamos redefinir una variable que venga de bootstrap (<code>node_modules/bootstrap/scss/_variables.scss</code>) se trae a este archivo reemplazando guion medio con bajo (o sea pasar de kebab-case a snake_case)</p></li>
<li><p style="text-align:start">en cada rama de issue mergearse <code>theme</code> (alternativa: hacer el cambio en la rama del issue y hacer cherry pick en la rama de <code>theme</code> para que todes tengamos el mismo cambio)</p></li>
</ul><p style="text-align:start">Bootstrap automáticamente levanta estas variables</p><p style="text-align:start">Hay otras variables que no se cambian acá sino que se cambian en <code>_data/layouts/theme.yml</code> (tipografía, color principal, color secundario, etc) creando un post desde el panel. Estas son las variables que son personalizables por les usuaries.</p>
\ No newline at end of file
<li><p style="text-align:start">al clonar un proyecto, empezar una rama <pre>theme</pre></p></li>
<li><p style="text-align:start">en esta rama siempre van los cambios realizados a <pre>_data/theme.yml</pre>, <pre>assets/css/styles.scss</pre> y <pre>_sass/</pre>. o sea, todo lo que sea estilos (la idea es no generar conflictos)</p></li>
<li><p style="text-align:start">al analizar el diseño, se dan de alta colores (<pre>$colors</pre>), relaciones de aspecto (<pre>embed_responsive_aspect_ratios</pre>), tamaños de margen/espaciado (<pre>$spacers</pre>), todo lo que salga del diseño y sea reutilizable</p></li>
<li><p style="text-align:start">si al trabajar con un componente necesitamos redefinir una variable que venga de bootstrap (<pre>node_modules/bootstrap/scss/_variables.scss</pre>) se trae a este archivo reemplazando guion medio con bajo (o sea pasar de kebab-case a snake_case)</p></li>
<li><p style="text-align:start">en cada rama de issue mergearse <pre>theme</pre> (alternativa: hacer el cambio en la rama del issue y hacer cherry pick en la rama de <pre>theme</pre> para que todes tengamos el mismo cambio)</p></li>
</ul><p style="text-align:start">Bootstrap automáticamente levanta estas variables</p><p style="text-align:start">Hay otras variables que no se cambian acá sino que se cambian en <pre>_data/layouts/theme.yml</pre> (tipografía, color principal, color secundario, etc) creando un post desde el panel. Estas son las variables que son personalizables por les usuaries.</p>
\ No newline at end of file
......@@ -22,6 +22,6 @@ created_at: 2023-09-28 20:22:32.736568728 +00:00
last_modified_at: 2023-09-28 20:22:32.746091393 +00:00
---
<code>También se puede incluir stretched_link.html, que se puede sacar de sutty-base (https://0xacab.org/sutty/jekyll/sutty-base-jekyll-theme/-/blob/master/_includes/stretched_link.html).
<pre>También se puede incluir stretched_link.html, que se puede sacar de sutty-base (https://0xacab.org/sutty/jekyll/sutty-base-jekyll-theme/-/blob/master/_includes/stretched_link.html).
Lo importante es que es el position-relative el que le indica al stretched-link hasta dónde tiene que expandirse. Es decir, lo tiene que llevar el div que querramos que sea cliqueable.</code>
\ No newline at end of file
Lo importante es que es el position-relative el que le indica al stretched-link hasta dónde tiene que expandirse. Es decir, lo tiene que llevar el div que querramos que sea cliqueable.</pre>
\ No newline at end of file
......@@ -30,7 +30,7 @@ last_modified_at: 2024-06-18 15:48:27.336428581 +00:00
<p style="text-align:start">`git remote set-url origin git@0xacab.org:sutty/jekyll/$nombredelsitio-jekyll-theme.git`</p>
<p style="text-align:start">`git remote add upstream git@0xacab.org:sutty/jekyll/sutty-base-jekyll-theme.git`</p>
<p style="text-align:start"># configurar upstream unicamente para traer cambios<br>
<code> git remote set-url --push upstream ""</code></p>
<pre> git remote set-url --push upstream ""</pre></p>
<p style="text-align:start"># traer archivos e indice de lfs y pushearlo al origen master nuevo</p>
<p style="text-align:start"> `git lfs fetch upstream --all`</p>
<p style="text-align:start"> `git lfs push origin master --all`</p>
......
......@@ -20,7 +20,7 @@ created_at: 2024-01-08 03:21:59.991716045 +00:00
last_modified_at: 2024-01-08 03:22:00.004197689 +00:00
---
<p style="text-align:start"># Eliminar commits en remoto que no queremos conservar</p><p style="text-align:start">Con <code>tig </code>podemos ver el hash del commit</p><p style="text-align:start">Lo primero que debes hacer es hacer un <code>reset</code> hasta el último commit válido a mantener:</p><code>git reset --hard
</code><p style="text-align:start">donde <code></code> es el <em>hash</em> del commit al cual quierés volver.</p><p style="text-align:start">Luego tenés que hacer un nuevo <code>push</code> con la opción <code>-f</code> para forzar la sobreescritura del historial</p><code>git push -f origin
<p style="text-align:start"># Eliminar commits en remoto que no queremos conservar</p><p style="text-align:start">Con <pre>tig </pre>podemos ver el hash del commit</p><p style="text-align:start">Lo primero que debes hacer es hacer un <pre>reset</pre> hasta el último commit válido a mantener:</p><pre>git reset --hard
</pre><p style="text-align:start">donde <pre></pre> es el <em>hash</em> del commit al cual quierés volver.</p><p style="text-align:start">Luego tenés que hacer un nuevo <pre>push</pre> con la opción <pre>-f</pre> para forzar la sobreescritura del historial</p><pre>git push -f origin
hay que darle permiso al repositiorio para forzar una reescritura si es la rama master porque esta protegida por defecto. para editar esto hay que ir a settings&gt;repository&gt;Branchrules &gt; toggler allow force push</code>
\ No newline at end of file
hay que darle permiso al repositiorio para forzar una reescritura si es la rama master porque esta protegida por defecto. para editar esto hay que ir a settings&gt;repository&gt;Branchrules &gt; toggler allow force push</pre>
\ No newline at end of file
......@@ -25,8 +25,8 @@ last_modified_at: 2024-02-01 21:30:48.845305809 +00:00
<li><p style="text-align:start">buscamos la fuente.</p></li>
<li><p style="text-align:start">usamos el botón de más para agregar todas las variantes que necesitemos. Es importante agregar las que use el diseño porque el navegador va a intentar simularlo pero no siempre va a ser idéntico a la variante de la fuente.</p></li>
<li><p style="text-align:start">acá aparecen todas las fuentes y variantes agregadas</p></li>
<li><p style="text-align:start">en esta parte vamos a seleccionar la parte del link que está entre comillas: <code>https://fonts.googleapis.com/css2?family=Montserrat:ital@0;1&amp;display=swap</code> y la copiamos</p></li>
</ol><h3 style="text-align:start" id="instalar-fonts">Instalar fonts</h3><p style="text-align:start">Para instalar las fonts dentro del proyecto (preferentemente en la rama theme, para poder traerlas en todas las ramas de trabajo) tenemos que usar el comando <code>go-task google-font -- "PEGAR URL QUE COPIAMOS DE GOOGLE FONTS"</code></p><p style="text-align:start">Siguiendo con el ejemplo sería: <code>go-task google-font -- "https://fonts.googleapis.com/css2?family=Montserrat:ital@0;1&amp;display=swap"</code></p><p style="text-align:start">De esta forma descargamos e instalamos las fonts en nuestro proyecto, pero van a estar en formato .ttf u .otf y las tenemos que convertir a .woff2. Para eso usamos el comando <code>go-task subset-fonts</code>.</p><p style="text-align:start">Todas las fuentes instaladas se van a convertir automáticamente a formato .woff2 y se va a crear un archivo en el directorio <code>_sass/</code> con el nombre de la fuente y variantes, por ejemplo: <code>montserrat_ital_wght_0_400;0_600;0_700;1_400;1_600;1_700.scss</code></p><p style="text-align:start">Acá se recomienda reemplazar los punto y coma por guiones bajos o simplificar el nombre del archivo.</p><p style="text-align:start">Para que el sitio reconozca las fuentes hay que agregar este archivo en el <code>assets/styles.scss</code> con la línea <code>@import "montserrat_ital_wght_0_400_0_600_0_700_1_400_1_600_1_700";</code>, donde lo que está entre comillas es el nombre del archivo tal como lo dejamos en la carpeta <code>_sass/</code>.</p><p style="text-align:start">Un último paso es verificar que la ruta de las fuentes esté correctamente puesta, porque a veces en la conversión se omite la ruta completa:</p><ol>
<li><p style="text-align:start">Abrimos el archivo de las fuentes: <code>_sass/montserrat_ital_wght_0_400_0_600_0_700_1_400_1_600_1_700.scss</code></p></li>
<li><p style="text-align:start">Revisamos en todas las clases que la ruta incluya todo el directorio desde la carpeta <code>fonts/</code>, por ejemplo: <code>url(../fonts/montserrat/v26/JTUFjIg1_i6t8kCHKm459Wx7xQYXK0vOoz6jq6R9aX8-subset.woff2)</code></p></li>
<li><p style="text-align:start">en esta parte vamos a seleccionar la parte del link que está entre comillas: <pre>https://fonts.googleapis.com/css2?family=Montserrat:ital@0;1&amp;display=swap</pre> y la copiamos</p></li>
</ol><h3 style="text-align:start" id="instalar-fonts">Instalar fonts</h3><p style="text-align:start">Para instalar las fonts dentro del proyecto (preferentemente en la rama theme, para poder traerlas en todas las ramas de trabajo) tenemos que usar el comando <pre>go-task google-font -- "PEGAR URL QUE COPIAMOS DE GOOGLE FONTS"</pre></p><p style="text-align:start">Siguiendo con el ejemplo sería: <pre>go-task google-font -- "https://fonts.googleapis.com/css2?family=Montserrat:ital@0;1&amp;display=swap"</pre></p><p style="text-align:start">De esta forma descargamos e instalamos las fonts en nuestro proyecto, pero van a estar en formato .ttf u .otf y las tenemos que convertir a .woff2. Para eso usamos el comando <pre>go-task subset-fonts</pre>.</p><p style="text-align:start">Todas las fuentes instaladas se van a convertir automáticamente a formato .woff2 y se va a crear un archivo en el directorio <pre>_sass/</pre> con el nombre de la fuente y variantes, por ejemplo: <pre>montserrat_ital_wght_0_400;0_600;0_700;1_400;1_600;1_700.scss</pre></p><p style="text-align:start">Acá se recomienda reemplazar los punto y coma por guiones bajos o simplificar el nombre del archivo.</p><p style="text-align:start">Para que el sitio reconozca las fuentes hay que agregar este archivo en el <pre>assets/styles.scss</pre> con la línea <pre>@import "montserrat_ital_wght_0_400_0_600_0_700_1_400_1_600_1_700";</pre>, donde lo que está entre comillas es el nombre del archivo tal como lo dejamos en la carpeta <pre>_sass/</pre>.</p><p style="text-align:start">Un último paso es verificar que la ruta de las fuentes esté correctamente puesta, porque a veces en la conversión se omite la ruta completa:</p><ol>
<li><p style="text-align:start">Abrimos el archivo de las fuentes: <pre>_sass/montserrat_ital_wght_0_400_0_600_0_700_1_400_1_600_1_700.scss</pre></p></li>
<li><p style="text-align:start">Revisamos en todas las clases que la ruta incluya todo el directorio desde la carpeta <pre>fonts/</pre>, por ejemplo: <pre>url(../fonts/montserrat/v26/JTUFjIg1_i6t8kCHKm459Wx7xQYXK0vOoz6jq6R9aX8-subset.woff2)</pre></p></li>
</ol><h3 style="text-align:start" id="commitear-todos-los-archivos">Commitear todos los archivos</h3><p style="text-align:start">No olvidarse de commitear todos los archivos que creamos/modificamos (fuentes en .woff2, archivos .scss). Si la fuente quedó en formato .ttf y .otf, el .gitignore no las va a mostrar y es fácil olvidarse de agregarlas.</p>
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment