NavSphere: eine moderne persönliche Navigationsseite, die auf GitHub-Repositories basiert

NavSphere ist eine moderne Plattform zur Verwaltung von Navigations-URLs, die mit dem derzeit beliebten Technologie-Framework Next.js 14 entwickelt wurde. Das wichtigste Merkmal dieses Projekts ist, dass es sich nicht auf herkömmliche Datenbanken stützt, sondern die Navigationsdaten der Benutzer, die Konfiguration der Website und andere Informationen in Form von Dateien direkt in einem bestimmten GitHub-Repository speichert. Dieses Design garantiert nicht nur die Sicherheit der Daten, sondern ermöglicht es auch, jede Änderung in der Historie zu überprüfen. Sobald sich die Nutzer über ihr GitHub-Konto angemeldet haben, können sie ihre Navigationslinks und Kategorien einfach per Drag-and-Drop auf der Webseite verwalten. Das Projekt ist so konzipiert, dass es sich an verschiedene Geräte wie Mobiltelefone und Computer anpassen lässt, und unterstützt sowohl helle als auch dunkle Oberflächenthemen. Für Entwickler oder Nutzer, die schnell loslegen wollen, bietet NavSphere einen detaillierten Implementierungsleitfaden, der mit einem einzigen Klick auf Plattformen wie Cloudflare Pages oder Vercel bereitgestellt werden kann, um schnell ein eigenes personalisiertes Navigationsportal zu erstellen, auf das von überall auf der Welt schnell zugegriffen werden kann.

Funktionsliste

• modernes TechnologiepaketDas Projekt basiert auf Next.js 14, React 18 und TypeScript, was Leistung und Entwicklungseffizienz gewährleistet.
• GitHub DatenspeicherungAlle Navigationsdaten und die Konfiguration der Website werden in einem eigenen GitHub-Repository gespeichert, das versionskontrolliert und datensicher ist.
• Sichere AnmeldungUnterstützung der Authentifizierung über GitHub OAuth für Kontosicherheit.
• Drag-and-Drop-VerwaltungBenutzer können Navigationslinks und Kategorien intuitiv durch Ziehen und Ablegen sortieren und verwalten.
• reaktionsfähiges DesignDie Benutzeroberfläche wurde nach dem Konzept "mobile-first" gestaltet, um das Surfen auf Computern, Tablets und Mobiltelefonen zu erleichtern.
• Umschalten des ThemasIntegrierte helle und dunkle Farbthemen, die der Benutzer nach seinen persönlichen Vorlieben frei wählen kann.
• Intelligente Suche:: Bietet eine Schnellsuchfunktion, die es den Nutzern ermöglicht, ihre Zielseite in einer großen Anzahl von Links schnell zu finden.
• Progressive Webanwendungen (PWA)Unterstützung für das Hinzufügen zum Startbildschirm, um ein natives App-ähnliches Offline-Erlebnis zu bieten.
• Ein-Klick-BereitstellungDetaillierte Einsatzdokumentation, die den Einsatz von Diensten auf Plattformen wie Cloudflare Pages oder Vercel erleichtert.

Hilfe verwenden

NavSphere ist ein Open-Source-Projekt. Benutzer müssen es selbst bereitstellen, bevor sie es verwenden können. Der gesamte Prozess ist hauptsächlich in drei Schritte unterteilt: Vorbereiten der Umgebung, Konfigurieren von GitHub und Bereitstellen.

Schritt 1: Vorbereiten der lokalen Entwicklungsumgebung

Bevor Sie beginnen, vergewissern Sie sich, dass Sie die folgende Software auf Ihrem Computer installiert haben:

• Node.js:: Anforderungen an die Version 18.0 Oder höher.
• pnpmEin empfohlenes Werkzeug zur Paketverwaltung, das auch mit dem npm vielleicht yarn.
• GitKlonen: Dient zum Klonen von Projektcode von GitHub.

Operative Prozesse:

1. Klonen von CodeÖffnen Sie ein Terminal (oder eine Eingabeaufforderung), gehen Sie zu dem Ordner, in dem Sie das Projekt speichern möchten, und führen Sie dann den folgenden Befehl aus, um den Quellcode des Projekts lokal zu klonen.

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

2. Wechseln Sie in das Projektverzeichnis:

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

3. Umgebungsvariablen konfigurieren: Im Stammverzeichnis des Projekts gibt es eine Datei mit dem Namen .env.example müssen Sie eine Kopie der Datei erstellen und diese umbenennen in .env.local. Diese Datei wird verwendet, um Ihre persönlichen Konfigurationsinformationen zu speichern.

   cp .env.example .env.local
   

   Als nächstes müssen Sie die .env.local tragen Sie die in den folgenden Schritten erhaltenen Konfigurationsinformationen ein.

