eth-janishutz/fundamentals-of-webengineering
1
0
Fork 0
mirror of https://github.com/janishutz/fundamentals-of-webengineering.git synced 2025-11-25 05:44:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add scaffold of first assignment

Browse Source
This commit is contained in:
Janis Hutz
2025-09-24 12:25:05 +02:00
parent d60747e44a
commit 9665550002
27 changed files with 1359 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
task_1_html_css/.gitignore vendored Normal file
View File

@@ -0,0 +1,2 @@
.idea/
node_modules/

63
task_1_html_css/.gitlab-ci.yml Normal file
View File

@@ -0,0 +1,63 @@
stages:
- lint
- build
- deploy
workflow:
rules:
- if: $CI_COMMIT_BRANCH =~ /^(master|main)$/
- if: $FORCE_DEPLOY
when: always
- when: never
variables:
IMAGE_NAME: $ci_registry/$CI_PROJECT_PATH
default:
before_script:
- IMAGE_NAME=$(echo $IMAGE_NAME | tr '[:upper:]' '[:lower:]')
lint_helm:
stage: lint
image: matthiasgabathuler/my-runner:ubuntu-20.04
script:
- >-
helm lint ${CI_PROJECT_DIR}/helm
--set image.name=${IMAGE_NAME}
--set image.tag=${CI_COMMIT_REF_NAME}
--set build.job_id=${CI_JOB_ID}
--set build.commit=${CI_COMMIT_SHA}
build_webapp:
stage: build
rules:
image:
name: gcr.io/kaniko-project/executor:debug
entrypoint: [""]
script:
- >-
/kaniko/executor
--context "${CI_PROJECT_DIR}"
--dockerfile "${CI_PROJECT_DIR}/Dockerfile"
--destination "${IMAGE_NAME}-webapp:latest"
deploy_app:
stage: deploy
rules:
image:
name: alpine/helm:3.11.1
entrypoint: [""]
script:
- >-
helm --namespace $k8s_namespace
--kube-context $k8s_context
upgrade $(echo ${CI_PROJECT_NAME} | tr _ -) ${CI_PROJECT_DIR}/helm
--install
--history-max 5
--set image.host=${ci_registry}
--set image.name=${IMAGE_NAME}
--set image.tag=latest
--set build.job_id=${CI_JOB_ID}
--set build.commit=${CI_COMMIT_SHA}
- >-
echo "webapp URL: http://$(echo ${CI_PROJECT_NAME} | tr _ -).course-fwe-2023.isginf.ch"

1
task_1_html_css/.prettierrc.json Normal file
View File

@@ -0,0 +1 @@
{}

8
task_1_html_css/Dockerfile Normal file
View File

@@ -0,0 +1,8 @@
FROM node
WORKDIR /app
COPY src/package.json .
RUN npm i
COPY ./src .
## EXPOSE [Port you mentioned in the vite.config file]
EXPOSE 5173
CMD ["npm", "run", "dev"]

21
task_1_html_css/README.md Normal file
View File

@@ -0,0 +1,21 @@
# Local Development
see [src/README.md](src/README.md)
# Local Testing
## run container for local testing
```bash
docker build -t my-webapp .
docker run -it --rm -p 5173:5173 my-webapp
```
Open a browser and connect to http://localhost:5173
## run bash in interactive container
```bash
docker build -t my-webapp src/.
docker run -it --rm -p 5173:5173 my-webapp bash
```

23
task_1_html_css/helm/.helmignore Normal file
View File

@@ -0,0 +1,23 @@
# Patterns to ignore when building packages.
# This supports shell glob matching, relative path matching, and
# negation (prefixed with !). Only one pattern per line.
.DS_Store
# Common VCS dirs
.git/
.gitignore
.bzr/
.bzrignore
.hg/
.hgignore
.svn/
# Common backup files
*.swp
*.bak
*.tmp
*.orig
*~
# Various IDEs
.project
.idea/
*.tmproj
.vscode/

6
task_1_html_css/helm/Chart.yaml Normal file
View File

@@ -0,0 +1,6 @@
apiVersion: v2
name: task-1-html-css #name of the app, this should be the project name, spaces should be substituted with -
description: My Example App #description for the app
type: application
version: 0.0.1 #for versioning of the helm chart, increase it when new release is built/deployed
appVersion: "0.0.1"

0
task_1_html_css/helm/charts/.gitkeep Normal file
View File

