11tyby

11Tyby

Eine organisierte 11ty -Boilerplatte, um Sie schnell zum Laufen zu bringen. Features TypeScript, native JSX-Unterstützung über Preact, CSS-Module mit SASS, eine gut definierte Webpack-Konfiguration für Great DX und alle für die Leistung voroptimiert.

Demo: https://11tyby.netlify.app/

Warum

Es ist zeitaufwändig, ein Setup mit den erforderlichen Werkzeugen zur Verarbeitung von Typscript, JSX, dynamischen Importen, SASS usw. zu verarbeiten. Dieses Projekt verfügt auch über teilweise Hydratation, um die Menge an Code zu verringern, die an Ihre Benutzer geliefert wird.

Struktur

Das Projekt wird über das Modulmuster strukturiert, Dateien werden über Feature, z. ./src/modules/home , gruppiert. Auf diese Weise können Sie zukünftiger zukünftiger Beweis für Ihre Anwendung beim Wachstum besser beweisen und Code dort lokalisieren, wo er benötigt wird. Ihre Seite *.11ty.tsx -Dateien befinden sich in ihrem relevanten Feature -Ordner und exportieren Sie eine permalink -Eigenschaft, damit Sie ihre URL -Struktur definieren können, z. B.:

 module . exports = {
  render : Page ,
  data : ( ) => ( {
    permalink : '/my-feature/index.html' ,
  } ) ,
} ; 

Styling

11TyBy wird mit Unterstützung von CSS-Modulen und SASS voreingesetzt. Sie haben zwei Optionen zum importierten Stil, global oder lokalisiert. Um eine SASS- oder CSS -Datei in ein CSS -Modul umzuwandeln, müssen Sie ein .module -Suffix auf Ihre Datei anwenden, z. B. login.module.css . Sie können dies dann direkt in eine Komponente importieren:

 import style from './login.module.scss' ;

/*[...]*/

function Login ( ) {
  return < form class = { style . form } > /*[...]*/ </ form > ;
}

Um Stile global zu importieren, fügen Sie der Datei, aus der Sie sie laden möchten, einfach eine Nicht -Return -Import -Anweisung hinzu, z. B.:

 import './global.css' ;

/*[...]*/

Um das generierte Stylesheet auf eine Seite anzuwenden, müssen Sie in cssPath von Ihren *.11ty.tsx -Dateien exportierte Datenobjekte, z.

 function Page ( ) {
  return < main class = { style . wrapper } > { /*[...]*/ } </ main > ;
}

/*[...]*/

module . exports = {
  render : Page ,
  data : ( ) => ( {
    permalink : 'index.html' ,
    cssPath : 'login/login.11ty.css' , // <----
  } ) ,
} ;

Der Pfad stimmt mit dem jeweiligen Modulordner überein, und der Name spiegelt den von Ihrem Dateinamen Ihres *.11ty.tsx -Dateins wider, jedoch mit einer CSS -Erweiterung.

Flüssigkeitszufuhr

11TyBy beinhaltet ein Paket, das sich der Anwendung einer teilweisen Flüssigkeitszufuhr widmet. Dies funktioniert als HOC und wickelt die Komponente ein, die Sie auf dem Client hydratieren möchten. Sie können dies wie folgt anwenden:

 import { define } from 'preactement' ;

/*[...]*/

function MainForm ( ) {
  return < form > /*[...]*/ </ form > ;
}

/*[...]*/

const Form = define ( 'main-form' , ( ) => MainForm ) ;

/*[...]*/

export { Form } ;

Es wird empfohlen, Komponenten in ihrem eigenen Ordner zu erstellen und diese Funktion in einer index.ts -Datei innerhalb anzuwenden. Auf diese Weise können Sie alle "Transformationen" trennen, die die Komponente zur Laufzeit mit der Komponente selbst benötigt. Hier sehen Sie ein Beispiel.

Sobald Sie eine hydratisierte Komponente haben, müssen Sie sie in eine "Eintrags" -Datei importieren. Diese sind mit .entry und müssen in ihren jeweiligen Modulordner, z ./src/home/home.entry.ts

Die Eintragsdatei muss Ihre hydratisierten Komponenten importieren, z. B.:

 import '@/modules/home/components/form' ;

Diese Datei wird dann in Ihrer Datei *.11ty.tsx verwiesen, indem sie in das aus Ihrer Komponente exportierte data übergeben, z. B.:

 /*[...]*/
function Page ( ) {
  return < main > { /*[...]*/ } </ main > ;
}

/*[...]*/

module . exports = {
  render : Page ,
  data : ( ) => ( {
    permalink : 'index.html' ,
    jsPath : 'home/home.entry.js' , // <----
  } ) ,
} ;

Schauen Sie sich hier das home an.

Daten

Alle offiziellen 11Ty -Methoden zum Sammeln von Daten von einer API oder auf andere Weise arbeiten hier. Es gibt viele großartige Beispiele dafür, wie dies in der offiziellen 11ty-Dokumentation dies tun kann, einschließlich der Verwendung von GraphQL: https://www.11ty.dev/docs/data-js/.

Um globale Daten zu definieren, fügen Sie dem Ordner ./src/data entweder JSON-, JS- oder Typscript -Dateien hinzu. Diese werden dann von 11y analysiert und über die Datenkaskade hinzugefügt. Sie können auf diese direkt in Ihren Dateien .11ty.ts* zugreifen.

Wenn global.ts ./src/data global

 interface IProps {
  global : {
    title : string ;
  } ;
}

/*[...]*/

function Page ( { global } : IProps ) {
  return (
    < main >
      < h1 > { global . title } </ h1 >
    </ main >
  ) ;
}

Um lokale Daten hinzuzufügen, z. B. für ein Modul spezifische Daten, fügen Sie im relevanten Modulordner ein Datei -Suffizier mit .data hinzu. Dies ist dann genauso zugänglich, wie oben gezeigt, jedoch nur für diese Seite. Wenn Sie beispielsweise home.data.ts to ./src/modules/home hinzugefügt haben, hat Ihre Homepage 11ty.tsx -Datei Zugriff auf die in dieser Datendatei gehaltenen Werte.

Installation

1. Klon oder Laden Sie das Repository herunter

git clone [email protected]:jahilldev/11tyby.git

2. Installieren Sie die Projektabhängigkeiten

yarn

Entwicklung

yarn start

Produktion aufbauen

yarn build