Collect email address from home page (#174)

Dockerfile

@@ -0,0 +1,8 @@
+FROM ruby
+
+WORKDIR /usr/src/app
+
+COPY . .
+RUN bundle install
+
+CMD ["bundle", "exec", "jekyll", "serve", "--host", "0.0.0.0"]

README.md

@@ -11,6 +11,11 @@ bundle install
 bundle exec jekyll serve
 ```
 
+Alternatively, you can use the following Docker command to test the website locally:
+```bash
+docker compose up --build 
+```
+
 ## Add Content
 ### API Docs
 The API docs are generated by a [CI pipeline](https://github.com/kuzudb/kuzu/actions/workflows/gen-docs.yml). The CI pipeline will automatically generate the docs from comments and create a pull request in this repository. To update API docs, please update the corresponding comments in [Kùzu repo](https://github.com/kuzudb/kuzu) and run "Generate-Docs" pipeline. 

_data/nav-links.yml

@@ -38,7 +38,3 @@
   class: button primary
   target: self
 
-- title: Try Kùzu
-  href: "//demo.kuzudb.com"
-  class: button primary
-  target: _blank

_includes/demo-modal.html

@@ -0,0 +1,26 @@
+<div id="demo-modal" class="modal">
+    <p>Enter your name and email address to try out Kùzu!</p>
+    <p class="demo-modal-error-wrapper" id="demo-modal-error-name">
+        <span>
+            <i class="fa-solid fa-circle-exclamation"></i>
+        </span>
+        Please enter your name.
+    </p>
+    <p class="demo-modal-error-wrapper" id="demo-modal-error-email">
+        <span>
+            <i class="fa-solid fa-circle-exclamation"></i>
+        </span>
+        Please enter a valid email address.
+    </p>
+    <input type="text" name="name" id="demo-name" placeholder="Name" class="demo-input" />
+    <input type="email" name="email" id="demo-email" placeholder="Email Address" class="demo-input" />
+    <div class="demo-modal-buttons">
+        <button class="button primary" id="demo-modal-submit">
+            Try Kùzu
+        </button>
+        &nbsp;
+        <button class="button primary demo-modal-close">
+            Close
+        </button>
+    </div>
+</div>

_includes/footer.html

@@ -16,6 +16,8 @@ <h2>Contact</h2>
       <br />
       &copy; 2023 - 2024 Kùzu Inc. 
       <br />
+      <a href="/privacy" target="_blank" rel="noopener noreferrer">Privacy Policy</a>
+      <br />
       Design based on 
       <a
         href="https://html5up.net/stellar" target="_blank" rel="noopener noreferrer"

_includes/head.html

@@ -14,6 +14,7 @@
   <link rel="stylesheet" href="assets/css/fontawesome.min.css" />
   <link rel="stylesheet" href="assets/css/fontawesome-all.min.css" />
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400" />
+  <link rel="stylesheet" href="assets/css/jquery.modal.min.css" />
   <link rel="stylesheet" href="assets/css/main.css" />
   <noscript>
     <link rel="stylesheet" href="assets/css/noscript.css" />

_includes/intro.html

@@ -9,7 +9,7 @@
         </p>
         <ul class="icons main-buttons">
           <li>
-            <a href="//demo.kuzudb.com" target="_blank" class="button primary large">Try Kùzu</a>
+            <a class="button primary large demo-modal-open" href="#">Try Kùzu</a>
           </li>
           <li>
             <a href="//docs.kuzudb.com" class="button large docs-button">Docs
@@ -31,4 +31,4 @@
       </div>
     </div>
   </div>
-</section>
+</section>

_includes/nav.html

@@ -7,5 +7,12 @@
       </a>
     </li>
     {% endfor %}
+
+    <li>
+      <a class="button primary demo-modal-open" href="#">
+        Try Kùzu
+      </a>
+    </li>
   </ul>
-</nav>
+
+</nav>

_includes/newsletter.html

@@ -0,0 +1,20 @@
+<section id="newsletter" class="main newsletter special">
+    <h1>Subscribe to Our Newsletter</h1>
+    <input type="email" name="email" id="newsletter-email" placeholder="Email Address" />
+    <p class="newsletter-message" id="newsletter-error">
+        <span>
+            <i class="fa-solid fa-circle-exclamation"></i>
+        </span>
+        Please enter a valid email address.
+    </p>
+    <p class="newsletter-message" id="newsletter-success">
+        <span>
+            <i class="fa-solid fa-circle-check"></i>
+        </span>
+        Thank you for subscribing!
+    </p>
+    <button id="newsletter-submit">
+        Submit
+    </button>
+
+</section>

assets/css/main.css

@@ -4331,3 +4331,105 @@ div.community-header>img {
     min-width: 325px;
   }
 }
+
+#main>.main.newsletter {
+  background-color: #dc6428;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 3em;
+  padding-bottom: 3em;
+}
+
+#main>.main.newsletter>h1 {
+  margin: auto;
+  color: white;
+  font-size: 2em;
+  margin-bottom: 0.5em;
+}
+
+input#newsletter-email {
+  max-width: 800px;
+  color: white;
+}
+
+input#newsletter-email::placeholder {
+  color: white !important;
+  opacity: 0.8;
+}
+
+input#newsletter-email::-webkit-input-placeholder {
+  color: white !important;
+  opacity: 0.8;
+}
+
+input#newsletter-email::-moz-placeholder {
+  color: white !important;
+  opacity: 0.8;
+}
+
+input#newsletter-email:-ms-input-placeholder {
+  color: white !important;
+  opacity: 0.8;
+}
+
+p.newsletter-message {
+  color: white;
+  font-size: 0.8em;
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+  display: none;
+}
+
+button#newsletter-submit {
+  color: white !important;
+  font-size: 1.2em;
+  cursor: pointer;
+  margin-top: 1em;
+  padding: 0 1em !important;
+}
+
+.modal a.close-modal {
+  display: none;
+}
+
+.modal p {
+  color: black;
+  margin-bottom: 1em;
+}
+
+.button.primary.demo-modal-close {
+  background-color: transparent !important;
+  box-shadow: inset 0 0 0 1px #dddddd !important;
+  color: #323232 !important;
+}
+
+.demo-modal-buttons {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin-top: 1em;
+}
+
+.demo-modal-buttons>button {
+  font-size: 0.8em;
+}
+
+.demo-input { 
+  color: black !important;
+  border-color: #dddddd !important;
+  margin-bottom: 1em;
+}
+
+.demo-input::placeholder {
+  color: black !important;
+  opacity: 0.8;
+}
+
+.demo-modal-error-wrapper{
+  color: red !important;
+  margin-top: 0.5em;
+  margin-bottom: 0.5em !important;
+  font-size: 0.8em;
+}

assets/js/demo-modal.js

@@ -0,0 +1,98 @@
+const demoModal = $('#demo-modal');
+const demoModalOpenButtons = $('.demo-modal-open');
+const demoModalCloseButton = $('.demo-modal-close');
+const demoModalSubmitButton = $('#demo-modal-submit');
+const demoErrorName = $('#demo-modal-error-name');
+const demoErrorEmail = $('#demo-modal-error-email');
+const demoNameInput = $('#demo-name');
+const demoEmailInput = $('#demo-email');
+
+const resetErrors = () => {
+    demoErrorName.hide();
+    demoErrorEmail.hide();
+};
+
+const resetDemoModal = () => {
+    resetErrors();
+    demoNameInput.val('');
+    demoEmailInput.val('');
+    loadDemoInfo();
+};
+
+const closeDemoModal = () => {
+    $.modal.close();
+};
+
+const loadDemoInfo = () => {
+    const name = window.localStorage.getItem('demoName');
+    const email = window.localStorage.getItem('demoEmail');
+    const retrieved = {};
+    if (name) {
+        retrieved.name = name;
+        demoNameInput.val(name);
+    }
+    if (email) {
+        retrieved.email = email;
+        demoEmailInput.val(email);
+    }
+    return retrieved;
+};
+
+demoModalOpenButtons.on('click', e => {
+    e.preventDefault();
+    const retrieved = loadDemoInfo();
+    if (retrieved.name && retrieved.email) {
+        window.open('//demo.kuzudb.com', '_blank');
+        return;
+    }
+    resetDemoModal();
+    demoModal.modal();
+});
+
+demoModalCloseButton.on('click', e => {
+    e.preventDefault();
+    closeDemoModal();
+});
+
+demoModalSubmitButton.on('click', e => {
+    e.preventDefault();
+    resetErrors();
+    const name = demoNameInput.val();
+    const email = demoEmailInput.val();
+    let valid = true;
+    if (name === '') {
+        demoErrorName.show();
+        valid = false;
+        window.localStorage.removeItem('demoName');
+    } else {
+        window.localStorage.setItem('demoName', name);
+    }
+    if (email === '' || !window.validateEmail(email)) {
+        demoErrorEmail.show();
+        valid = false;
+        window.localStorage.removeItem('demoEmail');
+    } else {
+        window.localStorage.setItem('demoEmail', email);
+    }
+    if (!valid) {
+        return;
+    }
+    $.ajax({
+        url: 'https://track.kuzudb.com',
+        type: 'POST',
+        data: JSON.stringify({
+            name,
+            email,
+            origin: 'TRY_KUZU',
+        }),
+        contentType: 'application/json',
+        success: () => {
+            console.log('Demo request sent');
+        },
+        error: function (error) {
+            console.log(error);
+        },
+    });
+    window.open('//demo.kuzudb.com', '_blank');
+    closeDemoModal();
+});

assets/js/newsletter.js

@@ -0,0 +1,32 @@
+const submitButton = $('#newsletter-submit');
+const emailInput = $('#newsletter-email');
+const newsletterError = $('#newsletter-error');
+const newsletterSuccess = $('#newsletter-success');
+
+submitButton.on('click', (e) => {
+  e.preventDefault();
+  const email = emailInput.val();
+  if (email === '' || !window.validateEmail(email)) {
+    newsletterError.show();
+    newsletterSuccess.hide();
+    return;
+  }
+  newsletterError.hide();
+  newsletterSuccess.show();
+
+  $.ajax({
+    url: 'https://track.kuzudb.com',
+    type: 'POST',
+    data: JSON.stringify({
+      email,
+      origin: 'NEWSLETTER',
+    }),
+    contentType: 'application/json',
+    success: () => {
+      console.log('Subscribed to newsletter');
+    },
+    error: function (error) {
+      console.log(error);
+    },
+  });
+});

assets/js/validate-email.js

@@ -0,0 +1,7 @@
+window.validateEmail = (email) => {
+    return String(email)
+        .toLowerCase()
+        .match(
+            /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+    );
+};

compose.yml

@@ -0,0 +1,9 @@
+services:
+  jeykll:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    expose:
+      - "4000"
+    ports:
+      - "4000:4000"