About this website

This website was created using Jekyll and hosted using GitHub Pages.

The source can be found at https://eu-jcop.github.io/jcopweb/.

Additions/corrections/suggestions are welcome.

How to run the website on your local computer

• Make sure to install Jekyll on your computer using the instructions provided on their website.
• In the Terminal, run this command to check if Jekyll is installed. It is recommended to install v4.1.1 and above.

jekyll -v

• Clone the JCOP Website repo https://eu-jcop.github.io/jcopweb/ to your computer.

cd jcopweb

jekyll serve

• Running jekyll serve creates a folder called _site under the folder jcopweb. Jekyll uses this folder content to serve the website locally. The folder _site should not be checked into the repository.

• Browse the website by going to this URL. Make sure to stop the server and run again each time a change is made to the _config.yml file.

http://127.0.0.1:4000/index.html

Website Structure

.
+-- _includes
|   -- footer.html                  # Contains code to include Back to Top button and JavaScript used in this website.
|   -- header.html                  # Contains code to include Stylesheets used in this website.
|   -- navbar.html                  # Contains code to display top level and mobile navigation including website search.
+-- _layouts
|   -- default.html                 # Contains HTML and Jekyll code to implement a re-usable page layout. (Used for index.html)
|   -- page.html                    # Imports the layout used for default.html and adds extra layout to present inner HTML pages.
+-- _sass
|   +-- main.scss                   # Contains re-usable SASS properties for the website.
+-- assets
|   +-- css
|       -- main.scss                # Imports the re-usable SASS properties for the website.
|       -- style.css                # Contains CSS for each section of the website.
|   +-- img   
|   +-- js
|       -- main.js                  # Contains JavaScript used for this website.
|   +-- vendor
|       +-- animate.css             # Supports Basic animations like Fade up, Fade Down etc.
|       +-- aos                     # To animate HTML elements when a user slides down a page.
|       +-- bootstrap
|       +-- boxicons
|       +-- icofont
|       +-- jquery-sticky
|       +-- jquery.easing
|       +-- jquery
+-- content
|   +-- homepage
|       +-- carousel
|           -- slide1.html           # HTML imported for First Slide of the Carousel in index.html
|           -- slide2.html           # HTML imported for Second Slide of the Carousel in index.html
|           -- slide3.html           # HTML imported for Third Slide of the Carousel in index.html
|       -- paragraph1.md             # Markdown imported as paragraph1 with figure in index.html
|       -- paragraph2.md             # Markdown imported as paragraph2 with figure in index.html
|       -- paragraph3.md             # Markdown imported as paragraph3 with figure in index.html
|       -- paragraph4.md             # Markdown imported as paragraph4 with figure in index.html
+-- _site                            # Folder generated locally when jekyll serve is run. This should not be checked in to the repo.
-- 404.html                          # Invalid URLs point to this page.
-- CNAME                             # Contains Domain name of the JCOP website.
-- _config.yml                       # Jekyll configuration for this website. Requires Server Restart each time it's changed.
-- faq.html                          # Frequently asked Questions (hidden, but the content exitst also in the index.html file in the bottom.)
-- favicon.ico
-- index.html                        # HomePage of this website.
-- consortium.html                   # JCOP Consortium.
-- objectives.html                   # Information about JCOPs objectives.
-- timeline.html                     # JCOP timeline.
-- README.md                         # Documentation on how to use/contribute to this website.

How to add/remove slides in the carousel on the homepage?

index.html is the homepage and it uses Bootstrap Carousel. Please refer to it's documentation to learn more about it.

To add a new slide to the carousel, create a HTML content file in content/homepage/carousel folder similar to other slide-*.html files

Open index.html and add the HTML code inside the carousel-inner section to reflect the following change.

        <!-- Slide 4 -->
        <div class="carousel-item">
          <div class="carousel-container">
            <div class="carousel-content container">
            <!-- Include slide5.html using Jekyll's include_relative tag. 
            See here for more info: https://jekyllrb.com/docs/includes 
            -->
            </div>
          </div>
        </div>

To remove unwanted slides, delete the HTML code and content file for the unused slide.

How to change the timeline in "JCOP timeline" page?

timeline.html is the page where a timeline is present.

To add or remove cards in the timeline, Open timeline.html and find the date you would like to insert a new card and copy paste this HTML. Please make sure to change the Date and Link as necessary.

<div class="timecard" data-aos="fade-up">
    <div class="content">
        <h6>June 06, 2020</h6>.  <!-- This section has the date of the entry -->
            <p> <!-- This section has the content of the entry -->
               <a rel="noopener noreferrer" target="_blank" href="https://codesync.global/media/making-iot-safer-with-beam-otp-cbf20/">
              Making IoT safer with BEAM OTP
              </a>
            </p>
     </div>
</div>

Contributing

Pull requests are welcome. To request changes, please open an issue first to discuss what you would like to change.