mdnext DOWNLOAD - mdnext Quellcode Download

mdnext

AI-Quellcode

1.0.0

Herunterladen

mdnext

MdNext ist ein Ökosystem von Tools, um Ihre nächsten Js + MDX -Projekte zu vergrößern

Schneller Start
Was ist mdnext?
MDNEXT -Struktur verstehen
Vorlagen

Schneller Start

Möchten Sie ein neues Projekt starten?

 # Using NPX we'll start up the mdnext CLI prompts --
npx mdnext

# You will first be prompted with.. --
What is the name of your project ?

# Then you will choose which template to use
Select which template to use ...

Möchten Sie nur auf Komponenten in Ihren MDX -basierten Apps zugreifen?

 # Even though we're a Next based ecosystem, our `MDX` components should be usable in most React based applications

yarn add @mdnext/components

or

npm i @mdnext/components

Was ist mdnext? ?

mdnext ist ein Ökosystem von Tools, um die Arbeit mit NextJS + MDX zu stärken.

Der mdnext CLI übertönt auf eine Sammlung, die offiziell gepflegt und die Community vorliegt, aus der Auswahl eingereicht zu werden. Nach der Auswahl wird das Projekt vor Ort mit einer Clean Commit History geklont und Sie sind bereit, Ihr nächstes Projekt aufzubauen.

@mdnext/components liefert zugänglich (danke chakraui) und erweiterbare Komponenten für die Arbeit mit MDX . Dazu gehören Dinge, die Sie wie Code für Styling -Code -Blöcke oder Iframes zum Einbetten reichhaltiger Inhalte in MDX gesehen haben

Die mdnext -Vorlagensammlung sind NextJS -basierte Projekte mit Meinungen zum Stil, um MDX (und andere Datenquellen), Medien zu liefern und mit Ihren üblichsten Workflows (E -e -blogs / Produktseiten). Während es eine offiziell gepflegte Sammlung von Vorlagen gibt, war ich gespannt darauf, zu sehen und zu teilen, was die Community geschaffen hat. Ich weiß, dass es als Webentwickler viele verschiedene Meinungen und Komforts gibt und möchte, dass unser Ökosystem zugänglich ist.

MDNext verstehen?

Die Grundstruktur des mdnext-starter ist in allen anderen Vorlagen im Kern der Verwendung von MDX und Next zu sehen.

Wenn Sie diese Struktur kennenlernen, werden Sie über die aktuellen Best Practices informiert, die befolgt werden (die kostenlos für die Interpretation sind!) Und einfach genug zu spielen. Lassen Sie uns in den Starter eintauchen:

jsconfig.js

Mit NextJS können wir absolute Pfade für unsere App konfigurieren. Wir verwenden dies, um alle unsere Funktionen und Dienstprogramme in unserem src -Verzeichnis problemlos zu importieren

pages

Das Seitenverzeichnis definiert Ihr Routing. Lebenszyklusmethoden wie getStaticProps / getStaticPaths / getServerProps sind auf Seitenebene verfügbar. Hier verbrauchen wir unseren MDX -Inhalt als Daten, die an unsere Komponenten weitergegeben werden.

*_app.js* NextJs ermöglicht es Ihnen, die App -Komponente zu überschreiben, mit der Seiten initialisiert werden. Mehr hier
*_document.js* : Ermöglicht Ihnen <html> und <body> Tags unserer Anwendung.
all-data/index.js : Diese Seite ist ein Beispiel für die Anzeige von Links zu allen einzelnen MDX-Datenseiten. Hier verwenden wir getStaticProps , um die Frontmatter unserer MDX -Dateien für unsere Komponenten zu füttern.
data/[slug].js : Hier verwenden wir das dynamische Routing von NextJs. Durch die Verwendung getStaticPaths können wir einen dynamischen Schnecken füttern, die gesamte Logik einmal behandeln und auf die von uns geladenen MDX -Daten anwenden. Auf diese Weise können wir dann mit unseren Daten in getStaticProps übereinstimmen und diese auf der Seite und unseren Komponenten anzeigen.
index.js : Unsere Seite am Wurzel unserer App lebt in den pages index.js .

