NavSphere: um site de navegação pessoal moderno criado usando repositórios do GitHub

O NavSphere é uma plataforma moderna de gerenciamento de URLs de navegação desenvolvida usando a estrutura de tecnologia Next.js 14, atualmente popular. O recurso mais importante desse projeto é que ele não depende de bancos de dados tradicionais, mas armazena de forma inteligente os dados de navegação dos usuários, a configuração do site e outras informações na forma de arquivos diretamente em um repositório designado do GitHub. Esse design não só garante a segurança dos dados, mas também permite que cada modificação tenha um histórico para verificação. Depois que os usuários são autorizados a fazer login por meio de sua conta do GitHub, eles podem gerenciar facilmente seus links de navegação e categorias arrastando e soltando na página da Web. O projeto foi desenvolvido para ser adaptável a diferentes dispositivos, como telefones celulares e computadores, e suporta temas de interface claros e escuros. Para os desenvolvedores ou usuários que desejam começar rapidamente, o NavSphere fornece um guia de implantação detalhado, que pode ser implantado em plataformas como Cloudflare Pages ou Vercel com um único clique para criar rapidamente um portal de navegação personalizado próprio que pode ser acessado rapidamente de qualquer lugar do mundo.

Lista de funções

• pilha de tecnologia modernaO projeto foi desenvolvido com Next.js 14, React 18 e TypeScript, garantindo desempenho e eficiência no desenvolvimento.
• Armazenamento de dados do GitHubNão há necessidade de um banco de dados separado, todos os dados de navegação e a configuração do site são armazenados no repositório GitHub do próprio usuário, com controle de versão e segurança de dados.
• Login seguroSuporte à autenticação via GitHub OAuth para segurança da conta.
• Gerenciamento de arrastar e soltarOs usuários podem arrastar e soltar intuitivamente para classificar e gerenciar links e categorias de navegação.
• design responsivoInterface: A interface foi projetada com um conceito mobile-first para proporcionar uma excelente experiência de navegação em computadores, tablets e telefones celulares.
• Mudança de temaTemas de cores claras e escuras incorporados, os usuários podem alternar livremente de acordo com suas preferências pessoais.
• Pesquisa inteligente:: Oferece uma função de pesquisa rápida para ajudar os usuários a encontrar rapidamente o site de destino entre um grande número de links.
• Aplicativos Web progressivos (PWA)Suporte para adicionar à tela inicial para proporcionar uma experiência off-line semelhante a um aplicativo nativo.
• Implementação em um cliqueDocumentação detalhada de implantação é fornecida, facilitando a implantação de serviços em plataformas como Cloudflare Pages ou Vercel.

Usando a Ajuda

O NavSphere é um projeto de código aberto, os usuários precisam implantá-lo por conta própria antes de poderem usá-lo. Todo o processo é dividido principalmente em três etapas: preparação do ambiente, configuração do GitHub e implantação.

Etapa 1: Preparar o ambiente de desenvolvimento local

Antes de começar, certifique-se de que os seguintes softwares estejam instalados em seu computador:

• Node.js:: Requisitos da versão 18.0 Ou superior.
• pnpmUma ferramenta de gerenciamento de pacotes recomendada, que também pode ser usada com o npm talvez yarn.
• GitUsado para clonar o código do projeto do GitHub.

Processos operacionais:

1. Código de clonagemAbra um terminal (ou prompt de comando), vá até a pasta em que deseja armazenar o projeto e execute o seguinte comando para clonar o código-fonte do projeto localmente.

   git clone https://github.com/tianyaxiang/NavSphere.git
   

2. Vá para o diretório do projeto:

   cd NavSphere
   ```3.  **安装依赖**: 在项目根目录下，运行命令安装项目所需的所有依赖库。
   ```bash
   pnpm install
   

