mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-04 11:55:50 +00:00
ec28d8fee8
adds events page, updates convert-template script adds proper filter logic to events page, adds moment converts history page converts impact and xrpl-ledger-overview page try getting animation on impact to work converts xrp overview page and logic adds contribute page, still needs typeform integration and animations converts developer funding page adds dev tools page add missing image adds code samples py conversion to js adds hook to read current theme, adds animations to impact page adds careers animations adds correct animations for contribute page adds light mode v of animations on contribute page adds animations to uses page adds modal logos and uses modal logic completes uses page more changes Fix casing issues with use case files fix grid issue on uses
114 lines
3.8 KiB
JavaScript
114 lines
3.8 KiB
JavaScript
/**
|
|
* THis is very hacky script to convert jinja templates to jsx.
|
|
* It doesn't cover all cases yet. I tested it for index page only.
|
|
*/
|
|
|
|
const fs = require('fs');
|
|
const path = require('path');
|
|
|
|
const HtmlToJsx = require('htmltojsx');
|
|
|
|
const fileName = process.argv[2];
|
|
const pageName = path.basename(fileName, '.html.jinja').replace('page-', '').replace('home', 'index');
|
|
|
|
const outputFileName = 'content/' + pageName + '.page.tsx';
|
|
|
|
const componentName = pageName.substring(0, 1).toUpperCase() + pageName.substring(1);
|
|
|
|
const content = fs.readFileSync(fileName, 'utf8');
|
|
|
|
const mainBlockOffset = content.indexOf('{% block main %}');
|
|
const mainBlockEndOffset = content.indexOf('{% endblock %}', mainBlockOffset);
|
|
const mainBlock = content.substring(mainBlockOffset + 16, mainBlockEndOffset);
|
|
|
|
const classes = content.match(/{% block mainclasses %}(.+?){% endblock %}/)?.[1] || '';
|
|
|
|
const setStatements = mainBlock.match(/{% set ([\w\d]+) = ((.|\n)+?)%}/g);
|
|
const sets = setStatements?.map(setStatement => {
|
|
const setStatementParts = setStatement.split(' = ');
|
|
const setStatementName = setStatementParts[0].replace('{% set ', '');
|
|
const setStatementValue = setStatementParts[1].replace(/%}/g, '');
|
|
return {
|
|
name: setStatementName,
|
|
value: setStatementValue.replace(/_\("(.+?)"\)/g, '"$1"'),
|
|
};
|
|
});
|
|
|
|
const mainBlockWithoutSets = mainBlock.replace(/{% set ([\w\d]+) = ((.|\n)+?)%}/g, '');
|
|
|
|
const replacedJinja = mainBlockWithoutSets
|
|
.replace(/{%/g, '$$$$')
|
|
.replace(/%}/g, '$$$$')
|
|
.replace(/{{/g, '$$$$')
|
|
.replace(/}}/g, '$$$$');
|
|
|
|
const HtmlToJsxInst = new HtmlToJsx({
|
|
createClass: false,
|
|
indent: ' ',
|
|
});
|
|
const jsx = HtmlToJsxInst.convert(replacedJinja);
|
|
|
|
// replace trans
|
|
|
|
// Specifically handling <img> tags
|
|
const handleImgTags = (str) => {
|
|
return str.replace(/<img ([^>]*?)>/g, function(match) {
|
|
// If alt is not present, add a default one
|
|
if (!/alt=/.test(match)) {
|
|
return match.replace(/<img /, '<img alt="default-alt-text" ');
|
|
}
|
|
// If alt is present but malformed
|
|
if (/alt=\{(\d+)\}/.test(match)) {
|
|
return match.replace(/alt=\{(\d+)\}/, `alt="default-alt-text"`);
|
|
}
|
|
return match; // if alt is fine, return as is
|
|
});
|
|
};
|
|
const jsxWithHandledImgTags = handleImgTags(jsx);
|
|
|
|
// replace $$ for card in cards3 $$
|
|
const jsxWithReplacedForLoops = jsxWithHandledImgTags
|
|
.replace(/\$\$ for ([\w\d]+) in ([\w\d]+) \$\$/g, ' { $2.map($1 => (')
|
|
.replace(/\$\$ endfor \$\$/g, ')) }')
|
|
.replace(/="\$\$(\w+\.\w+)\$\$"/g, '={$1}')
|
|
.replace(/="\$\$(\w+\.\w+)\$\$\$\$(\w+\.\w+)\$\$"/g, '={$1 + $2}')
|
|
.replace(/="\$\$(\w+\.\w+)\$\$(.+?)"/g, '={$1 + "$2"}')
|
|
.replace(/\$\$(\w+\.\w+)\$\$/g, '{$1}')
|
|
.replace(/<img ([^>]*?)src="(.*?)"/g, '<img $1src={require("$2")}')
|
|
.replace(/<img ([^>]*?)src="(.*?)"/g, (match, attrs, src) => {
|
|
// Replace ./assets with ./static in the src attribute
|
|
const newSrc = src.replace('./assets', './static');
|
|
return `<img ${attrs}src={require("${newSrc}")}`;
|
|
});
|
|
|
|
const jsxWithReplacedTranslate = jsxWithReplacedForLoops.replace(
|
|
/\$\$ trans \$\$((?:.|\n)+?)\$\$ endtrans \$\$/g,
|
|
(match, match1) => {
|
|
if (match1.indexOf('<br className="until-sm" />') > -1) {
|
|
const parts = match1.split('<br className="until-sm" />');
|
|
return parts.map(part => '{translate(' + JSON.stringify(part) + ')}').join('<br className="until-sm" />' + '\n');
|
|
}
|
|
return '{translate(' + JSON.stringify(match1) + ')}';
|
|
}
|
|
);
|
|
|
|
const output = `import * as React from 'react';
|
|
import { useTranslate } from '@portal/hooks';
|
|
|
|
${!!sets && sets.map(set => `const ${set.name} = ${set.value};`).join('\n\n')}
|
|
|
|
const target= {prefix: ''}; // TODO: fixme
|
|
|
|
export default function ${componentName}() {
|
|
const { translate } = useTranslate();
|
|
|
|
return (
|
|
<div className="${classes}">
|
|
${jsxWithReplacedTranslate}
|
|
</div>
|
|
)
|
|
}
|
|
`;
|
|
|
|
fs.writeFileSync(outputFileName, output, 'utf8');
|