tessl/npm-mantine--ds

Internal Mantine components used on *.mantine.dev websites including Demo, MantineLogo, SearchControl, HeaderControl, and SocialButton components

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Configuration

Name: tessl/npm-mantine--ds
Author: tessl

Constants and configuration objects for consistent branding, external links, and color schemes across Mantine properties.

Capabilities

meta

Central configuration object containing all external links, brand colors, and site metadata used throughout Mantine properties.

/**
 * Central configuration object with external links and brand settings
 * Contains all URLs, colors, and metadata used across Mantine websites
 */
interface MetaConfig {
  /** Main documentation website URL */
  docsLink: string;
  /** Mantine UI components website URL */
  uiLink: string;
  /** Discord community server invite URL */
  discordLink: string;
  /** Official Twitter account URL */
  twitterLink: string;
  /** NPM organization page URL */
  npmLink: string;
  /** Discord brand color hex code */
  discordColor: string;
  /** Twitter brand color hex code */
  twitterColor: string;
  /** Collection of GitHub-related URLs */
  gitHubLinks: {
    /** Main Mantine repository URL */
    mantine: string;
    /** Mantine UI website repository URL */
    mantineUi: string;
    /** GitHub Discussions URL */
    discussions: string;
    /** Mantine organization URL */
    organization: string;
    /** Releases page URL */
    releases: string;
  };
}

const meta: MetaConfig;

Usage Examples:

import { meta } from "@mantine/ds";

// Link to documentation
function DocsLink() {
  return (
    <a href={meta.docsLink} target="_blank" rel="noopener noreferrer">
      View Documentation
    </a>
  );
}

// Community links
function CommunitySection() {
  return (
    <div>
      <a href={meta.discordLink}>Join Discord</a>
      <a href={meta.twitterLink}>Follow on Twitter</a>
      <a href={meta.gitHubLinks.discussions}>GitHub Discussions</a>
    </div>
  );
}

// Styled with brand colors
function BrandedButton() {
  return (
    <button 
      style={{ 
        backgroundColor: meta.discordColor,
        color: 'white'
      }}
      onClick={() => window.open(meta.discordLink)}
    >
      Join our Discord
    </button>
  );
}

// Development links
function DeveloperResources() {
  return (
    <div>
      <h3>Developer Resources</h3>
      <ul>
        <li><a href={meta.gitHubLinks.mantine}>Source Code</a></li>
        <li><a href={meta.gitHubLinks.releases}>Releases</a></li>
        <li><a href={meta.npmLink}>NPM Packages</a></li>
        <li><a href={meta.uiLink}>UI Components</a></li>
      </ul>
    </div>
  );
}

// Access nested values
const mainRepoUrl = meta.gitHubLinks.mantine;
const brandColor = meta.discordColor; // '#5865f2'

Constants Reference

The meta object contains the following constant values:

Website Links:

docsLink: 'https://mantine.dev'
uiLink: 'https://ui.mantine.dev/'
npmLink: 'https://www.npmjs.com/org/mantine'

Social Media:

discordLink: 'https://discord.gg/wbH82zuWMN'
twitterLink: 'https://twitter.com/mantinedev'

Brand Colors:

discordColor: '#5865f2'
twitterColor: '#1C8CD8'

GitHub Links:

gitHubLinks.mantine: 'https://github.com/mantinedev/mantine'
gitHubLinks.mantineUi: 'https://github.com/mantinedev/ui.mantine.dev'
gitHubLinks.discussions: 'https://github.com/mantinedev/mantine/discussions'
gitHubLinks.organization: 'https://github.com/mantinedev'
gitHubLinks.releases: 'https://github.com/mantinedev/mantine/releases'

Types

interface MetaConfig {
  docsLink: string;
  uiLink: string;
  discordLink: string;
  twitterLink: string;
  npmLink: string;
  discordColor: string;
  twitterColor: string;
  gitHubLinks: GitHubLinks;
}

interface GitHubLinks {
  mantine: string;
  mantineUi: string;
  discussions: string;
  organization: string;
  releases: string;
}