Schritt 2: GitHub konfigurieren

NavSphere verwendet GitHub als Backend für die Datenspeicherung und die Benutzerauthentifizierung, sodass zwei wichtige Konfigurationen erforderlich sind.

1. eine GitHub OAuth App für die Benutzeranmeldung erstellen

• Rufen Sie Ihre GitHub-Entwicklereinstellungsseite auf und klicken Sie auf die Schaltfläche "Neue OAuth-App".
• Name der Anwendung: Füllen Sie ein beliebiges Feld aus, z.B. MyNavSphere.
• Homepage-URLWenn Sie lokal testen, füllen Sie bitte http://localhost:3000. Falls bereits eingerichtet, geben Sie Ihre Web-Domäne ein.
• Autorisierungs-Callback-URLLokaler Test: Füllen http://localhost:3000/api/auth/callback/githubund ändern Sie dann den Abschnitt für den Domänennamen entsprechend.
• Nach erfolgreicher Erstellung erhalten Sie eine Client IDund klicken Sie dann auf "Neues Client-Geheimnis generieren", um ein neues Client-Geheimnis zu generieren. Client Secret. Füllen Sie jeden dieser beiden Werte in .env.local in der Datei GITHUB_ID im Gesang antworten GITHUB_SECRET Felder.

2. ein GitHub-Repository zum Speichern von Daten erstellen

• Besuchen Sie die Seite GitHub Create a New Repository.
• Name des RepositoryDer Name des Lagers kann beliebig gewählt werden, zum Beispiel navsphere-data.
• Öffentlich / PrivatDas Repository kann entweder öffentlich oder privat sein, wobei private Repositories die Privatsphäre Ihrer Navigationsdaten besser schützen können.
• Wenn Sie fertig sind, geben Sie Ihren GitHub-Benutzernamen und den Namen des Repositorys in das Feld .env.local in der Datei GITHUB_OWNER im Gesang antworten GITHUB_REPO Feld. Der Repository-Zweig ist in der Regel standardmäßig auf mainAusfüllen GITHUB_BRANCH Feld ist ausreichend.

Nach Abschluss der obigen Konfiguration ist Ihr .env.local Die Datei sollte in etwa so aussehen:

# 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 Sie können selbst eine ausreichend komplexe Zufallsfolge erstellen.

Schritt 3: Online-Bereitstellung

Es wird empfohlen, für die Bereitstellung Cloudflare Pages oder Vercel zu verwenden, die beide kostenlose und einfache Bereitstellungsoptionen bieten.

Nehmen Sie zum Beispiel Cloudflare Pages:

