chore: comply with obsidian guideline

Author: idlist

README.md

@@ -1,90 +1,107 @@
 # Flakepiles for Obsidian
 
-An Obsidian plugin to put small stickies / cards in a single file, and manage them in masonry layout.
+An Obsidian plugin to put small notes / stickies / cards in a dedicated file, and manage them in masonry layout.
 
-The underlying file format (`.flakes`) is JSON. The plugin is in early development, though basic features should now work properly.
+A "flake" means a small piece of note, and a "flakepile" is a pile of those flakes.
+
+Can be used to store ideas, diaries, code snippets, and more.
+
+*The preview image is in horizontal layout. You can change this to vertical layout.*
 
 ![preview](docs/preview.jpg)
 
-## Installation
+## Why
 
-The plugin is not published as Obsidian's community plugin yet. Please use [BRAT](https://github.com/TfTHacker/obsidian42-brat) to install the plugin. I might (or might not) submit the plugin later.
+I don't want 100 `.md` files with 1 sentence each.
 
 ## Status
 
-Basic features. I've tested many edge cases I can think of, and [I myself am using it currently](https://en.wikipedia.org/wiki/Eating_your_own_dog_food), but please expect bugs exist.
+ The plugin is in early development, though basic features should now work properly. I've tested many cases I can think of, and [I myself am using it currently](https://en.wikipedia.org/wiki/Eating_your_own_dog_food), but please expect bug exists in corner cases.
 
-## Why
+## Installation
 
-I don't want 100 `.md` files with 1 sentence each.
+The plugin is not published as Obsidian's community plugin yet. Please use [BRAT](https://github.com/TfTHacker/obsidian42-brat) to install the plugin, or copy the files under the release tag to the plugin folder of your Obsidian application. You can also [build it from source](#build-from-source).
 
 ## Tech Stack
 
 Vite + Vue 3 + TypeScript + Sass
 
