Obsigen

Displaying your Obsidian notes in a year calendar view through icons. Use the yaml frontmatter to add the date and icon to your notes. The plugin will read the yaml and display the notes in the calendar view. The icon is defined on "tag" property.

Folder Structure

Following the DDD principles, the project is divided into three layers: core, adapters and shared.

📦obsigen
 ┣📦src
 ┣ 📂adapters
 ┃ ┗ 📂Obsidian
 ┃ ┃ ┣ 📜MenuPrincipal.ts
 ┃ ┃ ┣ 📜PromptModal.ts
 ┃ ┃ ┣ 📜SampleModal.ts
 ┃ ┃ ┗ 📜SampleSettingTab.ts
 ┣ 📂assets
 ┃ ┗ 📜church.js
 ┣ 📂core
 ┃ ┣ 📂hooks
 ┃ ┃ ┗ 📜useApp.ts
 ┃ ┣ 📂notes
 ┃ ┃ ┣ 📂__mocks__
 ┃ ┃ ┃ ┗ 📜obsidian.ts
 ┃ ┃ ┣ 📂aniversario
 ┃ ┃ ┃ ┣ 📜Aniversario.test.ts
 ┃ ┃ ┃ ┗ 📜Aniversario.ts
 ┃ ┃ ┣ 📂biblia
 ┃ ┃ ┃ ┗ 📂versiculo
 ┃ ┃ ┣ 📂calendar
 ┃ ┃ ┃ ┣ 📜Calendar.ts
 ┃ ┃ ┃ ┣ 📜CalendarDay.scss
 ┃ ┃ ┃ ┣ 📜CalendarDay.tsx
 ┃ ┃ ┃ ┣ 📜CalendarEvent.scss
 ┃ ┃ ┃ ┣ 📜CalendarEvent.ts
 ┃ ┃ ┃ ┣ 📜CalendarIcon.scss
 ┃ ┃ ┃ ┣ 📜CalendarIcon.tsx
 ┃ ┃ ┃ ┣ 📜CalendarMonth.scss
 ┃ ┃ ┃ ┣ 📜CalendarMonth.tsx
 ┃ ┃ ┃ ┣ 📜CalendarTitle.tsx
 ┃ ┃ ┃ ┣ 📜CalendarView.ts
 ┃ ┃ ┃ ┣ 📜CalendarYear.scss
 ┃ ┃ ┃ ┣ 📜CalendarYear.tsx
 ┃ ┃ ┃ ┗ 📜calendar.scss
 ┃ ┃ ┣ 📂captureUrl
 ┃ ┃ ┃ ┣ 📜CaptureUrl.test.ts
 ┃ ┃ ┃ ┣ 📜CaptureUrl.ts
 ┃ ┃ ┃ ┣ 📜CaptureUrlModal.scss
 ┃ ┃ ┃ ┗ 📜CaptureUrlModal.ts
 ┃ ┃ ┣ 📂daily
 ┃ ┃ ┃ ┗ 📜Daily.ts
 ┃ ┃ ┣ 📂momento
 ┃ ┃ ┃ ┗ 📜Momento.ts
 ┃ ┃ ┣ 📜NoteGenerator.test.ts
 ┃ ┃ ┗ 📜NoteGenerator.ts
 ┃ ┗ 📂shared
 ┃ ┃ ┣ 📂interface
 ┃ ┃ ┃ ┣ 📜MyPluginSettings.ts
 ┃ ┃ ┃ ┗ 📜iYaml.ts
 ┃ ┃ ┣ 📂templates
 ┃ ┃ ┃ ┗ 📜Yaml.tsx
 ┃ ┃ ┗ 📜appContext.ts
 ┣ 📂ui
 ┃ ┗ 📜common.scss
 ┣ 📜main.ts
 ┣ 📜styles.css
 ┗ 📜styles.scss
 ┣ 📂var
 ┃ ┣ 📜MonthView.ts
 ┃ ┣ 📜NoteGenerator.ts
 ┃ ┣ 📜NoteGeneratorAllInOne.ts
 ┃ ┣ 📜NoteGeneratorCaller.ts
 ┃ ┗ 📜template.yaml
 ┣ 📜.babelrc
 ┣ 📜.editorconfig
 ┣ 📜.eslintignore
 ┣ 📜.eslintrc
 ┣ 📜.gitignore
 ┣ 📜.npmrc
 ┣ 📜README.md
 ┣ 📜babel.config.js
 ┣ 📜esbuild.config.mjs
 ┣ 📜jest.config.js
 ┣ 📜manifest.json
 ┣ 📜package-lock.json
 ┣ 📜package.json
 ┣ 📜tsconfig.json
 ┣ 📜version-bump.mjs
 ┗ 📜versions.json

Installation

To install and set up the "Obsigen" project on a new environment using Ubuntu on WSL2, follow these steps:

Step 1: Install Node.js and npm

# Update the system and repositories
sudo apt update
sudo apt upgrade

# Install Node.js (LTS version)
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt install -y nodejs

# Verify the installation
node -v
npm -v

Step 2: Clone the repository

# Navigate to your working directory
cd ~

# Clone the GitHub repository
git clone https://github.com/jesuserro/obsigen.git
cd obsigen

Step 3: Install project dependencies

# Install all dependencies listed in package.json
npm install

Step 4: Create the dataurls.ts file

To generate the dataurls.ts file in the src/assets/icons folder, run the following commands:

# Create the directory if it doesn't exist
mkdir -p src/assets/icons

# Create the dataurls.ts file
touch src/assets/icons/dataurls.ts

# Optional: Add an initial comment to the file
echo "// Placeholder for data URLs" > src/assets/icons/dataurls.ts

Step 5: Configure the environment variables

Create a .env file in the root of your project by copying the provided .env.example:

cp .env.example .env

#Edit the .env file to set the output directory path:
OUTPUT_DIR=/mnt/c/Users/jesus/Documents/vault/.obsidian/plugins/obsigen

Step 6: Install dotenv and create the tsconfig and copy scripts

Install dotenv:

npm install dotenv --save

Step 7: Install missing dependencies

Ensure you have turndown and its type declarations installed:

# Install turndown and its type declarations
npm install turndown --save
npm install @types/turndown --save-dev

Step 8: Clean and rebuild the project

Clean the cache and rebuild the project to ensure all dependencies are properly configured:

# Clean TypeScript cache and node_modules
rm -rf node_modules
rm -rf dist
npm install

# Rebuild the project
npm run build

Step 9: Run the development environment

# Start the development environment
npm run dev

(Optional) Update npm

# Update npm to the latest version
sudo npm install -g npm@latest

By following these steps, you should have your project configured and ready to use in your new environment. If you encounter any issues or need further assistance, feel free to consult the documentation or open an issue on the repository.

Links

• Use React in your plugin

Icons

• Obsidian Icons
• React Icons
• Lucide
• Hexadecimal Color Picker

Inspired by

• Obsidian Full Calendar
• Full Calendar
• Full Calendar Demos
• ODIN - Obsidian Driven Information Network

Funding