samgielis / hersenvulsel Goto Github PK

We're still using the old imageSharp library which has not-great API and allegedly slows down build time of website

See https://www.gatsbyjs.com/plugins/gatsby-plugin-image

A bunch of existing SEO components will have to be ported to the Gatsby framework:

• Sitemaps
• Robots
• Google-site-verification
• Article keywords, descriptions, ...

Currently all articles in a collection load, give the user this choice so we don't need to load all the data immediately.

Will the name of the author be displayed, yes or no?
In the case of guest bloggers: will they all need their own account for their names to match? Or will I be able to publish everything and put their names there?

When a user opens the collapsed navbar between 768 & 1199px, it is not possible to close it again. The only way to continue using the wbsite is to click on one of the menu items. Navbars do not collapse above 1199px and work fine below 768px.

Behaviour between 768 & 1199px should be altered to mimic the behaviour below 768px.

To increase interesting content & reach, we could introduce 'guestposts' or interviews by known or lesser know people. This could have significant benefits:

• More content (more writers).
• Gives more dimension and appeal to the website's content.
• More 'reach' as these people would probably share their article, leading to more visitors and links to the website.

As we're rewriting the project in Gatsby, we'll need a minimal setup to start with. This setup entails configuring some main components:

• TypeScript/React/ESLint/Gatsby dependencies
• Minimal "Hello, world!" type of single-page website
• Working dev/build setup for Gatsby

when viewed on a smartphone, embeds (e.g. youtube video) do not properly adjust to the size of the screen. As we used a fixed height for the sample embed video, it renders as shown below:

Moreover, the size of the embed has to be defined by the person who is embedding. We should find a better solution to relieve authors from that burden.

File format

Articles are currently written in a JSON file. Example:

{
  "id":"40-procent-snuffelt",
  "title":"40 procent van je gasten snuffelt rond",
  "authorid":"shannaverspreet",
  "authorname":"Shanna Verspreet",
  "category":"faitsdivers",
  "day":"2014/11/05",
  "time":"19:25:00",
  "source_name":"aol.com",
  "source_url":"https://www.aol.com/article/2014/06/06/beware-40-percent-of-house-guests-snoop-around/20908123/",
  "img_credit":"wikimedia.org",
  "keywords":"snuffelen", "badkamer",
  "content":[
          {"type": "paragraph",
		   "content": "Opgepast wanneer je gasten over de vloer krijgt: <b>40% snuffelt rond!</b>"},
		   {"type": "paragraph",
		   "content": "Vooral de badkamer is een geliefde plaats om op ontdekking te gaan. Wanneer je naar het toilet gaat, heb je alle vrijheid om in de kastjes te kijken. Het zou een manier zijn om je vrienden beter te leren kennen - een badkamer kan nogal wat geheimen bevatten."},
		   {"type": "paragraph",
		   "content": "<b>14%</b> geeft zelfs toe <b>expres</b> naar de badkamer of slaapkamer te trekken om er eens rond te kijken... En <b>1% steelt</b>  soms iets van vrienden of familie. Ouch!"}
		   ]
}

To make it easier to write articles; this should be migrated to Markdown files. Example:

---
id:"40-procent-snuffelt",
authorid: "shannaverspreet",
day: "2014/11/05",
source_url: "https://www.aol.com/article/2014/06/06/beware-40-percent-of-house-guests-snoop-around/20908123/",
img_credit: "wikimedia.org",
keywords: ["snuffelen", "badkamer"]
---
# 40 procent van je gasten snuffelt rond

Opgepast wanneer je gasten over de vloer krijgt: **40% snuffelt rond!**

Vooral de badkamer is een geliefde plaats om op ontdekking te gaan. Wanneer je naar het toilet gaat, heb je alle vrijheid om in de kastjes te kijken. Het zou een manier zijn om je vrienden beter te leren kennen - een badkamer kan nogal wat geheimen bevatten.

**14%** geeft zelfs toe **expres** naar de badkamer of slaapkamer te trekken om er eens rond te kijken... En **1% steelt**  soms iets van vrienden of familie. Ouch!"

Reduce metadata

We can ommit a bunch of fields:

• authorname (derived from lookup)
• title (in MD)
• category (derived from location)
• time (overhead, default to 12AM)
• source name (derived from source_url)

Folder structure

The current folder structure for articles is:

$CATEGORY_NAME$/
└── $ARTICLE_ID$/
     ├── img/
     │    ├── main.jpg
     │    └── image2.jpg
     ├── descriptor.json
     └── index.html

The future structure should be simplified to:

$CATEGORY_NAME$/
└── $ARTICLE_ID$/
     ├── main.jpg
     ├── image2.jpg
     └── article.md

The whole project will be rewritten and moved from gh-pages to netlify. To prevent major merge conflicts and keep the hersenvulsel.be site alive and well until the rewrite is completed, we will move the current state of the website into legacy modus.

This means:

• Moving all files from the root folder to a /docs folder.
• Creating a legacy branch, which will be used to generate the GHPages site from.

After this operation, the master branch can be used during the rewrite without damaging the current state of the live website.

Because the Facebook page data shows a growing number of followers from the Netherlands, it could be worthwhile buying the hersenvulsel.nl domain for targetting. The idea of expanding our target audience to incorporate the Netherlands should be investigated further in the future.

See e.g. http://localhost:8000/entertainment/sith-geschiedenis-star-wars/

Iframe is not properly rendered

We should choose wether to use the facebook comment plugin or Disqus'. Both have advantages.

After rebuilding the website for the first time since 2018, we got a notification that the website DNS is currently still pointing to legacy Github servers. Additionally it is not https-ready (dependencies referred to using http://).

Update the DNS records and make sure there are no http-dependencies.

Currently the site is built locally, committed and served using gh-pages.

We will update this setup to build and host the website on Netlify. Main benefit of this is not having to include build artifacts in the repository, but also getting access to Netlify's other serverless tools, like functions, which would allow more dynamic functionality in the future.

We will have to reduce our deploy process footprint as currently Netlify is failing. See tips in gatsbyjs/gatsby#33738

Currently the website load is ugly and chunky because of the delayed injection of the bootstrap dependency. Let's remove the dependency and transition to Chakra completely.

Facebook offers insights about their users on your site. By adding the right meta-tags in a webpage, facebook can save detailed information in their social graph. More information here. This should be added (if desired by the client) as soon as the domain name has been registered.

When viewing the website on a tablet-sized device, there are issues with displaying the different 'article tiles'. In short, the tiles overlap (see image). This is probably a bug in the css, more specifically with some min-width setting.

The editor wants to control which articles show up on the home page.

Websites in Belgium & beyond should provide users with a clear explanation about their cookie policy to comply with the law. Currently, our website does not use cookies. However, when or if we start using Google Analytics/Adsense/... we will be forced to do so. As of then, we should also include a cookie policy.

The necessary (legal) details should be investigated and sorted out in order to stay out of trouble.

[This is an older issue dating back from the website's early days that hadn't been posted yet before]
The header does not display correctly on large monitors (1920x1080) etc. This should be debugged and solved as it is one of the last obstacles that keeps us from being an all-resolutions website.