Code Monkey home page Code Monkey logo

godot-website's Introduction

Godot Engine Website

Welcome to the source code for the Godot Engine website. This is a static website, generated offline using Jekyll.

Contributing

Contributions are always welcome! Godot's website is open source, just like Godot Engine.

However, when contributing to the website, it is important to keep in mind that it acts as a public face of the Godot organization and community. Thus, substantial changes must be discussed ahead of time. You don't necessarily need to open a formal Godot improvement proposal like you do with engine features, but starting an issue on this repository or joining the discussion on the Godot Contributors Chat is a good idea.

Browser support

When working on new features, keep in mind this website only supports evergreen browsers:

  • Chrome (latest version and N-1 version)
  • Edge (latest version and N-1 version)
  • Firefox (latest version, N-1 version, and latest ESR version)
  • Opera (latest version and N-1 version)
  • Safari (latest version and N-1 version)

Internet Explorer isn't supported.

Development

Building

To build the website locally, follow these steps:

  1. Install Jekyll prerequisites.
    • Make sure bundle is available from the command line.
  2. Install Minify.
    • Make sure minify is available from the command line.
  3. Clone this repository.
  4. Install the necessary dependencies: bundle install.
  5. Build the site: bundle exec jekyll build.
    • Append --config _config.yml,_config.development.yml to use the development config with your build.

For simplicity, these two commands are also available as a build.sh script in this repository.

Alternatively, you can also use the official Docker container for Jekyll. This container is designed to be run once to perform the build, so you don't need to compose and permanently store it in your Docker setup. If you're on Linux, execute the following command:

docker run --rm --volume="$PWD:/srv/jekyll" -it jekyll/jekyll:stable ./build.sh

On Windows (from CMD.exe):

docker run --rm --volume="%CD%:/srv/jekyll" -it jekyll/jekyll:stable ./build.sh

Building may take several minutes to finish.

Local server

As this is a static website, it can be served locally using any server stack you want.

  • It is possible to use Jekyll and bundle to immediately serve the pages upon building it. To do this, replace the final build step with bundle exec jekyll serve.
    • When using Docker, you need to add a new argument to the docker run command, -p 4000:4000, and change the shell script to build-and-serve.sh.

      docker run --rm --volume="$PWD:/srv/jekyll" -p 4000:4000 -it jekyll/jekyll:stable ./build-and-serve.sh

      or

      docker run --rm --volume="%CD%:/srv/jekyll" -p 4000:4000 -it jekyll/jekyll:stable ./build-and-serve.sh
  • You can also use Python, which is likely pre-installed on your system. To serve the pages with its local server, run python -m http.server 4000 -d ./_site.

After following either one of these steps the site will be available at http://localhost:4000.

Deployment

The project is built automatically by GitHub Actions whenever the master branch receives a new commit. The master branch itself should not be deployed, as it only contains the source files. The built version of the website is available as the published branch instead.

Note that this is not relevant for local development. Locally you would build the website in place and then serve the _site folder. See the detailed instructions above.

Project structure

Content data and metadata

The following folders contain data files, used for generating more dynamic parts of the website, such as the blog, the showcase, and the downloads page. These pages are written in Markdown and contain a metadata header used by the generator. Markdown files form Jekyll collections with the same name as their containing folder. To create a new Markdown document, you can start by copying an existing one and then change its content.

  • collections/_article contains articles for the blog. Each article is written in Markdown with a metadata header located at the top of the file. The following metadata fields are required for the article to be correctly displayed throughout the website: title, excerpt, categories, author, image, and date. The name of the file acts as a slug in the generated URL.

  • collections/_download contains the download instructions for Godot builds per platform. Each document is written in Markdown with a metadata header located at the top of the file. Download links are generated from the downloads field in the metadata. When adding a new platform, make sure to create a new tab for it in the /_layouts/download.html template.

  • collections/_showcase contains entries for the showcase. Each article is written in Markdown with a metadata header located at the top of the file. Showcase entries can be featured on the home page by setting the featured_in_home field to true. The image used is the one from the image field.

Some information is also stored in YAML files, acting as a file-based database for several meta properties.

  • _data contains various metadata files for the website:
    • authors.yml contains a list of authors used for the blog articles;
    • categories.yml contains a list of categories for the blog articles;
    • communities.yml contains a list of user communities for the /community/user-groups page.

Content pages and templates

