## Project Notes 🔹 *parent* [[About Me|About Me]] 🔸 *related* [[+ Projects|Projects]], [[⧋ Programming|Programming]], [[Hobbies]] Updates to [[Obsidian|Obsidian]] and development projects. --- ### Format Obsidian Publish URLs with Templater and YAML *posted:: 07-10-2023-Mon* Published on [Medium](https://medium.com/@mtzfox/format-obsidian-publish-urls-with-templater-and-yaml-3eca397a5629?source=friends_link&sk=262e2f03d719dc2021159660903a6585) I just wanted to share a little [Templater](https://silentvoid13.github.io/Templater/) function I came up with for adding default slug URLs to my frontmatter for Publish. This article assumes familiarity with [Obsidian](https://obsidian.md/), [YAML frontmatter](https://amyjuanli.medium.com/use-yaml-front-matter-correctly-in-obsidian-550e4fa46a4a), and Templater. I'd been adding these URLs manually because the default URLs would add extra characters and show folder paths instead of path by type (book notes, topics, fleeting). For example a URL path might be: ``` References/Books/❞+Reveries+of+the+Solitary+Walker ``` But I'd change it to something like this: ``` book/reveries-of-the-solitary-walker ``` #### Using Templater functions *posted:: 06-29-2023-Thu* I solved this by creating a custom Templater function and passing it the title in a template. I added this template a hotkey to paste it into notes. ```markdown <% tp.frontmatter.type %>/<% tp.user.trim_title( tp.file.title ) %> %% topic/title-of-my-note %% ``` However, for any new notes from template, I realized that calling a function to return a metadata value from my frontmatter would come back `undefined`. It turned out my custom `tp.frontmatter.type` function would only work *after* the frontmatter had been added, so instead I added the unique type to the templates. ``` --- permalink: book/<% tp.user.trim_title( tp.file.title ) %> --- /* permalink: book/reveries-of-the-solitary-walker %/ ``` #### My JavaScript function for formatting URL My JS function was written to cut down long titles and add formatting. ```js function url_title(title) { return title .replace(/\W+/g, ' ') .trim() .split(' ') .slice(0, 5) .join('-') .toLowerCase(); } module.exports = url_title; ``` Explanation: - Use Regex `replace()` to replace all instances of non-letter characters with a space (my titles use ASCII identifiers). The space (`' '`) assures existing spaces are kept. - `trim()` space before and after the title that may exist. - `split(' ')` words into an array by finding spaces, then `slice()` to remove extra long titles. - `join('-')` the array with dashes and format to lowercase. I then added my `trim_title.js` file to a `/Scripts` folder in my vault and added it to my Templater settings. It can now be called with `tp.user.url_title()` and whatever I pass into it. >[!caption] >  #### Examples Now a really long book title with ASCII character at the beginning. ```yaml <% tp.user.trim_title("❜ Ten Arguments for Deleting Your Social Media Accounts Right Now") %> ``` Becomes a shorter and better format for URL. I can even edit it as needed. ``` ten-arguments-for-deleting-your ten-arguments-jaron-lanier ``` #### Adding it all to my note templates >[!caption] >  ```yaml --- title: ❞ <% tp.file.title %> id: <% tp.file.creation_date("YYYYMMDDHHmmss") %> aliases: ["<% tp.file.title %>", ] tags: [🗂️/📚/🟡] type: book date: <% tp.file.creation_date("YYYY-MM-DD HH:mm") %> permalink: book/<% tp.user.trim_title( tp.file.title ) %> publish: false --- ``` #### Other ideas - Limiting it to 3 words but adding the formatted Author name - Adding `.md` to the end of the URL string - Removing path entirely to make it even shorter Have any other ideas or a better solution? I'd love to hear it! ### Obsidian callout image with caption *posted:: 06-29-2023-Thu* I've been working on an easier way to add images to Obsidian and give alignment and captions. #### Markdown callout for images One thing that's great about the *callout* feature is that it adds style with a small amount of markdown and keywords, and it's easy to edit inline. **This callout in markdown** ```markdown >[!tip] Cool Tip >> This is a tip ``` **Would result in** >[!tip] Cool Tip > This is a tip! I would like to be able to update previous images as easily as possible, but use a format that can be built upon without breaking older images. Using a CSS snippet, I was able to style specific callout keywords through matching selectors: `[data-callout*=caption]`. - Any images within the block of the `caption` callout gets wrapped in the callout, and I can still use the features of [markdown image properties](https://www.markdownguide.org/basic-syntax/#images-1) (size, alt text) and add captions to their own line. - I can also update properties like alignment `left`/`right` through a matching CSS selector `.callout[data-callout*=left]` **Internal and External image examples** ``` > [!caption] > ![[elemental-movie.jpg|Two characters from elemental]] > A boring movie. > [!caption] >  > A boring movie. ``` #### The result **Default size / alignment** > [!caption] >>  >> An uninspired movie. **Sizing and alignment variations** > [!caption left] >>  >> An uninspired movie. > [!caption right] >>  >> An uninspired movie. #### Things to add - Text wrapping on images of a certain size (like the two above) - Additional properties or styles within the callout keywords (flex sizing, background colors, border properties) - Options for Obsidian Publish or different views ```css .markdown-preview-view, .markdown-source-view.mod-cm6 { .callout-content img { border: 1px solid silver; } .callout[data-callout*=caption] { background-color: transparent; display: table; padding: 0; } .callout[data-callout*=caption] .callout-content { font-style: italic; border: thin rgba(192, 192, 192, 0.388) solid; background-color: rgba(var(--callout-color), 0.1); border: thin rgba(var(--callout-color), var(--callout-border-opacity)) solid; border-radius: var(--callout-radius); padding: 0 0.5em; font-size: smaller; text-align: center; } /* align - caption (center) | caption-left | caption-right */ /* includes reading mode and edit mode */ .callout[data-callout=caption] { margin: 0 auto; } .callout[data-callout*=left] { margin: 0 auto 0 0; } .callout[data-callout*=right] { margin: 0 0 0 auto; } /* hide callout icon and title */ .callout[data-callout*="caption"] .callout-title { display: none; } } ``` ### Obsidian Dataview, Readwise plugins, querying metadata *Posted: (Posted:: 06-22-2023-Thu)* I decided to start learning [[⚑ Dataview|Dataview]] recently based upon recommendations on Obsidian's discord. Essentially, Dataview allows you to query data in you vault and return lists, tables, tasks, and more. It's a great tool for viewing information about notes. I've so far used it to - Identify notes and tasks to work on as a reminder in my Daily note - Create folder views that give me a few of a folder's updated content - Identify Book notes and highlights with data pulled from [[Readwise]]. >[!important] Dataview is only for local vault >> One major issue is that Dataview tables are not viewable in [[⚑ Obsidian Publish|Obsidian Publish]], so the data can only be used within Obsidian. Published notes will only show code blocks. Using it with Readwise was huge for me. For years I'd been trying to find a way to view highlights I'd made in Kindle, Apple Books, and on the web. Readwise is a service that allows you to collect all of these highlights and organize them into Obsidian. This makes it easy to organize them, link them to book notes, and reference them: ![[Building a Second Brain#^688af1]] Previously I'd created a Readwise template using [[Jinja]], a [[Python]]-based templating language similar to others like [[Nunjucks]] and [[PHP]] [[Twig]]. Essentially you can create a note template that pulls in book data from Kindle highlights and allows it to be formatted for Obsidian automatically (here's an [[Introducing Hegel|Example]] in my vault). I've previously linked these to notes and topics as I develop them. It's been awhile since learning about Readwise templates in Obsidian, but decided to update my template to include extra metadata, since Dataview categories and tables can enhance how I revisit highlights and notes. >[!caption] >  > Listing hightlight notes from recent reads Dataview uses a [dataview query format](https://blacksmithgu.github.io/obsidian-dataview/queries/structure/) by default (similar to MySQL), but it can also utilize JS scripts for fine-tuned control. | DQL format | JS query format | |:---:|:---:| | | | ### How could plugins affect Obsidian? *Posted: (posted:: 06-20-2023-Tue)* While working out a better way to format this, I stumbled upon a tool called [make.md](https://www.make.md/docs/Contexts/Context%20Basics/Context%20Views) which advertises the ability to create Context Views from book metadata with a lot of extra functionality, almost like a personal Goodreads. >[!caption] caption >  > *30% excited, 70% scared I'll never leave my room* Besides how eerie it is that I've read almost every book on this list, I wonder how a tool with such extensive features could change Obsidian itself. While it would be awesome to access information like this, I have to wonder if the visual overhaul suggested would get away from the fine-tuned control that Obsidian gives users. How could a community plugin affect how we organize our data, and what are the disadvantages? I haven't tried this tool yet, but it has made me me think more about the application of plugins so large that they become their own services. ### Obsidian Process in 2023 *Posted: (Posted:: 06-19-2023-Mon)* I've been working on reorganizing my Obsidian vault and updating my process for personal knowledge management based upon some reading and help from the community. I decided it might be helpful to organize my thoughts around current processes into a new guide [[⏶ Obsidian Process 2023|Obsidian Process 2023]] after reviewing the original one and realizing almost *everything* I started out doing in 2020-2021 has since changed. Even just breaking it down made me consider things to tweak and changes to my published vault. The major point of it for me was to cover concepts that I just didn't get right away after reading about them. There are a lot of Zettelkasten and "How to use Obsidian" guides out there, but implementing your own takes time and practice. **What I'm covering** - Note Format as building block - Anatomy of an effective note - Template structure - Processing notes from Inbox - Tagging intentionally - Folder strategy - Why I'm doing this ### Vue authentication app update **Posted: (posted:: 12-20-2022-Tue)** A project I've been working on the last few weeks is a Vue authentication component that uses [Auth0](https://auth0.com/) to authenticate users with various social media credentials. This was completely new territory for me for this type of component, and I'm still pretty new to Vue and Vite. I was able to get the the authentication working correctly but ran into some design snags and unfortunately have to give it up since the trail is lapsed. Probably more difficult than I first assumed but I learned a lot about the authentication process with APIs and Auth0, and feel more comfortable with the tools. Main hangup was that I couldn't get the login/logout buttons to change state with authentication in Vue. Also perfected by Vite configuration from the first few projects. Added [project files](https://github.com/mtzfox/auth-vue-app) for future reference. | Login customizes with user info | Opens a dialog confirmation | | --------------------------------------- | --------------------------------------- | |  |  | ### Breaking News App update **Posted 12-19-2022-Mon** I updated my Breaking News app project by adding a date range drop down option. Users can select between 'Day', 'Week', 'Month' and 'Any'. Choosing an option triggers a event to update the parameter in the URL, telling the API what dates to load. Looking back on this I realized that I have my results mapping within the render section, which I did originally to sync the pagination up with the results, but it's likely causing loading issues. I think this will be the next step to fix. ### Old Design projects **Posted 12-18-2022-Sun** I finished adding a section for old design projects from a previous role at CDK. It includes options for *Components*, *Layouts*, and *Designs*. Most of this work is from the Landing Page Builder app I built components for, with a few page layouts and designs I worked on several years back. Eventually I'll probably add some more sections here once I find newer example work to add. Had a bit of a tricky time with managing the React state and props between several levels of components. I initially thought the solution would be easier (based on my previous section) but then realized I'd need to reorganize everything in order to correctly pass data between that navigation, cards, and modals. Finished up by tweaking the CSS.  ### Project Showcase card modal **Posted 12-08-2022-Thu** Today I worked on a new React component to add to my site to showcase design work. I'm building it with [[Semantic UI]] components. Each card will open up a modal with more information and navigation buttons. I have a pretty big library of old design/development work that are not longer functional but are still worth showing.  I found [this component](https://codesandbox.io/s/project-card-bx70k) awhile back and really loved the look of it. It's build using [Styled Components](https://styled-components.com/) which I'm only a tad familiar with but am interested in learning. Definitely love how the horizontal movement works so well with my mouse, but not sure if it would work the same on all devices. ### Waypoint and Folder Note for index **Posted 12-03-2022-Sat** Spent a lot of time today organizing working on my [[Obsidian|Obsidian]] process, and started using the Plugins [Waypoint](https://github.com/IdreesInc/Waypoint) and [Folder Note](https://github.com/xpgo/obsidian-folder-note-plugin). - Waypoint generates indexes in a folder based upon the files and subfolders, and updates whenever changes are made. - Folder Note creates an Index file for a folder whenever you press `cmd + click` on the folder name for the first time. I customized it so that it would add the Waypoint code and a small bit of frontmatter like tagging each index as a MOC. - Doing this basically turned the folders I applied it to (literature, projects, information) into their own nodes in the graph view. - If I ever get around to sorting my Zettelkasten folder (not sure I will do it manually) this might be even more useful. - I've been thinking that maybe there is a way to auto generate folders by parent links or frontmatter information. If that was true it might not be too terrible, and future notes can sort themselves.  ### Note taking app ideas | **Posted: 11-30-2022-Wed** Next React Project that I'm thinking about after Vue Auth0 Client is some sort of a note taking app. Obsidian Notes and TickTick are two of my most-used apps, both of which utilize markdown. It's amazing how powerful Markdown and list-making apps can be and I'm really excited to learn how to convert Markdown, even though *probably* not inline. I found this [project on Github](https://github.com/taniarascia/takenote) recently, looks awesome. ### Vue authentication with Auth0 client | **Posted: 11-29-2022-Tues** Worked on a [[⏶ Vue Auth0 Client project|Vue Auth0 Client]] authentication app today. It's a fairly simple single page application that has components for Login, Logout, User Info, Home, and Error. When a user signs up or logs in, it sends authentication data to the Auth0 Client to validate, and then gives access to the user data once successful, or gives an error. I've been wanting to build more apps with Vue even though I spend a lot more time in React and Vanilla JS. I really like how Vue files are structured, it feels a lot more natural to the web than React does. Template (html), Data (js), and Style (css) all have clear spaces on the page. React components blend the three elements and it doesn't always seem so clear. Also have been testing out new [[⧋ UI Frameworks]] like Chakra, Headless, NextUI, and MaterialUI. I've been using Semantic UI for a long time but have been itching to try out new libraries with Vite. --- ### News Feed updates **Posted 11-28-2022-Mon** Came to a stopping point with my [[❜ News Feed App]] for now. I got the News API hooked up pretty easily, but then realized that images weren't loading correctly on the live site. I think one issue I had was having the Item inside the `render()` method and being being mapped over within the List, meaning that both components were being rendered at the same time. Instead I decided to split the List into a separate componet that updated the props but wasn't re-rendering every time data changed. I also did a better job destructuring the props, and this seeemed to fix images issues on every browser except Firefox, though it might be and extention issue. I then added a pagination component and results indicator that would update items in groups of 10 depending on the `activePage` and current `page`, then spent some time styling the Semantic UI components and adding a other features. I'd like to do more on thie app like add ability to filter based upon date, change Safe Search, and toggle dark mode. ### Craco Theming and Vite.js **Posted 11-25-2022-Fri** Decided to disconnect the [[Craco]] config from my Portfolio site and overhaul the theming. I'd like to find a better way to set my theme across all of my sites, and the Craco tools were constantly having dependency issues. It just seems like too much work for what it offered. I've been using [[⏶ Vite JS|Vite JS]] a lot more lately which comes with easy setup for Sass, Less, and Stylus, but I haven't tried it out much yet. I'm pretty sick of Less but I think using Sass with CSS3 variables and `:root` properties could be a really solid combination for easy theming.