Added contribution guide for theme

tuhinpal · tuhinpal · commit 637b146b4a14 · 2021-10-04T17:59:53.000+05:30
diff --git a/README.md b/README.md
@@ -31,6 +31,6 @@ If you have a big website dependent on this repository for open-graph images, th
 
 ## Contribution
 
-Contributions for a theme is welcome. Please see this [example.html](/dynamic-image/blob/master/examples/index.html) for more detail. It is instructed to create an issue before committing some function changes.
+Contributions for a theme is welcome. Please see this [example.html](https://github.com/cachecleanerjeet/dynamic-image/blob/master/examples/index.html) for more detail. It is instructed to create an issue before committing some function changes.
 
 <br><a href="https://www.buymeacoffee.com/tuhinkpal"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=tuhinkpal&button_colour=5F7FFF&font_colour=ffffff&font_family=Cookie&outline_colour=000000&coffee_colour=FFDD00"></a>
diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,32 @@
+<!-- 
+        Create a normal HTML
+        Use these variables to set the content of the page
+            - {{title}}: the title of content
+            - {{content}}: description of content
+            - {{icon}}: logo of content
+            - {{base}}: base url (use it if you are requesting assets from the same server) i.e. use {{base}}/css/base.css insted of /css/base.css
+        Before body part end, please paste this line (See line no 30)
+        If you are using the {{icon}}, please use this onload function; this will hide the image if an image is empty (See lines no 25 & 26)
+        Don't use any javascript because SVG is not picking the changes from the DOM
+        
+        See template-engine for more context. Don't forget to add this to template directory with a cool name (Name: Lowercase, no spaces, no special characters use '-' for spaces)
+
+        Thanks for your contribution! 💗
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Example.</title>
+  </head>
+  <body onload="'{{icon}}' === '' && document.getElementById('icon').remove()">
+    <img src="{{icon}}" id="icon" alt="Icon" />
+    <h1>{{title}}</h1>
+    <p>{{content}}</p>
+  </body>
+    <!-- SVG -->
+  </body>
+</html>
