Various changes by Siddhant + component extraction (#10)

Songtech-0912 · Shrinks99 · web-flow · commit 45db5a1d99bc · 2024-07-06T11:49:58.000-04:00
* New logo page by Siddhant
* New brand page by Siddhant
* New and ported assets by Siddhant
* Extracted homepage repeated code to components
* Custom css for components and includes
* Rewritten homepage by Siddhant
* Archive unready links in footer
* More useful development information
* Build default branch, helpful if it is not main
* Allow manually running GitHub actions
* Remove need for branch-checking to fix workflow
* Minor syntax error fixes

---------

Co-authored-by: Henry Wilkinson &lt;henry@wilkinson.graphics&gt;
diff --git a/.github/workflows/jekyll.yml b/.github/workflows/jekyll.yml
@@ -3,8 +3,7 @@ name: Deploy Jekyll site to Pages
 
 on:
   push:
-    branches:
-      - main
+  workflow_dispatch:
 
 # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
 permissions:
diff --git a/DEVELOP.md b/DEVELOP.md
@@ -2,7 +2,7 @@
 
 Natron's website uses Jekyll, a static site generator. It usually saves us a lot of time reduces our trouble, but we know it can be confusing to many newer developers and get *them* in lots of trouble. So, here is a reliable means of developing Natron's website for Mac users, Windows users, and GNU/Linux users!
 
-If you run into any issues, look at the FAQ and common build problems section at the bottom of this guide.
+If you run into any issues, look at the FAQ and [Development Gotchas](#development-gotchas) section at the bottom of this guide.
 
 ## Installing prerequisites for development
 
@@ -151,8 +151,30 @@ First, you want to get [Homebrew](https://brew.sh/), which is a package manager
 
 Follow the same steps as in the GNU/Linux guide, with the one difference being that you want to use Homebrew to install `rbenv`, by running `brew install rbenv`. The remainder of the steps should be exactly the same as on GNU/Linux.
 
-## Important contributing information
+## Contributing guide
+
+Our development workflow uses Git, which tracks development changes so that we can easily synchronize work by multiple developers, locate any change in history, and not worry about losing work. Git relies on the concept of _branches_ and _commits_. A commit is any change: it can be anything from editing an existing file, creating a new file, to deleting a file. Commits happen on _branches_, which are like paths for commits. A quick reference to Git's many, many commands, as well as links to resources for beginners, can be found [here](https://learnxinyminutes.com/docs/git/). We host our Git repository and collaborate on [GitHub](https://github.com/), and a starting guide for GitHub can be found [here](https://docs.github.com/en/get-started/start-your-journey).
+
+It is *strongly encouraged* to create a new branch for any new additions, via `git checkout -b my-new-branch-name`, as this will avoid [many issues](https://stackoverflow.com/questions/64369860/github-no-file-changes-but-many-commits-when-comparing-branches). Open a [pull request](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests) once you are finished making your changes and have pushed them to GitHub.
+
+### Important contributing information
 
 You are welcome to make pull requests (PRs) to contribute your changes to the website! We will give your PR a review, and as long as there are no issues, your changes will be accepted and added to the website. 
 
-However, please take note that you **do not overwrite** the `Gemfile.lock`. It is easy for this to happen if you use a version of Ruby, `bundler`, or Jekyll that is different from the official versions given in this guide. The `Gemfile.lock` is important for making sure that the GitHub action builds can take place in a carefully-controlled environment, and as such, should not be modified lightly. In certain cases, such as when changing Jekyll or Ruby versions, it may be changed, but otherwise, please do not submit a commit that has overwritten it, and check that you did not accidentally commit any locally-different `Gemfile.lock`.
+However, please take note that you **do not overwrite** the `Gemfile.lock`. It is easy for this to happen if you use a version of Ruby, `bundler`, or Jekyll that is different from the official versions given in this guide. The `Gemfile.lock` is important for making sure that the GitHub action builds can take place in a carefully-controlled environment, and as such, should not be modified lightly. In certain cases, such as when changing Jekyll or Ruby versions, it may be changed, but otherwise, please do not submit a commit that has overwritten it, and check that you did not accidentally commit any locally-different `Gemfile.lock`.
+
+## Development Gotchas
+
+Due to the nature of our development setup, there are lots of hidden surprises that may happen, and they are documented here.
+
+- I got the error `Invalid syntax for include tag. File contains invalid characters or sequences.`
+    - This is because the correct syntax is `{% include component.html param="value" %}`, with the include html path **not surrounded by quotes** (i.e. not `"component.html"`)
+- My site variables are not being updated!
+    - Reload the development server, open a new terminal if necessary, as Jekyll's development server does not seem to reload config files
+
+## FAQ
+
+- Why did you use Jekyll? Why not Hugo/Next.js/Gatsby?
+    - This is because Jekyll is native to GitHub, and we originally wanted to use GitHub pages' native Jekyll support, though we ended up switching to GitHub actions to reduce dependencies and use a more recent version of Jekyll
+- Why is the Git repo so big?
+    - We include images, brand assets and third-party binary files necessary for Natron that are not available anymore, the Jekyll site itself is relatively small
diff --git a/_config.yml b/_config.yml
@@ -9,6 +9,7 @@ twitter: https://twitter.com/natronvfx
 discord: https://discord.gg/cpMj5p3Fv5
 forum: https://discuss.pixls.us/c/software/natron
 github: https://github.com/NatronGitHub/Natron
+facebook: https://facebook.com/groups/NatronNation/
 
 # Values to change when setting up a new Natron release
 natron:
@@ -59,6 +60,11 @@ downloads:
         title: "OS X 10.6+"
         url: ""
         suffix: "-OSX-Universal.dmg"
+  other:
+    freshports: https://www.freshports.org/graphics/natron/
+    examples: https://sourceforge.net/projects/natron/files/Examples/
+    natron-plugins: https://github.com/NatronGitHub/natron-plugins
+    natron-scripts: https://github.com/NatronGitHub/natron-python-scripting
 
 # Build settings
 sass:
diff --git a/_includes/community-card.html b/_includes/community-card.html
@@ -0,0 +1,19 @@
+{% capture site-link %}
+    site.{{ include.name }}
+{% endcapture %}
+
+<div class="index-community-cardcontainer">
+    <a href="{{ site[include.name] }}" class="index-card" target="_blank">
+      <div class="index-card-icon">
+        <i class='bx {{ include.icon }}'></i>
+      </div>
+      <div class="index-card-text">
+        <div>
+          <h4 class="h4">{{ include.title }}</h4>
+          <p class="p-small">
+            {{ include.detail }}
+          </p>
+        </div>
+      </div>
+    </a>
+</div>
diff --git a/_includes/download-btn.html b/_includes/download-btn.html
@@ -0,0 +1,3 @@
+<div class="{{ include.styling | default: '' }}">
+    <a class="button large-dropshadow download-btn" href="{{ include.href }}"><i class='bx bxs-download' style="font-size: 1.4rem;margin-right: 0.4rem;"></i> {{ include.name }}</a>
+</div>
diff --git a/_includes/feature-card.html b/_includes/feature-card.html
@@ -0,0 +1,11 @@
+<li>
+    <div class="index-featurecard">
+      <img src="{% base %}img/index-feature-cards/{{ include.icon }}" alt="">
+      <div>
+        <h4 class="h4">{{ include.title }}</h4>
+        <p class="p-small">
+          {{ include.detail }}
+        </p>
+      </div>
+    </div>
+</li>
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -13,9 +13,10 @@ <h4 class="h4">Explore</h4>
           <li>
             <a href="{% base %}">Home</a>
           </li>
+          <!-- Will re-activate once features page is done
           <li>
             <a href="{% base %}features/2d-compositing">Features</a>
-          </li>
+          </li> -->
           <li>
             <a href="{% base %}news">News</a>
           </li>
@@ -26,7 +27,7 @@ <h4 class="h4">Explore</h4>
             <a href="{% base %}about">About</a>
           </li>
           <li>
-            <a href="{% base %}/brand">Brand</a>
+            <a href="{% base %}brand">Brand</a>
           </li>
         </ul>
       </nav>
diff --git a/_sass/_custom.scss b/_sass/_custom.scss
@@ -0,0 +1,34 @@
+// For custom components and includes
+@import "mq";
+
+.download-btn {
+    color: var(--textwhite) !important;
+    text-decoration: none !important;
+}
+  
+
+.brand-logo {
+    display: inline-block;
+    max-width: 50% !important;
+    height: auto;
+    margin-top: 1rem !important;
+    margin-bottom: 1rem !important;
+}
+
+@include mq($until: tablet) {
+    .brand-logo {
+        max-width: 70% !important;
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+
+@include mq($until: mobile) {
+    .brand-logo {
+        max-width: 90% !important;
+    }
+}
+
+.with-spacers {
+    margin: 2rem 0.5rem;
+}
diff --git a/about.md b/about.md
@@ -7,39 +7,46 @@ title: About Natron
 
 ![An animated cartoon shot open in Natron](img/about-screenshot.png)
 
-Natron is a free and open-source compositing application geared towards VFX work. It is currently actively developed by a small team of developers as a community effort.
+## Cross-platform open-source compositor for the visual effects industry
 
-We accept [feature requests and bug reports on GitHub](https://github.com/natronGitHub/natron/issues).
+Natron is a powerful free and open-source VFX compositor geared towards digital post-production work, with industry-standard UI, 100+ nodes, and support for OpenFX and community-made plugins. With its robust OpenFX based engine and support for OpenImageIO and OpenColorIO, Natron can handle all of your VFX post-production needs.
+
+Natron was a proud recipient of [Inria](https://www.inria.fr/en) funding from 2013–2018, and is currently being developed by a team of open-source contributors as a community effort.
+
+We accept feature requests and bug reports on [our GitHub](https://github.com/natronGitHub/natron/issues).
 
 ## Development
 
-We regularly accept pull requests and are always looking for new contributors. If you are experienced in C++, Qt, and graphics programming, and are interested in contributing to Natron, please reach out to us!
+We are always on the lookout for new contributions to Natron, be they minor bug fixes or big new features. As such, we regularly review the GitHub and accept pull requests. If you are a developer who is well versed in C++, Qt, and graphics programming, and are interested in contributing, please do not hesitate to reach out to us!
 
-For instructions on how to build Natron from sources please see [this section of our README document.](https://github.com/NatronGitHub/Natron#building-and-installing-from-source)
+For instructions on how to build Natron from source, read through [Natron's README file on GitHub.](https://github.com/NatronGitHub/Natron#building-and-installing-from-source)
 
-## FAQs
+## FAQ
 
-### Is Natron free?
+### Is Natron really free?
 
-Yes, Natron is free and due to its GPL license it always will be.
+Yes, Natron is free software. Free to use, free to modify, and free to share, due to its open-source GNU GPL license.
 
 ### What can Natron do?
 
-Natron is suited to perform 2D compositing tasks. That means it can:
+Natron is a powerful digital compositor capable of handling a multitude of VFX and post-production tasks. Natron's capabilities include but are not limited to:
 
-* Chromakey blue and green screens
-* Rotoscope a moving object or person
-* Combine multiple pieces of footage on top of each-other
-* Perform 2D stablization and tracking
-* Warp, crop, blur, and other effects
-* Combine and edit render passes of OpenEXR files
+- Linear node-based workflow
+- 32bit/channel floating-point linear processing pipeline
+- Industry-standard OIIO file format support
+- Powerful chroma-keying and matte refinement
+- Industry-standard rotoscoping and rotopaint
+- Pixel-perfect tracking and stabilization
+- Industry-standard OCIO color management
+- Extensive OpenFX and community plugins support
+- And much more!
 
-Natron does *not* include 3D compositing features. You will need to use a 3D package like [Blender](https://www.blender.org/) to render your 3D objects before bringing them into Natron for compositing.
+Natron can be used in conjunction with [Blender](https://www.blender.org/) to extend it's capabilities by utilising Blender's 3D environment. This is facilitated by Natron's support for CHAN files for transferring camera tracking data.
 
-### Where can I donate to Natron?
+### Does the Natron Project accept donations?
 
-While we appreciate your generosity Natron does not currently accept donations.  Currently all of our contributors have full time jobs and the amount we would likely receive from community donations wouldn't justify the administrative overhead of collecting them.  With that caveat aside, if you are a corporate entity willing to fund development on a larger scale please do reach out!
+While we appreciate your generosity, the Natron Project does not currently accept donations.
 
 ### Where can I find brand assets for Natron?
 
-You can download our logo and wordmark on our [brand assets page](/brand).
+If you wish to add Natron to the credits of your project or use the logo for other non-commercial purposes, you can download the logomark on our [brand assets page](/brand).
diff --git a/brand.md b/brand.md
@@ -3,26 +3,34 @@ layout: textpage
 title: Natron Brand Assets
 ---
 
-## Brand
+## Logo
 
-Natron has a logo and you're welcome to use it to identify the program as long as you aren't impersonating the Natron organization or its developers through the use of these assets.  Please review the brief list of guidelines below.
+<img class="brand-logo" src="{{ 'files/assets/Natron Full Logo White.svg' | relative_url }}" alt="Natron's full logo in white" />
 
-[Click here to download our brand assets!](files/Natron-Brand-Package.zip)
+Natron has lettermark and wordmark logos. The logos are properties of the Natron Project and are used to identify official Natron content. Third parties can use the Natron logo to provide credit to the Natron software or to refer to the Natron Project.
 
-### Please do:
+{% include download-btn.html 
+   name="Download logo kit"
+   href="files/Natron-Brand-Package.zip"
+   styling="with-spacers"
+%}
 
-- Use the Natron logo whenever you wish to give credit to the program, when using the logo in film credits please place it with any other relevant logos to ensure it does not imply that your film was created by Natron or its developers
-- Try to use the full version of the logo with text wherever space allows
-- Use the logo that provides the most contrast against the background it is placed on
+Several variations of the Natron lettermark and wordmark are available for use with different backdrops:
 
-### Please do not:
+<img class="brand-logo" src="{{ 'files/assets/logos.jpg' | relative_url }}" alt="Brand logos for Natron, with a stylized N and Natron beside it" />
 
-- Attempt to use the Natron logo to pass yourself or organization off as the developers of Natron
-- Attempt to use the Natron logo as your own
-- Modify the logo in any way
+### Usage
 
-<!-- ### Community Badges
+You are welcome to add the Natron logo to your project's credits! When using the Natron logo in credits, care must be taken to avoid confusion about affiliation with the Natron Project, its developers and contributors. Read the usage guidelines below to understand how you can use the Natron logo.
 
-We're borrowing this concept from the Blender Foundation because it's great!  Do you make Natron-related content?  Use these assets to identify it as such!
+### General Guidelines
+
+The Natron logo is property of the Natron project. The logo and the name "Natron" are not part of the GPL, and can only be used commercially by the Natron Project.
+
+Third parties may only use the Natron logo under the following conditions:
+- The logo can only be used to refer to the Natron software or to give credit. When used with a link on a web page, it should point to Natron's website at <a href="{{ site.url }}">{{ site.url }}</a>
+- The logo is used as-is, without fancy enhancements, in original colors, and original typography.
+- The logo may be placed alongside others, e.g. when listing software in the credits.
+- To use the logo on commercial products, you must contact us with a picture of how it will be used, and ask for explicit permission. Showing the Natron logo on film credits is not considered to be commercial use.
+- The logo must not be used by third parties to impersonate or act on behalf of the Natron Project, its developers and contributors.
 
-These badges should not be used to identify Natron in film credits, when crediting the program please use our full logo as distributed in the brand assets package. -->
diff --git a/css/main.scss b/css/main.scss
@@ -11,3 +11,4 @@
 @import "mq";
 @import "news";
 @import "codehighlight";
+@import "custom";
diff --git a/files/assets/Natron Full Logo White.svg b/files/assets/Natron Full Logo White.svg
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 2265.6 419.7" style="enable-background:new 0 0 2265.6 419.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{enable-background:new    ;}
+</style>
+<g id="Hexagon">
+	<path class="st0" d="M336.4,419.7H136.8c-13.1,0-25.4-7.1-32-18.5L4.9,228.4c-6.6-11.4-6.6-25.6,0-37l99.8-172.9
+		C111.4,7.1,123.7,0,136.8,0h199.6c13.1,0,25.4,7.1,32,18.5l99.8,172.9c6.6,11.4,6.6,25.6,0,37l-99.8,172.8
+		C361.8,412.6,349.5,419.7,336.4,419.7z M136.8,26c-3.9,0-7.6,2.1-9.6,5.5L27.5,204.4c-2,3.4-2,7.6,0,11l99.8,172.8
+		c2,3.4,5.6,5.5,9.5,5.5h199.6c3.9,0,7.6-2.1,9.6-5.5l99.8-172.8c2-3.4,2-7.6,0-11L345.9,31.5c-2-3.4-5.6-5.5-9.5-5.5H136.8z"/>
+</g>
+<g id="N">
+	<path class="st0" d="M320.9,63.9v130c0,2.2-1.8,4-4,4l0,0c-1.5,0-2.8-0.7-3.5-2L243.6,75.2c-4.4-7-12.1-11.3-20.4-11.3h-57.1
+		c-8.6,0-16.5,4.6-20.8,12L75,197.9c-4.3,7.4-4.3,16.6,0,24l77.4,134v-130c0-2.2,1.8-4,4-4l0,0c1.4,0,2.8,0.8,3.5,2l69.7,120.7
+		c4.4,7,12.1,11.3,20.3,11.2H307c8.6,0,16.5-4.6,20.8-12l70.4-122c4.3-7.4,4.3-16.6,0-24L320.9,63.9z"/>
+</g>
+<g class="st1">
+	<g>
+		<path class="st0" d="M627.9,148.7v162h-45.8v-223h45.8l165.8,163.4V87.7h45.8v223h-45.8L627.9,148.7z"/>
+	</g>
+</g>
+<g class="st1">
+	<g>
+		<path class="st0" d="M976.8,87.7h49.6l105.8,223h-50l-22.1-48.6H943.7l-22.1,48.6H872L976.8,87.7z M1042.6,223.8l-41-90l-40.7,90
+			H1042.6z"/>
+	</g>
+</g>
+<g class="st1">
+	<g>
+		<path class="st0" d="M1344.9,87.7V126h-94.4v184.8h-45.8V126h-94.8V87.7H1344.9z"/>
+	</g>
+	<g>
+		<path class="st0" d="M1378.3,87.7h151.3c51.4,0,85.5,20.7,85.5,67.6c0,37.2-24.1,52.7-55.8,58.3c34.5,2.8,51,12.4,51,44.1v53.1
+			h-45.8v-50c0-25.5-10.7-32.4-53.8-32.4h-86.5v82.4h-45.8L1378.3,87.7L1378.3,87.7z M1529.6,192.5c25.9,0,39.6-13.1,39.6-34.5
+			c0-20.3-13.8-31-39.6-31h-105.5v65.5H1529.6z"/>
+	</g>
+	<g>
+		<path class="st0" d="M1654.8,199.4c0-72.7,52-116.2,141-116.2c89.3,0,141,43.4,141,116.2c0,72.4-51.7,115.8-141,115.8
+			C1706.8,315.2,1654.8,271.8,1654.8,199.4z M1888.8,199.4c0-51.7-38.3-76.5-93.1-76.5s-94.1,24.8-94.1,76.5
+			c0,51.4,39.3,76.2,94.1,76.2S1888.8,250.7,1888.8,199.4z"/>
+	</g>
+	<g>
+		<path class="st0" d="M2027.4,148.7v162h-45.8v-223h45.8l165.8,163.4V87.7h45.8v223h-45.8L2027.4,148.7z"/>
+	</g>
+</g>
+</svg>
diff --git a/files/assets/logos.jpg b/files/assets/logos.jpg
diff --git a/index.html b/index.html

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<div class="{{ include.styling \| default: '' }}">`
	`2`	`+ <a class="button large-dropshadow download-btn" href="{{ include.href }}"><i class='bx bxs-download' style="font-size: 1.4rem;margin-right: 0.4rem;"></i> {{ include.name }}</a>`
	`3`	`+</div>`