@svag/window

@svag/window is a simple macOS-style window with a shadow and toolbar.

yarn add -E @svag/window

Table Of Contents

• Table Of Contents
• API
  • window(options: WindowOptions): string
    • WindowOptions
    • without a shadow
• TODO
• Copyright

API

The package is available by importing its default function:

import Window from '@svag/window'

window(  options: WindowOptions,): string

Creates a complete SVG representing a macOS window.

WindowOptions

| Name | Type | Description | Default | | ---- | ---- | ----------- | ------- | | content* | string | The content to display inside of the window. | - | | width* | number | The width of the content. | - | | height* | number | The height of the content. | - | | backgroundColor | string | The color of the window. | #000000 | | foregroundColor | string | The foreground color of the container group which will hold the content. | #FFFFFF | | noStretch | boolean | Do not stretch the SVG when embedded as an image. This is achieved by explicitly setting width and height attributes on the svg element. | false | | title | string | An optional title for the window. | - | | attributes | object | Any additional attributes to set on the holder of the content, e.g., font-family. | - | | minWidth | number | The minimum width that the window should take. If the content's width is greater than this value, the height will adjust to the content. | - | | minHeight | number | The minimum height that the window should take. If the content's height is greater than this value, the height will adjust to the content. | - | | paddingY | number | The padding on the Y-axis (top and bottom). | 5 | | paddingX | number | The padding on the X-axis (left and right). | 5 | | noShadow | boolean | Disable the dropping shadow. | false | | minify | boolean | Remove whitespace between tags (e.g., between > and <). If there are any problems with generated SVG, this could be disabled. | true |

import { makeElement } from '@svag/lib'
import Window from '@svag/window'

const line = makeElement('text', {
  attributes: {
    'font-family': 'Monaco, Courier',
    'font-size': '12px',
    x: 0,
    y: 10,
  },
  content: `Last login: ${new Date().toDateString()} on ttys013`,
})
const line2 = makeElement('text', {
  attributes: {
    'font-family': 'Monaco, Courier',
    'font-size': '12px',
    x: 0,
    y: 25,
  },
  content: 'svag-macbook:~ svag$ ',
})

const res = Window({
  title: '🚞 Terminal',
  width: 350,
  height: 100,
  noStretch: true,
  content: [line, line2],
  minify: false,
})

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0, 0, 472, 244" width="472px" height="244px">
  <g transform="translate(55, 25)" filter="url(#shadow)">
    <defs>
      <filter x="-16%" y="-19%" width="132%" height="180%" id="shadow">
        <feOffset dy="25" in="SourceAlpha" result="o"/>
        <feGaussianBlur stdDeviation="27.5" in="o" result="b"/>
        <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" in="b"/>
      </filter>
    </defs>
    <rect height="132" width="360" rx="6" ry="6" fill="white"/>
  </g>
  <g transform="translate(55, 25)" fill="none">
    <rect width="360" height="132" rx="6" ry="6" stroke="#000000" stroke-opacity="0.2"/>
    <g id="Toolbar">
      <defs>
        <linearGradient x1="50%" x2="50%" y2="100%" id="toolbar">
          <stop stop-color="#FFFFFF" offset="0%"/>
          <stop stop-color="#F5F4F5" offset="5%"/>
          <stop stop-color="#D3D3D3" offset="100%"/>
        </linearGradient>
      </defs>
      <path d="M6,0 L354,0 C 357 0, 360 3, 360 6 L360,22 L0,22 L0,16 L0,6 C 0 3, 3 0, 6 0"
            fill="url(#toolbar)"/>
      <text x="180" y="16" font-family="HelveticaNeue, Helvetica Neue" font-size="13"
            letter-spacing="0.4" fill="#464646" text-anchor="middle">
        🚞 Terminal
      </text>
      <g transform="translate(9, 6)">
        <g>
          <circle stroke="#E33E32" stroke-width="1" cx="5" cy="5" r="5.5"/>
          <circle fill="#FF5F52" cx="5" cy="5" r="5.25"/>
        </g>
        <g>
          <circle stroke="#E2A100" stroke-width="1" cx="25" cy="5" r="5.5"/>
          <circle fill="#FFBE05" cx="25" cy="5" r="5.25"/>
        </g>
        <g>
          <circle stroke="#17B230" stroke-width="1" cx="45" cy="5" r="5.5"/>
          <circle fill="#15CC35" cx="45" cy="5" r="5.25"/>
        </g>
      </g>
    </g>
    <path d="M360,22 L360,126 C 360 129, 357 132, 354 132 L6,132 C 3 132, 0 129, 0 126 L0,22 Z"
          fill="#FFFFFF"/>
    <line y1="22" x2="360" y2="22" stroke="#7E7E7E" shape-rendering="crispEdges"/>
    <g transform="translate(5, 28)" fill="#000000">
      <text font-family="Monaco, Courier" font-size="12px" x="0" y="10">
        Last login: Tue Sep 11 2018 on ttys013
      </text>
      <text font-family="Monaco, Courier" font-size="12px" x="0" y="25">
        svag-macbook:~ svag$ 
      </text>
    </g>
  </g>
