Skip to content

Commit 52ea830

Browse files
Daniele-rolliDaniele-rolli
committed
chore: updating docs and styling
1 parent d0f00d7 commit 52ea830

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+4688
-4166
lines changed

‎.DS_Store‎

-8 KB
Binary file not shown.

‎_includes/nav.html‎

Lines changed: 48 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -38,56 +38,54 @@
3838
</div>
3939
</div>
4040
</div>
41-
<script>
42-
// Function to toggle dark mode
43-
function toggleDarkMode() {
44-
const html = document.documentElement;
45-
const icon = document.getElementById("dark-mode-icon");
46-
47-
if (html.classList.contains("dark")) {
48-
html.classList.remove("dark");
49-
icon.classList.remove("fa-sun");
50-
icon.classList.add("fa-moon");
51-
localStorage.setItem("theme", "light"); // Save preference
52-
} else {
53-
html.classList.add("dark");
54-
icon.classList.remove("fa-moon");
55-
icon.classList.add("fa-sun");
56-
localStorage.setItem("theme", "dark"); // Save preference
57-
}
41+
</nav>
42+
<script>
43+
function setDarkMode(isDark) {
44+
const html = document.documentElement;
45+
const icon = document.getElementById("dark-mode-icon");
46+
47+
if (isDark) {
48+
html.classList.add("dark");
49+
icon.classList.add("fa-sun");
50+
icon.classList.remove("fa-moon");
51+
} else {
52+
html.classList.remove("dark");
53+
icon.classList.add("fa-moon");
54+
icon.classList.remove("fa-sun");
5855
}
59-
60-
// Apply saved dark mode preference on page load
61-
document.addEventListener("DOMContentLoaded", () => {
62-
const html = document.documentElement;
63-
const icon = document.getElementById("dark-mode-icon");
64-
const savedTheme = localStorage.getItem("theme");
65-
66-
if (savedTheme === "dark") {
67-
html.classList.add("dark");
68-
icon.classList.add("fa-sun");
69-
icon.classList.remove("fa-moon");
70-
} else {
71-
html.classList.remove("dark");
72-
icon.classList.add("fa-moon");
73-
icon.classList.remove("fa-sun");
74-
}
75-
});
76-
77-
function openSearch() {
78-
const searchContainer = document.getElementById("search-container");
79-
if (searchContainer) {
80-
searchContainer.classList.remove("hidden");
81-
} else {
82-
console.error("Search container not found");
83-
}
56+
}
57+
58+
function toggleDarkMode() {
59+
const isDark = document.documentElement.classList.contains("dark");
60+
const newTheme = isDark ? "light" : "dark";
61+
localStorage.setItem("theme", newTheme);
62+
setDarkMode(!isDark);
63+
}
64+
65+
// Apply theme on first load
66+
document.addEventListener("DOMContentLoaded", () => {
67+
const savedTheme = localStorage.getItem("theme");
68+
69+
if (savedTheme) {
70+
setDarkMode(savedTheme === "dark");
71+
} else {
72+
// Use system preference if no saved theme
73+
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
74+
setDarkMode(prefersDark);
8475
}
76+
});
8577

86-
document.addEventListener("keydown", (event) => {
87-
if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
88-
event.preventDefault(); // Prevent default browser action
89-
openSearch();
90-
}
91-
});
92-
</script>
93-
</nav>
78+
function openSearch() {
79+
const searchContainer = document.getElementById("search-container");
80+
if (searchContainer) {
81+
searchContainer.classList.remove("hidden");
82+
}
83+
}
84+
85+
document.addEventListener("keydown", (event) => {
86+
if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
87+
event.preventDefault();
88+
openSearch();
89+
}
90+
});
91+
</script>

