fr/website
1
0
Fork 0
Code Issues 2 Pull Requests 2 Actions Activity

WIP: Production release #6

Draft
fr wants to merge 14 commits from dev into master
pull from: dev
merge into: fr:master
Conversation 0 Commits 14 Files Changed 28 +712 -50
28 changed files with 712 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
.gitea/workflows/build_and_deploy.yaml
View File

@ -6,22 +6,28 @@ on:
- master - master
- dev - dev
env:
ZOLA_VERSION: "0.19.2"
HOST: ${{ secrets.SERVER_IP }}
SSH_USERNAME: ${{ secrets.USERNAME }}
SSH_PRIVATE_KEY: ${{ secrets.DEPLOY_KEY }}
jobs: jobs:
build_and_deploy: build_and_deploy:
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- name: Checkout Repository - name: Checkout Repository
uses: actions/checkout@v2 uses: actions/checkout@v4
- name: Set up Zola - name: Set up Zola
uses: taiki-e/install-action@v2 run: |
with: wget https://github.com/getzola/zola/releases/download/v${ZOLA_VERSION}/zola-v${ZOLA_VERSION}-x86_64-unknown-linux-gnu.tar.gz
tool: zola@0.17.2 tar -xvzf *.tar.gz
- name: Build Zola Website - name: Build Zola Website
run: | run: |
zola build ./zola build
- name: Set Destination Folder if MASTER - name: Set Destination Folder if MASTER
if: ${{ github.ref == 'refs/heads/master' }} if: ${{ github.ref == 'refs/heads/master' }}
@ -31,14 +37,12 @@ jobs:
if: ${{ github.ref == 'refs/heads/dev' }} if: ${{ github.ref == 'refs/heads/dev' }}
run: echo "DEST_FOLDER=/srv/www/cz/filiprojek/dev" >> $GITHUB_ENV run: echo "DEST_FOLDER=/srv/www/cz/filiprojek/dev" >> $GITHUB_ENV
- name: Deploy to server - name: Deploy
uses: AEnterprise/rsync-deploy@v1.0.2 run: |
env: apt update -y && apt-get install -y --no-install-recommends rsync
DEPLOY_KEY: ${{ secrets.DEPLOY_KEY }} eval "$(ssh-agent -s)"
ARGS: "-e -c -r --delete" ssh-add - <<< "${SSH_PRIVATE_KEY}"
SERVER_PORT: 22 mkdir -p ~/.ssh/
FOLDER: "./public/" ssh-keyscan -H ${HOST} >> ~/.ssh/known_hosts
SERVER_IP: ${{ secrets.SERVER_IP }} rsync -r --delete-after public/* "${SSH_USERNAME}@${HOST}:${{ env.DEST_FOLDER }}"
USERNAME: ${{ secrets.USERNAME }}
SERVER_DESTINATION: ${{ env.DEST_FOLDER }}

10
Makefile Normal file
View File

@ -0,0 +1,10 @@
all: clean format build
format:
biome format --write .
build:
zola build
clean:
rm -rf public/

15
biome.json Normal file
View File

@ -0,0 +1,15 @@
{
"$schema": "https://biomejs.dev/schemas/1.7.3/schema.json",
"files": {
"ignore": [".vscode/", "node_modules/", "public/"]
},
"organizeImports": {
"enabled": true
},
"linter": {
"enabled": false,
"rules": {
"recommended": true
}
}
}

8
config.toml
View File

@ -1,5 +1,5 @@
# The URL the site will be built for # The URL the site will be built for
base_url = "https://www.filiprojek.cz" base_url = "https://dev.filiprojek.cz"
title = "Filip Rojek" title = "Filip Rojek"
compile_sass = true compile_sass = true
@ -17,8 +17,8 @@ smart_punctuation = true
git = "https://git.filiprojek.cz/fr/website" git = "https://git.filiprojek.cz/fr/website"
nav_items = [ nav_items = [
{name="Home", path="/"}, {name="Home", path="/"},
#{name="About", path="/about"}, {name="About", path="/about"},
#{name="Projects", path="/projects/"}, {name="Projects", path="/projects/"},
#{name="Posts", path="/posts"} {name="Posts", path="/posts"}
] ]

27
content/about.md Normal file
View File

@ -0,0 +1,27 @@
+++
title = "About"
template = "about.html"
+++
## About
I am student of IT at Charles University in Prague (Faculty of Education).
My programming journey began in high school, where I developed a passion for `Linux` and co-founded [Fofrweb](https://fofrweb.com). Together with a classmate, I created web applications using `Node.js` and `Vue.js`, all hosted on my own Linux server.
As a member of [Microlab](https://microlab.space), the university's hacker space, I engage with fellow tech enthusiasts. Additionally, I contribute to the open-source community as a package maintainer for [Void Linux](https://voidlinux.org).
## Work
I currently work as a Linux engineer. Most of my work involves Debian based systems - desktops (Raspberry Pi, Intel NUC) and servers.
I also create custom websites from time to time.
## Projects
Most of my projects are hosted on Gitea and GitHub:
- Gitea: [git.filiprojek.cz](https://git.filiprojek.cz/fr)
- GitHub: [github.com/filiprojek](https://github.com/filiprojek)
## Contact
- <a href="mailto:&#102;&#105;&#108;&#105;&#112;&#064;&#102;&#105;&#108;&#105;&#112;&#114;&#111;&#106;&#101;&#107;&#046;&#099;&#122;">&#102;&#105;&#108;&#105;&#112;&#064;&#102;&#105;&#108;&#105;&#112;&#114;&#111;&#106;&#101;&#107;&#046;&#099;&#122;</a>
- [@filiprojek](https://t.me/filiprojek) on Telegram
- PGP: [0x7E65EA58C6075F09](https://keys.openpgp.org/vks/v1/by-fingerprint/CA3D9BE28315B49164130CD97E65EA58C6075F09)

7
content/posts/_index.md Normal file
View File

@ -0,0 +1,7 @@
+++
title = "Posts"
template = "post_list.html"
page_template = "post.html"
sort_by = "date"
+++

66
content/posts/cs2_4-3_resolution.md Normal file
View File

@ -0,0 +1,66 @@
+++
title = "Fixing 4:3 Resolution in CS2 on Linux with NVIDIA GPU"
date = 2024-10-17
description = "How I fixed the 4:3 resolution in CS2 with an NVIDIA graphics card and Linux"
+++
I don't consider myself a gamer, but I've been playing the Counter-Strike series since CS 1.6. Every now and then, I enjoy staying up all night playing this broken game.
Ever since I started playing Counter-Strike, I’ve preferred using a 4:3 stretched resolution on my 16:9 monitor. When I switched to Linux as my daily driver, the only game I really cared about was CS:GO.
CS:GO ran perfectly without any tweaks on my [Void Linux](https://voidlinux.org) system with a 1050ti laptop graphics card. I could play with the stretched resolution, and I even got more FPS than I did on Windows.
My problems started with the release of CS2. The 4:3 resolution didn’t work at all, some resolutions were missing, and there didn’t seem to be a solution (except for some Wayland fixes). There’s a [GitHub issue](https://github.com/ValveSoftware/csgo-osx-linux/issues/3264) about it.
My first idea was to set a custom resolution through `xrandr`. I followed [guides like this one](https://unix.stackexchange.com/questions/227876/how-to-set-custom-resolution-using-xrandr-when-the-resolution-is-not-available-i), but that didn’t work for me.
For a while, I just stuck with the standard 16:9 `1920x1080` resolution. But today, I opened the `nvidia-settings` GUI. After tinkering with some advanced settings in the resolution section, I think I finally fixed my issue.
In the `X Server Display Configuration` section under advanced options, I adjusted the ViewPortIn and Panning settings. I’m currently using a `2560x1440` resolution, so for 4:3 stretched, I set the resolution to `1440x1080`.
Here are the settings that worked for me:
- **ViewPortIn**: `1440x1080`
- **ViewPortOut**: `2560x1440+0+0`
- **Panning**: `1440x1080`
That fixed the issue, but I didn’t want to manually open `nvidia-settings` every time I wanted to play CS2. After reading the [Arch Wiki article](https://wiki.archlinux.org/title/NVIDIA#Using_nvidia-settings) on `nvidia-settings`, I found that I could use this command to get the current resolution information:
```sh
$ nvidia-settings -q CurrentMetaMode
```
So ~I wrote~ ChatGPT wrote a small bash script to switch between my regular resolution and the CS2 resolution.
```bash
#!/bin/bash
# Define the commands for the two modes
MODE1="nvidia-settings --assign 'CurrentMetaMode=DPY-4: 2560x1440_144 @2560x1440 +1920+0 {ViewPortIn=2560x1440, ViewPortOut=2560x1440+0+0}, DPY-3: nvidia-auto-select @1920x1080 +0+180 {ViewPortIn=1920x1080, ViewPortOut=1920x1080+0+0}'"
MODE2="nvidia-settings --assign 'CurrentMetaMode=DPY-4: 2560x1440_144 @1440x1080 +0+0 {ViewPortIn=1440x1080, ViewPortOut=2560x1440+0+0}'"
# File to store the current mode
STATE_FILE="/tmp/current_resolution_mode"
# Check if the state file exists
if [[ ! -f "$STATE_FILE" ]]; then
# If the state file doesn't exist, create it and set it to mode 1
echo "1" > "$STATE_FILE"
CURRENT_MODE=1
else
# Read the current mode from the state file
CURRENT_MODE=$(cat "$STATE_FILE")
fi
# Switch between the two modes
if [[ "$CURRENT_MODE" -eq 1 ]]; then
# Switch to mode 2
eval "$MODE2"
echo "2" > "$STATE_FILE"
echo "Switched to resolution mode 2"
else
# Switch to mode 1
eval "$MODE1"
echo "1" > "$STATE_FILE"
echo "Switched to resolution mode 1"
fi
```

192
content/posts/jellyfin.md Normal file
View File

@ -0,0 +1,192 @@
+++
title = "Host Jellyfin with Docker and Docker Compose"
date = 2024-10-03
description = "Set up a Jellyfin media server with Docker, including hardware transcoding, media management, and companion services like Jellyseerr and Jellystat."
+++
Running your own media server is a great way to have complete control over your media library, and Jellyfin is one of the best open-source media server solutions available today. With Docker and Docker Compose, you can efficiently manage and scale your Jellyfin instance, along with useful companion services like Jellyseerr and Jellystat for enhanced functionality.
In this article, I’ll walk through my setup of a Jellyfin media server, hosted in Docker using Docker Compose. This assumes you already have Docker and Docker Compose installed and are comfortable with Linux environments. I’ll cover the configuration of Jellyfin, hardware transcoding, and the integration of supporting services like Jellyseerr and Jellystat to manage requests and track server statistics.
## Docker Compose Configuration Breakdown
Here’s the Docker Compose file I use to deploy Jellyfin and its associated services.
```yaml
services:
jellyfin:
image: jellyfin/jellyfin:latest
container_name: jellyfin
user: 1000:1000
restart: 'unless-stopped'
devices:
- /dev/dri:/dev/dri # for hardware transcoding
- /dev/dri/renderD128:/dev/dri/renderD128
#- /dev/kfd:/dev/kfd # Remove this device if you don't use the OpenCL tone-mapping
group_add:
- "103" # render gid
- "27" # video gid
networks:
- default
ports:
- 5100:8096
volumes:
- ./config:/config
- ./cache:/cache
- /mnt/media/torrent:/media:ro
- /dev/shm:/data/transcode # Offload transcoding to RAM if you have enough RAM
environment:
- JELLYFIN_PublishedServerUrl=https://your.host.com
jellyseerr:
image: fallenbagel/jellyseerr:latest
container_name: jellyseerr
environment:
- LOG_LEVEL=debug
- TZ=Europe/Prague
ports:
- 5280:5055
volumes:
- ./jellyseerr-config:/app/config
restart: unless-stopped
jellystat-db:
image: postgres:15.2
container_name: jellystat-db
restart: unless-stopped
environment:
POSTGRES_USER: postgres
POSTGRES_PASSWORD: <password>
volumes:
- ./jellystat-db:/var/lib/postgresql/data
jellystat:
image: cyfershepard/jellystat:latest
container_name: jellystat
restart: unless-stopped
environment:
POSTGRES_USER: postgres
POSTGRES_PASSWORD: <password>
POSTGRES_IP: jellystat-db
POSTGRES_PORT: 5432
JWT_SECRET: <jwt_secret>
TZ: Europe/Prague
volumes:
- ./jellystat-data:/app/backend/backup-data
ports:
- "5110:3000"
depends_on:
- jellystat-db
```
## Jellyfin Service
The core of this setup is the jellyfin service. This container runs the Jellyfin server itself, and the configuration is designed to optimize performance and security.
### Hardware Transcoding
For efficient media transcoding, I’ve configured Jellyfin to leverage the hardware capabilities of the host machine. Specifically, I’ve mounted the /dev/dri device to the container for Intel or AMD GPU transcoding:
```yaml
devices:
- /dev/dri:/dev/dri
- /dev/dri/renderD128:/dev/dri/renderD128
```
If you don’t need OpenCL tone-mapping, you can skip the /dev/kfd device. By adding the necessary GIDs (103 for render and 27 for video), the container has access to GPU resources.
Additionally, I’ve offloaded transcoding operations to the system’s RAM by mounting /dev/shm as the transcode directory:
```yaml
volumes:
- /dev/shm:/data/transcode
```
This is particularly useful if you have sufficient RAM, as it improves transcoding performance by avoiding disk I/O overhead.
### Storage
In the `volumes` section, I’ve mounted the following directories:
- `./config:/config`: Stores Jellyfin’s configuration data.
- `./cache:/cache`: Holds cache data to improve performance.
- `/mnt/media/torrent:/media:ro`: This is the read-only mount where Jellyfin accesses my media library. It’s pointed to my torrent directory, ensuring that Jellyfin can index and serve files from there but not modify them.
### Network and Ports
The Jellyfin server is exposed on port `5100` (mapped to Jellyfin’s default 8096 internal port). I also set the JELLYFIN_PublishedServerUrl environment variable to make sure the correct public URL is used for generating media links and external access.
## Jellyseerr for Media Requests
Jellyseerr is a companion service to Jellyfin, allowing users to request new content directly from the web interface. Here’s how I’ve integrated it:
```yaml
jellyseerr:
image: fallenbagel/jellyseerr:latest
container_name: jellyseerr
environment:
- LOG_LEVEL=debug
- TZ=Europe/Prague
ports:
- 5280:5055
volumes:
- ./jellyseerr-config:/app/config
restart: unless-stopped
```
I’ve exposed Jellyseerr on port `5280` and linked it to the default timezone (`Europe/Prague` in my case). It’s important to store the Jellyseerr configuration separately in the `./jellyseerr-config` directory to persist user settings and requests.
## Jellystat for Tracking Server Stats
Jellystat adds another layer of utility, giving you the ability to track detailed statistics about your Jellyfin server usage, including playback metrics, user activity, and media insights.
It relies on a PostgreSQL database (`jellystat-db` service) to store all the data. I’ve configured it like this:
```yaml
jellystat-db:
image: postgres:15.2
container_name: jellystat-db
restart: unless-stopped
environment:
POSTGRES_USER: postgres
POSTGRES_PASSWORD: <password>
volumes:
- ./jellystat-db:/var/lib/postgresql/data
```
Jellystat then communicates with the PostgreSQL instance:
```yaml
jellystat:
image: cyfershepard/jellystat:latest
container_name: jellystat
restart: unless-stopped
environment:
POSTGRES_USER: postgres
POSTGRES_PASSWORD: <password>
POSTGRES_IP: jellystat-db
POSTGRES_PORT: 5432
JWT_SECRET: <jwt_secret>
TZ: Europe/Prague
volumes:
- ./jellystat-data:/app/backend/backup-data
ports:
- "5110:3000"
depends_on:
- jellystat-db
```
In this configuration, Jellystat is exposed on port `5110`, and I’ve configured the necessary environment variables to link it to the `jellystat-db` container. The JWT secret is used to authenticate requests between Jellystat and Jellyfin.
# Optimizing and Securing the Setup
## 1. Automatic Restart
Each service is configured with `restart: unless-stopped`, ensuring that the containers are restarted automatically if they crash or the host reboots. This adds reliability to the deployment, minimizing downtime.
## 2. Using RAM for Transcoding
Offloading transcoding operations to RAM using `/dev/shm` significantly boosts the performance of Jellyfin, especially when dealing with multiple simultaneous streams or high-bitrate media.
## 3. Resource Isolation and Security
By specifying the `user: 1000:1000` directive in the Jellyfin container, I’ve ensured that the Jellyfin service runs as a non-root user on the host. This enhances security by limiting the container's privileges. Also, mounting `/media` in read-only (`ro`) mode ensures that the Jellyfin service cannot modify the media files directly, reducing the risk of accidental data corruption.
# Conclusion
This Docker Compose setup offers a robust Jellyfin media server that takes full advantage of hardware transcoding, secure media access, and useful companion services like Jellyseerr for content requests and Jellystat for usage tracking. Docker makes it easy to maintain, update, and scale this setup with minimal hassle, ensuring you have full control over your media experience.
With this configuration, you can efficiently manage and monitor your media server, adding a layer of automation and insight to your Jellyfin instance.

9
content/posts/nextcloud.md Normal file
View File

@ -0,0 +1,9 @@
+++
title = "Nextcloud"
date = 2024-10-03
description = "My Nextcloud docker based instance"
+++
This is an post about my docker based Nextcloud instance

7
content/projects/_index.md Normal file
View File

@ -0,0 +1,7 @@
+++
title = "Projects"
template = "project_list.html"
page_template = "project.html"
sort_by = "date"
+++

18
content/projects/debrepo.md Normal file
View File

@ -0,0 +1,18 @@
+++
title = "Debrepo"
date = 2023-05-01
description = "A Debian repository management tool"
[extra]
state = "stable"
+++
# Debrepo
A Debian repository management tool.
## About
`Debrepo` is a software tool designed for creating and managing Debian repositories for `*.deb` packages, providing a lightweight and user-friendly alternative to more complex tools like `reprepo` or `aptly`. While these alternatives may offer more advanced features, Debrepo focuses on providing essential functionality and ease of use for repository management, allowing users to easily add, remove, and update packages within their repositories. With Debrepo, users can efficiently manage their Debian repositories without the unnecessary complexity of more advanced tools.
## Links
- [Git](https://git.filiprojek.cz/fr/debrepo)

16
content/projects/dotfiles.md Normal file
View File

@ -0,0 +1,16 @@
+++
title = "Dotfiles"
date = 2019-01-01
description = "Collection of my configuration dotfiles"
[extra]
state = "active"
+++
# Dotfiles
## About
- Collection of my configuration dotfiles.
## Links
- [Git](https://git.filiprojek.cz/fr/dotfiles)

34
content/projects/fofrweb.md Normal file
View File

@ -0,0 +1,34 @@
+++
title = "Fofrweb"
date = 2019-11-27
description = "Custom websites and student projects"
[extra]
state = "active"
+++
# About
- Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.
# Projects
## Websites
### date
### links
## FofrMess
### date
## FofrTasks
### date
## Fofrbazar
- Internetová bazarová platforma
### 04/2021
- Technologie
- PHP
- Laravel
- MySQL
- Linux
- Apache

15
content/projects/nork.md Normal file
View File

@ -0,0 +1,15 @@
+++
title = "Nork"
date = 2021-08-13
description = "Simple node.js tool that extends express projects"
[extra]
state = "done"
+++
# Nork
## About
- Simple node.js tool that extends express projects.
## Links
- [Git](https://github.com/filiprojek/nork)

17
content/projects/pkmples.md Normal file
View File

@ -0,0 +1,17 @@
+++
title = "pkmples.cz website"
date = 2023-12-18
description = "Website for PKM Ples written in Zola"
[extra]
state = "done"
+++
Website for PKM Ples written in [Zola](https://getzola.org).
I am using [Gitea Actions](https://docs.gitea.com/usage/actions/overview) for CI/CD.
It is available at [pkmples.cz](https://pkmples.cz).
Source is available on my [Gitea](https://git.filiprojek.cz/fofrweb/com_pkmples.cz).

21
content/projects/selfhosting.md Normal file
View File

@ -0,0 +1,21 @@
+++
title = "Self Hosting"
date = 2024-10-14
description = "My selfhosting services"
[extra]
state = "pending"
+++
# Next Cloud
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.
# Jellyfin
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.
# Uptime Kuma
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.
# Gitea
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.

16
content/projects/website.md Normal file
View File

@ -0,0 +1,16 @@
+++
title = "Website"
date = 2023-08-29
description = "My personal website"
[extra]
state = "in development"
+++
# Website
## About
- This website is built using the Zola static site generator.
## Links
- [Git](https://git.filiprojek.cz/fr/website)

15
sass/about.scss Normal file
View File

@ -0,0 +1,15 @@
.about {
h2 {
margin-top: 1rem;
margin-bottom: .5rem;
}
h3, h4, h5, h6, p {
margin-top: .5rem;
margin-bottom: .5rem;
}
p {
text-align: left;
}
}

24
sass/content.scss
View File

@ -1,7 +1,7 @@
.content { .content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 2rem 20%; margin: 2rem 30%;
} }
.content { .content {
@ -18,3 +18,25 @@
margin-bottom: 1rem; margin-bottom: 1rem;
} }
} }
code {
font-size: 1rem;
}
ul {
list-style: none;
padding-left: 0;
li {
position: relative;
padding-left: 1rem;
}
li::before {
content: '•';
position: absolute;
left: 0;
color:white;
}
}

86
sass/project.scss
View File

@ -1,23 +1,69 @@
//.project-wrapper { //.language-yaml {
// justify-content: start; pre {
// align-items: start; display:flex;
//} align-items: center;
// min-height: 3rem;
//.left-bar { white-space: pre-wrap;
// width: 15rem; word-wrap: break-word;
// justify-content: start; overflow-x: auto;
// align-items: start; padding: .5rem;
// border-right: thin solid var(--c-blue); margin: .5rem 0;
// margin-right: 2.5rem; border-radius: 5px;
// padding: 0 2.5rem; }
//
// h2 {
// padding-bottom: 2.5rem;
// }
//}
.project-wrapper { .project-wrapper {
display: flex; max-width: 900px;
gap: 2.5rem; margin: 0 auto;
padding: 20px;
h1 {
margin-top: 2.5rem;
margin-bottom: 1rem;
}
h2 {
margin-top: 1.5rem;
margin-bottom: 1rem;
}
h3, h4, h5, h6, p {
margin-top: 1rem;
margin-bottom: 1rem;
}
p {
text-align: left;
}
} }
.link-back {
margin: 2rem 0;
}
.copy-code-wrapper {
position: relative;
}
.copy-code {
position: absolute;
top: .5rem;
right: .5rem;
cursor: pointer;
background-color: #1b1f26;
padding: .3rem ;
border-radius: 5px;
}
@media (max-width: 768px) {
.project-wrapper {
max-width: 100%;
padding: 1rem;
}
}
@media (max-width: 480px) {
.project-wrapper {
padding: 5px;
}
}

4
sass/project_list.scss
View File

@ -22,4 +22,8 @@
} }
} }
a {
color: var(--color);
}
} }

16
sass/style.scss
View File

@ -50,11 +50,18 @@ nav {
color: var(--color); color: var(--color);
font-size: 1.3rem; font-size: 1.3rem;
} }
a {
color: var(--color);
}
} }
a {
color: lightblue;
cursor: pointer;
text-decoration: underline;
}
a { color: var(--color); }
a:visited { color: var(--color); }
a:hover { color: var(--a-hover); } a:hover { color: var(--a-hover); }
@media (min-width: 400px) { @media (min-width: 400px) {
@ -64,11 +71,6 @@ a:hover { color: var(--a-hover); }
} }
} }
/*
.content {
padding: 2rem 1rem;
}
*/
footer { footer {
display: flex; display: flex;
width: 100vw; width: 100vw;

1
sass/vars.scss
View File

@ -12,3 +12,4 @@
--color: var(--c-white); --color: var(--c-white);
--background: var(--c-gray); --background: var(--c-gray);
} }

