@frontj/elements
v0.2.1
Published
Elements for frontJ.
Downloads
20
Readme
@frontj/elements
frontJのcreateElement関数を様々なHTML要素に適用したものをエクスポートしたパッケージです。
いくつかの組み込みコンポーネントも含まれています。
Install
npm install -D @frontj/elementsExample
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(params: Params): 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(params: Params): 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(path: string): string| 引数 | 説明 | | --- | --- | | path | CSSファイルへのパス。 |
LoadJs
`<script src="${path}"></script>`の結果を返します。
LoadJs(path: string): string| 引数 | 説明 | | --- | --- | | path | JavaScriptファイルへのパス。 |
Meta
様々なmetaタグを返します。
Meta(params: Params, options?: Options): string| 引数 | 説明 |
| --- | --- |
| params | 返すmetaタグの内容となるオブジェクト。設定項目は下記に記載しています。 |
| options | 各種オプション設定用オブジェクト。設定項目は下記に記載しています。 |
paramsの設定項目:
| 項目 | 説明 |
| --- | --- |
| charset | charsetの内容を文字列で設定します。 |
| title | og:titleや(options.includeTitleElementがtrueのとき)tiltleの内容を文字列で設定します。 |
| description | descriptionやog: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">
*/