Michał Turczyn's questions

No GitHub Actions, defini o pipeline em YAML.

Tenho um job condicional e outro depois, que gostaria de executar depois do job condicional. Mas se o job não executar, então execute-o imediatamente.

Se eu usar:

name: Test conditionals

on:
  workflow_dispatch:

env:
  DEPLOY_NONPROD_ENV: 'false'

jobs:
  conditionalJob: 
    if: ${{ env.DEPLOY_NONPROD_ENV == 'true' }}
    runs-on: 'ubuntu-latest'
    steps:
      - name: Checkout repository
        uses: actions/checkout@v3
      - name: Echo message
        run: 'echo "Condition evaluated to true"'
  dependantJob: 
    needs: [conditionalJob]
    runs-on: 'ubuntu-latest'
    steps:
      - name: Checkout repository
        uses: actions/checkout@v3
      - name: Echo message
        run: 'echo "Running dependantJob"'

se conditionalJobfor ignorado, então o dependantJobtambém será ignorado.

Como fazer para que ele funcione de forma que dependantJobseja executado imediatamente se conditionalJobfor ignorado e aguarde se for executado?

Quero que o elemento HTML se expanda para baixo e, no final, gostaria que ele desse um pequeno salto, algo que cubic-bezieruma função poderia fazer.

Então eu configurei transition: height ...em CSS para animar mudanças na heightpropriedade do elemento. No entanto, funciona apenas quando eu tenho height definido explicitamente, e não para 100vhconter apenas todos os elementos.

Para apresentar melhor, aqui estão alguns exemplos: quando o contêiner verde tem max-heightmenos que sua altura real (para conter seus filhos), então o efeito é visível e funciona. Mas então eu não confio no dimensionamento automático do contêiner para acomodar seus filhos.

Quando especifico algo "grande o suficiente" para acomodar todos os filhos possíveis, então, é claro, o "efeito de salto" não funciona, pois ele "salta" ao atingir a altura "grande o suficiente", tornando o efeito não visível.

Você pode observar o problema especificando alturas diferentes no snippet abaixo (3rem ou menos - funciona, 4 rem ou mais - não funciona).

function expand(){
    let dropdown = document.getElementById('dropdown')
    let height = dropdown.offsetHeight
    let maxHeightInput = document.getElementById('maxHeightInput')
    let maxHeight = maxHeightInput?.value ?? 0
    dropdown.style.maxHeight = height > 0 ? 0 : maxHeight
}

#dropdown {
    background: lightgreen;
    max-height: 3rem;
    transition: max-height 0.4s cubic-bezier(.04,1.59,.83,1.18);
    & > ul {
        border: 1px solid black;    
    }
}

<label>Green container expanded max height <input id='maxHeightInput' value='3rem' /></label><br>
<p>List of items is ~3rems tall.</p>
<button onclick={expand()}>Expand / collapse</button>
<div id='dropdown'>
<ul>
<li>Item 1
<li>Item 2
<li>Item 3
</ul>
</div>

A questão é como fazer esse efeito de salto funcionar no meu cenário: quando tenho um contêiner com filhos, e o contêiner é dimensionado dinamicamente com base em seus filhos.

Quero executar a imagem docker do Ollama. Isso expõe a API inteira com seus endpoints.

Quero protegê-lo adicionando um proxy reverso e escolhi o Nginx para o trabalho.

Então preciso adicionar o Nginx à minha imagem do docker com o Ollama.

Então eu construí o seguinte Dockerfile:

FROM ollama/ollama:latest

FROM nginx:latest

COPY /.nginx/nginx.conf /etc/nginx/conf.d/default.conf

Minha configuração Nginx:

server {
    listen 80;
    
    location /api/tags {
        proxy_pass http://localhost:11434/api/tags;
        proxy_set_header Host localhost:11434;
    }
    
    # Default: Return 404 for all other endpoints
    location / {
        return 404;
    }
}

Aqui, permito que apenas um ponto de extremidade seja proxy para Ollama.

