feat: reduce the area occupied by components

README.md

@@ -75,10 +75,10 @@ Go to the [releases](https://github.com/quanru/obsidian-periodic-para/releases)
 | P.A.R.A Notes Settings | Description |
 | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Enable | Whether to turn on PARA Notes |
-| Projects Folder | Default is '1. Projects', Set a folder where the PARA project is located, each subdirectory is a project, and each project must have a [XXX.]README.md file as the project index |
-| Areas Folder | Default is '2. Areas', Set a folder where the PARA area is located, each subdirectory is a area, and each area must have a [XXX.]README.md file as the area index |
-| Resources Folder | Default is '3. Resources', Set a folder where the PARA resource is located, each subdirectory is a resource, and each resource must have a [XXX.]README.md file as the resource index |
-| Archives Folder | Default is '4. Archives', Set a folder where the PARA archive is located, each subdirectory is a archive, and each archive must have a [XXX.]README.md file as the archive index |
+| Projects Folder | Default is '1. Projects', Set a folder where the PARA project is located, each subdirectory is a project, and each project must have a [XXX.]README.md or a file with the same name as the folder as the project index |
+| Areas Folder | Default is '2. Areas', Set a folder where the PARA area is located, each subdirectory is a area, and each area must have a [XXX.]README.md or a file with the same name as the folder as the area index |
+| Resources Folder | Default is '3. Resources', Set a folder where the PARA resource is located, each subdirectory is a resource, and each resource must have a [XXX.]README.md or a file with the same name as the folder as the resource index |
+| Archives Folder | Default is '4. Archives', Set a folder where the PARA archive is located, each subdirectory is a archive, and each archive must have a [XXX.]README.md or a file with the same name as the folder as the archive index |
 
 ## Usage
 

src/component/CreateNote/index.less

@@ -13,6 +13,7 @@
  }
 
  .ant-tabs-nav {
+ margin: 8px 0;
  &::before {
  border: 0;
  }
@@ -31,7 +32,7 @@
  display: flex;
  justify-content: center;
  position: relative;
- inset: -45px auto auto 0px !important;
+ inset: -40px auto auto 0px !important;
 
  .ant-picker-panel-container {
  border-radius: 0;
@@ -42,6 +43,14 @@
  .ant-picker-header {
  border: 0;
  }
+
+ .ant-picker-body {
+ padding: 0 18px;
+ }
+
+ .ant-picker-header-view {
+ line-height: 30px;
+ }
  }
  }
 }

src/component/CreateNote/index.tsx

@@ -29,6 +29,10 @@ import {
  QUARTERLY,
  YEARLY,
  ERROR_MESSAGES,
+ LOCALE_MAP,
+ TAG,
+ FOLDER,
+ INDEX,
 } from '../../constant';
 import { createFile, createPeriodicFile, isDarkTheme } from '../../util';
 import type { PluginSettings } from '../../type';
