diff --git a/content/about.md b/content/about.md new file mode 100644 index 0000000..4f10f4c --- /dev/null +++ b/content/about.md @@ -0,0 +1,58 @@ +--- +id: "11" +title: "About" +description: "About this theme." +date: "2024-02-11" +listed: false +nocomments: true +categories: + - "documentation" +tags: + - "theme" + - "mistral" + - "documentation" + +--- + +# About this theme + +Mistral is a theme for the blogging platform [Bloggrify](https://bloggrify.com). + +## Supported features + +|| **Feature** | **Description** | +|---|-------------|------------------------------------------------------| +| 📖 | tags | Add tags to your posts | +| 📝 | Markdown | Use markdown to write your posts | +| 📧 | Newsletter | Add a newsletter subscription form with RssFeedPulse | +| 💬 | Comments | Add comments to your posts with Hyvor Talk | +| 📱 | Responsive | Mobile-friendly design | + + +## Installation + +To install this theme, you should clone this repository and install the dependencies. + +```bash +git clone git@github.com:bloggrify/demo-mistral.git +cd demo-mistral +npm install +``` + +Then you can run the development server on http://localhost:3000 to see the theme in action. + +```bash +npm run dev +``` + +Then, you can remove all contents from the `content` folder **except the index and archives pages** and start from scratch and create your own [content](https://bloggrify.com/introduction/writing-pages). + + +## Configuration + +Look at the [standard configuration](https://bloggrify.com/introduction/configuration). + +## Deployment + +To deploy your blog, you should follow the [standard deployment guide](https://bloggrify.com/introduction/deployment). + diff --git a/content/custom-components.md b/content/custom-components.md new file mode 100644 index 0000000..5a9ec0d --- /dev/null +++ b/content/custom-components.md @@ -0,0 +1,152 @@ +--- +id: "30" +title: "Custom components" +description: "Enhance your markdown files with custom components." +date: "2024-06-06" +categories: + - markdown + - documentation +tags: + - markdown + - sample + - thailand + +cover: "covers/iceland.jpg" +--- + +You can use [custom components](https://content.nuxt.com/usage/markdown#vue-components) within vue.js to extend markdown features. Some components are already available within Bloggrify such as: + +:toc + +## Code + +### Code group + +::mdd + +#preview +:::code-group + +```bash [npm] +npm run dev +``` + +```bash [yarn] +yarn dev +``` + +```bash [pnpm] +pnpm run dev +``` + +::: + +#markup +```markdown + ::code-group + + ```bash [npm] + npm run dev + ``` + + ```bash [yarn] + yarn dev + ``` + + ```bash [pnpm] + pnpm run dev + ``` + + :: +``` +:: + + + + +### Markdown code block + +::mdd + +#preview + :::mdd + + #preview + _Showing a result_ + + #markup + ```markdown + _Showing the markup_ + ``` + ::: + +#markup +```markdown + ::mdd + + #preview + _Showing a result_ + + #markup + ```markdown + _Showing the markup_ + ``` + :: +``` +:: + + +## Alerts + +::mdd + +#preview +::alert{type="TIP"} +This is a tip +:: + +#markup +```markdown +::alert{type="TIP"} +This is a tip +:: +``` +:: + +::mdd + +#preview +::alert{type="Warning"} +This is a warning +:: + +#markup +```markdown +::alert{type="Warning"} +This is a warning +:: +``` +:: + + + +## table of contents + +::mdd + +#preview +:toc + +#markup +```markdown +:toc +``` +:: + +**Configuration :** + +| Parameter | Description | +|-------------------------------------------------|------------------------------------------------------------------------------------------| +| `type` | The type of alert. Can be `warning`, or `tip`. | +| `showChildren` | If set to `true`, the H3 will be displayed in the table of contents. Default is `false`. | + diff --git a/content/features.md b/content/features.md new file mode 100644 index 0000000..3ef0c5c --- /dev/null +++ b/content/features.md @@ -0,0 +1,314 @@ +--- +id: "11" +title: "All features" +description: "Discover all the features of Bloggrify." +date: "2024-02-11" +cover: "covers/tokyo.jpg" +table_of_contents: true +tags: + - documentation + - features + - bloggrify + +--- + +## Introduction + +Bloggrify is built on top of +* [Nuxt.js 3.x](https://nuxt.com/) +* [Tailwind CSS](https://tailwindcss.com/) +* [Nuxt-Content](https://content.nuxt.com/) +* [Lucide icons](https://lucide.dev/) +* [Hyvor Talk](https://talk.hyvor.com/) +* and other cool stuff + +It is a **static** blog generator that uses markdown files to generate blog posts. + +## Static blog generator + +A static blog generator is a tool that generates a blog from markdown files. It is a great way to create a blog because it is simple, fast, and secure. It requires no database and no server-side code. It is just a bunch of HTML, CSS, and JavaScript files. + +* It is **secure** because there is no server-side code that can be hacked. +* It is **fast** because there is no database to query and no server-side code to execute. +* It is **simple** because it is just a bunch of files. +* It is **cheap** because it can be hosted on a static hosting provider. + +## Configuration + +The global configuration of the blog is done in the nuxt.config.ts file. + +You can read the content of runtimeConfig.public in the nuxt.config.ts file to see the configuration of the blog. + +You can configure +* the title, +* the description, +* the logo, +* the social networks (twitter, mastodon, youtube, linkedin, facebook, instagram, github) for the website +* the top menu, +* the list of authors + +Read the actual nuxt.config.ts file to see the configuration of the blog. + +## Markdown + +You can use all standard markdown features plus some extra features such as frontmatter to add metadata to your markdown files. +You can read more about it [here](/markdown). + +## SEO friendly + +Bloggrify is SEO friendly. It generates a sitemap and a RSS feed. It also supports Open Graph and Twitter cards. It has been optimized for search engines. + +### Choose your language + + +The content you'll write on your blog will be in the language you choose. It's important for bots to set up the right language in the html attribute of the `nuxt.config.ts` file. + +The default value is "en" + +```typescript +export default { + head: { + htmlAttrs: { + lang: 'en' + } + } +} +``` + +## Sitemap and RSS feed + +This blog generates automatically a sitemap.xml and a RSS feed (rss.xml). +All content is automatically added to the sitemap and the RSS feed except the content with the `listed: false` property in the frontmatter. + +## Open Graph and Twitter cards + +This blog uses the [useHead](https://nuxt.com/docs/api/composables/use-head) composables to add metadata to the head of the pages. + +All pages have a default title and description. +You can tweak the image, title and description of each page in the frontmatter of the markdown file. + +This is highly recommended to do so to have a good SEO, not even mentioning that your blog will look broken if you don't define title for each page... + +## Robots.txt +By default, the robots.txt allows all robots to crawl the website. It's possible to modify the robots.txt file in the `public` folder. + +For example if you don't want to allow chatGpt or yandex: +```txt +User-agent: GPTBot +Disallow: / +User-agent: yandex +Disallow: / +``` + +## Performance + +Performance are an important part of SEO. Here is the lighthouse score of this blog: + +| index page | blog post | +|-------------------------------------------|----------------------------------------------------| +| ![index page](/images/doc/lighthouse.jpg) | ![blog post](/images/doc/lighthouse-blog-post.jpg) | + +Performance could vary depending on the server and the network and images you use in your blog. + + + +## Comment system + +You can enable comments on your blog. It uses [Hyvor Talk](https://talk.hyvor.com/). + +Comments are a great way to interact with your readers. It's a great way to get feedback and improve your content. + +On a static website, you don't have a database. But you can use a third-party service to add comments to your blog. + +I use [Hyvor talk](https://talk.hyvor.com/) for this blog. You can enable it by adding the following code to the `nuxt.config.ts` file: + +```typescript + comments: { + enabled: true, + hyvor_talk: { + website_id: "YOUR_HYVOR_TALK_WEBSITE_ID", + }, + }, +``` + +::alert +Replace `YOUR_HYVOR_TALK_WEBSITE_ID` with your Hyvor Talk website id. +:: + + +## Flexible file structure + +You can organize your files as you want. You can create folders and subfolders and you can choose the URL of your blog posts. +Each file under the `content` directory will be transformed into a page of the blog. + +All the files are markdown files with a frontmatter at the top of the file. They are all listed on the index page, except the ones +* with the `draft: true` property. +* with the `listed: false` property. + +The url of the page is the path of the file, without the `.md` extension. +It means you can define the url structure of your blog by organizing the files in the `content` directory. + +For example, you can have url like `/2024/01/files_hierarchy` if the file is located at `content/2024/01/files_hierarchy.md`. + +It is highly recommended to use a hierarchical structure for the files, to make the blog more organized and to make the urls more meaningful. + + +## Analytics + +You can add any analytics tool to your blog. + +You just have to modify the `nuxt.config.ts` file to add the tracking code of your analytics provider. + +For example, to add [Pirsch](https://pirsch.io/), you can add the following code to the `nuxt.config.ts` file: + +```typescript +export default { + app: { + head: { + htmlAttrs: { + lang: "en", + }, + script: [ + { + src: "https://api.pirsch.io/pirsch.js", + id: "pirschjs", + defer: true, + "data-code": "YOUR_PIRSCH_CODE", + type: "text/javascript", + }, + ], + }, + }, +} +``` +::alert +Replace `YOUR_PIRSCH_CODE` with your Pirsch code. +:: + + +## Table of content + +The table of content is a great way to help your readers navigate through your blog post. It can be displayed as a sidebar or directly inside the blog post. + +1. If you want to display the table of content as a navigation sidebar +2. If you prefer to display the table of content directly inside the blog post, you can use the `toc` shortcode. + + +### Requirements + +In order to display the table of content, you need to use several markdown headers. The table of content will be generated based on the headers. + +Example: + +```markdown +## Title 1 +## Title 2 +## Title 3 +``` + +::alert +Only the headers with a level 2 will be displayed in the table of content. +:: + +### Table of content with a shortcode + +The table of content can be displayed directly inside the blog post by using the `toc` shortcode. + +```markdown +:toc +``` + +Example : +:toc + + +### Table of content as a sidebar + +The sidebar will be displayed on the right side of the page on desktop and just below the blog post on mobile. + +![Illustration of the table of content as a sidebar](/images/doc/sidebar-toc.jpg "Illustration of the table of content as a sidebar") + +The table of content is responsive and will be displayed on the right side of the page on desktop and just below the blog post on mobile : + +![Illustration of the table of content for mobile](/images/doc/toc-mobile.jpg "Illustration of the table of content for mobile") + +You can enable it by setting the `table_of_contents` front matter to `true` or you can enable it globally in the nuxt.config.ts file. + +#### First method : front matter + +Enable the table of content by setting the `table_of_contents` front matter to `true` only for the blog post you want to display it. +It will override the global configuration. + +```markdown +--- +table_of_contents: true +--- +``` + + +#### Second method : nuxt.config.ts + +Enable the table of content globally in the nuxt.config.ts file. +It can be overridden by the front matter to disable it for a specific blog post. + +```typescript +// nuxt.config.ts +export default { + runtimeConfig: { + public: { + table_of_contents: true, + }, + }, +}; +``` + + + +## Newsletter + +You can add a newsletter to your blog to keep your readers updated when you publish new content. + +The tricky part here is that this blog is a static site, so you can't use a traditional newsletter service, or you'll have to manually send out emails every time you publish a new post and that's not very practical. + +Instead, you can use a RSS-to-email service to create a newsletter and then add a form to your blog to allow your readers to sign up. +This is the approach I'm using for this blog. I'm using [Mailerlite](https://www.mailerlite.com/) + +Of course you can use another service, here you'll find an example of how to do it with Mailerlite but please feel free to use any other service you like. + +### Enable RSS feed + +The RSS feed is enabled by default in this blog, you can find it at `/rss.xml`. You can check it by going to `https://yourblog.com/feed.xml`. + +### Create a Mailerlite account + +Go to [Mailerlite](https://www.mailerlite.com/) and create an account. + +### Create a new form + +Go to the [forms section](https://dashboard.mailerlite.com/forms/embedded) and create a new form. You can create a simple form with just an email field. +Don't worry about the design, we won't use their form, we'll create our own. + +Look at the "HTML code" section and copy the form action URL, it should look like this: + +```html +
+``` + +Copy the form action URL, you'll need it later. + +### Add the form to your blog + +You just have to enable the newsletter section in the `nuxt.config.ts` file and add the form action URL you copied before. + +```typescript +newsletter: { + enabled: true, + form_action: "YOUR_FORM_ACTION_URL", +}, +``` + +### Create a new campaign + +Go to the [campaigns section](https://dashboard.mailerlite.com/campaigns/status/ready) and create a new **RSS** campaign. Then, the rest should be straightforward, just follow the steps. + +And voilà! You have a newsletter for your static blog. People can sign up and they'll receive an email every time you publish a new post. diff --git a/content/guides/guide1.md b/content/guides/guide1.md new file mode 100644 index 0000000..248931b --- /dev/null +++ b/content/guides/guide1.md @@ -0,0 +1,12 @@ +--- +title: "First guide" +description: "I'm testing how to make a guide" +date: "2025-02-25" +categories: + - guides +tags: + - guides +--- +# Guide 1 + +this is a guide diff --git a/content/index.md b/content/index.md new file mode 100644 index 0000000..9e52365 --- /dev/null +++ b/content/index.md @@ -0,0 +1,7 @@ +--- +title: "Home - Bloggrify - Mistral" +description: "This is the home page of the Bloggrify Mistral theme. It is a simple and clean theme for your blog." +listed: false +layout: "home" +--- + diff --git a/content/katex.md b/content/katex.md new file mode 100644 index 0000000..c6b6843 --- /dev/null +++ b/content/katex.md @@ -0,0 +1,42 @@ +--- +id: "9" +title: "Mathematics with KaTeX" +description: "Announcing KaTeX Support: Easily Embed Mathematical Formulas in Bloggrify" +date: "2024-06-08" +cover: "covers/lyon.jpg" +--- + +## Announcing KaTeX Support: Easily Embed Mathematical Formulas in Bloggrify + +Hello, readers! We have some exciting news for all the math enthusiasts and educators out there. Bloggrify now supports KaTeX, allowing you to seamlessly embed mathematical formulas and equations directly into your Markdown posts. This powerful new feature makes it easier than ever to create and share content that includes complex mathematical notation. + +KaTeX is a fast, easy-to-use JavaScript library for TeX math rendering on the web. It is a robust and efficient way to render mathematical formulas in your markdown files. + +You can find more information on the [official website](https://katex.org/). + +## Getting Started with KaTeX + +### Mathematical formulas + +**Centered formula** +$$ +L = \frac{1}{2} \rho v^2 S C_L +$$ + +**Using code block** +```math +\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right) +``` + +**Inline formula** + +This is an inline formula $a^2 + b^2 = c^2$. + +## Conclusion +With KaTeX support, Bloggrify opens up new possibilities for creating rich, educational content. Whether you're a teacher, a student, or just someone who loves math, this feature will help you communicate complex ideas more effectively. + +We can’t wait to see how you use KaTeX in your Bloggrify posts. Share your thoughts and creations with us, and stay tuned to Bloggrify for more updates and tutorials! + +Happy blogging! + +The Bloggrify Team diff --git a/content/launching.md b/content/launching.md new file mode 100644 index 0000000..42eea6c --- /dev/null +++ b/content/launching.md @@ -0,0 +1,49 @@ +--- +id: "33" +title: "First official blog of Bloggrify " +description: "Launching the first official blog of Bloggrify" +tags: + - release +date: "2024-01-18" +cover: "covers/andalousia.jpg" +--- + +Welcome to Mistral: The Power of Static Blog Generation with Bloggrify + +Welcome to Mistral, a blog powered entirely by Bloggrify, your new go-to static blog generator! Whether you’re a seasoned developer or a blogging enthusiast, Bloggrify simplifies the process of creating and maintaining a static blog, offering the perfect blend of ease and power. + +## What is Bloggrify? + +Bloggrify is a versatile and robust static blog generator, similar to Hugo, Jekyll, and HubPress. It transforms your plain text files into a beautifully structured, fast, and secure static website. With Bloggrify, you can focus on creating content while we handle the rest. + + +## Why Choose Bloggrify? + +1. Speed and Performance: + Static sites are renowned for their speed. Since there are no database queries to slow things down, your pages load almost instantly. + +2. Security: + Static sites have a smaller attack surface compared to dynamic sites because they don't rely on server-side processing. This makes Bloggrify an excellent choice for those concerned about online security. + +3. Simplicity and Flexibility: + Bloggrify supports Markdown for content creation, making it easy to write and format your posts. You have full control over your site’s structure and appearance, with a variety of templates and customization options available. + +4. Cost-Effective: + Static sites can be hosted on inexpensive or even free platforms. With Bloggrify, you can deploy your blog to platforms like GitHub Pages, Netlify, or any other static web hosting service without any hassle. + +## Welcome to Mistral + +Mistral is more than just a blog; it's a demonstration of what you can achieve with Bloggrify. From sleek design to smooth functionality, Mistral showcases the capabilities of Bloggrify, proving that creating a professional, high-performing blog doesn’t have to be complicated or time-consuming. + +## Getting Started with Bloggrify + +Ready to start your own blog? Follow the official [Bloggrify documentation](https://bloggrify.com/introduction/installation) to set up your blog, customize your theme, and create your first post. + +## Join the Bloggrify Community +We’re thrilled to have you join us on this journey. Follow Mistral for regular updates, tips, and tutorials on making the most out of Bloggrify. Whether you’re sharing your thoughts, showcasing your work, or building a community, Bloggrify is here to help you create a stunning static blog effortlessly. + +Feel free to explore Mistral, and [let us know what you think](https://github.com/bloggrify/bloggrify/issues). Your feedback is invaluable as we continue to improve and expand the capabilities of Bloggrify. + +Happy blogging! + +The Bloggrify Team diff --git a/content/markdown.md b/content/markdown.md new file mode 100644 index 0000000..04af0bc --- /dev/null +++ b/content/markdown.md @@ -0,0 +1,245 @@ +--- +id: "2" +title: "Markdown cheat sheet" +description: "This is a markdown cheat sheet. It shows you how to use markdown to format your blog posts on Bloggrify." +date: "2024-02-10" +categories: + - markdown + - documentation +tags: + - markdown + - sample + - thailand + +cover: "covers/thailand.jpg" +--- + +This blog is a static blog generator that uses markdown files to generate blog posts. +It uses [Nuxt-content](https://content.nuxt.com/) under the hood. + +:toc + +## Standard markdown features +You can use all standard markdown features such as: +text formatting, images, links, code blocks, etc. + +You should read the [official markdown documentation](https://www.markdownguide.org/) to learn more about markdown. +Edit this file to see how it works. + +## Horizontal Rules + +___ + +--- + +*** + + +## Emphasis + +**This is bold text** + +__This is bold text__ + +*This is italic text* + +_This is italic text_ + +~~Strikethrough~~ + +## Blockquotes + + +> Blockquotes can also be nested... +>> ...by using additional greater-than signs right next to each other... +> > > ...or with spaces between arrows. + + +## Lists + +Unordered + ++ Create a list by starting a line with `+`, `-`, or `*` ++ Sub-lists are made by indenting 2 spaces: + - Marker character change forces new list start: + * Ac tristique libero volutpat at + + Facilisis in pretium nisl aliquet + - Nulla volutpat aliquam velit ++ Very easy! + +Ordered + +1. Lorem ipsum dolor sit amet +2. Consectetur adipiscing elit +3. Integer molestie lorem at massa + + +1. You can use sequential numbers... +1. ...or keep all the numbers as `1.` + +Start numbering with offset: + +57. foo +1. bar + + +## Code + +Inline `code` + +Indented code + + // Some comments + line 1 of code + line 2 of code + line 3 of code + + +Block code "fences" + +``` +Sample text here... +``` + +Nuxt-content provide code highlighting with [shiki](https://github.com/shikijs/shiki). You can specify the language of the code block to enable syntax highlighting: +This is a paragraph with a code block: +``` js +var foo = function (bar) { + return bar++; +}; + +console.log(foo(5)); +``` + +It's also possible to display a code block with a specific file name: +```js [file.js] + export default () => { + console.log('Code block') + } +``` + + +## Tables + +| Option | Description | +| ------ | ----------- | +| data | path to data files to supply the data that will be passed into templates. | +| engine | engine to be used for processing templates. Handlebars is the default. | +| ext | extension to be used for dest files. | + +Right aligned columns + +| Option | Description | +| ------:| -----------:| +| data | path to data files to supply the data that will be passed into templates. | +| engine | engine to be used for processing templates. Handlebars is the default. | +| ext | extension to be used for dest files. | + + +## Links + +[link text](https://www.google.com) + +[link with title](https://www.google.com "title text!") + +Autoconverted link https://www.google.com + +## Youtube and Twitter embed + +You can embed youtube videos and tweets in your markdown files. + +https://www.youtube.com/watch?v=su2gNQJkteg + +https://twitter.com/hugolassiege/status/1750435525071159309 + + +## Images + + +This is a paragraph with an image ![the image is automatically centered on the page and the alt text is displayed below as a caption](/android-chrome-192x192.png). + + +## Emojies + +> Classic markup: :wink: :cry: :laughing: :yum: + + + +### [Footnotes](https://github.com/markdown-it/markdown-it-footnote) + +Footnote 1 link[^first]. + +Footnote 2 link[^second]. + +Duplicated footnote reference[^second]. + +[^first]: Footnote **can have markup** + + and multiple paragraphs. + +[^second]: Footnote text. + +## Advanced markdown features + +You can use advanced markdown features such as graphs, mathematical formulas and custom components. + +## Graphs + +You can use [mermaid](/mermaid) to create diagrams and flowcharts. + +Here is an example of a basic flowchart: + +```mermaid +graph TD; + A-->B; + A-->C; + B-->D; + C-->D; +``` + +## Mathematical formulas + +**Centered formula** +$$ +L = \frac{1}{2} \rho v^2 S C_L +$$ + +**Using code block** +```math +\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right) +``` + +**Inline formula** + +This is an inline formula $a^2 + b^2 = c^2$. + + +## Frontmatter +It also supports frontmatter to add metadata to your markdown files. + +```yaml +--- +id: "2" +title: "Use markdown power" +description: "Use markdown at its full potential." +date: "2024-02-09" +tags: + - markdown +cover: "doc/markdown.png" +--- +``` + +* `id` is mandatory if you want to use the comment system. It is used to identify the article. +* `title` and `description` are used for SEO and social sharing. It's also used on the index page. Don't forget to fill them. +* `date` is used to sort the articles. Date in the future will not be displayed. +* `tags` are only used to display the tags on the article page. It's optional. +* `cover` is used to display an image on the index page. It's also used when you share your article on social media. It's optional (it's however better to have one). + + +## Custom components + +::alert{type="tip"} +On top of the standard markdown features, you can also use custom components with Vue.js to extend markdown features. +Read the [custom components documentation](/custom-components) to learn more. + +:: diff --git a/content/mermaid.md b/content/mermaid.md new file mode 100644 index 0000000..4c2119d --- /dev/null +++ b/content/mermaid.md @@ -0,0 +1,137 @@ +--- +id: "4" +title: "Adding mermaid support" +description: "Introducing MermaidJS Support: Create Stunning Diagrams in Bloggrify" +date: "2024-06-13" +categories: + - markdown + - documentation +tags: + - markdown + - mermaid +cover: "covers/santorin.jpg" +--- + +## Introducing MermaidJS Support: Create Stunning Diagrams in Bloggrify + +Hello, readers! We are thrilled to announce another fantastic addition to Bloggrify: support for MermaidJS. With MermaidJS, you can now effortlessly create and embed beautiful diagrams and flowcharts directly in your Markdown posts. This powerful feature is perfect for visualizing complex information, making your content more engaging and easier to understand. + +:toc{showChildren=true} + + +## What is MermaidJS? +MermaidJS is a JavaScript library that allows you to generate diagrams and flowcharts from text in a Markdown-like syntax. It supports a wide range of diagram types, including flowcharts, sequence diagrams, class diagrams, state diagrams, and more. MermaidJS is designed to be easy to use, yet powerful enough to handle complex visualizations. + +You'll find more information on the [official website](https://mermaid-js.github.io/mermaid/). + +## Why Use MermaidJS in Bloggrify? +Adding MermaidJS support to Bloggrify brings several advantages: + +* Visualization: Enhance your content with clear and concise diagrams that help illustrate complex concepts. +* Ease of Use: Write simple text in MermaidJS syntax within your Markdown files to create sophisticated diagrams. +* Versatility: MermaidJS supports a variety of diagram types, making it suitable for many use cases, from technical documentation to process flows. + +## Example Usage + +### Flowchart + +```mermaid +graph TD; + A-->B; + A-->C; + B-->D; + C-->D; +``` + +### Sequence Diagram + +```mermaid +sequenceDiagram + participant Alice + participant Bob + Alice->>John: Hello John, how are you? + loop Healthcheck + John->>John: Fight against hypochondria + end + Note right of John: Rational thoughts
prevail... + John-->>Alice: Great! + John->>Bob: How about you? + Bob-->>John: Jolly good! +``` + +### Gantt Chart + +```mermaid +gantt + title A Gantt Diagram + dateFormat YYYY-MM-DD + section Section + A task :a1, 2024-02-10, 30d + Another task :after a1 , 20d + section Another + Task in sec :2024-02-12 , 12d + another task : 24d +``` + +### Class Diagram + +```mermaid +classDiagram + Animal <|-- Duck + Animal <|-- Fish + Animal <|-- Zebra + Animal : +int age + Animal + Duck : +String beakColor + Duck : +swim() + Fish : +int sizeInFeet + Fish : +canEat() + Zebra : +bool is_wild + Zebra : +run() +``` + +### State Diagram + +```mermaid +stateDiagram + [*] --> Still + Still --> [*] + Still --> Moving + Moving --> Still + Moving --> Crash + Crash --> [*] +``` + +### Pie Chart + +```mermaid +pie + title Key elements in Product X + "Calcium" : 42 + "Potassium" : 50 + "Magnesium" : 10 +``` + + +### User Journey + +```mermaid +journey + title My working day + section Go to work + Make tea: 5: Me + Go upstairs: 3: Me + Do work: 1: Me, Cat + section Go home + Go downstairs: 5: Me + Sit down: 5: Me +``` + +## Conclusion + +With MermaidJS support, Bloggrify empowers you to create dynamic, informative, and visually appealing content. Whether you need to visualize workflows, represent complex systems, or simply add a touch of creativity to your posts, MermaidJS is the perfect tool. + +We look forward to seeing the amazing diagrams you create with MermaidJS in your Bloggrify posts. Share your experiences and feedback with us, and stay tuned to Mistral for more exciting updates and tutorials! + +Happy blogging! + diff --git a/content/posuere.md b/content/posuere.md new file mode 100644 index 0000000..93cad8f --- /dev/null +++ b/content/posuere.md @@ -0,0 +1,59 @@ +--- +id: "5" +title: "Customizing Your Blog: Using and Creating Themes" +description: "Learn how to theme your blog with Bloggrify." +date: "2024-02-09" +tags: + - theming +cover: "covers/france.jpg" +--- + +Welcome back to Mistral! In our first post, we introduced you to Bloggrify, our powerful static blog generator. Today, we're diving deeper into one of the most exciting features of Bloggrify: theming. + +## Choose a Predefined Theme + +Bloggrify comes with a variety of predefined themes that cater to different styles and preferences. Whether you prefer a minimalist design, a vibrant layout, or something in between, there's a theme for you. Here’s how you can get started: + +1. Browse [the Themes](https://bloggrify.com/templates) + +* Visit our themes gallery on the Bloggrify website to explore the available options. +* Each theme comes with a preview and a brief description, making it easy to find one that suits your taste. + +2. Install a Theme: + +* Once you’ve found a theme you like, follow the simple installation instructions provided in the theme’s documentation. +* Apply the theme to your blog, and watch your site transform instantly. + +## Create Your Own Theme + +For those who want full creative control, Bloggrify allows you to create your own custom themes. This is a fantastic way to ensure your blog looks exactly how you want it to. Here’s a brief overview of the process: + +1. Understand the Basics: + +Familiarize yourself with Bloggrify’s theming structure. Our [official theming documentation](https://bloggrify.com/reference/theming) provides all the details you need to get started. +Learn about the components and structure of a Bloggrify theme, including templates, stylesheets, and configuration files. + +3. Start Building: + +Create the basic files and folders required for a Bloggrify theme. +Use HTML, CSS, and JavaScript to design your layout and style your blog. +Take advantage of Bloggrify’s templating engine to integrate dynamic content into your static pages. + +4. Test and Refine: + +Continuously test your theme to ensure it looks good and functions correctly across different devices and browsers. +Refine your design based on feedback and personal preference. + +5. Share Your Theme: + +Once you’re happy with your custom theme, consider sharing it with the Bloggrify community. Your unique design could inspire others! + +## Learn More +For a detailed guide on theming, including step-by-step instructions and best practices, check out the [official theming documentation](https://bloggrify.com/reference/theming) on the Bloggrify website. This comprehensive resource covers everything from basic setup to advanced customization techniques. + +## Conclusion +Whether you choose a predefined theme or create your own, Bloggrify provides the tools and flexibility you need to make your blog truly yours. Experiment with different designs, find your unique style, and make your blog stand out. + +Stay tuned to Mistral for more tips and tutorials on getting the most out of Bloggrify. Happy theming! + +The Bloggrify Team diff --git a/content/test.md b/content/test.md new file mode 100644 index 0000000..efb5ee6 --- /dev/null +++ b/content/test.md @@ -0,0 +1,14 @@ +--- +title: "My first blog post" +description: "This is my first blog post" +date: "2024-02-24" +categories: + - blog + - opensource +tags: + - tag1 + - tag2 +--- +# My first blog post + +This is my first blog post. I hope you will enjoy it. diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png new file mode 100644 index 0000000..b7b1450 Binary files /dev/null and b/public/android-chrome-192x192.png differ diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png new file mode 100644 index 0000000..d5942fb Binary files /dev/null and b/public/android-chrome-512x512.png differ diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png new file mode 100644 index 0000000..5e09823 Binary files /dev/null and b/public/apple-touch-icon.png differ