1. Melden Sie sich bei der Cloudflare-Konsole an, gehen Sie zu Seiten, wählen Sie "Projekt erstellen" und verbinden Sie sich mit Ihrem GitHub-Konto.
2. wählen Sie Ihr Gabel geklont NavSphere Projektlager (Störung(ein Repository zum Speichern von Daten).
3. Build-Setup:
   • Befehl "Build: pnpm install && pnpm build
   • Erstellung des Ausgabeverzeichnisses: .next
4. Umgebungsvariable: Fügen Sie in der Einstellung "Umgebungsvariablen" die Variablen hinzu, die Sie im Abschnitt .env.local Alle in der Datei konfigurierten Schlüssel-Wert-Paare (GITHUB_ID, GITHUB_SECRET, GITHUB_OWNER, GITHUB_REPO, GITHUB_BRANCH, NEXTAUTH_SECRET).zur Kenntnis nehmen::NEXTAUTH_URL Es muss so eingerichtet werden, dass Cloudflare Pages der von Ihnen generierte Domainname ist, z. B. https://your-project.pages.dev.
5. Klicken Sie auf "Speichern und bereitstellen", warten Sie ein paar Minuten, und Ihre persönliche Navigationsseite ist nun online.

Nach erfolgreicher Bereitstellung besuchen Sie Ihre Website, klicken auf Login und beginnen nach der Autorisierung über GitHub mit dem Hinzufügen und Verwalten Ihrer Navigationslinks. Das System fügt automatisch Links zu Ihrer Website im Bereich navsphere-data Erstellt im Repository navigation.json (Navigationsdaten) und site.json (Standortkonfiguration) und andere Dokumente.

Anwendungsszenario

1. Verwaltung von Lesezeichen für persönliche Entwickler
   Für Programmierer und Entwickler, die täglich auf eine große Anzahl von Tool-Sites, Dokumenten und Blogs zugreifen müssen, hilft NavSphere dabei, diese häufig genutzten Links zu kategorisieren, in der Cloud zu synchronisieren und über GitHub zu versionieren, um eine effiziente und personalisierte Arbeitsnavigation zu schaffen.
2. Internes Team-Ressourcen-Portal
   Ein Team (z. B. ein Design-, Entwicklungs- oder Betriebsteam) kann gemeinsam eine NavSphere Nav Station unterhalten, die Links zu internen Systemen, Design-Ressourcen, technischer Dokumentation, Projektmanagement-Tools usw. zentralisiert, die vom Team häufig verwendet werden. Wenn neue Mitglieder dem Team beitreten, können sie über dieses Portal schnell alle relevanten Ressourcen kennenlernen und darauf zugreifen.
3. Persönliches Wissensdatenbank-Portal
   Wenn Sie eigene persönliche Inhalte wie Blogs, Wissensdatenbanken, Projektportfolios usw. haben, die über verschiedene Plattformen verteilt sind, können Sie NavSphere verwenden, um eine einheitliche persönliche Homepage oder ein Navigationsportal zu erstellen, damit andere einen schnellen Überblick über alle Ihre Arbeiten und Fähigkeiten erhalten.
4. Geek's Browser-Startseite
   Wer gerne tüftelt und anpasst, kann die von Ihnen eingerichtete NavSphere-Website als Startseite Ihres Browsers festlegen. Auf diese Weise sehen Sie jedes Mal, wenn Sie den Browser öffnen, Ihre eigenen sorgfältig organisierten Navigationslinks und können das Layout durch Ziehen, Ablegen und Bearbeiten jederzeit anpassen und so die volle Kontrolle über Ihren eigenen Internetzugang übernehmen.

QA

1. Was soll ich tun, wenn ich bei der Anmeldung eine Fehlermeldung zur Authentifizierung erhalte?
   Dies ist in der Regel auf eine Fehlkonfiguration der GitHub OAuth App zurückzuführen. Bitte überprüfen Sie die .env.local Datei (oder Umgebungsvariable der Bereitstellungsplattform) in der GITHUB_ID im Gesang antworten GITHUB_SECRET korrekt ist. Vergewissern Sie sich außerdem, dass die "Autorisierungs-Callback-URL" in den Einstellungen Ihrer GitHub OAuth-App mit der physischen Adresse Ihrer Website übereinstimmt (einschließlich der http vielleicht https:// und am Ende /api/auth/callback/github Pfad) ist identisch.
2. Ich kann die Navigationsdaten nach dem Einloggen nicht sehen, oder die Daten werden nicht geladen?
   Überprüfen Sie zunächst die Umgebungsvariablen in der Datei GITHUB_OWNER(GitHub-Benutzername) und GITHUB_REPO(der Name des Repositorys) korrekt ist. Stellen Sie als Nächstes sicher, dass Ihr GitHub-Konto Schreibzugriff auf das Data Warehouse hat. Wenn Sie sich zum ersten Mal anmelden, wird das System die Datendatei automatisch erstellen, aber wenn das fehlschlägt, können Sie versuchen, manuell eine leere navigation.json Datei mit dem Inhalt von []Dann versuchen Sie es erneut.
3. Der Build schlägt fehl, wenn das Projekt bereitgestellt wird, was ist der Grund dafür?
   Der häufigste Grund für Build-Fehler ist, dass die Node.js-Version nicht den Anforderungen entspricht. Stellen Sie sicher, dass die Bereitstellungsumgebung eine Node.js-Version hat, die größer oder gleich ist wie 18.0. Wenn Sie die Vercel- oder Cloudflare Pages-Plattform verwenden, können Sie die Node.js-Version in den Projekteinstellungen angeben. Alternativ können Probleme mit Abhängigkeiten zu Fehlern führen, so dass Sie versuchen können, die node_modules Mappen und pnpm-lock.yaml Datei, führen Sie erneut die pnpm install Mal sehen, ob es funktioniert.
4. Kann ich das Navigations-Data-Warehouse auf privat setzen?
   Das können Sie. Wenn Sie das GitHub-Repository, in dem Ihre Daten gespeichert sind, auf "privat" setzen, können Sie die Privatsphäre Ihrer persönlichen Links besser schützen.NavSphere schützt die Privatsphäre Ihrer Links durch autorisierte Token Zugriff auf das Repository, so dass sowohl öffentliche als auch private Repositories normal gelesen und beschrieben werden können.