{"id":16202314,"url":"https://github.com/panoply/esthetic","last_synced_at":"2025-04-09T14:14:45.086Z","repository":{"id":37811873,"uuid":"456196765","full_name":"panoply/esthetic","owner":"panoply","description":"Æ ~ New generation beautification support for multiple languages (pre-release)","archived":false,"fork":false,"pushed_at":"2025-02-12T12:30:44.000Z","size":14158,"stargazers_count":35,"open_issues_count":7,"forks_count":2,"subscribers_count":6,"default_branch":"next","last_synced_at":"2025-04-06T05:00:07.000Z","etag":null,"topics":["aesthetic","beautification","beautifier","beautify","esthetic","format","formatter","formatting","liquid","liquify","prettier","prettydiff","shopify","sparser","typescript"],"latest_commit_sha":null,"homepage":"https://aesthetic.js.org","language":"TypeScript","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/panoply.png","metadata":{"files":{"readme":"docs/readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2022-02-06T15:54:25.000Z","updated_at":"2025-03-19T12:12:15.000Z","dependencies_parsed_at":"2024-06-28T23:22:44.794Z","dependency_job_id":"83e9f7f3-9ff9-4c27-9e66-b3acb9764191","html_url":"https://github.com/panoply/esthetic","commit_stats":{"total_commits":745,"total_committers":2,"mean_commits":372.5,"dds":"0.18120805369127513","last_synced_commit":"200472302d66a58d5975159b1d940163171db2f5"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/panoply%2Festhetic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/panoply%2Festhetic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/panoply%2Festhetic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/panoply%2Festhetic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/panoply","download_url":"https://codeload.github.com/panoply/esthetic/tar.gz/refs/heads/next","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248054193,"owners_count":21039952,"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":["aesthetic","beautification","beautifier","beautify","esthetic","format","formatter","formatting","liquid","liquify","prettier","prettydiff","shopify","sparser","typescript"],"created_at":"2024-10-10T09:46:55.103Z","updated_at":"2025-04-09T14:14:45.063Z","avatar_url":"https://github.com/panoply.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Æsthetic Documentation\n\nThe Æsthetic documentation website is built using [11ty](https://www.11ty.dev/docs/) and served via [Netlify](https://netlify.com/).\n\nVisit the docs: [æsthetic.dev](https://æsthetic.dev)\n\n# Development\n\nAll dependencies are included within the `package.json` file. ESLint, Prettier and Stylelint is assumed to be installed globally but available as optional dependencies. Documentation is written in markdown and views are composed in Liquid. Frontmatter and JSON data files are used for the order of navigation and various other reference specific information.\n\n### Commands\n\nAfter installing, run `pnpm dev` to start in development mode. Documentation will build and be deployed via Github actions.\n\n```cli\npnpm dev                 Starts development in watch mode\npnpm build               Builds documentation for production\npnpm 11ty:build          Triggers an 11ty build\npnpm 11ty:watch          Starts 11ty in watch mode with server\npnpm scss:build          Compiles SASS into CSS\npnpm scss:watch          Start SASS in watch mode\npnpm ts:build            Build production JS bundle\npnpm ts:watch            Start ESBuild in watch mode\n```\n\n# Markdown Customizations\n\nMarkdown files will are processed using [markdown-it](https://github.com/markdown-it/markdown-it) and a couple of custom plugins. Frontmatter and JSON data files are used to the order of navigation and various other reference specific information.\n\n- [Grid Container](#grid-container)\n- [Rule Heading](#rule-heading)\n- [Rule Showcase](#rule-showcase)\n\n## Grid Container\n\nGrid access is made possible using fenced containers in the markdown. The `grid` keyword along with triple `:::` markers will result in encapsulate content being wrapped. The [Brixtol Bootstrap](https://brixtol.github.io/bootstrap/) variation grid system and CSS framework class utilities are available.\n\n### INPUT\n\n```md\n:::: grid row jc-center ai-center\n\n::: grid col-sm-6 col-md-4\nLorem ipsum dolor sit...\n:::\n\n::: grid col-6 col-md-8\nLorem ipsum dolor sit...\n:::\n\n::::\n```\n\n### OUTPUT\n\n\u003c!--prettier-ignore--\u003e\n```html\n\u003cdiv class=\"row jc-center ai-center\"\u003e\n\n  \u003cdiv class=\"col-sm-6 col-md-4\"\u003e\n    Lorem ipsum dolor sit...\n  \u003c/div\u003e\n  \u003cdiv class=\"col-6 col-md-8\"\u003e\n    Lorem ipsum dolor sit...\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Rule Heading\n\nRule documentation files, specifically rule example titles are wrapped within a custom container with annotation emoji. These containers will render tooltips and are required when describing rule behaviors. Different emoji types will result in different tooltip hovers.\n\n### INPUT\n\n\u003c!--prettier-ignore--\u003e\n```md\n\n::: rule 🙌\n\n#### choice\n\n:::\n\n```\n\n### OUTPUT\n\n\u003c!--prettier-ignore--\u003e\n```html\n\u003cdiv class=\"rule-title d-flex ai-center\"\u003e\n  \u003cspan\n    class=\"h5 mr-2\"\n    aria-label=\"You gotta do, what you gotta do\"\n    data-tooltip=\"top\"\n  \u003e 🙌 \u003c/span\u003e\n  \u003ch4 id=\"choice\" tabindex=\"-1\"\u003echoice\u003c/h4\u003e\n\u003c/div\u003e\n```\n\n### TOOLTIPS\n\n| Emoji | Tooltip                                 |\n| ----- | --------------------------------------- |\n| 🙌    | Authors Recommendation                  |\n| 👍    | Good choice                             |\n| 👎    | Not Recommended                         |\n| 😳    | We live in a society, we're not animals |\n| 🤌    | Delightful. Your mother is proud of you |\n| 🤡    | The choice of a clown                   |\n| 💡    | Showing an example of the rule          |\n| 🧐    | You gotta do, what you gotta do         |\n\n\u003e The [src/rules/strap.md](/docs//src/rules/strap.md) markdown file can be used as a strap.\n\n# Rule Showcasing\n\nRule documentation files generate interactive demos/examples to showcase how code will be formatted. There are 2 different showcase types (`demo` and `example`) for describing formatting rules. The markdown files for formatting rules use a common structure to achieve this.\n\nWhenever a JSON codeblock uses an annotation identifier of `json:rules` then a standard codeblock show immediately follow. The contents of the `json:rules` is parsed during the 11ty build process (via markdown-it) and used as a reference point. The `json:rules` contents inform upon how and what the showcase should generate.\n\n## Demo Showcase\n\nThe below structure is used for generating a rule demo type showcase. Æsthetic formatting rules are provided and the resulting output will be a split pane editor. The left pane is the `input` and the right is `output`. An additional tab is also made available which will inject the rules provided.\n\nThe below is a basic example of how a demo showcase is generated and expressed:\n\n\u003c!--prettier-ignore--\u003e\n```md\n\n```json:rules\n{\n  \"language\": \"liquid\",\n  \"liquid\": {\n    \"indentAttributes\": true\n  }\n}\n```\n\n```liquid\n\n\u003c!-- Code Sample -!\u003e\n\n```\n\n```\n\n```\n\n## Example Showcase\n\nThe below structure is used for generating a rule `example` type showcase. Instead of providing Æsthetic rules within `json:rules` codeblock, we pass an object with a `example` and `esthetic` property. The `example` property is used to describe the example form helpers and the `esthetic` property is intended to hold the formatting rules.\n\n\u003c!--prettier-ignore--\u003e\n```md\n\n```json:rules\n{\n  \"example\": {}, // example config\n  \"esthetic\": {} // formatting rules\n}\n```\n\n```liquid\n\n\u003c!-- Code Sample -!\u003e\n\n```\n\n```\n\n```\n\n## Papyrus Options\n\nIn addition to the `example` and `esthetic` properties, `json:rules` may also accept a `papyrus` property. When provided the option will be passed to the `papyrus.create` method. The `papyrus` option can be used in either `demo` or `example` rule showcases.\n\n\u003c!--prettier-ignore--\u003e\n```md\n\n```json:rules\n{\n  \"papyrus\": {}, // papyrus config\n  \"esthetic\": {} // formatting rules\n}\n```\n\n```liquid\n\n\u003c!-- Code Sample -!\u003e\n\n```\n\n```\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpanoply%2Festhetic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpanoply%2Festhetic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpanoply%2Festhetic/lists"}