src Unser src -Verzeichnis enthält alle unsere Client -Code. Unsere components , benutzerdefinierten hooks , utility und unsere MDX -Dateien leben hier alle, wobei die ersten drei für absolute Pfadimporte verfügbar sind?

next.config.js für benutzerdefinierte Konfiguration um Dinge wie environment variables , webpack , pageExtensions und vieles mehr können Sie next.config.js verwenden

Jede Vorlage verfügt über eine eigene README mit expliziten Dokumentation zu den Ergänzungen, aus denen die neue Konfiguration besteht. Andernfalls finden Sie jede Vorlage im Kern, beginnt ähnlich wie bei mdnext-starter

Vorlagen

Die Vorlagen innerhalb von mdnext wurden gemacht, um die Reibung beim Starten einer neuen Website zu lindern. Blogs, persönliche Websites, Kundenarbeit usw. können sich immer sehr entmutigend anfühlen, um loszulegen.

Was müssen wir erreichen?

Wie gehen wir mit dem Styling um?

Wie werde ich mit Daten umgehen?

Was ist der beste Weg, um die Authentifizierung zu integrieren?

Mit den Meinungen in diesen Vorlagen können Sie schnell beginnen und Sie anpassen, wie Sie es für richtig halten.

Unsere derzeit gepflegten Vorlagen:

mdnext-starter Dies ist die kleinste Meinung, aus der alle Vorlagen erstellt werden. Es beherbergt eine sehr minimale Konfiguration und Meinung außerhalb eines Beispiels für die Beschaffung MDX innerhalb von getStaticProps/Paths
mdnext-blog Die Blog-Vorlagen fügen Funktionen über unseren mdnext-starter hinzu. Speziell Chakra-UI zum Styling. Konfiguration für Blogs Beiträge auf der Seite und in der Inhaltsstufe mit unseren MDX -Dateien als Routen. FuseJS für die Filterung unserer Blogs -Beiträge. Schauen Sie sich diese Vorlage in Aktion an!
mdnext-overlays Wenn Sie ein neuer Streamer werden, werden Sie mit vielen Herausforderungen gestellt. Schließlich möchten Sie Ihre eigenen Szenen, Animationen und Interaktionen für Ihren Stream und seine Zuschauer einrichten. Warum nicht die Werkzeuge verwenden, die Sie gerne erstellen? Mit dieser Konfiguration werden Sie mit einer Basisschicht eingerichtet, um jede neue Szene als Route zu konfigurieren. Jede Route enthält Möglichkeiten, mit Twitch -APIs, Ihrem Twitch -Chat und Informationen zu Ihrem Stream und den Ereignissen zu interagieren!

Unsere Community reichte Vorlagen ein:

mdnext-tailwind Möchten Sie schnell mit einem mdnext Projekt mit Tailwind + zum Laufen gehen? Dies ist die Antwort. Eine richtige Konfiguration neben einer Sammlung von Ressourcen, um die Neue zum Tailwind zu ermöglichen, fühlen sich wohl!
mdnext-twin-macro Dieser Starter ist mit twin.macro konfiguriert, da es die Wahl des Stylings ist. Auf diese Weise können Sie die Utility -Kurse Tailwind's und die css -Methode emotion's für einen Aus -Styles verwenden.
mdnext-graphcms mit GraphCMS als Datenquelle richten wir die Grundlagen für einen Blog ein. Es beginnt mit einem einfachen Beispiel MDX
mdnext-reflexjs Reflexjs ist eine Styling-Bibliothek, die für Geschwindigkeit und exzellente Entwicklererfahrung erstellt wurde. Sie können Ihre Komponenten mithilfe von Style -Requisiten und Einschränkungen basierend auf den System -UI -Spezifikationen stylen.