Overview of Nextra framework
Nextra is a framework built on top of Next.js designed for creating content-focused websites. It leverages Next.js features while providing specialized tools to easily create content using Markdown.
Nextra Documentation
website·Indexed 30 days ago
https://hyperse-io.github.io/trackA framework built on top of Next.js for creating content-focused websites. Features include support for MDX, TypeScript, Tailwind CSS, LaTeX (via KaTeX), Mermaid diagrams, and a built-in search engine. Version 4.0 is available.
What's inside Nextra
Overview of the GoogleAdapter plugin for @hyperse/track
The GoogleAdapter plugin allows developers to integrate Google Analytics and Google Ads event tracking into a @hyperse/track setup. It provides a unified interface to send events to both platforms, includes TypeScript definitions for type safety, and supports tracking page views, form submissions, and user interactions.Overview of Track data collection library
Track is a TypeScript-based library designed for efficient and scalable data collection in web applications. It is optimized for the front-end to ensure that data gathering (from DOM elements, user inputs, and network requests) does not negatively impact user experience or application performance. It provides strong typing and type inference to reduce runtime errors and is compatible with popular frameworks such as React, Vue, and Angular.Overview of Nextra framework features
Nextra is a flexible site generation framework built with Next.js and MDX. It provides several built-in capabilities for documentation and websites:
- Optimized Assets: Automatically converts Markdown links and images to
next/linkandnext/imageto prevent layout shift and slow navigation. - Syntax Highlighting: Uses Shiki for performant, build-time syntax highlighting.
- Full-Text Search: Zero-config search powered by Pagefind, which indexes content automatically at build-time.
- Hybrid Rendering: Supports Next.js Server Components, Client Components, and Incremental Static Regeneration (ISR) within Markdown content.
- Accessibility (A11y): Respects system settings for 'Increase Contrast' and 'Reduce Motion'.
- MDX 3 Support: Allows the use of React components directly inside Markdown files.
- Optimized Assets: Automatically converts Markdown links and images to
Track Facebook Events donation events
Use the@hyperse-hub/track-plugin-facebookplugin to track when a person donates funds to an organization or cause. The donation event parameters are optional and can be defined by the user.npm install @hyperse-hub/track-plugin-facebookTrack 'Find Location' events with Facebook Events plugin
Use the 'Find Location' event from the@hyperse-hub/track-plugin-facebookplugin to track instances where a user searches for a physical store location via a website or app, indicating an intention to visit.Create a tracking adapter using AdapterBuilder
TheAdapterBuilderclass is a factory used to create a new adapter instance for tracking events. It allows developers to configure the adapter's behavior through a series of hooks that define how events are processed. The process concludes with the.build()method, which returns the configured adapter instance.const adapter = adapterBuilder.build();Track 'Add To Wishlist' events using @hyperse-hub/track-plugin-common
The 'Add To Wishlist' event signifies that an item was added to a wishlist. It is used to identify popular gift items within an application. This event is provided by the@hyperse-hub/track-plugin-commonplugin.Track page view events using @hyperse-hub/track-plugin-common
The Page View event is used to indicate that a user has viewed a web page. It captures essential metadata about the page and the client's environment.Define product details using the standard_goods_item type
Thestandard_goods_itemtype from@hyperse-hub/track-plugin-commonis used to provide detailed information about a product. To be valid, an item must include at least one ofitem_idoritem_name.interface StandardGoodsItem { item_id?: string; // Required if item_name is missing item_name?: string; // Required if item_id is missing affiliation?: string; // Supplying company or store location coupon?: string; // Item-level coupon code discount?: number; // Unit monetary discount index?: number; // Position in a list item_brand?: string; item_category?: string; // Primary category item_category2?: string; // Second category hierarchy item_category3?: string; // Third category hierarchy item_category4?: string; // Fourth category hierarchy item_category5?: string; // Fifth category hierarchy item_list_id?: string; // ID of the list containing the item item_list_name?: string; // Name of the list containing the item item_variant?: string; // Unique code or description for item options location_id?: string; // Physical store location (e.g., Google Place ID) price?: number; // Unit price (discounted price if applicable) quantity?: number; image_url?: string; url?: string; // Product page URL compare_at_price?: number; // Original price for comparison row_total?: number; // Total price (price * quantity) }Core architecture of @hyperse/track
The @hyperse/track library uses a composable architecture to manage analytics integration. Key components include:
BaseAdapter: The foundation for creating analytics adapters.AdapterBuilder: Used to construct and configure specific platform adapters.TrackBuilder: The primary API for integrating the tracking engine into modern stacks like React.
Configure parameters for Find Location event
The 'Find Location' event supports optional parameters that can be defined by the user to provide additional context about the location search.