mirror of
https://github.com/theoludwig/theoludwig.git
synced 2025-05-29 22:37:44 +02:00
perf!: monorepo setup + fully static + webp images
BREAKING CHANGE: minimum supported Node.js >= 22.0.0 and pnpm >= 9.5.0
This commit is contained in:
14
packages/blog/.eslintrc.json
Normal file
14
packages/blog/.eslintrc.json
Normal file
@ -0,0 +1,14 @@
|
||||
{
|
||||
"root": true,
|
||||
"extends": ["@repo/eslint-config/nextjs/.eslintrc.json"],
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["*.ts", "*.tsx"],
|
||||
"plugins": ["@typescript-eslint"],
|
||||
"parser": "@typescript-eslint/parser",
|
||||
"parserOptions": {
|
||||
"project": true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
54
packages/blog/package.json
Normal file
54
packages/blog/package.json
Normal file
@ -0,0 +1,54 @@
|
||||
{
|
||||
"name": "@repo/blog",
|
||||
"version": "3.3.2",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"exports": {
|
||||
".": "./src/blog.ts",
|
||||
"./BlogPosts": "./src/BlogPosts.tsx",
|
||||
"./BlogPostUI": "./src/BlogPostUI.tsx"
|
||||
},
|
||||
"scripts": {
|
||||
"lint:eslint": "eslint src --max-warnings 0 --report-unused-disable-directives",
|
||||
"lint:typescript": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@repo/config-tailwind": "workspace:*",
|
||||
"@repo/utils": "workspace:*",
|
||||
"@repo/i18n": "workspace:*",
|
||||
"@repo/ui": "workspace:*",
|
||||
"@repo/react-hooks": "workspace:*",
|
||||
"@giscus/react": "catalog:",
|
||||
"@shikijs/rehype": "catalog:",
|
||||
"@mdx-js/mdx": "catalog:",
|
||||
"gray-matter": "catalog:",
|
||||
"katex": "catalog:",
|
||||
"rehype-katex": "catalog:",
|
||||
"rehype-raw": "catalog:",
|
||||
"rehype-slug": "catalog:",
|
||||
"remark-gfm": "catalog:",
|
||||
"remark-math": "catalog:",
|
||||
"shiki": "catalog:",
|
||||
"next": "catalog:",
|
||||
"next-mdx-remote": "catalog:",
|
||||
"next-intl": "catalog:",
|
||||
"react": "catalog:",
|
||||
"react-dom": "catalog:",
|
||||
"react-icons": "catalog:"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@repo/eslint-config": "workspace:*",
|
||||
"@repo/config-typescript": "workspace:*",
|
||||
"@types/node": "catalog:",
|
||||
"@types/react": "catalog:",
|
||||
"@types/react-dom": "catalog:",
|
||||
"@total-typescript/ts-reset": "catalog:",
|
||||
"@storybook/blocks": "catalog:",
|
||||
"@storybook/react": "catalog:",
|
||||
"@storybook/test": "catalog:",
|
||||
"eslint": "catalog:",
|
||||
"postcss": "catalog:",
|
||||
"tailwindcss": "catalog:",
|
||||
"typescript": "catalog:"
|
||||
}
|
||||
}
|
||||
7
packages/blog/postcss.config.js
Normal file
7
packages/blog/postcss.config.js
Normal file
@ -0,0 +1,7 @@
|
||||
const config = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
},
|
||||
}
|
||||
|
||||
export default config
|
||||
259
packages/blog/posts/clean-code.md
Normal file
259
packages/blog/posts/clean-code.md
Normal file
@ -0,0 +1,259 @@
|
||||
---
|
||||
title: "🧼 Clean Code"
|
||||
description: 'What is "Clean Code", what are "Design Patterns", and why is it so important today? Tips and tricks to make your code more readable and maintainable in the long term.'
|
||||
isPublished: true
|
||||
publishedOn: "2022-02-23T08:00:18.758Z"
|
||||
---
|
||||
|
||||
Hello! 👋
|
||||
|
||||
Have you already heard of "**Clean Code**" or "**Design Patterns**"?
|
||||
|
||||
Even if you know what it is about, this blog post will probably still be useful to you, I will share some tips and tricks to make your code more readable and maintainable in the long term.
|
||||
|
||||
**Note:** Sources used to write this blog post are available at the [end of this post](#sources).
|
||||
|
||||
## Definition: Clean Code
|
||||
|
||||
A clean code is a code that is **easy** to **read** and easy to **understand**.
|
||||
|
||||
But I promise it is not a code that is easy to write, in fact it is really **hard to write Clean Code**.
|
||||
|
||||
We could ask ourselves, what is **easy** to **read** and easy to **understand**?
|
||||
|
||||
It depends of many factors, and is somewhat relative to each one of us. The **perfect** Clean code **doesn't exist**, but we can try to be **as perfect as possible**.
|
||||
|
||||
## Why is it so important?
|
||||
|
||||
Code that works is great, but not enough, even if the code will be read and understood by the computer, we should not forget that the code is **written by human** and will be also **read by human** not only a machine.
|
||||
|
||||
For example the [Linux kernel](https://www.kernel.org/), is one of the biggest open source project with many contributors worldwide. Last data shows that it is about **20 millions** lines of code.
|
||||
|
||||
With a project of this magnitude, we can't let everyone do what they want and however they want, **we must set rules and conventions** to get everyone to agree, this allows to add features faster and will reduce possible bugs as **developers** will not struggle as much to understand the code.
|
||||
|
||||
## Definition: Design Patterns
|
||||
|
||||
These **rules** and **conventions** are so called **Design Patterns**.
|
||||
|
||||
A software design pattern is a general way of **solving a problem** by applying a **well-known solution**.
|
||||
|
||||
Design patterns are formalized **best practices** that the programmer can use to solve common problems when designing an application or system.
|
||||
|
||||
## How to write Clean Code and famous Design Patterns
|
||||
|
||||
To show you the rules and conventions, I will write the examples in the [TypeScript](https://www.typescriptlang.org/) programming language but it is relevant to any programming language.
|
||||
|
||||
### Naming variables
|
||||
|
||||
We all know that **variables** are used everywhere in **programming**, good variable names allow us to better understand the intention of the code.
|
||||
|
||||
#### Same vocabulary for the same type of variable
|
||||
|
||||
##### Example (bad way)
|
||||
|
||||
```typescript
|
||||
function getUserInfo(): User
|
||||
function getUserDetails(): User
|
||||
function getUserData(): User
|
||||
```
|
||||
|
||||
##### Example (good way)
|
||||
|
||||
```typescript
|
||||
function getUser(): User
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### Avoid "Magic Numbers"
|
||||
|
||||
##### Example (bad way)
|
||||
|
||||
```typescript
|
||||
// What does 86400000 mean?
|
||||
setTimeout(restart, 86400000)
|
||||
```
|
||||
|
||||
##### Example (good way)
|
||||
|
||||
```typescript
|
||||
const MILLISECONDS_IN_ONE_DAY = 24 * 60 * 60 * 1000
|
||||
setTimeout(restart, MILLISECONDS_IN_ONE_DAY)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### Explicit is better than implicit (no abbreviations or acronyms)
|
||||
|
||||
##### Example (bad way)
|
||||
|
||||
```typescript
|
||||
const u = getUser()
|
||||
const s = getSubscription()
|
||||
const t = charge(u, s)
|
||||
```
|
||||
|
||||
##### Example (good way)
|
||||
|
||||
```typescript
|
||||
const user = getUser()
|
||||
const subscription = getSubscription()
|
||||
const transaction = charge(user, subscription)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### As short as possible, as long as necessary
|
||||
|
||||
##### Example (bad way)
|
||||
|
||||
```typescript
|
||||
interface Car {
|
||||
carModel: string
|
||||
carColor: "red" | "blue" | "yellow"
|
||||
}
|
||||
const printCar = (car: Car): void => {
|
||||
console.log(`${car.carModel} (${car.carColor})`)
|
||||
}
|
||||
```
|
||||
|
||||
##### Example (good way)
|
||||
|
||||
```typescript
|
||||
interface Car {
|
||||
model: string
|
||||
color: "red" | "blue" | "yellow"
|
||||
}
|
||||
const printCar = (car: Car): void => {
|
||||
console.log(`${car.model} (${car.color})`)
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### Boolean names
|
||||
|
||||
The name of a boolean variable should be a question, and the answer should be true or false. We can use prefixes like `is`, `has`, `can` to make it more explicit and we should avoid negation.
|
||||
|
||||
##### Example (bad way)
|
||||
|
||||
```typescript
|
||||
let person = true
|
||||
let age = true
|
||||
let dance = true
|
||||
function isEmailNotUsed(email: string): boolean
|
||||
```
|
||||
|
||||
##### Example (good way)
|
||||
|
||||
```typescript
|
||||
let isPerson = true
|
||||
let hasAge = true
|
||||
let canDance = true
|
||||
function isEmailUsed(email: string): boolean
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### DRY (Don't Repeat Yourself)
|
||||
|
||||
When we copy/paste the same lines of code, we should better abstract it in a function, that we can reuse later without having to copy/paste the lines of code, that makes the code more maintainable afterwards, because if we need to change the behavior of this piece of code, we won't need to change it in several places, but only when declaring the function.
|
||||
|
||||
---
|
||||
|
||||
### KISS (Keep It Simple Stupid)
|
||||
|
||||
As we have just said, we will prefer to abstract the code in multiple functions, rather than leaving everything in the same place, but a function should not do "too much", and we should rather separate it into several distinct functions.
|
||||
|
||||
We have to keep it as simple as possible, not to implement features that are not requested, and to divide the functions as much as possible into small functions.
|
||||
|
||||
### Example (bad way)
|
||||
|
||||
```typescript
|
||||
import fs from "node:fs"
|
||||
import path from "node:path"
|
||||
|
||||
const createFile = async (
|
||||
name: string,
|
||||
isTemporary: boolean = false,
|
||||
): Promise<void> => {
|
||||
if (isTemporary) {
|
||||
return await fs.promises.writeFile(path.join("temporary", name), "")
|
||||
}
|
||||
return await fs.promises.writeFile(name, "")
|
||||
}
|
||||
```
|
||||
|
||||
`createFile` is a function that does 2 things so it is better to split it in 2 separated functions.
|
||||
|
||||
### Example (good way)
|
||||
|
||||
```typescript
|
||||
import fs from "node:fs"
|
||||
import path from "node:path"
|
||||
|
||||
const createFile = async (name: string): Promise<void> => {
|
||||
await fs.promises.writeFile(name, "")
|
||||
}
|
||||
|
||||
const createTemporaryFile = async (name: string): Promise<void> => {
|
||||
await createFile(path.join("temporary", name))
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### TDD (Test Driven Development)
|
||||
|
||||
Test-driven development (TDD) is a software development process relying on software requirements being converted to test cases before software is fully developed, and tracking all software development by repeatedly testing the software against all test cases. This is as opposed to software being developed first and test cases created later.
|
||||
|
||||
We first write tests that should fails because there are no implementation, and then we write the code implementation to make the tests succeeds.
|
||||
|
||||
The End To End (e2e) and Unit tests should document what is the behavior intended for the code.
|
||||
|
||||
---
|
||||
|
||||
### Avoid comments
|
||||
|
||||
One of the most important rule of "Clean Code": If you need to add **comments**, it's because your code is **not clean**.
|
||||
|
||||
I know that might be counter intuitive at first, as most developers will advice you to add comments to your code, to document what it does.
|
||||
|
||||
The thing is that you should choose good variable names, break down features in multiple functions, so that others developers can read your code and understand it just by reading the functions names etc.
|
||||
|
||||
You can write comments, but that should only be used documenting how to use a function but not for the implementation itself and in places where you can't be more explicit.
|
||||
|
||||
In fact, as we saw in the [TDD section](#tdd-test-driven-development), automated tests can document what a function should returns, and how the code should behave, so that should already improve code maintainability.
|
||||
|
||||
Having a good comment explaining a difficult code is better than nothing with a bad written code, difficult to understand.
|
||||
|
||||
#### Example (bad way)
|
||||
|
||||
```typescript
|
||||
// Check if subscription is active
|
||||
if (subscription.endDate > Date.now()) {
|
||||
}
|
||||
```
|
||||
|
||||
#### Example (good way)
|
||||
|
||||
```typescript
|
||||
const isSubscriptionActive = subscription.endDate > Date.now()
|
||||
if (isSubscriptionActive) {
|
||||
}
|
||||
```
|
||||
|
||||
Here we are creating a new variable `isSubscriptionActive` that allows us to avoid the need of a comment to understand what the code does.
|
||||
|
||||
---
|
||||
|
||||
## Conclusion
|
||||
|
||||
We can't write the perfect clean code understandable by everyone but we can **write code that is as perfect as possible to ease maintaibility** for yourself and others developers.
|
||||
|
||||
## Sources
|
||||
|
||||
- [Clean Code: A Handbook of Agile Software Craftsmanship by Robert C. Martin](https://books.google.fr/books/about/Clean_Code.html?id=hjEFCAAAQBAJ)
|
||||
- [Software Design Pattern (Wikipedia)](https://en.wikipedia.org/wiki/Software_design_pattern)
|
||||
- [TDD - Test-driven development (Wikipedia)](https://en.wikipedia.org/wiki/Test-driven_development)
|
||||
- [github.com/labs42io/clean-code-typescript](https://github.com/labs42io/clean-code-typescript)
|
||||
295
packages/blog/posts/git-ultimate-guide.md
Normal file
295
packages/blog/posts/git-ultimate-guide.md
Normal file
@ -0,0 +1,295 @@
|
||||
---
|
||||
title: "🗓️ Git version control: Ultimate Guide"
|
||||
description: "What is `git`, what are the most used commands, best practices, and tips and tricks. The Ultimate guide to master `git` in your daily workflow."
|
||||
isPublished: true
|
||||
publishedOn: "2022-10-27T14:33:07.465Z"
|
||||
---
|
||||
|
||||
Hello! 👋
|
||||
|
||||
Welcome to the Ultimate Guide to master `git` in your daily workflow, we will see what are the most used commands, what are the best practices, and tips and tricks.
|
||||
|
||||
This guide is a summary of the most important things to know when working with `git`, and in general, will link to the official documentation of `git` or other resources for more details, it is on purpose to not go in depth in each topic, it allows to summarize `git` and vocabulary about it (you can use it as a `git` cheatsheet).
|
||||
|
||||
**Note:** Sources used to write this blog post are available at the [end of this post](#sources).
|
||||
|
||||
## Introduction
|
||||
|
||||
**Git** is a free and open-source distributed **version control system** for keeping track of changes across a set of files.
|
||||
|
||||
Git was originally authored by [Linus Torvalds](https://en.wikipedia.org/wiki/Linus_Torvalds) in 2005 for the development of the [Linux kernel](https://kernel.org/).
|
||||
|
||||
Git allows:
|
||||
|
||||
- to work with several people on the same codebase.
|
||||
- track changes to know who did what and when.
|
||||
- revert changes.
|
||||
|
||||
Git is **decentralized**, which means that every developer has a full copy of the repository and the complete history of the project.
|
||||
|
||||
## Get started with `git` and `.gitconfig` config file
|
||||
|
||||
The first thing you should do when you install Git is to set your user name and email address.
|
||||
|
||||
```sh
|
||||
git config --global user.name "Username"
|
||||
git config --global user.email "email@example.com"
|
||||
```
|
||||
|
||||
These configurations are stored in the `.gitconfig` file in your home directory (e.g: `~/.gitconfig`) with this format:
|
||||
|
||||
```sh
|
||||
[user]
|
||||
name = Username
|
||||
email = email@example.com
|
||||
```
|
||||
|
||||
You can find more information and useful `git` configurations in the [official documentation](https://git-scm.com/docs/git-config).
|
||||
|
||||
## How `git` works?
|
||||
|
||||
Each `git` project is called a **repository** (or **repo** for short) and it contains all the files and folders for a project, as well as each file's revision history (**commits**) stored in the `.git` folder.
|
||||
|
||||
The history of a repository is represented by a graph.
|
||||
|
||||
Each node is called commit and contains:
|
||||
|
||||
- an instantaneous view (snapshot) of the state of the repository at a specific moment
|
||||
- metadata: message, author, creation date, etc.
|
||||
|
||||
Commits are **snapshots** (not diffs on each file) of the project at specific moments in time.
|
||||
|
||||
There are several areas where the files in your project will live in Git:
|
||||
|
||||
- **Working directory**: the files that you see in your computer's file system.
|
||||
- **Staging area**: the files that will go into your next commit (files added with `git add <filename>` command).
|
||||
- **Local repository**: the `.git` directory, which contains all of your project's commits, branches, etc. (files added with `git commit -m "message"` command).
|
||||
- **Remote repository**: the `.git` directory in a remote server (files added with `git push` command).
|
||||
|
||||
## Commands cheatsheet
|
||||
|
||||
You can find the official documentation of `git` commands at [git-scm.com/docs](https://git-scm.com/docs).
|
||||
|
||||
```sh
|
||||
# Initialize a new git repository
|
||||
git init
|
||||
|
||||
# Clone a repository
|
||||
git clone <url>
|
||||
|
||||
# Add all the files to staging area
|
||||
git add .
|
||||
|
||||
# Add specific file to staging area
|
||||
git add <file>
|
||||
|
||||
# Commit changes
|
||||
git commit -m "Commit message"
|
||||
|
||||
# Commit changes in the past
|
||||
git commit --date "10 day ago" -m "Commit message"
|
||||
|
||||
# Add remote repository
|
||||
git remote add <remote> <url>
|
||||
# The main <remote> is often called `origin`
|
||||
|
||||
# Add forked repository
|
||||
git remote add <remote> <url>
|
||||
# The forked <remote> is often called `upstream`
|
||||
|
||||
# List all the remotes
|
||||
git remote
|
||||
|
||||
# Sync forked repository
|
||||
git fetch <remote>
|
||||
git merge <remote>/<branch>
|
||||
|
||||
# Push changes to remote repository
|
||||
git push <remote>
|
||||
|
||||
# Pull changes from remote repository
|
||||
git pull <remote>
|
||||
|
||||
# Show the status of the working tree
|
||||
git status
|
||||
|
||||
# Show the commit history
|
||||
git log
|
||||
|
||||
# Create a new branch
|
||||
git checkout -b <branch>
|
||||
|
||||
# Switch to a branch (or tag or commit)
|
||||
git checkout <branch>
|
||||
|
||||
# Merge a branch into the current branch
|
||||
git merge <branch>
|
||||
|
||||
# Note: Merge creates a "Merge commit" when the base branch and the branch to merge have diverged (they have different commits).
|
||||
|
||||
# To avoid creating a "Merge commit", we can use rebase instead of merge.
|
||||
git rebase --interactive <branch-to-rebase-on>
|
||||
|
||||
# Combine multiple commits of a branch into one for a merge
|
||||
git merge --squash <branch>
|
||||
|
||||
# Change several past commits (interactive rebase)
|
||||
# HEAD points to the current consulted commit.
|
||||
git rebase --interactive HEAD~<number-of-commits>
|
||||
|
||||
# Delete a branch
|
||||
git branch --delete <branch>
|
||||
git push <remote> --delete <branch>
|
||||
|
||||
# Fetch branches from remote repository and prune
|
||||
git fetch --prune
|
||||
|
||||
# Revert a commit
|
||||
git revert <commit>
|
||||
|
||||
# Reset the current branch, delete all commits since <branch> (without removing the changes)
|
||||
git reset --soft <branch>
|
||||
|
||||
# Apply the changes introduced by some existing commits
|
||||
# (by first being on the branch where you want to apply the commit)
|
||||
git cherry-pick <commit>
|
||||
|
||||
# To avoid creating duplicated commits with cherry-pick, we can use rebase after cherry-pick.
|
||||
# <target-branch> being the commit where you want to apply the commit to cherry-pick.
|
||||
# <from-branch> being the branch where the commit to cherry-pick is.
|
||||
git rebase <target-branch> <from-branch>
|
||||
|
||||
# If, by mistake, you have started a branch from the wrong base branch, you can rebase the branch on the correct base branch.
|
||||
# For example, if you have started a branch `feature-2` from `feature` instead of `develop`, you can rebase the branch on `develop`.
|
||||
git rebase --onto <new-base-branch> <old-base-branch> <branch>
|
||||
# For example:
|
||||
git rebase --onto develop feature feature-2
|
||||
|
||||
# To list all commits that differ between two branches
|
||||
git log <branch1>..<branch2> # commits in branch2 that are not in branch1 (branch2 ahead of branch1, branch2 behind branch1)
|
||||
git log <branch2>..<branch1> # commits in branch1 that are not in branch2 (branch1 ahead of branch2, branch1 behind branch2)
|
||||
|
||||
# Summary of commit authors across all branches, excluding merge commits.
|
||||
git shortlog --summary --numbered --all --no-merges
|
||||
```
|
||||
|
||||
## `.gitignore` file
|
||||
|
||||
The `.gitignore` file is a text file that tells `git` which files (or patterns) it should ignore.
|
||||
|
||||
The `.gitignore` file is usually placed in the root directory of the repository.
|
||||
|
||||
We usually ignore files that are generated by the build process or files that contain sensitive information.
|
||||
|
||||
Example of `.gitignore` file:
|
||||
|
||||
```sh
|
||||
.env
|
||||
build
|
||||
*.exe
|
||||
```
|
||||
|
||||
## `.gitkeep` file
|
||||
|
||||
The `.gitkeep` file is a file that is used to keep an empty directory in a Git repository.
|
||||
|
||||
This is useful when you want to keep an empty directory in your repository but you don't want to commit any file inside it.
|
||||
|
||||
## Git remote repositories (GitHub/GitLab)
|
||||
|
||||
Once you are ready to share your code over the internet, you will need to create a remote repository on a service like [GitHub](https://github.com) or [GitLab](https://gitlab.com).
|
||||
|
||||
There are many other services, you can also self-host your own Git server.
|
||||
|
||||
### SSH vs HTTPS authentication
|
||||
|
||||
Once you have created a remote repository, you will need to authenticate to push and pull changes.
|
||||
|
||||
There are two main ways to authenticate:
|
||||
|
||||
- **SSH**: you will need to generate an SSH key pair and add the public key to your remote repository.
|
||||
- **HTTPS**: you will need to provide your username and password each time you push or pull changes.
|
||||
|
||||
SSH authentication is the recommended way to authenticate to a remote repository.
|
||||
|
||||
You can find more information about SSH authentication in the [official documentation](https://git-scm.com/book/en/v2/Git-on-the-Server-Generating-Your-SSH-Public-Key).
|
||||
|
||||
### Sign `git` commits with `gpg`
|
||||
|
||||
As we have seen in the [Get started with `git` and `.gitconfig` config file](#get-started-with-git-and-gitconfig-config-file) section, we can configure `git` with a name and email address with a value of our choice.
|
||||
|
||||
That means that **anyone can create a commit with any name and email address and claim to be whoever they want** when they create a commit.
|
||||
|
||||
To avoid this, you can sign your commits with a [GNU Privacy Guard](https://gnupg.org/) (<abbr>gpg</abbr>) key.
|
||||
|
||||
You can find more information about signing commits in the [official documentation](https://git-scm.com/book/en/v2/Git-Tools-Signing-Your-Work).
|
||||
|
||||
### Continous Integration/Continuous Delivery (CI/CD)
|
||||
|
||||
Once you have your code in a remote repository, everyone (with access) can potentially start contributing to the project. This is great, but it also means that you need to have a way to ensure that your code is working as expected for each change in the project.
|
||||
|
||||
You could do it manually, depending on the size and the complexity of the project, but it could be a tedious task.
|
||||
|
||||
Instead, you can use a **Continuous Integration** (CI) service to automate the process of testing your code, running linting, unit tests, e2e tests, etc.
|
||||
|
||||
There are many CI services, but the most popular ones are [GitHub Actions](https://github.com/features/actions), [GitLab CI](https://docs.gitlab.com/ee/ci/), [CircleCI](https://circleci.com/), [Travis CI](https://travis-ci.org/), and many others...
|
||||
|
||||
Then, once your code is ready, tested and working as expected, you can use a **Continuous Delivery** (CD) service to automate the process of **deploying your code**.
|
||||
|
||||
CI/CD services are usually integrated with remote repositories, so you can configure them to run automatically when you push changes to the remote repository.
|
||||
|
||||
## Best practices and `git` workflows
|
||||
|
||||
Commit messages are very important, they are a way to easily know what has changed in the project.
|
||||
|
||||
There are many conventions for commit messages, but the most popular one is the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification.
|
||||
|
||||
Then, we can use the commit messages to automatically determine a [semantic version](https://semver.org/) for the next release of the project.
|
||||
|
||||
When multiple developers are working on the same project, it is important to organize the work in a way that everyone can work on different features without conflicts (changes in the same files).
|
||||
|
||||
There are many ways to organize the work, but the most popular ones are:
|
||||
|
||||
- [GitFlow](https://nvie.com/posts/a-successful-git-branching-model/)
|
||||
- [GitHub Flow](https://guides.github.com/introduction/flow/)
|
||||
- [Trunk-based development](https://trunkbaseddevelopment.com/)
|
||||
|
||||
They are called **Git workflows**, or **Git branching strategies**.
|
||||
|
||||
## Tips and tricks
|
||||
|
||||
### `diff-commits` alias
|
||||
|
||||
The `git diff` command allows you to compare the changes between two commits, branches, etc.
|
||||
|
||||
Sometimes, you want to compare what commits have been made between two branches, without looking at the changes in the files, to do so, we can create an `alias` in `.gitconfig`:
|
||||
|
||||
```sh
|
||||
[alias]
|
||||
diff-commits = !sh -c 'echo -n "Commits in $2 not in $1 \\(" && printf "%d" $(git cherry -v $1 $2 | wc -l) && echo "\\)" && git cherry -v $1 $2 && echo "" && echo -n "Commits in $1 not in $2 \\(" && printf "%d" $(git cherry -v $2 $1 | wc -l) && echo "\\)" && git cherry -v $2 $1' -
|
||||
```
|
||||
|
||||
With this alias, we can compare the commits between `main` and `develop` branches for example:
|
||||
|
||||
```sh
|
||||
$ git diff-commits main develop
|
||||
|
||||
Commits in develop not in main (2)
|
||||
+ 9b80e0724df8454b43bc3935a1bffb67615572d7 feat: new feature
|
||||
+ 50721f8ecb60ff023bdccc1873ec1e20ee0b21a0 feat: new feature 2
|
||||
|
||||
Commits in main not in develop (1)
|
||||
- f7bb9d2af7763e0a311099e880e8bf7d6b51bf4d fix: urgent hotfix
|
||||
```
|
||||
|
||||
## Conclusion
|
||||
|
||||
`git` is the tool that every programmer should know to do collaborative work (not only, `git` is also very powerful even when working alone) and keep track of changes across a set of files.
|
||||
|
||||
## Sources
|
||||
|
||||
- [Git official website and documentation](https://git-scm.com/)
|
||||
- [Git Explained in 100 Seconds](https://www.youtube.com/watch?v=hwP7WQkmECE)
|
||||
- [Understand Git in 7 minutes](https://www.jesuisundev.com/en/understand-git-in-7-minutes/)
|
||||
- [How (and why) to sign Git commits | With Blue Ink](https://withblue.ink/2020/05/17/how-and-why-to-sign-git-commits.html?utm_source=tiktok&utm_campaign=codetok-sign)
|
||||
- [What Are the Best Git Branching Strategies](https://www.flagship.io/git-branching-strategies/)
|
||||
64
packages/blog/posts/hello-world.md
Normal file
64
packages/blog/posts/hello-world.md
Normal file
@ -0,0 +1,64 @@
|
||||
---
|
||||
title: "👋 Hello, world!"
|
||||
description: "First post of the blog, introduction and explanation of how this blog is made."
|
||||
isPublished: true
|
||||
publishedOn: "2022-02-20T08:00:18.758Z"
|
||||
---
|
||||
|
||||
Hello, world! 👋
|
||||
|
||||
## Introduction
|
||||
|
||||
This blog is here to document my journey of learning computer science, explaining technical difficulties and problems I encountered, and how I solved them.
|
||||
|
||||
The idea is that I will share my knowledge with you (readers), and hopefully help you to learn too.
|
||||
|
||||
Keep in mind that I will not translate the posts in French, all the posts will be written in English, as I'm not a native English speaker, I will probably make mistakes, feel free to open pull requests on [GitHub](https://github.com/theoludwig/theoludwig) to correct them. 😊
|
||||
|
||||
I plan to publish new posts when I have something new to share. There's no schedule, so stay tuned!
|
||||
|
||||
To stay informed of new blog post and to ask questions, feel free to follow me on Twitter: [@theoludwig\_](https://twitter.com/theoludwig_).
|
||||
|
||||
## Project based learning
|
||||
|
||||
The blog posts subjects will be often related to the problems I encountered in the projects I am currently working on.
|
||||
|
||||
Most of the time, when I am learning something new, I **learn it because I actually need it for a project**, I don't learn [React.js](https://reactjs.org) because it is trending, and everyone talks about it.
|
||||
|
||||
I learn something new, because it solved a "real life" problem I had encountered. For example, [React.js](https://reactjs.org) allows to easily update the DOM (Document Object Model) in the browser, so we can add interactivity to our web pages, not only that, it allows to reuse multiple HTML (JSX) elements with components.
|
||||
|
||||
[React.js](https://reactjs.org) is only an example, but hopefully you understood my point: I often don't like too much theoretical thing, and enjoy much more practical things.
|
||||
|
||||
## How this blog is made
|
||||
|
||||
In this section, I will explain what technologies I used to make this blog, and what are the technical choices I had to do.
|
||||
|
||||
The code of this website is open source on [GitHub](https://github.com/theoludwig/theoludwig), so you can see the code and contribute to it.
|
||||
|
||||
### Technologies
|
||||
|
||||
- [Next.js](https://nextjs.org/)
|
||||
|
||||
It allows to have a server-side rendered website, that means that it is faster and easier to have a good <abbr title="Search Engine Optimization">SEO</abbr> than a <abbr title="Single Page Application">SPA</abbr>.
|
||||
|
||||
- [MDX](https://mdxjs.com/)
|
||||
|
||||
MDX is an extension of Markdown that allows you to use custom React components.
|
||||
|
||||
Here's what Markdown looks like:
|
||||
|
||||
```md
|
||||
A simple paragraph, with some **bold** text and some `inline code`.
|
||||
```
|
||||
|
||||
When using Markdown in a web application, there's a "compile" step; the Markdown needs to be transformed into HTML, so that it can be understood by the browser. Those asterisks get turned into a `<strong>` tag, and each paragraph gets a `<p>` tag etc.
|
||||
|
||||
- [Tailwind CSS](https://tailwindcss.com/)
|
||||
|
||||
Tailwind is a CSS framework to rapidly build modern websites without ever leaving HTML.
|
||||
|
||||
## Conclusion
|
||||
|
||||
I hope you will enjoy my blog, and will find it useful.
|
||||
|
||||
See you in the next posts! 😊
|
||||
66
packages/blog/posts/mistakes-as-junior-developer.md
Normal file
66
packages/blog/posts/mistakes-as-junior-developer.md
Normal file
@ -0,0 +1,66 @@
|
||||
---
|
||||
title: "❌ Mistakes I made as a junior developer"
|
||||
description: "Here are mistakes I made when I started, to prevent you from making the same mistakes."
|
||||
isPublished: true
|
||||
publishedOn: "2022-03-14T07:42:52.989Z"
|
||||
---
|
||||
|
||||
Hello! 👋
|
||||
|
||||
I will explain some of the mistakes I made as a junior developer, so you can avoid doing them.
|
||||
|
||||
## 1. Skipped learning how to do automated tests
|
||||
|
||||
Probably one of the most common errors junior developers does.
|
||||
|
||||
When you begin in programming, you learn a programming language, so you learn variables, conditions, loops, functions, etc.
|
||||
|
||||
With these concepts, you might start a new project, but as the project grows, you will end up using functions at multiple places in code, so if you change the behavior of a function, it will affect the whole project.
|
||||
|
||||
And because the code grows, you might do some refactoring to make it more maintainable, but because we are humans, we make mistakes, you could accidentally break the entire project even with a tiny change you thought was safe to do.
|
||||
|
||||
If you had automated tests, you would have a way to know if you made a mistake even before deploying to production.
|
||||
|
||||
Depending on the programming language you are using, and what is the project you are working on, writing tests will be different.
|
||||
|
||||
Be aware that there are 3 main testing strategies:
|
||||
|
||||
- [Unit testing](https://en.wikipedia.org/wiki/Unit_testing)
|
||||
- [Integration testing](https://en.wikipedia.org/wiki/Integration_testing)
|
||||
- [End-to-end testing](https://en.wikipedia.org/wiki/End-to-end_testing)
|
||||
|
||||
After you learned the basics of programming, learn how to write automated tests, it will save you a lot of time and debugging.
|
||||
|
||||
I would even say that you should get used-to writing tests, it should be an automatism, you should not even have to think about it to do it.
|
||||
|
||||
## 2. Thinking too big, with too much abstraction
|
||||
|
||||
Abstraction is great, but it can be harder to understand what is going on if actually don't need this abstraction.
|
||||
|
||||
Find the right balance, between abstraction and simple implementation, start simple, and then gradually improve and add more features.
|
||||
|
||||
When you start a new project, you should focus on the core of the project, not on the details, to release as soon as possible, a working usable version of your project also called a [**Minimum Viable Product** (MVP)](https://en.wikipedia.org/wiki/Minimum_viable_product), it is better than a half-functioning, over-engineered project.
|
||||
|
||||
I made this mistake while developing [Thream](../posts/thream-v1-0-0.md), your **open source** platform to stay close with your friends and communities, **talk**, chat, **collaborate**, share and **have fun**.
|
||||
|
||||
Basically, I thought it was cool, to do a "big" v1.0.0 release with a lot of features, but in fact, it was not, because I could not even show what I was developing (to the end-users, not technical people) as I was making multiple features at the same time and also mainly focused on the **REST API** side and not at all the **website (frontend)**.
|
||||
|
||||
What I recommend you to do is to start with a **v1.0.0** release as soon as possible with the minimum required features needed for your project idea, and then gradually add new features and release new versions.
|
||||
|
||||
In my example for [Thream](../posts/thream-v1-0-0.md), I could release a v1.0.0 without these features:
|
||||
|
||||
- English/French translation (could be only English)
|
||||
- Light/Dark theme (could be only Dark)
|
||||
- OAuth2 Authentication (could be only simple email/password authentication)
|
||||
- User public profile
|
||||
- Channels (maybe could be only one channel per guild to start with)
|
||||
|
||||
And probably more, what was really required with [Thream](../posts/thream-v1-0-0.md), is that users could authenticate, create a community of friends, and then they could communicate with each other with messages in real-time, really that was enough.
|
||||
|
||||
And then with this basis, I could release, v1.1.0, v1.2.0 etc. with more features, and release new versions more often to show the progress of the project, it is also more motivating to have users testing our project and to **get feedback sooner**.
|
||||
|
||||
**Start simple, improve later.**
|
||||
|
||||
## Conclusion
|
||||
|
||||
The real key to success is to **be passionate**, **keep learning** on your own, and **look at mistakes as learning experiences**.
|
||||
343
packages/blog/posts/programming-challenges.md
Normal file
343
packages/blog/posts/programming-challenges.md
Normal file
@ -0,0 +1,343 @@
|
||||
---
|
||||
title: "🧠 Programming Challenges"
|
||||
description: "What are Programming Challenges and Competitive Programming and an introduction to Time/Space Complexity with Big O Notation."
|
||||
isPublished: true
|
||||
publishedOn: "2023-05-21T10:20:18.837Z"
|
||||
---
|
||||
|
||||
Hello! 👋
|
||||
|
||||
As **performance** and **reliability** is more and more important in software development, it is important to know how to write **efficient code**, and also learn to **not rely on every possible dependency of the world**, when it is not worth it.
|
||||
|
||||
The more dependencies we add to our projects, the greater the complexity and maintenance overhead becomes. Each additional dependency requires understanding its functionality, <abbr title="Application Programming Interface">API</abbr>, and potential conflicts with other dependencies. This complexity makes the codebase harder to maintain, and it also poses significant security risks.
|
||||
|
||||
We don't want to "reinvent the wheel" and rewrite everything from scratch for each project. In fact, you are **always depending on something** when you are writing your software. At the very least, you are dependent on the programming language you are using. Even if you are doing very low-level stuff, you are still depending on something: hardware.
|
||||
|
||||
However, it is important to draw a line between what dependencies are worth the cost and which are not.
|
||||
|
||||
Most likely adding a [JavaScript npm package `is-odd`](https://www.npmjs.com/package/is-odd) to check if a number is odd or even for example, is not worth it. Writing it ourselves allows a better maintenance in the long term.
|
||||
|
||||
Learning **how to solve problems** and how to write efficient code is very important and also a very broad and complicated topic, so this blog post will only be an **introduction to the subject**, and will not go in depth.
|
||||
|
||||
**Note:** Sources used to write this blog post are available at the [end of this post](#sources).
|
||||
|
||||
## What is Competitive Programming?
|
||||
|
||||
**Competitive programming** consists of solving correctly and efficiently **well-defined problems** by writing **computer programs** under specified **constraints**. Typically a solution to a problem is a combination of well-known techniques and new insights.
|
||||
|
||||
There are many famous competitions: [Google Code Jam](https://codingcompetitions.withgoogle.com/codejam), [Facebook Hacker Cup](https://www.facebook.com/codingcompetitions/hacker-cup), [International Olympiad in Informatics](https://ioinformatics.org/), [International Collegiate Programming Contest](https://icpc.global/), [LeetCode](https://leetcode.com/), [CodinGame](https://www.codingame.com/), etc.
|
||||
|
||||
The most common programming languages used for Competitive Programming are: **C++**, **Python** and **Java**. However the design of the algorithms and data structures are applicable to **any programming language**.
|
||||
|
||||
All examples solutions on this blog post will be done in **Python**.
|
||||
|
||||
## Topics to explore/learn with Competitive Programming
|
||||
|
||||
- Time/Space complexity and Big O Notation
|
||||
|
||||
- Sorting: Sorting algorithms and Binary search
|
||||
|
||||
- Data structures: Arrays (1D, 2D: Matrix, 3D, Multidimensional), Dictionaries, Linked lists, Stack, Queue, Trees, Graphs, Heaps, etc.
|
||||
|
||||
- Complete search: Generating Subsets, Permutations, Combinations, etc.
|
||||
|
||||
- Greedy algorithms: Coin problem, Scheduling, Minimizing sums, etc.
|
||||
|
||||
- Dynamic programming: Fibonacci, Coin problem, Knapsack, etc.
|
||||
|
||||
- Bit manipulation: Bit representation, Bit operations, etc.
|
||||
|
||||
- Shortest path: Dijkstra, Bellman-Ford, Floyd-Warshall, etc.
|
||||
|
||||
- String: Trie structure, String hashing, Z-algorithm, etc.
|
||||
|
||||
You can see there are lot of concepts to learn and explore, and it is not an exhaustive list. On this blog post, we will only see the first topic: **Time/Space complexity and Big O Notation**.
|
||||
|
||||
## Time/Space complexity and Big O Notation
|
||||
|
||||
### Definition
|
||||
|
||||
An Algorithm is a finite sequence of well-defined instructions, that have to be given to the computer to perform a specific task. In this context, the variation can occur the way how the instructions are defined. There can be **any number of ways**, a specific set of instructions can be defined **to perform the same task**. Also, with options available to choose any one of the available programming languages, the instructions can take any form of syntax along with the performance boundaries of the chosen programming language. We also indicated the algorithm to be performed in a computer, which leads to the next variation, in terms of the operating system, processor, hardware, etc. that are used, which can also influence the way an algorithm can be performed.
|
||||
|
||||
Different factors can influence the outcome of an algorithm being executed, it is wise to understand how efficiently such programs are used to perform a task. To gauge this, we require to evaluate:
|
||||
|
||||
- The **Space complexity** of an algorithm **quantifies** the amount of **space or memory taken** by an algorithm to run based on the size of the input.
|
||||
- The **Time complexity** of an algorithm **quantifies** the amount of **time taken** by an algorithm to run based on the size of the input.
|
||||
|
||||
We more often talk about the **time complexity** than space complexity of an algorithm, because we can reuse memory unlike time and memory is cheap nowadays.
|
||||
|
||||
**Big O Notation** describes the complexity of an algorithm in terms of **how quickly it grows relative to the input size $n$ (e.g: length of the string, size of the array etc.)** by defining the $N$ number of operations that are done on it.
|
||||
Example of Big O notation: $O(n^2)$.
|
||||
|
||||
### Time complexity
|
||||
|
||||
Time complexity **measures** the **time taken** **to execute each statement** of code in an algorithm. It is not going to examine the total execution time of an algorithm. Rather, it is going to give information about the variation (increase or decrease) in execution time when the number of operations (increase or decrease) in an algorithm.
|
||||
|
||||
There are many rules to calculate the time complexity of an algorithm.
|
||||
|
||||
#### Loops
|
||||
|
||||
A common reason why an algorithm is slow is that it contains many loops that go through the input. The more nested loops the algorithm contains, the slower it will run.
|
||||
|
||||
If there are $k$ nested loops, the time complexity of the algorithm will be $O(n^k)$.
|
||||
|
||||
##### Example $O(n)$
|
||||
|
||||
```python
|
||||
for iteration in range(n):
|
||||
pass
|
||||
|
||||
# or with a while loop
|
||||
iteration = 0
|
||||
while iteration < n:
|
||||
pass
|
||||
```
|
||||
|
||||
##### Example $O(n^2)$
|
||||
|
||||
```python
|
||||
for iteration in range(n):
|
||||
for iteration2 in range(n):
|
||||
pass
|
||||
```
|
||||
|
||||
##### Example $O(n^3)$
|
||||
|
||||
```python
|
||||
for iteration in range(n):
|
||||
for iteration2 in range(n):
|
||||
for iteration3 in range(n):
|
||||
pass
|
||||
```
|
||||
|
||||
etc.
|
||||
|
||||
#### Order of magnitude
|
||||
|
||||
A time complexity does not tell us the exact number of times the code inside a loop is executed, but it only shows the **order of magnitude**.
|
||||
|
||||
In the following examples, the time complexity of the algorithms is $O(n)$ but the number of operations is different.
|
||||
|
||||
##### Example 1
|
||||
|
||||
```python
|
||||
for iteration in range(0, n * 3, 1):
|
||||
pass
|
||||
```
|
||||
|
||||
Number of operations: $3n$
|
||||
|
||||
##### Example 2
|
||||
|
||||
```python
|
||||
for iteration in range(0, n + 5, 1):
|
||||
pass
|
||||
```
|
||||
|
||||
Number of operations: $n + 5$
|
||||
|
||||
##### Example 3
|
||||
|
||||
```python
|
||||
for iteration in range(0, n, 2):
|
||||
pass
|
||||
```
|
||||
|
||||
Number of operations: ${n \over 2}$
|
||||
|
||||
#### Phases
|
||||
|
||||
If the algorithms consists of consecutive phases, the total time complexity is the largest time complexity of a single phase because it is usually the bottleneck of the code.
|
||||
|
||||
The following code consists of 3 phases, with time complexities $O(n)$, $O(n^2)$ and $O(n)$. Thus the total time complexity is $O(n^2)$.
|
||||
|
||||
```python
|
||||
for iteration in range(n):
|
||||
pass
|
||||
|
||||
for iteration in range(n):
|
||||
for iteration2 in range(n):
|
||||
pass
|
||||
|
||||
for iteration in range(n):
|
||||
pass
|
||||
```
|
||||
|
||||
#### Several variables
|
||||
|
||||
Sometimes the time complexity depends on several factors. In this case, the time complexity formula contains several variables: $O(nm)$.
|
||||
|
||||
```python
|
||||
for iteration in range(n):
|
||||
for iteration2 in range(m):
|
||||
pass
|
||||
```
|
||||
|
||||
#### Recursion
|
||||
|
||||
The time complexity of a recursive function depends on the number of times it is called and the time complexity of a single call. The total time complexity is the product of these values.
|
||||
|
||||
##### Example 1
|
||||
|
||||
The call `recursive(n)` causes $n$ calls and the time complexity of each call is $O(1)$. Thus the total time complexity is $O(n)$.
|
||||
|
||||
```python
|
||||
def recursive(n: int):
|
||||
if n != 1:
|
||||
recursive(n - 1)
|
||||
```
|
||||
|
||||
##### Example 2
|
||||
|
||||
```python
|
||||
def recursive(n: int):
|
||||
if n != 1:
|
||||
recursive(n - 1)
|
||||
recursive(n - 1)
|
||||
```
|
||||
|
||||
In this case, `recursive(n)` causes 2 other calls except for $n = 1$.
|
||||
|
||||
The following table shows the function calls produced by this single call:
|
||||
|
||||
| function call | number of calls |
|
||||
| ------------- | --------------- |
|
||||
| $g(n)$ | $1$ |
|
||||
| $g(n - 1)$ | $2$ |
|
||||
| $g(n - 2)$ | $4$ |
|
||||
| ... | ... |
|
||||
| $g(1)$ | $2^{n - 1}$ |
|
||||
|
||||
Based on this, the time complexity is:
|
||||
|
||||
$$
|
||||
1 + 2 + 4 + ... + 2^{n - 1} = 2^n - 1 = O(2^n)
|
||||
$$
|
||||
|
||||
#### Complexity Classes (from fastest to slowest)
|
||||
|
||||
|
||||
|
||||
Here is a list of classes of functions that are commonly encountered when analyzing the running time of an algorithm.
|
||||
|
||||
- $O(1)$: **Constant** (does not depend on the input size). A typical constant-time algorithm is a direct formula that calculates the answer.
|
||||
|
||||
- $O(\log_2(n))$: **Logarithmic** algorithm often halves the input size at each step. $\log_2(n)$ equals the number of times $n$ must be divided by 2 to get 1.
|
||||
|
||||
- $O(\sqrt{n})$: **Square root** algorithm is slower than $O(\log_2(n))$ but faster than $O(n)$.
|
||||
|
||||
- $O(n)$: **Linear** algorithm goes through the input a constant number of times. This is often the best possible time complexity, because it is usually necessary to access each input element at least once before reporting the answer.
|
||||
|
||||
- $O(n \log_2(n))$: **Log linear** often indicates that the algorithm sorts the input, because the time complexity of efficient sorting algorithms is $O(n \log_2(n))$. Another possibility is that the algorithm uses a data structure where each operation takes $O(\log_2(n))$ time.
|
||||
|
||||
- $O(n^2)$: **Quadratic** algorithm often contains 2 nested loops. It is possible to go trough all pairs of the input elements in $O(n^2)$ time.
|
||||
|
||||
- $O(n^3)$: **Cubic** algorithm often contains 3 nested loops. It is possible to go trough all triplets of the input elements in $O(n^3)$ time.
|
||||
|
||||
- $O(2^n)$: **Exponential** often indicates that the algorithm iterates through all subsets of the input elements. For example, the subsets of $\{1, 2, 3\}$ are $S = \{\{\empty\}, \{1\}, \{2\}, \{3\}, \{1, 2\}, \{1, 3\}, \{2, 3\}, \{1, 2, 3\} \}$.
|
||||
|
||||
- $O(n!)$: **Factorial** often indicates that the algorithm iterates through all permutations of the input elements. For example, the permutations of $\{1, 2, 3\}$ are $P = \{\{1, 2, 3\}, \{1, 3, 2\}, \{2, 1, 3\}, \{2, 3, 1\}, \{3, 1, 2\}, \{3, 2, 1\} \}$.
|
||||
|
||||
### Estimating efficiency
|
||||
|
||||
By checking the time complexity of an algorithm, it is possible to check before implementing the algorithm, that it is efficient enough for the problem.
|
||||
|
||||
Example: assume that the time limit for a problem is 1 second and the input size is $n = 10^5$. If the time complexity is $O(n^2)$, the algorithm will perform about $(10^5)^2 = 10^{10}$ operations.
|
||||
|
||||
Given that a modern computer can perform some hundred of millions of operations per second. This should take at least 10 seconds, so the algorithm seems to be too slow for solving the problem.
|
||||
|
||||
## Practical problem: Maximum subarray sum
|
||||
|
||||
There are often several possible algorithms for solving a problem such that their time complexities are different. This section discusses a classic problem that can be solved using several different algorithmic techniques, including brute force, divide and conquer, dynamic programming, and reduction to shortest paths, each technique with different time complexity.
|
||||
|
||||
**Maximum subarray sum**: Given an array of $n$ integers, find the contiguous subarray with the largest sum.
|
||||
|
||||
Contiguous subarray is any sub series of elements in a given array that are contiguous ie their indices are continuous. The problem is interesting when there may be negative values in the array, because if the array only contains positive values, the maximum subarray sum is basically the sum of the array (the subarray being the complete array).
|
||||
|
||||
### Example 1
|
||||
|
||||
#### Input
|
||||
|
||||
```txt
|
||||
[1, 2, 3, 4, 5, 6]
|
||||
```
|
||||
|
||||
#### Output
|
||||
|
||||
```txt
|
||||
21
|
||||
```
|
||||
|
||||
**Explanation:** The subarray with the largest sum is the array itself (as there is no negative values) `[1, 2, 3, 4, 5, 6]` which has a sum of `21`.
|
||||
|
||||
### Example 2
|
||||
|
||||
#### Input
|
||||
|
||||
```txt
|
||||
[-1, 2, 4, -3, 5, 2, -5, 2]
|
||||
```
|
||||
|
||||
#### Output
|
||||
|
||||
```txt
|
||||
10
|
||||
```
|
||||
|
||||
**Explanation:** The subarray with the largest sum is `[2, 4, -3, 5, 2]` which has a sum of `10`.
|
||||
|
||||
### Worst solution: Brute force ($O(n^3)$)
|
||||
|
||||
```python
|
||||
def maximum_subarray_sum_cubic(array: list[int]) -> int:
|
||||
"""
|
||||
Time complexity: O((array_length)^3)
|
||||
|
||||
We go through all possible subarrays, calculate the sum in each subarray and maintain the maximum sum.
|
||||
"""
|
||||
if len(array) == 0:
|
||||
return 0
|
||||
best_sum = array[0]
|
||||
length = len(array)
|
||||
for i in range(length):
|
||||
for j in range(i, length):
|
||||
sum = 0
|
||||
for k in range(i, j + 1):
|
||||
sum += array[k]
|
||||
if sum > best_sum:
|
||||
best_sum = sum
|
||||
return best_sum
|
||||
```
|
||||
|
||||
### Better solution: Linear time ($O(n)$)
|
||||
|
||||
```python
|
||||
def maximum_subarray_sum_linear(array: list[int]) -> int:
|
||||
"""
|
||||
Time complexity: O(array_length)
|
||||
|
||||
We loop through the array and for each array position, we calculate the maximum sum of a subarray that ends at that position. After this, the answer for the problem is the maximum of those sums.
|
||||
"""
|
||||
if len(array) == 0:
|
||||
return 0
|
||||
best_sum = array[0]
|
||||
length = len(array)
|
||||
sum = 0
|
||||
for i in range(length):
|
||||
sum = max(array[i], sum + array[i])
|
||||
best_sum = max(best_sum, sum)
|
||||
return best_sum
|
||||
```
|
||||
|
||||
## Conclusion
|
||||
|
||||
Problems solving is a very complicated and large topic, and also a very important skill to have as a software developer.
|
||||
|
||||
To improve our problems solving skills, we can regularly practice with [programming challenges](https://github.com/theoludwig/programming-challenges).
|
||||
|
||||
## Sources
|
||||
|
||||
- [Wikipedia - Competitive programming](https://en.wikipedia.org/wiki/Competitive_programming)
|
||||
- [Frontend Masters - The Last Algorithms Course You'll Need](https://frontendmasters.com/courses/algorithms/)
|
||||
- [Big-O Cheat Sheet](https://www.bigocheatsheet.com/)
|
||||
- [programming challenges](https://github.com/theoludwig/programming-challenges)
|
||||
127
packages/blog/posts/thream-v1-0-0.md
Normal file
127
packages/blog/posts/thream-v1-0-0.md
Normal file
@ -0,0 +1,127 @@
|
||||
---
|
||||
title: "🟢 Thream v1.0.0"
|
||||
description: "Your open source platform to stay close with your friends and communities, talk, chat, collaborate, share and have fun."
|
||||
isPublished: true
|
||||
publishedOn: "2022-04-11T10:24:55.206Z"
|
||||
---
|
||||
|
||||
⚠️ **Thream** is **not maintained anymore**, and is no longer accessible on ~~[thream.theoludwig.fr](https://thream.theoludwig.fr)`~~.
|
||||
|
||||
While the project taught me a lot, it had too much ambitions for new features, with nearly no users, and no contributors.
|
||||
|
||||
You can still use the code as you wish and fork it to maintain it yourself, as the code is completely open source on [GitHub](https://github.com/Thream).
|
||||
|
||||
This blog post is still available to explain the project, and how it was implemented.
|
||||
|
||||
---
|
||||
|
||||
Hello! 👋
|
||||
|
||||
After months of hard work, [Thream v1.0.0](https://github.com/Thream) has been released! 🎉
|
||||
|
||||
[**Thream**](https://github.com/Thream) is your open-source platform to stay close with your friends and communities, talk, chat, collaborate, share and have fun.
|
||||
|
||||
## Presentation
|
||||
|
||||
[**Thream**](https://github.com/Thream) is a social network to stay close with your friends and communities to talk, chat, collaborate and share.
|
||||
|
||||
The project is largely inspired by [Discord](https://discord.com), a proprietary instant messaging service, but differentiates itself by its **non-profit open source philosophy** and will integrate special features.
|
||||
|
||||
The source code is available on [GitHub](https://github.com/Thream).
|
||||
|
||||
The idea is that a user can create an account to authenticate with an email address, and a password, or directly use an account from another platform (currently supported: Google, GitHub, Discord). Once the user is authenticated, he/she can create and join "guilds", in other words communities, in order to discuss with other people in several channels to group discussions talking about the same subject.
|
||||
|
||||
|
||||
|
||||
[**Thream**](https://github.com/Thream) is a website that works on any recent browser.
|
||||
|
||||
## History
|
||||
|
||||
The idea for the project has existed since May 13, 2020, symbolized by a [publication on Twitter](https://twitter.com/theoludwig_/status/1260638175246135296) by the creator: Théo LUDWIG.
|
||||
|
||||
The main goal is to put into **practice knowledge in web development** and computer science in general on a concrete project that can **easily evolve over time** where you can add many features.
|
||||
|
||||
The development of the project begins under the name of **SocialProject**, on August 20, 2020.
|
||||
|
||||
|
||||
|
||||
When I started the project, I had little knowledge of database design, real-time management or the architecture of such a large <abbr title="Information Technology">IT</abbr> project, so this will be accompanied by many technical problems, to which we will need to find appropriate solutions.
|
||||
|
||||
On October 19, 2020, **SocialProject** becomes **Thream**, an invented name, not yet used and more original than the previous one, and also changes colors so that the application is accessible in two distinct themes (light and dark).
|
||||
|
||||
With the help of [Walidoux](https://github.com/Walidoux), a junior developer really good at making beautiful <abbr title="User Interface">UI</abbr> with <abbr title="Cascading Style Sheets">CSS</abbr>, we were able to collaborate on this side project together.
|
||||
|
||||
Since the project is mainly developed during free time (mainly on weekends), the project took longer to be developed than desired, but now we finally released the first version. 🥳
|
||||
|
||||
## Implementation and Technical Difficulties
|
||||
|
||||
### Architecture
|
||||
|
||||
**Thream** is divided into two distinct projects:
|
||||
|
||||
- The **server** part, called **backend**, which the user does not see, allows actions to be taken to save or recover data in the **database**, it is the technical and functional aspect of the project. This part uses a style of software architecture defining a set of constraints to be used to create web services that establish interoperability between computers on the Internet, called REST <abbr title="Application Programming Interface">API</abbr>.
|
||||
|
||||
- The **client** part, called **frontend**, what **the user sees on the screen**, such as forms, buttons and all the **graphic elements** with which the user can interact from a browser.
|
||||
|
||||
|
||||
|
||||
This design allows the separation between the client and the server, as long as they both structure their communication according to the <abbr title="Representational state transfer">REST</abbr> architectural guidelines, using the <abbr title="Hypertext Transfer Protocol">HTTP</abbr> protocol, they will be able to communicate with each other, which makes it possible to work independently on the backend and on the frontend using different technologies and skills, really useful in teamwork.
|
||||
|
||||
To allow the development of this design, it is necessary to think about its architecture in order to solve the following problem: how to store and structure the folders and files of a source code in order to find which file to modify to correct a problem with a particular feature, or to add a feature?
|
||||
|
||||
There are two main architectures to solve this problem:
|
||||
|
||||
- The **Monorepo** architecture is a single directory containing several distinct projects with well-defined relationships, i.e. it allows the modification of the code in the client and server part simultaneously in the same place by verifying that a modification in the server part does not impact the client part.
|
||||
- The **Polyrepo** architecture are several directories, a directory corresponding to a project.
|
||||
|
||||
Both architectures track source code file history using version control systems such as [git](https://git-scm.com/).
|
||||
|
||||
**Thream**, uses the **Polyrepo** architecture, to make it easier to set up and allows complete independence between client and server code.
|
||||
|
||||
### Technologies
|
||||
|
||||
Now that we have discussed, on the architecture of the source code, we will discuss the choice of technologies. The chosen technologies must meet the need, and allow the developer to be productive to quickly have a result. Often there are several possible technologies to meet the same need, so it is a question of choosing the technology that you prefer and that you know best.
|
||||
|
||||
To ease the development, we chose for **Thream** to use the [TypeScript](https://www.typescriptlang.org/), an open source programming language made by Microsoft. It's a stricter syntactic superset of **JavaScript**, and adds optional static typing to the language, meaning we can assign a "type" (`string`, `number`, `boolean` etc.) to each data/variable in the code, which has the advantage of identifying program errors even before execution and thus greatly improves developer productivity.
|
||||
|
||||
The **TypeScript** code is then compiled into **JavaScript** language which is one of the basic technologies of the **World Wide Web**, alongside HTML and CSS (in the client part), this makes it possible to make the pages of websites **interactive** by executing code depending on a certain event, for example when clicking on a button, or when pressing a key on the keyboard.
|
||||
|
||||
Since the creation of **Node.js** in 2009, it is now also possible to execute **JavaScript** outside the browser, for example on a server. **Node.js is a runtime environment** that offers modules that handle various basic features for interacting with files/folders, networking (DNS, HTTP, TCP, TLS/SSL, or UDP), and other functions inaccessible from a browser and designed to reduce the complexity of developing server applications.
|
||||
|
||||
**TypeScript** allows you to code with the same programming language, the client part and the server part, with different needs.
|
||||
|
||||
### User Interface (frontend)
|
||||
|
||||
The needs of the graphical interface (the client part):
|
||||
|
||||
- be accessible through a web browser
|
||||
- allow the user to install the application
|
||||
- adapts to screen size
|
||||
- real-time data update (example: when a new message is sent)
|
||||
- save the authenticated user (in cookie)
|
||||
|
||||
In order to meet its needs, Thream is a **<abbr title="Progressive Web App">PWA</abbr>**, this consists of making a website appear to the user as a native application, which makes it possible to combine the functionalities of browsers with those of the experience offered by native applications, such as the possibility of installing the application. The main advantage is to be able to **code once** and to provide the **application on several platforms (iOS, Android, Windows, GNU/Linux etc.)** without the need to develop specifically according to each platform.
|
||||
|
||||
To design a **<abbr title="Progressive Web App">PWA</abbr>**, and allow updating the data on the graphical interface, we can use a framework, a development infrastructure to offer us a set of tools and software components. For **Thream**, we use [Next.js](https://nextjs.org/), a framework based on [React.js](https://reactjs.org/), which allows you to create interactive user interfaces in JavaScript, to **update the graphical interface when the data changes**.
|
||||
|
||||
### Server (backend)
|
||||
|
||||
By using the protocol, **<abbr title="Hypertext Transfer Protocol">HTTP</abbr>**, it is the client who sends a request to the server, but to allow the transfer of data in real time, the **<abbr title="Hypertext Transfer Protocol">HTTP</abbr>** protocol is no longer sufficient.
|
||||
|
||||
We use **WebSockets** so that it is the server that send a response to all connected clients without the client requesting to the server to get a response, the server sends responses according to events, for example when creating or deleting a message.
|
||||
|
||||
Thanks to [Fastify](https://www.fastify.io/), a fast and low overhead web framework, for Node.js and [Socket.io](https://socket.io/), a bidirectional and low-latency communication for every platform, we can easily make REST API and real time communication.
|
||||
|
||||
To store the data, we use [PostgreSQL](https://www.postgresql.org/) database, and [Prisma](https://www.prisma.io/), a <abbr title="Object-Relational Mapping">ORM</abbr> for Node.js, which allows us to easily interact with the database without the need of writing <abbr title="Structured Query Language">SQL</abbr> ourselves.
|
||||
|
||||
## Current and future state
|
||||
|
||||
The main interest of **Thream** is to be able to put into practice the computer knowledge acquired as an autodidact on a concrete project, in order to learn, and understand the problems and potential solutions to complex computer applications such as social networks.
|
||||
|
||||
Now that the first version of **Thream** has been released, there may not be any major evolution thereafter, the project will continue to be maintained to fix any bugs, and remain accessible, for as long as possible.
|
||||
|
||||
The other interest of the project is that it is completely **open-source**, and allows those who want to contribute to the development, and add new features.
|
||||
|
||||
**Thream** is **non-profit** and therefore has no financial goal, deadline or specific feature target, which makes the design of the project a hobby and a way to learn new concepts.
|
||||
|
||||
Feel free to give feebacks and suggestions to improve the project, and to report any bug you find.
|
||||
25
packages/blog/src/BlogPost.ts
Normal file
25
packages/blog/src/BlogPost.ts
Normal file
@ -0,0 +1,25 @@
|
||||
export interface FrontMatter {
|
||||
title: string
|
||||
description: string
|
||||
isPublished: boolean
|
||||
publishedOn: string
|
||||
}
|
||||
|
||||
export interface BlogPost {
|
||||
frontmatter: FrontMatter
|
||||
slug: string
|
||||
content: string
|
||||
}
|
||||
|
||||
export const BLOG_POST_MOCK = {
|
||||
slug: "hello-world",
|
||||
content:
|
||||
"\nHello, world! 👋\n\n## Introduction\n\nThis blog is here to document my journey of learning computer science.",
|
||||
frontmatter: {
|
||||
title: "👋 Hello, world!",
|
||||
description:
|
||||
"First post of the blog, introduction and explanation of how this blog is made.",
|
||||
isPublished: true,
|
||||
publishedOn: "2022-02-20T08:00:18.758Z",
|
||||
},
|
||||
} satisfies BlogPost
|
||||
27
packages/blog/src/BlogPostComments.tsx
Normal file
27
packages/blog/src/BlogPostComments.tsx
Normal file
@ -0,0 +1,27 @@
|
||||
"use client"
|
||||
|
||||
import Giscus from "@giscus/react"
|
||||
import { useTheme } from "@repo/ui/Header/SwitchTheme"
|
||||
|
||||
interface BlogPostCommentsProps {}
|
||||
|
||||
export const BlogPostComments: React.FC<BlogPostCommentsProps> = () => {
|
||||
const { theme } = useTheme()
|
||||
|
||||
return (
|
||||
<Giscus
|
||||
id="comments"
|
||||
repo="theoludwig/theoludwig"
|
||||
repoId="MDEwOlJlcG9zaXRvcnkzNTg5NDg1NDQ="
|
||||
category="General"
|
||||
categoryId="DIC_kwDOFWUewM4CQ_WK"
|
||||
mapping="pathname"
|
||||
reactionsEnabled="1"
|
||||
emitMetadata="0"
|
||||
inputPosition="top"
|
||||
theme={theme}
|
||||
lang="en"
|
||||
loading="lazy"
|
||||
/>
|
||||
)
|
||||
}
|
||||
127
packages/blog/src/BlogPostContent.tsx
Normal file
127
packages/blog/src/BlogPostContent.tsx
Normal file
@ -0,0 +1,127 @@
|
||||
import { nodeTypes } from "@mdx-js/mdx"
|
||||
import rehypeShiki from "@shikijs/rehype"
|
||||
import { MDXRemote } from "next-mdx-remote/rsc"
|
||||
import Image from "next/image"
|
||||
import { FaLink } from "react-icons/fa"
|
||||
import rehypeKatex from "rehype-katex"
|
||||
import rehypeRaw from "rehype-raw"
|
||||
import rehypeSlug from "rehype-slug"
|
||||
import remarkGfm from "remark-gfm"
|
||||
import remarkMath from "remark-math"
|
||||
|
||||
import { Link } from "@repo/i18n/navigation"
|
||||
import "katex/dist/katex.min.css"
|
||||
import { BlogPostComments } from "./BlogPostComments"
|
||||
|
||||
const Heading: React.FC<
|
||||
React.DetailedHTMLProps<
|
||||
React.HTMLAttributes<HTMLHeadingElement>,
|
||||
HTMLHeadingElement
|
||||
> & { as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" }
|
||||
> = (props) => {
|
||||
const { children, as, id = "", ...rest } = props
|
||||
|
||||
const ComponentAs = as
|
||||
|
||||
return (
|
||||
<ComponentAs id={id} {...rest}>
|
||||
<Link href={`#${id}`} className="group relative hover:no-underline">
|
||||
<FaLink className="absolute bottom-2 left-[-26px] mr-2 hidden size-4 !text-black group-hover:inline dark:!text-white" />
|
||||
{children}
|
||||
</Link>
|
||||
</ComponentAs>
|
||||
)
|
||||
}
|
||||
|
||||
export interface BlogPostContentProps {
|
||||
content: string
|
||||
}
|
||||
|
||||
export const BlogPostContent: React.FC<BlogPostContentProps> = async (
|
||||
props,
|
||||
) => {
|
||||
const { content } = props
|
||||
|
||||
return (
|
||||
<div className="prose mb-10">
|
||||
<div className="px-4 sm:px-8">
|
||||
<MDXRemote
|
||||
source={content}
|
||||
options={{
|
||||
mdxOptions: {
|
||||
remarkPlugins: [remarkGfm, remarkMath],
|
||||
rehypePlugins: [
|
||||
rehypeSlug,
|
||||
[rehypeRaw, { passThrough: nodeTypes }],
|
||||
rehypeKatex,
|
||||
[
|
||||
rehypeShiki,
|
||||
{
|
||||
themes: {
|
||||
light: "light-plus",
|
||||
dark: "dark-plus",
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
},
|
||||
}}
|
||||
components={{
|
||||
h1: (props) => {
|
||||
return <Heading as="h1" {...props} />
|
||||
},
|
||||
h2: (props) => {
|
||||
return <Heading as="h2" {...props} />
|
||||
},
|
||||
h3: (props) => {
|
||||
return <Heading as="h3" {...props} />
|
||||
},
|
||||
h4: (props) => {
|
||||
return <Heading as="h4" {...props} />
|
||||
},
|
||||
h5: (props) => {
|
||||
return <Heading as="h5" {...props} />
|
||||
},
|
||||
h6: (props) => {
|
||||
return <Heading as="h6" {...props} />
|
||||
},
|
||||
img: (properties) => {
|
||||
const { src = "", alt = "Blog Image" } = properties
|
||||
const source = src.replace("../../../apps/website/public/", "/")
|
||||
return (
|
||||
<span className="flex flex-col items-center justify-center">
|
||||
<Image
|
||||
src={source}
|
||||
alt={alt}
|
||||
width={1000}
|
||||
height={1000}
|
||||
quality={100}
|
||||
className="size-auto"
|
||||
/>
|
||||
</span>
|
||||
)
|
||||
},
|
||||
a: (props) => {
|
||||
const { href = "", ...rest } = props
|
||||
if (href.startsWith("#")) {
|
||||
return <a {...props} />
|
||||
}
|
||||
if (href.startsWith("../posts/")) {
|
||||
return (
|
||||
<Link
|
||||
href={href
|
||||
.replace("../posts/", "/blog/")
|
||||
.replace(".md", "")}
|
||||
{...rest}
|
||||
/>
|
||||
)
|
||||
}
|
||||
return <a target="_blank" {...props} />
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<BlogPostComments />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
29
packages/blog/src/BlogPostUI.tsx
Normal file
29
packages/blog/src/BlogPostUI.tsx
Normal file
@ -0,0 +1,29 @@
|
||||
import { getISODate } from "@repo/utils/dates"
|
||||
import "katex/dist/katex.min.css"
|
||||
|
||||
import { Typography } from "@repo/ui/design/Typography"
|
||||
import { MainLayout } from "@repo/ui/MainLayout"
|
||||
import type { BlogPost } from "./BlogPost"
|
||||
import { BlogPostContent } from "./BlogPostContent"
|
||||
|
||||
export interface BlogPostUIProps {
|
||||
blogPost: BlogPost
|
||||
}
|
||||
|
||||
export const BlogPostUI: React.FC<BlogPostUIProps> = (props) => {
|
||||
const { blogPost } = props
|
||||
|
||||
return (
|
||||
<MainLayout className="break-wrap-words flex flex-1 flex-col flex-wrap items-center justify-center">
|
||||
<div className="my-12 flex flex-col items-center text-center">
|
||||
<Typography variant="h2" as="h1">
|
||||
{blogPost.frontmatter.title}
|
||||
</Typography>
|
||||
<p className="mt-2">
|
||||
{getISODate(new Date(blogPost.frontmatter.publishedOn))}
|
||||
</p>
|
||||
</div>
|
||||
<BlogPostContent content={blogPost.content} />
|
||||
</MainLayout>
|
||||
)
|
||||
}
|
||||
42
packages/blog/src/BlogPosts.tsx
Normal file
42
packages/blog/src/BlogPosts.tsx
Normal file
@ -0,0 +1,42 @@
|
||||
import { Link } from "@repo/i18n/navigation"
|
||||
import { Section, SectionContent } from "@repo/ui/design/Section"
|
||||
import { Typography } from "@repo/ui/design/Typography"
|
||||
import { getISODate } from "@repo/utils/dates"
|
||||
import type { BlogPost } from "./BlogPost"
|
||||
|
||||
export interface BlogPostsProps {
|
||||
posts: BlogPost[]
|
||||
}
|
||||
|
||||
export const BlogPosts: React.FC<BlogPostsProps> = (props) => {
|
||||
const { posts } = props
|
||||
|
||||
return (
|
||||
<ul className="list-none">
|
||||
{posts.map((post) => {
|
||||
const postPublishedOn = getISODate(
|
||||
new Date(post.frontmatter.publishedOn),
|
||||
)
|
||||
|
||||
return (
|
||||
<li key={post.slug}>
|
||||
<Link href={`/blog/${post.slug}`}>
|
||||
<Section verticalSpacing>
|
||||
<SectionContent
|
||||
className="cursor-pointer p-6 transition-all duration-300 ease-in-out hover:scale-[1.02] sm:p-6"
|
||||
shadowContainer
|
||||
>
|
||||
<Typography variant="h4" as="h3">
|
||||
{post.frontmatter.title}
|
||||
</Typography>
|
||||
<p className="mt-2">{postPublishedOn}</p>
|
||||
<p className="mt-3">{post.frontmatter.description}</p>
|
||||
</SectionContent>
|
||||
</Section>
|
||||
</Link>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
59
packages/blog/src/blog.ts
Normal file
59
packages/blog/src/blog.ts
Normal file
@ -0,0 +1,59 @@
|
||||
import fs from "node:fs"
|
||||
import path from "node:path"
|
||||
|
||||
import matter from "gray-matter"
|
||||
import type { BlogPost, FrontMatter } from "./BlogPost"
|
||||
|
||||
export const BLOG_POSTS_PATH = path.join(
|
||||
process.cwd(),
|
||||
"..",
|
||||
"..",
|
||||
"packages",
|
||||
"blog",
|
||||
"posts",
|
||||
)
|
||||
|
||||
export const getBlogPosts = async (): Promise<BlogPost[]> => {
|
||||
const blogPosts = await fs.promises.readdir(BLOG_POSTS_PATH)
|
||||
const blogPostsWithTime = await Promise.all(
|
||||
blogPosts.map(async (blogPostFilename) => {
|
||||
const [slug, extension] = blogPostFilename.split(".")
|
||||
if (slug == null || extension == null) {
|
||||
throw new Error("Invalid blog post filename.")
|
||||
}
|
||||
const blogPostPath = path.join(BLOG_POSTS_PATH, `${slug}.${extension}`)
|
||||
const blogPostContent = await fs.promises.readFile(blogPostPath, {
|
||||
encoding: "utf8",
|
||||
})
|
||||
const { data, content } = matter(blogPostContent) as unknown as {
|
||||
data: FrontMatter
|
||||
content: string
|
||||
}
|
||||
const date = new Date(data.publishedOn)
|
||||
return {
|
||||
slug,
|
||||
content,
|
||||
frontmatter: data,
|
||||
time: date.getTime(),
|
||||
}
|
||||
}),
|
||||
)
|
||||
const blogPostsSortedByPublicationDate = blogPostsWithTime
|
||||
.filter((post) => {
|
||||
return post.frontmatter.isPublished
|
||||
})
|
||||
.sort((a, b) => {
|
||||
return b.time - a.time
|
||||
})
|
||||
return blogPostsSortedByPublicationDate
|
||||
}
|
||||
|
||||
export const getBlogPostBySlug = async (
|
||||
slug: string,
|
||||
): Promise<BlogPost | undefined> => {
|
||||
const blogPosts = await getBlogPosts()
|
||||
const blogPost = blogPosts.find((blogPost) => {
|
||||
return blogPost.slug === slug
|
||||
})
|
||||
return blogPost
|
||||
}
|
||||
19
packages/blog/src/stories/BlogPostUI.stories.tsx
Normal file
19
packages/blog/src/stories/BlogPostUI.stories.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react"
|
||||
|
||||
import { BLOG_POST_MOCK } from "../BlogPost"
|
||||
import { BlogPostUI as BlogPostUIComponent } from "../BlogPostUI"
|
||||
|
||||
const meta = {
|
||||
title: "Feature/Blog/BlogPostUI",
|
||||
component: BlogPostUIComponent,
|
||||
} satisfies Meta<typeof BlogPostUIComponent>
|
||||
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const BlogPostUI: Story = {
|
||||
args: {
|
||||
blogPost: BLOG_POST_MOCK,
|
||||
},
|
||||
}
|
||||
19
packages/blog/src/stories/BlogPosts.stories.tsx
Normal file
19
packages/blog/src/stories/BlogPosts.stories.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react"
|
||||
|
||||
import { BLOG_POST_MOCK } from "../BlogPost"
|
||||
import { BlogPosts as BlogPostsComponent } from "../BlogPosts"
|
||||
|
||||
const meta = {
|
||||
title: "Feature/Blog/BlogPosts",
|
||||
component: BlogPostsComponent,
|
||||
} satisfies Meta<typeof BlogPostsComponent>
|
||||
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const BlogPosts: Story = {
|
||||
args: {
|
||||
posts: [BLOG_POST_MOCK],
|
||||
},
|
||||
}
|
||||
9
packages/blog/tailwind.config.js
Normal file
9
packages/blog/tailwind.config.js
Normal file
@ -0,0 +1,9 @@
|
||||
import sharedConfig from "@repo/config-tailwind"
|
||||
|
||||
/** @type {Pick<import('tailwindcss').Config, "presets" | "content">} */
|
||||
const config = {
|
||||
content: ["./src/**/*.tsx"],
|
||||
presets: [sharedConfig],
|
||||
}
|
||||
|
||||
export default config
|
||||
18
packages/blog/tsconfig.json
Normal file
18
packages/blog/tsconfig.json
Normal file
@ -0,0 +1,18 @@
|
||||
{
|
||||
"extends": "@repo/config-typescript/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"resolveJsonModule": true,
|
||||
"lib": ["DOM", "DOM.Iterable", "ESNext"],
|
||||
"types": [
|
||||
"@total-typescript/ts-reset",
|
||||
"@repo/i18n/messages.d.ts",
|
||||
"@types/node"
|
||||
],
|
||||
"jsx": "preserve",
|
||||
|
||||
"noEmit": true
|
||||
}
|
||||
}
|
||||
3
packages/config-eslint/.eslintrc.json
Normal file
3
packages/config-eslint/.eslintrc.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"extends": ["conventions"]
|
||||
}
|
||||
57
packages/config-eslint/nextjs/.eslintrc.json
Normal file
57
packages/config-eslint/nextjs/.eslintrc.json
Normal file
@ -0,0 +1,57 @@
|
||||
{
|
||||
"extends": [
|
||||
"conventions",
|
||||
"next/core-web-vitals",
|
||||
"plugin:tailwindcss/recommended",
|
||||
"plugin:storybook/recommended"
|
||||
],
|
||||
"ignorePatterns": [
|
||||
"next.config.js",
|
||||
"tailwind.config.js",
|
||||
"postcss.config.js",
|
||||
"vitest.config.ts"
|
||||
],
|
||||
"settings": {
|
||||
"tailwindcss": {
|
||||
"callees": ["classNames", "cva"]
|
||||
},
|
||||
"react": {
|
||||
"version": "detect"
|
||||
}
|
||||
},
|
||||
"rules": {
|
||||
"tailwindcss/classnames-order": "off",
|
||||
"tailwindcss/no-custom-classname": "off",
|
||||
"@next/next/no-html-link-for-pages": "off",
|
||||
"react/self-closing-comp": [
|
||||
"error",
|
||||
{
|
||||
"component": true,
|
||||
"html": true
|
||||
}
|
||||
],
|
||||
"react/void-dom-elements-no-children": "error",
|
||||
"react/jsx-boolean-value": "error",
|
||||
"no-restricted-imports": [
|
||||
"error",
|
||||
{
|
||||
"paths": [
|
||||
{
|
||||
"name": "next/link",
|
||||
"message": "Please import from `@repo/i18n/navigation` instead."
|
||||
},
|
||||
{
|
||||
"name": "next/navigation",
|
||||
"importNames": [
|
||||
"redirect",
|
||||
"permanentRedirect",
|
||||
"useRouter",
|
||||
"usePathname"
|
||||
],
|
||||
"message": "Please import from `@repo/i18n/navigation` instead."
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
22
packages/config-eslint/package.json
Normal file
22
packages/config-eslint/package.json
Normal file
@ -0,0 +1,22 @@
|
||||
{
|
||||
"name": "@repo/eslint-config",
|
||||
"version": "3.3.2",
|
||||
"private": true,
|
||||
"main": ".eslintrc.json",
|
||||
"files": [
|
||||
".eslintrc.json",
|
||||
"nextjs/.eslintrc.json"
|
||||
],
|
||||
"devDependencies": {
|
||||
"@typescript-eslint/eslint-plugin": "catalog:",
|
||||
"@typescript-eslint/parser": "catalog:",
|
||||
"eslint": "catalog:",
|
||||
"eslint-config-conventions": "catalog:",
|
||||
"eslint-plugin-promise": "catalog:",
|
||||
"eslint-plugin-unicorn": "catalog:",
|
||||
"eslint-config-next": "catalog:",
|
||||
"eslint-plugin-storybook": "catalog:",
|
||||
"eslint-plugin-tailwindcss": "catalog:",
|
||||
"typescript": "catalog:"
|
||||
}
|
||||
}
|
||||
14
packages/config-tailwind/.eslintrc.json
Normal file
14
packages/config-tailwind/.eslintrc.json
Normal file
@ -0,0 +1,14 @@
|
||||
{
|
||||
"root": true,
|
||||
"extends": ["@repo/eslint-config"],
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["*.ts", "*.tsx"],
|
||||
"plugins": ["@typescript-eslint"],
|
||||
"parser": "@typescript-eslint/parser",
|
||||
"parserOptions": {
|
||||
"project": true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
6
packages/config-tailwind/classNames.ts
Normal file
6
packages/config-tailwind/classNames.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import { type ClassValue, clsx } from "clsx"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
|
||||
export const classNames = (...inputs: ClassValue[]): string => {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
3
packages/config-tailwind/index.d.ts
vendored
Normal file
3
packages/config-tailwind/index.d.ts
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
import type { Config } from "tailwindcss"
|
||||
|
||||
export default Config
|
||||
31
packages/config-tailwind/package.json
Normal file
31
packages/config-tailwind/package.json
Normal file
@ -0,0 +1,31 @@
|
||||
{
|
||||
"name": "@repo/config-tailwind",
|
||||
"version": "3.3.2",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"main": "./tailwind.config.js",
|
||||
"types": "./index.d.ts",
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./index.d.ts",
|
||||
"import": "./tailwind.config.js",
|
||||
"require": "./tailwind.config.js",
|
||||
"default": "./tailwind.config.js"
|
||||
},
|
||||
"./classNames": "./classNames.ts",
|
||||
"./styles.css": "./styles.css"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fontsource/montserrat": "catalog:",
|
||||
"clsx": "catalog:",
|
||||
"tailwind-merge": "catalog:"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@repo/eslint-config": "workspace:*",
|
||||
"@repo/config-typescript": "workspace:*",
|
||||
"@tailwindcss/typography": "catalog:",
|
||||
"eslint": "catalog:",
|
||||
"postcss": "catalog:",
|
||||
"tailwindcss": "catalog:"
|
||||
}
|
||||
}
|
||||
7
packages/config-tailwind/postcss.config.js
Normal file
7
packages/config-tailwind/postcss.config.js
Normal file
@ -0,0 +1,7 @@
|
||||
const config = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
},
|
||||
}
|
||||
|
||||
export default config
|
||||
162
packages/config-tailwind/styles.css
Normal file
162
packages/config-tailwind/styles.css
Normal file
@ -0,0 +1,162 @@
|
||||
@import "@fontsource/montserrat/400.css";
|
||||
@import "@fontsource/montserrat/500.css";
|
||||
@import "@fontsource/montserrat/600.css";
|
||||
@import "@fontsource/montserrat/700.css";
|
||||
@import "@fontsource/montserrat/800.css";
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
b,
|
||||
strong {
|
||||
@apply font-semibold;
|
||||
}
|
||||
|
||||
i,
|
||||
em {
|
||||
@apply italic;
|
||||
}
|
||||
|
||||
u {
|
||||
@apply underline;
|
||||
}
|
||||
|
||||
s {
|
||||
@apply line-through;
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
@apply underline decoration-dotted underline-offset-2;
|
||||
}
|
||||
|
||||
q,
|
||||
blockquote {
|
||||
@apply italic tracking-wider;
|
||||
}
|
||||
blockquote {
|
||||
@apply border-gray border-l-4 pl-3 italic;
|
||||
}
|
||||
|
||||
kbd {
|
||||
@apply bg-gray rounded-md px-2 dark:text-black;
|
||||
}
|
||||
|
||||
mark {
|
||||
@apply bg-yellow rounded-md px-2;
|
||||
}
|
||||
|
||||
ol {
|
||||
@apply list-inside list-decimal;
|
||||
}
|
||||
|
||||
ul {
|
||||
@apply list-inside list-disc;
|
||||
}
|
||||
|
||||
dfn {
|
||||
@apply font-semibold italic;
|
||||
cursor: help;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background dark:bg-background-dark font-sans text-black dark:text-white;
|
||||
}
|
||||
|
||||
@keyframes ripple {
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale(2);
|
||||
}
|
||||
}
|
||||
|
||||
.break-wrap-words {
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.text-base {
|
||||
@apply leading-8;
|
||||
}
|
||||
|
||||
.prose {
|
||||
@apply dark:text-gray !max-w-5xl scroll-smooth text-black;
|
||||
}
|
||||
|
||||
.prose p {
|
||||
@apply text-justify;
|
||||
}
|
||||
|
||||
.prose ul,
|
||||
.prose ol {
|
||||
@apply list-outside;
|
||||
}
|
||||
|
||||
.prose [id]::before {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 90px;
|
||||
margin-top: -90px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.prose a {
|
||||
@apply text-primary dark:text-primary-dark !font-semibold;
|
||||
}
|
||||
|
||||
.prose strong {
|
||||
@apply dark:text-gray text-black;
|
||||
}
|
||||
|
||||
.prose h2,
|
||||
.prose h3,
|
||||
.prose h4,
|
||||
.prose h5,
|
||||
.prose h6 {
|
||||
@apply mt-1;
|
||||
}
|
||||
|
||||
.prose code {
|
||||
color: #ce9178;
|
||||
}
|
||||
.prose :where(code):not(:where([class~="not-prose"] *))::before,
|
||||
.prose :where(code):not(:where([class~="not-prose"] *))::after {
|
||||
content: "";
|
||||
}
|
||||
.shiki {
|
||||
white-space: pre-wrap !important;
|
||||
}
|
||||
html.dark .shiki,
|
||||
html.dark .shiki span {
|
||||
color: var(--shiki-dark) !important;
|
||||
background-color: var(--shiki-dark-bg) !important;
|
||||
font-style: var(--shiki-dark-font-style) !important;
|
||||
font-weight: var(--shiki-dark-font-weight) !important;
|
||||
text-decoration: var(--shiki-dark-text-decoration) !important;
|
||||
}
|
||||
|
||||
code {
|
||||
counter-reset: step;
|
||||
counter-increment: step 0;
|
||||
}
|
||||
code .line::before {
|
||||
content: counter(step);
|
||||
counter-increment: step;
|
||||
margin-right: 1rem;
|
||||
text-align: right;
|
||||
color: rgba(133, 133, 133, 0.8);
|
||||
word-wrap: normal;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
code .line:last-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.katex .base {
|
||||
display: inline !important;
|
||||
white-space: normal !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
57
packages/config-tailwind/tailwind.config.js
Normal file
57
packages/config-tailwind/tailwind.config.js
Normal file
@ -0,0 +1,57 @@
|
||||
import typographyPlugin from "@tailwindcss/typography"
|
||||
import { fontFamily } from "tailwindcss/defaultTheme"
|
||||
|
||||
/** @type {Omit<import('tailwindcss').Config, "content">} */
|
||||
const config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
colors: {
|
||||
primary: {
|
||||
DEFAULT: "#0056b3",
|
||||
dark: "#00aeff",
|
||||
},
|
||||
background: {
|
||||
DEFAULT: "#fff",
|
||||
dark: "#181818",
|
||||
},
|
||||
white: "#fff",
|
||||
black: "#000",
|
||||
gray: "#d1d5db",
|
||||
"gray-darker": {
|
||||
DEFAULT: "#4b5563",
|
||||
dark: "#9ca3af",
|
||||
},
|
||||
yellow: "#fef08a",
|
||||
transparent: "transparent",
|
||||
inherit: "inherit",
|
||||
current: "currentColor",
|
||||
},
|
||||
boxShadow: {
|
||||
dark: "0px 0px 2px 2px rgba(0, 0, 0, 0.25)",
|
||||
light: "0px 0px 2px 2px rgba(0, 0, 0, 0.10)",
|
||||
darkFlag: "0px 1px 10px hsla(0, 0%, 100%, 0.2)",
|
||||
lightFlag: "0px 1px 10px rgba(0, 0, 0, 0.25)",
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ["'Montserrat'", ...fontFamily.sans],
|
||||
},
|
||||
extend: {
|
||||
typography: {
|
||||
DEFAULT: {
|
||||
css: {
|
||||
a: {
|
||||
textDecoration: "none",
|
||||
"&:hover": {
|
||||
textDecoration: "underline",
|
||||
fontWeight: 400,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [typographyPlugin],
|
||||
}
|
||||
|
||||
export default config
|
||||
10
packages/config-tailwind/tsconfig.json
Normal file
10
packages/config-tailwind/tsconfig.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"extends": "@repo/config-typescript/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
|
||||
"noEmit": true
|
||||
}
|
||||
}
|
||||
8
packages/config-typescript/package.json
Normal file
8
packages/config-typescript/package.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"name": "@repo/config-typescript",
|
||||
"version": "3.3.2",
|
||||
"private": true,
|
||||
"files": [
|
||||
"tsconfig.json"
|
||||
]
|
||||
}
|
||||
20
packages/config-typescript/tsconfig.json
Normal file
20
packages/config-typescript/tsconfig.json
Normal file
@ -0,0 +1,20 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"strict": true,
|
||||
"allowUnusedLabels": false,
|
||||
"allowUnreachableCode": false,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noImplicitOverride": true,
|
||||
"noImplicitReturns": true,
|
||||
"noPropertyAccessFromIndexSignature": true,
|
||||
"noUncheckedIndexedAccess": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
|
||||
"isolatedModules": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true
|
||||
}
|
||||
}
|
||||
14
packages/i18n/.eslintrc.json
Normal file
14
packages/i18n/.eslintrc.json
Normal file
@ -0,0 +1,14 @@
|
||||
{
|
||||
"root": true,
|
||||
"extends": ["@repo/eslint-config"],
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["*.ts", "*.tsx"],
|
||||
"plugins": ["@typescript-eslint"],
|
||||
"parser": "@typescript-eslint/parser",
|
||||
"parserOptions": {
|
||||
"project": true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
33
packages/i18n/package.json
Normal file
33
packages/i18n/package.json
Normal file
@ -0,0 +1,33 @@
|
||||
{
|
||||
"name": "@repo/i18n",
|
||||
"version": "3.3.2",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"exports": {
|
||||
"./translations/*.json": "./src/translations/*.json",
|
||||
"./config": "./src/config.tsx",
|
||||
"./i18n": "./src/i18n.ts",
|
||||
"./messages.d.ts": "./src/messages.d.ts",
|
||||
"./navigation": "./src/navigation.ts"
|
||||
},
|
||||
"scripts": {
|
||||
"lint:eslint": "eslint src --max-warnings 0 --report-unused-disable-directives",
|
||||
"lint:typescript": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"deepmerge": "catalog:",
|
||||
"next": "catalog:",
|
||||
"next-intl": "catalog:",
|
||||
"react": "catalog:",
|
||||
"react-dom": "catalog:"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@repo/eslint-config": "workspace:*",
|
||||
"@repo/config-typescript": "workspace:*",
|
||||
"@types/react": "catalog:",
|
||||
"@types/react-dom": "catalog:",
|
||||
"@total-typescript/ts-reset": "catalog:",
|
||||
"eslint": "catalog:",
|
||||
"typescript": "catalog:"
|
||||
}
|
||||
}
|
||||
30
packages/i18n/src/config.tsx
Normal file
30
packages/i18n/src/config.tsx
Normal file
@ -0,0 +1,30 @@
|
||||
import type { RichTranslationValues } from "next-intl"
|
||||
|
||||
export const LOCALES = ["en-US", "fr-FR"] as const
|
||||
export type Locale = (typeof LOCALES)[number]
|
||||
export const LOCALE_DEFAULT = "en-US" satisfies Locale
|
||||
export const LOCALE_PREFIX = "never"
|
||||
|
||||
export interface LocaleProps {
|
||||
params: {
|
||||
locale: Locale
|
||||
}
|
||||
}
|
||||
|
||||
export const defaultTranslationValues: RichTranslationValues = {
|
||||
br: () => {
|
||||
return <br />
|
||||
},
|
||||
strong: (children) => {
|
||||
return <strong>{children}</strong>
|
||||
},
|
||||
em: (children) => {
|
||||
return <em>{children}</em>
|
||||
},
|
||||
s: (children) => {
|
||||
return <s>{children}</s>
|
||||
},
|
||||
u: (children) => {
|
||||
return <u>{children}</u>
|
||||
},
|
||||
}
|
||||
27
packages/i18n/src/i18n.ts
Normal file
27
packages/i18n/src/i18n.ts
Normal file
@ -0,0 +1,27 @@
|
||||
import deepmerge from "deepmerge"
|
||||
import type { AbstractIntlMessages } from "next-intl"
|
||||
import { getRequestConfig } from "next-intl/server"
|
||||
import { notFound } from "next/navigation"
|
||||
|
||||
import type { Locale } from "./config"
|
||||
import { defaultTranslationValues, LOCALE_DEFAULT, LOCALES } from "./config"
|
||||
|
||||
export default getRequestConfig(async ({ locale }) => {
|
||||
if (!LOCALES.includes(locale as Locale)) {
|
||||
return notFound()
|
||||
}
|
||||
|
||||
const userMessages = (await import(`./translations/${locale}.json`)).default
|
||||
const defaultMessages = (
|
||||
await import(`./translations/${LOCALE_DEFAULT}.json`)
|
||||
).default
|
||||
const messages = deepmerge<AbstractIntlMessages>(
|
||||
defaultMessages,
|
||||
userMessages,
|
||||
)
|
||||
|
||||
return {
|
||||
messages,
|
||||
defaultTranslationValues,
|
||||
}
|
||||
})
|
||||
10
packages/i18n/src/messages.d.ts
vendored
Normal file
10
packages/i18n/src/messages.d.ts
vendored
Normal file
@ -0,0 +1,10 @@
|
||||
import type en from "./translations/en-US.json"
|
||||
|
||||
type Messages = typeof en
|
||||
|
||||
declare global {
|
||||
/**
|
||||
* Use type safe message keys with `next-intl`.
|
||||
*/
|
||||
interface IntlMessages extends Messages {}
|
||||
}
|
||||
9
packages/i18n/src/navigation.ts
Normal file
9
packages/i18n/src/navigation.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import { createSharedPathnamesNavigation } from "next-intl/navigation"
|
||||
|
||||
import { LOCALES, LOCALE_PREFIX } from "./config"
|
||||
|
||||
export const { Link, redirect, usePathname, useRouter, permanentRedirect } =
|
||||
createSharedPathnamesNavigation({
|
||||
locales: LOCALES,
|
||||
localePrefix: LOCALE_PREFIX,
|
||||
})
|
||||
75
packages/i18n/src/translations/en-US.json
Normal file
75
packages/i18n/src/translations/en-US.json
Normal file
@ -0,0 +1,75 @@
|
||||
{
|
||||
"meta": {
|
||||
"title": "Théo LUDWIG",
|
||||
"description": "Developer Full Stack • Open-Source Enthusiast"
|
||||
},
|
||||
"locales": {
|
||||
"en-US": "English",
|
||||
"fr-FR": "French"
|
||||
},
|
||||
"footer": {
|
||||
"all-rights-reserved": "All rights reserved"
|
||||
},
|
||||
"errors": {
|
||||
"error": "Error",
|
||||
"page-doesnt-exist": "This page doesn't exist!",
|
||||
"not-found": "Not Found",
|
||||
"server-error": "Internal Server Error!",
|
||||
"return-to-home-page": "Return to the home page?",
|
||||
"try-again": "Try again?"
|
||||
},
|
||||
"home": {
|
||||
"about": {
|
||||
"pronouns": {
|
||||
"label": "Pronouns",
|
||||
"value": "He/Him"
|
||||
},
|
||||
"birth-date": {
|
||||
"label": "Birth date",
|
||||
"value": "{birthDate} ({age} years old)"
|
||||
},
|
||||
"nationality": {
|
||||
"label": "Nationality",
|
||||
"value": "Alsace, France"
|
||||
},
|
||||
"email": {
|
||||
"label": "Email",
|
||||
"value": "{email}"
|
||||
},
|
||||
"description": "I constantly wonder how to <strong>improve our present, to make our future better</strong>, particularly thanks to the advancements in <strong>computer science</strong>."
|
||||
},
|
||||
"interests": {
|
||||
"title": "Interests",
|
||||
"code": {
|
||||
"title": "Developer Full Stack",
|
||||
"description": "My priority is to craft <strong>intuitive user experiences (<abbr-ux>UX</abbr-ux>)</strong>, that meet the needs of the users <strong>in the most efficient way possible</strong>. <br></br> Mainly focused on the development of <strong>Web solutions</strong>. <br></br> I am also interested in mobile and desktop application development, among other areas within the field of computer science."
|
||||
},
|
||||
"open-source": {
|
||||
"title": "Open-Source Enthusiast",
|
||||
"description": "I value the <strong>sharing of knowledge and collaboration</strong> to collectively resolve problems. <br></br> The source code of the website is available on <github-link>GitHub</github-link>."
|
||||
}
|
||||
},
|
||||
"skills": {
|
||||
"title": "Skills",
|
||||
"programming-languages": "Programming languages",
|
||||
"frontend": "Frontend",
|
||||
"backend": "Backend",
|
||||
"software-tools": "Software and tools"
|
||||
},
|
||||
"portfolio": {
|
||||
"title": "Portfolio",
|
||||
"carolo": {
|
||||
"title": "Carolo",
|
||||
"description": "Strategy board game similar to chess which allows grandiose moves (only available in French)."
|
||||
},
|
||||
"leon": {
|
||||
"title": "Leon",
|
||||
"description": "Leon is your open-source personal assistant."
|
||||
}
|
||||
},
|
||||
"open-source": {
|
||||
"title": "Open-Source",
|
||||
"description": "Most famous open source projects I contributed to."
|
||||
}
|
||||
}
|
||||
}
|
||||
75
packages/i18n/src/translations/fr-FR.json
Normal file
75
packages/i18n/src/translations/fr-FR.json
Normal file
@ -0,0 +1,75 @@
|
||||
{
|
||||
"meta": {
|
||||
"title": "Théo LUDWIG",
|
||||
"description": "Développeur Full Stack • Enthousiaste de l'Open-Source"
|
||||
},
|
||||
"locales": {
|
||||
"en-US": "Anglais",
|
||||
"fr-FR": "Français"
|
||||
},
|
||||
"footer": {
|
||||
"all-rights-reserved": "Tous droits réservés"
|
||||
},
|
||||
"errors": {
|
||||
"error": "Erreur",
|
||||
"page-doesnt-exist": "Cette page n'existe pas !",
|
||||
"not-found": "Introuvable",
|
||||
"server-error": "Erreur interne du serveur !",
|
||||
"return-to-home-page": "Retour à la page d'accueil ?",
|
||||
"try-again": "Réessayer ?"
|
||||
},
|
||||
"home": {
|
||||
"about": {
|
||||
"pronouns": {
|
||||
"label": "Pronoms",
|
||||
"value": "Il/Lui"
|
||||
},
|
||||
"birth-date": {
|
||||
"label": "Date de naissance",
|
||||
"value": "{birthDate} ({age} ans)"
|
||||
},
|
||||
"nationality": {
|
||||
"label": "Nationalité",
|
||||
"value": "Alsace, France"
|
||||
},
|
||||
"email": {
|
||||
"label": "Email",
|
||||
"value": "{email}"
|
||||
},
|
||||
"description": "Je me demande constamment comment <strong>améliorer notre présent, afin de rendre notre futur meilleur</strong>, particulièrement grâce aux progrès de <strong>l'informatique</strong>."
|
||||
},
|
||||
"interests": {
|
||||
"title": "Intérêts",
|
||||
"code": {
|
||||
"title": "Développeur Full Stack",
|
||||
"description": "Ma priorité réside dans la création <strong>d'expériences utilisateurs (<abbr-ux>UX</abbr-ux>) intuitives</strong>, répondant aux besoins des utilisateurs de la <strong>manière la plus efficace que possible</strong>. <br></br> Principalement axé sur l'élaboration de <strong>solutions en Développement Web</strong>. <br></br> Je suis également intéressé par le développement d'applications mobiles parmis d'autres domaines de l'informatique."
|
||||
},
|
||||
"open-source": {
|
||||
"title": "Enthousiaste de l'Open-Source",
|
||||
"description": "J'apprécie le <strong>partage des connaissances et la collaboration</strong> pour résoudre des défis collectivement. <br></br> Le code source du site est accessible sur <github-link>GitHub</github-link>."
|
||||
}
|
||||
},
|
||||
"skills": {
|
||||
"title": "Compétences",
|
||||
"programming-languages": "Langages de programmation",
|
||||
"frontend": "Frontend",
|
||||
"backend": "Backend",
|
||||
"software-tools": "Logiciels et outils"
|
||||
},
|
||||
"portfolio": {
|
||||
"title": "Portfolio",
|
||||
"carolo": {
|
||||
"title": "Carolo",
|
||||
"description": "Jeu de plateau stratégique similaire aux échecs qui permet des coups grandioses, reposant sur des enchaînements remarquables."
|
||||
},
|
||||
"leon": {
|
||||
"title": "Leon",
|
||||
"description": "Leon est votre assistant personnel open source."
|
||||
}
|
||||
},
|
||||
"open-source": {
|
||||
"title": "Open-Source",
|
||||
"description": "Projets open source les plus célèbres auxquels j'ai contribué."
|
||||
}
|
||||
}
|
||||
}
|
||||
14
packages/i18n/tsconfig.json
Normal file
14
packages/i18n/tsconfig.json
Normal file
@ -0,0 +1,14 @@
|
||||
{
|
||||
"extends": "@repo/config-typescript/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"resolveJsonModule": true,
|
||||
"lib": ["DOM", "DOM.Iterable", "ESNext"],
|
||||
"types": ["@total-typescript/ts-reset"],
|
||||
"jsx": "preserve",
|
||||
|
||||
"noEmit": true
|
||||
}
|
||||
}
|
||||
14
packages/react-hooks/.eslintrc.json
Normal file
14
packages/react-hooks/.eslintrc.json
Normal file
@ -0,0 +1,14 @@
|
||||
{
|
||||
"root": true,
|
||||
"extends": ["@repo/eslint-config/nextjs/.eslintrc.json"],
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["*.ts", "*.tsx"],
|
||||
"plugins": ["@typescript-eslint"],
|
||||
"parser": "@typescript-eslint/parser",
|
||||
"parserOptions": {
|
||||
"project": true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
35
packages/react-hooks/package.json
Normal file
35
packages/react-hooks/package.json
Normal file
@ -0,0 +1,35 @@
|
||||
{
|
||||
"name": "@repo/react-hooks",
|
||||
"version": "3.3.2",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"exports": {
|
||||
"./useBoolean": "./src/useBoolean.ts",
|
||||
"./useIsMounted": "./src/useIsMounted.ts"
|
||||
},
|
||||
"scripts": {
|
||||
"lint:eslint": "eslint src --max-warnings 0 --report-unused-disable-directives",
|
||||
"lint:typescript": "tsc --noEmit",
|
||||
"test": "vitest run --browser.headless",
|
||||
"test:ui": "vitest --ui --no-open"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "catalog:",
|
||||
"react-dom": "catalog:"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@repo/eslint-config": "workspace:*",
|
||||
"@repo/config-typescript": "workspace:*",
|
||||
"@testing-library/react": "catalog:",
|
||||
"@types/react": "catalog:",
|
||||
"@types/react-dom": "catalog:",
|
||||
"@total-typescript/ts-reset": "catalog:",
|
||||
"@vitest/browser": "catalog:",
|
||||
"@vitest/coverage-istanbul": "catalog:",
|
||||
"@vitest/ui": "catalog:",
|
||||
"eslint": "catalog:",
|
||||
"playwright": "catalog:",
|
||||
"typescript": "catalog:",
|
||||
"vitest": "catalog:"
|
||||
}
|
||||
}
|
||||
83
packages/react-hooks/src/tests/useBoolean.test.ts
Normal file
83
packages/react-hooks/src/tests/useBoolean.test.ts
Normal file
@ -0,0 +1,83 @@
|
||||
import { act, renderHook } from "@testing-library/react"
|
||||
|
||||
import { describe, expect, it } from "vitest"
|
||||
import { useBoolean } from "../useBoolean"
|
||||
|
||||
describe("useBoolean", () => {
|
||||
const initialValues = [true, false]
|
||||
|
||||
for (const initialValue of initialValues) {
|
||||
it(`should set the initial value to ${initialValue}`, () => {
|
||||
// Arrange - Given
|
||||
const { result } = renderHook(() => {
|
||||
return useBoolean({ initialValue })
|
||||
})
|
||||
|
||||
// Assert - Then
|
||||
expect(result.current.value).toBe(initialValue)
|
||||
})
|
||||
}
|
||||
|
||||
it("should by default set the initial value to false", () => {
|
||||
// Arrange - Given
|
||||
const { result } = renderHook(() => {
|
||||
return useBoolean()
|
||||
})
|
||||
|
||||
// Assert - Then
|
||||
expect(result.current.value).toBe(false)
|
||||
})
|
||||
|
||||
it("should toggle the value", () => {
|
||||
// Arrange - Given
|
||||
const { result } = renderHook(() => {
|
||||
return useBoolean({ initialValue: false })
|
||||
})
|
||||
|
||||
// Act - When
|
||||
act(() => {
|
||||
return result.current.toggle()
|
||||
})
|
||||
|
||||
// Assert - Then
|
||||
expect(result.current.value).toBe(true)
|
||||
|
||||
// Act - When
|
||||
act(() => {
|
||||
return result.current.toggle()
|
||||
})
|
||||
|
||||
// Assert - Then
|
||||
expect(result.current.value).toBe(false)
|
||||
})
|
||||
|
||||
it("should set the value to true", () => {
|
||||
// Arrange - Given
|
||||
const { result } = renderHook(() => {
|
||||
return useBoolean({ initialValue: false })
|
||||
})
|
||||
|
||||
// Act - When
|
||||
act(() => {
|
||||
return result.current.setTrue()
|
||||
})
|
||||
|
||||
// Assert - Then
|
||||
expect(result.current.value).toBe(true)
|
||||
})
|
||||
|
||||
it("should set the value to false", () => {
|
||||
// Arrange - Given
|
||||
const { result } = renderHook(() => {
|
||||
return useBoolean({ initialValue: true })
|
||||
})
|
||||
|
||||
// Act - When
|
||||
act(() => {
|
||||
return result.current.setFalse()
|
||||
})
|
||||
|
||||
// Assert - Then
|
||||
expect(result.current.value).toBe(false)
|
||||
})
|
||||
})
|
||||
16
packages/react-hooks/src/tests/useIsMounted.test.ts
Normal file
16
packages/react-hooks/src/tests/useIsMounted.test.ts
Normal file
@ -0,0 +1,16 @@
|
||||
import { renderHook } from "@testing-library/react"
|
||||
|
||||
import { describe, expect, it } from "vitest"
|
||||
import { useIsMounted } from "../useIsMounted"
|
||||
|
||||
describe("useIsMounted", () => {
|
||||
it("should return true", () => {
|
||||
// Arrange - Given
|
||||
const { result } = renderHook(() => {
|
||||
return useIsMounted()
|
||||
})
|
||||
|
||||
// Assert - Then
|
||||
expect(result.current.isMounted).toBe(true)
|
||||
})
|
||||
})
|
||||
50
packages/react-hooks/src/useBoolean.ts
Normal file
50
packages/react-hooks/src/useBoolean.ts
Normal file
@ -0,0 +1,50 @@
|
||||
import { useState } from "react"
|
||||
|
||||
export interface UseBooleanOutput {
|
||||
value: boolean
|
||||
setValue: React.Dispatch<React.SetStateAction<boolean>>
|
||||
setTrue: () => void
|
||||
setFalse: () => void
|
||||
toggle: () => void
|
||||
}
|
||||
|
||||
export interface UseBooleanInput {
|
||||
/**
|
||||
* The initial value of the boolean.
|
||||
* @default false
|
||||
*/
|
||||
initialValue?: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* Hook to manage a boolean state.
|
||||
* @param options
|
||||
* @returns
|
||||
*/
|
||||
export const useBoolean = (options: UseBooleanInput = {}): UseBooleanOutput => {
|
||||
const { initialValue = false } = options
|
||||
|
||||
const [value, setValue] = useState(initialValue)
|
||||
|
||||
const toggle = (): void => {
|
||||
setValue((old) => {
|
||||
return !old
|
||||
})
|
||||
}
|
||||
|
||||
const setTrue = (): void => {
|
||||
setValue(true)
|
||||
}
|
||||
|
||||
const setFalse = (): void => {
|
||||
setValue(false)
|
||||
}
|
||||
|
||||
return {
|
||||
value,
|
||||
setValue,
|
||||
toggle,
|
||||
setTrue,
|
||||
setFalse,
|
||||
}
|
||||
}
|
||||
15
packages/react-hooks/src/useIsMounted.ts
Normal file
15
packages/react-hooks/src/useIsMounted.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import { useEffect, useState } from "react"
|
||||
|
||||
export interface UseIsMountedOutput {
|
||||
isMounted: boolean
|
||||
}
|
||||
|
||||
export const useIsMounted = (): UseIsMountedOutput => {
|
||||
const [isMounted, setIsMounted] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
setIsMounted(true)
|
||||
}, [])
|
||||
|
||||
return { isMounted }
|
||||
}
|
||||
17
packages/react-hooks/tsconfig.json
Normal file
17
packages/react-hooks/tsconfig.json
Normal file
@ -0,0 +1,17 @@
|
||||
{
|
||||
"extends": "@repo/config-typescript/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"resolveJsonModule": true,
|
||||
"lib": ["DOM", "DOM.Iterable", "ESNext"],
|
||||
"types": [
|
||||
"@total-typescript/ts-reset",
|
||||
"@vitest/browser/providers/playwright"
|
||||
],
|
||||
"jsx": "preserve",
|
||||
|
||||
"noEmit": true
|
||||
}
|
||||
}
|
||||
15
packages/react-hooks/vitest.config.ts
Normal file
15
packages/react-hooks/vitest.config.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import { defineConfig } from "vitest/config"
|
||||
|
||||
export default defineConfig({
|
||||
test: {
|
||||
browser: {
|
||||
provider: "playwright",
|
||||
enabled: true,
|
||||
name: "chromium",
|
||||
},
|
||||
coverage: {
|
||||
enabled: true,
|
||||
provider: "istanbul",
|
||||
},
|
||||
},
|
||||
})
|
||||
14
packages/ui/.eslintrc.json
Normal file
14
packages/ui/.eslintrc.json
Normal file
@ -0,0 +1,14 @@
|
||||
{
|
||||
"root": true,
|
||||
"extends": ["@repo/eslint-config/nextjs/.eslintrc.json"],
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["*.ts", "*.tsx"],
|
||||
"plugins": ["@typescript-eslint"],
|
||||
"parser": "@typescript-eslint/parser",
|
||||
"parserOptions": {
|
||||
"project": true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
55
packages/ui/package.json
Normal file
55
packages/ui/package.json
Normal file
@ -0,0 +1,55 @@
|
||||
{
|
||||
"name": "@repo/ui",
|
||||
"version": "3.3.2",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"exports": {
|
||||
"./About": "./src/About/About.tsx",
|
||||
"./design/Button": "./src/design/Button/Button.tsx",
|
||||
"./design/Link": "./src/design/Link/Link.tsx",
|
||||
"./design/Section": "./src/design/Section/Section.tsx",
|
||||
"./design/Spinner": "./src/design/Spinner/Spinner.tsx",
|
||||
"./design/Typography": "./src/design/Typography/Typography.tsx",
|
||||
"./Errors/ErrorNotFound": "./src/Errors/ErrorNotFound/ErrorNotFound.tsx",
|
||||
"./Errors/ErrorServer": "./src/Errors/ErrorServer/ErrorServer.tsx",
|
||||
"./Footer": "./src/Footer/Footer.tsx",
|
||||
"./Header": "./src/Header/Header.tsx",
|
||||
"./Interests": "./src/Interests/Interests.tsx",
|
||||
"./Header/SwitchTheme": "./src/Header/SwitchTheme.tsx",
|
||||
"./MainLayout": "./src/MainLayout/MainLayout.tsx",
|
||||
"./OpenSource": "./src/OpenSource/OpenSource.tsx",
|
||||
"./Portfolio": "./src/Portfolio/Portfolio.tsx",
|
||||
"./Skills": "./src/Skills/Skills.tsx"
|
||||
},
|
||||
"scripts": {
|
||||
"lint:eslint": "eslint src --max-warnings 0 --report-unused-disable-directives",
|
||||
"lint:typescript": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@repo/config-tailwind": "workspace:*",
|
||||
"@repo/utils": "workspace:*",
|
||||
"@repo/i18n": "workspace:*",
|
||||
"@repo/react-hooks": "workspace:*",
|
||||
"cva": "catalog:",
|
||||
"next": "catalog:",
|
||||
"next-intl": "catalog:",
|
||||
"next-themes": "catalog:",
|
||||
"react": "catalog:",
|
||||
"react-dom": "catalog:",
|
||||
"react-icons": "catalog:"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@repo/eslint-config": "workspace:*",
|
||||
"@repo/config-typescript": "workspace:*",
|
||||
"@types/react": "catalog:",
|
||||
"@types/react-dom": "catalog:",
|
||||
"@total-typescript/ts-reset": "catalog:",
|
||||
"@storybook/blocks": "catalog:",
|
||||
"@storybook/react": "catalog:",
|
||||
"@storybook/test": "catalog:",
|
||||
"eslint": "catalog:",
|
||||
"postcss": "catalog:",
|
||||
"tailwindcss": "catalog:",
|
||||
"typescript": "catalog:"
|
||||
}
|
||||
}
|
||||
7
packages/ui/postcss.config.js
Normal file
7
packages/ui/postcss.config.js
Normal file
@ -0,0 +1,7 @@
|
||||
const config = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
},
|
||||
}
|
||||
|
||||
export default config
|
||||
16
packages/ui/src/About/About.stories.tsx
Normal file
16
packages/ui/src/About/About.stories.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react"
|
||||
|
||||
import { About as AboutComponent } from "./About"
|
||||
|
||||
const meta = {
|
||||
title: "Feature/About",
|
||||
component: AboutComponent,
|
||||
} satisfies Meta<typeof AboutComponent>
|
||||
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const About: Story = {
|
||||
args: {},
|
||||
}
|
||||
27
packages/ui/src/About/About.tsx
Normal file
27
packages/ui/src/About/About.tsx
Normal file
@ -0,0 +1,27 @@
|
||||
import { Section, SectionContent } from "../design/Section/Section"
|
||||
import { AboutDescription } from "./AboutDescription"
|
||||
import { AboutIntroduction } from "./AboutIntroduction"
|
||||
import { AboutList } from "./AboutList/AboutList"
|
||||
import { AboutLogo } from "./AboutLogo"
|
||||
import { SocialMediaList } from "./SocialMediaList/SocialMediaList"
|
||||
|
||||
export interface AboutProps {}
|
||||
|
||||
export const About: React.FC<AboutProps> = () => {
|
||||
return (
|
||||
<Section verticalSpacing horizontalSpacing id="about">
|
||||
<SectionContent shadowContainer>
|
||||
<div className="flex flex-col items-center justify-center md:flex-row md:pt-10">
|
||||
<AboutLogo />
|
||||
<div>
|
||||
<AboutIntroduction />
|
||||
<AboutList />
|
||||
<AboutDescription />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SocialMediaList />
|
||||
</SectionContent>
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
21
packages/ui/src/About/AboutDescription.tsx
Normal file
21
packages/ui/src/About/AboutDescription.tsx
Normal file
@ -0,0 +1,21 @@
|
||||
import { useTranslations } from "next-intl"
|
||||
import { Button } from "../design/Button/Button"
|
||||
import { Typography } from "../design/Typography/Typography"
|
||||
|
||||
export interface AboutDescriptionProps {}
|
||||
|
||||
export const AboutDescription: React.FC<AboutDescriptionProps> = () => {
|
||||
const t = useTranslations()
|
||||
|
||||
return (
|
||||
<div className="dark:text-gray my-6 max-w-md text-center text-black">
|
||||
<Typography as="p" variant="text1" className="my-6">
|
||||
{t.rich("home.about.description")}
|
||||
</Typography>
|
||||
|
||||
<Button href="/curriculum-vitae/index.html" variant="outline">
|
||||
Curriculum vitæ ({t("locales.fr-FR")})
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
20
packages/ui/src/About/AboutIntroduction.tsx
Normal file
20
packages/ui/src/About/AboutIntroduction.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
import { useTranslations } from "next-intl"
|
||||
import { Typography } from "../design/Typography/Typography"
|
||||
|
||||
export interface AboutIntroductionProps {}
|
||||
|
||||
export const AboutIntroduction: React.FC<AboutIntroductionProps> = () => {
|
||||
const t = useTranslations()
|
||||
|
||||
return (
|
||||
<div className="border-b border-black dark:border-white">
|
||||
<Typography as="h1" variant="h1">
|
||||
{t("meta.title")}
|
||||
</Typography>
|
||||
|
||||
<Typography as="h2" variant="text1" className="my-3">
|
||||
{t("meta.description")}
|
||||
</Typography>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
26
packages/ui/src/About/AboutList/AboutItem.tsx
Normal file
26
packages/ui/src/About/AboutList/AboutItem.tsx
Normal file
@ -0,0 +1,26 @@
|
||||
export interface AboutItemProps {
|
||||
label: string
|
||||
value: string
|
||||
link?: string
|
||||
}
|
||||
|
||||
export const AboutItem: React.FC<AboutItemProps> = (props) => {
|
||||
const { label, value, link } = props
|
||||
|
||||
return (
|
||||
<li className="flex items-center justify-between sm:justify-start">
|
||||
<strong className="w-24 text-sm text-black lg:w-32 dark:text-white">
|
||||
{label}
|
||||
</strong>
|
||||
<span className="dark:text-gray block text-sm font-normal text-black">
|
||||
{link != null ? (
|
||||
<a className="hover:underline" href={link}>
|
||||
{value}
|
||||
</a>
|
||||
) : (
|
||||
value
|
||||
)}
|
||||
</span>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
27
packages/ui/src/About/AboutList/AboutItemBirthDate.tsx
Normal file
27
packages/ui/src/About/AboutList/AboutItemBirthDate.tsx
Normal file
@ -0,0 +1,27 @@
|
||||
"use client"
|
||||
|
||||
import { BIRTH_DATE } from "@repo/utils/constants"
|
||||
import { getAge, getISODate } from "@repo/utils/dates"
|
||||
import { useTranslations } from "next-intl"
|
||||
import { useMemo } from "react"
|
||||
import { AboutItem } from "./AboutItem"
|
||||
|
||||
export interface AboutItemBirthDateProps {}
|
||||
|
||||
export const AboutItemBirthDate: React.FC<AboutItemBirthDateProps> = () => {
|
||||
const t = useTranslations()
|
||||
|
||||
const age = useMemo(() => {
|
||||
return getAge(BIRTH_DATE)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<AboutItem
|
||||
label={t("home.about.birth-date.label")}
|
||||
value={t("home.about.birth-date.value", {
|
||||
age,
|
||||
birthDate: getISODate(BIRTH_DATE),
|
||||
})}
|
||||
/>
|
||||
)
|
||||
}
|
||||
30
packages/ui/src/About/AboutList/AboutList.tsx
Normal file
30
packages/ui/src/About/AboutList/AboutList.tsx
Normal file
@ -0,0 +1,30 @@
|
||||
import { useTranslations } from "next-intl"
|
||||
import { AboutItem } from "./AboutItem"
|
||||
import { AboutItemBirthDate } from "./AboutItemBirthDate"
|
||||
|
||||
export interface AboutListProps {}
|
||||
|
||||
export const AboutList: React.FC<AboutListProps> = () => {
|
||||
const t = useTranslations()
|
||||
|
||||
return (
|
||||
<ul className="my-6 list-none space-y-3">
|
||||
<AboutItem
|
||||
label={t("home.about.pronouns.label")}
|
||||
value={t("home.about.pronouns.value")}
|
||||
/>
|
||||
<AboutItemBirthDate />
|
||||
<AboutItem
|
||||
label={t("home.about.nationality.label")}
|
||||
value={t("home.about.nationality.value")}
|
||||
/>
|
||||
<AboutItem
|
||||
label={t("home.about.email.label")}
|
||||
value={t("home.about.email.value", {
|
||||
email: "contact@theoludwig.fr",
|
||||
})}
|
||||
link="mailto:contact@theoludwig.fr"
|
||||
/>
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
21
packages/ui/src/About/AboutLogo.tsx
Normal file
21
packages/ui/src/About/AboutLogo.tsx
Normal file
@ -0,0 +1,21 @@
|
||||
import { useTranslations } from "next-intl"
|
||||
import Image from "next/image"
|
||||
|
||||
export interface AboutLogoProps {}
|
||||
|
||||
export const AboutLogo: React.FC<AboutLogoProps> = () => {
|
||||
const t = useTranslations()
|
||||
|
||||
return (
|
||||
<div className="max-h-[370px] max-w-[370px] px-2 py-6">
|
||||
<Image
|
||||
quality={100}
|
||||
src="/images/logo.webp"
|
||||
alt={t("meta.title")}
|
||||
width={800}
|
||||
height={800}
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
import { Icon } from "./Icon"
|
||||
|
||||
export const EmailIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
|
||||
return (
|
||||
<Icon {...props}>
|
||||
<title>Email</title>
|
||||
<path d="M15.61 12c0 1.99-1.62 3.61-3.61 3.61-1.99 0-3.61-1.62-3.61-3.61 0-1.99 1.62-3.61 3.61-3.61 1.99 0 3.61 1.62 3.61 3.61M12 0C5.383 0 0 5.383 0 12s5.383 12 12 12c2.424 0 4.761-.722 6.76-2.087l.034-.024-1.617-1.879-.027.017A9.494 9.494 0 0112 21.54c-5.26 0-9.54-4.28-9.54-9.54 0-5.26 4.28-9.54 9.54-9.54 5.26 0 9.54 4.28 9.54 9.54a9.63 9.63 0 01-.225 2.05c-.301 1.239-1.169 1.618-1.82 1.568-.654-.053-1.42-.52-1.426-1.661V12A6.076 6.076 0 0012 5.93 6.076 6.076 0 005.93 12 6.076 6.076 0 0012 18.07a6.02 6.02 0 004.3-1.792 3.9 3.9 0 003.32 1.805c.874 0 1.74-.292 2.437-.821.719-.547 1.256-1.336 1.553-2.285.047-.154.135-.504.135-.507l.002-.013c.175-.76.253-1.52.253-2.457 0-6.617-5.383-12-12-12" />
|
||||
</Icon>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
import { Icon } from "./Icon"
|
||||
|
||||
export const GitHubIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
|
||||
return (
|
||||
<Icon {...props}>
|
||||
<title>GitHub</title>
|
||||
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
|
||||
</Icon>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
import { Icon } from "./Icon"
|
||||
|
||||
export const GitLabIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
|
||||
return (
|
||||
<Icon {...props}>
|
||||
<title>GitLab</title>
|
||||
<path d="M4.845.904c-.435 0-.82.28-.955.692C2.639 5.449 1.246 9.728.07 13.335a1.437 1.437 0 00.522 1.607l11.071 8.045c.2.145.472.144.67-.004l11.073-8.04a1.436 1.436 0 00.522-1.61c-1.285-3.942-2.683-8.256-3.817-11.746a1.004 1.004 0 00-.957-.684.987.987 0 00-.949.69l-2.405 7.408H8.203l-2.41-7.408a.987.987 0 00-.942-.69h-.006zm-.006 1.42l2.173 6.678H2.675zm14.326 0l2.168 6.678h-4.341zm-10.593 7.81h6.862c-1.142 3.52-2.288 7.04-3.434 10.559L8.572 10.135zm-5.514.005h4.321l3.086 9.5zm13.567 0h4.325c-2.467 3.17-4.95 6.328-7.411 9.502 1.028-3.167 2.059-6.334 3.086-9.502zM2.1 10.762l6.977 8.947-7.817-5.682a.305.305 0 01-.112-.341zm19.798 0l.952 2.922a.305.305 0 01-.11.341v.002l-7.82 5.68.026-.035z" />
|
||||
</Icon>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
import { classNames } from "@repo/config-tailwind/classNames"
|
||||
|
||||
export const Icon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
|
||||
const { children, className, ...rest } = props
|
||||
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
className={classNames(
|
||||
"size-8 fill-current text-black dark:text-white",
|
||||
className,
|
||||
)}
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
import { Icon } from "./Icon"
|
||||
|
||||
export const NPMIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
|
||||
return (
|
||||
<Icon {...props}>
|
||||
<title>npm</title>
|
||||
<path d="M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z" />
|
||||
</Icon>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
import { Icon } from "./Icon"
|
||||
|
||||
export const TwitchIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
|
||||
return (
|
||||
<Icon {...props}>
|
||||
<title>Twitch</title>
|
||||
<path d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714z" />
|
||||
</Icon>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
import { Icon } from "./Icon"
|
||||
|
||||
export const TwitterIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
|
||||
return (
|
||||
<Icon {...props}>
|
||||
<title>Twitter</title>
|
||||
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
|
||||
</Icon>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
import { Icon } from "./Icon"
|
||||
|
||||
export const YouTubeIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
|
||||
return (
|
||||
<Icon {...props}>
|
||||
<title>YouTube</title>
|
||||
<path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
|
||||
</Icon>
|
||||
)
|
||||
}
|
||||
21
packages/ui/src/About/SocialMediaList/SocialMediaItem.tsx
Normal file
21
packages/ui/src/About/SocialMediaList/SocialMediaItem.tsx
Normal file
@ -0,0 +1,21 @@
|
||||
export interface SocialMediaItemProps extends React.PropsWithChildren {
|
||||
link: string
|
||||
ariaLabel: string
|
||||
}
|
||||
|
||||
export const SocialMediaItem: React.FC<SocialMediaItemProps> = (props) => {
|
||||
const { link, ariaLabel, children } = props
|
||||
|
||||
return (
|
||||
<li className="mx-4 my-1 inline-block">
|
||||
<a
|
||||
href={link}
|
||||
aria-label={ariaLabel}
|
||||
target="_blank"
|
||||
className="relative inline-block bg-transparent transition-all duration-300 ease-in-out hover:scale-110"
|
||||
>
|
||||
{children}
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
53
packages/ui/src/About/SocialMediaList/SocialMediaList.tsx
Normal file
53
packages/ui/src/About/SocialMediaList/SocialMediaList.tsx
Normal file
@ -0,0 +1,53 @@
|
||||
import { EmailIcon } from "./SocialMediaIcons/EmailIcon"
|
||||
import { GitHubIcon } from "./SocialMediaIcons/GitHubIcon"
|
||||
import { GitLabIcon } from "./SocialMediaIcons/GitLabIcon"
|
||||
import { NPMIcon } from "./SocialMediaIcons/NPMIcon"
|
||||
import { TwitchIcon } from "./SocialMediaIcons/TwitchIcon"
|
||||
import { TwitterIcon } from "./SocialMediaIcons/TwitterIcon"
|
||||
import { YouTubeIcon } from "./SocialMediaIcons/YouTubeIcon"
|
||||
import { SocialMediaItem } from "./SocialMediaItem"
|
||||
|
||||
export interface SocialMediaListProps {}
|
||||
|
||||
export const SocialMediaList: React.FC<SocialMediaListProps> = () => {
|
||||
return (
|
||||
<ul className="mt-6 list-none text-center">
|
||||
<SocialMediaItem link="https://github.com/theoludwig" ariaLabel="GitHub">
|
||||
<GitHubIcon />
|
||||
</SocialMediaItem>
|
||||
|
||||
<SocialMediaItem link="https://gitlab.com/theoludwig" ariaLabel="GitLab">
|
||||
<GitLabIcon />
|
||||
</SocialMediaItem>
|
||||
|
||||
<SocialMediaItem link="https://www.npmjs.com/~theoludwig" ariaLabel="npm">
|
||||
<NPMIcon />
|
||||
</SocialMediaItem>
|
||||
|
||||
<SocialMediaItem
|
||||
link="https://twitter.com/theoludwig_"
|
||||
ariaLabel="Twitter"
|
||||
>
|
||||
<TwitterIcon />
|
||||
</SocialMediaItem>
|
||||
|
||||
<SocialMediaItem
|
||||
link="https://www.youtube.com/@theo_ludwig"
|
||||
ariaLabel="YouTube"
|
||||
>
|
||||
<YouTubeIcon />
|
||||
</SocialMediaItem>
|
||||
|
||||
<SocialMediaItem
|
||||
link="https://www.twitch.tv/theoludwig"
|
||||
ariaLabel="Twitch"
|
||||
>
|
||||
<TwitchIcon />
|
||||
</SocialMediaItem>
|
||||
|
||||
<SocialMediaItem link="mailto:contact@theoludwig.fr" ariaLabel="Email">
|
||||
<EmailIcon />
|
||||
</SocialMediaItem>
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react"
|
||||
|
||||
import { ErrorNotFound as ErrorNotFoundComponent } from "./ErrorNotFound"
|
||||
|
||||
const meta = {
|
||||
title: "Errors/ErrorNotFound",
|
||||
component: ErrorNotFoundComponent,
|
||||
} satisfies Meta<typeof ErrorNotFoundComponent>
|
||||
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const ErrorNotFound: Story = {
|
||||
args: {},
|
||||
}
|
||||
26
packages/ui/src/Errors/ErrorNotFound/ErrorNotFound.tsx
Normal file
26
packages/ui/src/Errors/ErrorNotFound/ErrorNotFound.tsx
Normal file
@ -0,0 +1,26 @@
|
||||
import { useTranslations } from "next-intl"
|
||||
import { MainLayout } from "../../MainLayout/MainLayout"
|
||||
import { Link } from "../../design/Link/Link"
|
||||
import { Section } from "../../design/Section/Section"
|
||||
import { Typography } from "../../design/Typography/Typography"
|
||||
|
||||
export interface ErrorNotFoundProps {}
|
||||
|
||||
export const ErrorNotFound: React.FC<ErrorNotFoundProps> = () => {
|
||||
const t = useTranslations()
|
||||
|
||||
return (
|
||||
<MainLayout center>
|
||||
<Section horizontalSpacing>
|
||||
<Typography variant="h1" as="h1">
|
||||
{t("errors.error")} 404 - {t("errors.not-found")}
|
||||
</Typography>
|
||||
|
||||
<Typography variant="text1" as="p" className="mt-4">
|
||||
{t("errors.page-doesnt-exist")}{" "}
|
||||
<Link href="/">{t("errors.return-to-home-page")}</Link>
|
||||
</Typography>
|
||||
</Section>
|
||||
</MainLayout>
|
||||
)
|
||||
}
|
||||
22
packages/ui/src/Errors/ErrorServer/ErrorServer.stories.tsx
Normal file
22
packages/ui/src/Errors/ErrorServer/ErrorServer.stories.tsx
Normal file
@ -0,0 +1,22 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react"
|
||||
import { expect, fn, userEvent, within } from "@storybook/test"
|
||||
|
||||
import { ErrorServer as ErrorServerComponent } from "./ErrorServer"
|
||||
|
||||
const meta = {
|
||||
title: "Errors/ErrorServer",
|
||||
component: ErrorServerComponent,
|
||||
} satisfies Meta<typeof ErrorServerComponent>
|
||||
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const ErrorServer: Story = {
|
||||
args: { reset: fn(), error: new Error("Server error") },
|
||||
play: async ({ canvasElement, args }) => {
|
||||
const canvas = within(canvasElement)
|
||||
await userEvent.click(canvas.getByText("Try again?"))
|
||||
await expect(args.reset).toHaveBeenCalled()
|
||||
},
|
||||
}
|
||||
37
packages/ui/src/Errors/ErrorServer/ErrorServer.tsx
Normal file
37
packages/ui/src/Errors/ErrorServer/ErrorServer.tsx
Normal file
@ -0,0 +1,37 @@
|
||||
"use client"
|
||||
|
||||
import { useTranslations } from "next-intl"
|
||||
import { useEffect } from "react"
|
||||
import { MainLayout } from "../../MainLayout/MainLayout"
|
||||
import { Button } from "../../design/Button/Button"
|
||||
import { Section } from "../../design/Section/Section"
|
||||
import { Typography } from "../../design/Typography/Typography"
|
||||
|
||||
export interface ErrorServerProps {
|
||||
error: Error & { digest?: string }
|
||||
reset: () => void
|
||||
}
|
||||
|
||||
export const ErrorServer: React.FC<ErrorServerProps> = (props) => {
|
||||
const { error, reset } = props
|
||||
|
||||
const t = useTranslations()
|
||||
|
||||
useEffect(() => {
|
||||
console.error(error)
|
||||
}, [error])
|
||||
|
||||
return (
|
||||
<MainLayout center>
|
||||
<Section horizontalSpacing>
|
||||
<Typography variant="h1" as="h1">
|
||||
{t("errors.error")} 500 - {t("errors.server-error")}
|
||||
</Typography>
|
||||
|
||||
<Typography variant="text1" as="p" className="mt-4">
|
||||
<Button onClick={reset}>{t("errors.try-again")}</Button>
|
||||
</Typography>
|
||||
</Section>
|
||||
</MainLayout>
|
||||
)
|
||||
}
|
||||
18
packages/ui/src/Footer/Footer.stories.tsx
Normal file
18
packages/ui/src/Footer/Footer.stories.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react"
|
||||
|
||||
import { Footer as FooterComponent } from "./Footer"
|
||||
|
||||
const meta = {
|
||||
title: "User Interface/Footer",
|
||||
component: FooterComponent,
|
||||
} satisfies Meta<typeof FooterComponent>
|
||||
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Footer: Story = {
|
||||
args: {
|
||||
version: "1.0.0",
|
||||
},
|
||||
}
|
||||
34
packages/ui/src/Footer/Footer.tsx
Normal file
34
packages/ui/src/Footer/Footer.tsx
Normal file
@ -0,0 +1,34 @@
|
||||
import { useTranslations } from "next-intl"
|
||||
|
||||
import { GIT_REPO_LINK } from "@repo/utils/constants"
|
||||
import { Link } from "../design/Link/Link"
|
||||
|
||||
export interface FooterProps {
|
||||
version: string
|
||||
}
|
||||
|
||||
export const Footer: React.FC<FooterProps> = (props) => {
|
||||
const { version } = props
|
||||
|
||||
const t = useTranslations()
|
||||
|
||||
return (
|
||||
<footer className="bg-background dark:bg-background-dark border-gray-darker dark:border-gray-darker-dark flex flex-col items-center justify-center border-t-2 p-6 text-lg">
|
||||
<p>
|
||||
<Link href="/">{t("meta.title")}</Link> |{" "}
|
||||
{t("footer.all-rights-reserved")}
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Version{" "}
|
||||
<Link
|
||||
href={`${GIT_REPO_LINK}/releases/tag/v${version}`}
|
||||
target="_blank"
|
||||
isExternal={false}
|
||||
>
|
||||
{version}
|
||||
</Link>
|
||||
</p>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
16
packages/ui/src/Header/Header.stories.tsx
Normal file
16
packages/ui/src/Header/Header.stories.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react"
|
||||
|
||||
import { Header as HeaderComponent } from "./Header"
|
||||
|
||||
const meta = {
|
||||
title: "User Interface/Header",
|
||||
component: HeaderComponent,
|
||||
} satisfies Meta<typeof HeaderComponent>
|
||||
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Header: Story = {
|
||||
args: {},
|
||||
}
|
||||
38
packages/ui/src/Header/Header.tsx
Normal file
38
packages/ui/src/Header/Header.tsx
Normal file
@ -0,0 +1,38 @@
|
||||
import { useTranslations } from "next-intl"
|
||||
import Image from "next/image"
|
||||
import { Link } from "../design/Link/Link"
|
||||
import { Locales } from "./Locales/Locales"
|
||||
import { SwitchTheme } from "./SwitchTheme"
|
||||
|
||||
export interface HeaderProps {}
|
||||
|
||||
export const Header: React.FC<HeaderProps> = () => {
|
||||
const t = useTranslations()
|
||||
|
||||
return (
|
||||
<header className="bg-background dark:bg-background-dark border-gray-darker dark:border-gray-darker-dark sticky top-0 z-50 flex w-full justify-between gap-4 border-b-2 px-6 py-2">
|
||||
<h1>
|
||||
<Link href="/" className="flex items-center justify-center">
|
||||
<Image
|
||||
quality={100}
|
||||
className="w-16"
|
||||
src="/images/logo.webp"
|
||||
width={800}
|
||||
height={800}
|
||||
alt={`${t("meta.title")} Logo`}
|
||||
priority
|
||||
/>
|
||||
<strong className="ml-1 hidden sm:block sm:text-xl">
|
||||
{t("meta.title")}
|
||||
</strong>
|
||||
</Link>
|
||||
</h1>
|
||||
|
||||
<div className="flex items-center justify-between gap-6">
|
||||
<Link href="/blog">Blog</Link>
|
||||
<Locales />
|
||||
<SwitchTheme />
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
16
packages/ui/src/Header/Locales/Arrow.tsx
Normal file
16
packages/ui/src/Header/Locales/Arrow.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
export const Arrow: React.FC = () => {
|
||||
return (
|
||||
<svg
|
||||
width="12"
|
||||
height="8"
|
||||
viewBox="0 0 12 8"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
className="fill-current text-black dark:text-white"
|
||||
d="M9.8024 0.292969L5.61855 4.58597L1.43469 0.292969L0.0566406 1.70697L5.61855 7.41397L11.1805 1.70697L9.8024 0.292969Z"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
26
packages/ui/src/Header/Locales/LocaleFlag.tsx
Normal file
26
packages/ui/src/Header/Locales/LocaleFlag.tsx
Normal file
@ -0,0 +1,26 @@
|
||||
import type { Locale } from "@repo/i18n/config"
|
||||
import { useTranslations } from "next-intl"
|
||||
import Image from "next/image"
|
||||
|
||||
export interface LocaleFlagProps {
|
||||
locale: Locale
|
||||
}
|
||||
|
||||
export const LocaleFlag: React.FC<LocaleFlagProps> = (props) => {
|
||||
const { locale } = props
|
||||
|
||||
const t = useTranslations()
|
||||
|
||||
return (
|
||||
<>
|
||||
<Image
|
||||
quality={100}
|
||||
width={35}
|
||||
height={35}
|
||||
src={`/images/locales/${locale}.svg`}
|
||||
alt={`Flag of ${t(`locales.${locale}`)}`}
|
||||
/>
|
||||
<p className="mx-2 text-base font-semibold">{t(`locales.${locale}`)}</p>
|
||||
</>
|
||||
)
|
||||
}
|
||||
86
packages/ui/src/Header/Locales/Locales.tsx
Normal file
86
packages/ui/src/Header/Locales/Locales.tsx
Normal file
@ -0,0 +1,86 @@
|
||||
"use client"
|
||||
|
||||
import { classNames } from "@repo/config-tailwind/classNames"
|
||||
import type { Locale } from "@repo/i18n/config"
|
||||
import { LOCALES } from "@repo/i18n/config"
|
||||
import { usePathname, useRouter } from "@repo/i18n/navigation"
|
||||
import { useLocale } from "next-intl"
|
||||
import { useEffect, useRef } from "react"
|
||||
|
||||
import { useBoolean } from "@repo/react-hooks/useBoolean"
|
||||
import { Arrow } from "./Arrow"
|
||||
import { LocaleFlag } from "./LocaleFlag"
|
||||
|
||||
export interface LocalesProps {}
|
||||
|
||||
export const Locales: React.FC<LocalesProps> = () => {
|
||||
const router = useRouter()
|
||||
const pathname = usePathname()
|
||||
const localeCurrent = useLocale() as Locale
|
||||
|
||||
const {
|
||||
value: isVisibleMenu,
|
||||
toggle: toggleMenu,
|
||||
setFalse: hideMenu,
|
||||
} = useBoolean()
|
||||
const languageClickRef = useRef<HTMLButtonElement | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickEvent = (event: MouseEvent): void => {
|
||||
if (languageClickRef.current == null || event.target == null) {
|
||||
return
|
||||
}
|
||||
if (!languageClickRef.current.contains(event.target as Node)) {
|
||||
hideMenu()
|
||||
}
|
||||
}
|
||||
|
||||
window.document.addEventListener("click", handleClickEvent)
|
||||
|
||||
return () => {
|
||||
return window.removeEventListener("click", handleClickEvent)
|
||||
}
|
||||
}, [hideMenu])
|
||||
|
||||
if (pathname.startsWith("/blog")) {
|
||||
return <></>
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<button
|
||||
ref={languageClickRef}
|
||||
className="flex items-center"
|
||||
onClick={toggleMenu}
|
||||
>
|
||||
<LocaleFlag locale={localeCurrent} />
|
||||
<Arrow />
|
||||
</button>
|
||||
|
||||
<ul
|
||||
className={classNames(
|
||||
"shadow-lightFlag dark:shadow-darkFlag bg-background dark:bg-background-dark absolute top-14 z-10 mt-4 flex w-32 list-none flex-col items-center justify-center rounded-lg p-0",
|
||||
{ hidden: !isVisibleMenu },
|
||||
)}
|
||||
>
|
||||
{LOCALES.filter((locale) => {
|
||||
return locale !== localeCurrent
|
||||
}).map((locale) => {
|
||||
return (
|
||||
<li key={locale} className="w-full">
|
||||
<button
|
||||
className="flex h-12 w-full items-center justify-center rounded-lg hover:bg-[#4f545c]/20"
|
||||
onClick={() => {
|
||||
router.replace(pathname, { locale, scroll: false })
|
||||
router.refresh()
|
||||
}}
|
||||
>
|
||||
<LocaleFlag locale={locale} />
|
||||
</button>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
107
packages/ui/src/Header/SwitchTheme.tsx
Normal file
107
packages/ui/src/Header/SwitchTheme.tsx
Normal file
@ -0,0 +1,107 @@
|
||||
"use client"
|
||||
|
||||
import { classNames } from "@repo/config-tailwind/classNames"
|
||||
import { useIsMounted } from "@repo/react-hooks/useIsMounted"
|
||||
import {
|
||||
ThemeProvider as NextThemeProvider,
|
||||
useTheme as useNextTheme,
|
||||
} from "next-themes"
|
||||
|
||||
export const THEMES = ["light", "dark"] as const
|
||||
export type Theme = (typeof THEMES)[number]
|
||||
export const THEME_DEFAULT = "dark" as Theme
|
||||
|
||||
export interface ThemeProviderProps extends React.PropsWithChildren {}
|
||||
|
||||
export const ThemeProvider: React.FC<ThemeProviderProps> = (props) => {
|
||||
const { children } = props
|
||||
|
||||
return (
|
||||
<NextThemeProvider
|
||||
attribute="class"
|
||||
defaultTheme={THEME_DEFAULT}
|
||||
enableSystem={false}
|
||||
>
|
||||
{children}
|
||||
</NextThemeProvider>
|
||||
)
|
||||
}
|
||||
|
||||
export interface UseThemeOutput {
|
||||
theme: Theme
|
||||
toggleTheme: () => void
|
||||
}
|
||||
|
||||
export const useTheme = (): UseThemeOutput => {
|
||||
const { setTheme, theme: themeData } = useNextTheme()
|
||||
const { isMounted } = useIsMounted()
|
||||
|
||||
const theme = isMounted ? (themeData as Theme) : THEME_DEFAULT
|
||||
|
||||
const toggleTheme: UseThemeOutput["toggleTheme"] = () => {
|
||||
const newTheme = theme === "dark" ? "light" : "dark"
|
||||
setTheme(newTheme)
|
||||
}
|
||||
|
||||
return {
|
||||
theme,
|
||||
toggleTheme,
|
||||
}
|
||||
}
|
||||
|
||||
export interface SwitchThemeProps {}
|
||||
|
||||
export const SwitchTheme: React.FC<SwitchThemeProps> = () => {
|
||||
const { theme, toggleTheme } = useTheme()
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-center" onClick={toggleTheme}>
|
||||
<div className="relative inline-block cursor-pointer touch-pan-x select-none border-0 bg-transparent p-0">
|
||||
<div className="h-[24px] w-[50px] rounded-[30px] bg-[#4d4d4d] p-0 text-white transition-all duration-200 ease-in-out">
|
||||
<div
|
||||
className={classNames(
|
||||
"absolute inset-y-0 left-[8px] my-auto h-[10px] w-[14px] leading-[0] transition-opacity duration-[250ms] ease-in-out",
|
||||
{
|
||||
"opacity-100": theme === "dark",
|
||||
"opacity-0": theme === "light",
|
||||
},
|
||||
)}
|
||||
>
|
||||
<span className="relative flex size-[10px] items-center justify-center">
|
||||
🌜
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className={classNames(
|
||||
"absolute inset-y-0 right-[10px] my-auto size-[10px] leading-[0]",
|
||||
{
|
||||
"opacity-100": theme === "light",
|
||||
"opacity-0": theme === "dark",
|
||||
},
|
||||
)}
|
||||
>
|
||||
<span className="relative flex size-[10px] items-center justify-center">
|
||||
🌞
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={classNames(
|
||||
"absolute top-px box-border size-[22px] rounded-[50%] bg-[#fafafa] text-white transition-all duration-[250ms] ease-in-out",
|
||||
{
|
||||
"left-[27px]": theme === "dark",
|
||||
"left-0": theme === "light",
|
||||
},
|
||||
)}
|
||||
style={{ border: "1px solid #4d4d4d" }}
|
||||
/>
|
||||
<input
|
||||
type="checkbox"
|
||||
aria-label="Dark mode toggle"
|
||||
className="absolute -m-px hidden size-px overflow-hidden border-0 p-0"
|
||||
defaultChecked
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
26
packages/ui/src/Interests/InterestItem.tsx
Normal file
26
packages/ui/src/Interests/InterestItem.tsx
Normal file
@ -0,0 +1,26 @@
|
||||
import { Typography } from "../design/Typography/Typography"
|
||||
|
||||
export interface InterestItemProps {
|
||||
title: string
|
||||
description: React.ReactNode
|
||||
}
|
||||
|
||||
export const InterestItem: React.FC<InterestItemProps> = (props) => {
|
||||
const { title, description } = props
|
||||
|
||||
return (
|
||||
<div className="my-6 text-center">
|
||||
<Typography as="h3" variant="h4">
|
||||
{title}
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
as="p"
|
||||
variant="text1"
|
||||
className="dark:text-gray my-2 text-black"
|
||||
>
|
||||
{description}
|
||||
</Typography>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
16
packages/ui/src/Interests/Interests.stories.tsx
Normal file
16
packages/ui/src/Interests/Interests.stories.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react"
|
||||
|
||||
import { Interests as InterestsComponent } from "./Interests"
|
||||
|
||||
const meta = {
|
||||
title: "Feature/Interests",
|
||||
component: InterestsComponent,
|
||||
} satisfies Meta<typeof InterestsComponent>
|
||||
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Interests: Story = {
|
||||
args: {},
|
||||
}
|
||||
74
packages/ui/src/Interests/Interests.tsx
Normal file
74
packages/ui/src/Interests/Interests.tsx
Normal file
@ -0,0 +1,74 @@
|
||||
import { GIT_REPO_LINK } from "@repo/utils/constants"
|
||||
import { useTranslations } from "next-intl"
|
||||
import { FaGit, FaMicrochip } from "react-icons/fa"
|
||||
import { Link } from "../design/Link/Link"
|
||||
import {
|
||||
Section,
|
||||
SectionContent,
|
||||
SectionTitle,
|
||||
} from "../design/Section/Section"
|
||||
import { InterestItem } from "./InterestItem"
|
||||
|
||||
export interface InterestsProps {}
|
||||
|
||||
export const Interests: React.FC<InterestsProps> = () => {
|
||||
const t = useTranslations()
|
||||
|
||||
const items = [
|
||||
{
|
||||
id: "code",
|
||||
title: t("home.interests.code.title"),
|
||||
description: t.rich("home.interests.code.description", {
|
||||
"abbr-ux": (children) => {
|
||||
return <abbr title="User Experience">{children}</abbr>
|
||||
},
|
||||
}),
|
||||
Icon: FaMicrochip,
|
||||
},
|
||||
{
|
||||
id: "open-source",
|
||||
title: t("home.interests.open-source.title"),
|
||||
description: t.rich("home.interests.open-source.description", {
|
||||
"github-link": (children) => {
|
||||
return (
|
||||
<Link href={GIT_REPO_LINK} target="_blank">
|
||||
{children}
|
||||
</Link>
|
||||
)
|
||||
},
|
||||
}),
|
||||
Icon: FaGit,
|
||||
},
|
||||
] as const
|
||||
|
||||
return (
|
||||
<Section verticalSpacing horizontalSpacing id="interests">
|
||||
<SectionTitle>{t("home.interests.title")}</SectionTitle>
|
||||
<SectionContent shadowContainer>
|
||||
<div className="max-w-full">
|
||||
{items.map((item) => {
|
||||
return (
|
||||
<InterestItem
|
||||
key={item.id}
|
||||
title={item.title}
|
||||
description={item.description}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="my-4 flex justify-center">
|
||||
<ul className="m-0 flex w-96 list-none justify-around p-0">
|
||||
{items.map((item) => {
|
||||
return (
|
||||
<li className="m-2 size-8" key={item.id} title={item.title}>
|
||||
<item.Icon className="text-primary dark:text-primary-dark block size-full" />
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</SectionContent>
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
24
packages/ui/src/MainLayout/MainLayout.tsx
Normal file
24
packages/ui/src/MainLayout/MainLayout.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
import { classNames } from "@repo/config-tailwind/classNames"
|
||||
|
||||
export interface MainLayoutProps
|
||||
extends React.ComponentPropsWithoutRef<"main"> {
|
||||
className?: string
|
||||
center?: boolean
|
||||
}
|
||||
|
||||
export const MainLayout: React.FC<MainLayoutProps> = (props) => {
|
||||
const { className, center = false, ...rest } = props
|
||||
|
||||
return (
|
||||
<main
|
||||
className={classNames(
|
||||
"min-h-[calc(100vh-188px)] md:mx-auto md:max-w-4xl lg:max-w-7xl",
|
||||
{
|
||||
"flex flex-col items-center justify-center text-center": center,
|
||||
},
|
||||
className,
|
||||
)}
|
||||
{...rest}
|
||||
/>
|
||||
)
|
||||
}
|
||||
16
packages/ui/src/OpenSource/OpenSource.stories.tsx
Normal file
16
packages/ui/src/OpenSource/OpenSource.stories.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react"
|
||||
|
||||
import { OpenSource as OpenSourceComponent } from "./OpenSource"
|
||||
|
||||
const meta = {
|
||||
title: "Feature/OpenSource",
|
||||
component: OpenSourceComponent,
|
||||
} satisfies Meta<typeof OpenSourceComponent>
|
||||
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const OpenSource: Story = {
|
||||
args: {},
|
||||
}
|
||||
47
packages/ui/src/OpenSource/OpenSource.tsx
Normal file
47
packages/ui/src/OpenSource/OpenSource.tsx
Normal file
@ -0,0 +1,47 @@
|
||||
import { useTranslations } from "next-intl"
|
||||
import {
|
||||
Section,
|
||||
SectionDescription,
|
||||
SectionTitle,
|
||||
} from "../design/Section/Section"
|
||||
import { Repository } from "./Repository"
|
||||
|
||||
export interface OpenSourceProps {}
|
||||
|
||||
export const OpenSource: React.FC<OpenSourceProps> = () => {
|
||||
const t = useTranslations()
|
||||
|
||||
return (
|
||||
<Section verticalSpacing horizontalSpacing id="open-source">
|
||||
<SectionTitle>{t("home.open-source.title")}</SectionTitle>
|
||||
<SectionDescription>
|
||||
{t("home.open-source.description")}
|
||||
</SectionDescription>
|
||||
|
||||
<div className="flex max-w-full flex-col items-center">
|
||||
<ul className="grid list-none grid-cols-1 gap-6 md:w-10/12 md:grid-cols-2">
|
||||
<Repository
|
||||
name="nodejs/node"
|
||||
description="Node.js JavaScript runtime ✨🐢🚀✨"
|
||||
href="https://github.com/nodejs/node/commits?author=theoludwig"
|
||||
/>
|
||||
<Repository
|
||||
name="standard/standard"
|
||||
description="🌟 JavaScript Style Guide, with linter & automatic code fixer"
|
||||
href="https://github.com/standard/standard/commits?author=theoludwig"
|
||||
/>
|
||||
<Repository
|
||||
name="DefinitelyTyped/DefinitelyTyped"
|
||||
description="High quality TypeScript type definitions."
|
||||
href="https://github.com/DefinitelyTyped/DefinitelyTyped/commits?author=theoludwig"
|
||||
/>
|
||||
<Repository
|
||||
name="vercel/next.js"
|
||||
description="The React Framework"
|
||||
href="https://github.com/vercel/next.js/commits?author=theoludwig"
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
32
packages/ui/src/OpenSource/Repository.tsx
Normal file
32
packages/ui/src/OpenSource/Repository.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
import { GitHubIcon } from "../About/SocialMediaList/SocialMediaIcons/GitHubIcon"
|
||||
import { SectionContent } from "../design/Section/Section"
|
||||
import { Typography } from "../design/Typography/Typography"
|
||||
|
||||
export interface RepositoryProps {
|
||||
name: string
|
||||
description: string
|
||||
href: string
|
||||
}
|
||||
|
||||
export const Repository: React.FC<RepositoryProps> = (props) => {
|
||||
const { name, description, href } = props
|
||||
|
||||
return (
|
||||
<li>
|
||||
<a href={href} target="_blank">
|
||||
<SectionContent
|
||||
className="relative cursor-pointer p-6 transition-all duration-300 ease-in-out hover:scale-[1.03] sm:p-6"
|
||||
shadowContainer
|
||||
>
|
||||
<Typography as="h3" variant="text1" className="flex items-center">
|
||||
<GitHubIcon className="mr-2 h-6" />
|
||||
<span className="text-primary dark:text-primary-dark font-semibold">
|
||||
{name}
|
||||
</span>
|
||||
</Typography>
|
||||
<p className="mt-4">{description}</p>
|
||||
</SectionContent>
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
16
packages/ui/src/Portfolio/Portfolio.stories.tsx
Normal file
16
packages/ui/src/Portfolio/Portfolio.stories.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react"
|
||||
|
||||
import { Portfolio as PortfolioComponent } from "./Portfolio"
|
||||
|
||||
const meta = {
|
||||
title: "Feature/Portfolio",
|
||||
component: PortfolioComponent,
|
||||
} satisfies Meta<typeof PortfolioComponent>
|
||||
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Portfolio: Story = {
|
||||
args: {},
|
||||
}
|
||||
38
packages/ui/src/Portfolio/Portfolio.tsx
Normal file
38
packages/ui/src/Portfolio/Portfolio.tsx
Normal file
@ -0,0 +1,38 @@
|
||||
import { useTranslations } from "next-intl"
|
||||
import { Section, SectionTitle } from "../design/Section/Section"
|
||||
import { PortfolioItem, type PortfolioProject } from "./PortfolioItem"
|
||||
|
||||
export interface PortfolioProps {}
|
||||
|
||||
export const Portfolio: React.FC<PortfolioProps> = () => {
|
||||
const t = useTranslations()
|
||||
|
||||
const items: PortfolioProject[] = [
|
||||
{
|
||||
id: "carolo",
|
||||
title: t("home.portfolio.carolo.title"),
|
||||
description: t("home.portfolio.carolo.description"),
|
||||
link: "https://carolo.theoludwig.fr/",
|
||||
image: "/images/portfolio/Carolo.webp",
|
||||
},
|
||||
{
|
||||
id: "leon",
|
||||
title: t("home.portfolio.leon.title"),
|
||||
description: t("home.portfolio.leon.description"),
|
||||
link: "https://getleon.ai/",
|
||||
image: "/images/portfolio/Leon.webp",
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<Section verticalSpacing horizontalSpacing id="portfolio">
|
||||
<SectionTitle>{t("home.portfolio.title")}</SectionTitle>
|
||||
|
||||
<ul className="flex w-full list-none flex-wrap justify-center gap-12 px-3">
|
||||
{items.map((item) => {
|
||||
return <PortfolioItem key={item.id} portfolioProject={item} />
|
||||
})}
|
||||
</ul>
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
53
packages/ui/src/Portfolio/PortfolioItem.tsx
Normal file
53
packages/ui/src/Portfolio/PortfolioItem.tsx
Normal file
@ -0,0 +1,53 @@
|
||||
import Image from "next/image"
|
||||
import { SectionContent } from "../design/Section/Section"
|
||||
import { Typography } from "../design/Typography/Typography"
|
||||
|
||||
export interface PortfolioProject {
|
||||
id: string
|
||||
title: string
|
||||
description: string
|
||||
image: string
|
||||
link: string
|
||||
}
|
||||
|
||||
export interface PortfolioItemProps {
|
||||
portfolioProject: PortfolioProject
|
||||
}
|
||||
|
||||
export const PortfolioItem: React.FC<PortfolioItemProps> = (props) => {
|
||||
const { portfolioProject } = props
|
||||
const { title, description, link, image } = portfolioProject
|
||||
|
||||
return (
|
||||
<li>
|
||||
<a
|
||||
className="group inline-flex justify-center"
|
||||
target="_blank"
|
||||
href={link}
|
||||
aria-label={title}
|
||||
>
|
||||
<SectionContent
|
||||
className="relative cursor-pointer items-center p-0 sm:p-0"
|
||||
shadowContainer
|
||||
>
|
||||
<div className="flex justify-center">
|
||||
<Image
|
||||
quality={100}
|
||||
className="size-auto transition-opacity duration-500 group-hover:opacity-20 dark:group-hover:opacity-5"
|
||||
width={300}
|
||||
height={300}
|
||||
src={image}
|
||||
alt={title}
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute bottom-0 h-auto overflow-hidden text-center opacity-0 transition-opacity duration-500 group-hover:opacity-100">
|
||||
<Typography variant="h4" as="h3" className="my-6">
|
||||
{title}
|
||||
</Typography>
|
||||
<p className="mx-4 my-6 font-semibold">{description}</p>
|
||||
</div>
|
||||
</SectionContent>
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
51
packages/ui/src/Skills/SkillItem.tsx
Normal file
51
packages/ui/src/Skills/SkillItem.tsx
Normal file
@ -0,0 +1,51 @@
|
||||
"use client"
|
||||
|
||||
import Image from "next/image"
|
||||
import { useMemo } from "react"
|
||||
import { Link } from "../design/Link/Link"
|
||||
import { useTheme } from "../Header/SwitchTheme"
|
||||
import type { SkillName } from "./skills"
|
||||
import { skills } from "./skills"
|
||||
|
||||
export interface SkillItemProps {
|
||||
skillName: SkillName
|
||||
}
|
||||
|
||||
export const SkillItem: React.FC<SkillItemProps> = (props) => {
|
||||
const { skillName } = props
|
||||
|
||||
const skill = skills[skillName]
|
||||
|
||||
const { theme } = useTheme()
|
||||
|
||||
const skillImage = useMemo(() => {
|
||||
if (typeof skill.image === "string") {
|
||||
return skill.image
|
||||
}
|
||||
if (theme === "light") {
|
||||
return skill.image.light
|
||||
}
|
||||
return skill.image.dark
|
||||
}, [skill.image, theme])
|
||||
|
||||
return (
|
||||
<li>
|
||||
<Link
|
||||
href={skill.link}
|
||||
className="mx-2 max-w-xl flex-col items-center justify-center text-center"
|
||||
target="_blank"
|
||||
isExternal={false}
|
||||
>
|
||||
<Image
|
||||
className="inline size-16"
|
||||
quality={100}
|
||||
width={64}
|
||||
height={64}
|
||||
alt={`Logo of ${skillName}`}
|
||||
src={skillImage}
|
||||
/>
|
||||
<p className="mt-1 font-semibold">{skillName}</p>
|
||||
</Link>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
16
packages/ui/src/Skills/Skills.stories.tsx
Normal file
16
packages/ui/src/Skills/Skills.stories.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react"
|
||||
|
||||
import { Skills as SkillsComponent } from "./Skills"
|
||||
|
||||
const meta = {
|
||||
title: "Feature/Skills",
|
||||
component: SkillsComponent,
|
||||
} satisfies Meta<typeof SkillsComponent>
|
||||
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Skills: Story = {
|
||||
args: {},
|
||||
}
|
||||
45
packages/ui/src/Skills/Skills.tsx
Normal file
45
packages/ui/src/Skills/Skills.tsx
Normal file
@ -0,0 +1,45 @@
|
||||
import { useTranslations } from "next-intl"
|
||||
import { Section, SectionTitle } from "../design/Section/Section"
|
||||
import { SkillItem } from "./SkillItem"
|
||||
import { SkillsSection } from "./SkillsSection"
|
||||
|
||||
export interface SkillsProps {}
|
||||
|
||||
export const Skills: React.FC<SkillsProps> = () => {
|
||||
const t = useTranslations()
|
||||
|
||||
return (
|
||||
<Section verticalSpacing horizontalSpacing id="skills">
|
||||
<SectionTitle>{t("home.skills.title")}</SectionTitle>
|
||||
|
||||
<SkillsSection title={t("home.skills.programming-languages")}>
|
||||
<SkillItem skillName="TypeScript" />
|
||||
<SkillItem skillName="Python" />
|
||||
<SkillItem skillName="C/C++" />
|
||||
<SkillItem skillName="PHP" />
|
||||
</SkillsSection>
|
||||
|
||||
<SkillsSection title={t("home.skills.frontend")}>
|
||||
<SkillItem skillName="HTML" />
|
||||
<SkillItem skillName="CSS" />
|
||||
<SkillItem skillName="Tailwind CSS" />
|
||||
<SkillItem skillName="React.js (+ Next.js)" />
|
||||
</SkillsSection>
|
||||
|
||||
<SkillsSection title={t("home.skills.backend")}>
|
||||
<SkillItem skillName="Laravel" />
|
||||
<SkillItem skillName="Node.js" />
|
||||
<SkillItem skillName="Fastify" />
|
||||
<SkillItem skillName="PostgreSQL" />
|
||||
</SkillsSection>
|
||||
|
||||
<SkillsSection title={t("home.skills.software-tools")}>
|
||||
<SkillItem skillName="GNU/Linux" />
|
||||
<SkillItem skillName="Arch Linux" />
|
||||
<SkillItem skillName="Visual Studio Code" />
|
||||
<SkillItem skillName="Git" />
|
||||
<SkillItem skillName="Docker" />
|
||||
</SkillsSection>
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
25
packages/ui/src/Skills/SkillsSection.tsx
Normal file
25
packages/ui/src/Skills/SkillsSection.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
import { SectionContent } from "../design/Section/Section"
|
||||
import { Typography } from "../design/Typography/Typography"
|
||||
|
||||
export interface SkillsSectionProps extends React.PropsWithChildren {
|
||||
title: string
|
||||
}
|
||||
|
||||
export const SkillsSection: React.FC<SkillsSectionProps> = (props) => {
|
||||
const { title, children } = props
|
||||
|
||||
return (
|
||||
<section className="mb-12">
|
||||
<SectionContent shadowContainer className="mx-auto w-full px-4 py-6">
|
||||
<Typography
|
||||
variant="h4"
|
||||
as="h3"
|
||||
className="mb-6 border-b border-black pb-3 dark:border-white"
|
||||
>
|
||||
{title}
|
||||
</Typography>
|
||||
<ul className="flex list-none flex-wrap justify-around">{children}</ul>
|
||||
</SectionContent>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
115
packages/ui/src/Skills/skills.ts
Normal file
115
packages/ui/src/Skills/skills.ts
Normal file
@ -0,0 +1,115 @@
|
||||
export interface Skill {
|
||||
link: string
|
||||
image: string | { [key: string]: string }
|
||||
}
|
||||
|
||||
export const skills = {
|
||||
JavaScript: {
|
||||
link: "https://developer.mozilla.org/docs/Web/JavaScript",
|
||||
image: "/images/skills/JavaScript.webp",
|
||||
},
|
||||
TypeScript: {
|
||||
link: "https://www.typescriptlang.org/",
|
||||
image: "/images/skills/TypeScript.webp",
|
||||
},
|
||||
Python: {
|
||||
link: "https://www.python.org/",
|
||||
image: "/images/skills/Python.webp",
|
||||
},
|
||||
"C/C++": {
|
||||
link: "https://isocpp.org/",
|
||||
image: "/images/skills/C-Cpp.webp",
|
||||
},
|
||||
PHP: {
|
||||
link: "https://www.php.net/",
|
||||
image: "/images/skills/PHP.webp",
|
||||
},
|
||||
Laravel: {
|
||||
link: "https://laravel.com/",
|
||||
image: "/images/skills/Laravel.webp",
|
||||
},
|
||||
Dart: {
|
||||
link: "https://dart.dev/",
|
||||
image: "/images/skills/Dart.webp",
|
||||
},
|
||||
Flutter: {
|
||||
link: "https://flutter.dev/",
|
||||
image: "/images/skills/Flutter.webp",
|
||||
},
|
||||
HTML: {
|
||||
link: "https://developer.mozilla.org/docs/Web/HTML",
|
||||
image: "/images/skills/HTML.webp",
|
||||
},
|
||||
CSS: {
|
||||
link: "https://developer.mozilla.org/docs/Web/CSS",
|
||||
image: "/images/skills/CSS.webp",
|
||||
},
|
||||
"Tailwind CSS": {
|
||||
link: "https://tailwindcss.com/",
|
||||
image: "/images/skills/TailwindCSS.webp",
|
||||
},
|
||||
SASS: {
|
||||
link: "https://sass-lang.com/",
|
||||
image: "/images/skills/SASS.svg",
|
||||
},
|
||||
"React.js (+ Next.js)": {
|
||||
link: "https://reactjs.org/",
|
||||
image: "/images/skills/ReactJS.webp",
|
||||
},
|
||||
"Node.js": {
|
||||
link: "https://nodejs.org/",
|
||||
image: "/images/skills/NodeJS.webp",
|
||||
},
|
||||
Fastify: {
|
||||
link: "https://www.fastify.io/",
|
||||
image: {
|
||||
light: "/images/skills/Fastify-light.webp",
|
||||
dark: "/images/skills/Fastify-dark.webp",
|
||||
},
|
||||
},
|
||||
Prisma: {
|
||||
link: "https://www.prisma.io/",
|
||||
image: {
|
||||
light: "/images/skills/Prisma-light.webp",
|
||||
dark: "/images/skills/Prisma-dark.webp",
|
||||
},
|
||||
},
|
||||
PostgreSQL: {
|
||||
link: "https://www.postgresql.org/",
|
||||
image: "/images/skills/PostgreSQL.webp",
|
||||
},
|
||||
MySQL: {
|
||||
link: "https://www.mysql.com/",
|
||||
image: "/images/skills/MySQL.webp",
|
||||
},
|
||||
Strapi: {
|
||||
link: "https://strapi.io/",
|
||||
image: "/images/skills/Strapi.webp",
|
||||
},
|
||||
"Visual Studio Code": {
|
||||
link: "https://code.visualstudio.com/",
|
||||
image: "/images/skills/VisualStudioCode.webp",
|
||||
},
|
||||
Git: {
|
||||
link: "https://git-scm.com/",
|
||||
image: "/images/skills/Git.webp",
|
||||
},
|
||||
Ubuntu: {
|
||||
link: "https://ubuntu.com/",
|
||||
image: "/images/skills/Ubuntu.webp",
|
||||
},
|
||||
"Arch Linux": {
|
||||
link: "https://archlinux.org/",
|
||||
image: "/images/skills/ArchLinux.webp",
|
||||
},
|
||||
"GNU/Linux": {
|
||||
link: "https://www.gnu.org/",
|
||||
image: "/images/skills/GNU-Linux.webp",
|
||||
},
|
||||
Docker: {
|
||||
link: "https://www.docker.com/",
|
||||
image: "/images/skills/Docker.webp",
|
||||
},
|
||||
} as const
|
||||
|
||||
export type SkillName = keyof typeof skills
|
||||
148
packages/ui/src/design/Button/Button.stories.tsx
Normal file
148
packages/ui/src/design/Button/Button.stories.tsx
Normal file
@ -0,0 +1,148 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react"
|
||||
import { expect, fn, userEvent, within } from "@storybook/test"
|
||||
import { FaCheck } from "react-icons/fa6"
|
||||
|
||||
import type { ButtonLinkProps } from "./Button"
|
||||
import { Button } from "./Button"
|
||||
|
||||
const meta = {
|
||||
title: "Design System/Button",
|
||||
component: Button,
|
||||
tags: ["autodocs"],
|
||||
args: { onClick: fn() },
|
||||
} satisfies Meta<typeof Button>
|
||||
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
const ButtonContainer: React.FC<React.PropsWithChildren> = (props) => {
|
||||
const { children } = props
|
||||
|
||||
return <div className="flex gap-4">{children}</div>
|
||||
}
|
||||
|
||||
export const Component: Story = {
|
||||
args: {
|
||||
children: "Button",
|
||||
},
|
||||
play: async ({ canvasElement, args }) => {
|
||||
const canvas = within(canvasElement)
|
||||
await userEvent.click(canvas.getByText("Button"))
|
||||
await expect(args.onClick).toHaveBeenCalled()
|
||||
},
|
||||
}
|
||||
|
||||
export const Variants: Story = {
|
||||
render: (args) => {
|
||||
return (
|
||||
<ButtonContainer>
|
||||
<Button variant="solid" {...args}>
|
||||
Solid
|
||||
</Button>
|
||||
<Button variant="outline" {...args}>
|
||||
Outline
|
||||
</Button>
|
||||
</ButtonContainer>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
export const Sizes: Story = {
|
||||
render: (args) => {
|
||||
return (
|
||||
<ButtonContainer>
|
||||
<Button size="small" {...args}>
|
||||
Small
|
||||
</Button>
|
||||
<Button size="medium" {...args}>
|
||||
Medium
|
||||
</Button>
|
||||
<Button size="large" {...args}>
|
||||
Large
|
||||
</Button>
|
||||
</ButtonContainer>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
export const Disabled: Story = {
|
||||
render: (args) => {
|
||||
return (
|
||||
<ButtonContainer>
|
||||
<Button variant="solid" disabled {...args}>
|
||||
Solid
|
||||
</Button>
|
||||
<Button variant="outline" disabled {...args}>
|
||||
Outline
|
||||
</Button>
|
||||
</ButtonContainer>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
export const Loading: Story = {
|
||||
render: (args) => {
|
||||
return (
|
||||
<ButtonContainer>
|
||||
<Button variant="solid" isLoading {...args}>
|
||||
Solid
|
||||
</Button>
|
||||
<Button variant="outline" isLoading {...args}>
|
||||
Outline
|
||||
</Button>
|
||||
</ButtonContainer>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
export const Icons: Story = {
|
||||
render: (args) => {
|
||||
return (
|
||||
<ButtonContainer>
|
||||
<Button leftIcon={<FaCheck size={18} />} {...args}>
|
||||
Left Icon
|
||||
</Button>
|
||||
<Button rightIcon={<FaCheck size={18} />} {...args}>
|
||||
Right Icon
|
||||
</Button>
|
||||
</ButtonContainer>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
export const Link: Story = {
|
||||
args: {
|
||||
children: "Link",
|
||||
href: "/",
|
||||
},
|
||||
play: async ({ canvasElement, args }) => {
|
||||
const canvas = within(canvasElement)
|
||||
await expect(
|
||||
canvas.getByRole("link", {
|
||||
name: "Link",
|
||||
}),
|
||||
).toHaveAttribute("href", args.href)
|
||||
},
|
||||
}
|
||||
|
||||
export const LinkWithIcons: Story = {
|
||||
args: {
|
||||
href: "/",
|
||||
},
|
||||
render: (args) => {
|
||||
return (
|
||||
<ButtonContainer>
|
||||
<Button leftIcon={<FaCheck size={18} />} {...(args as ButtonLinkProps)}>
|
||||
Link Left Icon
|
||||
</Button>
|
||||
<Button
|
||||
rightIcon={<FaCheck size={18} />}
|
||||
{...(args as ButtonLinkProps)}
|
||||
>
|
||||
Link Right Icon
|
||||
</Button>
|
||||
</ButtonContainer>
|
||||
)
|
||||
},
|
||||
}
|
||||
111
packages/ui/src/design/Button/Button.tsx
Normal file
111
packages/ui/src/design/Button/Button.tsx
Normal file
@ -0,0 +1,111 @@
|
||||
import { classNames } from "@repo/config-tailwind/classNames"
|
||||
import { Link as NextLink } from "@repo/i18n/navigation"
|
||||
import type { VariantProps } from "cva"
|
||||
import { cva } from "cva"
|
||||
|
||||
import { Spinner } from "../Spinner/Spinner"
|
||||
import { Ripple } from "./Ripple"
|
||||
|
||||
const buttonVariants = cva({
|
||||
base: "relative inline-flex items-center justify-center overflow-hidden rounded-md text-base font-semibold transition duration-150 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
variants: {
|
||||
variant: {
|
||||
solid: "bg-primary hover:bg-primary/80 text-white",
|
||||
outline:
|
||||
"dark:border-primary-dark/60 dark:text-primary-dark dark:hover:border-primary-dark border-primary/60 text-primary hover:border-primary hover:bg-gray border bg-transparent dark:hover:bg-transparent",
|
||||
},
|
||||
size: {
|
||||
small: "h-9 rounded-md px-3",
|
||||
medium: "h-10 px-4 py-2",
|
||||
large: "h-11 rounded-md px-8",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "solid",
|
||||
size: "medium",
|
||||
},
|
||||
})
|
||||
|
||||
interface ButtonBaseProps extends VariantProps<typeof buttonVariants> {
|
||||
leftIcon?: React.ReactNode
|
||||
rightIcon?: React.ReactNode
|
||||
disabled?: boolean
|
||||
isLoading?: boolean
|
||||
}
|
||||
|
||||
interface ButtonElementProps extends React.ComponentPropsWithoutRef<"button"> {}
|
||||
interface LinkElementProps
|
||||
extends React.ComponentPropsWithoutRef<typeof NextLink> {}
|
||||
|
||||
export type ButtonLinkProps = ButtonBaseProps &
|
||||
LinkElementProps & { href: string }
|
||||
export type ButtonButtonProps = ButtonBaseProps &
|
||||
ButtonElementProps & { href?: never }
|
||||
|
||||
export type ButtonProps = ButtonButtonProps | ButtonLinkProps
|
||||
|
||||
/**
|
||||
* Buttons allow users to take actions, and make choices, with a single click.
|
||||
* @param props
|
||||
* @returns
|
||||
*/
|
||||
export const Button: React.FC<ButtonProps> = (props) => {
|
||||
const rippleColor =
|
||||
props.variant === "outline" ? "rgb(30, 64, 175)" : "rgb(229, 231, 235)"
|
||||
|
||||
if (typeof props.href === "string") {
|
||||
const { variant, size, leftIcon, rightIcon, className, children, ...rest } =
|
||||
props
|
||||
|
||||
return (
|
||||
<NextLink
|
||||
className={classNames(buttonVariants({ variant, size }), className)}
|
||||
{...rest}
|
||||
>
|
||||
{leftIcon != null ? <span className="mr-2">{leftIcon}</span> : null}
|
||||
<span>{children}</span>
|
||||
{rightIcon != null ? <span className="ml-2">{rightIcon}</span> : null}
|
||||
|
||||
<Ripple color={rippleColor} />
|
||||
</NextLink>
|
||||
)
|
||||
}
|
||||
|
||||
const {
|
||||
variant,
|
||||
size,
|
||||
leftIcon,
|
||||
rightIcon,
|
||||
className,
|
||||
isLoading = false,
|
||||
disabled = false,
|
||||
children,
|
||||
...rest
|
||||
} = props
|
||||
|
||||
const isDisabled = disabled || isLoading
|
||||
|
||||
const leftIconElement = isLoading ? (
|
||||
<Spinner size={18} className="text-inherit dark:text-inherit" />
|
||||
) : (
|
||||
leftIcon
|
||||
)
|
||||
|
||||
return (
|
||||
<button
|
||||
className={classNames(buttonVariants({ variant, size }), className)}
|
||||
disabled={isDisabled}
|
||||
{...rest}
|
||||
>
|
||||
{leftIconElement != null ? (
|
||||
<span className="mr-2">{leftIconElement}</span>
|
||||
) : null}
|
||||
<span>{children}</span>
|
||||
{rightIcon != null && !isLoading ? (
|
||||
<span className="ml-2">{rightIcon}</span>
|
||||
) : null}
|
||||
|
||||
<Ripple color={rippleColor} />
|
||||
</button>
|
||||
)
|
||||
}
|
||||
91
packages/ui/src/design/Button/Ripple.tsx
Normal file
91
packages/ui/src/design/Button/Ripple.tsx
Normal file
@ -0,0 +1,91 @@
|
||||
"use client"
|
||||
|
||||
import { useLayoutEffect, useState } from "react"
|
||||
|
||||
const useDebouncedRippleCleanUp = (
|
||||
rippleCount: number,
|
||||
duration: number,
|
||||
cleanUpFunction: () => void,
|
||||
): void => {
|
||||
useLayoutEffect(() => {
|
||||
let bounce: ReturnType<typeof setTimeout> | undefined
|
||||
if (rippleCount > 0) {
|
||||
clearTimeout(bounce)
|
||||
|
||||
bounce = setTimeout(() => {
|
||||
cleanUpFunction()
|
||||
clearTimeout(bounce)
|
||||
}, duration * 4)
|
||||
}
|
||||
|
||||
return () => {
|
||||
return clearTimeout(bounce)
|
||||
}
|
||||
}, [rippleCount, duration, cleanUpFunction])
|
||||
}
|
||||
|
||||
export interface RippleProps {
|
||||
/**
|
||||
* The color of the ripple effect.
|
||||
*/
|
||||
color?: string
|
||||
|
||||
/**
|
||||
* The duration of the ripple animation in milliseconds.
|
||||
*/
|
||||
duration?: number
|
||||
}
|
||||
|
||||
interface RippleItem {
|
||||
x: number
|
||||
y: number
|
||||
size: number
|
||||
}
|
||||
|
||||
export const Ripple: React.FC<RippleProps> = (props) => {
|
||||
const { duration = 1_200, color = "rgb(229, 231, 235)" } = props
|
||||
const [rippleArray, setRippleArray] = useState<RippleItem[]>([])
|
||||
|
||||
useDebouncedRippleCleanUp(rippleArray.length, duration, () => {
|
||||
setRippleArray([])
|
||||
})
|
||||
|
||||
const addRipple: React.MouseEventHandler<HTMLDivElement> = (event) => {
|
||||
const rippleContainer = event.currentTarget.getBoundingClientRect()
|
||||
const size =
|
||||
rippleContainer.width > rippleContainer.height
|
||||
? rippleContainer.width
|
||||
: rippleContainer.height
|
||||
const x = event.pageX - rippleContainer.x - size / 2
|
||||
const y = event.pageY - rippleContainer.y - size / 2
|
||||
const newRipple: RippleItem = {
|
||||
x,
|
||||
y,
|
||||
size,
|
||||
}
|
||||
setRippleArray([...rippleArray, newRipple])
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="absolute inset-0" onMouseDown={addRipple}>
|
||||
{rippleArray.map((ripple, index) => {
|
||||
return (
|
||||
<span
|
||||
key={"span" + index}
|
||||
className="absolute rounded-full opacity-75"
|
||||
style={{
|
||||
transform: "scale(0)",
|
||||
backgroundColor: color,
|
||||
animationName: "ripple",
|
||||
animationDuration: `${duration}ms`,
|
||||
top: ripple.y,
|
||||
left: ripple.x,
|
||||
width: ripple.size,
|
||||
height: ripple.size,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user