Full Code of ritterim/skellyCSS for AI

Repository: ritterim/skellyCSS
Branch: main
Commit: fffd04428ed8
Files: 21
Total size: 43.7 KB

Directory structure:
gitextract_9np7qz46/

├── .github/
│   ├── CODEOWNERS
│   └── workflows/
│       ├── pr-build.yml
│       ├── pr-merged.yml
│       └── version-tag-build-master.yml
├── .gitignore
├── .sassrc
├── LICENSE
├── README.md
├── build.cmd
├── examples/
│   ├── blog-post.html
│   └── index.html
├── index.html
├── main.js
├── package/
│   ├── LICENSE
│   ├── README.md
│   └── package.json
├── package.json
├── postcss.config.js
├── src/
│   ├── index.js
│   └── style.scss
└── vite.config.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .github/CODEOWNERS
================================================
# https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-code-owners

/.github/** @ritterim/GitGuardians


================================================
FILE: .github/workflows/pr-build.yml
================================================
name: PR Build

permissions:
  contents: read
  packages: read

on:

  # https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#pull_request
  # By default, a workflow only runs when a pull_request event's activity type is opened, synchronize, or reopened.
  pull_request:
    types: [ opened, synchronize, reopened, labeled, unlabeled ]
    branches:
      - main

jobs:

  pr-build:
    uses: ritterim/public-github-actions/.github/workflows/npm-packages-pr-build.yml@v1.16.5
    #uses: ./.github/workflows/npm-packages-pr-build.yml
    with:
      always_increment_patch_version: true
      npm_package_name: skellycss
      run_tests: false


================================================
FILE: .github/workflows/pr-merged.yml
================================================
name: PR Merged

permissions:
  contents: read
  id-token: write
  packages: read

on:

  # https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#pull_request
  # By default, a workflow only runs when a pull_request event's activity type is opened, synchronize, or reopened.
  # We want to run on 'closed' to trigger, but we also have to check if it was merged.
  # That check is: if: github.event.pull_request.merged == true
  pull_request_target:
    types: [ closed ]
    branches:
      - main

jobs:

  npm-packages-pr-create-tag:
    uses: ritterim/public-github-actions/.github/workflows/npm-packages-pr-create-tag-jfrog.yml@v1.16.5
    #uses: ./.github/workflows/npm-packages-pr-create-tag-jfrog.yml
    if: github.event.pull_request.merged == true
    secrets:
      gh_actions_secret_passing_passphrase: ${{ secrets.ACTIONS_SECRET_PASSING_PASSPHRASE }}
      gh_app_private_key: ${{ secrets.RIMDEV_NPM_RELEASES_APP_PRIVATE_KEY }}
    with:
      always_increment_patch_version: true
      gh_app_id: ${{ vars.RIMDEV_NPM_RELEASES_APP_APPID }}
      jfrog_api_base_url: ${{ vars.JFROG_API_BASE_URL }}
      jfrog_artifactory_repository: "${{ vars.JFROG_NPM_PACKAGE_REPO_BASENAME }}-draft"
      jfrog_audit_xray_watch_list: ${{ vars.JFROG_AUDIT_XRAY_WATCH_LIST }}
      jfrog_build_basename: ${{ vars.JFROG_BUILD_BASENAME }}
      jfrog_npm_feed_repo: ${{ vars.JFROG_ARTIFACTORY_VIRTUAL_REPO_NPM }}
      jfrog_npm_package_repo_basename: ${{ vars.JFROG_NPM_PACKAGE_REPO_BASENAME }}
      jfrog_oidc_provider_name: ${{ vars.JFROG_GHA_OIDC_PROVIDER_NAME }}
      npm_package_name: skellycss
      run_tests: false


================================================
FILE: .github/workflows/version-tag-build-master.yml
================================================
name: Version Tag Build

permissions:
  contents: write
  id-token: write
  packages: write

on:
  push:
    # To limit whether this executes on a specific branch, you must adjust the allowed_branches input.
    # Specifying 'branches' here is a logical 'OR', not a logical 'AND'.
    tags:
      - v0.*

jobs:

  version-tag-build:
    uses: ritterim/public-github-actions/.github/workflows/npm-packages-release-on-tag-jfrog.yml@v1.16.5
    #uses: ./.github/workflows/npm-packages-release-on-tag-jfrog.yml
    secrets:
      npmjs_org_api_key: ${{ secrets.RITTERIM_NPMJS_PUBLISH_TOKEN }}
    with:
      allowed_branches: |
        main
      jfrog_api_base_url: ${{ vars.JFROG_API_BASE_URL }}
      jfrog_artifactory_repository: "${{ vars.JFROG_NPM_PACKAGE_REPO_BASENAME }}-prod"
      jfrog_audit_xray_watch_list: ${{ vars.JFROG_AUDIT_XRAY_WATCH_LIST }}
      jfrog_build_basename: ${{ vars.JFROG_BUILD_BASENAME }}
      jfrog_npm_feed_repo: ${{ vars.JFROG_ARTIFACTORY_VIRTUAL_REPO_NPM }}
      jfrog_npm_package_repo_basename: ${{ vars.JFROG_NPM_PACKAGE_REPO_BASENAME }}
      jfrog_oidc_provider_name: ${{ vars.JFROG_GHA_OIDC_PROVIDER_NAME }}
      npm_package_name: skellycss
      run_tests: false
      npmjs_org_access_public: true
      publish_to_npmjs_org: true


================================================
FILE: .gitignore
================================================
#Distribution
dist/

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage
*.lcov

# nyc test coverage
.nyc_output

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# TypeScript v1 declaration files
typings/

# TypeScript cache
*.tsbuildinfo

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env
.env.test

# parcel-bundler cache (https://parceljs.org/)
.cache

# Next.js build output
.next

# Nuxt.js build / generate output
.nuxt

# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and *not* Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public

# vuepress build output
.vuepress/dist

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

# TernJS port file
.tern-port

#Other Files
.DS_store

================================================
FILE: .sassrc
================================================
{
  "includePaths": ["node_modules"]
}

================================================
FILE: LICENSE
================================================
MIT License

Copyright (c) 2020 Ritter Insurance Marketing

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: README.md
================================================
<div style="display:flex; align-items:center; justify-content:center; height:300px;">
  <img src="images/fish-skeleton.png" />
</div>

# skellyCSS
A light-weight CSS framework to quickly implement skeletons into your projects.


<h2>Table of Contents</h2>

- [skellyCSS](#skellycss)
  - [Installation](#installation)
    - [npm](#npm)
    - [CSS](#css)
    - [JavaScript](#javascript)
  - [Quick Usage](#quick-usage)
  - [Usage](#usage)
    - [Headers](#headers)
    - [Paragraphs](#paragraphs)
    - [Line Width](#line-width)
    - [Alignment](#alignment)
    - [Images](#images)
      - [Sizes](#sizes)
      - [Shapes](#shapes)
    - [Animation](#animation)
  - [JavaScript Utility](#javascript-utility)
    - [JavaScript Data Attributes](#javascript-data-attributes)
      - [All Data Attributes](#all-data-attributes)

<br />

## Installation

### npm
To install via node package manager:
```shell
npm install @ritterim/skellycss
```

### CSS
Include the Skelly css file wherever you add your CSS:
``` html
<link rel="stylesheet" href="..@ritterim/skellycss/dist/style.css">
```

### JavaScript
Include the skelly.js file wherever you add your JavaScript:
``` html
<script src="..@ritterim/skellycss/dist/skelly.js"></script>
```

<br />

## Quick Usage
You can quickly get started using skellyCSS using the JavaScript utility, like so:
``` html
<h2 class="skeleton skeleton--md" data-animation="true"></h2>
<p class="skeleton" data-lines="4" data-animation="true"></p>
```
**See full [JavaScript Utility](#javascript-utility) docs below**

<br />

## Usage
Skeletons can be quickly added to any project with a few simple lines of code. 

### Headers
Apply the `skeleton` class to any type of header and it will automatically adjust to the font-size of the header stylings:

![Headers](images/headers.png)

``` html
<h1 class="skeleton"></h1>
<h2 class="skeleton"></h2>
<h3 class="skeleton"></h3>
<h4 class="skeleton"></h4>
<h5 class="skeleton"></h5>
<h6 class="skeleton"></h6>
```

<br />

### Paragraphs
You can create paragraph skeletons by applying the `skeleton` class to the paragraph tag, then including however many span tags you'd like with the `skeleton__line` class within the paragraph. In order to make the paragraph skeleton look more like a paragraph, the last line is set to 50% width.

![Paragraphs](images/paragraphs.png)
```html
<div>
  <p class="skeleton">
    <span class="skeleton__line"></span>
    <span class="skeleton__line"></span>
    <span class="skeleton__line"></span>
    <span class="skeleton__line"></span>
  </p>
</div>
```

<br />

### Line Width
You can adjust the line width by applying a size modifier class:
| Width | Modifier Class | 
| ------------ | ------------|
| Small, 25% | `.skeleton--sm` |
| Medium, 50% | `.skeleton--md` |
| Large, 75% | `.skeleton--lg` |
| Full, 100% | `.skeleton--full` |

![Line Widths](images/line-widths.png)

``` html
<h1 class="skeleton skeleton--sm"></h1>
<h1 class="skeleton skeleton--md"></h1>
<h1 class="skeleton skeleton--lg"></h1>
<h1 class="skeleton skeleton--full"></h1>
```

<br />

### Alignment
You can text align the skeleton using alignment modifier classes:

| Alignment | Modifier Class |
| ------------ | ------------|
| Left | `.skeleton--left` |
| Center | `.skeleton--center` |
| Right | `.skeleton--right` |

![Alignment](images/alignment.png)

``` html
<!-- Left Align -->
<p class="skeleton skeleton--left">
  <span class="skeleton__line"></span>
  <span class="skeleton__line"></span>
  <span class="skeleton__line"></span>
  <span class="skeleton__line"></span>
</p>

<!-- Center Align -->
<p class="skeleton skeleton--center">
  <span class="skeleton__line"></span>
  <span class="skeleton__line"></span>
  <span class="skeleton__line"></span>
  <span class="skeleton__line"></span>
</p>

<!-- Right Align -->
<p class="skeleton skeleton--right">
  <span class="skeleton__line"></span>
  <span class="skeleton__line"></span>
  <span class="skeleton__line"></span>
  <span class="skeleton__line"></span>
</p>
```

<br />

### Images
You can create an image skeleton by using the `.skeleton-image` class. By default this will apply the image skeleton at 100% height and width of the parent container.

#### Sizes
Here are some default sizes we have included for skeleton images:

| Size | Modifier Class |
| ------------ | ------------| 
| Small, 50x50 | `.skeleton-image--sm` |
| Medium, 100x100 | `.skeleton-image--md` |
| Large, 200x200 | `.skeleton-image--lg` |
| X-Large, 400x400 | `.skeleton-image--xl` |
| Full, 100% x 100% | `.skeleton-image--full` |

![Images](images/images.png)

``` html
<img class="skeleton-image skeleton-image--md" />
<img class="skeleton-image skeleton-image--sm" />
<img class="skeleton-image skeleton-image--lg" />
<img class="skeleton-image skeleton-image--xl" />
```

<br />

#### Shapes
You can also make different image shapes using shape modifier classes:

| Shape | Description | Modifier Class |
| ------------ |------------ | ------------| 
| Square | Sets the image aspect ratio to 1/1 (default) | `.skeleton-image--square` |
| Circle | Sets the border radius to 50% | `.skeleton-image--circle` |
| Landscape Rectangle | Sets the image aspect ratio to 4/3 | `.skeleton-image--landscape` |
| Portrait Rectangle | Sets the image aspect ratio to 3/4| `.skeleton-image--portrait` |
| Wide Rectangle | Sets the image aspect ratio to 16/9 | `.skeleton-image--wide` |
| Tall Rectangle | Sets the image aspect ratio to 9/16 | `.skeleton-image--tall` |

``` html
<div class="skeleton-image skeleton-image--lg skeleton-image--square"></div>
<div class="skeleton-image skeleton-image--lg skeleton-image--circle"></div>
<div class="skeleton-image skeleton-image--lg skeleton-image--landscape"></div>
<div class="skeleton-image skeleton-image--lg skeleton-image--portrait"></div>
<div class="skeleton-image skeleton-image--lg skeleton-image--wide"></div>
<div class="skeleton-image skeleton-image--lg skeleton-image--tall"></div>
```

<br />

### Animation
To add animation, add a `span.skeleton--animation` within the `.skeleton__line` elements in headers or paragaphs.

![Animation](images/animation.gif)

``` html
<div>
  <p class="skeleton">
    <span class="skeleton__line">
      <span class="skeleton--animation"></span>
    </span>
        <span class="skeleton__line">
      <span class="skeleton--animation"></span>
    </span>
    <span class="skeleton__line">
      <span class="skeleton--animation"></span>
    </span>
    <span class="skeleton__line">
      <span class="skeleton--animation"></span>
    </span>
  </p>
</div>
```

<br />

## JavaScript Utility
The easiest and our preferred way to add Skeletons is by using the included JavaScript utilities. 

On either a header tag or a paragraph tag, add the `skeleton` class and a `data-lines` attribute with the number of lines you'd like the skeleton to have:

``` html
<h2 class="skeleton skeleton--md" data-lines="2"></h2>
<p class="skeleton" data-lines="7"></p>
```

<br />

You can also give the skeleton animation by adding the `data-animation` attribute and setting it to `true`:

``` html
<h2 class="skeleton skeleton--md" data-animation="true"></h2>
<p class="skeleton" data-lines="7" data-animation="true"></p>
```

<br />

### JavaScript Data Attributes
You can alter the way skeleton looks by utilizing other data-attributes as well, including opacity and color:
``` html
<!-- Opacity -->
<h2 class="skeleton skeleton--md" data-animation="true"></h2>
<p class="skeleton" data-lines="7" data-opacity="0.3"></p>

<!-- Color -->
<h2 class="skeleton skeleton--md" data-animation="true"></h2>
<p class="skeleton" data-lines="7" data-color="tomato"></p>
```

#### All Data Attributes
| Attribute | Description | Type |
| ------------ |------------ | ------------| 
| `data-lines` | Determines how many lines to output | Integer |
| `data-animation` | Adds animation to the skeleton lines | Boolean |
| `data-opacity` | Sets the opacity of the skeleton lines (sets opacity between 0 and 1) | Float |
| `data-color` | Sets the color of the skeleton lines | Color |


================================================
FILE: build.cmd
================================================
@echo Off
pushd %~dp0
setlocal

:Build
call npm install
if %ERRORLEVEL% neq 0 goto BuildFail

if "%APPVEYOR%" equ "True" (
  echo *** Building Production [%APPVEYOR_REPO_BRANCH%] ***
  call npm run build

) else (
  echo *** Building Default ***
  call npm run serve
)

if %ERRORLEVEL% neq 0 goto BuildFail

goto BuildSuccess

:BuildFail
echo.
echo *** BUILD FAILED ***
goto End

:BuildSuccess
echo.
echo *** BUILD SUCCEEDED ***
goto End

:End
echo.
popd
exit /B %ERRORLEVEL%

================================================
FILE: examples/blog-post.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Blog Post</title>
  <link rel="stylesheet" href="../dist/skelly.css">

  <style>
    .container{
      width:95%;
      max-width:960px;
      margin:0 auto;
      display:flex;
      flex-flow:column;
    }

    @media (min-width:768px){
      .container{
        flex-flow:row;
      }
    }

    article{
      flex:3;
    }
    aside{
      flex:1;
    }

    @media (min-width:768px){
      article, aside{
        margin:0 1em;
      }
    }
    
    .block{
      margin-bottom:1em;
      padding:1em;
      border-bottom:2px solid #EFEFEF;
    }
    .block:last-child{
      border:0;
    }

    .card{
      flex:1;
      padding:1em;
      margin:1em;
      border:2px solid #EFEFEF;
    }
    .card img{
      margin-bottom:1em;
    }
  </style>
</head>
<body>
  <main class="container">
    <article>
      <h1 class="skeleton skeleton--sm" data-animation="true"></h1>
      <p class="skeleton" data-lines="4" data-animation="true"></p>
      <p class="skeleton" data-lines="6" data-animation="true"></p>
      <p class="skeleton" data-lines="3" data-animation="true"></p>
      <p class="skeleton" data-lines="7" data-animation="true"></p>
      <p class="skeleton" data-lines="2" data-animation="true"></p>
    </article>
    <aside>
      <div class="block">
        <h3 class="skeleton skeleton--md"></h3>
        <p class="skeleton" data-lines="3"></p>
      </div>

      <div class="block">
        <h3 class="skeleton skeleton--md"></h3>
        <p class="skeleton" data-lines="3"></p>
      </div>
    </aside>
  </main>

  <div class="container">
    <div class="card">
      <img class="skeleton-image skeleton-image--lg skeleton-image--landscape" />
      <h2 class="skeleton skeleton--md"></h2>
      <p class="skeleton" data-lines="3"></p>
    </div>
    <div class="card">
      <img class="skeleton-image skeleton-image--lg skeleton-image--landscape" />
      <h2 class="skeleton skeleton--md"></h2>
      <p class="skeleton" data-lines="3"></p>
    </div>
    <div class="card">
      <img class="skeleton-image skeleton-image--lg skeleton-image--landscape" />
      <h2 class="skeleton skeleton--md"></h2>
      <p class="skeleton" data-lines="3"></p>
    </div>
  </div>

  <script src="../dist/skelly.js"></script>
</body>
</html>

================================================
FILE: examples/index.html
================================================
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #container {
        box-sizing: border-box;
        width: 95%;
        max-width: 960px;
        margin: 0 auto;
      }

      #headers {
        margin: 1em 0 2em;
        border: 1px solid black;
        padding: 1em;
      }

      #headers .skeleton {
        margin-bottom: 0.5em;
      }

      #paragraphs {
        margin: 1em 0 2em;
        padding: 1em;
        border: 1px solid black;
      }

      #line-widths {
        margin: 1em 0 2em;
        padding: 1em;
        border: 1px solid black;
      }

      #alignment {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 1em;
        margin: 1em 0 2em;
        padding: 1em;
        border: 1px solid black;
      }

      #images {
        display: flex;
        justify-content: center;
        margin: 1em 0 2em;
        padding: 1em;
        border: 1px solid black;
      }

      #images img {
        margin: 1em;
      }

      #image-shapes {
        display: flex;
        margin: 1em 0 2em;
        padding: 1em;
        border: 1px solid black;
      }

      #image-shapes .image {
        flex: 1;
        margin: 1em;
        height: 300px;
        display:flex;
        align-items:center;
        justify-content: center;
      }

      #animation{
        margin: 1em 0 2em;
        padding: 1em;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <!-- Headers -->
      <div id="headers">
        <h1 class="skeleton"></h1>
        <h2 class="skeleton"></h2>
        <h3 class="skeleton"></h3>
        <h4 class="skeleton"></h4>
        <h5 class="skeleton"></h5>
        <h6 class="skeleton"></h6>
      </div>

      <!-- Paragraphs -->
      <div id="paragraphs">
        <p class="skeleton">
          <span class="skeleton__line"></span>
          <span class="skeleton__line"></span>
          <span class="skeleton__line"></span>
          <span class="skeleton__line"></span>
        </p>
      </div>

      <!-- Line Width -->
      <div id="line-widths">
        <h1 class="skeleton skeleton--sm"></h1>
        <h1 class="skeleton skeleton--md"></h1>
        <h1 class="skeleton skeleton--lg"></h1>
        <h1 class="skeleton skeleton--full"></h1>
      </div>

      <!-- Alignment -->
      <div id="alignment">
        <!-- Left Align -->
        <p class="skeleton skeleton--left">
          <span class="skeleton__line"></span>
          <span class="skeleton__line"></span>
          <span class="skeleton__line"></span>
          <span class="skeleton__line"></span>
        </p>

        <!-- Center Align -->
        <p class="skeleton skeleton--center">
          <span class="skeleton__line"></span>
          <span class="skeleton__line"></span>
          <span class="skeleton__line"></span>
          <span class="skeleton__line"></span>
        </p>

        <!-- Right Align -->
        <p class="skeleton skeleton--right">
          <span class="skeleton__line"></span>
          <span class="skeleton__line"></span>
          <span class="skeleton__line"></span>
          <span class="skeleton__line"></span>
        </p>
      </div>

      <div id="images">
        <img class="skeleton-image skeleton-image--sm" />
        <img class="skeleton-image skeleton-image--md" />
        <img class="skeleton-image skeleton-image--lg" />
        <img class="skeleton-image skeleton-image--xl" />
      </div>

      <div id="image-shapes">
        <div class="image">
          <img
            class="skeleton-image skeleton-image--lg skeleton-image--landscape"
          />
        </div>

        <div class="image">
          <img
            class="skeleton-image skeleton-image--lg skeleton-image--portrait"
          />
        </div>

        <div class="image">
          <img
            class="skeleton-image skeleton-image--lg skeleton-image--circle"
          />
        </div>
      </div>
    
      <div id="animation">
        <p class="skeleton">
          <span class="skeleton__line">
            <span class="skeleton--animation"></span>
          </span>
              <span class="skeleton__line">
            <span class="skeleton--animation"></span>
          </span>
          <span class="skeleton__line">
            <span class="skeleton--animation"></span>
          </span>
          <span class="skeleton__line">
            <span class="skeleton--animation"></span>
          </span>
        </p>
      </div>

    </div>


    <script src="../dist/skelly.js"></script>
  </body>
</html>


================================================
FILE: index.html
================================================
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* styling for index.html only, not included in package */
      body {
        font-family: sans-serif;
      }
      #title {
        margin-bottom: 2rem;
      }
      #container {
        --container-width: 120ch;

        width: min(var(--container-width), 100% - 3rem);
        margin-inline: auto;
      }

      #headers {
        margin: 1em 0 2em;
        border: 1px solid black;
        padding: 1em;
      }

      #headers .skeleton {
        margin-bottom: 0.5em;
      }

      .paragraphs {
        margin: 1em 0 2em;
        padding: 1em;
        border: 1px solid black;
      }

      #line-widths {
        margin: 1em 0 2em;
        padding: 1em;
        border: 1px solid black;
      }

      #alignment {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 1em;
        margin: 1em 0 2em;
        padding: 1em;
        border: 1px solid black;
      }

      #images {
        display: flex;
        gap: 1rem;
        justify-content: center;
        margin: 1em 0 2em;
        padding: 1em;
        border: 1px solid black;
      }

      #images img {
        margin: 1em;
      }

      #image-shapes {
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        margin: 1em 0 2em;
        gap:1rem;
        padding: 1em;
        border: 1px solid black;
      }

      @media screen and (min-width: 786px) {
        #image-shapes {
          flex-flow: row;
          flex-wrap: wrap;
        }
      }

      #image-shapes .image {
        margin: 1em;
        display: flex;
        flex-flow: column;
        gap: 1rem;
        height: 300px;
        align-items: center;
        justify-content: center;
      }

      #animation {
        margin: 1em 0 2em;
        padding: 1em;
        border: 1px solid black;
      }

      #opacity {
        background:#759FC1;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <h1 id="title">SkellyCSS</h1>
      <!-- Headers -->
      <h2>Headers</h2>
      <div id="headers">
        <h1 class="skeleton"></h1>
        <h2 class="skeleton"></h2>
        <h3 class="skeleton"></h3>
        <h4 class="skeleton"></h4>
        <h5 class="skeleton"></h5>
        <h6 class="skeleton"></h6>
      </div>

      <!-- Paragraphs -->
      <h2>Paragraphs</h2>
      <div id="paragraphs" class="paragraphs">
        <p class="skeleton" data-lines="6"></p>
      </div>

      <!-- Line Width -->
      <h2>Line Widths</h2>
      <div id="line-widths">
        <h3>Small</h3>
        <h1 class="skeleton skeleton--sm"></h1>
        <h3>Medium</h3>
        <h1 class="skeleton skeleton--md"></h1>
        <h3>Large</h3>
        <h1 class="skeleton skeleton--lg"></h1>
        <h3>Full</h3>
        <h1 class="skeleton skeleton--full"></h1>
      </div>

      <!-- Alignment -->
      <h2>Alignment</h2>
      <div id="alignment">
        <!-- Left Align -->
        <p class="skeleton skeleton--left">
          <span class="skeleton__line"></span>
          <span class="skeleton__line"></span>
          <span class="skeleton__line"></span>
          <span class="skeleton__line"></span>
        </p>

        <!-- Center Align -->
        <p class="skeleton skeleton--center">
          <span class="skeleton__line"></span>
          <span class="skeleton__line"></span>
          <span class="skeleton__line"></span>
          <span class="skeleton__line"></span>
        </p>

        <!-- Right Align -->
        <p class="skeleton skeleton--right">
          <span class="skeleton__line"></span>
          <span class="skeleton__line"></span>
          <span class="skeleton__line"></span>
          <span class="skeleton__line"></span>
        </p>
      </div>

      <h2>Images</h2>
      <div id="images">
        <div class="skeleton-image skeleton-image--sm"></div>
        <div class="skeleton-image skeleton-image--md"></div>
        <div class="skeleton-image skeleton-image--lg"></div>
        <div class="skeleton-image skeleton-image--xl"></div>
      </div>

      <h2>Image Shapes</h2>
      <div id="image-shapes">
        <div class="image">
          <h3>Square</h3>
          <div
            class="skeleton-image skeleton-image--lg skeleton-image--square"
          ></div>
        </div>

        <div class="image">
          <h3>Circle</h3>
          <div
            class="skeleton-image skeleton-image--lg skeleton-image--circle"
          ></div>
        </div>

        <div class="image">
          <h3>Landscape</h3>
          <div
            class="skeleton-image skeleton-image--lg skeleton-image--landscape"
          ></div>
        </div>

        <div class="image">
          <h3>Portrait</h3>
          <div
            class="skeleton-image skeleton-image--lg skeleton-image--portrait"
          ></div>
        </div>

        <div class="image">
          <h3>Wide</h3>
          <div
            class="skeleton-image skeleton-image--lg skeleton-image--wide"
          ></div>
        </div>

        <div class="image">
          <h3>Tall</h3>
          <div
            class="skeleton-image skeleton-image--lg skeleton-image--tall"
          ></div>
        </div>
      </div>

      <h2>Animation</h2>
      <div id="animation">
        <p class="skeleton">
          <span class="skeleton__line">
            <span class="skeleton--animation"></span>
          </span>
          <span class="skeleton__line">
            <span class="skeleton--animation"></span>
          </span>
          <span class="skeleton__line">
            <span class="skeleton--animation"></span>
          </span>
          <span class="skeleton__line">
            <span class="skeleton--animation"></span>
          </span>
        </p>
      </div>
      
      <h2>Opacity</h2>
      <div id="opacity" class="paragraphs">
        <p class="skeleton" data-lines="6" data-opacity="0.3"></p>
      </div>
      
      <h2>Color</h2>
      <div id="color" class="paragraphs">
        <p class="skeleton" data-lines="6" data-color="rebeccapurple"></p>
      </div>
    </div>


    <script type="module" src="/main.js"></script>
  </body>
