⚠ ARCHIVED: This project is no longer being developed. Unfortunately the .app approach does not work for me. ⚠

📒 Eleventy Notes

Eleventy Notes is a different take on Forgetful Notes, my digital garden. All content within is tecnically a placeholder since it's just mirroring the files in my current digital garden.

📝 Notes

Proxy package.json

The package.json in the root of the repository acts as a mediator between you and the actual package.json within the .app/ directory.

Formatting w/ Prettier

Scripts for Prettier have been added and configured in such a way that the .prettierrc and .prettierignore files can remain in the root of the repository meaning they can be modified without the fear of being overwritten by a future update.

Git hooks w/ Husky

We use Husky for pre-commit workflows. This project is set up by default to run npm run check and npm run test after any commit. This will warn you of any errors in formatting, or if the app build fails. All this happens after you commit any changes, but before you have the chance to push code with errors.

🔧 Useful Tips

You can run the following commands from the .app directory, or from the project's root.

# Install dependencies
npm i

# Start local dev server
npm start

# Build site
npm run build

# Update dependencies
npm update

# Run build test
npm run test

# Check formatting w/ Prettier
npm run check

# Format codebase w/ Prettier
npm run format

🛠️ Technology

The site uses various technologies cobbled together. Here's some of them:

• 11ty: a simpler static site generator.
• Alpine.js: lightweight JavaScript framework.
• FlexSearch: fast and memory-flexible full-text search library with no dependencies.
• Husky: Git hooks manager.
• Parcel: zero configuration build tool for the web.
• Prettier: an opinionated code formatter.
• Sass: because CSS can be fun.

🚀 Deployments

Vercel

The vercel.json file in the root directory defines our framework, our run commands, sets up cache and adds HTTP headers to any Vercel deployment. Read more about vercel.json configuration here. The headers included are:

• X-Frame-Options
• X-Content-Type-Options
• X-XSS-Protection
• Referrer-Policy
• Permissions-Policy

GitHub Pages

The project includes two GitHub Actions: to aid deployment to GitHub Pages.

• Build only: no artifact is created. It's set up as process check and enabled to run automatically after push requests.
• Deploy: sets up permissions, concurreny limits, and environment variable to publish projects using your-username.github.io/your-project.

👨🏼‍💻 Changes from Upstream

• Added new package.json to the root directory. Works as middeman between user and the .app/package.json file.
• Token font-size-xs: changed from 0.75rem to var(--font-size-fluid-x2).
• Token font-size-sm: changed from 0.875rem to var(--font-size-fluid-x1).
• Class grouped-links__link had padding-block: var(--space-1) changed to padding-block: var(--space-2).¹
• Integrated Husky with pre-commit scripts.²
• Integrated Prettier with scripts to both check and fix formatting.³
• Created new deployment workflows to deploy to GitHub Pages.
• Added new prepare script to run Husky before all commits.
• Added new test script to dry run Eleventy.
• Added new GitHub Actions workflows to only Build or Deploy to pages.
• Added new vercel.json to add build settings for Vercel deployments. It also adds HTTP headers to your site.

💜 Attributions

This project is based on Eleventy Notes, a project by Sandro Roth.

© License

Source code in this repository is available under the MIT License.

Footnotes

1. Fixed tap targets size in mobile-view to address Lighthouse SEO score. ↩

2. Currently set up to run npm run check and npm run test before all commits. ↩

3. Also included config files .prettierrc, and .prettierignore. ↩