‎_layouts/default.html‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
<link href="{{ site.baseurl }}/assets/main.css" rel="stylesheet" />
88
<script src="https://cdn.jsdelivr.net/npm/simple-jekyll-search@latest/dest/simple-jekyll-search.min.js"></script>
99
<link
10+
href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css"
1011
rel="stylesheet"
11-
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
1212
/>
1313
</head>
1414
<body class="bg-white text-gray-800 dark:bg-neutral-900">
@@ -42,13 +42,18 @@ <h1 class="text-4xl font-bold dark:text-neutral-100">Beaver Docs</h1>
4242
{% for category in categories %}
4343
<!-- Category Section -->
4444
<div class="flex flex-col">
45-
<h2 class="text-xl dark:text-neutral-100 font-semibold mb-4">
45+
<h2
46+
class="text-xl dark:text-neutral-100 font-semibold mb-4 flex items-center gap-2"
47+
>
48+
<i
49+
class="{% case category %} {% when 'Beaver Notes' %}ri-edit-line {% when 'Beaver Notes (DEV)' %}ri-terminal-line {% when 'Beaver Pocket' %}ri-device-line {% when 'Beaver Pocket (DEV)' %}ri-braces-line {% else %}ri-folder-line {% endcase %}"
50+
></i>
4651
{{ category }}
4752
</h2>
4853
<div class="overflow-auto">
4954
<ul class="space-y-2">
50-
{% assign posts_in_category = site.posts | where: "category", category | sort: "position" %}
51-
{% for post in posts_in_category %}
55+
{% assign posts_in_category = site.posts | where: "category",
56+
category | sort: "position" %} {% for post in posts_in_category %}
5257
<li>
5358
<a href="{{ post.url }}" class="text-amber-400 hover:underline">
5459
{{ post.title }}

‎_layouts/post.html‎

Lines changed: 36 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
<link href="{{ site.baseurl }}/assets/main.css" rel="stylesheet" />
88
<script src="https://cdn.jsdelivr.net/npm/simple-jekyll-search@latest/dest/simple-jekyll-search.min.js"></script>
99
<link
10+
href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css"
1011
rel="stylesheet"
11-
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
1212
/>
1313
<style>
1414
/* Enable smooth scrolling */
@@ -17,30 +17,43 @@
1717
}
1818
</style>
1919
</head>
20-
<body class="bg-white text-gray-800 dark:bg-neutral-900">
20+
<body class="bg-white text-neutral-800 dark:bg-neutral-900">
2121
{% include nav.html %}
2222
<div class="flex flex-col lg:flex-row">
2323
<!-- Left Sidebar for Category Navigation -->
2424
<aside
25-
class="w-full lg:w-1/5 p-4 border-b lg:border-r border-gray-300 dark:border-neutral-700"
25+
class="w-full lg:w-1/5 lg:border-r border-b dark:border-neutral-700"
2626
>
27-
<h2 class="text-lg font-bold mb-4 dark:text-neutral-100">
28-
Posts in {{ page.category }}
29-
</h2>
30-
<ul>
31-
{% assign filtered_posts = site.posts | where: "category",
32-
page.category %} {% assign sorted_posts = filtered_posts | sort:
33-
"position" %} {% for post in sorted_posts %}
34-
<li class="mb-2">
35-
<a
36-
href="{{ post.url }}"
37-
class="dark:hover:bg-neutral-700 hover:bg-neutral-100 dark:text-neutral-100 p-2 w-full rounded-lg {{ post.url == page.url ? 'font-bold' : '' }}"
38-
>
39-
{{ post.title }}
40-
</a>
41-
</li>
42-
{% endfor %}
43-
</ul>
27+
<div
28+
class="p-4 border-b dark:border-neutral-700 flex items-center space-x-2"
29+
>
30+
<button
31+
class="text-neutral-600 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-white transition"
32+
aria-label="Go Back"
33+
href="/"
34+
>
35+
<i class="ri-arrow-left-line text-xl"></i>
36+
</button>
37+
<h2 class="text-xl font-semibold dark:text-white text-neutral-800">
38+
{{ page.category }}
39+
</h2>
40+
</div>
41+
<div class="p-4">
42+
<ul>
43+
{% assign filtered_posts = site.posts | where: "category",
44+
page.category %} {% assign sorted_posts = filtered_posts | sort:
45+
"position" %} {% for post in sorted_posts %}
46+
<li class="mb-2">
47+
<a
48+
href="{{ post.url }}"
49+
class="dark:hover:bg-neutral-700 hover:bg-neutral-100 dark:text-neutral-100 p-2 w-full rounded-lg {{ post.url == page.url ? 'font-bold' : '' }}"
50+
>
51+
{{ post.title }}
52+
</a>
53+
</li>
54+
{% endfor %}
55+
</ul>
56+
</div>
4457
</aside>
4558

