My personal blog as responsive web app using Flutter/Dart. Every blog post is written in pure markdown and therefore very lightweight to use and add new content. It is highly customizable for your needs, your personal web blog or you next Frontend project (not only web but also native Linux/Windows/Android/Web/iOS).
Note: If your run locally this website you are not able to neither navigate to the blog entries nor the book/film/... critics. Their "source content .md files" are my intellectual property and therefore only visible to me :) The flutter/dart source code stays Open Source of course
Visit jonasheinle.de for the full experience of my personal web blog. Cheers! 🍻
Visit my repo jotrockenmitlockenrepo if you are interested in Flutter/Dart development in general. All components in this repo are reusable for any target available (Linux/Windows/Android/Web).
Key Features • How To Use • Download • Credits • Related • License
Table of Contents
I always wanted an easy way to publish new content (blog posts, thoughts about books,...) fast. But why not just using a CMS? Here are my reasons:
- as the content is pure markdown my approach allows me to always change the technology easily, many CMS integrate the content very strongly into their technology
- therefore you will not make yourself dependent from my repo. You are always able to switch 🐈
- what if I want to build an UI for a native Linux application? Than all effort brought into building a web blog with a CMS is more or less useless. With this project I have a very huge reusable part leverage me to build also native UIs (with a Rust backend 🚀 f.e.)
- I want a very unique look and feel for my website. Therefore I want all power over my application which can be difficult with some drag-and-drop solutions.
- I want to learn front-end development and its challenges. Just using wordpress won't bring you there
I truly believe in open source. Hence you will get all source code for free use and ready to go.
My approach allows me to separate the website data from its view (MVC best practice). You will not see my blog posts(only the dummy entries) in this repo. They are my intellectual property 😉
The assets directory houses all files you want to include within your application namely:
- images
- videos
- data (.zip, .csv, ...)
- documents (f.e. .md for blog posts)
- fonts
- and the settings directory which harbors many different options for your own needs:
- global user settings: Here you can easily customize the blog for you. Set all necessary user related options (like email, name, image, etc...)
- All entries in the user_skills.json will be displayed in the corresponding section.
- app settings: set the app name, title. You are able to disable the footer; the supportedLocales field can have the following values:
- ["de"]: build a web app in pure german
- ["en"]: build a web app in pure english
- ["de","en"] or :["en","de"] You can switch between english and german
If you want to add a new blog bost do the following steps:
- Open the file
assets\settings\blog_settings.json - Append an entry like the following:
{
"routingName":"/aiBlog2",
"shortDescriptionEN":"AI playground 2",
"shortDescriptionDE":"AI Spielwiese 2",
"filePath":"assets/documents/blog/aiBlogPageEn.md",
"imageDir":"assets/images/aiBlog",
"githubRepo":"MachineLearningAlgorithms",
"fileTitle": "AIBlog.pdf",
"fileAdditionalInfo": "PDF version",
"fileBaseDir": "assets/documents/blog/",
"lastModified":"03.04.2024",
"landingPageAlignment":"left",
"landingPageEntryImagePath": "assets/images/ML_CV.jpeg",
"landingPageEntryImageCaptioning": "image source: https://pyimagesearch.com/2023/03/30/machine-learning-computer-vision/",
"docsDesc": [
{
"baseDir":"assets/documents/cv/",
"title":"CV_Jonas_Heinle_english.pdf",
"additionalInfo": "~3.7MB English"
},
{
"baseDir": "assets/documents/cv/",
"title": "CV_Jonas_Heinle_german.pdf",
"additionalInfo": "~3.7MB German"
},
{
"baseDir": "assets/data/",
"title": "WorleyNoiseTextures.zip",
"additionalInfo": "Use it for you own projects."
}
]
},- Open the file
assets\settings\my_two_cents_settings.json - Add an entry like the following
{
"routingName":"/books/fuenfGeheimnisse",
"filePath":"assets/documents/books/fuenfGeheimnisse.md",
"imageDir":"assets/images/aiBlog",
"mediaTitle":"Die fünf Geheimnisse, die Sie entdecken sollten, bevor Sie sterben",
"fileBaseDir": "assets/documents/books/",
"docsDesc": [
{
"baseDir":"assets/documents/cv/",
"title":"CV_Jonas_Heinle_english.pdf",
"additionalInfo": "~3.7MB English"
},
{
"baseDir": "assets/documents/cv/",
"title": "CV_Jonas_Heinle_german.pdf",
"additionalInfo": "~3.7MB German"
},
{
"baseDir": "assets/data/",
"title": "WorleyNoiseTextures.zip",
"additionalInfo": "Use it for you own projects."
}
]
},- Make sure that the mediaTitle you add here is availabale in the
assets\data\Buecherliste_gelesen.csvfile.
This project generates localized messages based on arb files found in
the lib/src/localization directory.
To support additional languages, please visit the tutorial on Internationalizing Flutter apps
| Feature | Implement Status |
|---|---|
| Add you media critics(books,films,..) easily | ✔️ |
| Markdown rendering | ✔️ |
| Publish blog posts by only editing a .json | ✔️ |
| Display .csv data | ✔️ |
| High degree of customization for yourself | ✔️ |
| Make your files (CV,thesis,..) open-/downloadable | ✔️ |
- Flutter/Dart
- WebDavClient Wrote my own WebDavClient for this repo :)
For help getting started with Flutter development, view the online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.
flutter run -d web-server --web-renderer canvaskit --profile --web-port 8080 --web-hostname 0.0.0.0- Clone the repo
git clone --recurse-submodules [email protected]:Kataglyphis/jotrockenmitlocken.git
Upcoming :)
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
MIT.
flutter_highlighter needs and update in line 94 from RichText to Text.rich to make it selectable. The developer just dont want to integrate the feature ... flutter_markdown is not in a very stable version. I had to manually edit the blockquote section for centering it. At the time of writing this they have an open issue on not being able to build and MarkdownBuilder for a blockquote.
Jonas Heinle - @Cataglyphis_ - [email protected]
Project Link: https://github.com/Kataglyphis/jonasheinle.de
Some very helpful literature, tutorials, etc.
Flutter/Dart