Skip to content

Commit 8956a5f

Browse files
suvanbanerjeesuvanbanerjee
committed
blog guidelines
1 parent 4b53636 commit 8956a5f

File tree

6 files changed

+345
-8
lines changed

6 files changed

+345
-8
lines changed

‎public/assets/examples/blog-template.md‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
---
2+
title: "Your Blog Post Title"
3+
excerpt: "A brief summary of your blog post (1-2 sentences)"
4+
coverImage: "/assets/blog/common/cover.png"
5+
date: "YYYY-MM-DDT00:00:00.000Z"
6+
author:
7+
name: "Your Name"
8+
picture: "https://github.com/yourusername.png"
9+
ogImage:
10+
url: "/assets/blog/common/cover.png"
11+
---
12+
13+
# Main Heading of Your Blog Post
14+
15+
Introduction paragraph. Explain what the blog post is about and why it's relevant to the OpenVoiceOS community.
16+
17+
## Section Heading
18+
19+
Content for this section. You can include:
20+
21+
- Bullet points
22+
- For key information
23+
- That you want to highlight
24+
25+
### Subsection Heading
26+
27+
More detailed content. You can include code examples:
28+
29+
```python
30+
# Example Python code
31+
def hello_ovos():
32+
print("Hello, OpenVoiceOS!")
33+
34+
hello_ovos()
35+
```
36+
37+
## Another Section
38+
39+
You can include links to [relevant resources](https://openvoiceos.github.io/ovos-technical-manual).
40+
41+
### Including Images
42+
43+
You can include images like this:
44+
45+
![Image description](/assets/blog/your-post/image.jpg)
46+
47+
## Conclusion
48+
49+
Sum up your blog post and include any call to action or next steps for readers.
50+
51+
## References
52+
53+
- [Reference 1](https://example.com)
54+
- [Reference 2](https://example.com)

‎src/app/_components/header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export default function Header() {
4949
label: "Documentation",
5050
},
5151
{ href: "https://www.openvoiceos.org/team", label: "Team" },
52-
{ href: "#", label: "Blogs" },
52+
{ href: "/", label: "Blogs" },
5353
{ href: "https://www.openvoiceos.org/contribution", label: "Contribution" },
5454
];
5555

‎src/app/globals.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
.dark {
1212
--foreground: #ffffff;
1313
--background: #111;
14-
--accent: #ff6b6b;
14+
--accent: #ff2727;
1515
}
1616

1717
@layer base {

‎src/app/newblog/page.tsx‎

Lines changed: 268 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,268 @@
1+
import Container from '../_components/container'
2+
import React from 'react'
3+
4+
export default function Contribute() {
5+
return (
6+
<>
7+
<Container>
8+
<div className="max-w-4xl mx-auto mt-16 pt-8 pb-16">
9+
<h1 className="text-4xl font-bold tracking-tighter leading-tight md:pr-8 mb-8 text-center">
10+
How to Contribute a Blog Post
11+
</h1>
12+
13+
<div className="markdown prose prose-lg dark:prose-invert max-w-none">
14+
<div className="bg-red-50 dark:bg-red-900/20 p-6 rounded-lg mb-8 border-l-4 border-red-500 shadow-md">
15+
<p className="text-lg font-medium">
16+
To submit a blog post, you need to have a GitHub account and basic knowledge of Git and Markdown. You dont need to be expert or a developer, a copule of YouTube videos will be enough to get you started!
17+
</p>
18+
</div>
19+
20+
<h2 className="text-2xl font-semibold mt-6 mb-3 flex items-center">
21+
<span className="inline-block bg-mono-100 dark:bg-mono-800 rounded-full w-8 h-8 flex items-center justify-center mr-2">1</span>
22+
Fork the Repository
23+
</h2>
24+
<p className="mb-4">
25+
Start by forking the <a href="https://github.com/OpenVoiceOS/ovos-blogs" className="text-blue-600 hover:underline dark:text-blue-400" target="_blank" rel="noopener noreferrer">OpenVoiceOS blog repository</a> to your GitHub account.
26+
</p>
27+
28+
<h2 className="text-2xl font-semibold mt-6 mb-3 flex items-center">
29+
<span className="inline-block bg-mono-100 dark:bg-mono-800 rounded-full w-8 h-8 flex items-center justify-center mr-2">2</span>
30+
Create a New Branch
31+
</h2>
32+
<p className="mb-4">
33+
Clone your forked repository locally and create a new branch for your blog post:
34+
</p>
35+
<pre className="bg-mono-100 p-4 rounded-md overflow-x-auto mb-4 dark:bg-mono-800 dark:text-mono-200 shadow-inner border border-mono-200 dark:border-mono-700">
36+
<code>
37+
git clone https://github.com/YOUR-USERNAME/ovos-blogs.git{'\n'}
38+
cd ovos-blogs{'\n'}
39+
git checkout -b blog/your-blog-post-name
40+
</code>
41+
</pre>
42+
43+
<h2 className="text-2xl font-semibold mt-6 mb-3 flex items-center">
44+
<span className="inline-block bg-mono-100 dark:bg-mono-800 rounded-full w-8 h-8 flex items-center justify-center mr-2">3</span>
45+
Create Your Blog Post
46+
</h2>
47+
<p className="mb-4">
48+
Create a new Markdown file in the <code className="bg-mono-100 px-2 py-1 rounded dark:bg-mono-800 dark:text-mono-200">_posts</code> directory. You can <a href="/assets/examples/blog-template.md" download className="text-blue-600 hover:underline dark:text-blue-400">download our template</a> to get started. The filename should follow this format:
49+
</p>
50+
<pre className="bg-mono-100 p-4 rounded-md overflow-x-auto mb-4 dark:bg-mono-800 dark:text-mono-200 shadow-inner border border-mono-200 dark:border-mono-700">
51+
<code>
52+
YYYY-MM-DD-title-of-your-post.md
53+
</code>
54+
</pre>
55+
<p className="mb-4">
56+
For example: <code className="bg-mono-100 px-2 py-1 rounded dark:bg-mono-800 dark:text-mono-200">2025-07-01-implementing-new-voice-features.md</code>
57+
</p>
58+
59+
<h2 className="text-2xl font-semibold mt-6 mb-3 flex items-center">
60+
<span className="inline-block bg-mono-100 dark:bg-mono-800 rounded-full w-8 h-8 flex items-center justify-center mr-2">4</span>
61+
Format Your Blog Post
62+
</h2>
63+
<p className="mb-4">
64+
Each blog post requires a YAML front matter section followed by your markdown content. Here's the required format:
65+
</p>
66+
<pre className="bg-mono-100 p-4 rounded-md overflow-x-auto mb-4 dark:bg-mono-800 dark:text-mono-200 shadow-inner border border-mono-200 dark:border-mono-700">
67+
<code>
68+
---{'\n'}
69+
title: "Your Blog Post Title"{'\n'}
70+
excerpt: "A brief summary of your blog post (1-2 sentences)"{'\n'}
71+
coverImage: "/assets/blog/common/cover.png"{'\n'}
72+
date: "YYYY-MM-DDT00:00:00.000Z"{'\n'}
73+
author:{'\n'}
74+
{' '}name: "Your Name"{'\n'}
75+
{' '}picture: "https://github.com/yourusername.png"{'\n'}
76+
ogImage:{'\n'}
77+
{' '}url: "/assets/blog/common/cover.png"{'\n'}
78+
---{'\n\n'}
79+
Your markdown content goes here...
80+
</code>
81+
</pre>
82+
83+
<p className="mb-4">
84+
Note: For the author picture, you can use your GitHub profile picture URL or another appropriate image URL.
85+
</p>
86+
87+
<h2 className="text-2xl font-semibold mt-6 mb-3 flex items-center">
88+
<span className="inline-block bg-mono-100 dark:bg-mono-800 rounded-full w-8 h-8 flex items-center justify-center mr-2">5</span>
89+
Adding Images to Your Blog Post
90+
</h2>
91+
<div className="bg-yellow-50 dark:bg-yellow-900/20 p-6 rounded-lg mb-6 border-l-4 border-yellow-500 shadow-md">
92+
<h3 className="text-xl font-medium mb-2 text-yellow-700 dark:text-yellow-300">Image Directory Structure</h3>
93+
<p className="mb-3">
94+
When adding images to your blog post, follow these guidelines:
95+
</p>
96+
<ol className="list-decimal pl-6 mb-4 space-y-2">
97+
<li> Dimensions of images should be 16:9 (use 1920x1080 or 1280x720) for best results.</li>
98+
<li>Create a directory for your blog post images at: <code className="bg-mono-100 px-2 py-1 rounded dark:bg-mono-800 dark:text-mono-200">/public/assets/blog/BLOG_NAME/</code></li>
99+
<li>Where <code className="bg-mono-100 px-2 py-1 rounded dark:bg-mono-800 dark:text-mono-200">BLOG_NAME</code> should match your blog post name (e.g., <code className="bg-mono-100 px-2 py-1 rounded dark:bg-mono-800 dark:text-mono-200">custom-wake-words</code>)</li>
100+
<li>Place all your images inside this directory (e.g., <code className="bg-mono-100 px-2 py-1 rounded dark:bg-mono-800 dark:text-mono-200">diagram.png</code>, <code className="bg-mono-100 px-2 py-1 rounded dark:bg-mono-800 dark:text-mono-200">screenshot.jpg</code>)</li>
101+
</ol>
102+
<h3 className="text-xl font-medium mb-2 text-yellow-700 dark:text-yellow-300">Referencing Images in Markdown</h3>
103+
<p className="mb-3">
104+
To include images in your blog post, use the following markdown syntax:
105+
</p>
106+
<pre className="bg-mono-100 p-4 rounded-md overflow-x-auto mb-2 dark:bg-mono-800 dark:text-mono-200 shadow-inner border border-mono-200 dark:border-mono-700">
107+
<code>
108+
![Alt text for the image](/assets/blog/BLOG_NAME/image-filename.png)
109+
</code>
110+
</pre>
111+
<p className="mb-0">
112+
For example: <code className="bg-mono-100 px-2 py-1 rounded dark:bg-mono-800 dark:text-mono-200">![Wake Word Training Process](/assets/blog/custom-wake-words/training-diagram.png)</code>
113+
</p>
114+
</div>
115+
<div className="bg-green-50 dark:bg-green-900/20 p-6 rounded-lg mb-6 border-l-4 border-green-500 shadow-md">
116+
<h3 className="text-xl font-medium mb-2 text-green-700 dark:text-green-300">Image Best Practices</h3>
117+
<ul className="list-disc pl-6 space-y-2">
118+
<li>Use descriptive filenames for your images (e.g., <code className="bg-mono-100 px-2 py-1 rounded dark:bg-mono-800 dark:text-mono-200">wake-word-training-flow.png</code>)</li>
119+
<li>Optimize images for web (compress images to reduce file size)</li>
120+
<li>Use PNG format for diagrams, screenshots, or images with transparency</li>
121+
<li>Use JPG format for photos</li>
122+
<li>Provide meaningful alt text for accessibility</li>
123+
</ul>
124+
</div>
125+
126+
<h2 className="text-2xl font-semibold mt-6 mb-3 flex items-center">
127+
<span className="inline-block bg-mono-100 dark:bg-mono-800 rounded-full w-8 h-8 flex items-center justify-center mr-2">6</span>
128+
Co-authors (Optional)
129+
</h2>
130+
<p className="mb-4">
131+
If your blog post has co-authors, you can include them like this:
132+
</p>
133+
<pre className="bg-mono-100 p-4 rounded-md overflow-x-auto mb-4 dark:bg-mono-800 dark:text-mono-200 shadow-inner border border-mono-200 dark:border-mono-700">
134+
<code>
135+
coauthors:{'\n'}
136+
{' '}- name: "Co-Author Name"{'\n'}
137+
{' '}picture: "https://github.com/coauthorusername.png"{'\n'}
138+
{' '}- name: "Another Co-Author"{'\n'}
139+
{' '}picture: "https://github.com/anothercoauthor.png"
140+
</code>
141+
</pre>
142+
143+
<h2 className="text-2xl font-semibold mt-6 mb-3 flex items-center">
144+
<span className="inline-block bg-mono-100 dark:bg-mono-800 rounded-full w-8 h-8 flex items-center justify-center mr-2">7</span>
145+
Markdown Formatting
146+
</h2>
147+
<p className="mb-4">
148+
You can use standard Markdown syntax in your blog post:
149+
</p>
150+
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
151+
<div className="bg-mono-50 p-4 rounded-md dark:bg-mono-800">
152+
<h3 className="text-lg font-medium mb-2">Text Formatting</h3>
153+
<ul className="list-disc pl-6 space-y-2">
154+
<li><code className="bg-mono-100 px-2 py-1 rounded dark:bg-mono-700"># Heading 1</code></li>
155+
<li><code className="bg-mono-100 px-2 py-1 rounded dark:bg-mono-700">## Heading 2</code></li>
156+
<li><code className="bg-mono-100 px-2 py-1 rounded dark:bg-mono-700">**Bold Text**</code></li>
157+
<li><code className="bg-mono-100 px-2 py-1 rounded dark:bg-mono-700">*Italic Text*</code></li>
158+
<li><code className="bg-mono-100 px-2 py-1 rounded dark:bg-mono-700">`Code`</code></li>
159+
</ul>
160+
</div>
161+
<div className="bg-mono-50 p-4 rounded-md dark:bg-mono-800">
162+
<h3 className="text-lg font-medium mb-2">Elements</h3>
163+
<ul className="list-disc pl-6 space-y-2">
164+
<li><code className="bg-mono-100 px-2 py-1 rounded dark:bg-mono-700">[Link](URL)</code></li>
165+
<li><code className="bg-mono-100 px-2 py-1 rounded dark:bg-mono-700">![Alt text](image URL)</code></li>
166+
<li><code className="bg-mono-100 px-2 py-1 rounded dark:bg-mono-700">- Bullet point</code></li>
167+
<li><code className="bg-mono-100 px-2 py-1 rounded dark:bg-mono-700">1. Numbered item</code></li>
168+
<li><code className="bg-mono-100 px-2 py-1 rounded dark:bg-mono-700">```language\ncode\n```</code></li>
169+
</ul>
170+
</div>
171+
</div>
172+
173+
<h2 className="text-2xl font-semibold mt-6 mb-3 flex items-center">
174+
<span className="inline-block bg-mono-100 dark:bg-mono-800 rounded-full w-8 h-8 flex items-center justify-center mr-2">8</span>
175+
Example Blog Post
176+
</h2>
177+
<p className="mb-4">
178+
Here's a complete example of a blog post with image references:
179+
</p>
180+
<pre className="bg-mono-100 p-4 rounded-md overflow-x-auto mb-4 dark:bg-mono-800 dark:text-mono-200 shadow-inner border border-mono-200 dark:border-mono-700">
181+
<code>
182+
---{'\n'}
183+
title: "Implementing Custom Wake Words in OpenVoiceOS"{'\n'}
184+
excerpt: "Learn how to create and implement your own custom wake words in OpenVoiceOS for a personalized voice assistant experience."{'\n'}
185+
coverImage: "/assets/blog/custom-wake-words/header-image.jpg"{'\n'}
186+
date: "2025-07-01T00:00:00.000Z"{'\n'}
187+
author:{'\n'}
188+
{' '}name: "Jane Developer"{'\n'}
189+
{' '}picture: "https://github.com/janedeveloper.png"{'\n'}
190+
ogImage:{'\n'}
191+
{' '}url: "/assets/blog/custom-wake-words/social-card.jpg"{'\n'}
192+
---{'\n\n'}
193+
# Implementing Custom Wake Words in OpenVoiceOS{'\n\n'}
194+
Wake words are the phrases that activate your voice assistant, like "Hey Google" or "Alexa." With OpenVoiceOS, you can create your own custom wake words, allowing for a more personalized experience.{'\n\n'}
195+
![Wake Word Visualization](/assets/blog/custom-wake-words/wake-word-viz.png){'\n\n'}
196+
## Why Custom Wake Words Matter{'\n\n'}
197+
Custom wake words provide several benefits:{'\n\n'}
198+
- **Personalization**: Choose a name that feels natural to you{'\n'}
199+
- **Privacy**: Use a unique phrase that won't be triggered accidentally{'\n'}
200+
- **Branding**: For businesses, use your brand name as the wake word{'\n\n'}
201+
## Getting Started{'\n\n'}
202+
To implement a custom wake word in OpenVoiceOS, you'll need to follow these steps:{'\n\n'}
203+
1. Collect audio samples{'\n'}
204+
2. Train your wake word model{'\n'}
205+
3. Integrate the model with OpenVoiceOS{'\n\n'}
206+
![Process Diagram](/assets/blog/custom-wake-words/process-diagram.png){'\n\n'}
207+
Let's dive deeper into each of these steps.{'\n\n'}
208+
### Collecting Audio Samples{'\n\n'}
209+
The first step is to collect audio samples of your wake word. You'll need at least 100 recordings of different people saying your wake word in various environments.{'\n\n'}
210+
```bash{'\n'}
211+
# Example command to record wake word samples{'\n'}
212+
ovos-record-wake-word --name "my-wake-word" --samples 100{'\n'}
213+
```{'\n\n'}
214+
![Recording Interface](/assets/blog/custom-wake-words/recording-interface.jpg){'\n\n'}
215+
### Training Your Wake Word Model{'\n\n'}
216+
Once you have your audio samples, you can train your wake word model using the OpenVoiceOS training tools.{'\n\n'}
217+
And so on...
218+
</code>
219+
</pre>
220+
221+
<h2 className="text-2xl font-semibold mt-6 mb-3 flex items-center">
222+
<span className="inline-block bg-mono-100 dark:bg-mono-800 rounded-full w-8 h-8 flex items-center justify-center mr-2">9</span>
223+
Submit Your Pull Request
224+
</h2>
225+
<p className="mb-4">
226+
After creating your blog post and adding any images, commit your changes and push to your forked repository:
227+
</p>
228+
<pre className="bg-mono-100 p-4 rounded-md overflow-x-auto mb-4 dark:bg-mono-800 dark:text-mono-200 shadow-inner border border-mono-200 dark:border-mono-700">
229+
<code>
230+
# Add your blog post{'\n'}
231+
git add _posts/YYYY-MM-DD-your-post-title.md{'\n\n'}
232+
# Add any images you created{'\n'}
233+
git add public/assets/blog/your-blog-name/*{'\n\n'}
234+
git commit -m "Add blog post: Your Post Title"{'\n'}
235+
git push origin blog/your-blog-post-name
236+
</code>
237+
</pre>
238+
<p className="mb-4">
239+
Then, go to the original OpenVoiceOS blog repository and create a Pull Request from your branch.
240+
</p>
241+
242+
<h2 className="text-2xl font-semibold mt-6 mb-3 flex items-center">
243+
<span className="inline-block bg-mono-100 dark:bg-mono-800 rounded-full w-8 h-8 flex items-center justify-center mr-2">10</span>
244+
Review Process
245+
</h2>
246+
<p className="mb-4">
247+
After submitting your PR, the OpenVoiceOS team will review your blog post. They might suggest changes or improvements before merging your contribution.
248+
</p>
249+
<p className="mb-4">
250+
Once approved and merged, your blog post will be published on the OpenVoiceOS blog!
251+
</p>
252+
253+
<h2 className="text-2xl font-semibold mt-6 mb-3">Additional Tips</h2>
254+
<div className="bg-purple-50 dark:bg-purple-900/20 p-6 rounded-lg mb-4 border-l-4 border-purple-500 shadow-md">
255+
<ul className="list-disc pl-6 mb-0 space-y-2">
256+
<li className="mb-1">Keep your blog post focused on topics relevant to OpenVoiceOS, voice assistants, or open-source technology.</li>
257+
<li className="mb-1">Include images where appropriate to make your post more engaging.</li>
258+
<li className="mb-1">Proofread your post carefully before submitting.</li>
259+
<li className="mb-1">If you're unsure about the topic or content, feel free to open an issue first to discuss your blog post idea.</li>
260+
<li className="mb-1">Preview your markdown in a markdown editor before submitting to ensure proper formatting.</li>
261+
</ul>
262+
</div>
263+
</div>
264+
</div>
265+
</Container>
266+
</>
267+
)
268+
}

0 commit comments

Comments
 (0)