4659
<!-- Main Content Area -->
@@ -97,14 +110,14 @@ <h1 class="text-4xl dark:text-neutral-100 font-bold">
97110
<h2 class="text-lg font-semibold dark:text-neutral-100 mb-4">
98111
On This Page
99112
</h2>
100-
<nav class="border-b pb-6 mb-6">
113+
<nav class="border-b dark:border-neutral-700 pb-6 mb-6">
101114
<ul id="table-of-contents" class="space-y-2"></ul>
102115
</nav>
103116
<a
104-
class="text-md font-bolder"
117+
class="text-md font-bolder text-neutral-800 dark:text-neutral-200"
105118
href="https://github.com/Beaver-Notes/Beaver-Docs/tree/main/_posts"
106119
>
107-
<i class="fa-brands fa-github"></i>
120+
<i class="ri-github-fill"></i>
108121
Edit this page
109122
</a>
110123
</aside>

‎_posts/Beaver Notes/Dev/2025-01-03-How-to-contribute.md‎

Lines changed: 45 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,62 @@
11
---
22
layout: post
3-
title: How to contribute
3+
title: How to Contribute
44
details: Everyone can make a difference, even if you're not a programmer.
55
category: Beaver Notes (DEV)
66
position: 1
77
---
88

9-
Beaver Notes is a 100% open-source indie project, enjoyed by people all around the world. Our mission is to deliver a privacy-focused, easy-to-use note-taking app, and you can be part of our mission even if you are not a programmer. There are many ways to contribute to an open-source project.
9+
Beaver Notes is a fully open-source indie project. Our mission is to deliver a privacy-focused, easy-to-use note-taking app, and you can be part of it, even if you’re not a programmer.
1010

11-
# Documentation
11+
## 💻 Code Contributions
1212

13-
One of the biggest ways to contribute is by helping with our documentation. We are a small project, and the time spent documenting new features is time not spent working on them. Therefore, your help in documenting the app is truly appreciated, even if you’re not a developer. In the following guide, [Contributing to the Docs]({% post_url 2025-01-05-Contribute-to-docs %}), we’ll show you how you can assist in documenting the app and making it easier for everyone to use.
13+
Code is at the heart of Beaver. You can:
1414

15-
# Blog Posts
15+
- Fix bugs
16+
- Work on GitHub issues
17+
- Implement roadmap features
1618

17-
A blog is one of the best means for a project to grow and update its users on the work that is being done. Contributing to the blog means getting in touch with the developers to see what’s new, writing release articles, sharing tips and tricks, etc. In the [following guide]({% post_url 2025-01-06-Contribute-to-blog %}), we’ll show you how you can contribute to the blog.
19+
👉 [Start contributing to code]({% post_url 2025-02-13-Code-Contributions %})
1820

19-
# Code Contributions
21+
## 🌍 Translations
2022

21-
Code is obviously a great way to contribute to the project. By hunting down bugs, fixing issues open on GitHub, or implementing new features from the roadmap, you’ll be sure to leave your mark on Beaver and its growth. Follow [this guide]({% post_url 2025-02-13-Code-Contributions %}), to set up the environment and get started.
23+
Beaver is used worldwide, help us reach more people by translating the desktop app.
24+
You can start a brand-new translation or improve an existing one using **Traduora**.
2225

23-
# Translation
26+
👉 [Help translate Beaver Notes]({% post_url 2025-01-06-translate %})
2427

25-
Beaver is enjoyed by people all around the world. You can help us reach even more people by helping us translate the desktop app. You could be the first to translate the app or update an existing translation. All translations are done using an open-source platform called Traduora. Check out [this page]({% post_url 2025-01-06-translate %}) to contribute to translations.
28+
## 📖 Documentation
2629

