Blog layout and styling improvements #1237

chrsmith · 2019-06-26T23:17:54Z

All of the content changes are specific to replacing "4x space indentation" for code blocks, to using an explicit "```typescript". Since the former wasn't consistently applying syntax highlighting.

If you could review the changes to the /layouts/ folder, I'd love to get your take on if I'm using TailWind CSS the right way. Things appear to be better:

Adjustments to blog sidebar, such as adding the "recent posts" list and making the tag cloud elements a little smaller.

On mobile the sidebar hides and is replaced with a toggleable menu. Notice how the images in the post summaries no longer appear to float.

Expanded

The partials/blog/poster.html now puts a max size on the image and floats it to the right, which makes them less overbearing.

Add a very basic footer to individual blog posts, with the date and tags.

[chrsmith] Syntax highlighting seems to be missing from at least some posts (https://fusion.pulumi.io/blog/running-containers-in-aws-the-lowdown-ecs-fargate-and-eks/)

Evidently syntax highlighting is only applied sometimes if you indent a code block with 4x spaces. (Perhaps
the heuristic it uses to determine the language isn't able to for shorter snippets?)

Switched to using explicit ```typescript (or similar) blocks.

[chrsmith] Blog code blocks have awkward "scroll bars?" even when there is not content to scroll?

I saw this in the past, but couldn't find a repro anywhere. So perhaps this was fixed with some other
CSS change we took. If we see it again I can take a look.

[chrsmith] Sort order for Author and Tag pages was incorrect

Fixed.

[chrsmith] Also, was nice that these had counts on them previously so you could quickly get a feel for what kind of other content was available related to topics of interest.

Won't fix. This adds a lot of visual noise for little benefit. e.g. would you not click the tag if there was only 3 posts under that topic?

[chrsmith] size of titles relative to other content on the page feels too small.

That's reasonable feedback, though we are using the same font-size for headings throughout
the site. So let's leave it as-is for now, and we can touch it up if you still feel the same
way later.

[chrsmith] We intentionally don't list blog dates on them, to keep them more timeless, let's please remove

Done. The dates are still listed in the "blog listing page", but at the bottom of the post on individual pages.

[chrsmith] On mobile, blog tags take up a lot of vertical real estate, including on blog posts themselves -- maybe just show on the homepage, and maybe put in a drop-down?

Yes. They also take up a lot of space after switching to the "earlier" tags. Adjusting default size, and hiding on mobile.

Made the elements smaller, so they fill the avialable space better.
Also hid the entire tag cloud on mobile, though it can be displayed after clicking on a hamberger menu.

[chrsmith] The preview images are too large, let's keep it similar to our old format of having them right aligned and smaller

Done.

[chrsmith] I didn't see where the blog article lists its tags; this used to be at the bottom (see "Topics: x, y, z").

Done.

[chrsmith] Blog missing any "related posts" or "recent posts" sidebar - hard to get a feel for what other content is available when you are on a post

Done, added recent posts lists (for large layouts only.)

Fixing another batch of issues from #1213.

pulumi

(Original PR was to master branch, disregard this comment by our dear friend @pulumi-bot.)

pulumi

🍹 The Update (preview) for stack pulumi/pulumi.io/pulumi.io-fusion was successful.

Resource Changes

    Name                                                                               Type                              Operation
~   docs/reference/cd-travis/index.html                                                aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/nodejs/pulumi/openstack/identity/index.html                     aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/python/pulumi_aws/lightsail/index.html                          aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/python/pulumi_aws/ec2clientvpn/index.html                       aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/python/pulumi_kubernetes/authentication/v1beta1/index.html      aws:s3/bucketObject:BucketObject  update
~   docs/reference/crosswalk/aws/ecs/index.html                                        aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/nodejs/pulumi/kubernetes/types/v1/index.html                    aws:s3/bucketObject:BucketObject  update
~   docs/aws/athena/index.html                                                         aws:s3/bucketObject:BucketObject  update
~   blog/tag/apigateway/index.html                                                     aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/nodejs/pulumi/awsx/cloudwatch/logs/index.html                   aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/python/pulumi_aws/dms/index.html                                aws:s3/bucketObject:BucketObject  update
~   docs/quickstart/k8s-the-prod-way/app/index.html                                    aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/nodejs/pulumi/kubernetes/auditregistration/v1alpha1/index.html  aws:s3/bucketObject:BucketObject  update
~   docs/quickstart/gcp/destroy-stack/index.html                                       aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/nodejs/pulumi/aws/codepipeline/index.html                       aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/python/pulumi_azure/trafficmanager/index.html                   aws:s3/bucketObject:BucketObject  update
~   docs/reference/vs/cloud_templates/index.html                                       aws:s3/bucketObject:BucketObject  update
~   blog/welcoming-gitlab-users-to-pulumi/index.html                                   aws:s3/bucketObject:BucketObject  update
~   blog/page/3/index.html                                                             aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/nodejs/pulumi/aws/elasticbeanstalk/index.html                   aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/nodejs/pulumi/aws/iot/index.html                                aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/nodejs/pulumi/awsx/efs/index.html                               aws:s3/bucketObject:BucketObject  update
~   docs/reference/crosswalk/aws/lambda/index.html                                     aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/python/pulumi_kubernetes/scheduling/v1alpha1/index.html         aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/nodejs/pulumi/docker/index.html                                 aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/nodejs/pulumi/openstack/database/index.html                     aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/python/pulumi_f5bigip/index.html                                aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/nodejs/pulumi/openstack/vpnaas/index.html                       aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/nodejs/pulumi/f5bigip/ltm/index.html                            aws:s3/bucketObject:BucketObject  update
~   docs/reference/cli/pulumi_config_refresh/index.html                                aws:s3/bucketObject:BucketObject  update
~   blog/page/7/index.html                                                             aws:s3/bucketObject:BucketObject  update
~   docs/quickstart/index.html                                                         aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/nodejs/pulumi/kubernetes/networking/v1/index.html               aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/python/pulumi_gcp/servicenetworking/index.html                  aws:s3/bucketObject:BucketObject  update
~   docs/reference/tutorials/azure/tutorial-container-webserver/index.html             aws:s3/bucketObject:BucketObject  update
~   docs/reference/tutorials/azure/index.html                                          aws:s3/bucketObject:BucketObject  update
~   docs/reference/organizing-stacks-projects/index.html                               aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/nodejs/pulumi/aws/cloudfront/index.html                         aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/nodejs/pulumi/gcp/organizations/index.html                      aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/python/pulumi_gcp/projects/index.html                           aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/nodejs/pulumi/openstack/loadbalancer/index.html                 aws:s3/bucketObject:BucketObject  update
... and 1043 other changes

cnunciato

Nice! I like the approach to the submenu toggle; I think we can probably make use of that throughout the site. The blog looks so nice. 🎉

I have a few super minor suggestions (and a commit prepped that I can push to your branch if you're okay with these):

Bump the padding a bit around the tags.
Tighten the spacing around the "Program the Cloud" block.
Remove the bullets from the list of recent posts, and tweak the margins and leading of the list items a bit, just to reduce the visual noise the bullets introduce.
Tweak the padding of the sidebar slightly to make better use of the tags, and change the layout of that list to inline-flex flex-wrap so the tags wrap more naturally.
Keep colors the same when hovering over an active tag.

Here's how it looks with these revisions:

Let me know and I'll push these changes up for you. 🤜 🤛

chrsmith · 2019-06-27T02:38:30Z

@cnunciato All of those sound great. Commit away, then squash + merge. 👍

pulumi

🍹 The Update (preview) for stack pulumi/pulumi.io/pulumi.io-fusion was successful.

Resource Changes

    Name                                                                              Type                              Operation
~   docs/reference/pkg/nodejs/pulumi/kubernetes/types/v2beta1/index.html              aws:s3/bucketObject:BucketObject  update
~   docs/reference/tutorials/aws/tutorial-rest-api/index.html                         aws:s3/bucketObject:BucketObject  update
~   blog/easy-serverless-apps-and-infrastructure-real-events-real-code/index.html     aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/nodejs/pulumi/aws/storagegateway/index.html                    aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/nodejs/pulumi/aws/ec2/index.html                               aws:s3/bucketObject:BucketObject  update
~   blog/lambdas-as-lambdas-the-magic-of-simple-serverless-functions/index.html       aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/nodejs/pulumi/aws/worklink/index.html                          aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/nodejs/pulumi/awsx/ebs/index.html                              aws:s3/bucketObject:BucketObject  update
~   blog/tag/features/index.html                                                      aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/python/pulumi_azure/appservice/index.html                      aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/nodejs/pulumi/azure/mysql/index.html                           aws:s3/bucketObject:BucketObject  update
~   blog/kubespy-and-the-lifecycle-of-a-kubernetes-pod-in-four-images/index.html      aws:s3/bucketObject:BucketObject  update
~   docs/reference/tutorials/aws/tutorial-service/index.html                          aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/python/pulumi_aws/autoscaling/index.html                       aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/python/pulumi_aws/efs/index.html                               aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/nodejs/pulumi/azure/devtest/index.html                         aws:s3/bucketObject:BucketObject  update
~   blog/tag/mysql/index.html                                                         aws:s3/bucketObject:BucketObject  update
~   docs/aws/ecr/index.html                                                           aws:s3/bucketObject:BucketObject  update
~   docs/reference/cli/pulumi_preview/index.html                                      aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/nodejs/pulumi/kubernetes/autoscaling/index.html                aws:s3/bucketObject:BucketObject  update
~   blog/page/2/index.html                                                            aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/python/pulumi_azure/postgresql/index.html                      aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/nodejs/pulumi/kubernetes/types/v1beta2/index.html              aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/python/pulumi_aws/rds/index.html                               aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/nodejs/pulumi/aws/mediastore/index.html                        aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/nodejs/pulumi/aws/acm/index.html                               aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/python/pulumi_openstack/containerinfra/index.html              aws:s3/bucketObject:BucketObject  update
~   careers/index.html                                                                aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/nodejs/pulumi/gcp/iam/index.html                               aws:s3/bucketObject:BucketObject  update
~   support/index.html                                                                aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/nodejs/pulumi/vsphere/config/index.html                        aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/python/pulumi_kubernetes/authentication/v1/index.html          aws:s3/bucketObject:BucketObject  update
~   docs/quickstart/k8s-the-prod-way/app/index.html                                   aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/nodejs/pulumi/cloud-aws/config/index.html                      aws:s3/bucketObject:BucketObject  update
~   blog/tag/applications/index.html                                                  aws:s3/bucketObject:BucketObject  update
~   docs/reference/component-tutorial/index.html                                      aws:s3/bucketObject:BucketObject  update
~   blog/easily-create-and-manage-aws-eks-kubernetes-clusters-with-pulumi/index.html  aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/nodejs/pulumi/aws/servicediscovery/index.html                  aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/nodejs/pulumi/awsx/rds/index.html                              aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/nodejs/pulumi/aws/opsworks/index.html                          aws:s3/bucketObject:BucketObject  update
~   docs/reference/pkg/python/pulumi_aws/apigateway/index.html                        aws:s3/bucketObject:BucketObject  update
... and 1043 other changes

justinvp · 2019-06-27T20:07:27Z

layouts/partials/blog/sidebar.html

+                        {{ if eq $tag $title }}
+                            {{ $classes = "border-blue-600 bg-blue-600 text-white hover:text-white" }}
+                        {{ end }}
+                        <a class="px-2 py-1 mr-1 cursor-auto rounded transition-all {{ $classes }}" href="{{ .Page.Permalink }}">


Why cursor-auto?

I was playing around with the site with this change applied, and clicking the tags felt off without the regular pointer cursor for links.

Here's what it'd look like with standard pointer cursor for links, which feels better to me:

Oh, no! That was a mistake on my part. I'll fix. Thanks for noticing it.

* Move content into docs/content * Make navigation and doc generation work Signed-off-by: Christian Nunciato <c@nunciato.org> * Make search work Signed-off-by: Christian Nunciato <c@nunciato.org> * Move docs-specific layouts into layouts/docs Signed-off-by: Christian Nunciato <c@nunciato.org> * Move docs partials into layouts/partials/docs Signed-off-by: Christian Nunciato <c@nunciato.org> * Share a common header and footer Signed-off-by: Christian Nunciato <c@nunciato.org> * Add product & pricing pages, modify main nav Signed-off-by: Christian Nunciato <c@nunciato.org> * Bring images under assets, docs images under assets/images/docs Signed-off-by: Christian Nunciato <c@nunciato.org> * Link to the docs home page, fix image ref Signed-off-by: Christian Nunciato <c@nunciato.org> * Add containers, serverless, kubernetes topics Signed-off-by: Christian Nunciato <c@nunciato.org> * Add careers Signed-off-by: Christian Nunciato <c@nunciato.org> * Add compete, compete -> migrate Signed-off-by: Christian Nunciato <c@nunciato.org> * About, contact Signed-off-by: Christian Nunciato <c@nunciato.org> * Add legal Signed-off-by: Christian Nunciato <c@nunciato.org> * Add product Signed-off-by: Christian Nunciato <c@nunciato.org> * Add partner content Signed-off-by: Christian Nunciato <c@nunciato.org> * Add webinar Signed-off-by: Christian Nunciato <c@nunciato.org> * Add why-pulumi Signed-off-by: Christian Nunciato <c@nunciato.org> * Add GitHub redirect, support Signed-off-by: Christian Nunciato <c@nunciato.org> * Add blog * Add blog - update post frontmatter * Update content/_index.md Co-Authored-By: Justin Van Patten <jvp@justinvp.com> * Remove drafts & redundant fonts, move asset dirs up a level Signed-off-by: Christian Nunciato <c@nunciato.org> * Reconcile blog navigation Signed-off-by: Christian Nunciato <c@nunciato.org> * Migrate some blog content (#1147) * Reconcile www, blog and docs footer items (#1141) Signed-off-by: Christian Nunciato <c@nunciato.org> * Clean up blog layout (#1148) * Migrate more blog posts (#1157) * Replace Bootstrap with TailwindCSS * Add Tailwind * Create a config directory under assets, move PostCSS and Tailwind configs into it * Remove Bootstrap Sass and JS referemce * Refactor the header, base template, and footer to use Tailwind * Pull TOC Sass into its own partial Signed-off-by: Christian Nunciato <c@nunciato.org> * Refactor the docs home page Signed-off-by: Christian Nunciato <c@nunciato.org> * Refactor docs single, list and section layouts Signed-off-by: Christian Nunciato <c@nunciato.org> * Refactor quickstart-clouds partial Signed-off-by: Christian Nunciato <c@nunciato.org> * Reposition config items to fix syntax highlighting Signed-off-by: Christian Nunciato <c@nunciato.org> * Replace syntax CSS theme with Monokai Signed-off-by: Christian Nunciato <c@nunciato.org> * Add a dark blue for links Signed-off-by: Christian Nunciato <c@nunciato.org> * Add the beginnings of Sass color settings Signed-off-by: Christian Nunciato <c@nunciato.org> * Add a Sass file for langchoose Signed-off-by: Christian Nunciato <c@nunciato.org> * Give no-select its own Sass also, since it’s a partial Signed-off-by: Christian Nunciato <c@nunciato.org> * Give docs single and list templates more width for main content Signed-off-by: Christian Nunciato <c@nunciato.org> * Add some padding to the TOC, since we don’t have proper gutters yet Signed-off-by: Christian Nunciato <c@nunciato.org> * Fix button on Quickstart home page Signed-off-by: Christian Nunciato <c@nunciato.org> * TOC styles Signed-off-by: Christian Nunciato <c@nunciato.org> * Quickstart clouds Signed-off-by: Christian Nunciato <c@nunciato.org> * Padding to left and right columns Signed-off-by: Christian Nunciato <c@nunciato.org> * Black for TOC Signed-off-by: Christian Nunciato <c@nunciato.org> * Refactor docs/aws to use its own layouts Signed-off-by: Christian Nunciato <c@nunciato.org> * Fix the AWS tech partner image Signed-off-by: Christian Nunciato <c@nunciato.org> * Adjust AWS layouts Signed-off-by: Christian Nunciato <c@nunciato.org> * Move docs-home markup into a layout Signed-off-by: Christian Nunciato <c@nunciato.org> * Format the mini-toc Signed-off-by: Christian Nunciato <c@nunciato.org> * Reduce subhead sizes a bit Signed-off-by: Christian Nunciato <c@nunciato.org> * Remove snowflake styles Signed-off-by: Christian Nunciato <c@nunciato.org> * Extract some Sass partials Signed-off-by: Christian Nunciato <c@nunciato.org> * Define initial purple and blue palettes, use numbered colors instead Signed-off-by: Christian Nunciato <c@nunciato.org> * Refactor blog templates Signed-off-by: Christian Nunciato <c@nunciato.org> * Make blog summary a partial, style pagination Signed-off-by: Christian Nunciato <c@nunciato.org> * Fix expanded URLs Signed-off-by: Christian Nunciato <c@nunciato.org> * Rename Documentation to Reference Signed-off-by: Christian Nunciato <c@nunciato.org> * A smattering of minor adjustments Signed-off-by: Christian Nunciato <c@nunciato.org> * Selection state for tags Signed-off-by: Christian Nunciato <c@nunciato.org> * Delete more Bootstrap Signed-off-by: Christian Nunciato <c@nunciato.org> * Comment the banner Signed-off-by: Christian Nunciato <c@nunciato.org> * Restore footer links Signed-off-by: Christian Nunciato <c@nunciato.org> * Legal layout Signed-off-by: Christian Nunciato <c@nunciato.org> * Remove unused layout Signed-off-by: Christian Nunciato <c@nunciato.org> * Refactor careers page Signed-off-by: Christian Nunciato <c@nunciato.org> * Use top-level URLs for legal docs Signed-off-by: Christian Nunciato <c@nunciato.org> * Add RSS for the blog (#1170) * Add RSS for the blog * Cleanup team data (#1195) * Cleanup team data * Add missing newlines at EOF * Blog content as of 6/16 (#1196) * Blog content layout tweaks * Migrated blog content (as of Sun 6/16) * Address PR feedback, replace links to pulumi.io * Add fusion stack Any changes to the `fusion` branch will now be deployed to https://fusion.pulumi.io/. * Fix broken links * Fix broken images in fusion branch (#1207) Deletes unnecessary uses of `BaseURL`. In a small number of cases, where we want to emit an absolute URL that includes the `BaseURL`, use the `absURL` function instead, which is smart about handling missing/extra slashes. * Integrate www content (#1208) Signed-off-by: Christian Nunciato <c@nunciato.org> * Highlight currently selected section tab (#1216) * Remove unused partials (#1215) These are no longer referenced, so they can be removed. Signed-off-by: Christian Nunciato <c@nunciato.org> * Blog content as of 6/24 (#1218) * Port running-containers-in-aws-the-lowdown-ecs-fargate-and-eks * Port building-and-publishing-docker-images-to-a-private-amazon-ecr-repository * Port happy-birthday-to-pulumi-open-source * Commit updates to package-lock.json * Link cleanups and other fixes * Remove 'wip' tag * Restore meta_* fields, tidy up some frontmatter (#1214) Signed-off-by: Christian Nunciato <c@nunciato.org> * Add search (#1217) Signed-off-by: Christian Nunciato <c@nunciato.org> * Hide `.language-prologue-*` by default (#1212) So they all don't initially flash as being visible before all but the selected language are hidden. Port from `_pulumi.scss`. * Limit team members to those with status “active” (#1219) Signed-off-by: Christian Nunciato <c@nunciato.org> * Fix links to datadog provider * Remove top margin from code snippets under lang tabs (#1223) * Update MBR DNA logo (#1222) * Add links to cloud logos (#1221) And use `logo-aws_white.png` for AWS * Remove unnecessary aliases (#1210) Now that we'll be hosting the docs on a new domain, there's no need to maintain these aliases. The old site hosted at https://pulumi.io will have redirects from the old aliases to the new location on the new site. * Pricing page updates (#1224) * Add swooshes to the home, pricing and webinar pages. * Replace “tech” PNGs for GitHub, GitLab, Atlassian and SAML with SVGs, and add an email SVG, in order to align all of their images in the pricing grid. * Add a “See plan details” link above the pricing grid. * Update Font Awesome to version 5.8.1 (to match what's in use on www today) in order to pull in the infinity icons used in the pricing grid. * Align CTA buttons horizontally in adjacent boxes containing content of varying heights. * Fix duplicate links on the home and product pages. Signed-off-by: Christian Nunciato <c@nunciato.org> * Update API docs (#1227) * Update tsdocgen paths * Updated API docs * Fix broken images (#1228) Remove unnecessary `{{ .Site.BaseURL }}` prefix from image URLs. * Fix Hugo build warning about non-relative ref/relref page reference (#1229) * Fix page titles and errant anchors (#1226) * Prevent anchors on the home page * Fix page titles Signed-off-by: Christian Nunciato <c@nunciato.org> * Add a robots.txt file (#1225) This change adds a robots.txt template authorizing seach-engine indexing for all pages of the production site. It assumes that all non-production builds will override the `baseURL` configuration property with something other than `https://pulumi.com/`. Signed-off-by: Christian Nunciato <c@nunciato.org> * Blog content fixes (#1231) * Correct post dates, titles * Revert to previous tags * Unify tags, adjust for display * Replace short, social summaries with longer ones * Use a fixed height for the utility bar (#1232) When the GitHub widget loads asynchronously and pops into view, it causes the whole page to shift downward a few pixels, because the widget is taller than the links beside it. Applying an explicit hight to the utility bar fixes this. Signed-off-by: Christian Nunciato <c@nunciato.org> * Fix TOC expansion for the tour (#1234) We're very likely going to remove the tour and disperse its content elsewhere, but in the meantime, fix the TOC expansion for "Beyond the Basics" items. * Add syntax highlighing to layout templates (#1238) This change adds a partial for highlighting code snippets in layouts. Signed-off-by: Christian Nunciato <c@nunciato.org> * Add home-page video (#1240) Also makes a few slight adjustments to improve mobile layout on the home page. Signed-off-by: Christian Nunciato <c@nunciato.org> * Blog layout and styling improvements (#1237) * Use explicit code blcoks with language * Fix sort order for Author and Tag listings * Make sidebar toggleable on mobile * Resize "poster" image for blog listings * Crop photos to be square * Add posted date, post tags to blog footer * Add recent posts lists to sidebar * Add syntax highlighting to some missed posts * Fix Hugo build warning * Adjust sidebar styling * Cleanup the /docs page (#1239) * Cleanup /docs/aws layouts to match other docs sections * Cleanup /docs pages - Add left nav - Make /docs page look slightly less like a "homepage" - Add top-level "Get Started" and "Reference" headings to left nav * Add `.btn-secondary` and use it in a few places * Remove unnecessary cursor setting (#1245) Should be using the default here. I was debugging and forgot to switch this back before committing. Signed-off-by: Christian Nunciato <c@nunciato.org> * Update the home page video (#1244) This is a slightly shorter version, with typing sections sped up slightly to better respect our visitors’ time. 😄 Signed-off-by: Christian Nunciato <c@nunciato.org> * API doc styling improvements (#1247) * Update API doc styling for Python Bring back the styles used for our Python API docs, convert to use Tailwind, and make further tweaks to make it look even better. For example, all definitions now look like code blocks and indentation and spacing is used to improve the hierarchy of the content. * Only emit the <h1>.Title</h1> if there is a .Title The generated Python API docs don't currently include front matter and therefore do not have a title. We should fix the Python docs gen to do that, but in the meantime, only emit `<h1>.Title</h1>` if the page has a `.Title`, to avoid an unnecessary gap at the top of the page. * Update _pygments.scss to select .highlight instead of .chroma The syntax highlighted code generated by Hugo looks like: ``` <div class="highlight"> <pre class="chroma"> <code class="language-foo"> ... </code> </pre> </div> ``` And our styles looks like: ``` .chroma .k { ... } .chroma .kc { ... } ... ``` This works good, but our generated Python docs, which uses Pygments to do the syntax highlighting, doesn't use `.chroma`, so it doesn't get any syntax highlighting currently, even though all the Pygments classes are there. This is true for our Node.js docs as well, although, based on how we generate the code for that currently, we could relatively easily update the templates to include a `.chroma` class. In all cases, the code that we want highlighted will have a `.highlight` class surrounding it, so just update our styles to select `.highlight` instead of `.chroma`. ``` .highlight .k { ... } .highlight .kc { ... } ... ``` * Update API doc styling for Node.js * Various mobile adjustments and cleanup (#1250) * Pull the hero and section nav into Tailwind "components" and apply them. * Adjust home-page video dimensions accordingly. * Add mobile x-padding to sections that hadn't gotten it yet. * Add an anchor exclusion to the head for the About page. * Fix mobile layout for the Support page. * Fix centering and item distribution on the About page. * Additional minor mobile-related adjustments as encountered. Signed-off-by: Christian Nunciato <c@nunciato.org> * Fix bug in lang chooser (#1249) If I've previously viewed a page in our docs with the language tabs, such as the Get Started guide, and I click the Python tab, that language choice will be persisted to a cookie. If I then visit our Node.js API docs, the lang chooser will see the saved value of "Python" and try to select that tab, hiding all other language snippets. But our Node.js API docs only contain JavaScript and TypeScript snippets, so the end result is that all snippets are hidden and no tab is selected. This change fixes that. If the value in the cookie does not exist in any of the tabs on the page, fallback to the default (JavaScript), otherwise fallback to the first tab that is available on the page. * More small fixes (#1254) * Make the header more responsive Adds padding to medium and above, and adjusts font size and spacing at medium width in order to accommodate the number of items we’re displaying currently. Also uses the full Pulumi logo, since we have room for that now, and adds a little color to the hamburger. Signed-off-by: Christian Nunciato <c@nunciato.org> * Bottom-align the image on the whitepaper layout Also removes the `header` selector from `_hero.scss` in order to reduce the specificity of the rule, allowing it to be overidden more easily with other Tailwind classnames. Signed-off-by: Christian Nunciato <c@nunciato.org> * Add team@pulumi link to the footer Signed-off-by: Christian Nunciato <c@nunciato.org> * Restore the newsroom and investors sections Somehow these got dropped! 😱 Signed-off-by: Christian Nunciato <c@nunciato.org> * Add hero background glows (#1257) Also deletes unused templates. Signed-off-by: Christian Nunciato <c@nunciato.org> * Hide scrollbars if not needed (#1256) * Improve Pricing page responsiveness, fix a few other small things (#1259) * Fix section link on the Why Pulumi page Signed-off-by: Christian Nunciato <c@nunciato.org> * Capitalize Kubernetes in copy Signed-off-by: Christian Nunciato <c@nunciato.org> * Adjust image sizes on Whitepaper page Properly size them on both mobile and desktop. Signed-off-by: Christian Nunciato <c@nunciato.org> * Fix paging on mobile Decrease padding to prevent overflow. Signed-off-by: Christian Nunciato <c@nunciato.org> * Improve Pricing page layout Signed-off-by: Christian Nunciato <c@nunciato.org> * Replace home page video with carousel (#1260) Signed-off-by: Christian Nunciato <c@nunciato.org> * Change Segment module to WWW (#1265) * Hook up new www.pulumi.com/staging stack to CI/CD (#1262) * Move older 'pulumi.io' stacks to infrastructure-old * Add new 'www.pulumi.com' infrastructure folder * Scripts to hook up to CI/CD * Switch back to using generic Travis worker * Add alias to CDN for staging.pulumi.io * Remove alias to staging.pulumi.io * Do not use named profiles for deployments There's an issue today where named profiles which use `credential_source=Environment` don't actually behave correctly with the assume-role tool. Instead of actually assuming the role, it just uses the credentials in the environment, which is not exactly what you want. For now, explicitly set the ARN we want to assume, instead of indirecting across a named profile. * Remove CloudFront alias entirely * Add hover menu (#1266) Signed-off-by: Christian Nunciato <c@nunciato.org> * Hook up new www.pulumi.com/production stack to CI/CD (#1267) * Hook up new www.pulumi.com/production stack to CI/CD * Correct Makefile syntax * Migrate blog posts as of 7/2 (#1268) * Fix Makefile syntax * Fix spelling error ::sigh::

chrsmith added 8 commits June 26, 2019 10:27

Use explicit code blcoks with language

3b32697

Fix sort order for Author and Tag listings

97e8c3c

Make sidebar toggleable on mobile

f45942e

Resize "poster" image for blog listings

29c82da

Crop photos to be square

0e17b5d

Add posted date, post tags to blog footer

8b06af8

Add recent posts lists to sidebar

63e5abc

Add syntax highlighting to some missed posts

d11df45

chrsmith requested a review from cnunciato June 26, 2019 23:17

chrsmith changed the base branch from master to fusion June 26, 2019 23:18

pulumi bot reviewed Jun 26, 2019

View reviewed changes

Fix Hugo build warning

ed00e94

pulumi bot reviewed Jun 26, 2019

View reviewed changes

cnunciato approved these changes Jun 27, 2019

View reviewed changes

Adjust sidebar styling

8c13395

pulumi bot reviewed Jun 27, 2019

View reviewed changes

cnunciato merged commit e994b72 into fusion Jun 27, 2019

pulumi-bot deleted the chrsmith/fusion_blog-layout-styling branch June 27, 2019 16:50

justinvp reviewed Jun 27, 2019

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Blog layout and styling improvements #1237

Blog layout and styling improvements #1237

Uh oh!

chrsmith commented Jun 26, 2019 •

edited

Loading

Uh oh!

pulumi bot left a comment •

edited by chrsmith

Loading

Uh oh!

pulumi bot left a comment

Uh oh!

cnunciato left a comment •

edited

Loading

Uh oh!

chrsmith commented Jun 27, 2019

Uh oh!

pulumi bot left a comment

Uh oh!

justinvp Jun 27, 2019

Uh oh!

justinvp Jun 27, 2019

Uh oh!

cnunciato Jun 27, 2019

Uh oh!

cnunciato Jun 27, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Blog layout and styling improvements #1237

Blog layout and styling improvements #1237

Uh oh!

Conversation

chrsmith commented Jun 26, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pulumi bot left a comment • edited by chrsmith Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pulumi bot left a comment

Choose a reason for hiding this comment

Resource Changes

Uh oh!

cnunciato left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chrsmith commented Jun 27, 2019

Uh oh!

pulumi bot left a comment

Choose a reason for hiding this comment

Resource Changes

Uh oh!

justinvp Jun 27, 2019

Choose a reason for hiding this comment

Uh oh!

justinvp Jun 27, 2019

Choose a reason for hiding this comment

Uh oh!

cnunciato Jun 27, 2019

Choose a reason for hiding this comment

Uh oh!

cnunciato Jun 27, 2019

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

chrsmith commented Jun 26, 2019 •

edited

Loading

pulumi bot left a comment •

edited by chrsmith

Loading

cnunciato left a comment •

edited

Loading