feat: add web component library with Stencil.js

packages/tc-web/.editorconfig

@@ -0,0 +1,15 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

packages/tc-web/README.md

@@ -0,0 +1,134 @@
+# TC Webcomponent
+
+Latest version published "[email protected]"
+
+This repo is for the web-components library for the TC. Technologies used are stencil-tailwind-plugin and StencilJS.
+
+## How to use the Components in Magnolia (or other CMS)
+
+Create a new Component in Magnolia.
+
+<img src="ReadMeImages\Add_Component_Magnolia.png" alt="Adding a component in Magnolia" width="500"/>
+
+Make sure you create it as a HTML component.
+
+<img src="ReadMeImages\HTML_Select.png" alt="Make sure to select a HTML Component" width="500"/>
+
+A code field then appears.
+
+### Import library
+
+To use these webcomponents you must import the library.
+
+#### Import specific version (recommended)
+
+To get a **specific version of this libary** recommended and won't be affected by change in the code you can get by running:
+Usually you want to get the most recent version published, but want to fix it to that version, since future versions may not suport the elements you are using.
+
+```html
+<script
+  type="module"
+  src="https://unpkg.com/tc-web@{versionYouWantToGet}"
+></script>
+```
+
+If for instance you want to get version 1.2.3:
+
+```html
+<script type="module" src="https://unpkg.com/[email protected]"></script>
+```
+
+#### Always get latest version (not recommended)
+
+To get the latest version, **not recommend**. you can install it like this.
+
+```html
+<script type="module" src="https://unpkg.com/tc-web@latest"></script>
+```
+
+### How to use a component
+
+Make sure that you have first imported the library.
+
+Example
+
+```html
+<tc-testimonial
+  image-src="https://joinus.vercel.app/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fpascal.cd3140df.jpg&w=1920&q=75"
+  quote="I loved being able to work everywehre"
+  name="Lewis Hamilton"
+  pro="Freedom"
+  role="Racer good at right code quickly"
+  image-on-left="false"
+></tc-testimonial>
+```
+
+Decide which component you want.
+To figure out **what parameters each component takes** and how this needs to be adressed in the html, go to the readme file of the component.
+You can find it, as follows:
+
+```
+src/components/TheComponent/readme.md
+```
+
+If you click [here](src\components\tc-testimonial\readme.md) you will see the example, for tc-testimonial.
+
+## To make changes to the libary here is how you can get started
+
+Clone the repo, and install the dependencies:
+
+```shell
+cd tc-web
+npm install
+```
+
+Start the stencil dev server:
+
+```shell
+npm start
+```
+
+If you would like to build the application:
+
+```shell
+npm run build
+```
+
+## UZH Fonts & Colorpalette
+
+To make sure that the fonts and styling are aligned with the [UZH Theme](https://www.frontend.uzh.ch/style/current/)
+and the [UZH Color Palette](https://www.cd.uzh.ch/de/elements.html#UZH-Farben), custom fonts and colors where added to the [tailwind configuration file](tailwind.config.js).
+
+### Custom colors (for development and parametrization purposes)
+
+uzhblue: "#0028A5"
+uzhcyan: "#4AC9E3",
+uzhapple: "#A4D233",
+uzhgold: "#FFC845",
+uzhorange: "FC4C02",
+uzhberry: "#BF0D3E",
+uzhlgrey2: "#EFEFEF",
+uzhlgrey3: "#E7E7E7"
+
+### Adding colors yourself
+
+For specfic elements like the sections you can modify the color.
+You can **input color as a hex string** like below (currently we are setting it to black)
+
+```html
+<segment-container seg-title="Benefits" background-color="#000000">
+</segment-container>
+```
+
+Or like this in **rgb format**
+
+```html
+<segment-container seg-title="Benefits" background-color="rgb(0,0,0)">
+</segment-container>
+```
+
+### Fonts
+
+The UZH page uses "[Source Sans 3](https://fonts.google.com/specimen/Source+Sans+3)", previously known as "Source Sans Pro", as default font.
+To use it, you can "font-sans".
+Make sure to apply it to each component, to use it.

packages/tc-web/TODO.md

@@ -0,0 +1,45 @@
+# Tasks to be done
+
+## Move towards Generalistic approach
+
+Currently one can reproduce the current page, however it requires the user to be aware of the existing structure.
+E.g. _"tc-advantage-column"_ only has meaning to a user if he _knows the structure of the page._
+
+One goal is to be able to use web components flexible on several pages.
+So one needs to **refactor.**
+Find suitable names for the individual components.
+
+## (Maybe) Create individual packages for each component
+
+For a faster loading of web-components, break each component into its own library
+
+**Pro**:
+
+- faster loading time (how much though)
+- when testing with Max last week it is pretty fast currently
+
+**Con**:
+
+- More organization required.
+- You need one home repo linking to other repos
+- If one updates 5 components I will need to publish each indivudally and then update for each one of them on Magnolia
+- possible names for the libray could become a mess
+
+I think this is a "**Performance vs Code Quality**" question.
+In my opinion I thik performance is ok, so one could stick with this solution. However I do so a situation where this project becomes massive and it then makes sense to break it down into smaller chunks.
+
+## Transfer Repo to DF & and NPM logedin with my private account
+
+- Currently I own the Github repo.
+- The npm pckg **tc-web** is linked to my private account.
+
+## Apart from code general doc
+
+## Code
+
+- [ ] For components add documentation
+- [ ] Generalize names
+- [ ] Functions that are used in several components refactor to utilty func, so it is only used once
+- [ ] see how available jobs acts when having no jobs available
+- [ ] styling for project parts
+- [ ] in general be aware end user can be a non-it proffesional

packages/tc-web/docs/host.config.json

@@ -0,0 +1,15 @@
+{
+  "hosting": {
+    "headers": [
+      {
+        "source": "/build/p-*",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "max-age=31556952, s-maxage=31556952, immutable"
+          }
+        ]
+      }
+    ]
+  }
+}