30
static/js/code-copy.js Normal file
View File

@ -0,0 +1,30 @@
let codes = document.querySelectorAll("pre")
codes.forEach(code => {
const elWrapper = document.createElement("div")
elWrapper.classList.add("copy-code-wrapper")
const el = document.createElement("span")
el.textContent = "Copy"
el.classList.add("copy-code")
elWrapper.appendChild(el)
code.parentNode.insertBefore(elWrapper, code)
let textContent = ""
code.childNodes.forEach(child => {
textContent += child.textContent;
})
elWrapper.addEventListener("click", (e) => {
e.preventDefault()
navigator.clipboard.writeText(textContent)
el.textContent = "Copied!"
setTimeout(() => {
el.textContent = "Copy"
}, 5000);
})
})

12
templates/base.html
View File

@ -17,6 +17,7 @@
</title> </title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Filip Rojek - Personal website">
<link rel="icon" type="image/x-icon" href="/img/fr.ico"> <link rel="icon" type="image/x-icon" href="/img/fr.ico">
<link rel="stylesheet" href="/general.css"> <link rel="stylesheet" href="/general.css">
<link rel="stylesheet" href="/vars.css"> <link rel="stylesheet" href="/vars.css">
@ -32,7 +33,7 @@
<a href="/" class="logo"> <a href="/" class="logo">
<img src="/img/fr_logo.webp" alt="logo"> <img src="/img/fr_logo.webp" alt="logo">
</a> </a>
<!--<div class="links"> <div class="links">
{% for item in config.extra.nav_items %} {% for item in config.extra.nav_items %}
<a href="{{ item.path }}" <a href="{{ item.path }}"
{% if item.path == current_path and item.path != "/" %} {% if item.path == current_path and item.path != "/" %}
@ -40,7 +41,7 @@
{% endif %} {% endif %}
>{{ item.name }}</a> >{{ item.name }}</a>
{% endfor %} {% endfor %}
</div>--> </div>
</nav> </nav>
</header> </header>
@ -56,12 +57,19 @@
{% endblock content %} {% endblock content %}
</main> </main>
<footer> <footer>
<p>Build time: {{ now() | date(format="%Y-%m-%d %H:%M") }},
{% if config.extra.git %} {% if config.extra.git %}
<a href="{{ config.extra.git }}" target="_blank">Source</a> <a href="{{ config.extra.git }}" target="_blank">Source</a>
{% endif %}</p> {% endif %}</p>
<p>&copy; filiprojek.cz 2022 - {{ now() | date(format="%Y")}}</p> <p>&copy; filiprojek.cz 2022 - {{ now() | date(format="%Y")}}</p>
</footer> </footer>
<script>
console.log("I heard that a cool frontend developer works for https://fofrweb.com")
</script>
{% block scripts %}
{% endblock scripts %}
</body> </body>
</html> </html>

