Refactor filtering functionality - Githubissues

ricardobalk / ricardobalk.nl

My personal website, made with Nuxt 3 (Vue 3), TypeScript & TailwindCSS

https://ricardobalk.nl

ISC License

0 stars 0 forks source link

Refactor filtering functionality #75

Closed ricardobalk closed 1 year ago

ricardobalk commented 4 years ago

Filtering functionality was added in #32, but it needs refactoring.

Files and components

Script should be placed in a separate (.ts) file.
Script should have importable classes, so that import { ElementFilter } from '...' becomes possible.

Logic

Component should have its translations placed in an object, instead of hardcoded in the Vue template.
Component should be able to filter any arbitrary HTML element, not just limited to article[category].
Component should be able to fetch its settings from props.
Component should be able to work in both exclusion and inclusion mode (i.e. include all but article[category="Software Development"]).

Stylesheet

Selector names need to be reviewed.

Remaining

container should be removed at https://github.com/ricardobalk/www/blob/dfdb12ef6e2b7b66f0003f5ac743ac189c796538/src/.vuepress/theme/components/ElementFilter.vue#L2

ricardobalk commented 1 year ago

This one can be closed. With my new Nuxt 3 website, the filtering functionality has been re-designed and built from scratch. Thanks to Nuxt Content, we can now use MongoDB-like queries to filter out content, such as blog posts and projects, based on their metadata.

https://github.com/ricardobalk/ricardobalk.nl/blob/8ed7e0be137e7164c273caeaff18f09907200c32/layouts/blog.vue#L63-L87

The resulting data can be then be fed into other components, etc.