Skip to content

Commit

Permalink
updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@FelipeSimoes
FelipeSimoes committed Oct 7, 2024
1 parent d63e68f commit 9ad279e
Show file tree
Hide file tree
Showing 5 changed files with 67 additions and 21 deletions.
14 changes: 10 additions & 4 deletions blocks/theming/theming.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,16 +39,22 @@ export default class Theming extends ComponentBase {
this.fontFace = names
.map((key) => {
// files

const types = Object.keys(data[key].options);
return types
.map(
(type) => `@font-face {
.map((type) => {
document.head.insertAdjacentHTML(
'beforeend',
`<link rel="preload" href="${window.location.origin}/fonts/${data[key].options[type]}" as="font" type="font/woff2" crossorigin>`,
);
return `@font-face {
font-display: fallback;
font-family: '${key}';
src: url('${window.location.origin}/fonts/${data[key].options[type]}');
${type === 'italic' ? 'font-style' : 'font-weight'}: ${type};
}
`,
)
`;
})
.join('');
})
.join('');
Expand Down
2 changes: 1 addition & 1 deletion scripts/render/component-list.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export const componentList = {
const nextSibling = { ...node.nextSibling };
if (nextSibling && nextSibling.tag === 'a') {
const { aria } = nextSibling.children[0].text;
node.attributes.push({ name: 'aria-label', value: aria });
node.attributes['aria-label'] = aria;
nextSibling.children = [node];
node.parentNode.children.splice(nextSibling.indexInParent, 1, {
tag: 'textNode',
Expand Down
19 changes: 18 additions & 1 deletion scripts/render/dom-reducers.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// eslint-disable-next-line import/prefer-default-export

import { loadModule } from '../libs.js';
import { getMeta, loadModule } from '../libs.js';
import { componentList, injectedComponents } from './component-list.js';

window.loadedComponents = window.loadedComponents || {};
Expand All @@ -22,6 +22,23 @@ export const filterNodes = (nodes, tag, className) => {
return filtered;
};

export const eagerImage = (node) => {
if (!window.raqnEagerImages) {
const eager = getMeta('eager-images');
window.raqnEagerImages = parseInt(eager, 10) || 0;
}
if (node.tag === 'picture' && window.raqnEagerImages > 0) {
const img = node.children.find((child) => child.tag === 'img');
if (img) {
const { width, height } = img.attributes;
img.attributes.style = `aspect-ratio: ${width} / ${height};`;
img.attributes.loading = 'eager';
window.raqnEagerImages -= 1;
}
}
return node;
};

export const prepareGrid = (node) => {
if (node.children && node.children.length > 0) {
const grids = filterNodes(node.children, 'raqn-grid');
Expand Down
22 changes: 17 additions & 5 deletions scripts/render/dom.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
inject,
loadModules,
toWebComponent,
eagerImage,
} from './dom-reducers.js';

// define instances for web components
Expand All @@ -26,7 +27,7 @@ export const nodeProxy = (node) => {
const p = new Proxy(node, {
get(target, prop) {
if (prop === 'hasAttributes') {
return () => target.attributes.length > 0;
return () => Object.keys(target.attributes).length > 0;
}
if (prop === 'path') {
return recursiveParent(target);
Expand Down Expand Up @@ -78,14 +79,23 @@ export const generateDom = (virtualdom) => {
const { childNodes } = element;
const child = childNodes.length > 0 ? generateDom(childNodes) : [];
const classList = element.classList && element.classList.length > 0 ? [...element.classList] : [];

const attributes = {};
if (element.hasAttributes && element.hasAttributes()) {
// eslint-disable-next-line no-plusplus
for (let j = 0; j < element.attributes.length; j++) {
const { name, value } = element.attributes[j];
attributes[name] = value;
}
}
dom.push(
nodeProxy({
tag: element.tagName ? element.tagName.toLowerCase() : 'textNode',
children: child,
class: classList,
attributesValues: classToFlat(classList),
id: element.id,
attributes: element.hasAttributes && element.hasAttributes() ? element.attributes : [],
attributes,
text: !element.tagName ? element.textContent : null,
reference: element,
}),
Expand Down Expand Up @@ -114,10 +124,10 @@ export const renderVirtualDom = (virtualdom) => {
}
if (element.attributes) {
// eslint-disable-next-line no-plusplus
for (let j = 0; j < element.attributes.length; j++) {
const { name, value } = element.attributes[j];
Object.keys(element.attributes).forEach((name) => {
const value = element.attributes[name];
el.setAttribute(name, value);
}
});
}
element.initialAttributesValues = classToFlat(element.class);
if (element.text) {
Expand Down Expand Up @@ -145,9 +155,11 @@ export const curryManipulation =
export const manipulation = curryManipulation([
recursive(cleanEmptyTextNodes),
recursive(cleanEmptyNodes),
recursive(eagerImage),
inject,
recursive(toWebComponent),
recursive(prepareGrid),

loadModules,
]);
// preset manipulation for framents and external HTML
Expand Down
31 changes: 21 additions & 10 deletions styles/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,9 +82,20 @@ body.no-scroll {
bottom: 0;
}

/* avoid font most swaps */
body,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--p-font-family, system-ui);
}

body > * {
color: var(--text, #000);
font-family: var(--p-font-family, roboto);
font-family: var(--p-font-family, system-ui);
font-size: var(--p-font-size, 1rem);
font-weight: var(--p-font-weight, normal);
font-style: var(--p-font-style, normal);
Expand Down Expand Up @@ -119,55 +130,55 @@ h4 {
}

h1 {
font-family: var(--h1-font-family, roboto);
font-family: var(--h1-font-family, system-ui);
font-size: var(--h1-font-size, 1rem);
font-weight: var(--h1-font-weight, normal);
font-style: var(--h1-font-style, normal);
line-height: var(--h1-line-height, 1.2);
}

h2 {
font-family: var(--h2-font-family, roboto);
font-family: var(--h2-font-family, system-ui);
font-size: var(--h2-font-size, 1rem);
font-weight: var(--h2-font-weight, normal);
font-style: var(--h2-font-style, normal);
line-height: var(--h2-line-height, 1.2);
}

h3 {
font-family: var(--h3-font-family, roboto);
font-family: var(--h3-font-family, system-ui);
font-size: var(--h3-font-size, 1rem);
font-weight: var(--h3-font-weight, normal);
font-style: var(--h3-font-style, normal);
line-height: var(--h3-line-height, 1.3);
}

h5 {
font-family: var(--h5-font-family, roboto);
font-family: var(--h5-font-family, system-ui);
font-size: var(--h5-font-size, 1rem);
font-weight: var(--h5-font-weight, normal);
font-style: var(--h5-font-style, normal);
line-height: var(--h5-line-height, 1.5);
}

h4 {
font-family: var(--h4-font-family, roboto);
font-family: var(--h4-font-family, system-ui);
font-size: var(--h4-font-size, 1rem);
font-weight: var(--h4-font-weight, normal);
font-style: var(--h4-font-style, normal);
line-height: var(--h4-line-height, 1.4);
}

h6 {
font-family: var(--h6-font-family, roboto);
font-family: var(--h6-font-family, system-ui);
font-size: var(--h6-font-size, 1rem);
font-weight: var(--h6-font-weight, normal);
font-style: var(--h6-font-style, normal);
line-height: var(--h6-line-height, 1.6);
}

label {
font-family: var(--label-font-family, roboto);
font-family: var(--label-font-family, system-ui);
font-size: var(--label-font-size, 1rem);
font-weight: var(--label-font-weight, normal);
font-style: var(--label-font-style, normal);
Expand Down Expand Up @@ -221,7 +232,7 @@ a {
align-items: center;
color: var(--highlight, inherit);
text-decoration: none;
font-family: var(--a-font-family, roboto);
font-family: var(--a-font-family, system-ui);
font-size: var(--a-font-size, 1rem);
font-weight: var(--a-font-weight, normal);
font-style: var(--a-font-style, normal);
Expand All @@ -239,7 +250,7 @@ button {
display: inline-flex;
align-items: center;
text-decoration: none;
font-family: var(--button-font-family, roboto);
font-family: var(--button-font-family, system-ui);
font-size: var(--button-font-size, 1rem);
font-weight: var(--button-font-weight, normal);
font-style: var(--button-font-style, normal);
Expand Down

0 comments on commit 9ad279e

Please sign in to comment.