32
templates/post.html Normal file
View File

@ -0,0 +1,32 @@
{% extends "base.html" %}
{% block styles %}
<link rel="stylesheet" href="/project.css">
{% endblock styles %}
{% block scripts %}
<script src="/js/code-copy.js" defer></script>
{% endblock scripts %}
{% block content %}
<section class="project-wrapper flex-col">
<h2>{{ page.title }}</h2>
<!--
<section class="left-bar flex-col">
<h2>Projects</h2>
{% set section = get_section(path=page.ancestors | last) %}
{% for project in section.pages %}
<a href="{{ project.permalink }}">{{project.title}}</a>
{% endfor %}
</section>
-->
<!-- <h2>{{ page.title }}</h2> -->
<div>
{{ page.content | safe }}
</div>
<a href="/posts" class="link-back">Back to list of posts</a>
</section>
{% endblock content %}

28
templates/post_list.html Normal file
View File

@ -0,0 +1,28 @@
{% extends "base.html" %}
{% block styles %}
<link rel="stylesheet" href="/project_list.css">
{% endblock styles %}
{% block content %}
<section class="project-list content">
<h1>My Posts</h1>
{% for post in section.pages %}
<div class="project">
<a class="title" href="{{ post.permalink }}">
{{ post.title }}
</a>
<p class="description">
{% if post.description %}
{{ post.description }}
{% else %}
&hellip;
{% endif %}
</p>
<hr>
<p>{{ post.date }}</p>
</div>
{% endfor %}
</section>
{% endblock content %}

2
templates/project.html
View File

@ -20,7 +20,7 @@
<div> <div>
{{ page.content | safe }} {{ page.content | safe }}
</div> </div>
<a href="/projects">Back to list of projects</a> <a href="/projects" class="link-back">Back to list of projects</a>
</section> </section>
{% endblock content %} {% endblock content %}