Create the index page prototype

[TeamXerbutri]

The index page, without the lazy loading, without the menu items and without the maps.

It should show cards with the objects visited

Use Web components and a json to fill it with info about the objects

[HelmerDenDekker]

Okay: So far so good, initial commit. The MaxId is put == 1, for now. It should count the number of occurences in a json There should be a web component with the card, instead of the loose stuff now There should be a json added, I will use the first few from the xerbutri website. Naming??

Think about the version 4 we created in the past, it had some kind of jsons and could load some kind of index, but I believe it was per category or something. You had to choose a link first. Not sure anymore. Won't this be messed up, using jsons? As there will be multiple informations stored, or were you planning on solving that using the CMS? And automagically create these jsons from there? Do you have plans for that?

Basically, javascript should load everything from a json file. This is the POC I would like to try. It should be way faster compared to the PHP server one in the end. So sounds as a plan, right?

[HelmerDenDekker]

hi.

End-of-day commit, with one object card. Issue with the css and the webcomponents as I suspected. Will look at that tomorrow!

[HelmerDenDekker]

Read the json with the fetch API like this: https://www.freecodecamp.org/news/how-to-read-json-file-in-javascript/

[HelmerDenDekker]

Issue: Index.js -> //geef een naam in de toekomst, en roep aan als window.onresize en voer uit als domcontentisloaded

[HelmerDenDekker]

We should have way better modals for privacy and contact. If you click on Privacy after Contact, it will not show!

[HelmerDenDekker]

In between a rock and a bad place (how do you say that?) There are CORS issues, of course there are, when trying to read the JSON Simple solution: create a js file with JSON, which breaks the architecture.

[TeamXerbutri]

5 days ago. Still alive?

[HelmerDenDekker]

Comment last friday: Alternative: using vue.js and switching to typescript

So, in the meanwhile:

1. App.js Quickest fix, just spin up a (dev) webserver and resolve the CORS issues by serving the page instead of using file.

I tried setting up a server using app.js and the native http. That did not work due to windows firewall issues.

2. Gulp

A bit slower is setting up Gulp.

So last monday I did some work setting up Gulp, spent about 4 hours, ran into difficulties with the versions of npm packages and javascript modules. Gulp is outdated, the documentation is outdated as well, somewhere things went wrong when going from gulp3 to gulp4. Gulp still works, but it is no longer recommended. So I would have to figure out on my own how to do this, and I never did Gulp. So I asked help, and took a break:

3. Vite or Vue So, the next quickest thing I know of is Vite. And I was looking through some of the issues on this board. And I was thinking to myself: We need routing. So I need Vite + Vue router. In case I want Vite, I want typescript as well. Maybe we should try Vue?

In short: We need to rethink this. We have a lot of logic that has not changed in over 20 years. The content has not changed. The UI changed.

I am thinking in the lines of MD and JSON. Those standards are going to stay. What else? Any ideas?

[HelmerDenDekker]

• [x] head
• [ ] header (is a component)
• [ ] objectcontainer oc (is a component)
• [ ] objectcard (is a component)

[HelmerDenDekker]

favicon en zo staan in public

[HelmerDenDekker]

Okay, more speed please. Use: https://github.com/creativetimofficial/vue-material-kit

[HelmerDenDekker]

[HelmerDenDekker]

The material web kit promises more (development) speed, but it is so heavy! And also I really don't like it because it has centralized CSS, centralized long JS files doing everything. This is really NOT what I wanted. The design looks okay, and it is flexible and it is configurable. We do not want flexible and configurable, we want maintainability and speed. This is not easy to maintain and not easy to slim down. I want 1% of the capabilities

[HelmerDenDekker]

I like the Vue-idea of being light, while having typescript AND having scoped components. It is steep-learning, developing a new Vue page, and refactoring the old page to new ways of thinking.

[TeamXerbutri]

Hi Helmer,

Scope is creeping. We started out going to JavaScript, now Vue. I know there are new possibilities and improvements, let's keep them for later.

Just do 1:1 translation with components as discussed before.

• Please use WebComponents
• Use Typescript
• Use scoped CSS

Do not bother about any other things, just focus on this. :-)

[HelmerDenDekker]

Why Typescript? This leaves us with the routing problem.

Build your own SPA with JS: https://dev.to/thedevdrawer/single-page-application-routing-using-hash-or-url-9jh

Which leaves us only with the json CORS problem.

[HelmerDenDekker]

Installed vite, and the problem is gone!! Continue.

[HelmerDenDekker]

Index page POC is ready, works locally. Next: Production hardening