the Gatsby code for the kodi.tv web site
Home Page: https://kodi.tv/
License: BSD Zero Clause License
This is the repo for the kodi.tv web site and build with Gatbsy.
npm install
# Run the development server
npm startThen open http://localhost:8000 in your browser to see the site.
If you are having issues with the site, please submit a Github issue.
For team members who need to do content or programatic maintenance, please see the wiki for instructions and documentation.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
It appears to be time to retire the "formerly XBMC" phrasing. I think the only place that comes up is in the grey footer bar, so that's a template change. If we find others, we should obviously fix those too.
The world's easiest fix, I know, but I noticed the 404s in my Chrome console 😁
Request from @keithah to update the Foundation page. He already volunteered that the Board would help with that. '-)
Both these payment processors allow us to return the user to a page on our site when they are done with payment. The URL for that return page will be different during testing and final deployment, and it is currently hardcoded in two places (one for each service):
Stripe: src/components/ButtonStripe.tsx
Paypal: src/components/FormPaypal.tsx
Would be nice to have the ability to sort addon search results by popularity.
We're lacking an overarching terms & conditions of service page, which is probably needed as an anchor for stuff like DMCA and the privacy policy.
I'll put one together.
If I look at a blog post, there's an option to launch a live view of the post. However, this returns a 404, as the link appears to be both missing part of the path to published articles and has a different "filename".
Example:
... links to https://kodi-tv.netlify.app/kodi-19-0-matrix-release-index:
... but the blog post is actually at https://kodi-tv.netlify.app/article/kodi-19-0-matrix-release/:
Currently you have to set some local environment variables for the donor wall as well as the Stripe/Paypal stuff. For most folks that won't be needed if they are testing or updating things, so it would be nice for the site to build without the variables.
Blog images remain full size on mobile on both blog index and blog post pages. That seems sub-optimal.
It seems that all blog posts are dumped into the same Collection at the moment. That means that the News section of the web site is just one, long, chronological list of posts.
There's currently no way to group/filter them (e.g. "Release Announcements" or "DevCon"), nor is there seemingly any way to search them based on topic, content, date, or anything else.
I suspect the former could be handled through a tag plugin or perhaps the config.yml, although this sounds like a fraught way to add or maintain categories, and likely to screw up at some point. The latter then sounds like some changes needed to the News pages, so probably wanders off into Gatsby territory.
I mentioned in the Slack channel that I'm starting to feel like the current PatternFly theme isn't our best choice. I'm building functionality (like blog posts) that other themes have out of the box (at least the beginnings anyway), and "simple" things like dropdown menus and responsive design don't seem fully baked in the Patternfly theme. I'm not saying we have to change, but I would be open to trying something else. Each comment below is one of the themes I've found that might be worth a look. Feel free to comment or suggest others. If you like one of the themes, give it a thumbs up as a kind of vote. All three of these cost something, but none of them are more than $30.
We need to add the language from our hosting agreement with Netlify to the site footer. I think I have an email with that information, and I'll post it if I find it, but if someone else has it and can post it here, that would be great.
... although inline images have them. Looks like it might be add-able through config, though:
https://answers.netlify.com/t/alt-text-and-title-text-for-featured-image/1681/2
If that isn't possible, we should probably avoid featured images, and use leading inline images instead for accessibility reasons.
Once we have both test and prod environments, there are some things that should be set based on which environment you're building in/for. Here are the things I know for sure need to be handled:
Not sure exactly when this happened, but the add-on search doesn't return a match if you put the exact add-on name in the keyword search.
As I'm testing, I've noticed that when I load the Netlify CMS that the blog posts default to sorted alphabetically. To get the most recent posts I have to sort by Publish Date and then reverse that order (because it defaults to oldest first). So it takes at least two sorts to get to the recent posts. That's not ideal, and I'd like to see if there is a setting option to set a default sort order.
As the title.
Im using Raspbian OS, just a fresh and clean .img file form raspberrypi.org
How to reproduce:
From desktop just launch the program and then put exit. The screen goes black, the only way to get working again is unplug the raspberry.
Right now the main blog index page will list every blog post. Need to add pagination.
https://nickymeuleman.netlify.app/blog/gatsby-pagination
https://www.digitalocean.com/community/tutorials/gatsbyjs-pagination-in-gatsby
https://www.gatsbyjs.com/plugins/gatsby-awesome-pagination/
https://github.com/GatsbyCentral/gatsby-awesome-pagination/blob/master/docs/examples.md
It seems that the blog (at least) subsystem defaults to US mm/dd/yyyy format. Time itself looks local, although I can't tell until we change our clocks in Europe as I'm in GMT for another ten days or so, so they're the same thing.
The preview then shows time in US long format (again, subject to TZ caveat above).
See image, with editor date on left and preview date on right:
I'd suggest that, if this isn't configurable on a per-user level to local time/format, the first of these should at least be an unambiguous format so we can immediately see the difference between 5th March and 3rd May. While you can see it in the preview, it's not ideal when it's the editor date that you'd set.
There are a number of spots where text is pulled from dynamic sources, and if it has HTML entities (things like ampersands count as HTML entities), those need to be escaped at display to show properly. I've already caught a few, but I probably need to go through all the code and try and be proactive about fixing this rather than reactive.
This will likely use Netlify forms and then some kind of API call or export to get them into a format that can be parsed by a new gatsby addon (that will have to be written).
currently only macOS and iOS are mentioned:
I pulled this from the Drupal issues at the request of @enen92. This seems reasonable to me in concept. If anyone has any concerns or thoughts, let me know.
Raising awareness for one issue that I think it could be improved. We basically have two sources of documentation:
Wiki (user maintained and mainly directed towards kodi use although the number of development-based pages). URL: wiki.kodi.tv
Doxygen (technical documentation kept close to the codebase - in the future it is likely that we'll see more and more content making the transition from the wiki to doxygen). URL: docs.kodi.tv
Our website only links to the wiki. Ideally it should have a "Documentation" header item that would "unfold" to "Wiki" and "Technical docs" (or other).
On the home page and the sponsors page, the logos for our sponsors should link to the link provided by the sponsor (i.e. the same one used in the footer).
Right now the only way to see a blog post with all the site CSS applied is to publish it. It would be nice to have a way to see a post in full context before publishing.
There is a way to do that with Netlify, so we need to figure that out.
Currently if you shrink Kodi.tv website then the hamburger icon SideBar's Close button travels from top to bottom with cursor Dragging.
Ideally it should stay as it is.
Illustration of issue:
Would you like to work on this issue ?
Yes
See see xbmc/xbmc#18286.
Need to setup the Netlify CMS so we can do WYSIWYG based blog posts.
Docs:
https://www.netlifycms.org/docs/configuration-options/
OK, this one is a little sticky and will require some conversation. Here's some background:
In order to have a list of recently added or recently updated addons, the build process has to have some sense of history. So beforethe repo addon.xml is parsed and converted for Gatsby, a history file is read (assuming it exists), updated, and written back out. That has worked great during testing because all the builds have been done on my machine, and I push the history file to the repo. Related to that, the script also downloads all the needed images from the mirror site (whether that is really needed is part of the conversation).
Fast forward to testing Netlify builds. I had assumed that if a file was changed during build that Netflify would push it back to the Github repo. It doesn't (and I think it was naive of me to think it would). That means anytime we build on Netlify, it uses the most recent history file from the GitHub repo. That's fine while I'm updating the repo regularly, but if I stop the history file will basically get "stuck" in the past. I can think of three ways to deal with this:
Have a VM somewhere that builds the site locally every day and then pushes the updated history file and any new images to the repo. We'd still use Netlify for continuous deployment, and the update to the repo would trigger a site build (which takes about 5 minutes, so we can do one every day and only use 150 build minutes a month). With this option blog posts could go live "immediately" upon save because we'd still be using Netlify's continuous deployment option.
Have a VM that every 6 hours or so pulls the current repo (this would get any blog posts), builds the site, updates the repo if it needs to (which it would if the addon history file changes), and then pushes the build to Netflify if either there was data that was pulled or pushed to the repo. With this the site wouldn't necessarily rebuild every 6 hours, but it would if needed. That would mean blog posts that are saved could be delayed up to 6 hours. Good news with this option is that we no longer use any Netlify build minutes.
Rewrite the script to grab the history file from somewhere else and then save it back to that same location. I can easily grab a file from somewhere else, but it isn't clear how I'd save the file back using React. With this option the script would have to be changed to save image paths that reference the mirror server rather than local images. I'm not sure what that impact means, but it is an impact. We'd also probably want to figure out a way to schedule a daily rebuild of the site to make sure new/updated addons get added to the web site.
Any of these options will require some kind of external resource, although not a huge one. I'm open to any of these or other solutions I haven't thought of. BTW, I haven't marked this as a blocker because I can keep the history file up-to-date by hand for now, and as long as I do it once a week it should be fine.
Add PVR and Games sections to main page. The PVR stuff can probably be copied from the about page. Games needs to be added from scratch (and should probably also be added to the about page).
Is it possible to reorganise the platform icons in the Download page.
We have 6 icons on the first row, and a single lonely icon on the second row.
Maybe group the Apple platforms as there are a few of them. Something like in the following image...
I remember seeing something in the team Slack about better descriptions for the sponsor levels and a change to the sponsor list, but I can't find it now.
something like:
https://addons.videolan.org/terms/dmca is legally required, according to JB, so it'd be great to have a page for this, maybe in addons? Not sure where it should be linked/etc, but at least indexed/googlable.
Is it possible to move the "Games" tile in What can Kodi do for me? section up with the rest of the media tiles?
Not too concerned about how the last two lines are ordered so it does not need to be a direct swap of the two tiles.
On the Drupal site, featured images were cropped and scaled so that they were all the same size on the index page. That doesn't currently happen on the new site. Images there have a maxheight of 400px but a variable width to allow them to scale with the device used. There may yet be a CSS or React based solution to this, but if not we may need to set some standard for featured images (like 16:9 for aspect ratio).
In addition to the wiki link, we could add in the work @sy6sy2 has done to get jailbroken devices working:
FYI, all jailbroken users can now install Kodi from Cydia, Zebra, Installer or Sileo without any manual steps. This is the packages available on theBigBoss repo:
Kodi-iOS (64-bit) --> Kodi 18.9 for 64 bits devices with iOS >= 9.0
Kodi-iOS (32-bit) --> Kodi 18.9 for 32 bits devices with iOS >= 9.0
Kodi-iOS (Legacy 32-bit) --> Kodi 17.6 for 32 bits device with iOS < 9.0
The footer is setup to wrap the sections to account for mobile devices, but that wrapping starts kind of early, so even desktops without kind of wide screens get a wrapped footer. I need to see how I can adjust the wrapping to address that. One possibility is to reorder the sections so that the two longest ones don't end up vertically aligned (at least initially).
Need to get the addon download stats from the mirrors server. Example URL:
In order to preserve historic links, the CMS and Gatsby builds need to be reconfigured so that the blog index is at /blog/ but the individual blog posts are at /article/.
Nothing in any way fatal, just some thoughts...
Because I modified the Patternfly theme to use Patternfly 4 in a non-standard way, when Netlify builds the site it ends up with a combination of Patternfly 3 and Patternfly 4 React components, so the site doesn't build correctly. I think I'm going to have to create a forked custom theme to fix that so that NPM downloads the stuff the way I need it downloaded.
All the old blog posts need to be extracted from the Drupal database and converted to Markdown. I'm hoping one of these two solutions will work.
No idea how to do this yet, but we probably should bring over at least the last year or two (or three) of blog posts. Preferably all of them.
The picture on the main home page does not scale out to full width on larger screens. Either need to fix that or figure out how to center it. Might need to get a new higher res image to deal with very large screens.
React
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
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
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.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.