Para testar, testei alguns endpoints e eles retornaram corretamente 404.

Mas quando tentei api/tagso caminho, recebi o erro 502 "Gateway inválido".

Nos logs do docker eu pude ver:

2024-12-01 22:44:41 2024/12/01 21:44:41 [aviso] 29#29: *1 servidor upstream desabilitado temporariamente durante a conexão com o upstream, cliente: 172.17.0.1, servidor: , solicitação: "GET /api/tags HTTP/1.1", upstream: "http://127.0.0.1:11434/api/tags", host: "localhost:8000"

2024-12-01 22:44:41 2024/12/01 21:44:41 [erro] 29#29: *1 connect() falhou (111: Conexão recusada) ao conectar ao upstream, cliente: 172.17.0.1, servidor: , solicitação: "GET /api/tags HTTP/1.1", upstream: "http://127.0.0.1:11434/api/tags", host: "localhost:8000"

2024-12-01 22:44:41 2024/12/01 21:44:41 [aviso] 29#29: *1 servidor upstream desabilitado temporariamente durante a conexão com o upstream, cliente: 172.17.0.1, servidor: , solicitação: "GET /api/tags HTTP/1.1", upstream: "http://127.0.0.1:11434/api/tags", host: "localhost:8000"

2024-12-01 22:44:41 172.17.0.1 - - [01/Dez/2024:21:44:41 +0000] "GET /api/tags HTTP/1.1" 502 559 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, como Gecko) Chrome/128.0.0.0 Safari/537.36 OPR/114.0.0.0" "-"

Parece que o servidor Ollama não está funcionando, mas não sei:

1. Como verificar processos em execução no Docker, pscomando não encontrado no Docker.
2. Como executar o servidor Ollama?
3. Como definir no Docker como iniciar o servidor Ollama automaticamente?

Estou tentando testar novos recursos do React 19.

Para fazer isso, criei um aplicativo React com Vite e TypeScript:

npm create vite@latest

Em seguida, atualizei para as bibliotecas React 19 ( de acordo com este artigo ):

npm install --save-exact react@rc react-dom@rc

Depois disso, posso ver a versão atualizada do React em package.json:

"dependencies": {
    "react": "19.0.0-rc-d8c90fa4-20241001",
    "react-dom": "19.0.0-rc-d8c90fa4-20241001"
}

Agora quero testar novos recursos do React 19, um dos quais é o novo hook use, mas quando tento:

import { use } from 'react'

Recebo um erro de que não foi exportado de react:

O módulo "react" não possui nenhum membro exportado 'use'

Obviamente, agora completei corretamente a "migração" para React 19 - o que eu perdi? Como fazer funcionar?

Também suspeito que esse recurso possa ser específico dos React Server Components.

Estou usando o React Router para meu site e encontrei o seguinte problema. Eu defini meu componente principal do aplicativo da seguinte maneira:

import './App.css'
import { Navbar } from './Navbar'
import { Outlet } from 'react-router'

function App() {
    return (
        <div>
            <Navbar />
            <Outlet />
        </div>
    )
}

export default App

e então usei este componente para rota base:

<BrowserRouter>
    <Routes>
        <Route path="/" element={<App />} >
            <Route path='home' element={<Home />} index />
            <Route path='about' element={<About />} />
        </Route>
        <Route path="*" element={<Navigate to="/Home" replace />} />
    </Routes>
</BrowserRouter>

Tudo funciona bem, posso navegar nas páginas home e about, mas quando navego para /, aparece uma página em branco com Navbar, o que é compreensível, mas não sei como poderia exibir minha página inicial padrão. Posso de alguma forma instruir o React para redirecionar para home? Não consigo definir Homeo componente para / rota, pois isso quebraria totalmente o aplicativo (já que o Appcomponente possui o Outletcomponente).

Versões das bibliotecas:

"react-dom": "^18.2.0",  
"react-router": "^6.21.1",  
"react-router-dom": "^6.21.1",