-Using Vite as I'm using Vue, using Vue as I'm mostly familiar with it.
+The underlying file format (`.flakes`) is JSON. See the [non-goals](#non-goals) section for explanation.
+
+## Roadmap
 
-## Goals
+Inside a flakepile:
 
 - [x] Mount Vue into Obsidian
 - [x] Flakepile
   - [x] Masonry layout
   - [x] Masonry direction (vertical / horizontal)
-  - [x] (Sort of) Mobile-adaptive layout
+  - [x] (Sort of) mobile-adaptive layout
   - [x] Flake size
   - [x] Flake elastic sizing
   - [x] Flake sorting (name, time created, time modified)
 - [x] Flake
   - [x] Flake creation, update, deletion
   - [x] Flake markdown rendering
-  - [x] Text Flake
-  - [x] Code Flake
-  - [x] Image Flake
-- [x] Search filter inside a Flakepile
+  - [x] Text flake
+  - [x] Image flake
+  - [x] Code flake
+- [x] Search filter inside a flakepile
 - [ ] Flake colors (theme)
 - [ ] Flake labels
   - [ ] Label creation, update, deletion
-  - [ ] Add / remove label to Flake
+  - [ ] Add / remove label to flake
   - [ ] Label color
-  - [ ] Hide specific label (display as `+N`)
+  - [ ] Hide some labels (display as `+N`)
   - [ ] Label filtering
+
+Obsidian-wise:
+
+- [x] "Create new flakepile" file menu option
+- [x] "Flake count" status bar item [1]
 - Limited support to internal plugins
   - [x] Preview other markdown file
-  - [x] Jump to global search when clicking on a tag.
+  - [x] Jump to global search when clicking on a tag
+
+[1] Due to the nature of this plugin, other status bar items are hided in flakepile view. Please let me know if you think some status bar item should be displayed.
 
 ## Long term goals
 
 - Search keywords highlight
-- Copy Flake across Flakepile (the Copy Raw botton is for this)
+- Copy flake across flakepiles (the "copy raw" botton is for this)
+- Export files to markdown files
+  - Export as a single markdown file
+  - Export as a `.zip` archive, each flake as a markdown file
+- Import the `.zip` archive to a flakepile
 - Import multiple markdown files to Flakes
-- Import `.zip` archive to a Flakepile
-  - Import as a new Flakepile
-  - Import into an existing Flakepile
-- Export files to a `.zip` archive, each Flake as a markdown file
-- Transition animation (investigated a bit, mostly jank, needs help)
 
 ## Non-goals
 
-- Very large Flakepile support (not the very intended way)
-- Live editing of Flake (too complex)
+- Freedom / manual layout (consider using Canvas)
+- Very large flakepile support (not the very intended way)
+- Live editing of a flake (too complex)
 - Cross-file searching / Obsidian-wise searching (restricted by API)
-- Global search indexing support (restricted by API)
-- Unit testing (do not have time)
+- Global search indexing (restricted by API)
+- Unit testing (do not have enough time)
+
+I recognize that this plugin is not so an Obsidian-style plugin, as it does not leverage markdown file like many other plugins do. On the other hand, this has the benefit of not having to juggle with black magics that makes a markdown file look like other layout (when the layout itself is quite complicated).
+
+Also, this plugin is primarily to fulfill my specific need. For this reason, I would prioritize maintainability over adding unplanned features. I'm open to suggestions, though feature requests might be considered only when it's aligned to my own use case. 🙏
 
 ## Build from source
 
 If you want to take a look inside the development of the plugin, or just want to ensure maximum safety, you can clone this repository and build from source:
 
 ```
 npm i
-npm run dev       // watch mode, works with hot reload [1]
-npm run build:dev // one-time dev build without minification
-npm run build     // build for production
+npm run dev       // Watch mode, works with hot reload [1]
+npm run build:dev // One-time dev build without minification
+npm run build     // Build for production
 ```
 
 [1] [Hot reload](https://github.com/pjeby/hot-reload)
 
-With `npm run build`, the output files will be copied to `dist` folder.
+WHen running `npm run build`, the output files will be copied to `dist` folder.
 
 ## License
 

eslint.config.ts

@@ -77,7 +77,7 @@ export default defineConfig(
       },
     },
     rules: {
-      'obsidianmd/ui/sentence-case': 'off',
+      'obsidianmd/ui/sentence-case': 'warn',
     },
   },
   {

manifest.json

@@ -1,9 +1,9 @@
 {
   "id": "flakepiles",
   "name": "Flakepiles",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "minAppVersion": "0.15.0",
-  "description": "Put small stickies / cards in a single file. Manage them in masonry layout.",
+  "description": "Put small stickies / cards in a dedicated file. Manage them in masonry layout.",
   "author": "i'DLisT",
   "authorUrl": "https://idl.ist",
   "isDesktopOnly": false

package.json

@@ -1,7 +1,7 @@
 {
   "name": "flakepiles",
-  "version": "0.1.2",
-  "description": "Put small stickies / cards in a single file. Manage them in masonry layout.",
+  "version": "0.1.3",
+  "description": "Put small stickies / cards in a dedicated file. Manage them in masonry layout.",
   "main": "main.js",
   "type": "module",
   "scripts": {

src/app.ts

@@ -205,7 +205,7 @@ export class FlakepileApp extends TextFileView {
       this.parsed.value = true
     } catch (e) {
       this.parsed.value = false
-      new Notice('Cannot parse Flakepile file. Check dev console for more info.', 0)
+      new Notice('Cannot parse the flakepile. Check dev console for more info.', 0)
       console.error('Cannot parse Flakepile file: ', e)
       return
     }

src/data.ts

@@ -44,6 +44,7 @@ export interface FlakeLabel {
   id: string
   name: string
   color: FlakeLabelColor
+  show: boolean
   filter: boolean
 }
 
@@ -52,6 +53,7 @@ export const createLabel = (): FlakeLabel => {
     id: nanoid(8),
     name: '',
     color: 'none',
+    show: true,
     filter: false,
   }
 }

src/globals.scss

@@ -117,7 +117,7 @@
   }
 
   >.plugin-flakepiles,
-  >.plugin-remotely-sync {
+  >.plugin-remotely-save {
     display: block;
   }
 }

src/main.ts

@@ -22,7 +22,7 @@ export default class Flakepiles extends Plugin {
 
       menu.addItem((item) => {
         item
-          .setTitle('Create new Flakepile')
+          .setTitle('Create new flakepile')
           .setIcon('sticker')
           .onClick(async () => {
             await this.createFlakepileFile(file)
@@ -79,8 +79,8 @@ export default class Flakepiles extends Plugin {
 
       await this.app.workspace.getLeaf().openFile(newFile)
     } catch (e) {
-      new Notice('Failed to create Flakepile. Check dev console for more info.', 0)
-      console.error('Failed to create Flakepile: ', e)
+      new Notice('Failed to create flakepile. Check dev console for more info.', 0)
+      console.error('Failed to create flakepile: ', e)
     }
   }
 
@@ -101,6 +101,6 @@ export default class Flakepiles extends Plugin {
     const flakepile = this.app.workspace.getActiveViewOfType(FlakepileApp)
     if (!flakepile) return
 
-    this.flakeCount?.setText(`${flakepile.pile.value.flakes.length} Flake(s)`)
+    this.flakeCount?.setText(`${flakepile.pile.value.flakes.length} flake(s)`)
   }
 }

src/vue/FlakeView.vue

@@ -209,7 +209,7 @@ const copyContent = async () => {
     await navigator.clipboard.writeText(props.flake.content)
     new Notice('Content copied.', 1000)
   } catch (e) {
-    console.warn(`Failed to copy the content of Flake ${props.flake.id}: `, e)
+    console.warn(`Failed to copy the content of flake ${props.flake.id}: `, e)
     new Notice('Failed to copy content. Check dev console for detail.', 0)
   }
 }
@@ -219,7 +219,7 @@ const copyJson = async () => {
     await navigator.clipboard.writeText(JSON.stringify(props.flake, null, 2))
     new Notice('Raw JSON copied.', 1000)
   } catch (e) {
-    console.warn(`Failed to copy the raw JSON of Flake ${props.flake.id}: `, e)
+    console.warn(`Failed to copy the raw JSON of flake ${props.flake.id}: `, e)
     new Notice('Failed to copy raw JSON. Check dev console for detail.', 0)
   }
 }
@@ -300,7 +300,7 @@ const cssTypeIsImage = useCssIf(isImage, 'selected')
       <div ref="el-content"
         :class="['flake-content', cssViewImage]">
         <div v-if="isView && isEmpty" class="none">
-          No Content
+          No content
         </div>
 
         <div v-if="isView"
@@ -384,7 +384,7 @@ const cssTypeIsImage = useCssIf(isImage, 'selected')
           <div class="expand"></div>
 
           <label class="withlabel -atleft">
-            <span>Image Only</span>
+            <span>Image only</span>
             <input v-model="flake.imageOnly" type="checkbox" />
           </label>
         </div>

src/vue/FlakepileView.vue

@@ -186,7 +186,7 @@ const cssNoLabel = useCssIf(isViewportSmall, '-nolabel')
           <MenuButton
             :class="['fp-btn-icon-label', cssNoLabel]"
             icon="plus"
-            label="Add Flake"
+            label="Add flake"
             @click="addFlake" />
 
           <ObSearch v-model="searchQuery" class="wfull" />
@@ -208,11 +208,11 @@ const cssNoLabel = useCssIf(isViewportSmall, '-nolabel')
 
           <div class="expand"></div>
 
-          <label>Sort By</label>
+          <label>Sort by</label>
           <select v-model="pile.sortBy" class="dropdown">
             <option value="name">Name</option>
-            <option value="createdAt">Time Created</option>
-            <option value="modifiedAt">Time Modified</option>
+            <option value="createdAt">Time created</option>
+            <option value="modifiedAt">Time modified</option>
           </select>
           <button
             v-if="pile.sortOrder == 'desc'"
@@ -274,7 +274,7 @@ const cssNoLabel = useCssIf(isViewportSmall, '-nolabel')
 
     <div class="content">
       <div ref="el-canvas" :class="['sub-layout', cssAdaptiveFlow]">
-        <div v-if="!pile.flakes.length" class="no-flakes">No Flakes</div>
+        <div v-if="!pile.flakes.length" class="no-flakes">No flakes.</div>
 
         <MasonryUnified v-else
           :id="pile.id"