Refactor to vuepress from pure html + tailwind so we can do templating etc #34

Closed rufuspollock closed 3 years ago

In GitLab by @rufuspollock on Apr 28, 2020, 18:52

Switch over to use vuepress (and tailwind) from pure html + tailwind

Acceptance

[x] Site runs in vuepress (so i can easily add new pages)
[x] Home page looks the same
[x] Home page is split between template (in vuepress theme etc) and actual page content in SITEDIR/index.md

Tasks

[x] Add vuepress
[x] Add in proper base template (with tailwind)
[x] Extract front page core to new index.md
[x] Setup google analytics again
[x] Have tailwind purging working BONUS
[x] merge to master
[x] Reinstate meta tags including image - see e.g. https://github.com/webmasterish/vuepress-plugin-autometa#usage or https://vuepress.tools/plugins/vuepress-plugin-simple-seo.html (have to make a choice) --> both seem nice, picked the second one (vuepress-plugin-simple-seo) as it looks more simple and clean..

Analysis

Situation

Possibility Now is an initiative to crystallize and sustain the sense of possibility for a different future arising out coronavirus situation.
PossibilityNow.org is a website with a declaration
Site is pure one-pager built with tailwind ...
Project core is a declaration people can endorse and will expand beyond that - see overall plan here https://gitlab.com/artearthtech/possibility-now/-/issues/26

Complication

Site is growing beyond one page => we need templating to avoid repetition etc => what templating system shall we use
We want to automate things like showing the endorsers on the website (rather than hand adding)
We want to have a directory of initiatives running off e.g. a google spreadsheet

Question: how do we evolve the site (technically) from where it is so that we can support automated display of endorsers and initiatives with these managed by non-technical team (who don't know markdown, vuepress etc)

Hypothesis: switch to a simple framework e.g. vuepress

How do i move to a CMS?

Ans: we are going to try vuepress b/c we know it

Options

11ty
vuepress
gridsome
gatsby
wordpress

Research

wordpress + vuepress theme https://github.com/RevivalCoop/vuepress

article wordpress + vuepress https://codeburst.io/introducing-vuepress-wordpress-development-with-vue-and-graphql-f5063a97bb69

Bigger discussion about JAMStack CMS's

What other needs to i have?

Images: auto render at different resolutions ...
- https://gridsome.org/docs/images/
Load data from multiple sources

https://vuepress-examples.netlify.app/demos/remote/

Options

Gatsby
Gridsome
Vuepress
Wordpress

Gatsby

Possibly the most popular ...
But i dislike react
But maybe that's irrational
We are familiar with vue

Wordpress:

Yes the editor is great ...
I don't want to template in PHP
It encourages people to start doing fancy stuff in their pages it never works well ...
Might as well go the wix or webflow route ...
I want to load from multiple locations

In GitLab by @rufuspollock on Apr 28, 2020, 18:53

changed the description

In GitLab by @monikappv on Apr 29, 2020, 24:45

marked the task Convert to vuepress as completed

In GitLab by @monikappv on Apr 29, 2020, 24:45

marked the task Add in proper base template (with tailwind) as completed

In GitLab by @monikappv on Apr 29, 2020, 24:59

@rufuspollock created a new branch called refactor-to-vuepress and refactored the site to vuepress.

here is a screenshot of it screenshot-possibility-now

you can pull the branch and have a more detailed look..

P.S. there is still some work to be done though.. e.g. tailwind purging, deleting unnecessary files, final polishing.

In GitLab by @rufuspollock on Apr 29, 2020, 10:00

@monikappv great work - btw i pushed (late) to vuepress branch. We can now delete that i think.

Next step would be investigating pulling data from a (public) google docs spreadsheet (maybe with public csv url). Could you look into that.

In GitLab by @monikappv on Apr 29, 2020, 10:26

@rufuspollock yes, I'll investigate and update you once I've tried it out :thumbsup:

In GitLab by @rufuspollock on Apr 29, 2020, 19:04

changed the description

In GitLab by @rufuspollock on Apr 29, 2020, 21:13

marked the task Setup google analytics again as completed