Giter VIP home page Giter VIP logo

xbar's Introduction

xbar

Simplifies xbar app plugin creation

Create your plugin using a nice API instead of having to manually construct a big string.

Requires xbar v2 or later.

Install

npm install xbar

Usage

#!/usr/bin/env node
import xbar, {separator, isDarkMode} from 'xbar';

xbar([
	{
		text: '❀',
		color: isDarkMode ? 'white' : 'red',
		dropdown: false
	},
	separator,
	{
		text: 'Unicorns',
		color: '#ff79d7',
		submenu: [
			{
				text: ':tv: Video',
				href: 'https://www.youtube.com/watch?v=9auOCbH5Ns4'
			},
			{
				text: ':book: Wiki',
				href: 'https://en.wikipedia.org/wiki/Unicorn'
			}
		]
	},
	separator,
	'Ponies'
]);

Create a file with the above code in the xbar plugins directory and make sure to chmod +x filename.js it. Read more.

Note: You need to either have a package.json file with {"type": "module"} or use the .mjs extension instead of .js.

Change node in #!/usr/bin/env node to the path of your Node.js binary. This is a known issue in xbar.

API

xbar(items, options?)

items

Type: Array<string | object>

An item can be a string with the text or an object with the text in a text property and any of the options. The text can be multiple lines, but for the first item, only the first line will be shown in the menubar.

submenu

Type: Array<string | object>

It will add a submenu to the current item. A submenu is composed of an array of items.

options

Type: object

You can use any of the supported options.

Applies to all items unless overridden in the item.

separator

Add a separator.

isDarkMode

Type: boolean

Check whether dark mode is enabled.

isXbar

Type: boolean

Check whether the script is running from xbar.

xbar's People

Contributors

bfred-it avatar colbin8r avatar cprecioso avatar edenstrom avatar garyking avatar j0k3r avatar pedrofuentes avatar rayps avatar ruxpendp avatar sasikanth513 avatar sindresorhus avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

xbar's Issues

URLs with special characters don't work

Issuehunt badges

If a URL passed to href has special characters, such as single quotes, ampersands, etc., then the URL ends with that character when opened via this package to BitBar.

Per this, seems like the single quote has to be specifically escaped after the encodeURI:

https://github.com/sindresorhus/bitbar/blob/4abea7e002a29fec7118af85119387a4530c7a76/index.js#L34


IssueHunt Summary

[
<
i
m
g

s
r
c

'
h
t
t
p
s
:
/
/
a
v
a
t
a
r
s
0
.
g
i
t
h
u
b
u
s
e
r
c
o
n
t
e
n
t
.
c
o
m
/
u
/
6
1
5
3
8
1
6
?
v

4
'

a
l
t

'
s
a
s
i
k
a
n
t
h
5
1
3
'

w
i
d
t
h

2
4

h
e
i
g
h
t

2
4

s
a
s
i
k
a
n
t
h
5
1
3
]
(
h
t
t
p
s
:
/
/
i
s
s
u
e
h
u
n
t
.
i
o
/
u
/
s
a
s
i
k
a
n
t
h
5
1
3
)

h
a
s

b
e
e
n

r
e
w
a
r
d
e
d
.

Backers (Total: $20.00)

Submitted pull Requests


Tips


IssueHunt has been backed by the following sponsors. Become a sponsor

Typescript types: Separators aren't supported in submenus

Separators aren't being allowed in submenus. Results in a Typescript type error.

This is supported in bitbar 1.9.2 (should be the same for xbar 2.x but haven't verified), and the js implementation already works correctly in sindresorhus/bitbar.

Example:

bitbar([
  { text: 'I<3bitbar' },
  bitbar.separator,
  {
    text: 'submenu',
    submenu: [
      { text: 'foo' },
      bitbar.separator, // Type 'symbol' is not assignable to type 'string | Options'.
      { text: 'bar' }
    ]
  }
]);

node_modules causes BitBar.app to fail

I tried your demo and as per matryer/xbar#189, BitBar fails when there are unrecognized files/folders in its plugin directory.

How do you work around the issue?

I currently install the modules in a folder outside but that transforms every require into something like

require('../node_modules/bitbar')

Xbar cannot run plugin script due to esm modules

Ive setup my script with the following first two lines

#!/usr/bin/env ~/.nvm/versions/node/v16.9.1/bin/node --input-type=module
import xbar, { separator, isDarkMode } from "@sindresorhus/xbar";

....

Xbar displays the following

/Users/viperfx/Library/Application Support/xbar/plugins/xbar.js:2
import xbar, { separator, isDarkMode } from "@sindresorhus/xbar";
^^^^^^

SyntaxError: Cannot use import statement outside a module

Ive followed the readme as instructed - is there something else? PS - I installed the package with npm -g

Default options are not being overridden

The docs says Applies to all items unless overridden in the item. but it's the other way around according to the Object.assign. See code here

Example

const actual = bitbar.create([
  {
    text: 'Default font'
  },
  {
    text: 'Overriden font',
    font: 'Comic Sans MS'
  }
], {
  font: 'Arial'
});

Expected Output:

Default font|font="Arial"
Overriden font|font="Comic Sans MS"

Actual Output:

Default font|font="Arial"
Overriden font|font="Arial"

I will create a PR.

Move to xbar Branding?

I love that this exists and is updated for ESM and new node versions.

Is it up in the cards to move this package to the new xbar branding?

Improve to handle installation?

I have been using the alfy package to develop some Alfred workflows.

Now I took a look at the xbar package you created and wondered if this could be improved to also make it possible to install xbar plugins via npm similar to the way this is handled with Alfred?

I already have some ideas but thought I might ask if this is something you are interested in building / integrating.

Cheers and Happy New Year πŸŽ†

bitbar.darkMode always returns true

Thanks for creating this!

When I tried the example from the README, bitbar.darkMode always returns true. I have also tried performing a Refresh All without success. Any ideas?

macOS 10.14.4
BitBar 1.9.2

Implement submenus

Lines beginning with -- will appear in submenus, this is not currently supported here.

Note: It seems that bitbar supports up to 2 levels of submenus and separators don't work inside submenus.

Example In README not working

Hi Sindre,

This is a great api so thanks first of all for making it.

I went by the guide in the README but the JS example you provided seems to cause an issue whereby the ❀and the 'Unicorns' object keep switching between each other on the menu bar. I've attached a gif below to better explain.

unicorn.gif

I've tried refreshing the plugins folder and restarting BitBar but neither of these seems to work.

encodeURI is currently applied to the href key

For the href option encodeURI is currently applied to the key and not the value.

Current:
if (x === 'href') { x = encodeURI(x); }

Expected

if (x === 'href') { x = encodeURI(line[x]); }

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.