@@ -44,6 +48,8 @@ export const CreateNote = (props: { width: number }) => {
  const [type, setType] = useState(defaultType);
  const [form] = Form.useForm();
  const today = dayjs(new Date());
+ const localeMap =
+ LOCALE_MAP[locale?.locale || 'en-us'] || LOCALE_MAP['en-us'];
  const SubmitButton = (
  <Form.Item
  style={{
@@ -70,21 +76,21 @@ export const CreateNote = (props: { width: number }) => {
  let folder = '';
  let file = '';
  let tag = '';
- let README = '';
+ let INDEX = '';
  const path =
  settings[
  `${paraActiveTab.toLocaleLowerCase()}sPath` as keyof PluginSettings
  ]; // settings.archivesPath;
  const key = values[`${paraActiveTab}Folder`]; // values.archiveFolder;
  tag = values[`${paraActiveTab}Tag`]; // values.archiveTag;
- README = values[`${paraActiveTab}README`]; // values.archiveREADME;
+ INDEX = values[`${paraActiveTab}Index`]; // values.archiveIndex;
 
  if (!tag) {
  return new Notice(ERROR_MESSAGES.TAGS_MUST_INPUT);
  }
 
  folder = `${path}/${key}`;
- file = `${folder}/${README}`;
+ file = `${folder}/${INDEX}`;
  templateFile = `${path}/Template.md`;
 
  await createFile(app, {
@@ -130,21 +136,27 @@ export const CreateNote = (props: { width: number }) => {
  const handleTagInput = (item: string) => {
  const itemTag = form.getFieldValue(`${item}Tag`).replace(/^#/, '');
  const itemFolder = itemTag.replace(/\//g, '-');
- const itemREADME = itemTag.split('/').reverse()[0];
+ const itemIndex = itemTag.split('/').reverse()[0];
 
  form.setFieldValue(`${item}Folder`, itemFolder);
  form.setFieldValue(
- `${item}README`,
- itemREADME ? itemREADME + '.README.md' : ''
+ `${item}Index`,
+ itemIndex ? itemIndex + '.README.md' : ''
  );
- form.validateFields([`${item}Folder`, `${item}README`]);
+ form.validateFields([`${item}Folder`, `${item}Index`]);
  };
+ const computedStyle = getComputedStyle(
+ document.querySelector('.app-container')!
+ );
+ const fontSize =
+ parseInt(computedStyle?.getPropertyValue('--nav-item-size')) || 13;
 
  return (
  <ConfigProvider
  locale={locale}
  theme={{
  token: {
+ fontSize: fontSize + 1,
  colorPrimary: reduceCSSCalc(
  getComputedStyle(document.body).getPropertyValue(
  '--interactive-accent'
@@ -154,7 +166,10 @@ export const CreateNote = (props: { width: number }) => {
  components: {
  DatePicker: {
  cellWidth: width ? width / 7.5 : 45,
- cellHeight: 30,
+ fontSize: fontSize,
+ },
+ Form: {
+ fontSize,
  },
  },
  algorithm: isDark ? theme.darkAlgorithm : theme.defaultAlgorithm,
@@ -182,14 +197,14 @@ export const CreateNote = (props: { width: number }) => {
  name="type"
  value={type}
  onChange={(e) => setType(e.target.value)}
+ size="small"
  style={{
  width: '100%',
  textAlign: 'center',
- marginBottom: 5,
  }}
  >
- <Radio.Button value={PERIODIC}>{PERIODIC}</Radio.Button>
- <Radio.Button value={PARA}>{PARA}</Radio.Button>
+ <Radio.Button value={PERIODIC}>{localeMap[PERIODIC]}</Radio.Button>
+ <Radio.Button value={PARA}>{localeMap[PARA]}</Radio.Button>
  </Radio.Group>
  )}
  {type === PERIODIC && settings?.usePeriodicNotes && (
@@ -213,9 +228,10 @@ export const CreateNote = (props: { width: number }) => {
  [YEARLY]: 'year',
  };
  const picker = pickerMap[periodic];
+ const label = localeMap[periodic];
 
  return {
- label: periodic,
+ label,
  key: periodic,
  children: (
  <Form.Item name={periodic}>
@@ -254,17 +270,18 @@ export const CreateNote = (props: { width: number }) => {
  size="small"
  indicator={{ size: 0 }}
  style={{ width: '100%' }}
- items={[PROJECT, AREA, RESOURCE, ARCHIVE].map((item) => {
+ items={[PROJECT, AREA, RESOURCE, ARCHIVE].map((para) => {
+ const label = localeMap[para];
+
  return {
- label: item,
- key: item,
+ label,
+ key: para,
  children:
- paraActiveTab === item ? (
+ paraActiveTab === para ? (
  <>
  <Form.Item
- labelCol={{ flex: '80px' }}
- label="Tag"
- name={`${item}Tag`}
+ label={localeMap[TAG]}
+ name={`${para}Tag`}
  rules={[
  {
  required: true,
@@ -279,21 +296,20 @@ export const CreateNote = (props: { width: number }) => {
  <AutoComplete
  options={tagsOptions}
  onSearch={handleTagsSearch}
- onSelect={() => handleTagInput(item)}
+ onSelect={() => handleTagInput(para)}
  >
  <Input
- onChange={() => handleTagInput(item)}
+ onChange={() => handleTagInput(para)}
  allowClear
- placeholder={`${item} Tag, eg: ${
- item === PROJECT ? 'PKM/LifeOS' : 'PKM' // 引导用户，项目一般属于某个领域
+ placeholder={`${para} Tag, eg: ${
+ para === PROJECT ? 'PKM/LifeOS' : 'PKM' // 引导用户，项目一般属于某个领域
  }`}
  />
  </AutoComplete>
  </Form.Item>
  <Form.Item
- labelCol={{ flex: '80px' }}
- label="Folder"
- name={`${item}Folder`}
+ label={localeMap[FOLDER]}
+ name={`${para}Folder`}
  rules={[
  {
  required: true,
@@ -308,13 +324,12 @@ export const CreateNote = (props: { width: number }) => {
  />
  </Form.Item>
  <Form.Item
- labelCol={{ flex: '80px' }}
- label="README"
- name={`${item}README`}
+ label={localeMap[INDEX]}
+ name={`${para}Index`}
  rules={[
  {
  required: true,
- message: 'README is required',
+ message: 'Index is required',
  },
  ]}
  >

src/constant.ts

@@ -4,7 +4,7 @@ export const ERROR_MESSAGES = {
  FAILED_DATAVIEW_API: 'Dataview API enable failed!',
  NO_VIEW_PROVIDED: 'Please provide a view name!',
  NO_VIEW_EXISTED: 'There is no this view in periodic PARA plugin',
- NO_INDEX_FILE_EXIST: 'There is no README.md or xxx.README.md or',
+ NO_INDEX_FILE_EXIST: 'There is no Index file exists(README.md/xxx.README.md/',
  NO_TEMPLATE_EXIST: 'There is no template file exist: ',
  TAGS_MUST_INPUT: 'Please input tags!',
  DAILY_RECORD_FETCH_FAILED: 'Fetch daily record failed: ',
@@ -30,10 +30,49 @@ export const MONTHLY = 'Monthly';
 export const QUARTERLY = 'Quarterly';
 export const YEARLY = 'Yearly';
 
+export const TAG = 'Tag';
+export const FOLDER = 'Folder';
+export const INDEX = 'Index';
+
 export const DAILY_REG = /^\d{4}-\d{2}-(\d{2})/;
 export const WEEKLY_REG = /^\d{4}-W(\d{1,2})/;
 export const MONTHLY_REG = /^\d{4}-(\d{1,2})/;
 export const QUARTERLY_REG = /^\d{4}-Q(\d{1,2})/;
 export const YEARLY_REG = /(^\d{4})/;
 
 export const LIFE_OS_OFFICIAL_SITE = 'https://obsidian-life-os.netlify.app';
+
+export const LOCALE_MAP: Record<string, Record<string, string>> = {
+ 'en-us': {
+ [PERIODIC]: 'Periodic Notes',
+ [DAILY]: 'Day',
+ [WEEKLY]: 'Week',
+ [MONTHLY]: 'Month',
+ [QUARTERLY]: 'Quarter',
+ [YEARLY]: 'Year',
+ [PARA]: 'PARA Notes',
+ [PROJECT]: 'Project',
+ [AREA]: 'Area',
+ [RESOURCE]: 'Resource',
+ [ARCHIVE]: 'Archive',
+ [TAG]: 'Tag',
+ [FOLDER]: 'Folder',
+ [INDEX]: 'Index'
+ },
+ 'zh-cn': {
+ [PERIODIC]: '周期笔记',
+ [DAILY]: '日记',
+ [WEEKLY]: '周记',
+ [MONTHLY]: '月记',
+ [QUARTERLY]: '季记',
+ [YEARLY]: '年记',
+ [PARA]: 'PARA 笔记',
+ [PROJECT]: '项目',
+ [AREA]: '领域',
+ [RESOURCE]: '资源',
+ [ARCHIVE]: '存档',
+ [TAG]: '标签',
+ [FOLDER]: '目录',
+ [INDEX]: '索引'
+ },
+};

src/periodic/File.ts

@@ -43,7 +43,7 @@ export class File {
  const subFolderList = folder.children
  .sort()
  .filter((file) => file instanceof TFolder);
- const READMEList = subFolderList
+ const IndexList = subFolderList
  .map((subFolder) => {
  // 优先搜索同名文件，否则搜索 XXX.README
  if (subFolder instanceof TFolder) {
@@ -70,7 +70,7 @@ export class File {
  if (!indexFile) {
  logMessage(
  ERROR_MESSAGES.NO_INDEX_FILE_EXIST +
- ` ${subFolder.name}.md` +
+  `${subFolder.name}.md)` +
  ' in folder: ' +
  subFolder.path
  );
@@ -88,7 +88,7 @@ export class File {
  .filter((link) => !!link)
  .map((link, index: number) => `${index + 1}. ${link}`);
 
- return READMEList.join('\n');
+ return IndexList.join('\n');
  }
 
  return `No files in ${fileFolder}`;