spyder-ide / website-spyder

Spyder IDE website sources. Built with Lektor.

Spyder Website

Copyright © 2016- Spyder Website Contributors and others (see AUTHORS.txt)

This is the repository for the Spyder IDE website at Spyder-IDE.org It is built using Lektor, deployed via GitHub Actions and served by GitHub Pages, hosted on a custom domain. The frontend is our very own Lektor-Icon theme, whose documentation should be consulted for details on what the various options do.

• Contributing to the website
• Workflow
• Technologies and libraries used
  • Lektor plugins
• More information

Contributing to the website

Content contributions and bug fixes/improvements are welcome! For information on how to contribute to the site, including reporting issues, setting up a development environment and patching code, see the Contributing Guide. Thanks!

Workflow

The default branch is master, which is continuously deployed with a Github Action to Github Pages at the domain Spyder-IDE.org.

Technologies and libraries used

This website is built using Lektor, a static web generator that can be customized using Jinja2 templates.

Lektor plugins

The build also requires several Lektor plugins (no extra configuration is needed; Lektor automatically installs them when building):

• atom
• disqus-comments

More information

Main Website

Online Documentation

Spyder GitHub

Troubleshooting Guide and FAQ

Development Wiki

Google Group

@Spyder_IDE on Twitter

@SpyderIDE on Facebook

Support Spyder on OpenCollective

website-spyder's Issues

Write download/installation page?

This already exist in the documentation, but I think It should be more relevant, and be in a dedicated page with a link in the navigation bar.

Improve text of the front page

The text present in the various sections and subsections of the front page needs several improvements. @CAM-Gerlach said he's going to help us with that.

@CAM-Gerlach, please make this your priority along with the screenshots for Spyder components.

Update componets text and images

Implement new style changes

• Font change
• Banner
• Get started tabs
• Support us icon
• Background images
• Buttons

misc changes:

• typo <previous
  -show 5 blog post per ppage

Change style of the blog page

Following a style similar to http://blog.rstudio.com/

Home banner should be in a flow block?

Using a flow block will be easy to modify, and separate the content from the logic. Although It will add complexity

#12 (diff)

Generate assets during building in Travis

Generated files shouldn't live in the repo

A couple of more issues with the new theme

The new home page is looking really good! This is my second round of minor issues before considering it's done:

1. We need to change the current favicon because it's using the icon from the old site in Firefox and the Hugo icon theme in Chrome.
2. Navbar sections are not changing when moving from one section to another. For example, Componets is not selected after entering that section.
3. I don't like that the banner is expanded to the full window width. We should set a maximum width (perhaps 700px, I don't know).
4. We should only display the working links that appear below each member of the Team. I mean, for example if someone doesn't have an Instagram account (me) that link and icon shouldn't be displayed.
5. The Plugins section background should be light gray (as the Overview one), the Team background should be white and the footer one should be light gray. That way we will be alternating between those two colors in the whole page.

Update readme with the different technologies libraries we are using

Please add to the readme the different components we are using now, you can split in Backend and Frontend

Backend:

• lektor
• jinja2
• etc etc...

Frontned

• Foundation
• Slick etc.... etc etc

Add a support/donate to spyder

Can be on the home screen for now, and it does not need to do anything, but we need it to be there.

Add disqus comments to the blog pages

DISQUS_SITENAME = 'spyder-ide'

https://www.getlektor.com/docs/guides/disqus/

Personal modules won't load

OSX: 10.12.5, Anaconda [Python: 3.6, Spyder 3.1.4]

Not sure if this is a bug or not, but I've upgraded to the latest version of Spyder through Anaconda and I can't load the modules I've written anymore. For example, previously I could type:

from tools.specModel import SpecModel

and Spyder would find tools in the iPython window so I could import. Now tools won't show up anymore and I've tried:

• Adding tools using the PYTHONPATH manager
• Setting tools as the working directory

Thanks for any help. I have a deadline due Monday and I can't do anything right now.

Update blog look based on design feedback

Build using conda

In spyder-ide we prefer conda over pip, It will also improve building time.