0
task_1_html_css/helm/files/.gitkeep Normal file
View File

0
task_1_html_css/helm/templates/.gitkeep Normal file
View File

29
task_1_html_css/helm/templates/deployment.yaml Normal file
View File

@@ -0,0 +1,29 @@
apiVersion: apps/v1
kind: Deployment
metadata:
name: {{ .Release.Name }}-webapp
spec:
selector:
matchLabels:
app: {{ .Release.Name }}-webapp
replicas: 1
template:
metadata:
labels:
app: {{ .Release.Name }}-webapp
annotations:
rollme: {{ randAlphaNum 5 | quote }}
spec:
nodeSelector:
course: fwe2023
containers:
- name: {{ .Release.Name }}-webapp
image: {{ .Values.image.name }}-webapp:{{ .Values.image.tag }}
imagePullPolicy: Always
ports:
- containerPort: 5173
resources:
limits:
memory: "200M"
requests:
memory: "50M"

20
task_1_html_css/helm/templates/ingress.yaml Normal file
View File

@@ -0,0 +1,20 @@
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
name: {{ .Release.Name }}-ingress
annotations:
nginx.ingress.kubernetes.io/ssl-redirect: "false"
nginx.ingress.kubernetes.io/enable-cors: "true"
spec:
ingressClassName: nginx
rules:
- host: {{ .Release.Name }}.course-fwe-2023.isginf.ch
http:
paths:
- path: /
pathType: Prefix
backend:
service:
name: {{ .Release.Name }}-webapp
port:
number: 80

10
task_1_html_css/helm/templates/service.yaml Normal file
View File

@@ -0,0 +1,10 @@
apiVersion: v1
kind: Service
metadata:
name: {{ .Release.Name }}-webapp
spec:
ports:
- port: 80
targetPort: 5173
selector:
app: {{ .Release.Name }}-webapp

8
task_1_html_css/helm/values.yaml Normal file
View File

@@ -0,0 +1,8 @@
image:
name: ""
tag: ""
build:
job_id: ""
commit: ""
url:
hostname: "www.course-xai-iml23.isginf.ch"

24
task_1_html_css/src/README.md Normal file
View File

