Meine TYPO3 Packages & Extensions Inspiring People To Share

OpenSource lebt von der Beteiligung und dem Teilen von Lösungen in der Community, daher veröffentliche ich an dieser Stelle ganz nach dem Motto "Inspiring People To Share" immer mal wieder, einige meiner TYPONiels TYPO3 Erweiterungen (Extensions) & Packages, sowie Tools, Code-Snippets und Anleitungen. Stay tuned.

Meine Erweiterungen für TYPO3 CMS

Als TYPO3-Webentwickler durfte ich bereits einige TYPO3-Projekte für meine Kunden umsetzen. Dabei sind seit 2016 bereits über 50 eigene TYPO3-Erweiterungen, sogenannte Extensions entstanden. Einige davon finden Sie an dieser Stelle zum kostenfreien Download.

TN.Techradar

Repository

TYPO3 Extension to import Radar-Items from Cockpit CMS to have the Stuff in the Solr-Core

Namespace: TN Extensions

Issue-Tracker: 0 Issues

TN.Accordion

Repository

A simple accordion content element for structuring large amounts of content, e.g. for the privacy policy. The Accordion is based on Irre records and offers a search function in addition to icons. In use at www.typoniels.de/datenschutzerklaerung

Namespace: TN Extensions

Issue-Tracker: 0 Issues

TN.Extranet

Repository (Access required)

A TYPO3 extension, with which an intranet/extranet with calendar, time tracking, projects and customer-management, stats and much more features could be set up very easily and quickly.

Namespace: TN Extensions

Issue-Tracker: 0 Issues

TN.Referenzen

Repository (Access required)

TYPO3-Extension für den Referenz-Bereich unter referenzen.typoniels.de

Namespace: TN Extensions

Issue-Tracker: 0 Issues

TN.Taildesign

Repository (Access required)

A small Extension to use my TailwindCSS-Extension a real world project ...

Namespace: TN Extensions

Issue-Tracker: 0 Issues

Ext Solr

Repository (Access required)

Fork for faster v11 Development

Namespace: TN Extensions

Issue-Tracker: 0 Issues

TN.Seminars

Repository (Access required)

This repository contains my seminar extension for easy and fast booking of events on my TYPO3 website. The extension is currently still under development. Stay tuned.

Namespace: TN Extensions

Issue-Tracker: 0 Issues

TN.Search

Suchlösung auf Basis von ElasticSearch (AppSearch) für TYPO3 mit Import-Maßnahmen für TYPONiels

Namespace: TN Extensions

Issue-Tracker: 0 Issues

TN.BrandManager

A TYPO3 extension with which living style guides and brand manuels can be created and hosted. The module is designed for agencies, but can also be used for a single company and offers frontend and backend components.

Namespace: TN Extensions

Issue-Tracker: 0 Issues

TN.Textbroker

A Extension to outsource the creation of content to the Textbroker Portal via the API

Namespace: TN Extensions

Issue-Tracker: 0 Issues

TN.Stundenplan

Repository (Access required)

A TYPO3 extension, with which digital timetables can be created for use in schools. The Extension make it possible to add classes, courses and lecturers/teachers can also be created.

Namespace: TN Extensions

Issue-Tracker: 0 Issues

TN.Quizmaster

Repository (Access required)

A TYPO3 extension, with which static quiz games can be created for use at trade fairs. In the Backend, questions, possible answers and context-sensitive messages can be created. Export is possible as an Electron Project and as Gitlab Pages.

Namespace: TN Extensions

Issue-Tracker: 0 Issues

Package Releases Monitor

Aktuell sind keine öffentlichen Releases im HD-Gitlab vorhanden.
Schauen Sie einfach zu einem späteren Zeitpunkt nochmal vorbei.

Meine eigenen Services

In diesem Bereich erhalten Sie Zugriff auf den Quellcode von privaten Projekten von Niels Langlotz, sowie zu einigen internen TYPONiels-Ressourcen.

Meine persönliche Website

Niels Langlotz Website

Herzlich Willkommen im Repository zu meiner persönlichen Website.

