Giter Site home page Giter Site logo

asuh / forage Goto Github PK

View Code? Open in Web Editor NEW
3.0 3.0 0.0 685 KB

Forage is a WordPress Starter Theme for custom themes using Laravel Blade, Vite, and Biome.

License: GNU General Public License v3.0

JavaScript 11.44% PHP 53.07% CSS 3.64% Blade 31.86%
biome blade laravel php sage theme vite wordpress wordpress-laravel wordpress-starter-theme wordpress-theme

forage's Introduction

Hello! Micah here, come on in! ๐Ÿ‘‹

I specialize in responsive, inclusive user interfaces using semantic HTML, CSS focused on the cascade, and component-based Javascript. I incorporate thoughtful user experiences with the following principles: accessibility, progressive enhancement, SEO and fast performance. I enjoy working closely with designers to create systematic, component based designs, define design patterns, and produce style guides. I am regularly working to improve my experience, whether on the full-stack of technology or the front-end.

Oh, and I really enjoy tinkering with setting things up. I have two repositories dedicated to setting up both Windows and MacOS! Take a look below.

forage's People

Contributors

asuh avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar

forage's Issues

Plain PHP version?

Blade has some notable features that help PHP developers move faster. Here are a few reasons to keep using it:

(quickly generated by ChatGPT, with edits and additions by me)

  • Layout Components: Blade offers the @component directive for defining reusable components, such as navigation menus, alerts, or forms. This promotes encapsulation and reusability for components containing HTML, CSS, and JS.

  • Escaping by Default: Blade automatically escapes output by default, helping to prevent XSS (Cross-Site Scripting) attacks. This enhances the security of your application by reducing the risk of injecting malicious code into your HTML. While PHP provides functions for escaping output, Blade handles this automatically, reducing the likelihood of accidental omissions.

  • Template Inheritance: allows you to define a base layout with placeholders that child views can fill in with their own content. This enables a more structured and modular approach to building views, reducing duplication and promoting code reusability.

    In other words, PHP would require explicit includes everywhere for PHP files to work with each other. Blade uses hooks like @yield as placeholders to work with various functions like @section.

    @yield('content") in the base file would render @section('content") in the child view file, such as page.blade.php`.

  • Control Directives: Blade provides convenient directives for common control structures, making it easier to express conditional logic and iterate over data.

    Example@if () as plain PHP would need PHP tags, looking like <?php if () ?>. Essentially, it's more verbose to use plain PHP.

  • Concise Syntax: Blade offers a concise and readable syntax for common tasks such as echoing variables ({{ $variable }}), control structures (@if, @else, @endif, etc.), loops (@foreach, @for, @while), and more. This makes Blade templates easier to write, understand, and maintain compared to raw PHP embedded within HTML.

  • Template Comments: using {{-- This is a Blade comment --}}, which is not rendered in the final output.

  • Include Statements: In addition to @include, which mostly mirrors plain PHP, Blade also provides the @includeWhen and @includeFirst directives for conditional inclusion of templates.

I attempted to order the above in the order of importance, with the top few being quite more efficient than plain PHP.

My overall observation is that Blade should truly be considered if you can think of good use cases for adding components rendered by PHP. At some point, it might be less useful as Web Components find their way into the WordPress ecosystem.

Additionally, the auto-escape and inheritance for Blade is pretty great for efficiency. The benefits of these features are quite convenient.

The rest are just nice little sprinkles to clean up PHP. Nice, but not necessary.

If I review everything I've used with Blade, I really don't think I have any real needs yet for PHP driven components. All the rest of the bullet points could easily have been regular PHP in my own personal work flow, but I'm really only using themes on smaller sites that don't have a lot of complexity.

If Blade is removed from any project, you likely have the option to completely remove a dependency on Composer as well as some application methods to render the Blade syntax into PHP. I can also see this argument for those who prefer to stay as close to the original languages as possible.

At some point in the near future, decisions to support Laravel Blade might come down to whether or not you want a build step to compile a language. There's a potential future approaching where the browser contains so much power that build steps can once again become optional. That's a very interesting future!

With all of this said, if we remove Blade, we can further reduce the overhead and abstraction of this theme by removing Composer and some of the App logic. This provides a quick set up for someone wanting to just work with the basics.

Reproduced at https://asuh.local/laravel-blade-php/

Gutenberg compatability

The theme needs more testing to know how compatible it can be with Gutenberg, considering Full Site Editing is the future of WordPress. There's no telling how classic editor will evolve or be supported in the future.

Idea 1: Adapt a similar theme.json file similar to this package:
https://github.com/roots/bud/tree/main/sources/@roots/bud-tailwindcss-theme-json

Idea 2: Review the pieces of a block theme and test inside of this theme
https://developer.wordpress.org/block-editor/how-to-guides/themes/

phpcs error

Anytime I run composer lint, which references phpcs, it produces an error like the following:

Script phpcs handling the lint event returned with error code 2

WordPress Clean Up Plugin or Package

Right now, this is integrated with the archived Soil plugin. Since Roots deprecated its use in favor of Acorn Prettify, it'd be good to find a way to use something similar or different to Soil that doesn't require additional dependencies.

Use `iw_default_author` for the h-card

Right now, the representative .h-card component is using get_the_author_meta() to grab the default author data to apply it to the card. There's no logic to distinguish for post authors and representative h-card authors.

Here's an example: https://github.com/dshanske/iw26/blob/trunk/template-parts/biography.php

The Indieweb plugin offers iw_default_author data and it would make more sense to use this for the default for the repreentative h-card, especially when there could be more than one author.

Luckily, Indieweb plugin states that it'll always default to a specific user who has made a post, as long as no other users or profiles have made posts.

Once this work is completed, I need to test this is compatible with the IndieBlocks plugin for Gutenberg support.

Child theme support?

I haven't yet tested this to see if a child theme can work with this as the parent theme

Lightning CSS as parser over PostCSS?

Vite uses PostCSS by default, and that's great, but I'm quite curious about Lightning CSS as well. I think there might be advantages as the codebase grows.

I'd need to find out if Lightning CSS changes the /node_modules/ directory to replace PostCSS with Lightning CSS.

I'd also need to see the output of the build since it'll replace using ESBuild for CSS.

Reference

Is `yarn` necessary?

I want to review the speed of yarn versus just using npm. I know there's still some speed advantage, sure, but I question this advantage to wonder if it's minimal.

If I keep any type of package manager, it would be just as valid to review pnpm or bun.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.