3. Configuração de variáveis de ambienteHá um arquivo no diretório raiz do projeto chamado .env.example você precisa fazer uma cópia do arquivo e renomeá-lo como .env.local. Esse arquivo é usado para armazenar suas informações pessoais de configuração.

   cp .env.example .env.local
   

   Em seguida, você precisa abrir o arquivo .env.local preencha as informações de configuração obtidas nas etapas subsequentes.

Etapa 2: Configurar o GitHub

O NavSphere usa o GitHub como backend para armazenamento de dados e autenticação de usuários, portanto, são necessárias duas configurações principais.

1. crie um aplicativo GitHub OAuth para login de usuário

• Acesse a página de configurações do desenvolvedor do GitHub e clique no botão "New OAuth App" (Novo aplicativo OAuth).
• Nome do aplicativoPreencha qualquer campo, por exemplo MyNavSphere.
• URL da página inicialSe estiver testando localmente, preencha http://localhost:3000. Se já estiver implantado, preencha seu domínio da Web.
• URL de retorno de chamada de autorizaçãoPreenchimento de teste local http://localhost:3000/api/auth/callback/githubImplemente e, em seguida, modifique a seção de nome de domínio de acordo.
• Após a criação bem-sucedida, você receberá um Client IDe, em seguida, clique em "Generate a new client secret" (Gerar um novo segredo de cliente) para gerar um novo segredo de cliente. Client Secret. Preencha cada um desses dois valores em .env.local no arquivo GITHUB_ID responder cantando GITHUB_SECRET Campos.

2. criar um repositório do GitHub para armazenar dados

• Visite a página Criar um novo repositório no GitHub.
• Nome do repositórioNome do depósito: O nome do depósito pode ser arbitrário, por exemplo navsphere-data.
• Público / PrivadoRepositório público: O repositório pode ser público ou privado, e os repositórios privados podem proteger melhor a privacidade de seus dados de navegação.
• Quando terminar, preencha seu nome de usuário do GitHub e o nome desse repositório no campo .env.local no arquivo GITHUB_OWNER responder cantando GITHUB_REPO campo. O branch do repositório geralmente tem como padrão mainPreencher GITHUB_BRANCH é suficiente.

Após concluir a configuração acima, seu .env.local O arquivo deve ter a seguinte aparência:

# GitHub OAuth App 配置
GITHUB_ID=your-github-client-id
GITHUB_SECRET=your-github-client-secret
# GitHub 仓库配置
GITHUB_OWNER=your-github-username
GITHUB_REPO=navsphere-data
GITHUB_BRANCH=main
# NextAuth 配置
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=a_random_strong_secret_string

NEXTAUTH_SECRET Você mesmo pode configurar uma cadeia aleatória suficientemente complexa.

Etapa 3: Implementar on-line

Recomenda-se usar o Cloudflare Pages ou o Vercel para a implantação, pois ambos oferecem opções de implantação fáceis e gratuitas.

Veja as páginas do Cloudflare, por exemplo:

1. Faça login no console da Cloudflare, vá para Páginas, selecione "Criar projeto" e conecte-se à sua conta do GitHub.
2. escolha seu Garfo clonado NavSphere Armazém de projetos (falha(um repositório para armazenar dados).
3. configuração de construção:
   • Comando de construção: pnpm install && pnpm build
   • Criação do diretório de saída: .next
4. variável de ambienteNa configuração "Environment Variables" (Variáveis de ambiente), adicione as variáveis que você adicionou na seção .env.local Todos os pares de valores-chave configurados no arquivo (GITHUB_ID, GITHUB_SECRET, GITHUB_OWNER, GITHUB_REPO, GITHUB_BRANCH, NEXTAUTH_SECRET).tomar nota de::NEXTAUTH_URL Ele precisa ser configurado para que Cloudflare Pages seja o nome de domínio que você gerou, por exemplo. https://your-project.pages.dev.
5. Clique em "Save and Deploy" (Salvar e implantar), aguarde alguns minutos e seu site de navegação pessoal estará on-line.

Após uma implantação bem-sucedida, acesse seu site, clique em Login e comece a adicionar e gerenciar seus links de navegação após a autorização via GitHub. O sistema adicionará automaticamente links para seu site na seção navsphere-data Criado no repositório navigation.json (dados de navegação) e site.json (configuração do site) e outros documentos.

cenário do aplicativo

1. Gerenciamento de favoritos do desenvolvedor pessoal
   Para programadores e desenvolvedores que precisam acessar um grande número de sites de ferramentas, documentos e blogs diariamente, o NavSphere os ajuda a categorizar esses links usados com frequência, sincronizá-los na nuvem e versioná-los via GitHub, criando uma mesa de navegação de trabalho eficiente e personalizada.
2. Portal de recursos da equipe interna
   Uma equipe (por exemplo, equipe de design, desenvolvimento ou operações) pode manter em conjunto um NavSphere Nav Station que centraliza os links para sistemas internos, recursos de design, documentação técnica, ferramentas de gerenciamento de projetos, etc., que são comumente usados pela equipe. Quando novos membros se juntam à equipe, eles podem conhecer e acessar rapidamente todos os recursos relevantes por meio desse portal.
3. Portal da base de conhecimento pessoal
   Se você tiver seu próprio conteúdo pessoal, como blogs, bases de conhecimento, portfólios de projetos, etc., distribuídos em diferentes plataformas, poderá usar o NavSphere para criar uma página inicial pessoal unificada ou um portal de navegação para que outras pessoas tenham uma visão geral rápida de todos os seus trabalhos e habilidades.
4. Página inicial do Navegador Geek
   Para quem gosta de mexer e personalizar, é possível definir o site do NavSphere implantado como a página inicial do navegador. Dessa forma, sempre que abrir o navegador, você poderá ver seus próprios links de navegação cuidadosamente organizados e ajustar o layout arrastando, soltando e editando a qualquer momento, assumindo o controle total do seu próprio acesso à Internet.

QA

1. O que devo fazer se receber uma mensagem de falha de autenticação ao fazer login?
   Isso geralmente é causado por uma configuração incorreta do aplicativo GitHub OAuth. Verifique o .env.local (ou variável de ambiente da plataforma de implantação) no arquivo GITHUB_ID responder cantando GITHUB_SECRET esteja correto. Além disso, verifique se o "URL de retorno de chamada de autorização" nas configurações do aplicativo GitHub OAuth é o mesmo que o endereço físico do seu site (incluindo o http talvez https:// e no final /api/auth/callback/github caminho) é idêntico.
2. Não consigo ver os dados de navegação depois de fazer login ou os dados não são carregados?
   Primeiro, verifique as variáveis de ambiente no arquivo GITHUB_OWNER(nome de usuário do GitHub) e GITHUB_REPO(o nome do repositório) está correto. Em seguida, certifique-se de que sua conta do GitHub tenha acesso de gravação ao data warehouse. Se for a primeira vez que você faz login, o sistema criará automaticamente o arquivo de dados, mas se isso falhar, você pode tentar criar manualmente um arquivo navigation.json com o conteúdo do arquivo []Em seguida, tente novamente.
3. A compilação falha quando o projeto é implantado, qual é o motivo?
   O motivo mais comum para a falha de compilação é que a versão do Node.js não atende aos requisitos. Certifique-se de que o ambiente de implantação tenha uma versão do Node.js maior ou igual a 18.0. Se você estiver na plataforma Vercel ou Cloudflare Pages, poderá especificar a versão do Node.js nas configurações do projeto. Como alternativa, problemas de dependência podem causar falhas, portanto, você pode tentar remover o node_modules pastas e pnpm-lock.yaml execute novamente o arquivo pnpm install Vamos ver se funciona.
4. Posso definir o data warehouse de navegação como privado?
   Você pode. Definir o repositório do GitHub onde seus dados estão armazenados como privado protege melhor a privacidade de seus links pessoais. token acesso ao repositório, de modo que tanto os repositórios públicos quanto os privados possam ser lidos e gravados normalmente.