Jotrockenmitlocken

My personal blog as responsive web app using Flutter/Dart. Every blog post is written in pure markdown :boom: 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

Official docs are located here.

Visit jonasheinle.de for the full experience of my personal web blog. Cheers! :beers:
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).

🚀 Markdown is great 🚀:
If you also love the lightweight markdown approach you might be interested in my md2pdf-project that even allows you to convert markdown to a a4paper PDF or presentation slides PDF :satisfied:
🎉🎉🎉

Key Features • How To Use • Download • Credits • Related • License

About The Project

I always wanted an easy way to publish new content :metal: (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 :cat2:
• 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 :rocket: 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 developed my own WebDavClient that allows me to keep the content (.md files, images, videos, .csv, etc.) private while the source code stays Open Source. You might also be interested in keeping your data private. Have a look into my Build Pipeline File for more information

Content

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 :wink:
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

Publish a new blog post

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."
			}
		]
	},

Publishing posts over a book

• 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.csv file.

Localization

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

Key Features

Legend:

• ✔️ – completed
• 🔶 – in progress
• ❌ – not started

Built With

• Flutter/Dart
• WebDavClient Wrote my own WebDavClient for this repo :)

Getting Started

For help getting started with Flutter development, view the online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Run Web Server locally for Debugging

flutter run -d web-server --profile --web-port 8080 --web-hostname 0.0.0.0

Prerequisites

Installation

1. Clone the repo

   git clone --recurse-submodules git@github.com:Kataglyphis/jotrockenmitlocken.git
   

Roadmap

Upcoming :)

Contributing

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.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

MIT.

Known Issues

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.

Contact

Jonas Heinle - @Cataglyphis_ - jonasheinle@googlemail.com

Project Link: https://github.com/Kataglyphis/jonasheinle.de

Acknowledgements

Literature

Some very helpful literature, tutorials, etc.

Flutter/Dart

• Johannes Milke
• package repository for Dart and Flutter apps
• Official flutter web example