Customization Redesign & Portfolio

[mayamcdougall]

Redesigned Customization page using Webpaint's Portfolio style.

Viewable here: Themes and Plugins

This PR is both for the page itself and for the portfolio framework that generates it.

Also note that it contains currently unmerged changes from #352 that are unrelated to this PR. Actual changes begin at Implemented Portfolio and Revamped Customization. 8819d43

Previously discussed in #352.

Areas to improve on:

• Customizable "Launch Site" Button Text.
  • What should the text be on customization? Download? Launch Site? View on GitHub? (since I think all but NotePaper go to GitHub).
• Better utilization of Meta text in existing tiles...
• Separate Plugins and Themes
• Improve Javascript on portfolio-detail-view.
• Multiple categories for themes/plugins - Started, but always room for improvements / more
  • For Themes: Single-page, Static Website, Blog-Style, etc.
  • For Plugins: Blogging, Social, Developer, etc
• Better representation of Plugins (especially when too abstract for a screenshot)
  • Possible Style: "muted", gray puzzle piece background with persistent overlay text, but only turns green on hover.
  • Initial Styles and Effect
  • Better Puzzle Piece graphic.
• Use Jekyll "Collections" to separate each theme and plugin into its own file.
  • Migrate Heading and Description to content
    • Migrate Heading
      • Markdownified Heading instead, since it's not contiguous with the Description.
      • Also, it's used for the Overlay, so it needs to be in an isolated variable for that.
    • Migrate Description
  • Provide backwards compatibility with YAML method for non-collection based portfolio pages.
  • Provide a blank YAML template that contributors can fill out to easily add their content.
    • Include submission guidelines / readme with things like screenshot resolution and location.
    • Fork and PR instructions? This is probably out-of-scope. As Links.
  • Move images into collection
    • Remove "Theme" from the names of theme screenshots, as it's redundant now.
    • Remove "Default Theme" images. Maybe re-purpose them elsewhere.
    • Use these images for the About Page, instead of its own.
• a tags in the info section should be white, not green.
• Captions for carousel items? Probably not worth the effort, since we already have a content area.
• Escape all variables that are vulnerable to apostrophes.
• Provide "Documentation" on how to use gallery and portfolio. "Unnecessary"
  • Don't forget about things like info._blank, page.portfolio.categories, include categories=variable and other examples that may not be represented on the current page.
• Fix whitespace on either side of : in the Item-Details <span>.
• Customize or slow carousel.
  • Slowed