The following folders contain entry points for almost every website page, as well as shared templates and assets. The templating language used in Jekyll is liquid.

  • _i18n contains translations for the website. The default language is English. Only static information is translated, with the blog and the showcase being displayed in English. Currently disabled and a work in progress.

  • _includes contains navigation and footer elements used by most pages. If you want to create an element to reuse in multiple pages, you can create a new include file here.

  • _layouts contains the wrapping content for the pages. Each layout inherits from _layouts/default.html which contains the main structure of the page, including the head and meta tags. Other layouts are used for specific pages, like the blog, download, and showcase pages.

  • assets contains static assets for the website. This includes the CSS, JS, and images used in the theme and layout. For media content used in articles and other pages check the storage folder. Some files may be obsolete and unused.

  • pages contains most of the pages for the website. The final URL for each page is specified in the metadata header using the permalink field. Generally, it should map to the file's path inside pages. Dynamic content pages are generated using Markdown collections and layouts.

File storage

  • storage contains media and other files uploaded for use in dynamic content pages, such as the blog, the showcase, the events. Some files may be obsolete and unused.

Build system

This project is build with Jekyll, with the build instructions located in Gemfile and _config.yml. When building locally, some configuration options may need to be different. To define those, _config.development.yml is used.

Content update guidelines

Updating Godot download version

All download information on the website is data-driven. This means that to change the information about the current stable version, or on-going version previews, you don't need to modify pages directly. Instead, data files must be updated.

The main file for keeping track of every official version is data/_versions.yml. It contains exactly one record per each official release, including pre-releases. This file should be updated every time there is a new official build available for download.

To create a new version, add the following block to the file:

- name: "4.0.1"
  flavor: "stable"
  release_date: "20 March 2023"
  release_notes: "/article/maintenance-release-godot-4-0-1/"

Make sure to order entries correctly, with the higher version number being closer to the top. Use the flavor field to mark release as stable or as one of the pre-release builds. Make sure to always fill out the release date, and the release notes link, if available.

When a new build for an existing version is published, update its corresponding block, changing the flavor and the release information. Make sure to update this information when publishing the release notes.

Stable releases featured across the website, must be marked with the featured field and the corresponding major version number. Only one record must be marked as featured per version, so don't forget to remove it from the current holder of the mark.

- name: "4.0.3"
  flavor: "stable"
  release_date: "19 May 2023"
  release_notes: "/article/maintenance-release-godot-4-0-3/"
  featured: "4"

There are two additional files providing data for download pages and links: _data/download_configs.yml and _data/download_platforms.yml. These files don't normally require changes and are used as a static reference table. They define descriptions, tags, and filename slugs for all downloadable builds, as well as order for downloads on some pages.

Adding a mirrorlist host

If a new host needs to be supported by the mirrorlist, it needs to be added in a few places. For the data side of things you need to update _data/mirrorlist_configs.yml and add another record for the major-minor version code.

  - name: "4.1"
    stable: [ "github", "tuxfamily" ]
    preview: [ "github_builds", "tuxfamily" ]

The stable key refers to hosts available for the stable release of that version, while the preview key refers to all pre-releases and dev snapshots, which typically share all their characteristics. If in future there is a need for finer control, some overrides system needs to be implemented.

For the logic side of things, the new host needs to be supported by the _plugins/make_download.rb script. Refer to how other hosts are handled in that file and do the necessary adjustments. We assume that the final filenames are standard across all hosts, so _data/download_configs.yml is respected.

Resources

  • Join the discussion on Godot Contributors Chat in the #website channel.
  • Please consider website usage stats when relying on modern web technologies (web standards support, file type support, etc).

godot-website's People

Contributors

adamscott avatar akien-mga avatar alexfriesen avatar bastiaanolij avatar bits-by-brandon avatar calinou avatar clayjohn avatar coppolaemilio avatar dependabot[bot] avatar djrm avatar faless avatar fedorsykora avatar fellowjamess avatar hpvb avatar jcs224 avatar johnveness avatar merumelu avatar mhilbrunner avatar mhillier98 avatar michaeljrm avatar murderveggie avatar pcvonz avatar raulsntos avatar semickolon avatar siyiwangwei9 avatar wingedadventurer avatar winston-yallow avatar xsellier avatar ymanawat avatar yurisizov avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

godot-website's Issues

Front page screenshots use inconsistent styles

This issue may be considered nitpicking but it's something that bothers me every time I look at the Godot front page.