We will have to wait to the next Lektor release, or install Lektor with pip in a conda environment (see error mentioned in #31 )

Organize the assets folder

The asset folder has everything on one level and looks kinda messy. Any chance of adding folders and a better structure?

Adding alternatives for translation

https://www.getlektor.com/docs/content/alts/

Which alternatives should be added? Spanish? French?

Use style linters for sass and javascript

https://github.com/brigade/scss-lint

http://standardjs.com/

Create a code examples section

To make the transition easier for matlab users, we should do something like

https://www.mathworks.com/products/matlab/examples.html

Enhance the footer (change template, add social media icons on footer)

Add social media icons for spyder-ide on the footer

twitter: spyder_ide
facebook: https://www.facebook.com/SpyderIDE/
google: https://plus.google.com/u/0/communities/112932801653352854842
github: https://github.com/spyder-ide/spyder
gitter: https://gitter.im/spyder-ide/public

Add Twitter and Facebook links somewhere for easy access and SEO

Currently, our Facebook and especially Twitter links aren't really linked from anywhere but our OpenCollective to my knowledge, and correspondingly have very low SEO rankings and are very hard to find. Therefore, they should be presumably added to our website somewhere for easy access for users to keep updated and stay in touch, as well as improve their tracking by search engines. Also, linking our website from our Twitter and Facebook probably would also be a good idea...

Add download (Anaconda) and donate buttons to top bar, and darken font color

@dalthviz or others, would you consider adding on the right of the top bar a download button linking to the Anaconda download page (similar in look to the current one for the source code buried down the page on a sub-tab), and secondarily a donate button linking to opencollective (like the one all the way at the buttom)? @ccordoba12 recommended I create a new issue to hopefully get it done.

These have been the top two requests on our gitter and other sources regarding even the small number of people who found the old website (especially the download button), so IMO it should be our highest priority to add to the top bar in some form ASAP considering that without them, the website serves essentially no purpose right now as users have no way to actually download and use spyder, and existing users no way to support the project (nor access any useful documentation, nor any direct link to our main github repo which we should probably stick on the top bar as well, or at least somewhere prominent).

Right now, there is no link whatsoever to download the recommended Anaconda version, and the only download link there is, the source download one, is buried a page down and under a subtab (which only a very, very small fraction of potential new users would actually want—and of those that do actually want to download source, they are way more likely to want to do so through git rather than a plain zip/tar—though many may not be aware of it). Furthermore, the donate button requires the user to scroll all the way to the bottom of the page, which is far from easy to find.

Furthermore, can the text along the top bar (especially when not the selected section) be made much darker? Its very hard to read or even notice as is. Thanks.

Use i18n for translation

As @goanpeca suggested in #36 the standard way to translate content is using i18n

There is a plugin for lektor https://github.com/numericube/lektor-i18n-plugin/ although is outdated and not working.

What we should do?

Create a basic top navigation header.

It would be nice to use a sticky top header that shrinks a bit after you scroll down a bit

The content of the header could be something like, for a basic structure.

The flow of the header should be something like

https://www.rstudio.com/home/

Add 3.0 and 3.1 release notes to the blog

https://github.com/spyder-ide/spyder/releases

Suggestions

• I think the open collective icon is too big. On High DPI screens it looks pixelated. Maybe use an SVG instead of a png?

• I think the footer would look better in a dark color with white icons and text, to generate a more clearer separation of concerns.

• I think having so many attributions clouds a bit the footer. We could use that real state for more meaningfull information and have all those attributions on a separate page with more details.

  Template © 2016 Free HTML5 OTemplate. Some rights reserved; licensed CC-BY 3.0.
  Designed by FreeHTML5.co Demo Images: Pexels
  Icons by Freepik from www.flaticon.com are licensed CC 3.0 BY
  Hugo port by SteveLane
  Lektor port by Dalthviz

• The plugin images should be more homogeneous, it seems the screenshots were taken on different versions of spyder on different Operating systems.

Build using python3

I think this project should be python3 only because there's no reason to support python2

Although Lektor docs indicate there is not python3 support, Lektor currently support python3 in the master branch.

Document how to write a blog post

Migrate blogs to new engine

Use the same shade of red everywhere

The current color for icons, buttons, etc is a shade of orange that I think we took from the hugo-icon theme. However, this color is different from the snake color in the Spyder logo.

So the idea is to use the same shade of red everywhere (logo, icons, buttons, etc). Let's go with @jnsebgosselin's suggestion of

rgb(255, 33, 33).

@dalthviz, please work on this one.

Use a high resolution image of Spyder in the banner

I'll work on this one.

Implement search

There is a search box but It's not working

Search could be implement with an external service like google, or using a js librart like tipue, It will need a script (or lektor plugin) for serialize data.

Various minor textual issues related to the name and authors

A few things

• The footer inaccurately states copyright of theme as "All Rights Reserved", and does not include the name or a link to the license, which is not only clearly false but in violation of its terms. Furthermore, it is not clear that is is the theme that is covered by that copyright and license, rather than all the content of the website itself.
• In the license, the website itself stated to be copyright 2016 by @goanpeca , neither of which is entirely correct anymore. It should presumably be Spyder Website Contributors with an AUTHORS file, similar to what we have in the main and other repos. I'm not entirely sure who/what should be listed in AUTHORS, so please do give feedback on that in the PR.
• In the places where the full Spyder name is stated, it is listed as the Scientific PYthon Development EnviRonment, which is klunky, and thus we're moving toward standardizing on all title case.

Use .png images instead of .gif in the main page (plugins section)

Harmonize blog body and header font sizes with docs

As discussed in spyder-ide/spyder-docs#26 and implemented in spyder-ide/spyder-docs#48 , we probably should harmonize our blog header and body font sizes with that of our docs, for the same reasons that justified changing the fonts, including the serif heading font, to match. Furthermore, they are rather overly large as it is, making posts drag on longer and making the headings almost comically huge, so a little shrinkage wouldn't be a bad thing by itself either.

Therefore, I propose bumping the base blog font size down to 16px, to match the docs (bumped up just slightly) and the general web standard, and bumping the headers down to 2.4em, 1.8em and 1.5em to match the more reasonable 240%/180%/150% of the docs (which are very slightly larger than current docs ones to match the slightly increased normalized base font size). Ideally, it would be nice for this to be done for the release of the first blog post of the new series in #118 .

Missing "Plugins" entry in Navbar

@dalthviz, one thing I noticed after testing your new changes in PR #69 is that there's no Plugins entry in the navbar. Please fix that.

The rest is looking really, really nice!

Migrate documentation to lektor

We need to see how to integrate the documentation within the website. I am personally not a fan of having to use another service for it (like readthedocs), probably we just need to make use a template that is common to the two sites (sphinx generated and lektor generated), and only bundled them together on build.

Also we need to add search for the static site, so its good to look for options. I have used http://www.tipue.com/search/ in the past for this

Fix datetime format to be ISO 8601

Currently, the dates on the blog posts are displayed in a strange format I've never seen in English:

23 February of 2018

Given the heavily international focus of the project, we should probably just stick with ISO 8601 YYYY-MM-DD [HH:MM:SS] date format (or, at least, a standard English form like February 23, 2018 or 23 February 2018 , for no other reason than English is the language of the blog). This should be simple to set in Lektor; I can do it if someone can point be toward where it was changed in the first place (as this is not the default to begin with).

Translate Documentation

I think we will have to wait to reorder and update the documentation before translating it.

Add gitter chat to website

Make foundation work with new layout and SCSS compilation

Try webpack or direct compiling of SCSS using libsass (python)

Feedback on the new theme

Some things that are broken or I'd like to change with respect to the new theme:

1. The navbar doesn't remain fixed at the top in Firefox when you scroll down and scroll back to the top again. It works as expected in Chrome.
2. The image with the big logo should also contain a screenshot of a full Spyder session below it and centered. Else, it seems strange that there is a huge white region below it.
3. In the Overview section, let's remove the images to the right and let's put Description and Download at the center of it.
4. The images in the Components section are not shown. That's because a / gets added to end of their name (e.g. ipython.png/). I don't know how to fix it in Lektor though.
5. There is a big blank space between Components and Plugins that should be removed.
6. We need to find a way to add links to the images of the Plugins section (but that can be added later).

File exchange anyone?

http://www.mathworks.com/matlabcentral/fileexchange/?s_tid=gn_mlc_fx

Translate layout (nav bar, footer) using databags

https://www.getlektor.com/docs/content/databags/

Translate sections (home, community, downloads)

We will have to wait #12 #15 and #20 before working in this issue

Create instructions for getting started with this repo

Lets create on the readme instructions to get started on this repo.

One for pip (or using the lektor install bash) and another one for conda (I can do this one), cause this is the preferred method for us

Add a comminity page (should be also on the top navigation)

Lets just use this content and update it with spyder stuff....

https://www.getlektor.com/community/

We will change the rewording afterwards but I like the idea.

Create a carousel effect with some test images

Like what the lektor page provides,

You can use some images from here, https://github.com/spyder-ide/website/tree/master/img_src

Add a Frequently Asked Questions section

Many users run into the same mistakes, or have similar questions:

• %matplotlib inline
• %gui tk
• qtpy.PythonQtError: No Qt bindings could be found
• discouraging mixing conda with pip (or different conda channels)

Translate the website to multiple languages

https://www.getlektor.com/docs/content/alts/

Use htmldity to reformat up the generated HTML content

This is not important but it would be nice to reformat the built site so that the html follows a given convention.

We can use htmltidy for this.