Two Dishes One Fish

screenshot of Two Dishes One Fish
vuepress
tailwind

A VuePress-next template.

Overview

"Two dishes one fish" is a web project that served as a blog and a knowledge management system, using a Markdown file system. It utilized VuePress as the generator to compile Markdown files to HTML files and deploy the static site to GitHub Pages. The project aimed to optimize the browsing experience of the website and posts.

Features

  • Dual-purpose Markdown Files: Markdown files can be categorized as both blog posts and notes or solely as notes.
  • Blog Post Navigation Page: A navigation page is added for blog posts, showing them as cards. Users can browse the posts in cards grid mode, cards masonry mode, or posts list mode.
  • Notes Navigation Page: All Markdown files are treated as notes, displayed in a grid layout following the same structure as the file system. The notes are powered by D3.js, and users can browse them in a tree chart.
  • Tagging System: Users can add tags to Markdown files and filter posts or notes on the navigation page based on these tags.
  • Responsive Web Design: The website follows the principles of responsive web design, allowing users to browse the site on different screen sizes.

Summary

"Two dishes one fish" was a project aimed at creating a blog and knowledge management system using a Markdown file system. It utilized VuePress as the generator and provided features such as dual-purpose Markdown files, navigation pages for blog posts and notes, a tagging system, and responsive web design. Although the project is no longer in maintenance, it served as an inspiration for a more advanced successor repository called "BlogiNoteTwo Dishes One Fish".

vuepress
Vuepress

VuePress is a minimalistic static site generator based on Vue.js that allows developers to create fast, SEO-friendly, and customizable documentation websites.

tailwind
Tailwind

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.

postcss
Postcss

PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.