diff --git a/notes/posts/component based vs object based UI design.md b/notes/posts/component based vs object based UI design.md index af58476..7c925e5 100644 --- a/notes/posts/component based vs object based UI design.md +++ b/notes/posts/component based vs object based UI design.md @@ -1,11 +1,11 @@ --- title: "UI design: object oriented vs component based" -pubDate: "September 20, 2024" +pubDate: "September 28, 2024" alsoOn: [https://x.com/puf] description: "Building a UI in object-oriented code often leads to deeply nested object structures, where each object has a single responsibility. Building a UI in a visual component-based builder typically leads to shallower structures with fewer objects, whose behavior is controlled by properties." --- -*Disclaimer: I first learned/came up with this classification 25+ years ago while working with Borland Delphi. I’ve recently been reapplying it while working with FlutterFlow, but it applies to other tools too. If you use a different classification, hit me up on the socials I linked.* +*Disclaimer: I first learned/came up with this classification 25+ years ago while working with Borland Delphi. I’ve recently been reapplying it while working with FlutterFlow, but it applies to other tools too. If you use a different classification, hit me up on the socials I linked above.* #### My history with object oriented vs component based building of UI diff --git a/src/pages/feed.xml.js b/src/pages/feed.xml.js index 331f747..2afd56e 100644 --- a/src/pages/feed.xml.js +++ b/src/pages/feed.xml.js @@ -2,15 +2,12 @@ import rss from '@astrojs/rss'; import { getNotes, getTypeForNote } from '../components/Notes.astro'; import { renderStars } from '../components/StarRating.astro'; -// import sanitizeHtml from 'sanitize-html'; -// import MarkdownIt from 'markdown-it'; -// const parser = new MarkdownIt(); +import sanitizeHtml from 'sanitize-html'; +import MarkdownIt from 'markdown-it'; +const parser = new MarkdownIt(); export async function GET(context) { - const notes = await getNotes({ keepIf: (note) => note.props.frontmatter?.title?.length > 0 && note.params.pubDate?.length > 0 && !/readme.md$/.test(note.props.file) }); - - console.log("Notes for RSS", notes); - console.log("Notes with description: ", notes.filter((note) => note.props.frontmatter?.description).map((note) => note.props.Content)); + const notes = (await getNotes({ keepIf: (note) => note.props.frontmatter?.title?.length > 0 && note.params.pubDate?.length > 0 && !/readme.md$/.test(note.props.file) })); return rss({ title: 'puf.io', @@ -22,16 +19,19 @@ export async function GET(context) { if (type === 'books') { title += ` - ${note.props.frontmatter.author} (Rating: ${renderStars(note.props.frontmatter?.rating)})`; } - return { + let item = { title: title, link: note.params.slug, pubDate: note.params.pubDate, description: note.props.frontmatter?.description, - //content: note.props.compiledContent, - // content: sanitizeHtml(note.props.compiledContent, { - // allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img']) - // }) + "\n\n", }; + if (!item.description || item.description.length === 0) { + const content = sanitizeHtml(note.props.compiledContent(), { + allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img']) + }); + if (content.length < 5_000) item.description = content + "\n\n"; + } + return item; }), customData: `en-us`, });