Create LinkThumnailDecoPlugin
This commit is contained in:
kim365my
parent
e60294b950
commit
26a0b09c73
|
|
@ -15,7 +15,7 @@ const context = await esbuild.context({
|
||||||
banner: {
|
banner: {
|
||||||
js: banner,
|
js: banner,
|
||||||
},
|
},
|
||||||
entryPoints: ["main.ts"],
|
entryPoints: ["./src/main.ts"],
|
||||||
bundle: true,
|
bundle: true,
|
||||||
external: [
|
external: [
|
||||||
"obsidian",
|
"obsidian",
|
||||||
|
|
|
||||||
134
main.ts
134
main.ts
|
|
@ -1,134 +0,0 @@
|
||||||
import { App, Editor, MarkdownView, Modal, Notice, Plugin, PluginSettingTab, Setting } from 'obsidian';
|
|
||||||
|
|
||||||
// Remember to rename these classes and interfaces!
|
|
||||||
|
|
||||||
interface MyPluginSettings {
|
|
||||||
mySetting: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const DEFAULT_SETTINGS: MyPluginSettings = {
|
|
||||||
mySetting: 'default'
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class MyPlugin extends Plugin {
|
|
||||||
settings: MyPluginSettings;
|
|
||||||
|
|
||||||
async onload() {
|
|
||||||
await this.loadSettings();
|
|
||||||
|
|
||||||
// This creates an icon in the left ribbon.
|
|
||||||
const ribbonIconEl = this.addRibbonIcon('dice', 'Sample Plugin', (evt: MouseEvent) => {
|
|
||||||
// Called when the user clicks the icon.
|
|
||||||
new Notice('This is a notice!');
|
|
||||||
});
|
|
||||||
// Perform additional things with the ribbon
|
|
||||||
ribbonIconEl.addClass('my-plugin-ribbon-class');
|
|
||||||
|
|
||||||
// This adds a status bar item to the bottom of the app. Does not work on mobile apps.
|
|
||||||
const statusBarItemEl = this.addStatusBarItem();
|
|
||||||
statusBarItemEl.setText('Status Bar Text');
|
|
||||||
|
|
||||||
// This adds a simple command that can be triggered anywhere
|
|
||||||
this.addCommand({
|
|
||||||
id: 'open-sample-modal-simple',
|
|
||||||
name: 'Open sample modal (simple)',
|
|
||||||
callback: () => {
|
|
||||||
new SampleModal(this.app).open();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
// This adds an editor command that can perform some operation on the current editor instance
|
|
||||||
this.addCommand({
|
|
||||||
id: 'sample-editor-command',
|
|
||||||
name: 'Sample editor command',
|
|
||||||
editorCallback: (editor: Editor, view: MarkdownView) => {
|
|
||||||
console.log(editor.getSelection());
|
|
||||||
editor.replaceSelection('Sample Editor Command');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
// This adds a complex command that can check whether the current state of the app allows execution of the command
|
|
||||||
this.addCommand({
|
|
||||||
id: 'open-sample-modal-complex',
|
|
||||||
name: 'Open sample modal (complex)',
|
|
||||||
checkCallback: (checking: boolean) => {
|
|
||||||
// Conditions to check
|
|
||||||
const markdownView = this.app.workspace.getActiveViewOfType(MarkdownView);
|
|
||||||
if (markdownView) {
|
|
||||||
// If checking is true, we're simply "checking" if the command can be run.
|
|
||||||
// If checking is false, then we want to actually perform the operation.
|
|
||||||
if (!checking) {
|
|
||||||
new SampleModal(this.app).open();
|
|
||||||
}
|
|
||||||
|
|
||||||
// This command will only show up in Command Palette when the check function returns true
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// This adds a settings tab so the user can configure various aspects of the plugin
|
|
||||||
this.addSettingTab(new SampleSettingTab(this.app, this));
|
|
||||||
|
|
||||||
// If the plugin hooks up any global DOM events (on parts of the app that doesn't belong to this plugin)
|
|
||||||
// Using this function will automatically remove the event listener when this plugin is disabled.
|
|
||||||
this.registerDomEvent(document, 'click', (evt: MouseEvent) => {
|
|
||||||
console.log('click', evt);
|
|
||||||
});
|
|
||||||
|
|
||||||
// When registering intervals, this function will automatically clear the interval when the plugin is disabled.
|
|
||||||
this.registerInterval(window.setInterval(() => console.log('setInterval'), 5 * 60 * 1000));
|
|
||||||
}
|
|
||||||
|
|
||||||
onunload() {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
async loadSettings() {
|
|
||||||
this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
|
|
||||||
}
|
|
||||||
|
|
||||||
async saveSettings() {
|
|
||||||
await this.saveData(this.settings);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class SampleModal extends Modal {
|
|
||||||
constructor(app: App) {
|
|
||||||
super(app);
|
|
||||||
}
|
|
||||||
|
|
||||||
onOpen() {
|
|
||||||
const {contentEl} = this;
|
|
||||||
contentEl.setText('Woah!');
|
|
||||||
}
|
|
||||||
|
|
||||||
onClose() {
|
|
||||||
const {contentEl} = this;
|
|
||||||
contentEl.empty();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class SampleSettingTab extends PluginSettingTab {
|
|
||||||
plugin: MyPlugin;
|
|
||||||
|
|
||||||
constructor(app: App, plugin: MyPlugin) {
|
|
||||||
super(app, plugin);
|
|
||||||
this.plugin = plugin;
|
|
||||||
}
|
|
||||||
|
|
||||||
display(): void {
|
|
||||||
const {containerEl} = this;
|
|
||||||
|
|
||||||
containerEl.empty();
|
|
||||||
|
|
||||||
new Setting(containerEl)
|
|
||||||
.setName('Setting #1')
|
|
||||||
.setDesc('It\'s a secret')
|
|
||||||
.addText(text => text
|
|
||||||
.setPlaceholder('Enter your secret')
|
|
||||||
.setValue(this.plugin.settings.mySetting)
|
|
||||||
.onChange(async (value) => {
|
|
||||||
this.plugin.settings.mySetting = value;
|
|
||||||
await this.plugin.saveSettings();
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -19,6 +19,11 @@
|
||||||
"esbuild": "0.17.3",
|
"esbuild": "0.17.3",
|
||||||
"obsidian": "latest",
|
"obsidian": "latest",
|
||||||
"tslib": "2.4.0",
|
"tslib": "2.4.0",
|
||||||
"typescript": "4.7.4"
|
"typescript": "4.7.4",
|
||||||
|
"compare-versions": "^4.1.3",
|
||||||
|
"@codemirror/search": "6.0.0",
|
||||||
|
"@codemirror/view": "6.0.0",
|
||||||
|
"@codemirror/commands": "6.0.0",
|
||||||
|
"@codemirror/language": "https://github.com/lishid/cm-language"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,219 @@
|
||||||
|
import {debounce, editorLivePreviewField, requestUrl} from "obsidian";
|
||||||
|
import {EditorView, Decoration, DecorationSet, ViewUpdate, ViewPlugin, WidgetType} from "@codemirror/view";
|
||||||
|
import {StateField, StateEffect, StateEffectType} from "@codemirror/state";
|
||||||
|
import {Range} from "@codemirror/rangeset";
|
||||||
|
import {syntaxTree, tokenClassNodeProp} from "@codemirror/language";
|
||||||
|
import MyPlugin from "./main";
|
||||||
|
|
||||||
|
//based on: https://gist.github.com/nothingislost/faa89aa723254883d37f45fd16162337
|
||||||
|
|
||||||
|
interface TokenSpec {
|
||||||
|
from: number;
|
||||||
|
to: number;
|
||||||
|
value: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const statefulDecorations = defineStatefulDecoration();
|
||||||
|
|
||||||
|
class StatefulDecorationSet {
|
||||||
|
editor: EditorView;
|
||||||
|
decoCache: { [cls: string]: Decoration } = Object.create(null);
|
||||||
|
plugin: MyPlugin;
|
||||||
|
|
||||||
|
constructor(editor: EditorView, plugin: MyPlugin) {
|
||||||
|
this.editor = editor;
|
||||||
|
this.plugin = plugin;
|
||||||
|
}
|
||||||
|
|
||||||
|
async computeAsyncDecorations(tokens: TokenSpec[]): Promise<DecorationSet | null> {
|
||||||
|
const isSourceMode = !this.editor.state.field(editorLivePreviewField);
|
||||||
|
if (isSourceMode) {
|
||||||
|
return Decoration.none;
|
||||||
|
} else {
|
||||||
|
const decorations: Range<Decoration>[] = [];
|
||||||
|
for (const token of tokens) {
|
||||||
|
let deco = this.decoCache[token.value];
|
||||||
|
if (!deco) {
|
||||||
|
const div = createDiv();
|
||||||
|
// 클래스 추가
|
||||||
|
div.addClass("cm-embed-block");
|
||||||
|
div.addClass("cm-embed-link");
|
||||||
|
// 넣을 EL 받아오기
|
||||||
|
const params = await linkThumbnailWidgetParams(token.value);
|
||||||
|
if (params != null) {
|
||||||
|
div.innerHTML = params;
|
||||||
|
} else {
|
||||||
|
return Decoration.none;
|
||||||
|
}
|
||||||
|
deco = this.decoCache[token.value] = Decoration.replace({widget: new EmojiWidget(div), block: true});
|
||||||
|
}
|
||||||
|
decorations.push(deco.range(token.from, token.to));
|
||||||
|
}
|
||||||
|
return Decoration.set(decorations, true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
debouncedUpdate = debounce(this.updateAsyncDecorations, 100, true);
|
||||||
|
|
||||||
|
async updateAsyncDecorations(tokens: TokenSpec[]): Promise<void> {
|
||||||
|
const decorations = await this.computeAsyncDecorations(tokens);
|
||||||
|
// if our compute function returned nothing and the state field still has decorations, clear them out
|
||||||
|
if (decorations || this.editor.state.field(statefulDecorations.field).size) {
|
||||||
|
this.editor.dispatch({effects: statefulDecorations.update.of(decorations || Decoration.none)});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildViewPlugin(plugin: MyPlugin) {
|
||||||
|
return ViewPlugin.fromClass(
|
||||||
|
class {
|
||||||
|
decoManager: StatefulDecorationSet;
|
||||||
|
|
||||||
|
constructor(view: EditorView) {
|
||||||
|
this.decoManager = new StatefulDecorationSet(view, plugin);
|
||||||
|
this.buildAsyncDecorations(view);
|
||||||
|
}
|
||||||
|
|
||||||
|
update(update: ViewUpdate) {
|
||||||
|
if (update.docChanged || update.viewportChanged) {
|
||||||
|
this.buildAsyncDecorations(update.view);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
buildAsyncDecorations(view: EditorView) {
|
||||||
|
const targetElements: TokenSpec[] = [];
|
||||||
|
try {
|
||||||
|
const tree = syntaxTree(view.state);
|
||||||
|
tree.iterate({
|
||||||
|
enter: ({node, from, to}) => {
|
||||||
|
const tokenProps = node.type.prop<string>(tokenClassNodeProp);
|
||||||
|
if (tokenProps && node.name === "url") {
|
||||||
|
const value = view.state.doc.sliceString(from, to);
|
||||||
|
if (value) {
|
||||||
|
targetElements.push({from: from, to: to, value: value});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Custom CM6 view plugin failure", error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
this.decoManager.debouncedUpdate(targetElements);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function asyncDecoBuilderExt(plugin: MyPlugin) {
|
||||||
|
return [statefulDecorations.field, buildViewPlugin(plugin)];
|
||||||
|
}
|
||||||
|
|
||||||
|
////////////////
|
||||||
|
// Utility Code
|
||||||
|
////////////////
|
||||||
|
|
||||||
|
// Generic helper for creating pairs of editor state fields and
|
||||||
|
// effects to model imperatively updated decorations.
|
||||||
|
// source: https://github.com/ChromeDevTools/devtools-frontend/blob/8f098d33cda3dd94b53e9506cd3883d0dccc339e/front_end/panels/sources/DebuggerPlugin.ts#L1722
|
||||||
|
function defineStatefulDecoration(): {
|
||||||
|
update: StateEffectType<DecorationSet>;
|
||||||
|
field: StateField<DecorationSet>;
|
||||||
|
} {
|
||||||
|
const update = StateEffect.define<DecorationSet>();
|
||||||
|
const field = StateField.define<DecorationSet>({
|
||||||
|
create(): DecorationSet {
|
||||||
|
return Decoration.none;
|
||||||
|
},
|
||||||
|
update(deco, tr): DecorationSet {
|
||||||
|
return tr.effects.reduce((deco, effect) => (effect.is(update) ? effect.value : deco), deco.map(tr.changes));
|
||||||
|
},
|
||||||
|
provide: field => EditorView.decorations.from(field),
|
||||||
|
});
|
||||||
|
return {update, field};
|
||||||
|
}
|
||||||
|
|
||||||
|
class EmojiWidget extends WidgetType {
|
||||||
|
private readonly source: HTMLDivElement;
|
||||||
|
|
||||||
|
constructor(source: HTMLDivElement) {
|
||||||
|
super();
|
||||||
|
this.source = source;
|
||||||
|
}
|
||||||
|
|
||||||
|
eq(other: EmojiWidget) {
|
||||||
|
return other == this;
|
||||||
|
}
|
||||||
|
|
||||||
|
toDOM() {
|
||||||
|
return this.source;
|
||||||
|
}
|
||||||
|
|
||||||
|
ignoreEvent(): boolean {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function linkThumbnailWidgetParams(url: string) {
|
||||||
|
try {
|
||||||
|
// url 정규식
|
||||||
|
const urlRegex = new RegExp("^(http:\\/\\/www\\.|https:\\/\\/www\\.|http:\\/\\/|https:\\/\\/)?[a-z0-9]+([\\-.]{1}[a-z0-9]+)*\\.[a-z]{2,5}(:[0-9]{1,5})?(\\/.*)?$");
|
||||||
|
const urlT = urlRegex.exec(url);
|
||||||
|
if (urlT?.length != 0 && urlT != null) {
|
||||||
|
const domainUrl = url.replace(urlT[4], "");
|
||||||
|
|
||||||
|
const response = await requestUrl(url);
|
||||||
|
const responseDomain = await requestUrl(domainUrl);
|
||||||
|
|
||||||
|
if (response.status === 200) {
|
||||||
|
const htmlString = response.text;
|
||||||
|
const parser = new DOMParser();
|
||||||
|
const document = parser.parseFromString(htmlString, 'text/html');
|
||||||
|
|
||||||
|
const htmlDomainString = responseDomain.text;
|
||||||
|
const domainDocument = parser.parseFromString(htmlDomainString, 'text/html');
|
||||||
|
|
||||||
|
const ogTitle = document.querySelector("meta[property='og:title']")?.getAttribute("content") || document.querySelector("title")?.textContent || domainDocument.querySelector("meta[property='og:title']")?.getAttribute("content") || domainDocument.querySelector("title")?.textContent || "";
|
||||||
|
const ogDescription = document.querySelector("meta[property='og:description']")?.getAttribute("content") || domainDocument.querySelector("meta[property='og:description']")?.getAttribute("content") || "";
|
||||||
|
const ogImage = document.querySelector("meta[property='og:image']")?.getAttribute("content") || domainDocument.querySelector("meta[property='og:image']")?.getAttribute("content") || "";
|
||||||
|
const ogImageAlt = document.querySelector("meta[property='og:image:alt']")?.getAttribute("content") || domainDocument.querySelector("meta[property='og:image']")?.getAttribute("content") || "";
|
||||||
|
const ogUrl = document.querySelector("meta[property='og:url']")?.getAttribute("content") || domainUrl;
|
||||||
|
|
||||||
|
let result = "";
|
||||||
|
if (ogImage === "") {
|
||||||
|
result = `
|
||||||
|
<a href="${url}">
|
||||||
|
<div class="openGraphPreview">
|
||||||
|
<div class="se-oglink-info-container">
|
||||||
|
<strong class="se-oglink-info">${ogTitle}</strong>
|
||||||
|
<description class="se-oglink-summary">${ogDescription}</description>
|
||||||
|
<p class="se-oglink-url"> ${ogUrl}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
`
|
||||||
|
} else {
|
||||||
|
result = `
|
||||||
|
<a href="${url}">
|
||||||
|
<div class="openGraphPreview">
|
||||||
|
<div class="se-oglink-thumbnail">
|
||||||
|
<img src="${ogImage}" alt="${ogImageAlt}" class="se-oglink-thumbnail-resource"></img>
|
||||||
|
</div>
|
||||||
|
<div class="se-oglink-info-container">
|
||||||
|
<strong class="se-oglink-info">${ogTitle}</strong>
|
||||||
|
<description class="se-oglink-summary">${ogDescription}</description>
|
||||||
|
<p class="se-oglink-url"> ${ogUrl}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
} catch (error) {
|
||||||
|
// console.error(error);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
import { MarkdownPostProcessorContext } from "obsidian";
|
||||||
|
import MyPlugin from "./main";
|
||||||
|
import { linkThumbnailWidgetParams } from "./EnbedDecoratiion";
|
||||||
|
|
||||||
|
export class PostProcessor {
|
||||||
|
plugin: MyPlugin;
|
||||||
|
|
||||||
|
constructor(plugin: MyPlugin) {
|
||||||
|
this.plugin = plugin;
|
||||||
|
}
|
||||||
|
|
||||||
|
processor = async (
|
||||||
|
element: HTMLElement,
|
||||||
|
context: MarkdownPostProcessorContext
|
||||||
|
) => {
|
||||||
|
// 링크 변환
|
||||||
|
const linkEls = element.findAll("a.external-link");
|
||||||
|
for (const linkEl of linkEls) {
|
||||||
|
// dataview 클래스를 가진 부모 요소를 확인합니다.
|
||||||
|
if (linkEl.closest(".dataview") !== null) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
const url = linkEl.innerHTML;
|
||||||
|
const params = await linkThumbnailWidgetParams(url);
|
||||||
|
if (params != null) {
|
||||||
|
linkEl.innerHTML = params;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
isDisabled = (el: Element) => {
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
import { Plugin } from 'obsidian';
|
||||||
|
import { asyncDecoBuilderExt } from './EnbedDecoratiion';
|
||||||
|
import { PostProcessor } from './PostProcessor';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export default class MyPlugin extends Plugin {
|
||||||
|
/**
|
||||||
|
* @returns true if Live Preview is supported
|
||||||
|
*/
|
||||||
|
isUsingLivePreviewEnabledEditor(): boolean {
|
||||||
|
//@ts-ignore
|
||||||
|
return !this.app.vault.getConfig('legacyEditor');
|
||||||
|
}
|
||||||
|
|
||||||
|
async onload() {
|
||||||
|
|
||||||
|
// In LivePre view Mode
|
||||||
|
if (this.isUsingLivePreviewEnabledEditor()) {
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
||||||
|
const Prec = require("@codemirror/state").Prec;
|
||||||
|
this.registerEditorExtension(Prec.lowest(asyncDecoBuilderExt(this)));
|
||||||
|
}
|
||||||
|
// In Reading Mode
|
||||||
|
const postProcessor = new PostProcessor(this);
|
||||||
|
this.registerMarkdownPostProcessor(postProcessor.processor);
|
||||||
|
|
||||||
|
// updateOptions
|
||||||
|
this.registerEvent(this.app.workspace.on('css-change', () => {
|
||||||
|
this.app.workspace.updateOptions();
|
||||||
|
}));
|
||||||
|
this.app.workspace.updateOptions();
|
||||||
|
}
|
||||||
|
async onunload() {
|
||||||
|
console.log("disabling plugin: link");
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
88
styles.css
88
styles.css
|
|
@ -6,3 +6,91 @@ available in the app when your plugin is enabled.
|
||||||
If your plugin does not need CSS, delete this file.
|
If your plugin does not need CSS, delete this file.
|
||||||
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
a:has(.openGraphPreview) {
|
||||||
|
text-decoration: none;
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
|
a:has(.openGraphPreview):hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.openGraphPreview {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
border: var(--cards-border-width) solid var(--background-modifier-border);
|
||||||
|
background: none;
|
||||||
|
color: var(--text-normal);
|
||||||
|
text-decoration: none;
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
.openGraphPreview:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--text-normal);
|
||||||
|
}
|
||||||
|
.openGraphPreview .se-oglink-thumbnail {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
height: initial;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.openGraphPreview .se-oglink-thumbnail-resource {
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
}
|
||||||
|
.openGraphPreview .se-oglink-info-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8px;
|
||||||
|
overflow: auto;
|
||||||
|
padding: var(--size-4-4) var(--size-4-2);
|
||||||
|
}
|
||||||
|
.openGraphPreview .se-oglink-info {
|
||||||
|
display: block;
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--text-normal);
|
||||||
|
}
|
||||||
|
.openGraphPreview .se-oglink-summary {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
overflow: hidden;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
display: box;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: normal;
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--text-normal);
|
||||||
|
}
|
||||||
|
.openGraphPreview .se-oglink-url {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
margin-block: 0 !important;
|
||||||
|
color: var(--link-color);
|
||||||
|
text-decoration: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-cards table .openGraphPreview,
|
||||||
|
.cards table .openGraphPreview {
|
||||||
|
flex-direction: column;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.table-cards table .openGraphPreview .se-oglink-thumbnail,
|
||||||
|
.cards table .openGraphPreview .se-oglink-thumbnail {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 500px) {
|
||||||
|
.openGraphPreview {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
.openGraphPreview .se-oglink-thumbnail {
|
||||||
|
width: 150px;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue