Convert 'jeffgeerling' Drupal 7 theme to Drupal 8

[geerlingguy]

We'll go for the 1-to-1 approach and see how easy (or hard) it is to upgrade a simple Drupal 7 theme to Drupal 8!

[geerlingguy]

I copied the jeffgeerling theme from the Drupal 7 site to Drupal 8 and then followed this guide to update the .info file to .info.yml: Defining a theme with an .info.yml file

[geerlingguy]

I also converted the CSS files to libraries using the directions here: Adding stylesheets (CSS) and JavaScript (JS) to a Drupal 8 theme

[geerlingguy]

To get some of the basic theme components together I've done the following:

1. Updated some of the classes to use new naming from D8 classy theme conventions.
2. Overrode two templates by copying them into my theme, to add a class, remove an element I don't want in the markup, and add a missing <strong> on the page title element
3. Converted my template.php to jeffgeerling.theme, and added a hook_preprocess_page to attach the 'front.css' library (jeffgeerling/front) to the home page. I also had to add that library to the theme's libraries file, and to the .info.yml file.
4. Updated dark mode and responsive media query content so at least the majority of the content looks correct in dark mode and on smaller screens.

Still plenty to go (like fixing up the about/resumé page, setting up the blog section with Views, fixing up the Footer block (for some reason that custom block's content isn't coming through the migration...), setting up the projects view, setting up the home page blocks... plenty to do!

[geerlingguy]

Here's what things look like now:

[geerlingguy]

17 didn't actually close this, but I wanted to merge to master so I have a more stable base to work from.

[geerlingguy]

Did some more theming work for March 17 livestream, on the blog post node page: https://github.com/geerlingguy/jeffgeerling-com/commit/c96195c8dec1d7b4d407a947fcee6e23efb4fcc9

[geerlingguy]

Working on the blog comments now. Ran into a snag trying to upgrade the entity_uri() function...

[geerlingguy]

I have the comments themselves looking identical in D7 and D8:

See above commit for all those changes.

Still need to:

• Get the 'Add new comment' link above the comments display on the blog node.
• Style/theme the 'Add new comment' form on its own page (note that it's a bit messed up in Drupal 7 as well...).

[geerlingguy]

Chromatic's blog post (https://chromatichq.com/blog/drupal-code-standards-t-function) was helpful in figuring out the reason why !placeholders were not rendering at all. Had to switch to using just @placeholder and :uri for URIs....

[geerlingguy]

Well... everything looks good now (just had to reorder the display in Drupal's blog post node display settings), though there's a funky display of the submit button that I've been noticing elsewhere on the site.

[geerlingguy]

The last major parts are the resume styling and JS (for the about page), as well as search theming (see #54).

[geerlingguy]

Search theming is complete, now just need to do resume/about page styling & JS.

[geerlingguy]

While attaching the resume.js file to the about page/node via a library, I ran into this problem, namely, while logged in everything worked (Drupal.behaviors). When not logged in, I was getting in the console:

ReferenceError: Can't find variable: Drupal

In addition to adding the dependency of core/jquery, I had to add core/drupal, so the library in my libraries yaml file ultimate became:

resume:
  version: 1.x
  css:
    theme:
      css/resume.css: {}
      css/resume-print.css:
        media: print
  js:
    js/resume.js: {}
  dependencies:
    - core/drupal
    - core/jquery

Commit with fix incoming.