adam/vscode-front-matter
1
0
Fork 0
mirror of https://github.com/estruyf/vscode-front-matter.git synced 2026-06-23 19:41:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'beta' of github.com:T3sT3ro/vscode-front-matter into T3sT3ro-beta

Browse Source
This commit is contained in:
Elio Struyf
2024-11-28 08:46:12 +01:00
parent 2f76de2a28 2dc4865581
commit 4907a7aaa9
3 changed files with 30 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/panelWebView/components/SeoKeywordInfo.tsx
+8 -11
View File
@@ -40,14 +40,8 @@ const SeoKeywordInfo: React.FunctionComponent<ISeoKeywordInfoProps> = ({
const count = (content.match(pattern) || []).length;
const density = (count / wordCount) * 100;
const densityTitle = `${density.toFixed(2)}* %`;
if (density < 0.75) {
return <span className='text-[12px] text-[var(--vscode-statusBarItem-warningBackground)]'>{densityTitle}</span>;
} else if (density >= 0.75 && density < 1.5) {
return <span className='text-[12px] text-[var(--vscode-charts-green)]'>{densityTitle}</span>;
} else {
return <span className='text-[12px] text-[var(--vscode-statusBarItem-warningBackground)]'>{densityTitle}</span>;
}
const color = (density >= 0.75 && density < 1.5) ? "--vscode-charts-green" : "--vscode-charts-yellow";
return <span className={`text-[12px] text-[var(${color})]`} title="Recommended frequency: 0.75% - 1.5%">{densityTitle}</span>;
};
const validateKeywords = (heading: string, keyword: string) => {
@@ -98,7 +92,7 @@ const SeoKeywordInfo: React.FunctionComponent<ISeoKeywordInfoProps> = ({
const tooltipContent = React.useMemo(() => {
return (
<>
<b>Keyword present in:</b><br />
<h4>Keyword present in:</h4>
<span className='inline-flex items-center gap-1'><ValidInfo isValid={checks.title} /> {localize(LocalizationKey.commonTitle)}</span><br />
<span className='inline-flex items-center gap-1'><ValidInfo isValid={checks.description} /> {localize(LocalizationKey.commonDescription)}</span><br />
<span className='inline-flex items-center gap-1'><ValidInfo isValid={checks.slug} /> {localize(LocalizationKey.commonSlug)}</span><br />
@@ -116,7 +110,10 @@ const SeoKeywordInfo: React.FunctionComponent<ISeoKeywordInfoProps> = ({
return (
<div
className={`inline-flex py-1 px-[4px] rounded-[3px] justify-center items-center text-[12px] leading-[16px] border border-solid ${isValid ? "text-[--vscode-charts-green] border-[--vscode-charts-green] bg-[--frontmatter-success-background]" : "text-[var(--vscode-statusBarItem-warningBackground)] border-[var(--vscode-statusBarItem-warningBackground)] bg-[--frontmatter-warning-background]"}`}
className={`inline-flex py-0.5 px-2 my-1 rounded-[3px] justify-center items-center text-[12px] leading-[16px] border border-solid
${isValid
? "text-[var(--vscode-charts-green)] border-[var(--vscode-charts-green)] bg-[var(--frontmatter-success-background)]"
: "text-[var(--vscode-charts-yellow)] border-[var(--vscode-charts-yellow)] bg-[var(--frontmatter-warning-background)]"}`}
data-tooltip-id={`tooltip-checks-${keyword}`}
>
<ValidInfo isValid={isValid} />
@@ -137,7 +134,7 @@ const SeoKeywordInfo: React.FunctionComponent<ISeoKeywordInfoProps> = ({
<div className='flex h-full items-center'>
<Tag
value={keyword}
className={`!w-full !justify-between !mx-0 !my-1 !px-2 !py-1`}
className={`!w-full !justify-between !mx-0 !my-1 !px-2 !py-0.5`}
onRemove={onRemove}
onCreate={() => void 0}
title={localize(LocalizationKey.panelTagsTagWarning, keyword)}
src/panelWebView/components/ValidInfo.tsx
+3 -3
View File
@@ -15,11 +15,11 @@ const ValidInfo: React.FunctionComponent<IValidInfoProps> = ({
return (
<div className='inline-flex items-center h-full'>
{isValid ? (
<CheckIcon className={`h-4 w-4 text-[var(--vscode-charts-green)] mr-2`} />
<CheckIcon className={`h-6 w-6 text-[var(--vscode-charts-green)] mr-2`} />
) : (
<ExclamationTriangleIcon className={`h-4 w-4 text-[var(--vscode-statusBarItem-warningBackground)] mr-2`} />
<ExclamationTriangleIcon className={`h-6 w-6 text-[var(--vscode-charts-yellow)] mr-2`} />
)}
{label && <span className={className || ""}>{label}</span>}
{label && <span className={className || ""}><b>{label}</b></span>}
</div>
);
};
src/panelWebView/styles.css
+19 -3
View File
@@ -895,14 +895,29 @@ vscode-divider {
color: var(--vscode-inputValidation-infoForeground, #fff);
}
.tag {
transition: all 100ms;
}
.tag:has(.tag__delete:hover) {
background-color: var(--vscode-inputValidation-errorBackground);
color: var(--vscode-inputValidation-errorForeground);
}
.tag .tag__delete {
margin-left: 0.25rem;
& svg {
stroke-width: 3;
}
}
.tag .tag__delete:hover {
background-color: var(--vscode-inputValidation-errorBackground);
color: var(--vscode-inputValidation-errorForeground, #000);
border-radius: 2px;
& svg {
color: var(--vscode-charts-red);
}
}
.vscode-dark .tag .tag__delete:hover {
@@ -911,7 +926,8 @@ vscode-divider {
.tag .tag__value {
flex-grow: 1;
white-space: nowrap;
white-space: pre-wrap;
font-weight: 600;
}
/* Slug field */