lukinco / semana-hacktoberfest Goto Github PK

Após eu tentar criar algumas PRs e receber feedback de como prosseguir, acho que devia ser criado um arquivo CONTRIBUTING.md para que outros ao tentar contribuir não venha passar por isso também e prosseguir da melhor forma.

Estou fazendo em uma branch mais ou menos assim, caso precise alterar algo estou disposto a alterar.

Site • Setup • License • Lukin Co.

Para contribuir com o projeto você deverar seguir algumas etapas para que seu PR seja aceito.

• Fazer um fork do repositório.
• Abrir uma issue.
• Criar uma branch.
• Commitar suas modificações.
• Criar uma PR.

Como abrir um issue?

Na aba de criar um issue, ao clicar em New issue você deve descrever o mais claro possivél:

• Title: com um título que representa o seu issue.
• Leave a comment: com uma descrição detalhada do que deve ser feito no
  issue.

Se quiser poderá colar codigos para uma descrição mais clara.
Feito isso, clique em Submit new issue.

Como criar um branch?

git checkout -b my-new-feature

Faça suas alterações e depois um commit.

Como fazer mensagens de commit?

git commit -m '[nome da branch] - Add some feature'

• Um bom padrão para fazer seus commits comece com o nome da suas branch e depois uma breve descrição dela.

Exemplo:


"animated-scroll - foi criado uma animação ao fazer um scroll na tela"

Como criar um pull requests?

Após fazer o push de sua branch:

git push -u origin my-new-feature

• Ir na aba Pull requests e clicar no botão New pull requests
• Descreva ao maximo de todas as suas alterações na PR

Depois de mergearmos seu PR você pode excluir sua branch.

Tudo bem pessoal?

Estava dando uma olhada na versão mobile do site e percebi que alguns headings continuam alinhados a direita (seguindo o layout do desktop), o que na minha visão acaba quebrando um pouco o fluxo de leitura:

Sugestão: No mobile alinhar todos os headings a esquerda.

Acham que faz sentido? Estou disposto a abrir uma PR se quiserem.

Acho uma boa idéia colocar o Header fixo ao fazer scroll ou criar um botão fluante que permita voltar ao topo em um só clique, pensando na usabilidade do usuario:

Toda vez que clicamos em um link do Header a pagina foca na section referente ao link, sendo necessario fazer todo o scroll para o topo caso queira ir de uma seção para outra mais rápida.

A idéa é deixar os components o mais limpo possivél removendo toda a parte de css, criando um arquivo styles na pasta de cada componente, sugeri colocar por ex: nome-do-componente.styles.js, deixando assim uma forma de se orientar de qual css aquele styles pertence, pensando em dev que utilizam outros editores como o @fdaciuk mencionou nessa PR.

Exemplo com o componente Footer

footer.js

import { smoothScrollTo } from 'utils/smoothScrollTo'

import { motionWrapper, Wrapper, Logo, Navigation, NavItem } from './header.styles'

export const Header = () => {
  function scrollNavigation (e, url) {
    e.preventDefault()
    const to = document.querySelector(url).offsetTop

    smoothScrollTo(0, to)
    window.history.pushState('', '', [url])
  }

  return (
    <Wrapper
      initial='hidden'
      animate='visible'
      variants={motionWrapper}
    >
      <div><Logo src='./hacktoberfest-black.svg' /></div>
      <Navigation>
        {menu.map(({ title, url }) => (
          <NavItem key={title} href={url} onClick={e => scrollNavigation(e, url)}>{title}</NavItem>
        ))}
      </Navigation>
    </Wrapper>
  )
}

footer.styles.js

import styled from 'styled-components'

import { media } from 'ui'

export const Wrapper = styled.footer`
  height: 20rem;
  display: flex;
  align-items: center;
  background-color: ${({ theme }) => theme.colors.primary};
  clip-path: polygon(0% 5rem, 100% 0%, 100% 100%, 0% 100%);
`

export const Content = styled.div`
  padding-top: 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 3rem;
`

export const Copyright = styled.p`
  font-size: 1.6rem;
  font-weight: 600;

  ${media.lessThan('sm')`
    order: 3;
  `}
`

export const Social = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;

  > *:not(:last-child) {
    margin-right: 2.5rem;
  }
`

O embed do vídeo do Youtube no site está dando como indisponível, provavelmente é alguma configuração no canal/vídeo que habilite esta permissão de fazer incorporação deste vídeo fora do domínio do Youtube 😄

Vi no site que ao clicar no link do Header então estav com a idéia de colocar um smooth no scroll pois ao clicar ele muda para a seção de um modo muito seco.

Apliquei uma função para fazer um smooth no scroll ao clicar no link da navegação, essa função permite que qualquer browser tenha esse comportamente, também mantive o comportamento de mudar na url de acordo com a seção.

essa função fica em ui/header/header.js e é chamado no onClick do link

function scrollNavigation (e, url) {
    e.preventDefault()
    const to = document.querySelector(url).offsetTop

    smoothScrollTo(0, to)
    window.history.pushState('', '', [url])
  }

Outra função foi criado com toda a logica smoothScrollTo geralmente coloco funções externas em uma pasta chamada utils, como não sei qual padrões vocês adotam eu fiz dessa forma que geralmente faço, aberto a sugestões.

Uma outra sujestão tambem seria jogar as pastas pages, ui, resources para dentro de uma pasta src e a utils caso ela entre na PR