Mein Name ist Niels Langlotz, ich bin Full-Stack-Webentwickler mit Schwerpunkt TYPO3 aus Gifhorn und möchte mit diesem Projekt meinen Horizont im Bereich Javascript/JamStack erweitern. In diesem Repository befindet sich der Quellcode der entkoppelten Frontend-Architektur für die Website www.niels-langlotz.com. Die vormals auf TYPO3-Basis realisierte Seite folgt seit dem Soft-Relaunch im Jahr 2020 nun dem Headless-Ansatz.

Als Full-Stack-Webentwickler war meine Tätigkeit bisher stark geprägt von der Arbeit mit serverseitiger Programmierung mit PHP und Java. Daher war es mir insbesondere bei meiner persönlichen Website ein besonderes Anliegen, hier den Blick über den Tellerrand zu wagen, die gewohnte Komfortzone zu verlassen. So entschied ich mich, die Website ausschließlich mit Ansätzen umzusetzen, die bisher wenig in meinem Entwickler-Alltag Einklang gefunden haben und so stand für mich relativ schnell fest, die Umsetzung muss Headless erfolgen, als technische Grundlage sollte Javascript zum Einsatz kommen.

Da es sich bei dieser Seite um eine wirklich kleine TYPO3-Präsenz gehandelt hat, wäre sicher auch die Integration der Inhalte via JSON-Api direkt aus TYPO3 eine gute Idee gewesen, doch dafür war dann mein Wunsch, sowohl Frontend wie Backend einmal auszutauschen, zu stark. So kommt nun das Headless CMS Cockpit als Backend zum Einsatz. Weitere Informationen zum CMS erhalten Sie unter getcockpit.com.

Neugierig auf das Ergebnis?

Schauen Sie gerne mal unter www.niels-langlotz.com vorbei.

Hauptziele der Website

Die Website soll in erster Linie dazu dienen, Interessenten einen kurzen Einblick zu meiner Person und meinen Dienstleistungen im Allgemeinen zu geben, Raum für das Austesten von neuen Funktionen und Methoden bieten sowie eine Plattform für die Veröffentlichung von Beiträgen ohne thematischen Bezug zu TYPONiels schaffen.

Schaffung einer leichtgewichtigen Struktur, die einen (agilen) kontinuierlichen Relaunch ermöglicht und als Basis für weitere Side-Projekte genutzt werden kann.

Blogbeiträge zur Entwicklung dieser Website

Den Relaunch der Website von einer klassischen CMS-Website hin zur Headless-Architektur mit automatisiertem Deployment habe ich mit folgenden Beiträgen im Blog begleitet:

Website lokal testen

Dieses Repository klonen
git clone https://www.halle-development.com/langlotzn/persoenliche-website.git Website

Ins Verzeichnis wechseln
cd Website

Projekt installieren
yarn install

Environment-Variablen hinterlegen
Für Cockpit CMS müssen diese Vars in einer .env Datei hinterlegt werden.

COCKPIT_BaseUrl=https://cockpit.typoniels.de COCKPIT_Token=9a1744cbb4740081b74bdf7c54eb35

Live-Server starten
yarn run develop

Website im Browser öffnen
http://localhost:8000/

Integrierter GraphQL-Browser
http://localhost:8000/__graphql

Frontend-Tests mit Cypress ausführen
yarn run cypress:components

Funktionen der Website

[x] Statische Generierung und Hosting mit Gitlab Pages
[x] Blog/Projekte mit Übersicht und Detail-Ansicht
[x] Anpassbare Filter und Paginierung
[x] Techradar-Einbindung
[x] Speaker-Deck Einbindung
[x] Dark/Light-Modus
[ ] Agolia Suche (Aktuell in der Entwicklung)
[ ] TYPO3-Integration (Aktuell in der Entwicklung)
Tech-Stack

Typescript, Gatsby (React), React Hooks, Cockpit CMS
Gitlab CI/CD, GraphQL, Tailwind, Cypress

Persönliche Website

Repository

Meine ganz persönliche Website unter www.niels-langlotz.com

Namespace: Niels Langlotz

Issue-Tracker: 1 Issue

Meine Slides

Repository