@@ -0,0 +1,24 @@
# Requirements
- current node version (18+)
- npm (6+)
# Installation
```bash
npm install
```
# Commands
## Run
```bash
npm run dev
```
## Format Code
(Since it's `uglier`, will make it uglier)
```bash
npm run format
```

31
task_1_html_css/src/card.css Normal file
View File

@@ -0,0 +1,31 @@
article {
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
width: 350px;
line-height: 1.5rem;
& header {
border-bottom: 1px solid var(--border-color);
padding: var(--space);
& a {
text-decoration: none;
}
}
& main {
padding: var(--space);
width: inherit;
& img {
width: inherit;
}
}
& footer {
border-top: 1px solid var(--border-color);
& ul {
padding: 0;
list-style: none;
}
}
}

146
task_1_html_css/src/card.html Normal file
View File

@@ -0,0 +1,146 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link href="default.css" rel="stylesheet" />
<link href="card.css" rel="stylesheet" />
<script src="./main.ts" type="module"></script>
</head>
<body>
<article>
<header>
<h1>How to start?</h1>
<a href="#"><i class="fa fa-solid fa-edit"></i> Edit</a>
</header>
<main>
<h1>Here are some tips</h1>
<p>First think about where to you need some flexbox layout.</p>
<ol>
<li>
Look at the
<a
href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox"
>mdn docs</a
>
</li>
<li>Start with the inner components.</li>
<li>Do not be afraid to nest flex boxes.</li>
<li>Start with the header.</li>
</ol>
<h2>How to align the images</h2>
<p>
We have added some challenge to get the border-radius of the images
right. Be creative and have a look at the following css selectors and
use them creatively.
</p>
<ul>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has"
><code>:has</code></a
>
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:not"
><code>:not</code></a
>
</li>
<li>
Or try another approach, there are many ways in css to achieve the
desired behaviour.
</li>
</ul>
<h2>The action menu</h2>
<p>The final challenge.</p>
<ul>
<li>Think about how to add the separator with css only.</li>
<li>
What pseudo classes can you use to not add the separator to every
element?
</li>
<li>
You might need to combine multiple pseudo classes to achieve the
desired behaviour.
</li>
</ul>
</main>
<footer>
<ul>
<li>
<i class="fa fa-solid fa-user"></i>
</li>
<li>
<i class="fa fa-solid fa-cogs"></i>
</li>
<li>
<i class="fa fa-solid fa-share"></i>
</li>
</ul>
</footer>
</article>
<article>
<header>
<h1>A card without a footer</h1>
<a href="#"><i class="fa fa-solid fa-edit"></i> Edit</a>
</header>
<main>
This card has no footer.
</main>
</article>
<article>
<main>
This card has no header.
</main>
<footer>
<ul>
<li>
<i class="fa fa-solid fa-user"></i>
</li>
<li>
<i class="fa fa-solid fa-cogs"></i>
</li>
<li>
<i class="fa fa-solid fa-share"></i>
</li>
</ul>
</footer>
</article>
<article>
<header>
<h1>Image with head</h1>
</header>
<main>
<img src="https://picsum.photos/250/300" alt="" />
</main>
</article>
<article>
<main>
<img src="https://picsum.photos/250/300" alt="" />
</main>
</article>
<article>
<main>
<img src="https://picsum.photos/250/300" alt="" />
</main>
<footer>
<ul>
<li>
<i class="fa fa-solid fa-user"></i>
</li>
<li>
<i class="fa fa-solid fa-cogs"></i>
</li>
<li>
<i class="fa fa-solid fa-share"></i>
</li>
</ul>
</footer>
</article>
</body>
</html>

50
task_1_html_css/src/contact.html Normal file
View File

@@ -0,0 +1,50 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Document</title>
<link href="layout.css" rel="stylesheet" />
<script src="./main.ts" type="module"></script>
</head>
<body>
<header>
<h1>Contact</h1>
</header>
<section>
<ul>
<li>
<a href="/" title="Home"
><i class="fa-solid fa-home"></i> <span>Home</span></a
>
</li>
<li>
<a href="/" title="Dashboard"
><i class="fa-solid fa-dashboard"></i> <span>Dashboard</span></a
>
</li>
<li>
<a href="/" title="Profile"
><i class="fa-solid fa-user"></i> <span>Profile</span></a
>
</li>
<li>
<a href="./contact.html" title="Contact"
><i class="fa-solid fa-message"></i> <span>Contact</span></a
>
</li>
</ul>
</section>
<main>
<!-- TODO add form here-->
</main>
<footer>
<div>Made with <i class="fa-solid fa-heart"></i> by David Sichau</div>
</footer>
</body>
</html>

18
task_1_html_css/src/default.css Normal file
View File

@@ -0,0 +1,18 @@
:root {
--border-color: #a0a0a0;
--border-radius: 1rem;
--space: 1rem;
--primary-color: #1677ff;
--dark-primary-color: #003eb3;
}
body {
padding: var(--space);
height: 100vh;
width: 100vw;
}
h1,
p {
margin-block: 0.25rem;
}

195
task_1_html_css/src/index.html Normal file
View File

@@ -0,0 +1,195 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Document</title>
<link href="layout.css" rel="stylesheet" />
<link href="card.css" rel="stylesheet" />
<script src="./main.ts" type="module"></script>
</head>
<body>
<header>
<h1>Open data explorer</h1>
<i class="fa fa-solid fa-user"></i>
<i class="fa fa-solid fa-bars"></i>
</header>
<section>
<ul>
<li>
<a href="/" title="Home"
><i class="fa-solid fa-home"></i> <span>Home</span></a
>
</li>
<li>
<a href="/" title="Dashboard"
><i class="fa-solid fa-dashboard"></i> <span>Dashboard</span></a
>
</li>
<li>
<a href="/" title="Profile"
><i class="fa-solid fa-user"></i> <span>Profile</span></a
>
</li>
<li>
<a href="./contact.html" title="Contact"
><i class="fa-solid fa-message"></i> <span>Contact</span></a
>
</li>
</ul>
</section>
<main>
<article>
<header>
<h1>How to start?</h1>
<a href="#"><i class="fa fa-solid fa-edit"></i> Edit</a>
</header>
<main>
<h1>Here are some tips</h1>
<p>First think about where to you need some flexbox layout.</p>
<ol>
<li>
Look at the
<a
href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox"
>mdn docs</a
>
</li>
<li>Start with the inner components.</li>
<li>Do not be afraid to nest flex boxes.</li>
<li>Start with the header.</li>
</ol>
<h2>How to align the images</h2>
<p>
We have added some challenge to get the border-radius of the images
right. Be creative and have a look at the following css selectors
and use them creatively.
</p>
<ul>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has"
><code>:has</code></a
>
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:not"
><code>:not</code></a
>
</li>
<li>
Or try another approach, there are many ways in css to achieve the
desired behaviour.
</li>
</ul>
<h2>The action menu</h2>
<p>The final challenge.</p>
<ul>
<li>Think about how to add the separator with css only.</li>
<li>
What pseudo classes can you use to not add the separator to every
element?
</li>
<li>
You might need to combine multiple pseudo classes to achieve the
desired behaviour.
</li>
</ul>
</main>
<footer>
<ul>
<li>
<i class="fa fa-solid fa-user"></i>
</li>
<li>
<i class="fa fa-solid fa-cogs"></i>
</li>
<li>
<i class="fa fa-solid fa-share"></i>
</li>
</ul>
</footer>
</article>
<article>
<header>
<h1>A card with a table</h1>
<a href="#"><i class="fa fa-solid fa-edit"></i> Edit</a>
</header>
<main>
<table>
<thead>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>blub</td>
</tr>
<tr>
<td>4</td>
<td>blubber</td>
</tr>
</tbody>
</table>
</main>
<footer>
<ul>
<li>
<i class="fa fa-solid fa-user"></i>
</li>
<li>
<i class="fa fa-solid fa-cogs"></i>
</li>
<li>
<i class="fa fa-solid fa-share"></i>
</li>
</ul>
</footer>
</article>
<article>
<header>
<h1>Image with head</h1>
</header>
<main>
<img src="https://picsum.photos/250/300" alt="" />
</main>
</article>
<article>
<main>
<img src="https://picsum.photos/250/300" alt="" />
</main>
</article>
<article>
<main>
<img src="https://picsum.photos/250/300" alt="" />
</main>
<footer>
<ul>
<li>
<i class="fa fa-solid fa-user"></i>
</li>
<li>
<i class="fa fa-solid fa-cogs"></i>
</li>
<li>
<i class="fa fa-solid fa-share"></i>
</li>
</ul>
</footer>
</article>
</main>
<footer>
<div>Made with <i class="fa-solid fa-heart"></i> by David Sichau</div>
</footer>
</body>
</html>

46
task_1_html_css/src/layout.css Normal file
View File

@@ -0,0 +1,46 @@
:root {
}
body {
overflow: hidden;
color: black;
}
body > section {
border-right: 1px solid var(--border-color);
& ul {
list-style-type: none;
padding-inline-start: 0;
& li > a {
color: #999;
font-size: 14px;
text-decoration: none;
}
& li > a:hover {
color: black;
}
}
}
body > header {
border-bottom: 1px solid var(--border-color);
& h1 {
font-size: 1.75rem;
margin: 0;
flex-grow: 1;
}
}
body > main {
grid-area: main;
height: calc(100vh - 100px);
overflow-y: scroll;
}
body > footer {
border-top: 1px solid var(--border-color);
background-color: #f0f0f0;
}

2
task_1_html_css/src/main.ts Normal file
View File

@@ -0,0 +1,2 @@
import "@fortawesome/fontawesome-free/css/all.css";
import "modern-normalize/modern-normalize.css";

604
task_1_html_css/src/package-lock.json generated Normal file
View File

@@ -0,0 +1,604 @@
{
"name": "vite-typescript-starter",
"version": "0.0.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "vite-typescript-starter",
"version": "0.0.0",
"dependencies": {
"@fortawesome/fontawesome-free": "^6.4.2",
"modern-normalize": "^2.0.0"
},
"devDependencies": {
"prettier": "^3.0.1",
"typescript": "^5.1.6",
"vite": "^4.4.9"
}
},
"node_modules/@esbuild/android-arm": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
"integrity": "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==",
"cpu": [
"arm"
],
"dev": true,
"optional": true,
"os": [
"android"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/android-arm64": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz",
"integrity": "sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==",
"cpu": [
"arm64"
],
"dev": true,
"optional": true,
"os": [
"android"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/android-x64": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.20.tgz",
"integrity": "sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==",
"cpu": [
"x64"
],
"dev": true,
"optional": true,
"os": [
"android"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/darwin-arm64": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz",
"integrity": "sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==",
"cpu": [
"arm64"
],
"dev": true,
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/darwin-x64": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz",
"integrity": "sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==",
"cpu": [
"x64"
],
"dev": true,
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/freebsd-arm64": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz",
"integrity": "sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==",
"cpu": [
"arm64"
],
"dev": true,
"optional": true,
"os": [
"freebsd"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/freebsd-x64": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz",
"integrity": "sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==",
"cpu": [
"x64"
],
"dev": true,
"optional": true,
"os": [
"freebsd"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/linux-arm": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz",
"integrity": "sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==",
"cpu": [
"arm"
],
"dev": true,
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/linux-arm64": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz",
"integrity": "sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==",
"cpu": [
"arm64"
],
"dev": true,
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/linux-ia32": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz",
"integrity": "sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==",
"cpu": [
"ia32"
],
"dev": true,
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/linux-loong64": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz",
"integrity": "sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==",
"cpu": [
"loong64"
],
"dev": true,
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/linux-mips64el": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz",
"integrity": "sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==",
"cpu": [
"mips64el"
],
"dev": true,
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/linux-ppc64": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz",
"integrity": "sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==",
"cpu": [
"ppc64"
],
"dev": true,
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/linux-riscv64": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz",
"integrity": "sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==",
"cpu": [
"riscv64"
],
"dev": true,
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/linux-s390x": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz",
"integrity": "sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==",
"cpu": [
"s390x"
],
"dev": true,
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/linux-x64": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz",
"integrity": "sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==",
"cpu": [
"x64"
],
"dev": true,
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/netbsd-x64": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz",
"integrity": "sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==",
"cpu": [
"x64"
],
"dev": true,
"optional": true,
"os": [
"netbsd"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/openbsd-x64": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz",
"integrity": "sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==",
"cpu": [
"x64"
],
"dev": true,
"optional": true,
"os": [
"openbsd"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/sunos-x64": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz",
"integrity": "sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==",
"cpu": [
"x64"
],
"dev": true,
"optional": true,
"os": [
"sunos"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/win32-arm64": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz",
"integrity": "sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==",
"cpu": [
"arm64"
],
"dev": true,
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/win32-ia32": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz",
"integrity": "sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==",
"cpu": [
"ia32"
],
"dev": true,
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@esbuild/win32-x64": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz",
"integrity": "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==",
"cpu": [
"x64"
],
"dev": true,
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@fortawesome/fontawesome-free": {
"version": "6.4.2",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.4.2.tgz",
"integrity": "sha512-m5cPn3e2+FDCOgi1mz0RexTUvvQibBebOUlUlW0+YrMjDTPkiJ6VTKukA1GRsvRw+12KyJndNjj0O4AgTxm2Pg==",
"hasInstallScript": true,
"engines": {
"node": ">=6"
}
},
"node_modules/esbuild": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
"integrity": "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==",
"dev": true,
"hasInstallScript": true,
"bin": {
"esbuild": "bin/esbuild"
},
"engines": {
"node": ">=12"
},
"optionalDependencies": {
"@esbuild/android-arm": "0.18.20",
"@esbuild/android-arm64": "0.18.20",
"@esbuild/android-x64": "0.18.20",
"@esbuild/darwin-arm64": "0.18.20",
"@esbuild/darwin-x64": "0.18.20",
"@esbuild/freebsd-arm64": "0.18.20",
"@esbuild/freebsd-x64": "0.18.20",
"@esbuild/linux-arm": "0.18.20",
"@esbuild/linux-arm64": "0.18.20",
"@esbuild/linux-ia32": "0.18.20",
"@esbuild/linux-loong64": "0.18.20",
"@esbuild/linux-mips64el": "0.18.20",
"@esbuild/linux-ppc64": "0.18.20",
"@esbuild/linux-riscv64": "0.18.20",
"@esbuild/linux-s390x": "0.18.20",
"@esbuild/linux-x64": "0.18.20",
"@esbuild/netbsd-x64": "0.18.20",
"@esbuild/openbsd-x64": "0.18.20",
"@esbuild/sunos-x64": "0.18.20",
"@esbuild/win32-arm64": "0.18.20",
"@esbuild/win32-ia32": "0.18.20",
"@esbuild/win32-x64": "0.18.20"
}
},
"node_modules/fsevents": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
"dev": true,
"hasInstallScript": true,
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
}
},
"node_modules/modern-normalize": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/modern-normalize/-/modern-normalize-2.0.0.tgz",
"integrity": "sha512-CxBoEVKh5U4DH3XuNbc5ONLF6dQBc8dSc7pdZ1957FGbIO5JBqGqqchhET9dTexri8/pk9xBL6+5ceOtCIp1QA==",
"engines": {
"node": ">=6"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/nanoid": {
"version": "3.3.6",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
"integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
"dev": true,
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"bin": {
"nanoid": "bin/nanoid.cjs"
},
"engines": {
"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
}
},
"node_modules/picocolors": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
"dev": true
},
"node_modules/postcss": {
"version": "8.4.27",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.27.tgz",
"integrity": "sha512-gY/ACJtJPSmUFPDCHtX78+01fHa64FaU4zaaWfuh1MhGJISufJAH4cun6k/8fwsHYeK4UQmENQK+tRLCFJE8JQ==",
"dev": true,
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/postcss"
},
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"dependencies": {
"nanoid": "^3.3.6",
"picocolors": "^1.0.0",
"source-map-js": "^1.0.2"
},
"engines": {
"node": "^10 || ^12 || >=14"
}
},
"node_modules/prettier": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.1.tgz",
"integrity": "sha512-fcOWSnnpCrovBsmFZIGIy9UqK2FaI7Hqax+DIO0A9UxeVoY4iweyaFjS5TavZN97Hfehph0nhsZnjlVKzEQSrQ==",
"dev": true,
"bin": {
"prettier": "bin/prettier.cjs"
},
"engines": {
"node": ">=14"
},
"funding": {
"url": "https://github.com/prettier/prettier?sponsor=1"
}
},
"node_modules/rollup": {
"version": "3.28.0",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.28.0.tgz",
"integrity": "sha512-d7zhvo1OUY2SXSM6pfNjgD5+d0Nz87CUp4mt8l/GgVP3oBsPwzNvSzyu1me6BSG9JIgWNTVcafIXBIyM8yQ3yw==",
"dev": true,
"bin": {
"rollup": "dist/bin/rollup"
},
"engines": {
"node": ">=14.18.0",
"npm": ">=8.0.0"
},
"optionalDependencies": {
"fsevents": "~2.3.2"
}
},
"node_modules/source-map-js": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
"integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
"dev": true,
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/typescript": {
"version": "5.1.6",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz",
"integrity": "sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==",
"dev": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
},
"engines": {
"node": ">=14.17"
}
},
"node_modules/vite": {
"version": "4.4.9",
"resolved": "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz",
"integrity": "sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==",
"dev": true,
"dependencies": {
"esbuild": "^0.18.10",
"postcss": "^8.4.27",
"rollup": "^3.27.1"
},
"bin": {
"vite": "bin/vite.js"
},
"engines": {
"node": "^14.18.0 || >=16.0.0"
},
"funding": {
"url": "https://github.com/vitejs/vite?sponsor=1"
},
"optionalDependencies": {
"fsevents": "~2.3.2"
},
"peerDependencies": {
"@types/node": ">= 14",
"less": "*",
"lightningcss": "^1.21.0",
"sass": "*",
"stylus": "*",
"sugarss": "*",
"terser": "^5.4.0"
},
"peerDependenciesMeta": {
"@types/node": {
"optional": true
},
"less": {
"optional": true
},
"lightningcss": {
"optional": true
},
"sass": {
"optional": true
},
"stylus": {
"optional": true
},
"sugarss": {
"optional": true
},
"terser": {
"optional": true
}
}
}
}
}

20
task_1_html_css/src/package.json Normal file
View File

@@ -0,0 +1,20 @@
{
"name": "vite-typescript-starter",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"format": "prettier . --write",
"tsc": "tsc"
},
"devDependencies": {
"prettier": "^3.0.1",
"typescript": "^5.1.6",
"vite": "^4.4.9"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^6.4.2",
"modern-normalize": "^2.0.0"
}
}

25
task_1_html_css/src/tsconfig.json Normal file
View File

@@ -0,0 +1,25 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
/* Linting */
"strict": true,
"strictNullChecks": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["**/*"],
"exclude": ["tests/**/*", "public/**/*", "build/**/*"]
}

1
task_1_html_css/src/vite-env.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
/// <reference types="vite/client" />

6
task_1_html_css/src/vite.config.js Normal file
View File

@@ -0,0 +1,6 @@
export default {
server: {
host: '0.0.0.0',
port: 5173,
},
}