Dick's Sporting Goods demo

Created for the 2023 Summit keynote demo, based on this page: https://www.dickssportinggoods.com/s/baseball-softball-services

Some info about how Dick's is using Adobe products : https://business.adobe.com/customer-success-stories/dicks-sporting-goods-case-study.html

How I planned this demo to be a next-step in learning

This demo project is used by a lot of people since Summit. To play around with the pages in the Sharepoint for the DSG project, please copy the main pages into your own folder under /drafts/yourname.

I built this in mind as a next-step resource, after someone creates a personal boilerplate site.

• Wrote this readme.md notes for high level of how I approached the project
• I did all my edits with new branches and pull requess, so learners can view history of changes.
• Specifically included and utilized a 'fragment' block for learning purposes (my demo is 1 page, normally don't need a fragment for that.)
• Created a couple other custom blocks (news-ticker, parallax), mostly from copying and modifying what I found in other projects
• Included a small custom function "wrapSpanLink" to libs-franklin.js (for features needed when the blocks are first being created)
• Included a small custom function "figureImageLink" to scripts.js (for features that could be used in multiple blocks/places)

Environments

• Preview: https://main--dsg--hlxsites.hlx.page/
• Live: https://main--dsg--hlxsites.hlx.live/

Installation

npm i

Tests

A note about the existing/OOTB tests:

If you edit the DOM structure in your project's header/nav (why wouldn't you?) the test will fail. Unless you want to write new block tests based on your new structure, I recommend removing (or commenting out) the test specifics like I did in the /test/blocks/header/header.test.js here: https://github.com/hlxsites/dsg/pull/43/files#diff-c2173c5cdad4eac89d8cb1eeb9bbe1270c88e2ce3f134783e27ce62b1a895d73 .

npm tst

npm run lint

Authoring tips

• To link an icon, put the linked URL right after :icon:
• To link a picture, do a soft return (shift + enter) before putting the linked URL.
• Were this a real project, a full-fledged authoring guide would have been created.

Local development

1. Create a new repository based on the helix-project-boilerplate template and add a mountpoint in the fstab.yaml
2. Add the helix-bot to the repository
3. Install the Helix CLI: npm install -g @adobe/helix-cli
4. Start Franklin Proxy: hlx up (opens your browser at http://localhost:3000)
5. Open the {repo} directory in your favorite IDE and start coding :)
6. If you have anyone contributing from Windows, make this change on the .eslintrc.js file:

## old rule was only for unix
## 'linebreak-style': ['error', 'unix'],
'linebreak-style': ['error', process.platform === 'win32' ? 'windows' : 'unix'],

6.b Then, when running npm run lint, Windows users may see "Error: no matching patterns found". You will need to edit to use double quotes in the root/package.json file:

## old rule uses single quotes
## "lint:css": "stylelint 'blocks/**/*.css' 'styles/*.css'",
"lint:css": "stylelint \"./blocks/**/*.css\" \"./styles/*.css\"",

Charity's steps to how I approached this work as a newcomer to Franklin

1. copy + paste into Word doc https://www.dickssportinggoods.com/s/baseball-softball-services
2. add 3 dashes in a row to create an HTML section between obvious sections
3. Add blocks (tables) based on the boilerplate cards, columns, hero, etc and add a section metadata at the end of each section that has a style name
4. add some alt text to images
5. Edit footer.doc, replace boilerplate info with what I pasted in from the live site
6. Edit nav.doc, replace with all seen in the live site. This navigation is exceptionally large, so I am typing out some placeholder notes, and creating lots of sections as I go along.
7. Take inventory of live site fonts, font sizes, breakpoints, etc and create the base CSS
8. create root-level metatdata sheet to have global metadata and to assign templates or themes
9. Create needed blocks to support the content structure
10. Create 'fragments' -- content that will be reused, but needs to be authored -- such as "This month's specials". Note that the fragments block provided does not allow for more than one section.
11. Then I did a lot of tweaking to get better Lighthouse scores, and to make authoring easier.