https://docs.bearblog.devʕ ꈍᴥꈍʔ Bear docs2024-03-29T01:43:05.699461+00:00docshiddenpython-feedgenOfficial documentation for Bear Blog
Bear is the perfect blogging platform. It does everything you need, and nothing more.
You can make feature suggestions o...https://docs.bearblog.dev/neat-bear-features/Neat Bear features2023-11-23T07:19:58.277254+00:00docshidden<p>Listed below are a few neat features of Bear that you probably don't know about.</p>
<h2 id="dashboard-styling">Dashboard styling</h2>
<p>You can now modify the way your dashboard looks in <strong>Settings > Advanced settings</strong>.</p>
<p>For example, adding the following CSS:</p>
<div class="highlight"><pre><span></span>body {
max-width: 1024px;
}
button {
padding: 10px 15px;
background-color: #eceff4;
border-radius: 10px;
border: 0;
}
</pre></div>
<p>will make your dashboard look like this:
<img alt="Bear dash" src="https://bear-images.sfo2.cdn.digitaloceanspaces.com/docs-1700207291-0.png"/></p>
<hr/>
<h2 id="embedded-post-lists">Embedded post lists</h2>
<p>You can now add filtered post lists to any content on your blog. This is covered in detail <a href="/embedding-blog-post-lists/">here</a>.</p>
<div class="highlight"><pre><span></span>**Last 3 posts**
{{ posts|limit:3 }}
</pre></div>
<p><strong>Last 3 posts</strong>
<ul class="embedded blog-posts">
<li>
<span>
<i>
<time datetime="2023-11-17">
17 Nov, 2023
</time>
</i>
</span>
<a href="/neat-bear-features/">Neat Bear features</a>
</li>
<li>
<span>
<i>
<time datetime="2023-11-07">
07 Nov, 2023
</time>
</i>
</span>
<a href="/embedding-blog-post-lists/">Embedding blog post lists</a>
</li>
<li>
<span>
<i>
<time datetime="2023-11-01">
01 Nov, 2023
</time>
</i>
</span>
<a href="/changelog/">Changelog</a>
</li>
</ul></p>
<hr/>
<h2 id="mathematical-notation">Mathematical notation</h2>
<p>You can now write mathematical notation in LaTeX in any content field. This is covered in more detail <a href="/mathematical-notation/">here</a>.</p>
<div class="highlight"><pre><span></span>**Energy conversion in the Sun** $$4 \, \text{H} \rightarrow \text{He} + 2 \, \text{e}^+ + 2 \, \nu_e + \gamma$$
</pre></div>
<p><strong>Energy conversion in the Sun</strong> <math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"><mrow><mn>4</mn><mo>,</mo><mtext>H</mtext><mo>→</mo><mtext>He</mtext><mo>+</mo><mn>2</mn><mo>,</mo><msup><mtext>e</mtext><mo>+</mo></msup><mo>+</mo><mn>2</mn><mo>,</mo><msub><mi>ν</mi><mi>e</mi></msub><mo>+</mo><mi>γ</mi></mrow></math></p>
<hr/>
<h2 id="edit-robots-txt">Edit robots.txt</h2>
<p>You can now edit your robots.txt file in <strong>Settings > Advanced settings</strong>.
For example, you can block ChatGPT from accessing your blog by adding:</p>
<div class="highlight"><pre><span></span>User-agent: GPTBot
Disallow: /
</pre></div>
<hr/>
<h2 id="insert-blog-and-post-attributes">Insert blog and post attributes</h2>
<p>The following attributes can be inserted in any blog or post content:</p>
<div class="highlight"><pre><span></span>{{ blog_title }}
{{ blog_description }}
{{ blog_link }}
{{ blog_created_date }}
{{ blog_last_modified }} ago
{{ blog_last_posted }} ago
{{ post_title }}
{{ post_description }}
{{ post_link }}
{{ post_published_date }}
{{ post_last_modified }} ago
</pre></div>
<p>Eg:</p>
<div class="highlight"><pre><span></span>This post **({{ post_title }})** was last edited **{{ post_last_modified }} ago**.
</pre></div>
<p>This post <strong>({{ post_title }})</strong> was last edited <strong>{{ post_last_modified }} ago</strong>.</p>
<hr/>
<h2 id="existing-tag-list">Existing tag list</h2>
<p>To make looking up tags that have already been used on the blog easier, in the <strong>► Attributes</strong> above the post text area the <strong>tags</strong> example will be populated with tags that have been previously used on your blog.</p>
<hr/>
<p>Feel free to suggest more features <a href="https://bear.nolt.io">here</a></p>
2023-11-17T06:27:08.641846+00:00https://docs.bearblog.dev/embedding-blog-post-lists/Embedding blog post lists2024-03-05T09:04:29.032537+00:00docshidden<p>The blog post embed allows you to inject a list of blog posts into your content dynamically. This can be done in any content on your blog including posts, the homepage, and footer. This feature supports various filters and settings that you can apply to customize the output.</p>
<h2 id="syntax">Syntax</h2>
<p>The base syntax for embedding posts is as follows:</p>
<div class="highlight"><pre><span></span>{{ posts }}
</pre></div>
<h2 id="optional-filters-and-parameters">Optional Filters and Parameters</h2>
<p>Additional filters and parameters can be appended to the base syntax following a separator <code>|</code>.</p>
<h3 id="1-tag-filters-posts-by-a-specific-tag">1. <code>tag</code>: Filters posts by a specific tag.</h3>
<div class="highlight"><pre><span></span>## Posts with tag "news"
{{ posts|tag:"news" }}
</pre></div>
<h3 id="2-limit-limits-the-number-of-posts-to-display">2. <code>limit</code>: Limits the number of posts to display.</h3>
<div class="highlight"><pre><span></span>## Check out my last 5 posts
{{ posts|limit:5 }}
</pre></div>
<h3 id="3-order-orders-the-posts-by-publication-date-posts-are-descending-by-default">3. <code>order</code>: Orders the posts by publication date. Posts are descending by default.</h3>
<div class="highlight"><pre><span></span>## Ordered ascending
{{ posts|order:asc }}
## Or descending
{{ posts|order:desc }}
</pre></div>
<h3 id="4-description-controls-the-visibility-of-the-meta-description-of-the-post">4. <code>description</code>: Controls the visibility of the <code>meta_description</code> of the post.</h3>
<div class="highlight"><pre><span></span>## Show excerpt
{{ posts|description:True }}
</pre></div>
<p><em>Note: Additional CSS work will be required to format the blog list with descriptions correctly. The embedded posts have a classname of <code>embed</code>.</em></p>
<h3 id="5-content-controls-the-visibility-of-the-full-content-of-the-post">5. <code>content</code>: Controls the visibility of the full content of the post.</h3>
<div class="highlight"><pre><span></span>## Show full post content
{{ posts|limit:3|content:True }}
</pre></div>
<p><em>Note: Content can only be active on pages and the homepage (not posts). Additional CSS work will be required to format the blog list with descriptions correctly. The embedded posts have a classname of <code>embed</code>. The following CSS will do 90% of the work in styling the content:</em></p>
<div class="highlight"><pre><span></span>ul.embedded.blog-posts li {
display: flex;
flex-flow: row wrap;
}
</pre></div>
<p><strong>Patterns can be combined in any order:</strong></p>
<div class="highlight"><pre><span></span>{{ posts|tag:"tagname"|limit:5|order:asc|description:True }}
</pre></div>
<p><strong>Spaces are optional around the filter delimiters. The following examples are equivalent:</strong></p>
<div class="highlight"><pre><span></span>{{ posts|limit:5 }}
{{ posts | limit:5 }}
</pre></div>
<h2 id="here-s-an-example-running-on-this-site">Here's an example running on this site:</h2>
<div class="highlight"><pre><span></span>### Most recent posts
{{ posts|limit:5 }}
</pre></div>
<h3 id="most-recent-posts">Most recent posts</h3>
<p>
<ul class="embedded blog-posts">
<li>
<span>
<i>
<time datetime="2023-11-17">
17 Nov, 2023
</time>
</i>
</span>
<a href="/neat-bear-features/">Neat Bear features</a>
<div><p>Listed below are a few neat features of Bear that you probably don't know about.</p>
<h2 id="dashboard-styling">Dashboard styling</h2>
<p>You can now modify the way your dashboard looks in <strong>Settings > Advanced settings</strong>.</p>
<p>For example, adding the following CSS:</p>
<div class="highlight"><pre><span></span>body {
max-width: 1024px;
}
button {
padding: 10px 15px;
background-color: #eceff4;
border-radius: 10px;
border: 0;
}
</pre></div>
<p>will make your dashboard look like this:
<img alt="Bear dash" src="https://bear-images.sfo2.cdn.digitaloceanspaces.com/docs-1700207291-0.png"/></p>
<hr/>
<h2 id="embedded-post-lists">Embedded post lists</h2>
<p>You can now add filtered post lists to any content on your blog. This is covered in detail <a href="/embedding-blog-post-lists/">here</a>.</p>
<div class="highlight"><pre><span></span>**Last 3 posts**
{{ posts|limit:3 }}
</pre></div>
<p><strong>Last 3 posts</strong>
<ul class="embedded blog-posts">
<li>
<span>
<i>
<time datetime="2023-11-17">
17 Nov, 2023
</time>
</i>
</span>
<a href="/neat-bear-features/">Neat Bear features</a>
</li>
<li>
<span>
<i>
<time datetime="2023-11-07">
07 Nov, 2023
</time>
</i>
</span>
<a href="/embedding-blog-post-lists/">Embedding blog post lists</a>
</li>
<li>
<span>
<i>
<time datetime="2023-11-01">
01 Nov, 2023
</time>
</i>
</span>
<a href="/changelog/">Changelog</a>
</li>
</ul></p>
<hr/>
<h2 id="mathematical-notation">Mathematical notation</h2>
<p>You can now write mathematical notation in LaTeX in any content field. This is covered in more detail <a href="/mathematical-notation/">here</a>.</p>
<div class="highlight"><pre><span></span>**Energy conversion in the Sun** $$4 \, \text{H} \rightarrow \text{He} + 2 \, \text{e}^+ + 2 \, \nu_e + \gamma$$
</pre></div>
<p><strong>Energy conversion in the Sun</strong> <math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"><mrow><mn>4</mn><mo>,</mo><mtext>H</mtext><mo>→</mo><mtext>He</mtext><mo>+</mo><mn>2</mn><mo>,</mo><msup><mtext>e</mtext><mo>+</mo></msup><mo>+</mo><mn>2</mn><mo>,</mo><msub><mi>ν</mi><mi>e</mi></msub><mo>+</mo><mi>γ</mi></mrow></math></p>
<hr/>
<h2 id="edit-robots-txt">Edit robots.txt</h2>
<p>You can now edit your robots.txt file in <strong>Settings > Advanced settings</strong>.
For example, you can block ChatGPT from accessing your blog by adding:</p>
<div class="highlight"><pre><span></span>User-agent: GPTBot
Disallow: /
</pre></div>
<hr/>
<h2 id="insert-blog-and-post-attributes">Insert blog and post attributes</h2>
<p>The following attributes can be inserted in any blog or post content:</p>
<div class="highlight"><pre><span></span>ʕ ꈍᴥꈍʔ Bear docs
https://docs.bearblog.dev
21 Aug, 2022
1 week ago
4 months, 1 week ago
{{ post_title }}
{{ post_description }}
{{ post_link }}
{{ post_published_date }}
{{ post_last_modified }} ago
</pre></div>
<p>Eg:</p>
<div class="highlight"><pre><span></span>This post **({{ post_title }})** was last edited **{{ post_last_modified }} ago**.
</pre></div>
<p>This post <strong>(Neat Bear features)</strong> was last edited <strong>4 months ago</strong>.</p>
<hr/>
<h2 id="existing-tag-list">Existing tag list</h2>
<p>To make looking up tags that have already been used on the blog easier, in the <strong>► Attributes</strong> above the post text area the <strong>tags</strong> example will be populated with tags that have been previously used on your blog.</p>
<hr/>
<p>Feel free to suggest more features <a href="https://bear.nolt.io">here</a></p>
</div>
</li>
<li>
<span>
<i>
<time datetime="2023-11-07">
07 Nov, 2023
</time>
</i>
</span>
<a href="/embedding-blog-post-lists/">Embedding blog post lists</a>
<div><p>The blog post embed allows you to inject a list of blog posts into your content dynamically. This can be done in any content on your blog including posts, the homepage, and footer. This feature supports various filters and settings that you can apply to customize the output.</p>
<h2 id="syntax">Syntax</h2>
<p>The base syntax for embedding posts is as follows:</p>
<div class="highlight"><pre><span></span>{{ posts }}
</pre></div>
<h2 id="optional-filters-and-parameters">Optional Filters and Parameters</h2>
<p>Additional filters and parameters can be appended to the base syntax following a separator <code>|</code>.</p>
<h3 id="1-tag-filters-posts-by-a-specific-tag">1. <code>tag</code>: Filters posts by a specific tag.</h3>
<div class="highlight"><pre><span></span>## Posts with tag "news"
{{ posts|tag:"news" }}
</pre></div>
<h3 id="2-limit-limits-the-number-of-posts-to-display">2. <code>limit</code>: Limits the number of posts to display.</h3>
<div class="highlight"><pre><span></span>## Check out my last 5 posts
{{ posts|limit:5 }}
</pre></div>
<h3 id="3-order-orders-the-posts-by-publication-date-posts-are-descending-by-default">3. <code>order</code>: Orders the posts by publication date. Posts are descending by default.</h3>
<div class="highlight"><pre><span></span>## Ordered ascending
{{ posts|order:asc }}
## Or descending
{{ posts|order:desc }}
</pre></div>
<h3 id="4-description-controls-the-visibility-of-the-meta-description-of-the-post">4. <code>description</code>: Controls the visibility of the <code>meta_description</code> of the post.</h3>
<div class="highlight"><pre><span></span>## Show excerpt
{{ posts|description:True }}
</pre></div>
<p><em>Note: Additional CSS work will be required to format the blog list with descriptions correctly. The embedded posts have a classname of <code>embed</code>.</em></p>
<h3 id="5-content-controls-the-visibility-of-the-full-content-of-the-post">5. <code>content</code>: Controls the visibility of the full content of the post.</h3>
<div class="highlight"><pre><span></span>## Show full post content
{{ posts|limit:3|content:True }}
</pre></div>
<p><em>Note: Content can only be active on pages and the homepage (not posts). Additional CSS work will be required to format the blog list with descriptions correctly. The embedded posts have a classname of <code>embed</code>. The following CSS will do 90% of the work in styling the content:</em></p>
<div class="highlight"><pre><span></span>ul.embedded.blog-posts li {
display: flex;
flex-flow: row wrap;
}
</pre></div>
<p><strong>Patterns can be combined in any order:</strong></p>
<div class="highlight"><pre><span></span>{{ posts|tag:"tagname"|limit:5|order:asc|description:True }}
</pre></div>
<p><strong>Spaces are optional around the filter delimiters. The following examples are equivalent:</strong></p>
<div class="highlight"><pre><span></span>{{ posts|limit:5 }}
{{ posts | limit:5 }}
</pre></div>
<h2 id="here-s-an-example-running-on-this-site">Here's an example running on this site:</h2>
<div class="highlight"><pre><span></span>### Most recent posts
{{ posts|limit:5 }}
</pre></div>
<h3 id="most-recent-posts">Most recent posts</h3>
<p>
<ul class="embedded blog-posts">
<li>
<span>
<i>
<time datetime="2023-11-17">
17 Nov, 2023
</time>
</i>
</span>
<a href="/neat-bear-features/">Neat Bear features</a>
</li>
<li>
<span>
<i>
<time datetime="2023-11-07">
07 Nov, 2023
</time>
</i>
</span>
<a href="/embedding-blog-post-lists/">Embedding blog post lists</a>
</li>
<li>
<span>
<i>
<time datetime="2023-11-01">
01 Nov, 2023
</time>
</i>
</span>
<a href="/changelog/">Changelog</a>
</li>
<li>
<span>
<i>
<time datetime="2023-05-23">
23 May, 2023
</time>
</i>
</span>
<a href="/date-format/">Date format</a>
</li>
<li>
<span>
<i>
<time datetime="2022-09-08">
08 Sep, 2022
</time>
</i>
</span>
<a href="/migrate/">Migrating to bear</a>
</li>
</ul></p>
</div>
</li>
<li>
<span>
<i>
<time datetime="2023-11-01">
01 Nov, 2023
</time>
</i>
</span>
<a href="/changelog/">Changelog</a>
<div><p>The following only logs functional changes. Minor bug fixes, patches and updates are not logged here, but can be viewed in the GitHub repository <a href="https://github.com/HermanMartinus/bearblog/commits/master/" target="_blank">commit history</a> (if you're very interested).</p>
<h3 id="08-march-2024">08 March 2024</h3>
<ul>
<li>Separated Post and Page logic for brevity</li>
</ul>
<h3 id="07-march-2024">07 March 2024</h3>
<ul>
<li>Post previews are now token protected, as opposed to just using <code>?preview=True</code> flag</li>
</ul>
<h3 id="27-february-2024">27 February 2024</h3>
<ul>
<li>Added the ability to manage multiple blogs on one user account</li>
</ul>
<h3 id="19-february-2024">19 February 2024</h3>
<ul>
<li>Added custom footer content (which allows the addition of your own scripts, etc) for the dashboard. This can be found in Account > Customise dashboard</li>
</ul>
<h3 id="04-january-2024">04 January 2024</h3>
<ul>
<li>Started work on auth tokens</li>
<li>Added RSS subscriber count to analytics</li>
</ul>
<h3 id="23-november-2023">23 November 2023</h3>
<ul>
<li>Added <code>blog_last_posted</code> attribute</li>
<li>Dashboard uses <code>uid</code> instead of <code>slug</code> to handle "new"</li>
<li>Cleanup Blog domain functions</li>
</ul>
<h3 id="21-november-2023">21 November 2023</h3>
<ul>
<li>Fixes:<ul>
<li>Localisation bleeding</li>
<li>XSS injection in frontmatter</li>
<li>Only show relevant tags in posts</li>
</ul>
</li>
</ul>
<h3 id="17-november-2023">17 November 2023</h3>
<ul>
<li>Added the ability to <a href="/neat-bear-features/#insert-blog-and-post-attributes">reference blog and post attributes in content</a></li>
</ul>
<h3 id="09-november-2023">09 November 2023</h3>
<ul>
<li>Removed all public instances of <code>pk</code> and replaced them with random <code>uid</code></li>
<li>Removed all dashboard instances of <code>pk</code> and replaced them with <code>slug</code></li>
</ul>
<h3 id="08-november-2023">08 November 2023</h3>
<ul>
<li><strong>robots.txt</strong> editor in Blog dashboard > Settings > Advanced settings</li>
<li>Customise dashboard CSS in Blog dashboard > Settings > Advanced settings</li>
<li>Directives editor relocated to Blog dashboard > Settings > Header and footer directives</li>
<li>Refactored tags to be native instead of using <code>taggit</code></li>
</ul>
<h3 id="07-november-2023">07 November 2023</h3>
<ul>
<li><a href="/embedding-blog-post-lists/">Ability to embed filtered post lists in page content</a></li>
<li>Cleaned out and refactored old code</li>
</ul>
<h3 id="01-november-2023">01 November 2023</h3>
<ul>
<li>Automated daily <code>hash_id</code> scrubbing</li>
<li>Started this Changelog</li>
</ul>
</div>
</li>
<li>
<span>
<i>
<time datetime="2023-05-23">
23 May, 2023
</time>
</i>
</span>
<a href="/date-format/">Date format</a>
<div><p>The date format can be updated in your dashboard using the following attribute:</p>
<div class="highlight"><pre><span></span>date_format: d M, Y
</pre></div>
<p>In the examples above, here's what each formatting character represents:</p>
<p>Sure, here's the information reformatted with an example for each format string:</p>
<ul>
<li><strong><code>d</code></strong>: Day of the month, 2 digits with leading zeros. <code>03</code></li>
<li><strong><code>m</code></strong>: Numeric representation of a month, with leading zeros. <code>05</code> for May.</li>
<li><strong><code>Y</code></strong>: A full numeric representation of a year, 4 digits. <code>2023</code></li>
<li><strong><code>F</code></strong>: A full textual representation of a month, such as January or March. <code>May</code></li>
<li><strong><code>j</code></strong>: Day of the month without leading zeros. <code>3</code> for the 3rd day of the month.</li>
<li><strong><code>D</code></strong>: A textual representation of a day, three letters. <code>Mon</code> for Monday.</li>
<li><strong><code>l</code></strong> (lowercase 'L'): A full textual representation of the day of the week. <code>Monday</code></li>
<li><strong><code>S</code></strong>: English ordinal suffix for the day of the month, 2 characters (st, nd, rd or th. Works well with <code>j</code>).<code>rd</code> for the 3rd day of the month.</li>
<li><strong><code>M</code></strong>: A short textual representation of a month, three letters. <code>May</code> for May.</li>
</ul>
<p>Here are some examples of date formats:</p>
<ul>
<li><strong><code>d, M Y</code></strong>: 22, May 2023</li>
<li><strong><code>Y-m-d</code></strong>: 2023-05-22</li>
<li><strong><code>m/d/Y</code></strong>: 05/22/2023</li>
<li><strong><code>d/m/Y</code></strong>: 22/05/2023</li>
<li><strong><code>F j, Y</code></strong>: May 22, 2023</li>
<li><strong><code>D, M j, Y</code></strong>: Mon, May 22, 2023</li>
<li><strong><code>l, F j, Y</code></strong>: Monday, May 22, 2023</li>
<li><strong><code>jS F, Y</code></strong>: 22nd May, 2023</li>
<li><strong><code>d-M-Y</code></strong>: 22-May-2023</li>
</ul>
</div>
</li>
<li>
<span>
<i>
<time datetime="2022-09-08">
08 Sep, 2022
</time>
</i>
</span>
<a href="/migrate/">Migrating to bear</a>
<div><p>Congratulations! You've decided to move your blog to Bear!</p>
<p>There are a few useful tools at your disposal to make sure you don't lose any traffic during the migration process, or have broken links in the future. You'll want to keep your existing traffic even if the blog structure is different.</p>
<p>One important caveat: while it is very easy to populate your new blog, there are no automated tools for doing this such as a bulk uploader. This is due to the many different standards across existing platforms from Substack to Blogger.</p>
<h2 id="setting-up-your-new-blog">Setting up your new blog</h2>
<p>To ensure you don't have down-time during the migration process, don't move your custom domain over to Bear until you're happy that your new blog is set up and all of your content has been moved over. During that time you can run on your <code>https://your-blog.bearblog.dev</code> domain.</p>
<h2 id="moving-posts-over">Moving posts over</h2>
<p>The easiest way to move existing content to Bear is to create new posts and copy the text content from your existing web pages one at a time<sup class="footnote-ref" id="fnref-1"><a href="#fn-1">1</a></sup>. You can mark them up as you see fit during this process. If you have a backup of your files as HTML documents, it's as easy as pasting the HTML as your blog content as Bear handles both markdown and HTML natively.</p>
<p>However, if you'd like to keep them all as Markdown instead of HTML (since Markdown is easy to edit), you can convert your posts using <a href="https://codebeautify.org/html-to-markdown" target="_blank">HTML-to-Markdown</a>.</p>
<p>Ensure you set your <a href="/post#published_date">published_date</a> to the original date of publication for the post.</p>
<h3 id="using-the-post-template">Using the post template</h3>
<p>If each of your blog posts are similar, it may be worth setting up the structure in your post template (found on the posts section of your dashboard). Removing the boilerplate content and setting your own parameters will allow you to move posts over more efficiently.</p>
<h3 id="links">Links</h3>
<p>Different blogging platforms have different structures for links. Bear uses a flat structure (eg: <code>https://your.blog/post-title/</code> where Wordpress could have an obscure structure (eg: <code>https://your.blog/2021/02/13/post-title/</code>). Since we don't want to lose the traffic that is already going to <code>2021/02/13/post-title/</code> we can forward all of that traffic to your new post at <code>post-title</code> by using an <a href="/post#alias">alias</a>.</p>
<div class="highlight"><pre><span></span>title: Post title
link: post-title
alias: 2021/02/13/post-title
</pre></div>
<p>This ensures that existing traffic going to the alias does not result in a 404 error.</p>
<h3 id="images">Images</h3>
<p>To ensure your images aren't broken when you move your domain name, make sure to re-upload images for each blog post.</p>
<h3 id="upvotes">Upvotes</h3>
<p>There is currently no way to migrate upvotes from other platforms to Bear.</p>
<h3 id="rss-alias">RSS alias</h3>
<p>If you've migrated from a blogging platform with a different feed path, eg: <code>https://example.com/rss/index.xml</code> you'll want to create an alias in <strong>Settings > Advanced settings > RSS alias</strong> in the dashboard to redirect the old feed without breaking existing subscriptions.</p>
<p>In the above example the RSS Alias should be set to <code>rss/index.xml</code></p>
<h2 id="ready">Ready!</h2>
<p>Once everything looks good and is running at <code>https://your-blog.bearblog.dev</code> it's time to move your domain over. This is done by modifying your DNS records and is covered in the <a href="/custom-domains/">custom domain docs</a>.</p>
<hr/>
<section class="footnotes">
<ol>
<li id="fn-1"><p>This may seem arduous, but past experience has put this at roughly 30 minutes for a 60 post blog.<a class="footnote" href="#fnref-1">↩</a></p></li>
</ol>
</section>
</div>
</li>
</ul></p>
2023-11-07T09:27:25.066454+00:00https://docs.bearblog.dev/changelog/Changelog2024-03-08T07:48:24.939221+00:00docshidden<p>The following only logs functional changes. Minor bug fixes, patches and updates are not logged here, but can be viewed in the GitHub repository <a href="https://github.com/HermanMartinus/bearblog/commits/master/" target="_blank">commit history</a> (if you're very interested).</p>
<h3 id="08-march-2024">08 March 2024</h3>
<ul>
<li>Separated Post and Page logic for brevity</li>
</ul>
<h3 id="07-march-2024">07 March 2024</h3>
<ul>
<li>Post previews are now token protected, as opposed to just using <code>?preview=True</code> flag</li>
</ul>
<h3 id="27-february-2024">27 February 2024</h3>
<ul>
<li>Added the ability to manage multiple blogs on one user account</li>
</ul>
<h3 id="19-february-2024">19 February 2024</h3>
<ul>
<li>Added custom footer content (which allows the addition of your own scripts, etc) for the dashboard. This can be found in Account > Customise dashboard</li>
</ul>
<h3 id="04-january-2024">04 January 2024</h3>
<ul>
<li>Started work on auth tokens</li>
<li>Added RSS subscriber count to analytics</li>
</ul>
<h3 id="23-november-2023">23 November 2023</h3>
<ul>
<li>Added <code>blog_last_posted</code> attribute</li>
<li>Dashboard uses <code>uid</code> instead of <code>slug</code> to handle "new"</li>
<li>Cleanup Blog domain functions</li>
</ul>
<h3 id="21-november-2023">21 November 2023</h3>
<ul>
<li>Fixes:<ul>
<li>Localisation bleeding</li>
<li>XSS injection in frontmatter</li>
<li>Only show relevant tags in posts</li>
</ul>
</li>
</ul>
<h3 id="17-november-2023">17 November 2023</h3>
<ul>
<li>Added the ability to <a href="/neat-bear-features/#insert-blog-and-post-attributes">reference blog and post attributes in content</a></li>
</ul>
<h3 id="09-november-2023">09 November 2023</h3>
<ul>
<li>Removed all public instances of <code>pk</code> and replaced them with random <code>uid</code></li>
<li>Removed all dashboard instances of <code>pk</code> and replaced them with <code>slug</code></li>
</ul>
<h3 id="08-november-2023">08 November 2023</h3>
<ul>
<li><strong>robots.txt</strong> editor in Blog dashboard > Settings > Advanced settings</li>
<li>Customise dashboard CSS in Blog dashboard > Settings > Advanced settings</li>
<li>Directives editor relocated to Blog dashboard > Settings > Header and footer directives</li>
<li>Refactored tags to be native instead of using <code>taggit</code></li>
</ul>
<h3 id="07-november-2023">07 November 2023</h3>
<ul>
<li><a href="/embedding-blog-post-lists/">Ability to embed filtered post lists in page content</a></li>
<li>Cleaned out and refactored old code</li>
</ul>
<h3 id="01-november-2023">01 November 2023</h3>
<ul>
<li>Automated daily <code>hash_id</code> scrubbing</li>
<li>Started this Changelog</li>
</ul>
2023-11-01T00:00:00+00:00https://docs.bearblog.dev/date-format/Date format2023-11-07T09:19:14.532420+00:00docshidden<p>The date format can be updated in your dashboard using the following attribute:</p>
<div class="highlight"><pre><span></span>date_format: d M, Y
</pre></div>
<p>In the examples above, here's what each formatting character represents:</p>
<p>Sure, here's the information reformatted with an example for each format string:</p>
<ul>
<li><strong><code>d</code></strong>: Day of the month, 2 digits with leading zeros. <code>03</code></li>
<li><strong><code>m</code></strong>: Numeric representation of a month, with leading zeros. <code>05</code> for May.</li>
<li><strong><code>Y</code></strong>: A full numeric representation of a year, 4 digits. <code>2023</code></li>
<li><strong><code>F</code></strong>: A full textual representation of a month, such as January or March. <code>May</code></li>
<li><strong><code>j</code></strong>: Day of the month without leading zeros. <code>3</code> for the 3rd day of the month.</li>
<li><strong><code>D</code></strong>: A textual representation of a day, three letters. <code>Mon</code> for Monday.</li>
<li><strong><code>l</code></strong> (lowercase 'L'): A full textual representation of the day of the week. <code>Monday</code></li>
<li><strong><code>S</code></strong>: English ordinal suffix for the day of the month, 2 characters (st, nd, rd or th. Works well with <code>j</code>).<code>rd</code> for the 3rd day of the month.</li>
<li><strong><code>M</code></strong>: A short textual representation of a month, three letters. <code>May</code> for May.</li>
</ul>
<p>Here are some examples of date formats:</p>
<ul>
<li><strong><code>d, M Y</code></strong>: 22, May 2023</li>
<li><strong><code>Y-m-d</code></strong>: 2023-05-22</li>
<li><strong><code>m/d/Y</code></strong>: 05/22/2023</li>
<li><strong><code>d/m/Y</code></strong>: 22/05/2023</li>
<li><strong><code>F j, Y</code></strong>: May 22, 2023</li>
<li><strong><code>D, M j, Y</code></strong>: Mon, May 22, 2023</li>
<li><strong><code>l, F j, Y</code></strong>: Monday, May 22, 2023</li>
<li><strong><code>jS F, Y</code></strong>: 22nd May, 2023</li>
<li><strong><code>d-M-Y</code></strong>: 22-May-2023</li>
</ul>
2023-05-23T07:53:36.651872+00:00https://docs.bearblog.dev/migrate/Migrating to bear2024-02-02T13:34:01.749665+00:00docshidden<p>Congratulations! You've decided to move your blog to Bear!</p>
<p>There are a few useful tools at your disposal to make sure you don't lose any traffic during the migration process, or have broken links in the future. You'll want to keep your existing traffic even if the blog structure is different.</p>
<p>One important caveat: while it is very easy to populate your new blog, there are no automated tools for doing this such as a bulk uploader. This is due to the many different standards across existing platforms from Substack to Blogger.</p>
<h2 id="setting-up-your-new-blog">Setting up your new blog</h2>
<p>To ensure you don't have down-time during the migration process, don't move your custom domain over to Bear until you're happy that your new blog is set up and all of your content has been moved over. During that time you can run on your <code>https://your-blog.bearblog.dev</code> domain.</p>
<h2 id="moving-posts-over">Moving posts over</h2>
<p>The easiest way to move existing content to Bear is to create new posts and copy the text content from your existing web pages one at a time<sup class="footnote-ref" id="fnref-1"><a href="#fn-1">1</a></sup>. You can mark them up as you see fit during this process. If you have a backup of your files as HTML documents, it's as easy as pasting the HTML as your blog content as Bear handles both markdown and HTML natively.</p>
<p>However, if you'd like to keep them all as Markdown instead of HTML (since Markdown is easy to edit), you can convert your posts using <a href="https://codebeautify.org/html-to-markdown" target="_blank">HTML-to-Markdown</a>.</p>
<p>Ensure you set your <a href="/post#published_date">published_date</a> to the original date of publication for the post.</p>
<h3 id="using-the-post-template">Using the post template</h3>
<p>If each of your blog posts are similar, it may be worth setting up the structure in your post template (found on the posts section of your dashboard). Removing the boilerplate content and setting your own parameters will allow you to move posts over more efficiently.</p>
<h3 id="links">Links</h3>
<p>Different blogging platforms have different structures for links. Bear uses a flat structure (eg: <code>https://your.blog/post-title/</code> where Wordpress could have an obscure structure (eg: <code>https://your.blog/2021/02/13/post-title/</code>). Since we don't want to lose the traffic that is already going to <code>2021/02/13/post-title/</code> we can forward all of that traffic to your new post at <code>post-title</code> by using an <a href="/post#alias">alias</a>.</p>
<div class="highlight"><pre><span></span>title: Post title
link: post-title
alias: 2021/02/13/post-title
</pre></div>
<p>This ensures that existing traffic going to the alias does not result in a 404 error.</p>
<h3 id="images">Images</h3>
<p>To ensure your images aren't broken when you move your domain name, make sure to re-upload images for each blog post.</p>
<h3 id="upvotes">Upvotes</h3>
<p>There is currently no way to migrate upvotes from other platforms to Bear.</p>
<h3 id="rss-alias">RSS alias</h3>
<p>If you've migrated from a blogging platform with a different feed path, eg: <code>https://example.com/rss/index.xml</code> you'll want to create an alias in <strong>Settings > Advanced settings > RSS alias</strong> in the dashboard to redirect the old feed without breaking existing subscriptions.</p>
<p>In the above example the RSS Alias should be set to <code>rss/index.xml</code></p>
<h2 id="ready">Ready!</h2>
<p>Once everything looks good and is running at <code>https://your-blog.bearblog.dev</code> it's time to move your domain over. This is done by modifying your DNS records and is covered in the <a href="/custom-domains/">custom domain docs</a>.</p>
<hr/>
<section class="footnotes">
<ol>
<li id="fn-1"><p>This may seem arduous, but past experience has put this at roughly 30 minutes for a 60 post blog.<a class="footnote" href="#fnref-1">↩</a></p></li>
</ol>
</section>
2022-09-08T12:01:39.173689+00:00https://docs.bearblog.dev/seo/SEO2022-08-30T12:05:38.682227+00:00docshidden<p>Bear has some of the best technical SEO on the internet. A quick <a href="https://web.dev/measure/">lighthouse audit</a> will attest to this fact with a 100% score (assuming the content is reasonably laid out on your page).</p>
<p>There are reams of articles on the internet on how to do SEO well, but in aggregate there are 2 things you need to know:</p>
<p><strong>1. Make sure the technical SEO aspects of your site are sound</strong></p>
<p><strong>2. Write good content which people will share</strong></p>
<p><em>It is also debatable that a having your own <code>.com</code> domain is better than using a shared or subdomained host, or using cheaper tlds like <code>.me</code> or <code>.coffee</code>.</em></p>
<h2 id="technical-seo">Technical SEO</h2>
<p>Bear populates all of the necessary meta tags, social tags, and opengraph content automatically. There is also a <strong>robots.txt</strong> file and <strong>sitemap.xml</strong> which autogenerate on every update to your site.</p>
<p>Bear is also extraordinarily fast (which, it turns out, is <a href="https://pantheon.io/blog/improving-page-speed-boosts-seo-ranking">good for SEO</a>), with only about <strong>2-5kb</strong> of content per page, and zero client-side rendering.</p>
<p>When a page or post is published the only fields that need to be populated are the <code>title</code> and page content. The <code>meta_description</code> is automatically set as the first 160 characters of the page content. This works well, however it is advisable to set the <code>meta_description</code> manually in the page header in order to better describe the content of the page. This is good for SEO but more-so for previews in messaging apps and search engine results.</p>
<h2 id="write-good-content">Write good content</h2>
<p>The algorithms (or, let's be entirely honest, machine learning models) that govern online discoverability for search engines have shifted in recent years. Back in the day some strategic keyword stuffing could get you a long way, but no-more. The best way to be discovered online is to create decent content which people will read, deem valuable, and either share or create a backlink to on their own channels.</p>
<p>This increases your website's domain authority while also adding value to the world. Unfortunately the algorithms haven't quite figured out how to disregard SEO goop, but <a href="https://blog.google/products/search/more-content-by-people-for-people-in-search/">they're working on it</a>.</p>
<h2 id="how-to-not-do-seo">How to not do SEO</h2>
<p>Backlink stuffing is shitty and has negative consequences. It used to be be beneficial to create (or purchase from Fiverr) as many low-quality backlinks as possible in order to bump up your domain authority. However, the algorithms now classifies this activity as <strong>spamming</strong> and penalise the content and links. Don't do this.</p>
<p>Keyword stuffing has also proven to be an old-school method of SEO that just doesn't work any longer.</p>
<h2 id="tldr">tldr;</h2>
<ol>
<li>Write good content</li>
<li>Write a good <code>meta_description</code></li>
<li>Don't spam</li>
</ol>
2022-08-29T14:36:27.005831+00:00https://docs.bearblog.dev/analytics/Analytics2024-01-08T08:37:23.437178+00:00docshidden<p>Analytics can be found on your <a href="https://bearblog.dev/dashboard/analytics/">dashboard</a>. This shows all of the human-reads your posts and pages have received. Reads are only counted if a reader has hovered or scrolled on the post. This weeds out bots and scrapers which generally don't perform either of these actions.</p>
<h2 id="reads-vs-unique-visitors">Reads vs Unique visitors</h2>
<p>Reads refer to unique reads (unique post and reader), whereas unique visitors is the number of people who have been on your site, regardless of how many posts they have read. Bear analytics is slightly different from other tools in that we don't track more than one view per post per reader per day, since if someone reloads the page a bunch we wouldn't want this counting as multiple reads.</p>
<h2 id="rss-subscribers">RSS subscribers</h2>
<p>This is a rough approximation of the number of people who are subscribed to your RSS feed. This is calculated by determining the unique number of IP address requests to the RSS feed in a 24 hour period (as RSS readers can be set to poll anywhere from every 5 minutes, to every 24 hours). This isn't perfect, since 2 people sharing an IP address would be counted as 1, and 1 person who changes IP address in a given 24 hours period would be logged as 2. So take this number with a grain of salt.</p>
<h2 id="in-depth-analytics">In-depth analytics</h2>
<p>The basic version of the analytics only shows the number of reads and unique visitors in the past week. In order to gain access to in-depth analytics the blog will need to be upgraded.</p>
<p><a href="https://herman.bearblog.dev/public-analytics" target="_blank">In-depth analytics example</a></p>
<p><strong>This provides the following:</strong></p>
<ul>
<li>Readers currently on site</li>
<li>Upvote to read ratio (WIP)</li>
<li>Filter by pages</li>
<li>Filter by referrers</li>
<li>Location of reader</li>
<li>Device of reader</li>
<li>OS of reader</li>
<li>Export all analytics information as a CSV</li>
<li>Make analytics public (to share with a team or show off)</li>
</ul>
<h2 id="fathom-analytics">Fathom analytics</h2>
<p>If you need even more in-depth analytics, such as minute-by-minute logs, time-on-site, bounce-rate, granular referrers, etc, then <a href="https://usefathom.com/ref/GMAGWL">Fathom</a> analytics is a great, privacy-respecting analytics provider. Once you've signed up (get $10 off with the above link), simply add the site ID in the form in <strong>Analytics settings</strong> on the Bear analytics page and it should JustWork™.</p>
<h2 id="a-note-about-google-analytics">A note about Google Analytics</h2>
<p>Bear does not (nor will ever) support Google Analytics. They have shown time-and-time-again that they cannot be trusted with user data and are the epitome of non-privacy friendly. Fathom does a pretty comprehensive <a href="https://usefathom.com/google-analytics-alternative">writeup</a> about this.</p>
2022-08-21T17:47:22.630154+00:00https://docs.bearblog.dev/review-process/Review process2023-04-18T07:43:25.758310+00:00docshidden<p>Since there is a propensity for all free services on the internet to be abused by backlink spammers, scammers, domain-squatters, and people selling illicit goods and services, all new Bear sites go through a <strong>manual review process</strong> before they are displayed on the <a href="https://bearblog.dev/discover/" target="_blank">discovery feed</a> or indexed by search engines.</p>
<h3 id="to-skip-the-review-process-and-immediately-make-your-blog-publicly-discoverable-you-can-upgrade-this-also-supports-the-platform-no">To skip the review process and immediately make your blog publicly discoverable you can <a href="https://bearblog.dev/dashboard/upgrade/" target="_blank">upgrade</a>. This also supports the platform ʕ•ᴥ•ʔノ♡</h3>
<p><em>New free blogs have the option to <strong>opt-in</strong> to a manual review. This is done (by yours truly) <strong>once a week</strong> to ensure only good quality content makes its way onto the platform.</em></p>
<h2 id="step-one">Step one</h2>
<p>Once a new site it created the site will be available only at its subdomain (or custom domain, if that has been set up) but will not be available in the <a href="https://bearblog.dev/discover/">discovery feed</a> or linked to in any way. It will also include tags that prevent it from being crawled by search engines until it has been approved.</p>
<p>This is to prevent the <strong>bearblog.dev</strong> domain from being blacklisted by search engines as this would have a detrimental effect on all Bear sites. The site is completely useable during this time, but is only discoverable via the site being explicitly shared by the owner.</p>
<h2 id="step-two">Step two</h2>
<p>The site then enters a <strong>to-review</strong> stack which allows a moderator to go through all the new blogs and approve or block any new site. This step also allows the moderator to contact the site owner to help them out if it's apparent they are struggling. This process is covered in detail in this <a href="https://herman.bearblog.dev/5-hours-to-15-minutes/">post</a></p>
<h2 id="step-three">Step three</h2>
<p>Sites are reviewed most days of the week, and the restrictions are removed if valid, or blocked. If a site is blocked there is an appeal process that will be displayed to the site owner (although this has yet to be used, spammers know who they are).</p>
<h2 id="step-four">Step four</h2>
<p>Your site is up and running and has a perfect SEO score, can be crawled by search engines, and will display on the Bear discovery feed. However, if it is reported as being prohibited content, it will be re-reviewed and blocked (if necessary) to protect the sanctity of the <strong>bearblog.dev</strong> domain for everyone else.</p>
2022-08-21T17:46:18.979380+00:00https://docs.bearblog.dev/language-cheatsheet/Language cheatsheet2022-08-21T15:14:54.246475+00:00docshidden<div class="highlight"><pre><span></span>CULTURE SPEC.CULTURE ENGLISH NAME
--------------------------------------------------------------
af af-ZA Afrikaans
af-ZA af-ZA Afrikaans (South Africa)
ar ar-SA Arabic
ar-AE ar-AE Arabic (U.A.E.)
ar-BH ar-BH Arabic (Bahrain)
ar-DZ ar-DZ Arabic (Algeria)
ar-EG ar-EG Arabic (Egypt)
ar-IQ ar-IQ Arabic (Iraq)
ar-JO ar-JO Arabic (Jordan)
ar-KW ar-KW Arabic (Kuwait)
ar-LB ar-LB Arabic (Lebanon)
ar-LY ar-LY Arabic (Libya)
ar-MA ar-MA Arabic (Morocco)
ar-OM ar-OM Arabic (Oman)
ar-QA ar-QA Arabic (Qatar)
ar-SA ar-SA Arabic (Saudi Arabia)
ar-SY ar-SY Arabic (Syria)
ar-TN ar-TN Arabic (Tunisia)
ar-YE ar-YE Arabic (Yemen)
az az-Latn-AZ Azeri
az-Cyrl-AZ az-Cyrl-AZ Azeri (Cyrillic, Azerbaijan)
az-Latn-AZ az-Latn-AZ Azeri (Latin, Azerbaijan)
be be-BY Belarusian
be-BY be-BY Belarusian (Belarus)
bg bg-BG Bulgarian
bg-BG bg-BG Bulgarian (Bulgaria)
bs-Latn-BA bs-Latn-BA Bosnian (Bosnia and Herzegovina)
ca ca-ES Catalan
ca-ES ca-ES Catalan (Catalan)
cs cs-CZ Czech
cs-CZ cs-CZ Czech (Czech Republic)
cy-GB cy-GB Welsh (United Kingdom)
da da-DK Danish
da-DK da-DK Danish (Denmark)
de de-DE German
de-AT de-AT German (Austria)
de-DE de-DE German (Germany)
de-CH de-CH German (Switzerland)
de-LI de-LI German (Liechtenstein)
de-LU de-LU German (Luxembourg)
dv dv-MV Divehi
dv-MV dv-MV Divehi (Maldives)
el el-GR Greek
el-GR el-GR Greek (Greece)
en en-US English
en-029 en-029 English (Caribbean)
en-AU en-AU English (Australia)
en-BZ en-BZ English (Belize)
en-CA en-CA English (Canada)
en-GB en-GB English (United Kingdom)
en-IE en-IE English (Ireland)
en-JM en-JM English (Jamaica)
en-NZ en-NZ English (New Zealand)
en-PH en-PH English (Republic of the Philippines)
en-TT en-TT English (Trinidad and Tobago)
en-US en-US English (United States)
en-ZA en-ZA English (South Africa)
en-ZW en-ZW English (Zimbabwe)
es es-ES Spanish
es-AR es-AR Spanish (Argentina)
es-BO es-BO Spanish (Bolivia)
es-CL es-CL Spanish (Chile)
es-CO es-CO Spanish (Colombia)
es-CR es-CR Spanish (Costa Rica)
es-DO es-DO Spanish (Dominican Republic)
es-EC es-EC Spanish (Ecuador)
es-ES es-ES Spanish (Spain)
es-GT es-GT Spanish (Guatemala)
es-HN es-HN Spanish (Honduras)
es-MX es-MX Spanish (Mexico)
es-NI es-NI Spanish (Nicaragua)
es-PA es-PA Spanish (Panama)
es-PE es-PE Spanish (Peru)
es-PR es-PR Spanish (Puerto Rico)
es-PY es-PY Spanish (Paraguay)
es-SV es-SV Spanish (El Salvador)
es-UY es-UY Spanish (Uruguay)
es-VE es-VE Spanish (Venezuela)
et et-EE Estonian
et-EE et-EE Estonian (Estonia)
eu eu-ES Basque
eu-ES eu-ES Basque (Basque)
fa fa-IR Persian
fa-IR fa-IR Persian (Iran)
fi fi-FI Finnish
fi-FI fi-FI Finnish (Finland)
fo fo-FO Faroese
fo-FO fo-FO Faroese (Faroe Islands)
fr fr-FR French
fr-BE fr-BE French (Belgium)
fr-CA fr-CA French (Canada)
fr-FR fr-FR French (France)
fr-CH fr-CH French (Switzerland)
fr-LU fr-LU French (Luxembourg)
fr-MC fr-MC French (Principality of Monaco)
gl gl-ES Galician
gl-ES gl-ES Galician (Galician)
gu gu-IN Gujarati
gu-IN gu-IN Gujarati (India)
he he-IL Hebrew
he-IL he-IL Hebrew (Israel)
hi hi-IN Hindi
hi-IN hi-IN Hindi (India)
hr hr-HR Croatian
hr-BA hr-BA Croatian (Bosnia and Herzegovina)
hr-HR hr-HR Croatian (Croatia)
hu hu-HU Hungarian
hu-HU hu-HU Hungarian (Hungary)
hy hy-AM Armenian
hy-AM hy-AM Armenian (Armenia)
id id-ID Indonesian
id-ID id-ID Indonesian (Indonesia)
is is-IS Icelandic
is-IS is-IS Icelandic (Iceland)
it it-IT Italian
it-CH it-CH Italian (Switzerland)
it-IT it-IT Italian (Italy)
ja ja-JP Japanese
ja-JP ja-JP Japanese (Japan)
ka ka-GE Georgian
ka-GE ka-GE Georgian (Georgia)
kk kk-KZ Kazakh
kk-KZ kk-KZ Kazakh (Kazakhstan)
kn kn-IN Kannada
kn-IN kn-IN Kannada (India)
ko ko-KR Korean
kok kok-IN Konkani
kok-IN kok-IN Konkani (India)
ko-KR ko-KR Korean (Korea)
ky ky-KG Kyrgyz
ky-KG ky-KG Kyrgyz (Kyrgyzstan)
lt lt-LT Lithuanian
lt-LT lt-LT Lithuanian (Lithuania)
lv lv-LV Latvian
lv-LV lv-LV Latvian (Latvia)
mi-NZ mi-NZ Maori (New Zealand)
mk mk-MK Macedonian
mk-MK mk-MK Macedonian (Former Yugoslav Republic of Macedonia)
mn mn-MN Mongolian
mn-MN mn-MN Mongolian (Cyrillic, Mongolia)
mr mr-IN Marathi
mr-IN mr-IN Marathi (India)
ms ms-MY Malay
ms-BN ms-BN Malay (Brunei Darussalam)
ms-MY ms-MY Malay (Malaysia)
mt-MT mt-MT Maltese (Malta)
nb-NO nb-NO Norwegian, Bokmal (Norway)
nl nl-NL Dutch
nl-BE nl-BE Dutch (Belgium)
nl-NL nl-NL Dutch (Netherlands)
nn-NO nn-NO Norwegian, Nynorsk (Norway)
no nb-NO Norwegian
ns-ZA ns-ZA Northern Sotho (South Africa)
pa pa-IN Punjabi
pa-IN pa-IN Punjabi (India)
pl pl-PL Polish
pl-PL pl-PL Polish (Poland)
pt pt-BR Portuguese
pt-BR pt-BR Portuguese (Brazil)
pt-PT pt-PT Portuguese (Portugal)
quz-BO quz-BO Quechua (Bolivia)
quz-EC quz-EC Quechua (Ecuador)
quz-PE quz-PE Quechua (Peru)
ro ro-RO Romanian
ro-RO ro-RO Romanian (Romania)
ru ru-RU Russian
ru-RU ru-RU Russian (Russia)
sa sa-IN Sanskrit
sa-IN sa-IN Sanskrit (India)
se-FI se-FI Sami (Northern) (Finland)
se-NO se-NO Sami (Northern) (Norway)
se-SE se-SE Sami (Northern) (Sweden)
sk sk-SK Slovak
sk-SK sk-SK Slovak (Slovakia)
sl sl-SI Slovenian
sl-SI sl-SI Slovenian (Slovenia)
sma-NO sma-NO Sami (Southern) (Norway)
sma-SE sma-SE Sami (Southern) (Sweden)
smj-NO smj-NO Sami (Lule) (Norway)
smj-SE smj-SE Sami (Lule) (Sweden)
smn-FI smn-FI Sami (Inari) (Finland)
sms-FI sms-FI Sami (Skolt) (Finland)
sq sq-AL Albanian
sq-AL sq-AL Albanian (Albania)
sr sr-Latn-CS Serbian
sr-Cyrl-BA sr-Cyrl-BA Serbian (Cyrillic) (Bosnia and Herzegovina)
sr-Cyrl-CS sr-Cyrl-CS Serbian (Cyrillic, Serbia)
sr-Latn-BA sr-Latn-BA Serbian (Latin) (Bosnia and Herzegovina)
sr-Latn-CS sr-Latn-CS Serbian (Latin, Serbia)
sv sv-SE Swedish
sv-FI sv-FI Swedish (Finland)
sv-SE sv-SE Swedish (Sweden)
sw sw-KE Kiswahili
sw-KE sw-KE Kiswahili (Kenya)
syr syr-SY Syriac
syr-SY syr-SY Syriac (Syria)
ta ta-IN Tamil
ta-IN ta-IN Tamil (India)
te te-IN Telugu
te-IN te-IN Telugu (India)
th th-TH Thai
th-TH th-TH Thai (Thailand)
tn-ZA tn-ZA Tswana (South Africa)
tr tr-TR Turkish
tr-TR tr-TR Turkish (Turkey)
tt tt-RU Tatar
tt-RU tt-RU Tatar (Russia)
uk uk-UA Ukrainian
uk-UA uk-UA Ukrainian (Ukraine)
ur ur-PK Urdu
ur-PK ur-PK Urdu (Islamic Republic of Pakistan)
uz uz-Latn-UZ Uzbek
uz-Cyrl-UZ uz-Cyrl-UZ Uzbek (Cyrillic, Uzbekistan)
uz-Latn-UZ uz-Latn-UZ Uzbek (Latin, Uzbekistan)
vi vi-VN Vietnamese
vi-VN vi-VN Vietnamese (Vietnam)
xh-ZA xh-ZA Xhosa (South Africa)
zh-CN zh-CN Chinese (People's Republic of China)
zh-HK zh-HK Chinese (Hong Kong S.A.R.)
zh-CHS (none) Chinese (Simplified)
zh-CHT (none) Chinese (Traditional)
zh-MO zh-MO Chinese (Macao S.A.R.)
zh-SG zh-SG Chinese (Singapore)
zh-TW zh-TW Chinese (Taiwan)
zu-ZA zu-ZA Zulu (South Africa)
</pre></div>
2022-08-21T15:12:20.773886+00:00https://docs.bearblog.dev/styling/Styling2022-11-24T13:03:56.609057+00:00docshidden<p>Bear's built-in style editor turns Bear into a full-fledged website creation platform. All manner of websites from small <a href="https://herman.bearblog.dev">blogs</a>, to docs (like this documentation), to <a href="https://360training.bearblog.dev">small business websites</a> can be built using Bear.</p>
<h2 id="themes">Themes</h2>
<p>There are a handful of pre-built themes to choose from in the <a href="https://bearblog.dev/dashboard/styles/">dashboard</a>. These can be used as-is, but also make a good jumping off point for creating custom styles.</p>
<p>You can also choose any <a href="https://cssbed.com">no-class css theme</a> as a starting point and include it in the <strong>Styles</strong> field using <code>@import https://link-to-theme.css;</code> (custom fonts can be imported in the same way).</p>
<h2 id="custom-styles">Custom styles</h2>
<p>Bear's themes can be customised using <a href="https://www.w3schools.com/Css/">pure CSS</a> in the <strong>Styles</strong> field. The structure of the theme CSS is set up to easily modify the basics such as font, colour, scale, etc (both for light mode and dark mode, as specified by the <code>@media (prefers-color-scheme: dark)</code> rule).</p>
<h2 id="bear-classes">Bear classes</h2>
<p>Bear has a few classes which can be used as CSS selectors to customise specific pages or elements.</p>
<h4 id="pages">Pages</h4>
<ul>
<li>The root of the <strong>homepage</strong>: <code>.home {}</code></li>
<li>The root of <strong>any post</strong>: <code>.post {}</code></li>
<li>The root of <strong>any page</strong>: <code>.page {}</code><ul>
<li><em>If page and post styles are the same, both can be selected using <code>.page .post {}</code></em></li>
</ul>
</li>
<li>The root of the <strong>blog list page</strong>: <code>.blog {}</code></li>
<li>The root of the <strong>email subscription page</strong>: <code>.subscribe {}</code></li>
<li>The root of the <strong>404 not found page</strong>: <code>.not-found {}</code></li>
</ul>
<h4 id="custom-class-names">Custom class names</h4>
<p>Each post has the header option <a href="/post#class-name">class_name</a> which adds a class to the root of the post to allow custom styling for that particular page.</p>
<p>Eg:</p>
<div class="highlight"><pre><span></span>class_name: contact-page
</pre></div>
<h4 id="elements">Elements</h4>
<ul>
<li>The anchor tag for the <strong>title of the blog</strong>: <code>.title h1 {}</code></li>
<li>The <strong>ul</strong> of the posts on the blog: <code>.blog-posts {}</code></li>
<li>The <strong>navigation header</strong>: <code>nav</code></li>
<li>The <strong>codeblocks/hightlights</strong>: <code>.highlight, .code {}</code></li>
</ul>
<h2 id="notes">Notes</h2>
<p>All parts of the front-end blog are selectable and style-able using simple CSS selectors. If there are any difficult-to-access parts of the page please submit an <a href="https://github.com/HermanMartinus/bearblog/issues">issue</a>.</p>
<p>It is considered very shitty to use CSS to hide the <strong>Made with Bear</strong> footer. If you have upgraded or are a contributor to the project it's okay (although it would be awesome if you left it in), however for free users this will be reset automatically (or manually).</p>
2022-08-21T14:59:52.356980+00:00