</svg>

To generate a window without a shadow, the noShadow option can be set. When minify attribute is not set to false, the whitespace will be removed.

import { makeElement } from '@svag/lib'
import Window from '@svag/window'

const line = makeElement('text', {
  name: 'text',
  attributes: {
    'font-family': 'Monaco, Courier',
    'font-size': '12px',
    x: 0,
    y: 10,
  },
  content: `Last login: ${new Date().toDateString()} on ttys013`,
})
const line2 = makeElement('text', {
  attributes: {
    'font-family': 'Monaco, Courier',
    'font-size': '12px',
    x: 0,
    y: 25,
  },
  content: 'svag-macbook:~ svag$ ',
})

const res = Window({
  title: '🚞 Terminal',
  width: 350,
  height: 100,
  noStretch: true,
  content: [line, line2],
  noShadow: true,
})

<?xml version="1.0" encoding="utf-8"?><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0, 0, 362, 134" width="362px" height="134px"><g transform="translate(1, 1)" fill="none"><rect width="360" height="132" rx="6" ry="6" stroke="#000000" stroke-opacity="0.2"/><g id="Toolbar"><defs><linearGradient x1="50%" x2="50%" y2="100%" id="toolbar"><stop stop-color="#FFFFFF" offset="0%"/><stop stop-color="#F5F4F5" offset="5%"/><stop stop-color="#D3D3D3" offset="100%"/></linearGradient></defs><path d="M6,0 L354,0 C 357 0, 360 3, 360 6 L360,22 L0,22 L0,16 L0,6 C 0 3, 3 0, 6 0"
            fill="url(#toolbar)"/><text x="180" y="16" font-family="HelveticaNeue, Helvetica Neue" font-size="13"
            letter-spacing="0.4" fill="#464646" text-anchor="middle">
        🚞 Terminal
      </text><g transform="translate(9, 6)"><g><circle stroke="#E33E32" stroke-width="1" cx="5" cy="5" r="5.5"/><circle fill="#FF5F52" cx="5" cy="5" r="5.25"/></g><g><circle stroke="#E2A100" stroke-width="1" cx="25" cy="5" r="5.5"/><circle fill="#FFBE05" cx="25" cy="5" r="5.25"/></g><g><circle stroke="#17B230" stroke-width="1" cx="45" cy="5" r="5.5"/><circle fill="#15CC35" cx="45" cy="5" r="5.25"/></g></g></g><path d="M360,22 L360,126 C 360 129, 357 132, 354 132 L6,132 C 3 132, 0 129, 0 126 L0,22 Z"
          fill="#FFFFFF"/><line y1="22" x2="360" y2="22" stroke="#7E7E7E" shape-rendering="crispEdges"/><g transform="translate(5, 28)" fill="#000000"><text font-family="Monaco, Courier" font-size="12px" x="0" y="10">
        Last login: Tue Sep 11 2018 on ttys013
      </text><text font-family="Monaco, Courier" font-size="12px" x="0" y="25">
        svag-macbook:~ svag$ 
      </text></g></g></svg>

TODO

• [ ] Add cursor to the preview.

Copyright

(c) SVaG 2018