Nepotistic Pontifex Maximus

    @svag/window

    1.1.1 • Public • Published

    @svag/window

    npm version

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

    yarn add -E @svag/window

    Table Of Contents

    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.

    window of a terminal

    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>

    window without a shadow

    TODO

    • [ ] Add cursor to the preview.

    Copyright

    (c) SVaG 2018

    Install

    npm i @svag/window

    DownloadsWeekly Downloads

    1

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    30.9 kB

    Total Files

    10

    Last publish

    Collaborators

    • zvr