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

vue-link-grid

v0.1.7

Published

I don't know about you, but I very regularly find that I need to display a list of links, and usually the nicest way is in a grid, maybe with icons. So here's a vue component that does just that. It's simple, but saves on time and duplication.

Downloads

13

Readme

vue-link-grid

I don't know about you, but I very regularly find that I need to display a list of links, and usually the nicest way is in a grid, maybe with icons. So here's a vue component that does just that. It's simple, but saves on time and duplication.

You can either use a pre-built theme, or pass your CSS/SCSS styles in. By default, it's fully responsive, and touch-screen enabled.

Usage

You know the drill, install yarn add vue-link-grid And then import: import { TileSection, Tile } from 'vue-link-grid';

You can either use Tile, or TileSection which is a group of tiles.

<TileSection
    :tileSectionTitle="mySectionTitle"
    :tileSectionSubTitle="mySectionSubTitle"
    :tiles = "tilesArray"
    theme="material"
    :styles="myStyles"
/>
<Tile
    v-for="tile in this.tiles"
    :key="tile.id"
    :name="tile.name"
    :description="tile.description"
    :url="tile.url"
    :icon="tile.icon"
/>

TileSection Configuration Options

  • tileSectionTitle: String, Title of section
  • tileSectionSubTitle: String, subtitle of section
  • tiles: Array, array of tile objects. See below for the structure
  • theme: String, optional name of prebuilt theme. material, material-dark...
  • styles: Object, optional object containing JavaScript CSS style overides.

Tile Configuration Options

  • name: String, the title of a given tile
  • description: String optional, the subtitle of a given tile
  • url: String, optional, the path of tile link on click
  • icon: String optional, the path to an image to be used

The tile data used by TileSection needs to be structured following for format below. description, url and icon are optional

"tiles": [
    {
        "id": "0",
        "name": "Tile One",
        "description": "Description of first tile",
        "url": "https://google.com",
        "icon": "https://via.placeholder.com/100/E8117F"
    },
    {
        "id": "1",
        "name": "Tile Two",
        "description": "Lorem ipsum dolar",
        "url": "https://bbc.co.uk",
        "icon": "https://via.placeholder.com/100x100"
    },
    {
        "id": "2",
        "name": "Tile Three",
        "description": "Hello World.",
        "url": "https://google.com",
        "icon": ""
    }
]

Custom styles

When you add in your custom styles, you can use any of the following classes to reference different parts of a TileSection or Tile

/* The specified tile section */
.tile-section.NAME-OF-THEME-theme{

    /* Heading and sub-heading of tile section */
    header.tile-section-header{

        h2.tile-section-title{

        }
        span.tile-section-sub-title{

        }
    }

    /* Wrapper for the tiles */
    .tile-wraper{
        a.tile{
            /* Image/ icon within a tile */
            img.tile-icon{

            }
            /* Tile name, and description text */
            .tile-texts{
                .tile-name{

                }
                .tile-description{

                }
            }
        }
    }
}

Contributing

It'd be really cool if you'd like to contribute, either to add a feature or theme, or to fix or improve something - pull requests are always very welcome.

Running locally

  • Clone: git clone https://github.com/Lissy93/vue-link-grid.git && cd vue-link-grid
  • Project setup: yarn install
  • Compiles and hot-reloads for development: yarn run serve
  • Compiles and minifies for production: yarn run build
  • Lints and fixes files: yarn run lint
  • Run the end-to-end tests: yarn run test:e2e

Creating a new theme

To add a new themeL

  • Just add a new stylesheet into src/styles/, with the -theme.scss prefix
  • There is a theme template in ./src/styles/template-theme.scss
  • Then import it into src/styles/index.scss. (e.g. @import '../styles/hello-theme.scss';)
  • Use your theme, by adding theme="hello" to your instance of TileSection component

License

Licensed under MIT, (C) Alicia Sykes 2018. Read full License.

License