</html>


================================================
FILE: main.js
================================================
import './src/style.scss';
import './src/index.js';


================================================
FILE: package/LICENSE
================================================
MIT License

Copyright (c) 2020 Ritter Insurance Marketing

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: package/README.md
================================================
<div style="display:flex; align-items:center; justify-content:center; height:300px;">
  <img src="images/fish-skeleton.png" />
</div>

# skellyCSS
A light-weight CSS framework to quickly implement skeletons into your projects.


<h2>Table of Contents</h2>

- [skellyCSS](#skellycss)
  - [Installation](#installation)
    - [CSS](#css)
    - [JavaScript](#javascript)
  - [Quick Usage](#quick-usage)
  - [Usage](#usage)
    - [Headers](#headers)
    - [Paragraphs](#paragraphs)
    - [Line Width](#line-width)
    - [Alignment](#alignment)
    - [Images](#images)
      - [Sizes](#sizes)
      - [Shapes](#shapes)
    - [Animation](#animation)
  - [JavaScript Utility](#javascript-utility)

<br />

## Installation
### CSS
Include the skelly.css file wherever you add your CSS:
``` html
<link rel="stylesheet" href="../dist/skelly.css">
```

### JavaScript
Include the skelly.js file wherever you add your JavaScript:
``` html
<script src="../dist/skelly.js"></script>
```

<br />

## Quick Usage
You can quickly get started using skellyCSS using the JavaScript utility, like so:
``` html
<h2 class="skeleton skeleton--md" data-animation="true"></h2>
<p class="skeleton" data-lines="4" data-animation="true">
```
**See full [JavaScript Utility](#javascript-utility) docs below**

<br />

## Usage
Skeletons can be quickly added to any project with a few simple lines of code. 

### Headers
Apply the `skeleton` class to any type of header and it will automatically adjust to the font-size of the header stylings:

![Headers](images/headers.png)

``` html
<h1 class="skeleton"></h1>
<h2 class="skeleton"></h2>
<h3 class="skeleton"></h3>
<h4 class="skeleton"></h4>
<h5 class="skeleton"></h5>
<h6 class="skeleton"></h6>
```

<br />

### Paragraphs
You can create paragraph skeletons by applying the `skeleton` class to the paragraph tag, then including however many span tags you'd like with the `skeleton__line` class within the paragraph. In order to make the paragraph skeleton look more like a paragraph, the last line is set to 50% width.

![Paragraphs](images/paragraphs.png)
```html
<div>
  <p class="skeleton">
    <span class="skeleton__line"></span>
    <span class="skeleton__line"></span>
    <span class="skeleton__line"></span>
    <span class="skeleton__line"></span>
  </p>
</div>
```

<br />

### Line Width
You can adjust the line width by applying a size modifier class:
| Width | Modifier Class | 
| ------------ | ------------|
| Small, 25% | `.skeleton--sm` |
| Medium, 50% | `.skeleton--md` |
| Large, 75% | `.skeleton--lg` |
| Full, 100% | `.skeleton--full` |

![Line Widths](images/line-widths.png)

``` html
<h1 class="skeleton skeleton--sm"></h1>
<h1 class="skeleton skeleton--md"></h1>
<h1 class="skeleton skeleton--lg"></h1>
<h1 class="skeleton skeleton--full"></h1>
```

<br />

### Alignment
You can text align the skeleton using alignment modifier classes:

| Alignment | Modifier Class |
| ------------ | ------------|
| Left | `.skeleton--left` |
| Center | `.skeleton--center` |
| Right | `.skeleton--right` |

![Alignment](images/alignment.png)

``` html
<!-- Left Align -->
<p class="skeleton skeleton--left">
  <span class="skeleton__line"></span>
  <span class="skeleton__line"></span>
  <span class="skeleton__line"></span>
  <span class="skeleton__line"></span>
</p>

<!-- Center Align -->
<p class="skeleton skeleton--center">
  <span class="skeleton__line"></span>
  <span class="skeleton__line"></span>
  <span class="skeleton__line"></span>
  <span class="skeleton__line"></span>
</p>

<!-- Right Align -->
<p class="skeleton skeleton--right">
  <span class="skeleton__line"></span>
  <span class="skeleton__line"></span>
  <span class="skeleton__line"></span>
  <span class="skeleton__line"></span>
</p>
```

<br />

### Images
You can create an image skeleton by adding the `.skeleton-image` class to an img tag -- do not include the `src` attribute. By default this will apply the image skeleton at 100% height and width of the parent container.

#### Sizes
Here are some default sizes we have included for skeleton images:

| Size | Modifier Class |
| ------------ | ------------| 
| Small, 50x50 | `.skeleton-image--sm` |
| Medium, 100x100 | `.skeleton-image--md` |
| Large, 200x200 | `.skeleton-image--lg` |
| X-Large, 400x400 | `.skeleton-image--xl` |
| Full, 100% x 100% | `.skeleton-image--full` |

![Images](images/images.png)

``` html
<img class="skeleton-image skeleton-image--md" />
<img class="skeleton-image skeleton-image--sm" />
<img class="skeleton-image skeleton-image--lg" />
<img class="skeleton-image skeleton-image--xl" />
```

<br />

#### Shapes
You can also make different image shapes using shape modifier classes:

| Shape | Description | Modifier Class |
| ------------ |------------ | ------------| 
| Landscape Rectangle | Sets the width of the image to 100% | `.skeleton-image--landscape` |
| Portrait Rectangle | Sets the height of the image to 100% | `.skeleton-image--portrait` |
| Circle | Sets the border radius to 50% | `.skeleton-image--circle` |

![Image Shapes](images/image-shapes.png)

``` html
<img class="skeleton-image skeleton-image--lg skeleton-image--landscape" />
<img class="skeleton-image skeleton-image--lg skeleton-image--portrait" />
<img class="skeleton-image skeleton-image--lg skeleton-image--circle" />
```

<br />

### Animation
To add animation, add a `span.skeleton--animation` within the `.skeleton__line` elements in headers or paragaphs.

![Animation](images/animation.gif)

``` html
<div>
  <p class="skeleton">
    <span class="skeleton__line">
      <span class="skeleton--animation"></span>
    </span>
        <span class="skeleton__line">
      <span class="skeleton--animation"></span>
    </span>
    <span class="skeleton__line">
      <span class="skeleton--animation"></span>
    </span>
    <span class="skeleton__line">
      <span class="skeleton--animation"></span>
    </span>
  </p>
</div>
```

<br />

## JavaScript Utility
The easiest and our preferred way to add Skeletons is by using the included JavaScript utilities. 

On either a header tag or a paragraph tag, add the `skeleton` class and a `data-lines` attribute with the number of lines you'd like the skeleton to have:

``` html
<h2 class="skeleton skeleton--md" data-lines="2"></h2>
<p class="skeleton" data-lines="7"></p>
```

<br />

You can also give the skeleton animation by adding the `data-animation` attribute and setting it to `true`:

``` html
<h2 class="skeleton skeleton--md" data-animation="true"></h2>
<p class="skeleton" data-lines="7" data-animation="true"></p>
```

================================================
FILE: package/package.json
================================================
{
  "name": "@ritterim/skellycss",
  "version": "0.0.1",
  "description": "A light-weight CSS framework to quickly implement skeletons into your projects.",
  "main": "dist/skelly.js",
  "files":[
    "dist/"
  ],
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "parcel src/skelly.js",
    "build": "parcel build src/skelly.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/ritterim/skellyCSS.git"
  },
  "keywords": ["skeleton screens", "skeletons", "loading skeleton"],
  "author": "Ritter Insurance Marketing (https://rimdev.io)",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/ritterim/skellyCSS/issues"
  },
  "homepage": "https://github.com/ritterim/skellyCSS#readme",
  "devDependencies": {
    "cssnano": "^4.1.10",
    "sass": "^1.30.0"
  },
  "dependencies": {
    "assets": "^3.0.1"
  }
}


================================================
FILE: package.json
================================================
{
  "name": "@ritterim/skellycss",
  "version": "0.1.6",
  "description": "A light-weight CSS framework to quickly implement skeletons into your projects.",
  "main": "dist/skelly.js",
  "files": [
    "dist/"
  ],
  "scripts": {
    "start": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/ritterim/skellyCSS.git"
  },
  "keywords": [
    "skeleton screens",
    "skeletons",
    "loading skeleton"
  ],
  "author": "Ritter Insurance Marketing (https://rimdev.io)",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/ritterim/skellyCSS/issues"
  },
  "browserslist": [
    "defaults",
    "not IE 11",
    "maintained node versions"
  ],
  "homepage": "https://github.com/ritterim/skellyCSS#readme",
  "devDependencies": {
    "autoprefixer": "^10.4.15",
    "postcss": "^8.4.29",
    "postcss-cli": "^10.1.0",
    "sass": "^1.66.1",
    "vite": "^4.4.9",
    "vite-plugin-banner": "^0.7.0"
  }
}


================================================
FILE: postcss.config.js
================================================
module.exports = {
  plugins: [require('autoprefixer')]
};


================================================
FILE: src/index.js
================================================
const skeletons = document.querySelectorAll('.skeleton');

if (skeletons) {
  skeletons.forEach((skelly) => {
    let lineCount = parseInt(skelly.dataset.lines);
    let opacity = skelly.dataset.opacity
      ? parseFloat(skelly.dataset.opacity)
      : null;

    let color = skelly.dataset.color ? skelly.dataset.color : null;

    if (!lineCount && skelly.innerHTML.trim().length == 0) {
      lineCount = 1;
    }

    for (let i = 0; i < lineCount; i++) {
      const line = document.createElement('span');
      line.classList.add('skeleton__line');

      if (skelly.dataset.animation === 'true') {
        const animationElement = document.createElement('span');
        animationElement.classList.add('skeleton--animation');
        line.append(animationElement);
      }

      skelly.append(line);
    }

    if (opacity && opacity <= 1) {
      const lines = skelly.querySelectorAll('.skeleton__line');
      lines.forEach((line) => (line.style.opacity = opacity));
    }

    if (color) {
      const lines = skelly.querySelectorAll('.skeleton__line');
      lines.forEach(line => line.style.setProperty('--skelly-color', color));
      
    }
  });
}

const skeletonImages = document.querySelectorAll('.skeleton-image');

if (skeletonImages) {
  skeletonImages.forEach((skelly) => {
    let animation = skelly.dataset.animation === 'true';
    let opacity = skelly.dataset.opacity
      ? parseFloat(skelly.dataset.opacity)
      : null;

    if (animation === true) {
      const animationElement = document.createElement('span');
      animationElement.classList.add('skeleton--animation');
      skelly.append(animationElement);
    }

    if (opacity && opacity <= 1) skelly.style.opacity = opacity;
  });
}


================================================
FILE: src/style.scss
================================================
$skelly-color: #EFEFEF;

:root{
 --skelly-color: #EFEFEF;
} ;

$skelly-line-widths: (
  "sm": 25%,
  "md": 50%,
  "lg": 75%,
  "full": 100%,
);

$skelly-image-sizes: (
  "sm": 50px,
  "md": 100px,
  "lg": 200px,
  "xl": 400px,
  "full": 100%,
);

.skeleton {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  width: 100%;

  &__line {
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    display: block;
    height: 1em;
    width: 100%;
    background: var(--skelly-color);
    border-radius: 3px;
  }

  &__line + &__line:last-child {
    width: 50%;
  }

  @each $width-label, $width in $skelly-line-widths {
    &--#{$width-label} {
      width: $width;
    }
  }

  &--left {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
  }

  &--center {
    display: flex;
    flex-flow: column;
    align-items: center;
  }

  &--right {
    display: flex;
    flex-flow: column;
    align-items: flex-end;
  }

  &--animation {
    position: abosolute;
    display: flex;
    height: 100%;
    background: rgb(255, 255, 255);
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 10%,
      rgba(255, 255, 255, 0.5) 50%,
      rgba(255, 255, 255, 0) 90%,
      rgba(255, 255, 255, 0) 100%
    );

    animation: shine 3s infinite cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  &:last-child {
    margin-bottom: 0;
  }
}

p {
  .skeleton__line {
    margin-bottom: 0.6em;
  }
}

.skeleton-image {
  overflow: hidden;
  display: block;
  background-color: var(--skelly-color);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBpZD0iTGF5ZXJfMSIgeD0iMCIgeT0iMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjIyLjQgMjg4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyMjIuNCAyODgiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyIvPjxnPjxwYXRoIGQ9Ik0yMTgsNzQuM0wxNDguOSw1LjhjLTItMi00LjgtMy4yLTcuNy0zLjJIMjQuN0MxMi4xLDIuNiwxLjksMTIuOCwxLjksMjUuNFYyNjNjMCwxMi42LDEwLjIsMjIuOCwyMi44LDIyLjhoMTczLjcgYzEyLjYsMCwyMi44LTEwLjIsMjIuOC0yMi44VjgyQzIyMS4yLDc5LjEsMjIwLjEsNzYuMywyMTgsNzQuM3ogTTE0NS44LDM2LjVsNDEuMyw0MWgtNDEuM1YzNi41eiBNMjUuOSwyNjEuOFYyNi42aDk1Ljh2NTkuMiBjMCw4LjYsNywxNS42LDE1LjYsMTUuNmg1OS44djE2MC40SDI1Ljl6Ii8+PGNpcmNsZSBjeD0iNzMuMyIgY3k9IjExNS4yIiByPSIyNy4xIi8+PHBhdGggZD0iTTE0Mi43LDEzNy42Yy0xLjgtMS45LTQuMy0zLTYuOS0yLjljLTIuNiwwLjEtNS4xLDEuMy02LjcsMy4zbC0zOC4yLDQ2LjVsLTkuMy05LjdjLTEuOC0xLjktNC4yLTIuOS02LjgtMi44IGMtMi42LDAuMS01LDEuMy02LjYsMy4zbC0yNS4zLDMwLjZjLTEuMywxLjYtMi4xLDMuNi0yLjEsNS43djI3LjJjMCw1LDQsOSw5LDloMTI0LjhjNSwwLDktNCw5LTlWMTg2YzAtMi4yLTAuOC00LjQtMi4zLTYuMSBMMTQyLjcsMTM3LjZ6IE0xNjUuNiwyMjkuN0g1OC44di0xNWwxNi44LTIwLjNsOS4zLDkuN2MxLjgsMS45LDQuMywyLjksNi44LDIuOGMyLjYtMC4xLDUtMS4zLDYuNi0zLjNsMzgtNDYuM2wyOS4yLDMyLjFWMjI5Ljd6Ii8+PC9nPjwvc3ZnPg==");
  background-blend-mode: overlay;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px;
  aspect-ratio: 1;

  @each $size-label, $size in $skelly-image-sizes {
    &--#{$size-label} {
      height: $size;
      width: $size;
    }
  }

  &--square{
    aspect-ratio: 1;
  }

  &--landscape {
    aspect-ratio: 4/3;
    height:auto;
  }
  
  &--portrait {
    aspect-ratio: 3/4;
    width:auto;
  }

  &--wide {
    aspect-ratio: 16/9;
    height:auto;
  }

  &--tall {
    aspect-ratio: 9/16;
    width:auto;
  }

  &--circle {
    border-radius: 50%;
  }
}

.skeleton:is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  padding: 0;
  .skeleton__line {
    margin-bottom: 0.2em;
    background: var(--skelly-color);
  }
  &.skeleton--center{
    margin:0 auto;
  }
  &.skeleton--left{
    margin:0 auto 0 0;
  }
  &.skeleton--right{
    margin:0 0 0 auto;
  }
}

@keyframes shine {
  0% {
    transform: translateX(-100%);
  }

  30% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(100%);
  }
}


================================================
FILE: vite.config.js
================================================
// vite.config.js
const { defineConfig } = require('vite');
const path = require('path');
import banner from 'vite-plugin-banner';
// import copy from 'rollup-plugin-copy';
const pjson = require('./package.json');
const year = new Date().getFullYear();

const puiHeader = [
  '/*',
  '  SkellyCSS v' + pjson.version + ' | ' + pjson.name + '\n',
  '  ' + pjson.description + ' (' + pjson.homepage + ')',
  '  ©' + year + ' ' + pjson.author,
  '  ' + pjson.bugs.url,
  '  Released under the ' + pjson.license + ' license.',
  '*/',
  '',
].join('\n');

export default defineConfig({
  plugins: [
    banner(puiHeader)
  ],
  build: {
    lib: {
      entry: path.resolve(__dirname, 'main.js'),
      name: 'SkellyCSS',
      fileName: () => `skelly.js`,
    },
  },
});