Skip to content

Commit

Permalink
refactor default template
Browse files Browse the repository at this point in the history
  • Loading branch information
lawwman committed Jan 19, 2024
1 parent 31d537d commit af609e2
Showing 1 changed file with 35 additions and 102 deletions.
137 changes: 35 additions & 102 deletions src/DefaultTemplate.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ interface ConnectionFailureProps {
document?: TemplateProps["document"];
}

const DEFAULT_ID = "default-template";

const container = {
maxWidth: "1024px",
marginRight: "auto",
Expand All @@ -21,7 +23,6 @@ const container = {
paddingLeft: "1rem",
};

const textColor = `#333`;
const paddingBox = `.75rem 1.25rem`;

function extractTemplateInfo(document: TemplateProps["document"]) {
Expand Down Expand Up @@ -75,30 +76,32 @@ const Example: React.FunctionComponent<ExampleProps> = ({ template }) => {

export const DefaultTemplate: React.FunctionComponent<DefaultTemplateProps> = (props) => {
return (
<div id="default-template" style={{ fontFamily: "Arial" }}>
{/* Banner */}
<div style={{ backgroundColor: "#FDFDEA", borderLeft: "2px solid #8E4B10", padding: "16px 16px 16px 18px" }}>
<p style={{ margin: "0px", lineHeight: "21px", fontSize: "16px", color: "#8E4B10", fontWeight: "700" }}>
{props.title}
</p>
<p style={{ margin: "0px", lineHeight: "21px", fontSize: "14px", color: "#374151", marginTop: "6px" }}>
{props.description}
</p>
<div id={DEFAULT_ID}>
<div style={{ ...container, fontFamily: "Arial" }}>
{/* Banner */}
<div style={{ backgroundColor: "#FDFDEA", borderLeft: "2px solid #8E4B10", padding: "16px 16px 16px 18px" }}>
<p style={{ margin: "0px", lineHeight: "21px", fontSize: "16px", color: "#8E4B10", fontWeight: "700" }}>
{props.title}
</p>
<p style={{ margin: "0px", lineHeight: "21px", fontSize: "14px", color: "#374151", marginTop: "6px" }}>
{props.description}
</p>
</div>

{/* plain text preview */}
{props.document && (
<pre
style={{
backgroundColor: "#f7f8fc",
padding: paddingBox,
whiteSpace: "pre-wrap",
wordWrap: "break-word",
}}
>
{JSON.stringify(props.document, null, 2)}
</pre>
)}
</div>

{/* plain text preview */}
{props.document && (
<pre
style={{
backgroundColor: "#f7f8fc",
padding: paddingBox,
whiteSpace: "pre-wrap",
wordWrap: "break-word",
}}
>
{JSON.stringify(props.document, null, 2)}
</pre>
)}
</div>
);
};
Expand Down Expand Up @@ -138,12 +141,12 @@ export const ConnectionFailureTemplate: React.FunctionComponent<ConnectionFailur
<>
Try refreshing the page or check your internet connection. If the issue continues, please contact the issuer
with the information below:
{props.document && (
<>
<br />
<br />
<Example template={extractTemplateInfo(props.document)} />
</>
<br />
<br />
{props.document ? (
<Example template={extractTemplateInfo(props.document)} />
) : (
<span style={{ fontFamily: "Courier" }}>Template URL: “{props.source}”</span>
)}
</>
}
Expand All @@ -152,84 +155,14 @@ export const ConnectionFailureTemplate: React.FunctionComponent<ConnectionFailur
);
};

// export const DefaultTemplate: React.FunctionComponent<TemplateProps> = (props) => {
// return (
// <div id="default-template">
// <div style={{ ...container, ...{ color: textColor } }}>
// <h1
// style={{
// fontSize: "26px",
// }}
// >
// This is the OpenAttestation default renderer
// </h1>
// <div
// role="alert"
// style={{
// marginTop: "1.5rem",
// marginBottom: "1.5rem",
// backgroundColor: "#fffbec",
// padding: paddingBox,
// }}
// >
// <div style={{ display: "flex", flexWrap: "nowrap", flexDirection: "row", alignItems: "center" }}>
// <div style={{ flex: "0 0 50px", marginRight: "24px" }}>
// <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
// <g clipPath="url(#a)">
// <path
// d="m47.7 19.6.3 2.1c.7 5-.3 10.1-2.8 14.4-2.5 4.4-6.3 7.9-10.9 9.9-4.6 2.1-9.7 2.6-14.6 1.5s-9.3-3.8-12.6-7.6c-3.3-3.8-5.2-8.6-5.6-13.6-.3-5 1-10 3.7-14.2C8 7.9 12 4.7 16.7 3c4.7-1.7 9.9-1.9 14.7-.5M25.3 10.9v21"
// stroke="#F57A29"
// strokeWidth="3"
// strokeLinecap="round"
// strokeLinejoin="round"
// />
// <path d="M25.3 40.4a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z" fill="#F57A29" />
// </g>
// <defs>
// <clipPath id="a">
// <rect width="49.7" height="49.7" fill="#fff" />
// </clipPath>
// </defs>
// </svg>
// </div>
// <div style={{ flex: "1 1 auto" }}>
// You see this template because the certificate issuer misconfigured the template configuration of your
// document. Please check with the certificate issuer. More information is available in{" "}
// <a
// style={{ color: "initial", textDecoration: "underline" }}
// href="https://openattestation.com/docs/advanced/custom-renderer"
// target="_blank"
// rel="noopener noreferrer"
// >
// the documentation
// </a>
// .
// </div>
// </div>
// </div>
// <pre
// style={{
// backgroundColor: "#f7f8fc",
// padding: paddingBox,
// whiteSpace: "pre-wrap",
// wordWrap: "break-word",
// }}
// >
// {JSON.stringify(props.document, null, 2)}
// </pre>
// </div>
// </div>
// );
// };

export const wrongTemplate: TemplateWithComponent = {
id: "default-template", // whats this for? does it matter?
id: DEFAULT_ID,
label: "Default",
template: WrongTemplate,
};

export const noTemplate: TemplateWithComponent = {
id: "default-template", // whats this for? does it matter?
id: DEFAULT_ID,
label: "Default",
template: NoTemplate,
};

0 comments on commit af609e2

Please sign in to comment.