Jotrockenmitlocken

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).

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

About The Project
- Built With
- Key Features
Getting Started
- Prerequisites
- Installation
Tests
Roadmap
Contributing
License
Contact
Acknowledgements

About The Project

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

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 😉
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

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	✔️

Built With

Flutter/Dart

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 --web-renderer canvaskit --profile --web-port 8080 --web-hostname 0.0.0.0

Prerequisites

Installation

Clone the repo

git clone --recurse-submodules [email protected]: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.

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

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_ - [email protected]

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

Literature

Some very helpful literature, tutorials, etc.

Flutter/Dart

kataglyphis / flutterrepo Goto Github PK

flutterrepo's Introduction