@frontj/elements
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.1 • Public • Published

    @frontj/elements

    frontJcreateElement関数を様々なHTML要素に適用したものをエクスポートしたパッケージです。
    いくつかの組み込みコンポーネントも含まれています。

    Install

    npm install -D @frontj/elements

    Example

    import {
      html,
      head,
      title,
      body,
      h1,
      p,
      br,
      input,
      Meta,
      Favicon,
      LoadCss
    } from '@frontj/elements'
    import { build } from '@frontj/builder'
     
    const text = (...contents) => p`.text`(
      ...contents
    )
     
    const contents = html(
      head(
        title('frontJ example.'),
        Meta({ description: 'Description' }),
        Favicon({ href: '/favicon.ico' }),
        LoadCss('style.css')
      ),
      body(
        h1`.heading`('Hello!'),
        text('foo', br(), 'bar'),
        input`[type="checkbox"][checked]`()
      )
    )
     
    build({
      routes: {
        '/': contents
      }
    })

    HTML(整形後):

    <!DOCTYPE html>
    <html>
      <head>
        <title>frontJ example.</title>
        <meta name="description" content="Description">
        <meta property="og:description" content="Description">
        <link rel="icon" href="/favicon.ico">
        <link rel="stylesheet" href="style.css">
      </head>
      <body>
        <h1 class="heading">Hello!</h1>
        <p class="text">foo<br>bar</p>
        <input type="checkbox" checked>
      </body>
    </html>

    Documentation

    Components

    AppleTouchIcon

    apple-touch-iconの設定がされたlinkタグを返します。

    AppleTouchIcon(paramsParams)string
    引数 説明
    params 返すlinkタグの内容となるオブジェクト。設定項目は下記に記載しています。

    paramsの設定項目:

    項目 説明
    sizes 省略可能で、sizes属性の値を文字列で設定します。
    href href属性の値を文字列で設定します。
    AppleTouchIcon({ sizes: '180x180', href: '/apple-touch-icon.png' })
    /*
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    */
     
    AppleTouchIcon({ href: '/apple-touch-icon.png' })
    /*
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    */

    Favicon

    faviconの設定がされたlinkタグを返します。

    Favicon(paramsParams)string
    引数 説明
    params 返すlinkタグの内容となるオブジェクト。設定項目は下記に記載しています。

    paramsの設定項目:

    項目 説明
    type 省略可能で、type属性の値を文字列で設定します。
    href href属性の値を文字列で設定します。
    Favicon({ type: 'image/png', href: '/favicon.png' })
    /*
    <link rel="icon" type="image/png" href="/favicon.png">
    */
     
    Favicon({ href: '/favicon.ico' })
    /*
    <link rel="icon" href="/favicon.ico">
    */

    LoadCss

    `<link rel="stylesheet" href="${path}">`の結果を返します。

    LoadCss(pathstring)string
    引数 説明
    path CSSファイルへのパス。

    LoadJs

    `<script src="${path}"></script>`の結果を返します。

    LoadJs(pathstring)string
    引数 説明
    path JavaScriptファイルへのパス。

    Meta

    様々なmetaタグを返します。

    Meta(paramsParams, options?: Options)string
    引数 説明
    params 返すmetaタグの内容となるオブジェクト。設定項目は下記に記載しています。
    options 各種オプション設定用オブジェクト。設定項目は下記に記載しています。

    paramsの設定項目:

    項目 説明
    charset charsetの内容を文字列で設定します。
    title og:titleや(options.includeTitleElementtrueのとき)tiltleの内容を文字列で設定します。
    description descriptionog:descriptionの内容を文字列で設定します。
    viewport viewportの内容を文字列で設定します。
    refresh refreshの内容を文字列で設定します。
    ogTitle og:titleの内容を文字列で設定します。titleプロパティの値よりも優先され、options.autoOgの値に関わらずmetaタグを返します。
    ogDescription og:descriptionの内容を文字列で設定します。descriptionプロパティの値よりも優先され、options.autoOgの値に関わらずmetaタグを返します。
    ogUrl og:urlの内容を文字列で設定します。
    ogImage og:imageの内容を文字列で設定します。
    ogSiteName og:site_nameの内容を文字列で設定します。
    ogType og:typeの内容を'website', 'article'のいずれかで設定します。
    twitterCard twitter:cardの内容を'summary', 'summary_large_image', 'app', 'player'のいずれかで設定します。
    twitterSite twitter:siteの内容を文字列で設定します。
    twitterCreator twitter:creatorの内容を文字列で設定します。
    fbAppId fb:app_idの内容を文字列で設定します。

    optionsの設定項目:

    項目 説明
    autoOg 真偽値で、OGPタグを自動で返すか設定します。初期値はtrueです。
    includeTitleElement 真偽値で、params.titleの値が入力されたtitleタグを返すか設定します。初期値はfalseです。
    Meta({ charset: 'UTF-8' })
    /*
    <meta charset="UTF-8">
    */
     
    Meta({ title: 'Title' }, { includeTitleElement: true })
    /*
    <meta property="og:title" content="Title">
    <title>Title</title>
    */
     
    Meta({ description: 'Description' })
    /*
    <meta name="description" content="Description">
    <meta property="og:description" content="Description">
    */
     
    Meta({ description: 'Description' }, { autoOg: false })
    /*
    <meta name="description" content="Description">
    */
     
    Meta({ description: 'Description', ogDescription: 'OgDescription' })
    /*
    <meta name="description" content="Description">
    <meta property="og:description" content="OgDescription">
    */
     
    Meta({ viewport: 'width=device-width, initial-scale=1.0' })
    /*
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    */

    License

    MIT

    Install

    npm i @frontj/elements

    DownloadsWeekly Downloads

    8

    Version

    0.2.1

    License

    MIT

    Unpacked Size

    418 kB

    Total Files

    210

    Last publish

    Collaborators

    • siromath