greenheart / idg.tools Goto Github PK
View Code? Open in Web Editor NEWInner Development Toolkit - Transformational Skills for Sustainable Development
Home Page: https://idg.tools
License: GNU Affero General Public License v3.0
Inner Development Toolkit - Transformational Skills for Sustainable Development
Home Page: https://idg.tools
License: GNU Affero General Public License v3.0
navigator.share
Learn more at https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API
Not widely supported, but would be a nice progressive enhancement for users of Chrome on Android. For non-supported browsers, the share button could copy the link to the tool.
Edit: This is not a top prio until we have the capacity to maintain the content in multiple languages. Although the tech is mostly in place with the CMS having support for new collections for example.
Create a UI collection where we have translations for each screen.
Even if we only add English from the start, it would be nice to have support for full translations
After some testing, it makes more sense that the back arrow navigates one level back in the app experience, e.g. from /explore/[link]
to /explore
and then to /
Update to new fonts:
This will add credibility and transparency.
It will also allow us to include promising content without the same scientific support, while making it clear how it differs from the content with much stronger scientific support.
Could be represented as a number between 1 and 10 where 10 is the strongest support.
Maybe this can be solved at build time - or with a CMS validator for that field.
Decrease opacity of dark filter as you go deeper into the app/content, until you're only at 95% opacity
This would make the content easier to explore.
check out if the web app manifest described in this guide has suggestions for good icon sizes:
Keystone has several testing utilities ready to use: https://keystonejs.com/docs/guides/testing#testing
They also have an example project from where we can borrow patterns: https://github.com/keystonejs/keystone/tree/main/examples/testing
@paccao Feel free to explore this if you're curious! ;)
Maybe remove bold and italics since it could be abused.
Maybe add headings to separate sections.
Feature idea: Update the URL based on selected tags (and filters in general), with for example URLSearchParams. This should allow people to share a link to show all Methods or Courses for example.
Fun feature but there are more important things to do right now. Keeping it for the future though.
This will be used for stories, IDG hub resources and more.
Maybe use https://mdsvex.com/
Show a map with current known IDG hubs on the homepage.
In addition to the map, we could provide useful resources (basically markdown pages rendered on the webpage):
Finally, we should feature relevant info on the landing page, plus around the app to encourage people to participate in and co-create a hub in their local area.
To ensure the CI/CD pipeline can catch content errors when previewing content, we should run the content build script as part of the general app build.
This will also allow us to preview the latest content changes, even for PRs where people haven't run the content build locally and committed the output. Basically needed to unlock the CMS editing experience we want.
Also throw an exception if there's a duplicate relevancy score, to prevent duplicates from showing up in the build. Or solve it with a validation check in the custom relevancy CMS field.
Admin (can remove existing stuff)
Editor (can add new stuff and edit existing)
Public (no access)
This will make it easy to get a local DB up and running.
Essentially take a backup and commit it to git
Or maybe even commit the sqlite db in full, though it won't play nicely with multiple contributors.
Background image expands when content expands, let's fix it to the height of the viewer/device
This would make it easier to share links in chat apps and on social media. Important to make the content easier to share.
Generate an OG image to be used for the site. One for all pages is a good enough start.
This could be a good first time issue to contribute a meaningful improvement to the project. Let me know if you want help getting started ๐
A tool consists of:
We also discussed level of scientific support
that could use same relevancy score feature but different visual design. Ultimately we decided to use Research and resources
instead to show the level of scientific support, and if we have few resource links for a tool, we show a disclaimer text with CTA to contribute with improved research and tool
Basically, the number and quality of linked resources will show the level of scientific support in a implicit and transparent way. It also removes the need to debate and maintain our own custom scientific relevancy score
.
Inspiration: https://github.com/sveltejs/vite-plugin-svelte/blob/1ed3df1b9c53b02ae03dd546746d39b48a0ded89/CONTRIBUTING.md
Method
, Course
, Exercise
, Book
, Workshop
For relevancy scores, we likely should use separate fields, like we do now for skills and categories, but instead of storing the ID we keep the ID + relevancy score. This would allow true sorting based on what is most relevant.
By using tags, it would be flexible to add/update filtering options, and possible to use different presentation + featuring in the UI. The simplest form is an array of strings to represent tags
Tags could also be a bit more structured, by adding proper relationships. This would make it easy to categorize and explore the content in the CMS, as well as in the app. And not too much complexity.
By adding custom fields for every property of tools, it will add more complexity and custom code to maintain. Relationship-supported Tags will likely be the flexible yet minimalistic solution that we need.
Primarily focusing on these types of content:
Courses are already added. Tests and Challenges might be valuable, but don't feel like a top prio for me. Open to adding them anyways if someone think they should be ๐
https://paullj.github.io/posts/fast-lightweight-fuzzy-search-using-fuse.js
This might enable similar functionality as hooks in Keystone, modifying content before saving.
https://www.netlifycms.org/docs/beta-features/#registering-to-cms-events
Another benefit is that we don't need to show everything in the CMS UI, but could keep the link and/or slug hidden in the background.
Co-creator flexibility is a top prio to make this possible to scale.
Since one of the most common use cases requires us to find the color for a given skill, it would make sense to add the category's color to each skill at build time. This would make the app code simpler.
This will greatly improve readability of the JSON files, and also make it easier to use raw IDs as values in the CMS relation widget.
This will slightly reduce the content JSON file size too since these IDs will be shorter than full cuid
s.
However, this won't make much sense for translations. Thus, perhaps an even better solution would be to use cuid.slug()
for skills, categories and tags. yet another idea could be to use c1
, s1
and t1
as IDs where the first letter is the content type.
Or we simply ignore this for now...
This will make it easier to distinguish tools to find not only relevent ones, but also the most relevant ones.
This will make the tools more useful.
Idea: show the 2-3 most relevant skills (with the scores with the highest relevancy score for their skill) in the explore page tool cards. Then "+2" that is toggleable to see all skills related to that tool. This would make the UI cleaner when adding many different relevant skills.
See reference in /explore/[link]/+page.server.ts
relation
or markdown
widget. For example any tool.The top left button should not display the incorrect UNSAVED CHANGES
, and the CMS should not prompt users to confirm before leaving the page.
This is quite serious since it will prevent the editorial_workflow
mode in Netlify CMS from publishing changes, which is a bad UX for content co-creators.
Maybe use a custom wrapper component to only trigger the onChange
handler on actual content changes. decaporg/decap-cms#2211 (comment)
Try to debug the actual issue in Netlify CMS and submit a PR with a fix.
/content
sub-directory./cms
sub directory to use Netlify CMS (with vite) and delete old code.The skill descriptions are valuable to help understand the framework.
Ome idea is to show the akill deacription when pressing a skill on /explore/[link]
, but that is not as obvious.
Need something better to deacribe the framework in full inside the app.
Idea: Show skill descriptions like the SDGs https://sdgs.un.org/goals#goals
Each category has their own colors, ans each skill is shown as a box with the name of the skill, with the description only visible on hover/touch.
Or to make it better adapted for mobile, create a nicely designed list. Perhaps sections that are animated to look more interesting.
Important:
This is only visible on non-root pages, for example /explore
This will reduce the height of tools, and let the curious ones explore all resources, while keeping the main view more focused for people who just want to try the tool.
This will be a similar feature to how other limit/click to expand features work. Like expanding to show all skills.
Check the code here for an example of how to solve this task: https://github.com/Greenheart/idg.tools/blob/main/app/src/components/DetailedRelevantSkills.svelte
One difference here is the gradient, fading out the last visible items, and then button the shown on top.
By saving who has created, edited and reviewed content (specifically in the Tools collection) in the CMS, we could give credits to co-creators. This is important to encourage contributions and thank contributors for their work.
During the content build step, we should build the contributors
and add to content.json.
more than X people have contributed to this resource
Since all content is static, it might be better to build at deploy time and serve a cached app.
Or if we go for a static content approach, use another suitable solution.
Guide: https://web.dev/learn/pwa/
Update design as found in Figma
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.