• Second, text-focused, pop-up content area for Plugins page.
• Fix odd cut-off on right edge.
• Update About page URLs (and image locations)
• Add styles for portfolio-detail-view code
• Better implementation of plugin defaultThumbnail styles trigger
• Merge new styles with regular styles.
• Correct image paths (and any others) with {{ site.github.url }}. Remove leading / from paths.
• Change myCarousel ID to entry-{{ forloop.index0 }}-carousel or something similar.
• Check commented JS from e3cd95b
• Use the "active item" class to make active item stay lit.
• Don't break the styles for "standalone" overlay images
• Make sure that the bg color transitions are located in the right CSS file (pico.css) for consistency with other styles.
• IE8 Compatible Styles (Customization Redesign & Portfolio #358 (comment))
• Change meta to description
• New blank info lines implementation.
• Find a replacement for the None category? (created when I removed multi-page)
• Create Theme/Code image for "Plus" tile.
• Bigger plugin content (excerpts or whole readme's)
• Standardize Description (meta) punctuation.
• Set "Contribute" tile layout.
• Change name of layout variable.
• Image/List Layout Problem (Card View)
• Contribute Tile Text
• Getting Started Section
• Revise Docs Contribute section
• Recreate defaultThumbnail Images as SVG
• Create Plugin-Specific Contribute Tile
• Clean and Upload Source Files
• Replace Default Theme images with high-res plugin graphic

---

• Investigate odd YAML behavior that is treating my categories as an array instead of a string. For now, I'm treating this variable as an array (and maybe converting the syntax) since it probably should be an array. It was just confusing because I was expecting a string of HTML ID's separated by spaces. For comparison, description is correctly treated as a string (otherwise it'd be a spaceless jumble of letters).

description: Google Analytics for Pico with basic options.<br><br>This plugin will automatically add the Google Analytics tracking script to the < head > section of each page generated by Pico.
categories: plugin developer. Why is this an array and not a string?

Is creating:

description: "Google Analytics for Pico with basic options.<br><br>This plugin will automatically add the Google Analytics tracking script to the < head > section of each page generated by Pico."
categories: ["plugin","developer.","Why","is","this","an","array","and","not","a","string?"]

[mayamcdougall]

use Jekyll's collection feature

Okay, so from what I think I'm understanding, portfolio.html would become alayout instead of an includes?

Edit: Nevermind, it seems like I could probably just do exactly as it was already done, just with different variables. I'm just poking around the existing files and figuring it out as I go.

Everything else would stay largely the same except the main loop would iterate on the collection and each page's individual variables instead of on portfolio.items.

This sounds pretty promising... 😃

[mayamcdougall]

Okay, it's all rigged up using collections. I haven't added anything specific to collections into portfolio.html, only an override that accepts include variables for both the portfolio and the categories variables. The categories override is so that later on we can potentially have multiple portfolios, with separate categories by defining a second categories variable in the YAML.

{% include portfolio.html portfolio=site.customization categories=page.portfolio.categories2 %}

If neither item is defined, it falls back to loading them from the current page.

[PhrozenByte]

Note for myself: Use https://github.com/picocms/Pico/pull/358/files/a48924bbc2d3ce208c86554d6c05dae667132d8e..HEAD to get a diff of all changes except for the changes of #352

@smcdougall: The cherry pick command is git cherry-pick 8819d4379aea0814e1bae513660cc65abdba0bb3^..9cbce8c7b60548f6e496865b852bc32ff7795ba0 e3b1a1e676dc5ecd4e91046853a70709aa87fa86^..b81b7e743186ac4c53c609726e5b34bffd8cb8e9 in this case btw 😉 (again, you don't have to, just want to let you know)

[PhrozenByte]

The whitespace after the : (content of <span class="lite1">) isn't intended, is it? Furthermore, the border-bottom spans over a whitespace after the element for some reason, I don't know why this happens, but it looks a bit odd.

[mayamcdougall]

Huh. I hadn't noticed that. I'll move the white space to after the span. I'm usually working from my laptop (13", 1080p screen), so maybe the border issue wasn't as obvious on the smaller screen. That space is definitely what's causing the problem with the bottom border though.

I also need to figure out why there's a space rendered before the colon. I think it has something to do with Markdownify. I was working on that before, but I guess I forgot about it.

I'll add that to my notes. 😃

[PhrozenByte]

Looks great so far! 👍

Better representation of Plugins (especially when too abstract for a screenshot)

Possible Style: "muted", gray puzzle piece background with persistent overlay text, but only turns green on hover.

I really like this idea 😃

[PhrozenByte]

In response to #352 (comment):

Since you didn't comment on it, the Puzzle Piece image was just something I made really quick as a placeholder. I couldn't find a puzzle piece image that was both free and attribution-free, so I just made my own.

Yeah, I like it, great idea! 👍 😃

Ultimately, I wasn't sure how to handle images for plugins. While some plugins generate things that could be represented by screenshots, others will be more abstract.

As I've said already, I like the idea of a "gray puzzle piece background with persistent overlay text". This is a convenient solution for the plugins overview, but not for the details view (i.e. when clicking on a plugin). The portfolio details are pretty oriented towards the screenshot, what doesn't work quite well for most plugins. 😒

This doesn't mean that I think most plugins can't be visualized. A pagination plugin could show the pagination, a tags plugin its tag cloud. Others can be visualized a bit more abstract, but still "on the topic" - a search plugin could show a big search icon, a multilanguage plugin country flags. But most plugins have in common that they can't be visualized with a large screenshot.

Unfortunately I don't have a solution for this problem... Maybe by shrinking the screenshot's width halfway through and using the additional horizontal space for a second text column? The details view of plugins should be less high in general.

[PhrozenByte]

Well, since it's not required for this PR, I'd suggest leaving it off for now.

I agree. However, this is nothing we should forget about (i.e. add a ToDo to our list if we don't resolve it now)

My reasoning for this is that, later on I can always delete said repo without disturbing anything. (No need to worry about commit histories, old versions, etc).

Actually that's one of the reasons why a separate repo is no good idea 😒 We should keep everything at one place.

Oh, and btw, your date format broke things:

GitHub wasn't complaining about it 😄 😉

[mayamcdougall]

Actually that's one of the reasons why a separate repo is no good idea 😒 We should keep everything at one place.

Yeah, but you were worried about the extra space that would take up. I just mean that temporarily it's better than implementing a different solution, then deciding you don't like it and having it stuck in the ever-growing git history. (To my understanding, even if said large file was deleted later on, it would still be taking up space).

GitHub wasn't complaining about it 😄 😉

Well my Jekyll instance refused to regenerate the site. 😠 😜

[mayamcdougall]

Where would you like me to make a note about it? It's kind of useless on this PR as it'll be lost in the "closed" section.

I could also make a note in the zzz_contribute file if that'd be helpful.

Edit: Uploaded

[PhrozenByte]

Yeah, but you were worried about the extra space that would take up.

That's the reason why I was suggesting Git LFS 😆 With Git LFS the file is stored separately on a arbitrary server (GitHub e.g. hosts such servers). The large file is then replaced by a simple text file pointing to that space in the repo.

[mayamcdougall]

That's the reason why I was suggesting Git LFS 😆

Well, if it's how you want to handle it, that's fine. My questions are:

1. Where do you want the file in our repo? (the text pointer)
2. Where will the real file be? Is that storage something that GitHub offers (and for free), or will it need to be another location (such as the temporary repo I made 😒)

[mayamcdougall]

At this point it's just waiting on you.

Minus the one source file, and our decision there, everything is ready to merge.

The only "conflict" is that customization.md has been removed altogether in my fork, while here it's been added to since I started this PR. The solution is, obviously, to delete it.

I can merge it (:smile:) or you can. Either way, I'll wait for your final permission. :wink:

[PhrozenByte]

Well, if it's how you want to handle it, that's fine.

This is rather a brainstorming than a decision 😆

1. Where do you want the file in our repo? (the text pointer)

dunno. _themes/images/fullsize/contribute.kra?

2. Where will the real file be? Is that storage something that GitHub offers (and for free)

Afaik: Yes. Never used it either. See https://git-lfs.github.com/

At this point it's just waiting on you.

Sure, go on and merge it. As you said, this isn't required for this PR.

[mayamcdougall]

Okay! 👍

I'll also investigate the Git LFS thing if I have some time.

[mayamcdougall]

Aaaaand it's Official! 🎉 🍻

[PhrozenByte]

🎊 🎉 🍻

Amazing work @smcdougall, thank you! 👍 😃

[mayamcdougall]

I've got a little more work to do though.

Apparently I never added Pico HTTP Parameters to the Plugin page. 😅

Also, one plugin I cut from the old page was "Pico Navigation". This is because it was last updated 3 years(!) ago. If you know that this plugin is still compatible / relevant to modern Pico, I can add it back though.

[mayamcdougall]

😮 I can edit your comments now. I went to click on the "reaction" button and hit Edit by mistake.

[PhrozenByte]

I've got a little more work to do though.

😆

Also, one plugin I cut from the old page was "Pico Navigation".

I probably tested it, but I'm not sure. Anyway, it is going to be incompatible with Pico 1.1 and most people use a custom theme anyway, so simply leave it out. It's discouraged anyway, this can easily be achieved with Twig.

😮 I can edit your comments now. I went to click on the "reaction" button and hit Edit by mistake.

Yep 😆

[mayamcdougall]

Now to be responsible and test my changes before pushing them to the real website.

Unlike some people. 😝

[PhrozenByte]

Unlike some people. 😝

cough no idea about who you're talking cough 😆

[mayamcdougall]

...so what happens when @BesrourMS goes to make a PR later this week and discovers that cusotmization.md is gone? 😆

[BesrourMS]

I think this link will be my target : https://github.com/smcdougall/Pico/tree/gh-pages/_themes 😜

[mayamcdougall]

If you haven't found them yet, I've written some Submission Guidelines that show how everything works.

Obviously, I've already made entries for all of your existing themes. When you go to submit another one, go ahead and copy one of those as a template. 😉