27-
# UI and UX
30+
Helping with documentation is one of the biggest ways you can contribute.
31+
Every new feature needs clear docs, and your help means more time for developers to code.
2832

29-
If you happen to have an eye for design, you can contribute by opening an issue on GitHub, contributing to the code, or submitting your design proposal at [danieleorolli@proton.me](mailto:danieleorolli@proton.me).
33+
👉 [Start contributing to the Docs]({% post_url 2025-01-05-Contribute-to-docs %})
34+
35+
## 📝 Blog Posts
36+
37+
The blog keeps users updated and helps the project grow. You can contribute by:
38+
39+
- Writing release articles
40+
- Sharing tips & tricks
41+
- Interviewing contributors
42+
43+
👉 [Start contributing to the Blog]({% post_url 2025-01-06-Contribute-to-blog %})
44+
45+
## 🎨 UI & UX
46+
47+
Got an eye for design? You can:
48+
49+
- Open a GitHub issue with ideas
50+
- Submit design proposals on [GitHub Discussions](https://github.com/orgs/Beaver-Notes/discussions) or [Reddit](https://www.reddit.com/r/BeaverNotes/).
51+
- Contribute code to improve UI/UX
52+
53+
👉 Submit your proposal on [GitHub Discussions](https://github.com/orgs/Beaver-Notes/discussions) or [Reddit](https://www.reddit.com/r/BeaverNotes/)
54+
55+
## 🚀 First Steps
56+
Not sure where to begin?
57+
- Join the community on [Reddit](https://www.reddit.com/r/BeaverNotes/) or [GitHub Discussions](https://github.com/orgs/Beaver-Notes/discussions)
58+
- Browse our [Good First Issues](https://github.com/Beaver-Notes/Beaver-Notes/labels/good%20first%20issue)
59+
- Pick a small issue or translation task
60+
- Say hello and ask questions, we’re here to help
61+
62+
Every contribution, big or small, helps Beaver Notes grow 💖

‎_posts/Beaver Notes/Dev/2025-01-05-Contribute-to-docs.md‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,16 @@ category: Beaver Notes (DEV)
66
position: 3
77
---
88

9-
Beaver's Documentation website is built using Jekyll, a static site generator. This makes collaboration straightforward, even if you’re not a developer. There are two main ways to contribute to the docs:
9+
Beaver’s docs run on **Jekyll**, making collaboration easy even if you’re not a developer. You can contribute in two ways:
1010

11-
1. [Contributing using your computer](#heading-0)
12-
2. [Using GitHub code spaces](#heading-10)
11+
1. [On your computer](#heading-0)
12+
2. [Using GitHub Codespaces](#heading-10)
1313

14-
The first involves getting your hands dirty. If you have some experience or are willing to install some programs and tinker a bit, this step is for you. If you prefer a straightforward approach, the second option is better. Feel free to skip to the step you prefer.
1514

16-
> **If you're not ready to create a post or make technical edits, you can still contribute by simply proofreading and suggesting improvements.**
1715

1816
# Contributing Using Your Computer
1917

20-
Before we get started, you'll need to install a couple of packages. To set everything up, check out the [Jekyll docs](https://jekyllrb.com/docs/installation/) and return when you're ready. You'll also need a GitHub account. If you don't have one yet, you can create one by following this guide: [Creating an account on GitHub](https://docs.github.com/en/get-started/start-your-journey/creating-an-account-on-github). Once you're ready, you can begin by forking the repository
18+
Before starting, you'll need to install a couple of packages. Check out the [Jekyll docs](https://jekyllrb.com/docs/installation/) and return when you're ready. You'll also need a GitHub account. If you don't have one yet, you can create one by following this guide: [Creating an account on GitHub](https://docs.github.com/en/get-started/start-your-journey/creating-an-account-on-github). Once you're ready, you can begin by forking the repository.
2119

2220
## 1. **Fork the Repository**
2321

‎_posts/Beaver Notes/Dev/2025-01-06-Contribute-to-blog.md‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,24 @@ category: Beaver Notes (DEV)
66
position: 4
77
---
88

9-
Beaver's Blog website, like the docs, is built using Jekyll, a static site generator. To contribute to the blog, you don't need to be an artist, blogger, or developer.
109

11-
1. [Contributing using your computer](#heading-0)
12-
2. [Using GitHub Codespaces](#heading-10)
10+
Beaver’s Blog, like the docs, is built with **Jekyll** (a static site generator). You don’t need to be a developer or a designer to contribute, just a willingness to share ideas!
1311

14-
The first involves getting your hands dirty. If you have some experience or are willing to install some programs and tinker a bit, this step is for you. If you prefer a straightforward approach, the second option is better. Feel free to skip to the step you prefer.
12+
## ⚡ Quick Start (TL;DR)
1513

16-
> **If you're not ready to create a post or make technical edits, you can still contribute by simply proofreading and suggesting improvements.**
14+
1. Fork [Beaver Blog on GitHub](https://github.com/Beaver-Notes/Beaver-Blog).
15+
2. Create a new branch for your post.
16+
3. Add a file in `_posts/YYYY/` called `YYYY-MM-DD-title.md`.
17+
4. Write your post + add artwork (simple or detailed).
18+
5. Open a Pull Request 🚀.
1719

18-
# Contributing Using Your Computer
20+
If you prefer not to install anything, skip setup and use **[GitHub Codespaces](#using-github-codespaces-to-contribute)**.
1921

20-
Before we get started, you'll need to install a couple of packages. To set everything up, check out the [Jekyll docs](https://jekyllrb.com/docs/installation/) and return when you're ready. You'll also need a GitHub account. If you don't have one yet, you can create one by following this guide: [Creating an account on GitHub](https://docs.github.com/en/get-started/start-your-journey/creating-an-account-on-github). Once you're ready, you can begin by forking the repository.
22+
> 💡 Not ready to write posts? You can still help by proofreading and suggesting edits
23+
24+
# 🖥️ Contributing Using Your Computer
25+
26+
Before starting, you'll need to install a couple of packages. Check out the [Jekyll docs](https://jekyllrb.com/docs/installation/) and return when you're ready. You'll also need a GitHub account. If you don't have one yet, you can create one by following this guide: [Creating an account on GitHub](https://docs.github.com/en/get-started/start-your-journey/creating-an-account-on-github). Once you're ready, you can begin by forking the repository.
2127

2228
## 1. **Fork the Repository**
2329

@@ -70,11 +76,12 @@ excerpt_separator: <!--more-->
7076
---
7177
```
7278

73-
- Every post needs to have its artwork. It doesn't need to be anything complicated—it can be as easy as an icon with an inner shadow or something more intricate. You are allowed to reach out if you need any help. You can use any software, from [Figma]() to [Gimp](). Every artwork must be saved under the folder `assets/img/YYYY` and called `YYYY-MM-DD.png`. Here are two examples of artworks from current articles on the blog:
79+
> Every post should include an artwork image. It can be simple (like an icon with a shadow) or more detailed, whatever you’re comfortable with. Feel free to ask for help if needed. You can use any tool (e.g. Figma or Gimp). Save the file in assets/img/YYYY as YYYY-MM-DD.png.
7480
81+
Here are two examples from current articles:
7582
<p class="text-sm text-neutral-600 dark:text-neutral-200 text-center"><img src="{{base.url}}/assets/img/docs/contributing-blog/example-1.png" alt="Image">Easy artwork example</p>
7683

77-
<p class="text-sm text-neutral-600 dark:text-neutral-200 text-center"><img src="{{base.url}}/assets/img/docs/contributing-blog/example-2.png" alt="Image">Complicated artwork example</p>
84+
<p class="text-sm text-neutral-600 dark:text-neutral-200 text-center"><img src="{{base.url}}/assets/img/docs/contributing-blog/example-2.png" alt="Image">Complex artwork example</p>
7885

7986
#### **Adding Images**
8087

0 commit comments

Comments
 (0)