Consider the following statements as shown in the image below
var taken=false vs. taken␣=␣true
...(␣body␣)vs. ...("taken")

code

In the following image snake case is used everywhere except for CollisionShape2D
tree

Press kit and Logo download and usage guidelines

Adding a presskit page and logo download and usage guidelines would be good to make a more standarized image of the engine + having a centralized place for such content so that journalist and content creators can get it easily.

pring @akien-mga

https://godotengine.org is marked as "Not secure".

Not sure if it is appropriate to post this as an issue here, but since we have no dedicated sysdev/ops section;

The SSL Certificate seem to be out of date, although I have no personal experience with SSL certification and HTTPS to know for sure. "Not secure".

Using Comodo Dragon browser.

Label Mono download as alpha

Operating system, Browser, Browser Version:
All.

Issue description:
The current download page doesn't make it clear that the Mono build is alpha software and does not reflect the overall stability of the non-Mono Godot 3.0.2.
screenshot_20180412_105144

It would be nice to make it crystal clear so that users know about it before they download and try to run it (especially since it might very well crash if they don't have the correct Mono SDK installed).

Center the images uses as article thumbnails

In the article list, each thumbnail is basically a square subset of the top banner shown when you open the article. However, the square is taken from the left of the banner, which, in most case does not fit really well. Indeed, the most representative part of the banner is usually the center.

I suggest we use the center of the thumbnails instead of its left part as a thumbnail.

Enhancements to "More" menu

Here's how it looks like currently:
image

  • The "Donate" link should be changed to be themed like the rest, it no longer makes sense to have it different from the others
  • I'd propose to change the order of links to: Q&A, Asset Library, Devblog, Events, Donate, Contact
  • Maybe we can add the so-far unreferenced License page there too, let's say between Events and Donate

Of course a more in-depth overhaul of the menu sections might be sensible, but it can be discussed further in #3. The points in this issue are meant to be easy to fix right now.

Devblog pagination is broken

On the Devblog, the pagination is broken, so only page 1 can be seen (clicking on "2" or the "next page" arrow lead to the main page).

image

It works fine on the News page which uses the same plugin as backend.

Internationalize the official web site

Could you please support translations for the official web site like the godot editor ?
If the web site speaks native languages that would make godot more attractive to new people.

Navigation links scroll too far down the page

Operating system, Browser, Browser Version: Firefox 65 from Ubuntu repos

Issue description: On an article such as this one, clicking one of the navigation links scrolls too far down the page. The title of the section ends up beneath the navbar.

Screenshots (greatly appreciated if it’s a style issue): Clicking "OpenGL ES 2.0 renderer":
1

Incorrect padding on logo

26-155201704

  1. Incorrect background on :active
  2. There is no :hover style compared to other menu elements.

On mobile view, the logo is not vertically aligned:
26-155318287

Add tentative license compliance instructions on the License page

As suggested on reddit, it would be a good idea to display further instructions on how to comply with the MIT license for Godot projects on the License page. There should be a disclaimer as those instructions should not be considered legal advice.

Some third-party libraries also require displaying the license text as well (or even an attribution notice, in the case of Freetype).

Updating OctoberCMS

We are running a relatively old version of OctoberCMS (build 350 from mid 2016, current is 423: https://github.com/octobercms/october/releases).

I don't see many references to security vulnerabilities thankfully, but we should update nevertheless to get bug fixes and new features (and potential fixes for undocumented security issues). Edit: Actually there was a security vulnerability fixed in build 413.

Not sure what the process for updating should be, maybe @alketii can shed some light on it.

We also need to update the plugins, but I'll open a separate issue about it as some more steps might be involved.

Some resources needed for new website.

I need some resources to complete the new website.

so the new design is this
screenshot from 2018-01-21 14-17-28

what is needed:

  • text for the main message (the current text is not friendly)
    screenshot from 2018-01-21 14-18-31

  • text for this new section
    screenshot from 2018-01-18 11-47-06

  • cool screenshots of godot 3.0 projects (demos or whatever).

  • new list of outstanding features (for the features page) with new text (current text are convoluted).

  • list of 3 or 4 very outstanding features for the main page (like the ones from blender home page).

  • os, and hardware requirements for platforms (also reasonable suggestions here are welcome)
    screenshot from 2018-01-21 14-21-53

  • text for this
    screenshot from 2018-01-21 14-23-09

  • if someone is willing to make new screenshots for the community section, that would be welcome (but it is not top priority)

Add homepage section for company sponsors

Our Patreon campaign includes Gold and Platinum sponsorship levels (intended mainly for companies), for which we promise to put company logo (and I guess, a link when you click on the logo) on the homepage.

We should add a horizontal section for that below the "Get involved" section and before the footer:
image

I guess it could be two columns, with Platinum sponsors on the left and Gold sponsors on the right, and with a link to the Donate page to learn more about sponsoring the project or just supporting it financially. (I still need to write some details about the sponsoring deals on that page, but you can link to it anyway).

Currently we have one Gold sponsor, Gamblify, so their logo should be added:
Gamblify_Logo_2_Colors.zip

Improve sorting of Showcase entries

The Showcase page (Portfolio plugin in the backend) is currently a bit rough, and we have no control on the sorting of the submitted entries. They are sorted in reverse chronological order (from latest addition to oldest one).

That means that we don't have much control over what we actually show on the main page, and since we've been relatively flexible with what kind of games get added to the database (basically as long as it looks decent visually, it's fine), at some times we might be showing low-to-mid quality mobile games instead of more impressive desktop titles, for example.

I'm open to suggestions on how to improve this.

Here's the idea I have so far:

  • Split the page vertically in two sections:
    • The first section would have games which were tagged by webmasters with the "featured" tag
    • The second section (below) would have all other games
  • Both sections would be randomized, so that you see different games each time you load the page
  • Instead of a pagination, we could have the following:
    • The first section (featured) would be a one-row banner that can be scrolled to the left and right, showing more entries
    • The second section would be scrollable vertically and new entries would load as you scroll down

WDYT?

Download page does not detect OS, defaults to Linux

Operating system, Browser, Browser Version:
Windows 7, Firefox Nightly (60a1) from today

Issue description:
When going to https://godotengine.org/download it defaults to the Linux downloads even while I'm on Windows.

It should autodetect the platform, otherwise too many users will end up downloading the Linux build and wonder why it doesn't run.

Also, it would be nice to put the platform logos in monochrome in their tabs, to make it clearer.

Additionally, I think we should leave out the op.godotengine.org:81 mirror for 3.0-stable. It's only offered over HTTP and Windows 10 is even more paranoid with unsigned binaries downloaded over HTTP instead of HTTPS.

Improve style of code font in articles

Operating system, Browser, Browser Version:
Mageia 6 x86_64, Firefox Nightly (from today)

Issue description:
The code font takes too much horizontal space IMO, with extraneous padding on the sides and too much space between letters:

screenshot_20180324_191626
screenshot_20180324_191604

I'd suggest to try to remove the extraneous padding on the sides so that it fits better inline, and if possible make it more compact by reducing the padding between letters (if that can't be done, maybe reducing the font size a bit wouldn't be too bad).

Differentiate the Linux headless and server builds

Many people are wondering what is the difference between headless and server builds, so it should be clarified on the download page.

Alternatively, the Linux server build could be part of the export templates, which means there would no longer be a download button for it. In this case, dedicated servers would be created by exporting projects.

markdown leaking into news summary

The page at https://godotengine.org/news displays summaries of the news stories.
These summaries can expose raw markdown.

image

Welcoming our new gold sponsor: ImageCampus
By: Juan Linietsky Sep 21 - 2018
Godot gets a new Gold sponsor! In this case, we are welcoming [Image Campus](https://www.imagecampus.edu.ar), an education institution located in Buenos Aires, Argentina, which specializes in animation, digital art and videogames.

October version 420+ will require PHP 7

We recently updated to version 419, the next version of October will upgrade to Laravel 5.5 which requires PHP 7. Last I heard, our provider is still using PHP5. So, In order to get future updates, we'll have to switch from PHP 5 to 7. We should also be aware not to update October anymore in case for some reason there aren't any safety measures put in place for those of still running PHP 5.

Include full articles content in RSS feed

Operating system, Browser, Browser Version:
All, not relevant.

Issue description:
Our current RSS feed only includes the excerpt of the blog articles.
Some users would like to have the full contents to be able to read them in their RSS reader.

Our RSS is generated via the sobored.rss plugin: https://github.com/godotengine/godot-website/tree/master/plugins/sobored/rss
This is likely the default configuration, I don't know yet if it can easily be configured differently, or if we need to patch the plugin.

Screenshot:
screenshot_20180429_182745

Review metadata exposed by Godot pages (OG tags?)

I've noticed that we don't see to fully document the relevant metadata that various external websites would use to display our links. Not sure exactly how this should work but I bet you web guys know what this is about :)

Here are some examples of Godot links posted on various sites, and the apparent lack of descriptive info that they provide:

  • On Discord: See how our blog links only show a small icon and no text
    image

  • On Twitter: godotengine.org links appear as plain text instead of generating a preview
    image
    image

  • On Facebook: It does a better job, but the debugger also raises various warnings about missing OG tags. Addressing those might fix it for Twitter, Discord, etc.
    image

https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fgodotengine.org%2Farticle%2Fwe-need-your-help-improve-our-documentation-system

Updating the CMS plugins

We need to update our CMS plugins to their latest versions. Here are the versions we currently ship:
image

AFAIK, @alketii modified some of those plugins to better fit our needs, so we need to compare our current plugin code to the original upstream code of our versions to generate patches that we could reapply, or better, find a way to achieve our use cases without modifying the plugin code. (Or if we need to modify plugins, try to get our changes upstreamed).

Menubar at top of webpage is spam and should not be visible when reading while scrolled down on page

Vertical screen space is a limited and precious commodity. And it is being wrongfully used by a pointless menubar that refuses to stay out of sight at the top of the page where it belongs.

If the menubar was statically placed you can still access it at any time 'instantly'. Pressing the Home key scrolls a page to the top. Even on laptops that dont have a dedicated home key you still have the 'function' key that makes one of the other keys act as the home key which takes the exact same amount of time to type. It also takes less than a second to just drag the scroll bar to the top. On a phone (at least on my Android) a couple brisk swipes can scroll to the top of a webpage even if you were 30 'pages' of content down.

In other words, THERE IS NO EXCUSE OR REASON AT ALL to be wasting screen viewing space for something that is still accessible effectively 'instantly' on any platform.

New website for godot 3

I have a few proposals for a new version of the website.

image4357

the idea here, is to have a grid of featured content, like updated learning material, or events.

i want to emphasize the new features so im placing features in the main page.

any suggestions or comments are welcome.

Add a news section to the homepage

I think the homepage should have a news section at the top of it. It makes it easier to see what's new with the engine without having to always click on the news page and also makes the page look more "active".

Screenshots (greatly appreciated if it’s a style issue)
Example of what I mean

Add console deploy into features

We all know godot can export to xbox one, play station 4 and nintendo switch via third parties. But it is not stated in the website.

News preview image is low resolution

Operating system, Browser, Browser Version:
Windows 7, Firefox Nightly (60a1) from today

Issue description:
The preview image for the news articles seems to be upscaled from low resolution thumbnails:
image

While the blog posts have it in higher res:
image
(maybe too high btw, we should likely set a max height?)

I suspect that we might be using the thumbnail generated for the October backend instead of the actual full-res image:
image

Proposal - Replace Padlock/Shopping Basket with text link to Asset Lib.

<img src="{{ 'assets/asset_lib.svg' | theme }}" alt="">

Honestly. Neither a Padlock, Nor a shopping basket are intuitive. What are we protecting? What are we selling/buying? It took me until yesterday, since the creation of the asset lib, to realize that that is what the icon is for. I usually just google it.

Placing it next to the Donation button is also confusing. Imho it should sit next to Community, before More.

Showcase link broken

https://godotengine.org/showcase/2

  • Colony Strikes Back - The Game

https://godotengine.org/showcase/3

  • Galactic Void 2
  • Color Flex

https://godotengine.org/showcase/4

  • The Orbit
  • Save the Bubble
  • Pineapple Runner

https://godotengine.org/showcase/5

  • Desert Kingdom Defense
  • Sawdust
  • Fox Hunting
  • Squane

https://godotengine.org/showcase/6

  • SAG - Space Adventure Game
  • Links Fusion
  • Tap Gym

https://godotengine.org/showcase/7

  • Dots & Dots
  • Bounce
  • Push Pin Solitaire
  • Sushi Simulator

https://godotengine.org/showcase/8

  • Top
  • Circle Invasion
  • Circl
  • World Flags Challenge
  • Quad-Teleport Square Puzzle
  • Frog

https://godotengine.org/showcase/9

  • Numbers Fusion
  • Beware the Cat

https://godotengine.org/showcase/10

  • Space Protector
  • Rain Drop
  • Bounce It

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.