Skip to content

Commit

Permalink
Merge pull request #33 from nikolai-shabalin/feature/values
Browse files Browse the repository at this point in the history
Add values
  • Loading branch information
nikolai-shabalin authored Dec 18, 2024
2 parents f894f3b + 3f694ff commit 8b175aa
Show file tree
Hide file tree
Showing 6 changed files with 83 additions and 125 deletions.
25 changes: 11 additions & 14 deletions src/components/Properties.astro
Original file line number Diff line number Diff line change
@@ -1,25 +1,19 @@
---
import Property from './Property.astro';
import Property, {PropertyProp} from './Property.astro';
interface Props {
properties: Record<string, Property[]>;
interface PropertiesAstroProps {
properties: {
[year: string]: PropertyProp[];
};
}
interface Property {
type: string;
name: string;
date: string;
specUrl?: string;
mdnUrl?: string;
}
const {properties} = Astro.props;
const { properties } = Astro.props as PropertiesAstroProps;
---

{Object.entries(properties).reverse().map(([key, properties]) => (
<section class="properties-of-year" id={`year-${key}`}>
<h2>Добавлено в {key}</h2>
{properties.map((property) => (
{properties.map((property:PropertyProp) => (
<Property property={property} />
))}
</section>
Expand All @@ -28,7 +22,10 @@ const {properties} = Astro.props;
<style>
.properties-of-year {
background-color: var(--color-background-section);
border-radius: 8px;
border-radius: max(
0px,
min(8px, calc((100vw - 4px - 780px) * 9999))
);
padding: 20px;
margin-block-end: 32px;
display: flex;
Expand Down
30 changes: 20 additions & 10 deletions src/components/Property.astro
Original file line number Diff line number Diff line change
@@ -1,18 +1,22 @@
---
export type PropertyProp = {
name: string;
date: string;
type: string;
parent?: string | null;
specUrl?: string;
mdnUrl?: string;
year: string;
}
interface Props {
property: {
type: string;
name: string;
date: string;
specUrl?: string;
mdnUrl?: string;
};
property: PropertyProp;
}
const { property } = Astro.props;
---
<article class="property">
<h3>{property.type === '@' ? `${property.type}${property.name}` : `${property.type}: ${property.name}`}</h3>
<h3>{property.parent ? `${property.parent}: ${property.name}` : (property.type === '@' ? `${property.type}${property.name}` : `${property.type}: ${property.name}`)}</h3>
<time datetime={property.date}>{new Date(property.date).toLocaleDateString('ru-RU')}</time>
<div>
{property.specUrl && <a href={property.specUrl}>Спецификация</a>}
Expand All @@ -27,11 +31,17 @@ const { property } = Astro.props;
padding: 16px;
background-color: var(--color-background-item);
display: grid;
row-gap: 16px;
grid-template-columns: [full-start] 1fr min-content [full-end];
row-gap: 8px;
grid-template-columns: [full-start] 1fr [full-end];

h3 {
margin-block: unset;
margin-block-end: 8px;
word-break: break-word;
}

time {
grid-row: 1 / 2;
}

div {
Expand Down
5 changes: 4 additions & 1 deletion src/components/SelectYear.astro
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,10 @@ interface Props {
flex-wrap: wrap;
gap: 8px 16px;
background-color: var(--color-background-section);
border-radius: 8px;
border-radius: max(
0px,
min(8px, calc((100vw - 4px - 780px) * 9999))
);
padding: 20px;
margin-block-end: 32px;

Expand Down
144 changes: 46 additions & 98 deletions src/data/createData.js
Original file line number Diff line number Diff line change
@@ -1,128 +1,76 @@
import bcd from '@mdn/browser-compat-data' with { type: 'json' };
import fs from 'node:fs';

const {css, browsers } = bcd;
let data = [];

const getSpecUrl = (properties, propertyName) => {
const specUrl = properties[propertyName]['__compat']['spec_url'];
return Array.isArray(specUrl) ? specUrl[0] : specUrl;
}

const getBrowserVersion = (browser) => {
if (browser) {
let version = Array.isArray(browser.version_added) ? browser.version_added[0] : browser.version_added;
if (version === 'preview') {
return null;
}
if (typeof version === 'string' && version.startsWith('≤')) {
version = parseFloat(version.substring(1));
}
return version;
}
return null;
}
const { css, browsers } = bcd;
let groupedData = {};

const getMinDate = (browserVersionsSupportingProperty) => {
const releaseDates = [];

for (let browserVersion of browserVersionsSupportingProperty) {
const { name, version } = browserVersion;
const releaseInfo = browsers[name]['releases'][version];
if (!releaseInfo || !releaseInfo['release_date']) {
continue;
for (let { name, version } of browserVersionsSupportingProperty) {
const releaseInfo = browsers[name]?.['releases'][version];
if (releaseInfo?.release_date) {
releaseDates.push(releaseInfo.release_date);
}
const releaseDate = releaseInfo['release_date'];
releaseDates.push(releaseDate);
}

if (releaseDates.length === 0) {
return false;
}

const minDate = releaseDates.reduce((minDate, current) => {
const currentDate = new Date(current);
return currentDate < minDate ? currentDate : minDate;
}, new Date(releaseDates[0]));
return minDate.toISOString().split('T')[0];
}

const getDate = ({status: {deprecated}, support: {chrome, firefox, safari}}, name) => {
if (deprecated) {
return false;
}

const chromeVersion = getBrowserVersion(chrome);
const firefoxVersion = getBrowserVersion(firefox);
const safariVersion = getBrowserVersion(safari);

if (!chromeVersion && !firefoxVersion && !safariVersion) {
return false;
}

const browserVersions = [
chromeVersion && {name: 'chrome', version: chromeVersion},
firefoxVersion && {name: 'firefox', version: firefoxVersion},
safariVersion && {name: 'safari', version: safariVersion}
].filter(Boolean);

const minDate = getMinDate(browserVersions, name);

if (minDate === false) {
return false;
};

const getBrowserSupport = (compat) => {
const supportedBrowsers = [];
for (let [browser, supportData] of Object.entries(compat.support || {})) {
if (typeof supportData === "string" || !supportData) continue;
const versionAdded = Array.isArray(supportData.version_added)
? supportData.version_added[0]
: supportData.version_added;
if (versionAdded) {
supportedBrowsers.push({ name: browser, version: versionAdded });
}
}
return supportedBrowsers;
};

return minDate;
}

const renameType = (type) => ({
'at-rules': '@',
'properties': 'Свойство',
'selectors': 'Селектор',
'types': 'Тип'
}[type] || type);
const extractData = (properties, parent = null) => {
for (let [propertyName, propertyData] of Object.entries(properties)) {
const compat = propertyData.__compat;
if (!compat) continue;

for (const cssKey in css) {
const type = renameType(cssKey);
const properties = css[cssKey];
const browserSupport = getBrowserSupport(compat);
const date = getMinDate(browserSupport);
if (!date) continue;

for (const propertyName in properties) {
const name = propertyName;
const mdnUrl = properties[propertyName]['__compat']['mdn_url'];
const specUrl = getSpecUrl(properties, propertyName);

const date = getDate(properties[propertyName]['__compat'], name);

if (date === false) continue;

data.push({
name,
mdnUrl,
specUrl,
const year = date.split("-")[0];
const entry = {
name: propertyName,
date,
type,
type: parent ? "Значение" : "Свойство",
parent: parent || null,
mdnUrl: compat.mdn_url || null,
specUrl: compat.spec_url || null,
year: date.split('-')[0]
});
}
}
};

const sortDataByYear = (data) => {
const sortedData = {};
for (let item of data) {
const year = item.date.split('-')[0];
if (!sortedData[year]) {
sortedData[year] = [];
if (!groupedData[year]) {
groupedData[year] = [];
}
sortedData[year].push(item);
}
groupedData[year].push(entry);

for (let year in sortedData) {
sortedData[year].sort((a, b) => b.date.localeCompare(a.date));
extractData(propertyData, propertyName);
}
};

return sortedData;
for (const cssKey in css) {
extractData(css[cssKey]);
}

const sortedData = sortDataByYear(data);
for (const year in groupedData) {
groupedData[year].sort((a, b) => b.date.localeCompare(a.date));
}

fs.writeFileSync('./src/data/data.js', `export const data = ${JSON.stringify(sortedData)}`);
fs.writeFileSync('./data.js', `export const data = ${JSON.stringify(groupedData)};`);
2 changes: 1 addition & 1 deletion src/data/data.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/styles/global.css
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,6 @@ body {
font-size: 20px;
line-height: 1.3;
display: grid;
grid-template-columns: minmax(20px, 1fr) minmax(280px, 780px) minmax(20px, 1fr);
grid-template-columns: minmax(0, 1fr) minmax(320px, 780px) minmax(0, 1fr);
grid-template-areas: ". content .";
}

0 comments on commit 8b175aa

Please sign in to comment.