website: add careers page (#3039)

* website: add careers page * website: pagename from careers to career * website: change pagename from career to jobs * website: add jobs string to english language strings file * website: add job tabs * update --------- Co-authored-by: Evgeny Poberezkin <2769109+epoberezkin@users.noreply.github.com>
2023-09-20 21:54:02 +05:00 · 2023-09-20 21:54:02 +05:00 · 0a2513c9e7
commit 0a2513c9e7
parent ae6996b2ee
7 changed files with 168 additions and 55 deletions
--- a/docs/JOIN_TEAM.md
+++ b/docs/JOIN_TEAM.md
@ -7,35 +7,6 @@ We currently have 4 full-time people in the team - all engineers, including the
 We want to add up to 3 people to the team. 


-**You**:
-
- **Passionate about joining SimpleX Chat team**:
-  - already use SimpleX Chat to communicate with friends/family or participate in public SimpleX Chat groups.
-  - passionate about privacy, security and communications.
-  - interested to make contributions to SimpleX Chat open-source project in your free time before we hire you, as an extended test.
-
- **Exceptionally pragmatic, very fast and customer-focussed**:
-  - care about the customers (aka users) and about the product we build much more than about the code quality, technology stack, etc.
-  - believe that the simplest solution is the best.
-  - 2-3x faster than the most competent people you worked with.
-  - focus on solving only today's problems and resist engineering for the future (aka over-engineering) – see [The Duct Tape Programmer](https://www.joelonsoftware.com/2009/09/23/the-duct-tape-programmer/) and [Why I Hate Frameworks](https://medium.com/@johnfliu/why-i-hate-frameworks-6af8cbadba42).
-  - do not suffer from "not invented here" syndrome, at the same time interested to design and implement protocols and systems from the ground up when appropriate.
-
- **Love software engineering**:
-  - have 5y+ of software engineering experience in complex projects, 
-  - great understanding of the common principles:
-    - data structures, bits and byte manipulation
-    - text encoding and manipulation
-    - software design and algorithms
-    - concurrency
-    - networking
-
- **Want to join a very early stage startup**:
-  - high pace and intensity, longer hours.
-  - a substantial part of the compensation is stock options.
-  - full transparency – we believe that too much [autonomy](https://twitter.com/KentBeck/status/851459129830850561) hurts learning and slows down progress.
-
-
 ## Who we are looking for

 ### Systems Haskell engineer
@ -63,6 +34,35 @@ You are a product UX expert who designs great user experiences directly in iOS c
 Knowledge of Android and Kotlin Multiplatform would be a bonus - we use Kotlin Jetpack Compose for our Android and desktop apps.


+## About you
+
+- **Passionate about joining SimpleX Chat team**:
+  - already use SimpleX Chat to communicate with friends/family or participate in public SimpleX Chat groups.
+  - passionate about privacy, security and communications.
+  - interested to make contributions to SimpleX Chat open-source project in your free time before we hire you, as an extended test.
+
+- **Exceptionally pragmatic, very fast and customer-focussed**:
+  - care about the customers (aka users) and about the product we build much more than about the code quality, technology stack, etc.
+  - believe that the simplest solution is the best.
+  - 2-3x faster than the most competent people you worked with.
+  - focus on solving only today's problems and resist engineering for the future (aka over-engineering) – see [The Duct Tape Programmer](https://www.joelonsoftware.com/2009/09/23/the-duct-tape-programmer/) and [Why I Hate Frameworks](https://medium.com/@johnfliu/why-i-hate-frameworks-6af8cbadba42).
+  - do not suffer from "not invented here" syndrome, at the same time interested to design and implement protocols and systems from the ground up when appropriate.
+
+- **Love software engineering**:
+  - have 5y+ of software engineering experience in complex projects, 
+  - great understanding of the common principles:
+    - data structures, bits and byte manipulation
+    - text encoding and manipulation
+    - software design and algorithms
+    - concurrency
+    - networking
+
+- **Want to join a very early stage startup**:
+  - high pace and intensity, longer hours.
+  - a substantial part of the compensation is stock options.
+  - full transparency – we believe that too much [autonomy](https://twitter.com/KentBeck/status/851459129830850561) hurts learning and slows down progress.
+
+
 ## How to join the team

 1. [Install the app](../README.md#install-the-app), try using it with the friends and [join some user groups](https://github.com/simplex-chat/simplex-chat#join-user-groups) – you will discover a lot of things that need improvements.
--- a/website/.eleventy.js
+++ b/website/.eleventy.js
@ -188,6 +188,50 @@ module.exports = function (ty) {
    return dom.serialize()
  })

+  ty.addFilter('wrapH3s', function (content, page) {
+    if (!page.url.includes("/jobs/")) {
+      return content
+    }
+
+    const dom = new JSDOM(content)
+    const document = dom.window.document
+
+    const makeBlock = (block) => {
+      const jobTab = document.createElement('div')
+      jobTab.className = "job-tab"
+
+      const flexDiv = document.createElement('div')
+      flexDiv.className = "flex items-center justify-between job-tab-btn cursor-pointer"
+      flexDiv.innerHTML = `
+        <${block.tagName}>${block.innerHTML}</${block.tagName}>
+        <svg class="fill-grey-black dark:fill-white" width="10" height="5" viewBox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M8.40813 4.79332C8.69689 5.06889 9.16507 5.06889 9.45384 4.79332C9.7426 4.51775 9.7426 4.07097 9.45384 3.7954L5.69327 0.206676C5.65717 0.17223 5.61827 0.142089 5.57727 0.116255C5.29026 -0.064587 4.90023 -0.0344467 4.64756 0.206676L0.886983 3.7954C0.598219 4.07097 0.598219 4.51775 0.886983 4.79332C1.17575 5.06889 1.64393 5.06889 1.93269 4.79332L5.17041 1.70356L8.40813 4.79332Z"></path>
+        </svg>
+      `
+      jobTab.appendChild(flexDiv)
+
+      const jobContent = document.createElement('div')
+      jobContent.className = "job-tab-content"
+      jobTab.appendChild(jobContent)
+
+      block.parentNode.insertBefore(jobTab, block)
+      block.remove()
+
+      let sibling = jobTab.nextElementSibling
+      const siblingsToMove = []
+      while (sibling && !['H3', 'H2'].includes(sibling.tagName)) {
+        siblingsToMove.push(sibling)
+        sibling = sibling.nextElementSibling
+      }
+
+      siblingsToMove.forEach(el => jobContent.appendChild(el))
+    }
+
+    Array.from(document.querySelectorAll("h3")).forEach(makeBlock)
+
+    return dom.serialize()
+  })
+
  ty.addShortcode("completeRoute", (obj) => {
    const urlParts = obj.url.split("/")

--- a/website/customize_docs_frontmatter.js
+++ b/website/customize_docs_frontmatter.js
@ -54,32 +54,41 @@ Object.entries(fileLanguageMapping).forEach(([fileName, languages]) => {
            // Calculate the permalink based on the file's location
            const linkPath = path.relative(directoryPath, fullPath).replace(/\.md$/, '.html');
            const permalink = `/docs/${linkPath}`.toLowerCase();
-            parsedMatter.data.permalink = permalink;

-            // Update the frontmatter with the new languages list
-            parsedMatter.data.supportedLangsForDoc = languages;
+            if (fileName === 'JOIN_TEAM') {
+                parsedMatter.data.title = 'SimpleX Chat - Jobs';
+                parsedMatter.data.permalink = '/jobs/index.html';
+                parsedMatter.data.layout = 'layouts/jobs.html';
+                parsedMatter.data.active_jobs = true;
+            }
+            else {
+                parsedMatter.data.permalink = permalink;

-            // Add the layout value
-            parsedMatter.data.layout = 'layouts/doc.html';
+                // Update the frontmatter with the new languages list
+                parsedMatter.data.supportedLangsForDoc = languages;

-            if (fullPath.startsWith(path.join(directoryPath, langFolder))) {
-                // Non-English files
-                const [language, ...rest] = relativePath.split(path.sep).slice(1);
-                const enFilePath = path.join(directoryPath, ...rest);
+                // Add the layout value
+                parsedMatter.data.layout = 'layouts/doc.html';

-                if (enFiles[enFilePath]) {
-                    const enRevision = new Date(enFiles[enFilePath].revision);
-                    const currentRevision = new Date(parsedMatter.data.revision);
+                if (fullPath.startsWith(path.join(directoryPath, langFolder))) {
+                    // Non-English files
+                    const [language, ...rest] = relativePath.split(path.sep).slice(1);
+                    const enFilePath = path.join(directoryPath, ...rest);

-                    const isOld = currentRevision < enRevision;
+                    if (enFiles[enFilePath]) {
+                        const enRevision = new Date(enFiles[enFilePath].revision);
+                        const currentRevision = new Date(parsedMatter.data.revision);
+
+                        const isOld = currentRevision < enRevision;
+                        // Add the version value
+                        parsedMatter.data.version = isOld ? 'old' : 'new';
+                    }
+                } else {
+                    // English files
+                    enFiles[fullPath] = { revision: parsedMatter.data.revision };
                    // Add the version value
-                    parsedMatter.data.version = isOld ? 'old' : 'new';
+                    parsedMatter.data.version = 'new';
                }
-            } else {
-                // English files
-                enFiles[fullPath] = { revision: parsedMatter.data.revision };
-                // Add the version value
-                parsedMatter.data.version = 'new';
            }

            // Save the updated frontmatter and content back to the file
--- a/website/langs/en.json
+++ b/website/langs/en.json
@ -243,5 +243,6 @@
    "f-droid-org-repo": "F-Droid.org repo",
    "stable-versions-built-by-f-droid-org": "Stable versions built by F-Droid.org",
    "releases-to-this-repo-are-done-1-2-days-later": "The releases to this repo are done 1-2 days later",
-    "f-droid-page-f-droid-org-repo-section-text": "SimpleX Chat and F-Droid.org repositories sign builds with the different keys. To switch, please <a href='/docs/guide/chat-profiles.html#move-your-chat-profiles-to-another-device'>export</a> the chat database and re-install the app."
+    "f-droid-page-f-droid-org-repo-section-text": "SimpleX Chat and F-Droid.org repositories sign builds with the different keys. To switch, please <a href='/docs/guide/chat-profiles.html#move-your-chat-profiles-to-another-device'>export</a> the chat database and re-install the app.",
+    "jobs": "Join team"
 }
--- a/website/src/_includes/layouts/jobs.html
+++ b/website/src/_includes/layouts/jobs.html
@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="{{ page.url | getlang }}"
+    {% for language in languages.languages %}
+        {% if language.label == page.url | getlang %}
+            dir="{{ "rtl" if language.rtl else "ltr" }}"
+        {% endif %}
+    {% endfor %}>
+
+    <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>{{ title }}</title>
+        <meta name="Content-Type" content="text/html;charset=utf-8" />
+
+        <link rel="icon" type="image/png" sizes="96x96" href="/img/favicon.ico" />
+        <link href="/css/tailwind.css" rel="stylesheet" />
+        <link id="prism-theme" rel="stylesheet" href="/css/prism-light.min.css" />
+        <link href="/css/style.css" rel="stylesheet" />
+        <link rel="stylesheet" href="/css/doc.css" />
+        <script async defer src="https://buttons.github.io/buttons.js"></script>
+    </head>
+
+    <body class="bg-[#F3F6F7] dark:bg-[#0C0B13]">
+        <section class="w-full bg-transparent fixed top-0 z-50">
+            {% include "navbar.html" %}
+        </section>
+
+        <section id="doc" class="bg-white dark:bg-[#17203D] mt-[66px]">
+            <main class="container px-4 lg:px-7 py-10 md:py-16">
+                <div>{{ content | wrapH3s(page) | safe }}</div>
+            </main>
+        </section>
+
+        {% include "footer.html" %}
+    </body>
+
+    <script>
+        window.addEventListener('click', (e) => {
+            if (e.target.closest('.job-tab-btn')) {
+                e.target.closest('.job-tab').classList.toggle('active')
+            }
+        })
+    </script>
+</html>
--- a/website/src/_includes/navbar.html
+++ b/website/src/_includes/navbar.html
@ -100,6 +100,14 @@

                    <hr class="dark:opacity-[0.1]" >

+                    <li class="nav-link relative {% if active_jobs %}active{% endif %}">
+                        <a href="/jobs" class="flex items-center justify-between gap-2 lg:py-5 whitespace-nowrap">
+                            <span class="text-[16px] leading-[26px] tracking-[0.01em] nav-link-text text-black dark:text-white before:bg-black dark:before:bg-white">{{ "jobs" | i18n({}, lang ) | safe }}</span>
+                        </a>                        
+                    </li>
+
+                    <hr class="dark:opacity-[0.1]" >
+
                    <li class="nav-link relative {% if active_blog %}active{% endif %}">
                        <a href="/blog" class="flex items-center justify-between gap-2 lg:py-5">
                            <span class="text-[16px] leading-[26px] tracking-[0.01em] nav-link-text text-black dark:text-white before:bg-black dark:before:bg-white">{{ "blog" | i18n({}, lang ) | safe }}</span>
@ -125,7 +133,7 @@
            </div>
        </nav>

-        {% if 'blog' not in page.url %}
+        {% if ('blog' not in page.url) and ('jobs' not in page.url) %}
        <div class="nav-link relative flag-container">
            <a href="javascript:void(0);" class="flex items-center justify-end ltr:ml-8 ltr:lg:ml-5 ltr:xl:ml-10 rtl:mr-8 rtl:lg:mr-5 rtl:xl:mr-10 h-6 w-8 whitespace-nowrap">
                {% for language in languages.languages %}
--- a/website/src/css/style.css
+++ b/website/src/css/style.css
@ -675,7 +675,8 @@ p a{
 .content_copy_with_tooltip .content {
  font-size: 15px;
 }
-.contact-tab > .contact-tab-content{
+.contact-tab > .contact-tab-content,
+.job-tab > .job-tab-content{
  opacity: 0;
  max-height: 0;
  transition: all 0.5s ease;
@ -683,21 +684,26 @@ p a{
  transform: translateY(10px);
  overflow: hidden;
 }
-.contact-tab svg{
+.contact-tab svg,
+.job-tab svg{
  transform: rotate(-180deg);
  transition: all .5s ease;
 }
-.contact-tab.active > .contact-tab-content{
+.contact-tab.active > .contact-tab-content,
+.job-tab.active > .job-tab-content{
  opacity: 1;
  max-height: 300px;
  visibility: visible;
  transform: translateY(0px);
 }
-.for-tablet .contact-tab.active > .contact-tab-content{
+.for-tablet .contact-tab.active > .contact-tab-content,
+.for-tablet .job-tab.active > .job-tab-content{
  min-height: 450px;
 }
 .contact-tab.active svg,
-.contact-tab:hover svg{
+.contact-tab:hover svg,
+.job-tab.active svg,
+.job-tab:hover svg{
  transform: rotate(0deg);
 }