In diesem Repository finden Sie bald alle Slides meiner Präsentationen vorzugsweise als slidev-Project (https://sli.dev).

Namespace: Niels Langlotz

Issue-Tracker: 1 Issue

Technology Radar

Baue dein eigenes Techradar

A static site generator for my Technology Radar based on ReactJS

**Define Enviorement Variables for Connection to Cockpit CMS** COCKPIT_Token=************************ COCKPIT_BaseUrl************************

Technologie Radar

Repository

Im Technologie-Radar erhalten Sie einen Einblick in meine Werkzeugkiste als Webentwickler | Erfahren Sie mehr unter https://radar.niels-langlotz.com

Namespace: TYPONiels Stuff

Issue-Tracker: 0 Issues

ThinkDigital Frontend

Repository (Access required)

Frontend-Komponenten für meinen ThinkDigital-Blog unter www.typoniels.de/thinkdigital/

Namespace: ThinkDigital Projekt

Issue-Tracker: 0 Issues

TYPONiels Frontend

Repository

Frontend-Komponenten für die TYPONiels Präsenzen | www.typoniels.de

Namespace: TYPONiels Stuff

Issue-Tracker: 0 Issues

Elasticsearch Frontend

Repository

React APP with ELK-Backend

Namespace: TYPONiels Stuff

Issue-Tracker: 0 Issues

Package Releases Monitor

Aktuell sind keine öffentlichen Releases im HD-Gitlab vorhanden.
Schauen Sie einfach zu einem späteren Zeitpunkt nochmal vorbei.

Zutat	Backzeit	Backstube	Backanweisungen
Cookie-Geheimzutat	1 Jahr	TYPONiels HTML	Speichert Ihre Einwilligung zur Verwendung von Cookies.
TYPO3 Benutzer (Login)	Session	TYPONiels HTTP	Ordnet Ihren Browser einer Session auf dem Server zu. Dies beeinflusst nur die Inhalte, die Sie sehen und wird von uns nicht ausgewertet oder weiterverarbeitet.

Zutat	Backzeit	Backstube	Backanweisungen
Benutzer ID	13 Monate	Matomo HTML	Wird verwendet, um ein paar Details über den Benutzer wie die eindeutige Besucher-ID zu speichern.
Referrer	6 Monate	Matomo HTML	Wird benutzt, um die Informationen der Herkunftswebsite des Benutzers zu speichern.
Session des Benutzers	30 Minuten	Matomo HTML	Kurzzeitiges Cookie, um vorübergehende Daten des Besuchs zu speichern.
Daten der Session	30 Minuten	Matomo HTML	Kurzzeitiges Cookie, um vorübergehende Daten des Besuchs zu speichern.
Temporäres Daten-Objekt	30 Minuten	Matomo HTML	Kurzzeitiges Cookie, um vorübergehende Daten des Besuchs zu speichern.
AdSense Audit	3 Monate	Google HTML	Wird von Google AdSense zum Experimentieren mit Werbungseffizienz auf Webseiten verwendet.
AMP Token	1 Jahr	Google HTML	Enthält ein Token, das verwendet werden kann, um eine Client-ID vom AMP-Client-ID-Service abzurufen. Andere mögliche Werte zeigen Opt-out, Anfrage im Gange oder einen Fehler beim Abrufen einer Client-ID vom AMP Client ID Service an.
DoubleClick Kennung	2 Jahre	Google HTML	Wird von DoubleClick (Google Tag Manager) verwendet, um die Besucher nach Alter, Geschlecht oder Interessen zu identifizieren.
Umfrage-Einladung	365 Tage	Hotjar HTML	Hotjar-Cookie, das gesetzt wird, sobald ein Besucher mit einem Einladungsmodal für eine Umfrage über externe Links interagiert. Es wird verwendet, um sicherzustellen, dass dieselbe Einladung nicht erneut angezeigt wird, wenn sie bereits angezeigt wurde.
Umfrage abgeschlossen	365 Tage	Hotjar HTML	Hotjar-Cookie, das gesetzt wird, sobald ein Besucher eine Umfrage mit dem Vor-Ort-Umfrage-Widget abgeschlossen hat. Es wird verwendet, um sicherzustellen, dass die gleiche Umfrage nicht erneut angezeigt wird, wenn sie bereits ausgefüllt wurde.
Umfrage (FeedbackMessage)	365 Tage	Hotjar HTML	Hotjar-Cookie, das gesetzt wird, sobald ein Besucher ein Vor-Ort-Umfrage-Widget minimiert. Es wird verwendet, um sicherzustellen, dass das Widget minimiert bleibt, wenn der Besucher durch Ihre Website navigiert.
Feedback-Formular minimiert	365 Tage	Hotjar HTML	Hotjar-Cookie, das gesetzt wird, wenn ein Besucher das eingehende Feedback minimiert oder vervollständigt. Dies geschieht, damit das eingehende Feedback sofort als minimiert geladen wird, wenn der Besucher zu einer anderen Seite navigiert, auf der es angezeigt werden soll.
Benutzer-ID	365 Tage	Hotjar HTML	Hotjar-Cookie, das gesetzt wird, wenn der Kunde zum ersten Mal auf einer Seite mit dem Hotjar-Skript landet. Es wird verwendet, um die Hotjar-Benutzer-ID, die für diese Seite eindeutig ist, im Browser zu speichern. Auf diese Weise wird sichergestellt, dass das Verhalten bei nachfolgenden Besuchen der gleichen Website der gleichen Benutzer-ID zugeordnet wird.
Letzte Aktivität	Session	Hotjar HTML	Diese sollte sich im Session-Speicher befinden (im Gegensatz zu Cookies). Dieser wird aktualisiert, wenn eine Besucheraufzeichnung beginnt und wenn Daten über den WebSocket gesendet werden (der Besucher führt eine Aktion aus, die Hotjar aufzeichnet).
TLD-Test	Session	Hotjar HTML	Wenn das Hotjar-Skript ausgeführt wird, versuchen wir, den generischsten Cookie-Pfad zu bestimmen, den wir anstelle des Hostnamens der Seite verwenden sollten. Dies geschieht, damit Cookies über Subdomains hinweg gemeinsam genutzt werden können (falls zutreffend). Um dies zu bestimmen, versuchen wir, das Cookie _hjTLDTest für verschiedene URL-Teilstring-Alternativen zu speichern, bis es fehlschlägt. Nach dieser Prüfung wird das Cookie entfernt.
Feedback Benutzerattribute	Session	Hotjar HTML	Benutzerattribute, die über die Hotjar-Identify-API gesendet werden, werden für die Dauer der Sitzung zwischengespeichert, um zu wissen, wann sich ein Attribut geändert hat und aktualisiert werden muss.
Benutzerattribute (Cached)	Session	Hotjar HTML	Dieses Cookie speichert Benutzerattribute, die über die Hotjar-Identify-API gesendet werden, wenn der Benutzer nicht in der Probe ist. Diese Attribute werden nur gespeichert, wenn der Benutzer mit einem Hotjar-Feedback-Tool interagiert.
LocalStorage-Test	365 Tage	Hotjar HTML	Dieses Cookie wird verwendet, um zu prüfen, ob das Hotjar-Tracking-Skript die lokale Speicherung nutzen kann. Wenn dies der Fall ist, wird in diesem Cookie ein Wert von 1 gesetzt. Die in_hjLocalStorageTest gespeicherten Daten haben keine Ablaufzeit, aber sie werden fast sofort nach ihrer Erstellung gelöscht.
Page-Limit	30 Minuten	Hotjar HTML	Dieses Cookie wird gesetzt, um Hotjar mitzuteilen, ob dieser Besucher in die durch das Seitenaufruflimit Ihrer Website definierte Datenerfassung einbezogen ist.
Session-Limit	30 Minuten	Hotjar HTML	Dieses Cookie wird gesetzt, um Hotjar wissen zu lassen, ob dieser Besucher in der durch das tägliche Sitzungslimit Ihrer Website definierten Datenerfassung enthalten ist.
Session Prozess Flag	30 Minuten	Hotjar HTML	Dieses Cookie wird verwendet, um die erste Seitenaufrufsitzung eines Benutzers zu erkennen. Dies ist ein Wahr/Falsch-Flag, das durch das Cookie gesetzt wird.