GithubHelp home page GithubHelp logo

doc22940 / linkdash Goto Github PK

View Code? Open in Web Editor NEW

This project forked from macouella/linkdash

1.0 0.0 0.0 9.21 MB

Generate a handy dashboard of links in seconds.

Home Page: https://linkdash.now.sh

License: MIT License

JavaScript 16.78% HTML 0.91% TypeScript 73.14% CSS 9.17%

linkdash's Introduction

Linkdash

Linkdash

Generate a handy dashboard of links in seconds.

Demo

Visit https://linkdash.now.sh or try it locally!

npx linkdash --host https://linkdash.now.sh/api/demo-config

Linkdash demo

Why?

On a personal level, you might want a quick way to build browse through your important links.

On a professional team level, you might want a stored and filterable list of predefined things to do.

Usage

[yarn add/npm i] --dev linkdash

# Print the help menu
[yarn/npx] linkdash --help

# Create a config file
[yarn/npx] linkdash --init

# Create a dashboard and open in the browser
[yarn/npx] linkdash

The config

// linkdash.config.js
// notice how this is async - you may go crazy and do promise-based tasks here.

module.exports = async () => {
  return {
    title: "Welcome to my linkdash!",

    // a static list of urls to build the linkdash list from
    urls: [
      {
        title: "Visit Github",
        href: "https://github.com",
        group: "Site",

        // optional attributes
        keywords: "additional searchable text to improve searchability",
        id: "generated_id_to_tag_href_target_names",
        isBookmarked: false, // bookmarks the link by default
      },
    ],
    // [OR]
    // specifiy a host to grab the config from
    // host: "https://linkdash.now.sh/api/demo-config",

    disableOpen: false,
    output: "./linkdash.html",
    htmlHead: `
    <meta name="robots" content="noindex" />
    `.trim(),
    // automatically opens the menu
    enableAutoMenu: false,
  };
};

When serving a configuration via the host option, the json response needs to match this shape: ILinkdashHostConfig. Example here: https://linkdash.now.sh/api/demo-config.

Beyond static html

Check out the examples folder to see how linkdash can be used for cases such as running your own server (controlling the output) and using it as a personal deployment companion via git-hooks.

Under the hood

Linkdash simply swaps the contents of a prebuilt html file with your config. Check out the package.json to see the four depedencies it installs!

Happy customers

I never thought I'd never write another personal dashboard.

Snape Livingston

Other applications

  • Always finding yourself trying to remember things to do after a git push or server deploy? Use linkdash along-side githooks.
  • Smart url schemas exist everywhere, from mailto:, to tel: to app-specific calls like skype:, spotify: and slack:. Get creative!
  • If security and collaboration is required, you may utilise linkdash's buildTemplate helper in your favourite http kernel (express, http) or serverless function. That way, you can decide which authorization approach to secure your links dashboard with.
  • Feel free to fork to customise the html for your needs. (webpack / preact / ts)

Future plans

[ ] Add manifest.json capabilities so the file can be installed in mobile devices.

[ ] Add a Google Sheets example

linkdash's People

Stargazers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.