{"id":22004177,"url":"https://github.com/electric-eloquence/fepper-wordpress","last_synced_at":"2025-10-14T19:32:28.996Z","repository":{"id":56864916,"uuid":"43375731","full_name":"electric-eloquence/fepper-wordpress","owner":"electric-eloquence","description":"Fepper for WordPress","archived":false,"fork":false,"pushed_at":"2024-06-09T14:26:03.000Z","size":50396,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"dev","last_synced_at":"2025-10-14T19:32:23.891Z","etag":null,"topics":["fepper","theme","wordpress"],"latest_commit_sha":null,"homepage":"https://fepper.io/?project=wordpress","language":"PHP","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/electric-eloquence.png","metadata":{"files":{"readme":"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,"zenodo":null}},"created_at":"2015-09-29T15:17:18.000Z","updated_at":"2024-06-08T11:10:27.000Z","dependencies_parsed_at":"2024-06-08T12:26:40.037Z","dependency_job_id":"e818df96-67d5-46b5-8661-d8dd7fc22f46","html_url":"https://github.com/electric-eloquence/fepper-wordpress","commit_stats":null,"previous_names":[],"tags_count":69,"template":false,"template_full_name":null,"purl":"pkg:github/electric-eloquence/fepper-wordpress","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electric-eloquence%2Ffepper-wordpress","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electric-eloquence%2Ffepper-wordpress/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electric-eloquence%2Ffepper-wordpress/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electric-eloquence%2Ffepper-wordpress/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/electric-eloquence","download_url":"https://codeload.github.com/electric-eloquence/fepper-wordpress/tar.gz/refs/heads/dev","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electric-eloquence%2Ffepper-wordpress/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279020649,"owners_count":26086898,"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","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["fepper","theme","wordpress"],"created_at":"2024-11-30T00:12:30.685Z","updated_at":"2025-10-14T19:32:28.953Z","avatar_url":"https://github.com/electric-eloquence.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg\n    src=\"https://raw.githubusercontent.com/electric-eloquence/fepper-npm/master/excludes/fepper-branding.png\"\n    alt=\"Fepper for WordPress\"\n  \u003e\n\u003c/p\u003e\n\n\u003ch2 align=\"center\"\u003eA frontend prototyper tool for rapid prototyping of websites\u003c/h2\u003e\n\n[![Known Vulnerabilities][snyk-image]][snyk-url]\n[![Linux Build Status][linux-image]][linux-url]\n[![Mac Build Status][mac-image]][mac-url]\n[![Windows Build Status][windows-image]][windows-url]\n![Node Version][node-version-image]\n[![License][license-image]][license-url]\n\n#### This distribution of Fepper has templates configured for WordPress, along with a [WordPress theme](https://wordpress.org/themes/fepper/) built to accommodate these templates.\n\n* [Main distribution (Fepper without WordPress)](https://github.com/electric-eloquence/fepper)\n\n### Table of contents\n\n* [Install](#install)\n* [Configure](#configure)\n* [Run](#run)\n* [Update](#update)\n* [Global Data](#global-data)\n* [Partial Data](#partial-data)\n* [Markdown Content](#markdown-content)\n* [Code Viewer](#code-viewer)\n* [Requerio Inspector](#requerio-inspector)\n* [Static Site Generator](#static-site-generator)\n* [The Backend](#the-backend)\n* [Templater](#templater)\n* [Webserved Directories](#webserved-directories)\n* [HTML Scraper](#html-scraper)\n* [variables.styl](#variables.styl)\n* [UI Customization](#ui-customization)\n* [Extensions](#extensions)\n* [Express App](#express-app)\n* [Mobile Devices](#mobile-devices)\n* [I18N](#i18n)\n* [Keyboard Shortcuts](#keyboard-shortcuts)\n* [More Documentation](#more-documentation)\n\n### \u003ca id=\"install\"\u003e\u003c/a\u003eInstall\n\n#### System requirements\n\n* Unix-like or Windows OS.\n* Minimum supported Node.js version 18.0.0.\n* Minimum WordPress version 4.5.\n\n#### Simplest way to get started\n\n* Download the \n  \u003ca href=\"https://github.com/electric-eloquence/fepper-wordpress/releases/latest\" target=\"_blank\"\u003e\n  latest release\u003c/a\u003e.\n\n#### Mac install\n\n* In macOS Finder:\n  * Double-click `fepper.command`.\n  * If not already installed, this will install:\n    * Node.js.\n    * \u003ca href=\"https://www.npmjs.com/package/fepper-cli\" target=\"_blank\"\u003efepper-cli\u003c/a\u003e, \n      which will give you the `fp` command.\n  * If opening for the first time, macOS may warn that it can't be opened \n    because it is from an unidentified \n    developer.\u0026nbsp;\u003ca href=\"https://gist.github.com/e2tha-e/72364ca766cf5d2d1a732b6af4f3b7a8\" target=\"_blank\"\u003e*\u003c/a\u003e\n    * In this case, ctrl+click `fepper.command` and click \"Open\".\n    * In the following prompt, click \"Open\" to confirm that you're sure you \n      want to open it.\n  * Enter your password to allow installation.\n  * After installation, Fepper should automatically open in a browser.\n  * Open http://localhost:3000 if it doesn't open automatically.\n\n#### CLI install\n\n* In Linux and other Unix-like OSs (or if you prefer working on the command \n  line):\n  * Install Node.js if it isn't already installed.\n  * `npm install -g fepper-cli`\n  * `npm install`\n  * `fp`\n\n#### Windows install\n\n* In File Explorer, double-click \n  `fepper.vbs`.\u0026nbsp;\u003ca href=\"https://gist.github.com/e2tha-e/72364ca766cf5d2d1a732b6af4f3b7a8\" target=\"_blank\"\u003e*\u003c/a\u003e\n  * If Node.js is not installed, this will install it.\n  * After Node.js installation, double-click `fepper.vbs` again.\n    * This will install \u003ca href=\"https://www.npmjs.com/package/fepper-cli\" target=\"_blank\"\u003e\n      fepper-cli\u003c/a\u003e, which will give you the `fp` command.\n    * It will then install and launch Fepper.\n\n#### WordPress install\n\n* To install the included WordPress backend, restore the MySQL dump \n  `fepper-wordpress-mysqldump.sql`.\n* Update the `DB_` settings in `backend/wordpress/wp-config.php` to reflect \n  your own database settings.\n* Configure `wp.local` to be the hostname in your web server configs.\n* Configure `backend/wordpress` (correctly pathed) to be the document root for \n  this host.\n* Restart the web server.\n* Open http://wp.local in a browser.\n* Log into WordPress with `admin:admin`\n\n#### Post-install\n\n* To stop Fepper, go to the command line where Fepper is running and press \n  ctrl+c.\n\n### \u003ca id=\"configure\"\u003e\u003c/a\u003eConfigure\n\nFepper will run perfectly well out-of-the-box with default configurations. For \nfurther customization, power-users can edit these files:\n\n* conf.yml\n* pref.yml\n* patternlab-config.json\n\nEdit `conf.yml` to suit the needs of your development environment. If using Git, \n`conf.yml` will not be version controlled by default.\n\nEdit `pref.yml` to customize Fepper preferences. If you wish to use the \n`fp syncback`, `fp frontend-copy`, or `fp template` tasks, you must supply \nvalues for the `backend.synced_dirs` preferences in order for those directories \nto get processed and copied to the backend.\n\nEdit `patternlab-config.json` to configure Pattern Lab, the design system behind \nthe Fepper UI.\n\n### \u003ca id=\"run\"\u003e\u003c/a\u003eRun\n\n* To launch from macOS Finder:\n  * Double-click `fepper.command`.\n* To launch from Windows File Explorer:\n  * Double-click `fepper.vbs`.\n* To launch from the command line:\n  * `fp`\n* Consult the \u003ca href=\"https://fepper.io/docpage\" target=\"_blank\"\u003e\n  Fepper website\u003c/a\u003e for documentation.\n* Start editing files in `source`. Changes should automatically appear in the \n  browser.\n* To stop Fepper, press ctrl+c.\n* These other utility tasks are runnable on the command line:\n  * `fp data` - Build data.json from underscore-prefixed .json files\n  * `fp frontend-copy` - Copy assets, scripts, and styles to the backend\n  * `fp help` - Print documentation of Fepper tasks\n  * `fp once` - Output a new build to the public directory\n  * `fp restart` - Restart after shutdown, but without opening the browser\n  * `fp static` - Generate a static site from the 04-pages directory\n  * `fp syncback` - Combine frontend-copy and template tasks\n  * `fp template` - Translate templates in 03-templates for the backend, and \n    output them there\n  * `fp ui:help` - Print UI tasks and their descriptions\n  * `fp update` - Update Fepper distro, Fepper CLI, Fepper NPM, Fepper UI, and \n    Fepper extensions\n  * `fp version` - Print the versions of Fepper CLI, Fepper NPM, and Fepper UI\n  * `fp extend:help` - Print extension tasks and their descriptions\n* Enter a `-d` or `--debug` switch to run the command in `debug` mode.\n* If using Git for version control, directories named \"ignore\" will be ignored.\n\n### \u003ca id=\"update\"\u003e\u003c/a\u003eUpdate\n\nRun `fp update` to download and install the latest updates.\n\n### \u003ca id=\"global-data\"\u003e\u003c/a\u003eGlobal Data\n\nEdit `source/_data/_data.json` to globally populate \n\u003ca href=\"https://www.npmjs.com/package/feplet\" target=\"_blank\"\u003eFeplet\u003c/a\u003e \n(.mustache) templates with data. _Never_ edit `source/_data/data.json` as it \nwill get overwritten on each build.\n\n### \u003ca id=\"partial-data\"\u003e\u003c/a\u003ePartial Data\n\nUnderscore-prefixed .json files within \n`source/_patterns` will be concatenated to the output of `_data.json`, the \nwhole in turn getting built into `data.json`, the final source of globally \nscoped data. \n\n_Partial data_ is distinct from _pattern data_. For example, `01-blog.json` \nis _pattern data_ and specific to the `01-blog` pattern. No other pattern \nwill pick up `01-blog.json`, even if `01-blog.mustache` is included in \nanother pattern. However, `_01-blog.json` is _partial data_ and will get \nconcatenated to the _global data_ outputted to `data.json`. `_01-blog.json` \nwill be picked up by all patterns.\n\n* **DO NOT EDIT source/_data/data.json**\n* **DO PUT GLOBAL DATA IN source/_data/_data.json**\n* **DO LIBERALLY USE PARTIAL DATA IN source/_patterns FOR ORGANIZATIONAL SANITY**\n\n### \u003ca id=\"markdown-content\"\u003e\u003c/a\u003eMarkdown Content\n\nFepper provides the convenience of managing content in \n\u003ca href=\"https://daringfireball.net/projects/markdown/syntax\" target=\"_blank\"\u003e\nMarkdown\u003c/a\u003e. To do so, create a `.md` file of the same name as the pattern. \nEdit this file in Front Matter syntax like so:\n\n##### example.md:\n\n```\n---\ncontent_key: content\n---\n# Heading\n\nSample body content\n```\n\nFront Matter comprises YAML between the `---` lines and Markdown below them. It \ndoesn't appear to have a unified spec, so searches for documentation will \nprobably just list various implementations. In any case, `content_key` can be \nany valid whitespace-free string. Use it to identify its corresponding tag in \nthe `.mustache` file like so:\n\n##### example.mustache:\n\n```\n\u003cmain id=\"content\"\u003e\n  {{{ content }}}\n\u003c/main\u003e\n```\n\nOnce properly set up, the Markdown can be edited in the \n[Code Viewer](https://fepper.io/docpage--code-viewer.html).\n\nWhen creating `.md` files for pseudo-patterns, replace the `.json` extension \nwhile leaving the rest of the filename intact.\n\n### \u003ca id=\"code-viewer\"\u003e\u003c/a\u003eCode Viewer\n\n\u003ca href=\"https://www.npmjs.com/package/feplet\" target=\"_blank\"\u003eFeplet\u003c/a\u003e \n(.mustache) code can be viewed in the Fepper UI by clicking the eyeball icon in \nthe upper right and then clicking Code. The Code Viewer will then be opened, \ndisplaying the Feplet code of the pattern, and the partials tags within will be \nhot-linked to open their respective patterns in the main panel of the Fepper UI. \n\nIf the pattern has an associated `.md` file, its Markdown code can be viewed by \nclicking the \"Markdown\" tab. In order for the Code Viewer to allow edits to the \nMarkdown, Fepper must be LiveReloading correctly. In most cases, LiveReload \nwill just work out-of-the-box.\n\nIf the project was set up with Git, the Markdown edits can be version controlled \nwith the Code Viewer's Git Interface as well.\n\nMost Developers should be familiar with setting up projects with Git. It is \nbeyond the scope of this document to provide much further instruction on Git. \nHowever, Editors are encouraged to version-control their edits with Git if \ncollaborating with others.\n\nIn order to get Editors set up with Git, first make sure Git is installed. Then, \ninstall \u003ca href=\"https://github.com/cli/cli#readme\" target=\"_blank\"\u003eGitHub CLI\n\u003c/a\u003e (macOS and Windows only). A CLI requires a Terminal app, but Editors will \ngenerally only need this for setup and background operations. In fact, much of \nthe setup can be automated within clickable scripts.\n\nTo proceed, an account must be registered at GitHub\u0026#46;com, and GitHub CLI \ninstalled as per the instructions in the previous link. Then, run the following \nin the Terminal:\n\n##### macOS and Windows:\n\n```\ngit config --global user.email name@email.address\ngit config --global user.name 'User Name'\ngh auth login\n```\n\nAfter issuing the `gh auth login` command, press Enter to accept each default. \nAfter accepting to login with a web browser, press Enter to open the \nGitHub\u0026#46;com authentication webpage. Sign in to GitHub if necessary. Then, \nenter the 8-character code from the Terminal. Click to Authorize github. If the \nwebpage shows success, return to the Terminal. It should say, \"Authentication \ncomplete. Press Enter to continue...\"\n\nAfter pressing Enter to exit the prompt, Editors should be able to use the Git \nInterface with no more prompts for authentication.\n\n##### Linux and other Unix-like OSs:\n\nIt is not recommended to use Fepper's graphical Git Interface in Linux and \nother, more obscure Unix-like OSs. It is not straightforward to authenticate \nwith GitHub CLI in such OSs. The technical knowledge required to authenticate \nwould be better applied using Git as intended for Developers.\n\n### \u003ca id=\"requerio-inspector\"\u003e\u003c/a\u003eRequerio Inspector\n\nThe Code Viewer also has a Requerio Inspector. \n\u003ca href=\"https://github.com/electric-eloquence/requerio#readme\" target=\"_blank\"\u003e\nRequerio\u003c/a\u003e is a tool you can use to manage the state of your web application. \nHTML elements given state are referred to as \"organisms\". In order to view their \nstates, Requerio and its organisms need to be initialized as per the \n\u003ca href=\"https://github.com/electric-eloquence/requerio#readme\" target=\"_blank\"\u003e\nRequerio docs\u003c/a\u003e. It is necessary to define `window.requerio` in order for the \nRequerio Inspector to work, as per the following code example:\n\n```\nconst requerio = window.requerio = new Requerio($, Redux, $organisms);\n```\n\nA properly working Requerio app will then have its organisms and their states \nshow up in the Requerio Inspector like an expandable menu, the state tree. \nHovering over the state tree should highlight the organism being inspected. (It \nmay be necessary to give the organisms a CSS background-color in order for the \nhighlighting to work.) The display of the states will update in real-time, \nshould there be any changes to the organisms. You can even dispatch changes \n(\"actions\") to the organisms via your browser's Developer Tools:\n\n* Use your cursor to inspect the Requerio organism you wish to dispatch actions \n  on.\n* This should open the Inspector or Elements tab of the Developer Tools.\n* Click the adjacent tab to open the Console of the Developer Tools.\n* Enter the following example in the Console:\n* `requerio.$orgs['#nav'].dispatchAction('css', {backgroundColor: 'green'})`\n* If not on the default demo site, or if the `#nav` element doesn't exist, replace \n  `#nav` with your own selector, and the arguments with your own arguments.\n* The state change should show up in the Requerio Inspector.\n* \u003ca href=\"https://github.com/electric-eloquence/requerio/blob/dev/docs/methods.md\" target=\"_blank\"\u003e\n  Action methods and their arguments\u003c/a\u003e.\n\n### \u003ca id=\"static-site-generator\"\u003e\u003c/a\u003eStatic Site Generator\n\nRunning `fp static` will generate a complete static site based on the files in \n`source/_patterns/04-pages`. The site will be viewable at \nhttp://localhost:3000/static/. An `index.html` will be generated based on \nwhatever is declared as the `defaultPattern` in `patternlab-config.json`. If \nlinks to other pages in the `04-pages` directory work correctly in the Fepper \nUI, they will work correctly in the static site, even if the `public/static` \ndirectory is copied and renamed.\n\nFor example, assume an article is at \n`source/_patterns/04-pages/articles-/00-top-story.mustache`. Create the link as \nfollows:\n\n```\n\u003ca href=\"{{ link.pages-top-story }}\"\u003eArticle Headline\u003c/a\u003e\n```\n\nThis would built to the public directory as:\n\n```\n\u003ca href=\"../04-pages-articles--00-top-story/04-pages-articles--00-top-story.html\"\u003eArticle Headline\u003c/a\u003e\n```\n\nThe Static Site Generator would output this as:\n\n```\n\u003ca href=\"articles--top-story.html\"\u003eArticle Headline\u003c/a\u003e\n```\n\nNumeric prefixes to filenames and sub-directories will be dropped. Nested \nsource directories will be flattened and all static HTML files would become \nsiblings. The pathing of nested folders would be retained in the filenames, so \nthe organizational benefits of nesting folders will be retained.\n\nAppending a hyphen (`-`) to the \"articles\" directory is just a recommended \nconvention for static sites. While the Static Site Generator flattens nested \nsource directories, the double-hyphen suggests that \"articles\" categorizes the \nmore specific parts that follow.\n\nAdditional files can be put in `source/_static` so long as they do not get \noverwritten by the Static Site Generator.\n\n### \u003ca id=\"the-backend\"\u003e\u003c/a\u003eThe Backend\n\nFepper can very easily work with a CMS backend such as Drupal or WordPress, \nwhile not requiring Apache, MySQL, or PHP. Put the actual backend codebase or \neven just a symbolic link to the codebase into the `backend` directory. Then, \nenter the relative paths to the appropriate backend directories in `pref.yml`. \n(Do not include \"backend\" or a leading slash.) You will then be able to run \n`fp syncback` or `fp frontend-copy` to export your frontend data into your \nbackend web application.\n\n* Be sure that `backend.synced_dirs.assets_dir`, \n  `backend.synced_dirs.scripts_dir`, and `backend.synced_dirs.styles_dir` are \n  set in `pref.yml`. \n* The above values set in `pref.yml` can be overridden on a per-file basis by \n  similarly named YAML files with similarly named settings. \n  * These YAML files must match the source file's name with the exception of the \n    extension. \n  * The extension must be `.yml`\n  * The overriding property must only contain the lowest level key:value, not \n    the entire hierarchy, e.g. only `assets_dir`, not \n    `backend.synced_dirs.assets_dir`. \n* Asset, script, and style files prefixed by \"\\_\\_\" will be ignored by \n  `fp syncback` and `fp frontend-copy`, as will files in the `_nosync` \n  directory at the root of the source directories. \n* Frontend code will be synced with a customizable \n  \u003ca href=\"https://github.com/electric-eloquence/fepper-wordpress/blob/dev/backend/wordpress/wp-content/themes/fepper-child/readme.md\" target=\"_blank\"\u003e\n  child theme\u003c/a\u003e. The parent theme will not be modified.\n\n### \u003ca id=\"templater\"\u003e\u003c/a\u003eTemplater\n\nFepper's \u003ca href=\"https://www.npmjs.com/package/feplet\" target=\"_blank\"\u003eFeplet\u003c/a\u003e \n(.mustache) templates can be translated into templates compatible with your \nbackend. Feplet tags just need to be replaced with tags the backend can use. \nPut these translations into YAML (.yml) files named similarly to the .mustache \nfiles in `source/_patterns/03-templates`. Follow \n\u003ca href=\"https://github.com/electric-eloquence/fepper-drupal/blob/dev/source/_patterns/03-templates/page.yml\" target=\"_blank\"\u003e\nthis example\u003c/a\u003e for the correct YAML syntax. \n\nFollow these rules for setting up keys and values:\n\n* Delete the Feplet curly braces for keys.\n* Trim any exterior whitespace.\n* Leave other control structures and spaces within the key, e.g. !#/\u003e^\n* Wrap the key in single quotes.\n* Follow the closing quote with a colon, space, pipe, the numeral 2, and a \n  newline `: |2`\n* Indent each line of the value by at least two spaces.\n  * In Fepper for WordPress, be mindful of the fact that YAML does not recognize \n    tabs as valid indentation for values.\n  * Spaces precede tabs in YAML values, but the compiled PHP templates are \n    entirely tab-indented.\n* When translating to a language with double-curly braces for tags (as per the \n  example), the double-curly braces must be escaped with a backslash per curly \n  brace.\n\nRun `fp syncback` or `fp template`. \n\n* Be sure that `backend.synced_dirs.templates_dir` and \n  `backend.synced_dirs.templates_ext` are set in `pref.yml`. \n* The default `templates_dir` and `templates_ext` settings in `pref.yml` can be \n  overridden by similarly named settings in the template-specific YAML files. \n* Templates prefixed by \"\\_\\_\" will be ignored by the Templater as will files in \n  the `_nosync` directory. \n* The Templater will recurse through nested Feplet templates if the tags are \n  written in the full relative path syntax and have the `.mustache` extension, \n  e.g. `{{\u003e 02-components/00-global/00-header.mustache }}` \n* However, the more common inclusion use-case is to leave off the extension, and \n  not recurse. \n\n\u003cp\u003e\u003ca href=\"https://github.com/electric-eloquence/fepper-drupal\" target=\"_blank\"\u003e\nFepper for Drupal\u003c/a\u003e and \n\u003ca href=\"https://github.com/electric-eloquence/fepper-wordpress\" target=\"_blank\"\u003e\nFepper for WordPress\u003c/a\u003e have working examples of templates compatible with the \nTemplater.\u003c/p\u003e\n\n### \u003ca id=\"webserved-directories\"\u003e\u003c/a\u003eWebserved Directories\n\nWhen using a backend, assets generally need to be shared with the Fepper \nfrontend. The `syncback` and `frontend-copy` tasks copy files from Fepper to the \nbackend, but not the other way. Instead of providing a task to copy in the \nreverse direction, Fepper serves backend files if their directories are entered \ninto the `webserved_dirs` block in `pref.yml`. Be sure these values are \nformatted as YAML array elements.\n\n\u003e WEBSERVED DIRECTORIES ARE FOR STATIC ASSETS ONLY! DO NOT WEBSERVE DIRECTORIES \n  WITH BACKEND SOURCE CODE! NO BACKEND PROGRAMMING LANGUAGE WILL GET \n  PREPROCESSED! IF A STATIC SITE IS GENERATED, OR THE EXPRESS APP PUBLICLY \n  SERVED, SOURCE CODE WILL BE RENDERED AS PLAIN TEXT! THIS WILL MAKE PUBLIC ANY \n  SENSITIVE INFORMATION CONTAINED WITHIN!\n\n### \u003ca id=\"html-scraper\"\u003e\u003c/a\u003eHTML Scraper\n\nFepper can scrape and import the HTML of any valid web page into a reusable \npattern. A common use-case is to scrape pages from a backend populated with CMS \ncontent in order to auto-generate data files, and to replicate the CMS's HTML \nstructure. To open the Scraper, click Scrape in the Fepper UI, and then click \nHTML Scraper. Enter the URL of the page you wish to scrape. Then, enter the CSS \nselector you wish to target (prepended with \"#\" for IDs and \".\" for classes). \nClassnames and tagnames may be appended with array index notation (`[n]`). \nOtherwise, the Scraper will scrape all elements of that class or tag \nsequentially. Such a loosely targeted scrape will save many of the targeted \nfields to a JSON file, but will only save the first instance of the target to a \nFeplet (.mustache) file.\n\nUpon submission, you should be able to review the scraped output on the \nsubsequent page. If the output looks correct, enter a filename and submit again. \nThe Scraper will save .mustache and .json files by that name in the 98-scrape \ndirectory, also viewable under the Scrape menu of the toolbar. The Scraper will \nalso correctly indent the Feplet code.\n\n### \u003ca id=\"variables.styl\"\u003e\u003c/a\u003evariables.styl\n\n`source/_scripts/src/variables.styl` is a file containing variables that can \nbe shared across the Stylus CSS preprocessor, browser JavaScripts, and PHP \nbackends (and possibly other language backends as well). It ships with these \nvalues:\n\n```\nbp_lg_max = -1\nbp_md_max = 1024\nbp_sm_max = 767\nbp_xs_max = 480\nbp_xx_max = 320\nbp_xx_min = 0\n```\n\nIt cannot contain comments, semi-colons, curly braces, etc. It is \nstraightforward to import and use these variables in Stylus and JavaScript. PHP \nmust import them with `parse_ini_file()`. Fepper tries to be agnostic about CSS \nprocessors and tries to keep the amount of npms to download to a minimum. \nHowever, since Stylus allows for this easy sharing of variables, most Fepper \ndistros ship with the \n\u003ca href=\"https://www.npmjs.com/package/fp-stylus\" target=\"_blank\"\u003efp-stylus\u003c/a\u003e \nextension and a fully-populated `source/_styles/src/stylus` directory. The \nStylus files are written in the terse, YAML-like, indentation-based syntax. \nHowever, the more verbose, CSS-like syntax (with curly braces and semi-colons) \nis perfectly valid as well.\n\nThe UI's viewport resizer buttons are dependent on the values in \n`variables.styl`. The default values will configure the XX, XS, SM, and MD \nbuttons to resize the viewport to each breakpoint's assigned maximum width. The \nLG button will resize the viewport to a width that is greater than `bp_md_max` \nby the distance between `bp_sm_max` and `bp_md_max`.\n\nUsers have the ability to add, modify, or delete values in `variables.styl`. The \nUI will respect these changes; but keep in mind that additions must be prefixed \nby `bp_` and suffixed by `_max` in order for them to appear as viewport resizer \nbuttons. A `-1` value translates to `Number.MAX_SAFE_INTEGER`, and effectively \nmeans infinity.\n\n### \u003ca id=\"ui-customization\"\u003e\u003c/a\u003eUI Customization\n\nAll aspects of the UI are available for customization. For example, the toolbar \ncan accept additions, modifications, and deletions per the needs of end-users. \nThe UI markup is compiled by recursive, functional React calls. The recursion \ntree is reflected by the directory structure containing the modules which \ncompose the UI. To override any given module, copy the directory structure \nleading to the module from \n\u003ca href=\"https://github.com/electric-eloquence/fepper-npm/tree/dev/ui/core/styleguide/index/html\" target=\"_blank\"\u003e\nhttps\u0026colon;//github.com/electric-eloquence/fepper-npm/tree/dev/ui/core/styleguide/index/html\u003c/a\u003e \nto `source/_ui/index/html`, respective to your implementation. Modifications to \nmodules in that directory will override the corresponding modules in core. \nAdditions (so long as they are correctly nested) will also be recognized.\n\nA working example of UI customization can be found at \n\u003ca href=\"https://github.com/electric-eloquence/fepper-wordpress/blob/dev/source/_ui/index/html/00-head/head.component.js\" target=\"_blank\"\u003e\nhttps\u0026colon;//github.com/electric-eloquence/fepper-wordpress/blob/dev/source/_ui/index/html/00-head/head.component.js\u003c/a\u003e. \nThe Fepper for WordPress project overrides its HTML title to read \"Fepper WP\" \ninstead of \"Fepper\". In order to do so, it has the `head.component.js` module \nnested in directories that correspond to the tags that nest the `head` HTML \nelement. Both `head.component.js` and its nesting directories must be named \nsimilarly to their corresponding elements. `.component.js` indicates that the \nfile is a module to be rendered by React. \n\u003ca href=\"https://reactjs.org/docs/dom-elements.html\" target=\"_blank\"\u003e\nIt must export properties that `React.createElement()` understands\u003c/a\u003e. \nThe numeric prefix to `00-head` orders it to precede `01-foot`, even though \n\"foot\" precedes \"head\" alphabetically.\n\nIn this example, by allowing customizations in the `00-head` directory separate \nfrom the core components, core updates will be respected for all components \nexcept for the HTML head.\n\nBrowser JavaScript and CSS customizations can (and should) be componentized \nthis way as well. While a head element is unlikely to have associated scripts or \nstyles, the UI's main element does have its scripts and styles componentized as \n\u003ca href=\"https://github.com/electric-eloquence/fepper-npm/tree/dev/ui/core/styleguide/index/html/01-body/40-main\" target=\"_blank\"\u003e\n`main.js` and `main.css` in `index/html/01-body/40-main`\u003c/a\u003e. A big advantage \nfor this type of componentization comes when elements are renamed or deleted. \nWhen you rename or delete the element, are you _absolutely_ sure you'll rename \nor delete accordingly in some far-flung, monolithic script or style file?\n\nAlas, no one should be _forced_ to componentize this way. Generic modifications \nto UI scripts can be added to `source/_scripts/ui-extender.js`.\n\nSimilarly, generic modifications to UI styles can be added to \n`source/_styles/pattern-scaffolding.css`. (The file is named this way to adhere \nto the Pattern Lab convention on defining pattern states. It should not be \nrelied on for pattern scaffolding.)\n\nView All markup can also be overridden by copying the .mustache files in \n\u003ca href=\"https://github.com/electric-eloquence/fepper-npm/tree/dev/ui/core/styleguide/viewall\" target=\"_blank\"\u003e\nhttps\u0026colon;//github.com/electric-eloquence/fepper-npm/tree/dev/ui/core/styleguide/viewall\u003c/a\u003e \nand pasting them to `source/_ui/viewall` (nested correctly). Modifications will \nthen be recognized and displayed in the UI. (No additions are allowed.) Custom \nView All styles can be added to `source/_styles/pattern-scaffolding.css`.\n\nYou will need to compile the UI in order for the browser to pick up custom \nchanges to the UI:\n\n```\nfp ui:compile\n```\n\nNew UI customizations will not be picked up simply by restarting Fepper.\n\nThe UI exposes these additional tasks:\n\n* `fp ui:build` - Build the patterns and output them to the public directory\n* `fp ui:clean` - Delete all patterns in the public directory\n* `fp ui:compile` - Compile the Fepper User Interface from its components\n* `fp ui:copy` - Copy frontend files (\\_assets, \\_scripts, \\_styles) to the \n  public directory\n* `fp ui:copy-styles` - Copy \\_styles to the public directory (for injection \n  into the browser without a refresh)\n* `fp ui:help` - Get more information about Fepper UI CLI commands\n\n### \u003ca id=\"extensions\"\u003e\u003c/a\u003eExtensions\n\nThe `extend` directory is purposed for extending Fepper's functionality. \nExtensions can be contributed or custom. The `extend` directory will not be \nmodified when updating Fepper.\n\n##### Contributed extensions:\n\n* Install and update contributed extensions with npm in the `extend` directory.\n* Add the tasks to `extend/contrib.js` (and `extend/auxiliary/auxiliary_contrib.js` \n  if necessary) in order for Fepper to run them.\n* Contributed Fepper extensions can be found at \n  \u003ca href=\"https://www.npmjs.com/search?q=fepper%20extension\" target=\"_blank\"\u003e\n  https://www.npmjs.com/search?q=fepper%20extension\u003c/a\u003e\n\n##### Custom extensions:\n\n* Write custom extensions in the `extend/custom` directory.\n* Extensions require a file ending in \"~extend.js\" in order for Fepper to \n  recognize their tasks.\n* The \"\\*~extend.js\" file can be directly under `extend/custom`, or nested one \n  directory deep, but no deeper.\n* Add the tasks to `extend/custom.js` (and `extend/auxiliary/auxiliary_custom.js` \n  if necessary) in order for Fepper to run them.\n* Fepper runs a self-contained instance of gulp to manage tasks. This gulp \n  instance will be independent of any other gulp instance on your system.\n* For best results, set `const gulp = global.gulp`, not \n  `const gulp = require('gulp')`.\n* The `fp` command is an alias for `gulp` (among other things). Any `fp` task \n  can be included in a custom task.\n* Fepper only supports \n  \u003ca href=\"https://github.com/electric-eloquence/gulp#readme\" target=\"_blank\"\u003egulp 3\u003c/a\u003e \n  syntax.\n\nIt may be helpful to write help text for a custom extension, especially when a \nperson other than the author uses it. To do this, create a custom task appended \nby \":help\".  Declare and log the help text as follows, and it will be output by \nrunning `fp extend:help`.\n\n```\n'use strict';\n\nconst gulp = global.gulp;\n\ngulp.task('custom-task:help', function (cb) {\n  let helpText = `\nFepper Custom Task Extension\n\nUsage:\n    \u003ctask\u003e [\u003cadditional args\u003e...]\n\nTask and description:\n    fp custom-task:help    Print usage and description of custom task.\n`;\n\n  console.log(helpText);\n  cb();\n});\n```\n\n##### Confs and prefs:\n\nYou might need to access the values in the `conf.yml` and `pref.yml` files in \norder to write custom tasks. They are exposed through `global.conf` and \n`global.pref` (on the `global` Node object).\n\nThe values in `patternlab-config.json` are exposed through `global.conf.ui`. \nPlease note that all paths in `patternlab-config.json` will be converted to \nabsolute paths in `global.conf.ui`. Relative paths can be accessed through \n`global.conf.ui.pathsRelative`.\n\n##### Utilities:\n\nCommon utilty functions for custom extensions are available from the\n\u003ca href=\"https://www.npmjs.com/package/fepper-utils\" target=\"_blank\"\u003eFepper Utils\u003c/a\u003e\nnpm.\n\n##### Object-oriented Fepper:\n\nBeneath the gulp tasking system lies object-oriented Fepper. Running any `fp` \ntask instantiates the `Fepper` class. This instance is exposed through the \n`global.fepper` object. By directly accessing the `Fepper` instance, you can run \nany Fepper operation without gulp. Deeper within `Fepper` lies the `Patternlab` \nclass. By directly accessing `Patternlab`, you can run any Pattern Lab \noperation without Fepper. The `Patternlab` instance is attached to Fepper as \n`global.fepper.ui.patternlab`. The `global.fepper` object can, of course, be \neasily inspected in a console.\n\nIf there is something you wish were different about the `Fepper` class, or any \nof its member classes, you can inherit from the class, and make whatever changes \nyou wish, without worry that your changes will be overwritten by the next \nupdate.\n\nHere is an example of overriding the `fp help` command:\n\n1. Create an `instance_file`. For this example, let's write it at \n   `extend/custom/hack-help.js`.\n\n```\n'use strict';\n\nconst FepperSuper = require('fepper');\nconst HelperSuper = require('fepper/core/tasks/helper');\nconst TasksSuper = require('fepper/core/tasks/tasks');\n\nclass Helper extends HelperSuper {\n  constructor(options) {\n    super(options);\n  }\n\n  main() {\n    console.log('ASYNC ALL THE THINGS!');\n  }\n}\n\nclass Tasks extends TasksSuper {\n  constructor(options) {\n    super(options);\n    this.helper = new Helper(this.options);\n  }\n}\n\nmodule.exports = class Fepper extends FepperSuper {\n  constructor(cwd) {\n    super(cwd);\n    this.tasks = new Tasks(this.options);\n  }\n}\n```\n\n2. Declare `instance_file` in `pref.yml`.\n\n```\ninstance_file: extend/custom/hack-help.js\n```\n\n3. Run `fp help` on the command line. It should log \n   \u003ca href=\"https://www.npmjs.com/package/gulp4-run-sequence#why-the-culinary-task-names\" target=\"_blank\"\u003e\n   \"ASYNC ALL THE THINGS!\"\u003c/a\u003e\n\nHackers wishing to view the code for any of these classes will find that the ES6 \nsyntax and object-orientation makes the code mostly self-documenting. The entry \npoint to the `Fepper` class is in \n\u003ca href=\"https://github.com/electric-eloquence/fepper-npm/blob/dev/core/fepper.js\" target=\"_blank\"\u003e\nFepper NPM at `core/fepper.js`\u003c/a\u003e.\n\nThere is currently no public API for object-oriented Fepper. To express demand \nfor one, \n\u003ca href=\"https://github.com/electric-eloquence/fepper/issues\" target=\"_blank\"\u003e\nplease open an issue\u003c/a\u003e.\n\n### \u003ca id=\"express-app\"\u003e\u003c/a\u003eExpress App\n\nFepper exposes its \u003ca href=\"https://expressjs.com/\" target=\"_blank\"\u003eExpress\u003c/a\u003e \napplication through the `global.expressApp` object. This object can be \noverridden with custom routes and middleware via the `custom:tcp-ip` (or \n`contrib:tcp-ip`) extension task. Initialization of `global.expressApp` occurs \nbefore this task, and listening occurs afterward.\n\n`global.expressApp` is a direct reference to `global.fepper.tcpIp.fpExpress.app`.\n\n### \u003ca id=\"mobile-devices\"\u003e\u003c/a\u003eMobile Devices\n\nThe best way to browse the Fepper UI on a mobile device is through the wireless \nconnection on your development machine. These are the instructions for doing \nthis on a Mac:\n\nIf your Mac is connected to the Internet wirelessly:\n\n* Open System Preferences\n* Click Network\n* In the left pane, select Wi-Fi\n* In the right pane, underneath Status, the IP address will be displayed\n* On your mobile device, connect to the same wireless network that your Mac is \n  connected to\n* Browse http:\u0026#x2F;\u0026#x2F;[IP address]:3000\n* Change the port number if Fepper is listening on a different port\n\nIf your Mac is connected to the Internet through a wire:\n\n* In the top menu bar, turn Wi-Fi off\n* Open System Preferences\n* Click Sharing\n* In the left pane, select Internet Sharing\n* In the right pane, on \"Share your connection from:\", select the interface \n  which is connected to the Internet\n* On \"To computers using:\", check Wi-Fi\n* Click \"Wi-Fi Options...\"\n* This will show your Mac's name as the wireless network name\n* Add security if you are in a public space\n* Click OK\n* Back in the System Preferences main window, in the left pane, check to \n  activate Internet Sharing\n* In the dialog that appears, click \"Turn Wi-Fi On\"\n* In the next dialog, click Start\n* The Wi-Fi icon in the top menu bar should now be gray with a white up-arrow\n* Back in the System Preferences main window, click Network\n* In the left pane, select your wired connection\n* In the right pane, underneath Status, the IP address will be displayed\n* On your mobile device, connect to the wireless network that is the same name \n  as your Mac\n* Browse http:\u0026#x2F;\u0026#x2F;[IP address]:3000\n* Change the port number if Fepper is listening on a different port\n\n### \u003ca id=\"i18n\"\u003e\u003c/a\u003eI18N\n\nThe Elements, Compounds, and Components directories are optional and can be \nrenamed to anything your charset and file system allow without further \nconfiguration, so long as there are no collisions with other names. The \nTemplates, Pages, and Scrape directories allow for similar renaming but they \nmust be configured in `patternlab-config.json`.\n\nThe text in the UI, as well as console messages, can be changed by editing \n`source/_ui/i18n/en.json`. Replace the blank values with alternate English \nvalues if you wish. If you want translation to another language, create a new \nfile named by the abbreviation for the language. For example: \n`source/_ui/i18n/es.json` for Spanish. Then, assign that abbreviation to the \n`lang` key in `pref.yml`. In the .json file, assign the translated values to the \nEnglish keys.\n\nFepper follows a popular convention of naming the translation function `t`. (See \n\u003ca href=\"https://github.com/i18next/i18next\" target=\"_blank\"\u003ei18next\u003c/a\u003e and \n\u003ca href=\"https://github.com/i18next/react-i18next\" target=\"_blank\"\u003ereact-i18next\u003c/a\u003e \nas other examples.) Be sure never to redefine the `global.t` variable.\n\nIf a need arises for documentation in other languages, you are strongly \nencouraged to make the translations, and use the options that Open Source offers \nto distribute them to the rest of the world.\n\n### \u003ca id=\"keyboard-shortcuts\"\u003e\u003c/a\u003eKeyboard Shortcuts\n\n* **ctrl+alt+0**: set the viewport to \"extra extra small\"\n* **ctrl+shift+x**: set the viewport to \"extra small\"\n* **ctrl+shift+s**: set the viewport to \"small\"\n* **ctrl+shift+m**: set the viewport to \"medium\"\n* **ctrl+shift+l**: set the viewport to \"large\"\n* **ctrl+alt+w**: set the viewport to \"whole\"\n* **ctrl+alt+r**: set the viewport to a random width\n* **ctrl+alt+g**: start/stop \"grow\" animation\n* **ctrl+shift+a**: open/close Annotations Viewer\n* **ctrl+shift+c**: open/close Code Viewer\n* **ctrl+shift+]**: select next tab/panel in Code Viewer\n* **ctrl+shift+[**: select previous tab/panel in Code Viewer\n* **ctrl+alt+h**: dock Code Viewer to the left\n* **ctrl+alt+j**: dock Code Viewer to the bottom\n* **ctrl+alt+l**: dock Code Viewer to the right\n* **ctrl+shift+f**: open/close the Pattern Search\n\nAs a reminder, the viewport sizes can be customized in `source/_scripts/src/variables.styl`.\n\n### \u003ca id=\"more-documentation\"\u003e\u003c/a\u003eMore Documentation\n\n* \u003ca href=\"https://fepper.io/docpage\" target=\"_blank\"\u003eFepper website\u003c/a\u003e\n* \u003ca href=\"https://github.com/electric-eloquence/fepper-npm/blob/dev/excludes/pref.yml\" target=\"_blank\"\u003e\n  Default pref.yml\u003c/a\u003e\n* \u003ca href=\"https://www.npmjs.com/package/feplet\" target=\"_blank\"\u003eFeplet\u003c/a\u003e \n* \u003ca href=\"https://www.npmjs.com/package/fepper-utils\" target=\"_blank\"\u003eFepper Utils\u003c/a\u003e\n* \u003ca href=\"https://mustache.github.io/mustache.5.html\" target=\"_blank\"\u003e\n  Mustache\u003c/a\u003e\n\n[snyk-image]: https://snyk.io//test/github/electric-eloquence/fepper-wordpress/master/badge.svg\n[snyk-url]: https://snyk.io//test/github/electric-eloquence/fepper-wordpress/master\n\n[linux-image]: https://github.com/electric-eloquence/fepper-wordpress/workflows/Linux%20build/badge.svg?branch=master\n[linux-url]: https://github.com/electric-eloquence/fepper-wordpress/actions?query=workflow%3A\"Linux+build\"\n\n[mac-image]: https://github.com/electric-eloquence/fepper-wordpress/workflows/Mac%20build/badge.svg?branch=master\n[mac-url]: https://github.com/electric-eloquence/fepper-wordpress/actions?query=workflow%3A\"Mac+build\"\n\n[windows-image]: https://github.com/electric-eloquence/fepper-wordpress/workflows/Windows%20build/badge.svg?branch=master\n[windows-url]: https://github.com/electric-eloquence/fepper-wordpress/actions?query=workflow%3A\"Windows+build\"\n\n[node-version-image]: https://img.shields.io/node/v/fepper.svg\n\n[license-image]: https://img.shields.io/github/license/electric-eloquence/fepper-wordpress.svg\n[license-url]: https://raw.githubusercontent.com/electric-eloquence/fepper-wordpress/master/LICENSE\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felectric-eloquence%2Ffepper-wordpress","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felectric-eloquence%2Ffepper-wordpress","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felectric-eloquence%2Ffepper-wordpress/lists"}