ontola / atomic-argu Goto Github PK

Considerations

• We have an export in this repo containing the current content
• Ideally, the approach we use here can be re-used in other Argu -> Atomic Data projects
• Most classes can be 'dumbed down' a bit, we could probably consider Updates, Threads, and more as simple Article resources with a name, description and a date.
• We need some way to deal with attachments.

Approach

• Use the .json file as source
• For a bunch of white listed classtypes, loop over all resources
• Map the props to corresponding atomic data properties
• Give all the Article class mentioned above
• Use the URL path to create local-id values
• Generate a new .json file
• Import using Atomic Data Importer

• Import existing blog posts from Argu
• Explain Atomic-Argu
• Redirect edam_volendam

Use @tomic/lib's search features to build a basic full-text search interface. Should probably re-use the article view for the results.

• It works
• It looks good
• It has a loading state
• It has a no hits state
• It works on mobile phones

Does not match existing URLs. Should be updated.

One of our customers would like to keep the discussions feature from Argu. For them, it is not essential to have a registration step, but it is essential that the comments can be managed by their employees. Therefore, it would be preferable to use Atomic to store the comments.

So how would this work?

One Comments collection as parent

• We create one Comments collections. This only shows comment resources
• We create a sveltekit component for a Comment form. This has a description and a target (= where the comment will be placed). The parent is always the Comments collection.
• We create an Invite that targets the Comments collection. That way, users can only create comments in that collection.
• We retrieve Comments for each resource by querying for target: resource, where resource is the Article. Ideally we also filter by parent, so we don't include Comments from other drives, but in this case I don't think that's essential, since the resource is publicly appendable.
• When creating a resource, we also set write rights on the Comment, which enables editing.

During first render (e.g. here), we see no cover images. These appear on the second render.

So I suppose server side rendering does not know about the cover source url. We can disable JS to see this same screen.

I'm assuming the loadResourceTree function should fix this behavior. However, this looks like it should already fix the issue, but it does not:

	await loadResourceTree(subject, {
		[properties.parent]: true,
		[domain.pages]: true,
		[domain.coverImage]: true,
		[domain.articlesCollection]: {
			[properties.collection.members]: {
				[domain.coverImage]: true
			}
		}
	});

Perhaps I misunderstood the function, or perhaps the function isn't quite working as expected.

Currently the importer logic becomes part of the uploaded assets, but they won't be used there.

So far I've ignored attachments. We could automatically import, upload and display them.

Here's what they have. White BG + colored fonts, instead of colored BG + white font in navbar.

I think we should at least mimic the existing styling settings of Argu, although https://drechtstedenenergie.nl/ is even better example of what they want

• White BG navbar
• Green font navbar #158340
• Blue font text #0D325A

E.g. drechtstedenenergie wants 'Roboto Condensed', sans-serif.

Current skeleton is located in main, but it's not the default branch.

A potential customer just noticed that the menu bar does not appear on her older S20 phone. I'm suspecting we might need to polyfill something...

Edit: yes, it's structuredclone.

• I think the solution is to do all sorts of polyfills. Doesn't vite already do this?
• Also, we need something like bugsnag to monitor stuff like this
• Can the menu be server-side rendered?
• We should probably show an error if JS fails for some reason

We currently use Github pages for wonenatthepark.nl. This has generally been a success. However, we want to host more pages. Github pages only works for one domain.

We could use Netlify, which we're already using for Ontola.io (nextJS).

We could use CloudFlare static pages, which we're already using for some DNS stuff. (adapter)

Considerations:

• Deploying should be very simple (either CI action or CLI?)
• HTTPS support
• Easy to manage
• Cost (low bandwith - free options are available)

Todo:

• Choose a host strategy => netlify
• Importer script + images download
• Template script
• https://randstad2177.nl/
• https://denkmee.drechtstedenenergie.nl/denkmee
• https://argu.co/edam_volendam
• Move wonenatthepark to new hosting strategy

When you click on a search result it will navigate you to the actual subject of the resource instead of the atomic-argu site version. So you'll end up in the databrowser.

To reproduce:

1. Go to: https://argu.nl/
2. Search for something
3. Click on search result (Also happens when navigating with keyboard)

• Go to Atomic on ctrl+e
• Add article view
• Write instruction document (requires auth), distribute to customers