リンクにアイコンを付けるCSSを生成するスクリプト

サンプル

注意点

依存しないようにした

スクリプト

CSSを生成するには、パソコンから以下のコマンドを実行する

script.ts

code:script.ts

/// <reference no-default-lib="true" />

/// <reference lib="esnext" />

import { ChildStyle, Style, toCSSText, writeText } from "./deps.ts";

import {

generateExternalLinkStyle,

generateLinkIconStyle,

LinkInit,

} from "./stylesheetGenerator.ts";

/**

* CSSの生成に使用するオブジェクト

*/

const externalLinks: LinkInit[] = [{

// PDF

url: {

url: ".pdf",

selectorSyntax: "$=",

},

style: { "content": "'\\f1c1'" },

}, {

// GitHub

url: [

],

style: { "content": "'\\f09b'" },

}, {

// Twitter

url: [

],

style: { "content": "'\\f099'" },

}, {

// Wikipedia

url: [

],

style: { "content": "'\\f266'" },

}, {

// Amazon

url: [

],

style: { "content": "'\\f270'" },

}, {

// Discord

url: [

],

style: { "content": "'\\f392'" },

}, {

// Cloudflare

url: [

],

style: { "content": "'\\e07d'" },

}, {

// Steam

url: [

],

style: { "content": "'\\f1b6'" },

}, {

// Steam外部サービス

url: [

// SteamDB

],

style: { "content": "'\\f3f6'" },

}, {

// Googleドライブ

url: [

],

style: { "content": "'\\f3aa'" },

}];

const cssImport =

const fontFamily: ChildStyle = {

"font-family": "'Font Awesome 6 Free', 'Font Awesome 6 Brands'",

};

const elStyle: Style = generateExternalLinkStyle(externalLinks, {

icon: fontFamily,

});

const liStyleBase: ChildStyle = {

"font-weight": 400,

"margin-right": "1px",

};

const liStyle: Style = generateLinkIconStyle(externalLinks, {

iconBase: { ...fontFamily, ...liStyleBase },

});

const extraStyle: Style = {

// 標準機能のTwitterアイコンを非表示にする

"i.fa-twitter::before": {

"content": "none",

},

".line .link .favicon.fa-twitter": {

"margin": 0,

},

};

await writeText(

cssImport + toCSSText({ ...elStyle, ...liStyle, ...extraStyle }),

);

stylesheetGenerator.ts

code:stylesheetGenerator.ts

/// <reference no-default-lib="true" />

/// <reference lib="esnext" />

import { ChildStyle, Style } from "./deps.ts";

export type AttributeSelectorOperator = "^=" | "=" | "$=" | "*=" | "~=" | "|=";

export interface URLInit {

url: string;

/**

* 属性セレクタに使用する演算子

*/

selectorSyntax: AttributeSelectorOperator;

}

export interface LinkInit {

url: string | URLInit | (string | URLInit)[];

style: ChildStyle;

}

/**

* 外部リンクを区別するUserCSSを生成する関数

*/

export function generateExternalLinkStyle(

/** アイコンを付与しないURLが入ったオブジェクト */

links: LinkInit[],

/** オプションで設定するスタイル(CSS) */

style?: {

/** 外部リンクを区別するアイコンに設定するスタイル */

icon?: ChildStyle;

},

): Style {

const urls = getURLFromLinkInit(links);

const selector =

".line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon):not(:is(" +

urls.reduce(

"",

) +

"))::after";

const iconStyleDefault: ChildStyle = {

"display": "inline-block",

"padding-right": "2px",

"font-size": ".5em",

"font-weight": "bold",

"font-family": "'Font Awesome 5 Free', 'Font Awesome 5 Brands'",

"content": "'\\f35d'",

"cursor": "text",

};

const iconStyle: Style = {

? iconStyleDefault

: { ...iconStyleDefault, ...style.icon },

};

return iconStyle;

}

/**

* 特定のリンクにアイコンをつけるUserCSSを生成する関数

*/

export function generateLinkIconStyle(

/** アイコンを付与するリンクの情報 */

links: LinkInit[],

/** オプションで設定するスタイル(CSS) */

style?: {

/** アイコンに共通で設定するスタイル */

iconBase?: ChildStyle;

},

): Style {

const allURLs = getURLFromLinkInit(links);

const baseSelector = ".line span:not(.deco-\\.) > span > a.link:is(" +

allURLs.reduce(

"",

) +

")::before";

const baseStyleDefault: ChildStyle = {

"display": "inline-block",

"width": "auto",

"height": "1em",

"line-height": "1em",

"vertical-align": "middle",

"text-align": "center",

"background-size": "contain",

"background-repeat": "no-repeat",

"font-family": "'Font Awesome 5 Free', 'Font Awesome 5 Brands'",

"cursor": "text",

};

/** 先頭にアイコンを付けるための共通のスタイル */

const baseStyle: Style = {

? baseStyleDefault

: { ...baseStyleDefault, ...style.iconBase },

};

const individualStyle: Style = {};

for (const link of links) {

const selector = ":is(.line, .line .deco) a.link:is(" +

urls.reduce(

"",

) +

")::before";

}

return { ...baseStyle, ...individualStyle };

}

/**

* LinkInitの配列からURLを取り出す

* @param {LinkInit[]} links 取り出し元のオブジェクト

* @return {URLInit[]}

*/

function getURLFromLinkInit(

links: LinkInit[],

defaultOperator: AttributeSelectorOperator = "^=",

): URLInit[] {

const resultURLs: URLInit[] = [];

for (const link of links) {

if (Array.isArray(link.url)) {

for (const url of link.url) {

if (typeof url === "string") {

resultURLs.push({ url: url, selectorSyntax: defaultOperator });

} else {

resultURLs.push(url);

}

}

} else {

const url = link.url;

if (typeof url === "string") {

resultURLs.push({ url: url, selectorSyntax: defaultOperator });

} else {

resultURLs.push(url);

}

}

}

return resultURLs;

}

deps.ts

依存関係をまとめてある

code:deps.ts

// CSSテキストを生成するのに使う

export {

toCSSText,

export type {

ChildStyle,

Style,

// クリップボードにコピーするやつ

生成済みのCSS

動作しないこともあるので注意

code:style.css