{"id":21469851,"url":"https://github.com/dporkka/eleventy-blog","last_synced_at":"2026-01-05T16:03:37.893Z","repository":{"id":44224937,"uuid":"307177445","full_name":"dporkka/eleventy-blog","owner":"dporkka","description":"davidporkka.com ","archived":false,"fork":false,"pushed_at":"2024-07-16T23:58:48.000Z","size":2686,"stargazers_count":3,"open_issues_count":7,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-07-17T03:31:31.601Z","etag":null,"topics":["11ty","11ty-blog","11ty-template","11ty-theme","eleventy","eleventy-blog","eleventy-sample","eleventy-site","eleventy-template","eleventy-theme","eleventy-website","javascript","keystone","netlify","rich-features","scss"],"latest_commit_sha":null,"homepage":"https://superdapo.netlify.app/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dporkka.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":"dporkka","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":"https://www.paypal.com/paypalme/DavidPorkka"}},"created_at":"2020-10-25T19:37:07.000Z","updated_at":"2024-07-16T23:58:51.000Z","dependencies_parsed_at":"2024-07-17T03:23:05.333Z","dependency_job_id":"88bcfcd4-1546-4acc-b48f-16a6fec0b744","html_url":"https://github.com/dporkka/eleventy-blog","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dporkka%2Feleventy-blog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dporkka%2Feleventy-blog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dporkka%2Feleventy-blog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dporkka%2Feleventy-blog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dporkka","download_url":"https://codeload.github.com/dporkka/eleventy-blog/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226023259,"owners_count":17561424,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["11ty","11ty-blog","11ty-template","11ty-theme","eleventy","eleventy-blog","eleventy-sample","eleventy-site","eleventy-template","eleventy-theme","eleventy-website","javascript","keystone","netlify","rich-features","scss"],"created_at":"2024-11-23T09:18:54.633Z","updated_at":"2026-01-05T16:03:32.863Z","avatar_url":"https://github.com/dporkka.png","language":"SCSS","funding_links":["https://ko-fi.com/dporkka","https://www.paypal.com/paypalme/DavidPorkka"],"categories":[],"sub_categories":[],"readme":"\u003ch2\u003eSuperdapo\u003c/h2\u003e\r\n \u003cbr\u003e\r\n \u003ch3\u003eSuperdapo is an \u003ca href=\"https://github.com/11ty/eleventy/\"\u003eEleventy\u003c/a\u003e starter kit based off the \u003ca href=\"https://github.com/MadeByMike/supermaya\"\u003eSupermaya template\u003c/a\u003e by \u003ca href=\"https://twitter.com/MikeRiethmuller\"\u003eMike Riethmuller\u003c/a\u003e\u003c/h3\u003e\u003cbr\u003e\r\n \u003cp\u003eSee a live demo of this template \u003ca href=\"https://superdapo.netlify.app/\"\u003ehere\u003c/a\u003e\u003c/p\u003e\r\n \u003ch3\u003e\u003cstrong\u003eSuperdapo desktop view\u003c/strong\u003e\u003c/h3\u003e\r\n    \u003cimg src=\"site/static/superdapo-screenshot.png\" width=\"800\"/\u003e\r\n    \u003cbr\u003e\r\n      \u003ch3\u003e\u003cstrong\u003eSupermaya desktop view\u003c/strong\u003e\u003c/h3\u003e\r\n    \u003cbr\u003e\u003cimg src=\"site/static/supermaya-screenshot.png\" width=\"800\"/\u003e\r\n    \u003cbr\u003e\r\n    \u003ch3\u003e\u003cstrong\u003eSuperdapo mobile view\u003c/strong\u003e\u003c/h3\u003e\r\n     \u003cimg src=\"site/static/superdapo-mobile.png\" width=\"350\"/\u003e\r\n     \u003cbr\u003e\r\n    \u003cp\u003eSome differences between this template and the Supermaya template, include:\u003c/p\u003e\r\n    \u003cul\u003e\r\n        \u003cli\u003eFull-screen page designs\u003c/li\u003e\r\n        \u003cli\u003eDifferent header, footer, home page, and page title designs\u003c/li\u003e\r\n        \u003cli\u003eDifferent mobile and tablet designs\u003c/li\u003e\r\n        \u003cli\u003eAdditional common pages\u003c/li\u003e\r\n        \u003cli\u003eSocial icons\u003c/li\u003e\r\n        \u003cli\u003eUsed the Yarn package manager and not NPM (node package manager)\u003c/li\u003e\r\n        \u003cli\u003eSecurity headers added in the .toml\u003c/li\u003e\r\n    \u003c/ul\u003e\r\n    \u003cp\u003eAfter cloning, to start editing your site, run \"yarn eleventy --serve\" to start your development server. Then open up http://localhost:8080\u003c/p\u003e\r\n    \u003cp\u003eAfter adding your own content to this site, remove the robots.txt file to allow search engines to index your site.\u003c/p\u003e\r\n    \u003cp\u003eTo add comments, follow the Supermaya instructions below and then connect Netlify to your copy of the Superdapo repository.\u003c/p\u003e \r\n    \u003cp\u003e\u003cstrong\u003eThe rest of this ReadMe is from the \u003ca href=\"https://github.com/MadeByMike/supermaya/blob/master/README.md\"\u003eSuperMaya Readme\u003c/a\u003e\u003c/strong\u003e\u003c/p\u003e\r\n    \u003cp\u003eSupermaya was designed to help you add rich features to a blog or website without the need for a complicated build process.\u003c/p\u003e\r\n    \u003cbr\u003e\r\n    \u003cp\u003eSee a \u003ca href=\"https://supermaya-demo.netlify.com/\"\u003eLive Demo\u003c/a\u003e.\u003c/p\u003e\r\n    \u003cp\u003e\u003ca href=\"https://app.netlify.com/start/deploy?repository=https://github.com/MadeByMike/supermaya\"\u003eDeploy Supermaya on it's own\u003c/a\u003e\u003c/p\u003e\r\n    \u003cp\u003e\u003ca href=\"https://heroku.com/deploy?template=https://github.com/keystonejs/keystone-jamstack-plus\"\u003eDeploy Supermaya with Keystone\u003c/a\u003e to allow user generated content. \u003cbr\u003e(following instructions during installation to connect the API).\u003c/p\u003e\r\n    \u003cbr\u003e\r\n    \u003cbr\u003e\r\n    \r\nIt comes with all the blog standard features:\r\n\r\n- Posts and Pages\r\n- Pagination\r\n- Tags\r\n- Static server-rendered content\r\n\r\nA bunch of good practices:\r\n\r\n- RSS feed\r\n- \\*Considerate mark-up\r\n- Service worker with offline content\r\n- Lazy loading images\r\n- Critical CSS\r\n\r\n_\\*Considerate means semantic, accessible mark-up, written for both humans and machines._\r\n\r\nAdditional features:\r\n\r\n- Seemless JavaScript and SCSS compilation (no build process)\r\n- Data-driven navigation\r\n- Customisable settings including theming\r\n\r\nAdditional features:\r\n\r\n- Comments\r\n- Claps\r\n- Reading List\r\n- Login\r\n\r\nThese additional features that have persistent data including user generated content. On JAMstack sites including rich content usually means complicated build processes and multiple third-party services. This doesn't sit well with me since owning my own data and tinkering with the platform is a big motivation for building a static personal site.\r\n\r\nThat's why I opted to pair Supermaya with [KeystoneJS](https://keystonejs.com/) to create a unified API that you own and manage. Each of these features are optional and added progressively with JavaScript and will fail gracefully if not configured or the server can't be reached. You can opt-out on a per feature basis by modifying the data in `site/_data/site.js`, or on a per-page basis with front-matter.\r\n\r\n**Note**: If you don't want any of these features you can [deploy Supermaya on its own](https://app.netlify.com/start/deploy?repository=https://github.com/MadeByMike/supermaya) or you can [deploy Supermaya and Keystone together](https://heroku.com/deploy?template=https://github.com/keystonejs/keystone-jamstack-plus) and connect the API by following the instructions during installation. This will deploy Keystone to Heroku and Supermaya to Netlify, as well as configure your Admin user and API URL.\r\n\r\nTo get started deploy the [Keystone JAMstack plus starter kit](https://github.com/keystonejs/keystone-jamstack-plus) platform to Heroku. Once installed visit the site on Heroku and copy your Keystone API URL. Follow the instructions to automatically deploy Supermaya to Netlify.\r\n\r\nNote: Rich features are optional Supermaya is a perfectly good starter template for 11ty without any other services. You can deploy Supermaya on it's own and add a `KEYSTONE_API` environmental variable later if you wish.\r\n\r\nSupermaya is designed to be a launch pad that allows you to go all the way from a simple static website to a feature rich application.\r\n\r\n## Running the project\r\n\r\nTo start the project run:\r\n\r\n```\r\nnpm install\r\n```\r\n\r\nthen:\r\n\r\n```\r\nnpm start\r\n```\r\n\r\n## Configuring site information\r\n\r\nConfigure important site-wide information like the site name, description and default author information:\r\n\r\n```\r\nsite/_data/site.js\r\n```\r\n\r\n## Configuring navigation\r\n\r\nChange the site navigation by modifying:\r\n\r\n```\r\nsite/_data/navigation.json\r\n```\r\n\r\n## Changing the color scheme\r\n\r\nSupermaya includes basic theming. Select an alternative to the black and white feature colors by modifying the `theme` key in:\r\n\r\n```\r\nsite/_data/site.js\r\n```\r\n\r\n## Toggling Keystone features\r\n\r\nIf you connected Supermaya to a Keystone backend you can toggle features under the `keystone` key in:\r\n\r\n```\r\nsite/_data/site.js\r\n```\r\n\r\n## Working with SCSS\r\n\r\nIn Supermaya SCSS files are compiled on-the-fly by 11ty and added to data. This means you can write inline CSS directly into templates and partials like this: `\u003cstyle\u003e{% raw %}{{css[\"compilation-target\"] | safe}}{% endraw %}\u003c/style\u003e`. Where \"compilation-target\" is the key added to the list of SCSS files to compile in:\r\n\r\n```\r\nsite/_data/css.js\r\n```\r\n\r\nEach entry added to the `targets` array will be available as site data and a static file will also be written to `css/[compilation-target].css`.\r\n\r\nSource files for scss have been added to the directory `site/src/scss`.\r\n\r\n## Working with JavaScript\r\n\r\nSimilar to how SCSS works, JavaScript files in Supermaya are also compiled on-the-fly using Webpack.\r\n\r\nThe Webpack configuration contains a loader for `.js` files that will transpile ES6 to ES5 meaning you can safely write modern JavaScript. The Webpack configuration can be extended or modified in: `site/utils/compile-webpack.js`.\r\n\r\nFiles generated by Webpack are added to site data so you can write inline JavaScript in templates and partials like this: `\u003cscript\u003e{{css[\"output-filename\"] | safe}}\u003c/script\u003e`. The \"output-filename\" should be the full name of a file generated by Webpack including the extension.\r\n\r\nYou can add additional entry points by modifying the `targets` array in:\r\n\r\n```\r\nsite/_data/js.js\r\n```\r\n\r\nEach file generated will also be available as a static file at the path: `js/[output-filename]`.\r\n\r\nSource files for javascript have been added to the directory `site/src/js`.\r\n\r\n## Critical CSS\r\n\r\nSupermaya is capable of generating criticalCSS although this is turned off by default for performance reasons. You can turn this feature on by modifying:\r\n\r\n```\r\nsite/_data/site.js\r\n```\r\n\r\n## Credit where due\r\n\r\nI need to acknowledge and credit the work of [Phil Hawksworth](https://twitter.com/philhawksworth) and [Andy Bell](https://twitter.com/hankchizljaw) for their work on [eleventyone](https://github.com/philhawksworth/eleventyone) and [Hylia](https://github.com/hankchizljaw/hylia) both of which are fantastic 11ty templates. I pulled these apart before making my own. In particular there are a few implementation details borrowed directly from Hylia - because if something is done right and it's open source why do it again? Thanks Andy.\r\n\r\n## Why \"Supermaya\"\r\n\r\nA friend and designer Matt Barron, helped me out with some initial design work and used it as a placeholder for the site name in early mock-ups. As usual development names grow on you. I later learned it was the name of his family dog. It's combination of Superman and Maya, one of his kids favourite cartoon characters. That settles it, right? And here's a picture:\r\n\r\n\u003cimg src=\"site/static/supermaya.jpg\" width=\"400\" alt=\"picture of Matt's dog, Maya\"/\u003e\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdporkka%2Feleventy-blog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdporkka%2Feleventy-blog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdporkka%2Feleventy-blog/lists"}