### Run Development Server with npm or Yarn Source: https://github.com/charlie85270/tail-kit/blob/main/README.md This snippet demonstrates how to start the development server for the project using npm or yarn. It allows for live preview and hot-reloading during development. ```bash npm run dev # or yarn dev ``` -------------------------------- ### Install Dependencies with npm or Yarn Source: https://github.com/charlie85270/tail-kit/blob/main/README.md This snippet shows how to install project dependencies using either npm or yarn. It's a common step in setting up a Node.js project. ```bash npm install # or yarn install ``` -------------------------------- ### Lint Code with Yarn Source: https://github.com/charlie85270/tail-kit/blob/main/CONTRIBUTING.md This command is used to ensure the code adheres to the project's linting standards before submitting a pull request. It requires Yarn to be installed. ```shell yarn lint ``` -------------------------------- ### Add New Component Section in Tail-Kit Source: https://github.com/charlie85270/tail-kit/blob/main/README.md This example demonstrates the directory structure for adding a new component section and category in Tail-Kit. It shows where to place the section directory, the index.tsx file for descriptions, and the category directory containing component files. ```bash ├── components ├── kit ├── components ├── MyNewSection // section directory index.tsx // section description file ├── MyCategory // category directory MyComponent.tsx // My component source file MyComponent2.tsx // My component source file .... ├── templates ├── layout ├── site ├── ... └── ... ``` -------------------------------- ### Yarn Lock File Source: https://github.com/charlie85270/tail-kit/blob/main/README.md The yarn.lock file records the exact versions of npm dependencies installed for a project, ensuring consistent installations. It is automatically generated and should not be edited directly. ```json // yarn-lock.json // This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. (You won’t change this file directly). ``` -------------------------------- ### ComponentLayout Usage for Component Preview Source: https://github.com/charlie85270/tail-kit/blob/main/README.md Shows an example of an index.tsx file for a 'toggle' category, demonstrating how to use the `ComponentLayout` component to wrap a React component (`FormSubscribe`). This enables features like live editing and dark mode switching. ```JSX import React, { FC } from "react"; import AppLayout from "../../../components/layout/AppLayout"; import ComponentLayout from "../../../components/layout/ComponentLayout"; import SectionHeader from "../../../components/site/header/SectionHeader"; import FormSubscribe from "../../../components/kit/components/form/layout/FormSubscribe"; const TogglePage: FC = () => { return ( } component={FormSubscribe} /> ); }; export default TogglePage; ``` -------------------------------- ### Build Static Site with npm or Yarn Source: https://github.com/charlie85270/tail-kit/blob/main/README.md This snippet shows the commands to build the static version of the site using either npm or yarn. This is typically done before deployment. ```bash npm run build # or yarn build ``` -------------------------------- ### Create Category and Component Structure Source: https://github.com/charlie85270/tail-kit/blob/main/README.md Demonstrates the directory structure for creating new categories and the index.tsx file to list components within that category. It also explains how Next.js creates routes based on this structure. ```Markdown 1. Create your new directory in **pages/components/{yourCategoryName}** or **pages/templates/{yourCategoryName}**. It's inside this directory that we will put the category page code. 2. Create a **index.tsx** file on this new directory. It will contain all the components/templates that we want import and see in this category. See other category files for an example. 3. When index.tsx is created NextJs create a route for this category that we can see on : http://localhost:3000/components/{yourCategoryName} or http://localhost:3000/templates/{yourCategoryName} ``` -------------------------------- ### Tail-Kit Project File Structure Source: https://github.com/charlie85270/tail-kit/blob/main/README.md This snippet displays the hierarchical structure of the Tail-Kit project, highlighting key directories and files such as node_modules, public, pages, components, and configuration files. ```bash . ├── node_modules ├── public ├── pages ├── components ├── kit ├── components ├── templates ├── layout ├── site ├── utils ├── editorTheme.tsx ├── global.css ├── LICENSE ├── next.config.js ├── tailwind.config.js ├── package.json ├── README ├── tsconfig.json ├── .gitignore └── yarn.lock.json ``` -------------------------------- ### Editor Theme Configuration (TypeScript) Source: https://github.com/charlie85270/tail-kit/blob/main/README.md The editorTheme.tsx file contains the theme configuration for code previews, including colors. It references prism-react-renderer for theming details. ```typescript // editorTheme.tsx // This file is the configuration theme (colors) for the components code preview. See [react-prism](https://github.com/FormidableLabs/prism-react-renderer#theming) for more details ``` -------------------------------- ### npm Package Manifest Source: https://github.com/charlie85270/tail-kit/blob/main/README.md The package.json file serves as a manifest for Node.js projects, containing metadata and listing project dependencies. This snippet describes its role. ```json // package.json // A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project. ``` -------------------------------- ### TypeScript Project Configuration Source: https://github.com/charlie85270/tail-kit/blob/main/README.md The tsconfig.json file configures TypeScript projects, specifying root files and compiler options. Its presence indicates a TypeScript project root. ```json // tsconfig.json // The presence of a tsconfig.json file in a directory indicates that the directory is the root of a TypeScript project. The tsconfig.json file specifies the root files and the compiler options required to compile the project. ``` -------------------------------- ### Next.js Configuration File Source: https://github.com/charlie85270/tail-kit/blob/main/README.md The next.config.js file is used for configuring Next.js applications. This snippet represents a default configuration. ```javascript // next.config.js // This file contain all the nextJS configuration. Here we use the default one. ``` -------------------------------- ### Global CSS File Source: https://github.com/charlie85270/tail-kit/blob/main/README.md The global.css file holds custom CSS for the application, including styles for animations on the home page. This snippet describes its purpose. ```css // global.css // This css file contain all the 'custom' css use for the app (home page animation) ``` -------------------------------- ### Tail-kit CSS Styling Source: https://github.com/charlie85270/tail-kit/blob/main/public/sitemap.htm This CSS code defines the base styling for the Tail-kit website, including layout, typography, and element-specific styles for elements like headers, footers, tables, and lists. It ensures a consistent and visually appealing user interface. ```CSS body, head, #xsg {margin:0px 0px 0px 0px; line-height:22px; color:#666666; width:100%; padding:0px 0px 0px 0px; font-family : Tahoma, Verdana, Arial, sans-serif; font-size:13px;} #xsg ul li a {font-weight:bold; } #xsg ul ul li a {font-weight:normal; } #xsg a {text-decoration:none; } #xsg p {margin:10px 0px 10px 0px;} #xsg ul {list-style:square; } #xsg li {} #xsg th { text-align:left; vertical-align:top; font-size: 0.9em;padding:2px 10px 2px 2px; border-bottom:1px solid #CCCCCC; border-collapse:collapse;} #xsg td { text-align:left; vertical-align:top;font-size: 0.9em; padding:2px 10px 2px 2px; border-bottom:1px solid #CCCCCC; border-collapse:collapse;} #xsg .title {font-size: 0.9em; color:#132687; display:inline;} #xsg .url {font-size: 0.7em; color:#999999;} #xsgHeader { width:100%; float:left; margin:0px 0px 5px 0px; border-bottom:2px solid #132687; } #xsgHeader h1 { padding:0px 0px 0px 20px ; float:left;} #xsgHeader h1 a {color:#132687; font-size:14px; text-decoration:none;cursor:default;} #xsgBody {padding:10px;float:left;} #xsgFooter { color:#999999; width:100%; float:left; margin:20px 0px 15px 0px; border-top:1px solid #999999;padding: 10px 0px 10px 0px; } #xsgFooter a {color:#999999; font-size:11px; text-decoration:none; } #xsgFooter span {color:#999999; font-size:11px; text-decoration:none; margin-left:20px; } ``` -------------------------------- ### Tailwind CSS Configuration File Source: https://github.com/charlie85270/tail-kit/blob/main/README.md The tailwind.config.js file is used for configuring Tailwind CSS. This snippet indicates where Tailwind configurations are stored. ```javascript // tailwind.config.js // This file contain all the Tailwind configuration. ``` -------------------------------- ### Git Ignore File Source: https://github.com/charlie85270/tail-kit/blob/main/README.md The .gitignore file specifies untracked files that Git should ignore, preventing them from being included in version history. This snippet describes its function. ```bash // .gitignore // This file tells git which files it should not track / not maintain a version history for. ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.