npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

textuality-components

v0.1.0

Published

Components for Textuality CMS

Downloads

1,771

Readme

Textuality Components

A collection of reusable components for Textuality CMS Simplify development with pre-built UI components tailored to work seamlessly with the Textuality API and your CMS setup.


What is Textuality Components?

textuality-components provides essential, customizable components such as dateTime, image, location, and more. These components are designed to:

  • Accelerate development.
  • Maintain consistency across your CMS interfaces for Textuality CMS.

Features

  • 📦 Ready-to-Use Components: Predefined components like title, image, and shortText.
  • 🔗 Textuality API Ready: Use gatherer.tsx to integrate directly with the Textuality API for path and content management.
  • 🚀 Easy Setup: Install components into your project with a single command.
  • ⚙️ Customizable: Components are delivered as .tsx files, making them easy to modify for project-specific needs.

Installation

To install the components into your project, run the following command:

npx textuality-components

This command will:

  • Prompt you to confirm the installation.
  • Copy all Textuality components into your project's components/textuality directory.

Components Overview

| Component | Description | |----------------------|---------------------------------------------------------| | dateTime.tsx | A date and time picker/input. | | image.tsx | An image component for CMS uploads. | | location.tsx | Handles location-based data (e.g., London, Buckingham Palace). | | number.tsx | A numeric visualizer for CMS fields (e.g., stars, numbers). | | gatherer.tsx | Enables path management and connects to the API smoothly. | | richText.tsx | A rich text visualizer component. | | shortText.tsx | Input for short text fields. | | tags.tsx | A tagging system for categorizing content. | | title.tsx | A title input field for CMS entries. |


Usage

After running the npx textuality-components command, the components will be installed into:

your-project/
├── components/
│   └── textuality/
│       ├── dateTime.tsx
│       ├── image.tsx
│       ├── location.tsx
│       ├── pather.tsx
│       ├── title.tsx
│       └── ...

You can import and use the components like this:

import Gatherer from '@/components/textuality/gatherer';

export default function Blog({ params }: BlogProps) {
    const { _blogid } = params; 

    const [blogs, setBlogs] = useState<any | null>(null);

    useEffect(() => {
        fetch(`/api/textuality/specific?blogid=${_blogid}`)
            .then((res) => {
                if (!res.ok) {
                    throw new Error("Network response was not ok");
                }
                return res.json();
            })
            .then((data) => {
                if (data.error) {
                    console.error(data.error);
                } else {
                    setBlogs(data.blogs);
                }
            })
            .catch((err) => {
                console.error('Error:', err);
            });
    }, [_blogid]);

    return(
        <div>
            {blogs ? <Gatherer blogs={blogs} /> : <p>Loading...</p>}
        </div>
    )
};

How gatherer.tsx Works

The gatherer.tsx component is a key part of the Textuality CMS integration. By using gatherer.tsx in your project:

  • It enables your CMS to connect to the Textuality API.
  • Allows seamless path and content management.
  • Ensures proper handling of content structures and routing.

Example Use Case: The gatherer.tsx component allows paths to be dynamically managed via the API, ensuring that all CMS content is properly routed and accessible.


Why Use Textuality Components?

  • Faster Development: Reuse pre-built components instead of coding from scratch.
  • API Integration: Components like gatherer.tsx directly interact with the Textuality API.
  • Consistency: Maintain a uniform UI and structure across your CMS.
  • Customizable: Modify the .tsx files as needed for your project requirements.

Dependencies

This package relies on the following libraries:

  • inquirer: For interactive prompts during installation.
  • ora: For clean and elegant loading indicators.

License

This project is licensed under the ISC License.


Author

Created and maintained by Harry Campbell & Hdev Group.


Feedback and Contributions

Contributions are welcome! If you have any issues or suggestions, feel free to:

  • Open an issue on the repository.
  • Submit a pull request.

Let me know if you need additional sections, such as troubleshooting or contribution guidelines! 🚀