From b996192c8ae270f07d5edd800c31715334859c8b Mon Sep 17 00:00:00 2001
From: LazyYuuki <huy2840@gmail.com>
Date: Sun, 25 Aug 2024 19:20:17 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Finish=20basic=20we=20components=20?=
 =?UTF-8?q?guide?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/SUMMARY.md                            |  6 ++--
 src/chapter1/web-components/image.md      | 18 ++++++++++++
 src/chapter1/web-components/references.md | 36 +++++++++++++++++++++++
 src/chapter1/web-components/video.md      | 21 +++++++++++++
 4 files changed, 78 insertions(+), 3 deletions(-)
 create mode 100644 src/chapter1/web-components/image.md
 create mode 100644 src/chapter1/web-components/references.md
 create mode 100644 src/chapter1/web-components/video.md

diff --git a/src/SUMMARY.md b/src/SUMMARY.md
index d27c8ee..a2c835e 100644
--- a/src/SUMMARY.md
+++ b/src/SUMMARY.md
@@ -10,7 +10,7 @@
         - [Team Member Component](./chapter1/web-components/team-member.md)
         - [Table of Contents Component](./chapter1/web-components/table-of-contents.md)
         - [Table Component](./chapter1/web-components/table.md)
-        - [Image Component]()
-        - [Video Component]()
-        - [References Component]()
+        - [Image Component](./chapter1/web-components/image.md)
+        - [Video Component](./chapter1/web-components/video.md)
+        - [References Component](./chapter1/web-components/references.md)
 - [Optional enhancement]()
diff --git a/src/chapter1/web-components/image.md b/src/chapter1/web-components/image.md
new file mode 100644
index 0000000..45f1b4c
--- /dev/null
+++ b/src/chapter1/web-components/image.md
@@ -0,0 +1,18 @@
+# Image Component
+
+The image component is a simple component that can be used to quickly display an image with an attached subtitle. The format is as follow:
+
+```html
+<image-component 
+    tag="image" 
+    source="assets/requirement.png"
+    subtitle="Image 1: iDP suggested pathway"
+></image-component>
+```
+
+The image componet has 3 main attributes:
+- `tag`: this is the same as the `id` attributes in the `div` element, you can use this with `<a>` link to point to the picture.
+- `source`: this is the source of your image, it can be an image in the `assets` folder like in the example, or it could also be an url pointing to an image from an external page.
+- `subtitle`: add subtitle text under the image.
+
+This is a very simple component that you can also create through raw html, but if you don't need much modifications, using this component would be faster and cleaner.
diff --git a/src/chapter1/web-components/references.md b/src/chapter1/web-components/references.md
new file mode 100644
index 0000000..5787466
--- /dev/null
+++ b/src/chapter1/web-components/references.md
@@ -0,0 +1,36 @@
+# References Component
+
+The references component format is as follow:
+
+```html
+<div id="references" class="references">
+  <sl-divider></sl-divider>
+  <h2>References</h2>
+  <ul>
+    <li>
+      Brody, J. E. (2007, December 11). Mental reserves keep brain agile. The New York Times. Retrieved from
+      http://www.dowjones.com/factiva/
+    </li>
+    <li>
+      Chamberlin, J., Novotney, A., Packard, E., & Price, M. (2008, May). Enhancing worker well-being: Occupational
+      health psychologists convene to share their research on work, stress, and health. Monitor on Psychology,
+      39(5), 26-29.
+    </li>
+    <li>
+      Jones, T. J., & Fields, N. (2003). Emotional quotient and personality. E-Journal of Applied Psychology, 2(2),
+      38-45. Retrieved from http://ejournalappliedpsyc/index.php/ejap
+    </li>
+  </ul>
+</div>
+```
+
+The only part that you should modifi is between the `<ul>` tag. You simply just need to add an entry as follows:
+
+```html
+<li>
+    your reference entry
+</li>
+```
+
+in between the `<ul>` tag as shown above and you are good to.
+
diff --git a/src/chapter1/web-components/video.md b/src/chapter1/web-components/video.md
new file mode 100644
index 0000000..4e8af8f
--- /dev/null
+++ b/src/chapter1/web-components/video.md
@@ -0,0 +1,21 @@
+# Video Component
+
+The video component is very similar to the image component, with the difference is that it display video instead. This is actually how video from site such as Youtube can be embedded in different webpage. The format is as follow:
+
+```html
+<video-component 
+    tag="rick" 
+    source="https://www.youtube.com/embed/dQw4w9WgXcQ"
+    subtitle="Video: Never gonna give you up?"
+></video-component>
+```
+
+The image componet has 3 main attributes:
+- `tag`: this is the same as the `id` attributes in the `div` element, you can use this with `<a>` link to point to the picture.
+- `source`: this is the source of your video, in this template, we encourage you to upload the video you want as a listed or unlisted video on Youtube first. Then, you can use the link provided from Youtube to your video as the source.Putting a video into the `assets` folder and then put the link to the source, may or may not work. It also bad practice as Github only meant to host small static file, so you might meet their file size restriction. 
+- `subtitle`: add subtitle text under the video.
+
+> <p class="note"> Note
+>
+> The video might not be able to render properly when you are using the local server. This is because Youtube is protecting your browser and their videos from potential exploit. Don't worry if it doesn't show the video properly on your website while developing. As long as the link is correct, it will load just fine once it is deployed to Github.
+