@crowdin/app-project-module
Version:
Module that generates for you all common endpoints for serving standalone Crowdin App
89 lines (88 loc) • 8.45 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.AboutPage = void 0;
const react_1 = __importDefault(require("react"));
const AboutPage = ({ name, logo, manifest, storeLink, showDebugLink }) => (react_1.default.createElement("html", null,
react_1.default.createElement("head", null,
react_1.default.createElement("title", null, name),
react_1.default.createElement("meta", { charSet: "utf-8" }),
react_1.default.createElement("meta", { httpEquiv: "Content-type", content: "text/html; charset=utf-8" }),
react_1.default.createElement("meta", { name: "viewport", content: "width=device-width, initial-scale=1" }),
storeLink && react_1.default.createElement("link", { rel: "canonical", href: storeLink }),
react_1.default.createElement("link", { rel: "stylesheet", href: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css", integrity: "sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH", crossOrigin: "anonymous" }),
react_1.default.createElement("link", { href: "/assets/css/about.css", media: "screen", rel: "stylesheet", type: "text/css" })),
react_1.default.createElement("body", null,
react_1.default.createElement("header", { id: "header", className: "navbar navbar-expand-lg fixed-top crowdin-navbar" },
react_1.default.createElement("a", { itemProp: "url", className: "navbar-brand crowdin-navbar__logo", href: "https://crowdin.com", title: "Crowdin \u2014 Localization Management Platform" },
react_1.default.createElement("svg", { className: "d-none d-md-block d-lg-block default-logo", width: "180", height: "54", "aria-labelledby": "crowdinLogoTitle" },
react_1.default.createElement("title", { id: "crowdinLogoTitle" }, "Crowdin"),
react_1.default.createElement("image", { className: "d-none d-md-block d-lg-block", href: "/assets/img/crowdin.svg", width: "180", height: "54" })),
react_1.default.createElement("svg", { className: "d-block d-md-none d-lg-none default-logo", width: "173", height: "32" },
react_1.default.createElement("image", { className: "d-block d-md-none d-lg-none", href: "/assets/img/crowdin_small.svg", width: "173", height: "32" }))),
react_1.default.createElement("div", { className: "flex-nowrap justify-content-lg-end ml-auto my-lg-0" },
react_1.default.createElement("div", { className: "pr-0 ml-2 my-2" },
react_1.default.createElement("span", { className: "crowdin-navbar__nav-link contact " },
react_1.default.createElement("a", { title: "Contact", href: "https://crowdin.com/contacts" }, "Contact"))))),
react_1.default.createElement("div", { className: "main" },
react_1.default.createElement("div", { className: "container" },
react_1.default.createElement("div", { className: "row crwd__product-template__header align-items-center" },
react_1.default.createElement("div", { className: "offset-lg-1 col-lg-2 product-single__photo-wrapper crwd__product-single__photo-wrapper" },
react_1.default.createElement("div", { className: "product-single__photo text-center mb-3 mb-lg-0" },
react_1.default.createElement("div", { className: "image-holder" },
react_1.default.createElement("img", { width: "200", src: logo, alt: name, id: "FeaturedImage-product-template", className: "img-fluid lazyloaded ls-is-cached product-featured-img", style: { position: 'unset' } })))),
react_1.default.createElement("div", { className: " col-lg-8 crwd__product-template__header__title-container" },
react_1.default.createElement("div", { className: "product-single__meta" },
react_1.default.createElement("div", { className: "section-header" },
react_1.default.createElement("h1", { className: "product-single__title text-center text-lg-left" },
react_1.default.createElement("span", null, name)),
react_1.default.createElement("div", { className: "description" },
name,
" extends the default functionality available in Crowdin and Crowdin Enterprise by providing additional capabilities to enhance your localization workflows."))))),
react_1.default.createElement("div", { className: "row" },
react_1.default.createElement("div", { className: "offset-lg-1 col-lg-10" },
react_1.default.createElement("p", null, "To install this app, you can use either of the following methods: "),
react_1.default.createElement("ol", null,
react_1.default.createElement("li", null,
"Install it directly from the",
' ',
react_1.default.createElement("a", { href: "https://store.crowdin.com/", target: "_blank" }, "Crowdin Store"),
", if available."),
react_1.default.createElement("li", null, "Install it manually using the manifest URL below.")),
react_1.default.createElement("p", null,
"For detailed steps, follow the",
' ',
react_1.default.createElement("a", { href: "https://support.crowdin.com/developer/crowdin-apps-installation/", target: "_blank" }, "App Installation")),
react_1.default.createElement("div", { className: "mb-3" },
react_1.default.createElement("label", { htmlFor: "manifest-url", className: "form-label" }, "Paste the following manifest URL when prompted during manual installation:"),
react_1.default.createElement("div", { className: "input-group" },
react_1.default.createElement("input", { type: "text", className: "form-control", id: "manifest-url", value: manifest, readOnly: true }),
react_1.default.createElement("button", { className: "btn btn-outline-secondary", type: "button", id: "copy-button" }, "Copy"))),
storeLink && (react_1.default.createElement("div", null,
"Read more about",
' ',
react_1.default.createElement("a", { href: storeLink, target: "_blank", title: `${name} on Crowdin Store` }, name),
".")),
showDebugLink && (react_1.default.createElement("div", { className: "mt-4 pt-3 border-top" },
react_1.default.createElement("p", { className: "mb-2" },
react_1.default.createElement("strong", null, "Developer Tools")),
react_1.default.createElement("p", null,
"Access the",
' ',
react_1.default.createElement("a", { href: "/__debug", target: "_blank", title: "Open developer console in a new tab" }, "Developer Console"),
' ',
"to inspect requests, debug issues, and monitor application behavior."))))))),
react_1.default.createElement("script", { dangerouslySetInnerHTML: {
__html: `
document.getElementById('copy-button').addEventListener('click', async function() {
var text = document.getElementById('manifest-url').value;
await navigator.clipboard.writeText(text);
var btn = document.getElementById('copy-button');
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
`.trim(),
} }))));
exports.AboutPage = AboutPage;