Proof of concept 11ty documentation website for cubing.js.
- _src: "input" folder: what 11ty looks at to generate the website
- docs: "output" folder: 11ty's auto-generated site files - we have no control over this
- .eleventy.js: config file, defining input/output files and recognising
cssandjsfiles - other self-explanatory files
- _data: defines variables used in nunjucks scripts - currently used for navbar component
- _includes: page templates which influence how
.mdfiles are converted intohtml(which page template a.mdfile will use is specified in its front matter, or in thepages.jsonfile which will set folder-level settings for a group of files) - assets: stores image files
- css: stores
styles.css, stylesheet for the website (importantly, defines the layout/positioning of elements in addition to just semantics) - pages: stores
.mdfiles for documentation pages (ie, primary documentation content) - scripts: stores
scripts.js, which is used to generate the sidebar containing header anchors. There may be a way to do this with nunjucks, but I haven't figured it out yet
- Basic setup
- Check that 11ty works with js
- Deploy to gh pages
-
Create a navbar
- get basic navbar generation with nunjucks working
- style the navbar
- add other navbar items
-
Creating a heading sidebar
- make a sketchy js script to add h2's
- get the thing to scroll with me
- add anchors
-
Get basic CSS looks going
-
Create flexbox layout
- get images working
- homepage
- page layout
- check that pages work
- reduce the absurd amount of css in bulma.css
- Navbar formatting for when you're already on a page/at a heading
- Make code sections look less rubbish
- Change px values to be reactive
- Make width of content section uniform
- sidebar overhaul
- add h3's as children of h2's
- change position: fixed to sticky and troubleshoot
- Figure out why CSS isn't being applied to non-index pages