studio1902 / statamic-peak

Statamic Peak is an opinionated starter kit for all your Statamic sites.

Start out on top!

Peak is your personal development sherpa. It's an opinionated starter kit for all your Statamic sites. It's design agnostic but comes bundled with tools like Tailwind CSS and AlpineJS and a workflow you can use to build anything you want. Peak features a page builder, a rich collection of starter templates, fieldsets, blueprints, SEO functionality, configuration and more to get you started on your clients' site straight away. Peak is easy to extend or edit to fit your clients' website needs and will drastically improve your development speed.

The aim of Peak is to make it easy to start new projects as they often share much of the same principles. Whether you're new to Statamic or a veteran, there will be something interesting in here for you. Please participate and discuss on how to make our websites better.

Maintaining Peak demands a lot of my time and it probably saves you a lot. Your sponsorship would mean a great deal to me as it makes it much easier for me to maintain this project and keep improving it. Sponsor me. You can find official support on my website.

Read the docs.

Contributing

Contributions and discussions are always welcome, no matter how large or small. Treat each other with respect. Read the Code of Conduct.

Read more about how you can contribute here.

License

Statamic Peak is licensed under the GNU General Public License v3.0. Please see License File for more information. Statamic itself is commercial software and has its' own license.

statamic-peak's Issues

Use modifier for determining link type

As suggested by @pryley in https://gist.github.com/pryley/782c2653fe0245099f671a959adaa8a0 because current solution doesn't work with absolute local links (e.g. in pagination).

Favicon generation

Auto generate favicons. Together with @austriker27.

Other hydration of CSRF token approach

When we want to use the full force of caching for our pages with forms etc, we need a way to hydrate the CSRF token to protect our request endpoints against Cross Site Request Forgery.

At the moment we use a {{ dynamic_token }}-tag which periodically hydrates the csrf-input field (atm on load and every 15 minutes).

Basically it just makes an Ajax request to a [specific endpoint](new FormData(this.$refs.form)})) to retrieve the new, current [csrf-token given by laravel](new FormData(this.$refs.form)})).

I was wondering if there were any downsides to put this hydration into the form sent request itself. Right before we make the actual request to the form-endpoint.

In pseudo code:

sendform() {
  this.sending = true;
  fetch('/!/DynamicToken/refresh') 
    .then((body) => {
      return body.text();
    })
    .then((newToken) => {
      let data = new FormData(this.$refs.form)});
      data._token = newToken;

      // do the actual request with the new token
    })
},

We then are able to discard the whole dynamic_token-tag & don't have to make any additional calls every x-minutes.

Or am I missing any pittfalls?

Search form and template

Add a basic implementation of Statamic search. Off by default. Easy to include.

Upgrading to new release

Hi Rob,

Loving the peak starter kit and all the effort to make this.

I was just wondering what procedure you use to upgrade to the latest release of peak, say from v1.10 to v1.12?

Customization - how to do it conveniently?

Unless I'm missing some obvious way, I'm not sure how to handle customization. I mean, I have a few different opinions about how I want some details laid up, and I can have those in a separate private branch, but it might not be an easy task to keep it rebased, as the configuration is not always cleanly separated.

Do you have any suggestions about how that could be handled?

I suppose that the tailwind configuration is what's mostly at stake. One starting point could be to extract the css configuration from tailwind.config into files that get imported.

For my own templates, partials, blue and fieldsets, I can use an add-on (I think). Maybe it would be useful to provide one, so that people can just provide the content? Maybe not everyone can code.

Package to install into existing Laravel app

Is your feature request related to a problem? Please describe.
No

Describe the solution you'd like
Not applicable

Describe alternatives you've considered
Not applicable

Additional context
None

I was wondering if Studio1902 would be interested if there was a package of this preset for Statamic instead of an app install or maybe both?
If so, I would like to help by submitting a PR or consider other possibilities to make this happen.

What are your thoughts on this?

Add a breadcrumbs partial

Prose class on both article tag and text set component

Describe the bug
I am going over how you used the Tailwind typography plugin to style bard. I see you have the "prose" class on both the article container for the bard as well as the text set partial the bard uses. Isn't it true that you wouldn't need the prose class on the text set partial because it's already on the article tag that the text lives in?

To Reproduce

1. Go look at resources/views/page_builder/_article.antlers.html and see prose
2. Go look at resources/views/components/_text.antlers.html and see prose
3. Does the prose class on the text component need to be there and if so why?

Additional context
It could be there for a reason and I just don't know why because I'm new to the typo plugin...

Add a partial for the social media global

Show how to use those globals together with some icons.

Add more image size - including base64

Is your feature request related to a problem? Please describe.
So I am building a hero section and my monitor is 27 inches. I find myself seen a lot of pixels on the images since the _picture.antlers.html has a cool feature to make images responsive. I tried to modify the largest image size, however, I don't see any difference from 1680w to 3000w. So what am I doing wrong?

Describe the solution you'd like
I would like to understand the logic of how these sizes are being created and add more. Even a base64 feature, which I've seen in other pages or tools like GatsbyJS with their gatsby-image plugin. Makes a temporary image on the first load.

Describe alternatives you've considered
Increased the biggest image. But it doesn't seem to work.

Additional context
I am using the partial '_picture.antlers.html' in all my images.

Upgrade to Laravel Mix 6

If only I can find a way to use Modernizr with Laravel Mix 6 we could update. I can't get it to work yet. See: https://github.com/studio1902/statamic-peak/tree/feature/laravel-mix-6

Modernizr not working

Not getting the classes on the HTML tag.

Demo video

A demo video so users get a clear picture what Peak is and does..

My issues with it: I don't like making them and it will be outdated within weeks.

Any ideas?

TW breakpoint indicator breaks when extending screen sizes

Describe the bug
after adding xs: '375px', via extend in site config everything above xs is indicated as xs. Utility generation is not affected
It works if I override the entire screens objecft instead of extending it though, that works for me for now, too.

Note to self: probably order the breakpoints first

Social card height: 600 or 630

We have some mixed signals in the social card configuration.
In the fieldset we have the following instruction:

The recommended size is 1200px x 630px

While in snippets/_seo.antlers.html we have a glide tag with the dimension 1200x600px

Happy to make a PR, but which of the dimensions is correct?

Asset Container Error

I installed peak together with Statamic via the cli, but encounter this error when viewing any page in the cp. Could easily be an issue with my local config but I've tried to follow the docs step for step.

Include current locale in alternate hreflang elements

At the moment we exclude the current lang being displayed in the head:

{{ locales }}
    {{ unless locale.key == current }}
        <link rel="alternate" hreflang="{{ locale:full replace="_|-" }}" href="{{ permalink }}">
    {{ /unless}}
{{ /locales }}

I recently ran ahrefs site explorer but got this error:

Self-reference hreflang annotation missing
Issue details
To indicate multiple language/location versions of a page to the search engines, each language version of a page must list itself as well as all other language versions.
Hreflang annotations without the self-referencing link may be ignored or misinterpreted by the search engines.

How to fix

Review all the pages with missing self-referencing hreflang annotations listed in this report. You can see all hreflang links specified for a given page in the table.

Make the necessary changes, so that each of these pages has a self-referencing hreflang annotation.
For example, a Spanish version of your page must have rel="alternate" hreflang="es" annotation with a link to itself.

So if I'm reading this correctly we should also include the current page in the hreflang elements.

Bug: prose-lg and larger aren't generating

Describe the bug
I like to use typography's prose for my sites. When messing w/ peak I couldn't get prose-lg to compile into site.css.

To Reproduce
Add prose-lg to a view, run npm run dev, then search through site.css. You will find no prose-lg's in there anywhere

To fix
To fix this I changed how typography is required in tailwind.config.typography.js

I did this:

  plugins: [
    require('@tailwindcss/typography'),

    // require('@tailwindcss/typography')({
    //   modifiers: [],
    // }),
  ]

I'm not sure why there is a blank modifiers on there anyways. But this fixed my problem.

Add a pagination partial

Add a partial to easily add pagination to a page.

Basic SEO / Meta Tags / Site Setting Configuration

Enhancement request: Basic SEO / Website Information
Probably best as a global config option.

I suggest the following things be included:

General

• Website Title
• Logo
• Favicon
• Touch Icon

Meta Tags

• Image
• Description
• Title

Analytics

• Google Tag Manager ID
• Google Analytics ID
• Fathom Analytics ID

Here's a YAML file (for statamic V2) that I used in the past. Its just for inspiration and should be converted for V3.

title: Default Globals
hide: true
sections:
  main:
    display: Main
    fields:
      site_name:
        type: text
        display: Website Name
        instructions: The name of your website
        localizable: true
      site_logo:
        type: assets
        display: Website Logo
        container: main
        folder: img
        restrict: true
        max_files: 1
        mode: grid
        width: 25
      website_favicon:
        container: main
        folder: img
        restrict: false
        max_files: 1
        mode: grid
        type: assets
        width: 25
        display: Website Favicon
      website_touch_icon:
        restrict: false
        type: assets
        width: 25
        display: Website Touch Icon
        container: main
        folder: img
        max_files: 1
        mode: grid
      global_meta_image:
        container: main
        folder: /
        restrict: false
        max_files: 1
        mode: grid
        type: assets
        width: 25
        display: Global Meta Image
      google_tag_manager_id:
        type: text
        width: 50
        display: Google Tag Manager ID
        instructions: 'Follows the pattern: GTM-XXXXXXX'
      google_analytics_id:
        type: text
        instructions: "If you're running GA through GTM leave this blank. Follows the pattern: UA-XXXXXXXXX-X"
        width: 50
        display: Google Analytics ID
      head_scripts:
        mode: table
        fields:
          description:
            type: text
            display: Description
          code:
            type: textarea
            display: Code
        type: grid
        instructions: 'Add meta tags and scripts to the `<head>` area of your site.'
        display: 'Head Scripts'
        add_row: Add Code
  footer:
    display: Footer
    fields:
      footer_scripts:
        mode: table
        fields:
          description:
            type: text
            display: Description
          code:
            type: textarea
            display: Code
        type: grid
        instructions: 'Add meta tags and scripts right before closing `</body>` area of your site.'
        display: 'Footer Scripts'
        add_row: Add Code
taxonomies: true

Also this site might be useful in creating the Meta Tags: http://heymeta.com

Link Blocks broken. Can't save

Describe the bug
When I try to create a link block, that is, save and publish it, I get the error "The given data was invalid". An extra block seem to be created without any data when you look at the live preview of the page.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'page builder'
2. Click on 'Add Link block'
3. Populate all fields for a new link block
4. Try to save and publish
5. See error "The given data was invalid"

Expected behavior
Page should save. This used to work on an older version of peak.

Screenshots

When you go to live preview in this example, I have created two link blocks, You can see the two link blocks, but there is a third block (the first one on the left), with no populated fields. Probably reason for the error, but all fields have been filled. I couldn't work out where in your code this is coming from

Desktop (please complete the following information):

• OS: Xubuntu
  chrome and firefox

Additional context
This works fine on an old version of peak, but I don't know what version. Happy to dig this information down if it helps.

Edit Link

One of the things I have in my Craft CMS default is an "Edit" link that opens the current page for editing in the control panel.

If you are logged in have the correct privileges it's a very useful snippet to have in almost any default setup. There are a number of ways to integrate something like this such that it doesn't interfere with the layout.

github oauth token issue, only with Peak

Describe the bug

In BaseIO.php line 104:

  Your github oauth token for github.com contains invalid characters: "<TOKEN>"

Installing Statamic and choosing "Peak" as the starter, I get this error every attempted install.

tailwindcss class "text-right" not in site.css

Describe the bug
tailwindcss class "text-right" not in site.css

To Reproduce
Steps to reproduce the behavior:

1. npm install && npm run dev
2. view public/css/site.css
3. search for text-right
4. See it does not exist

Expected behavior
I expected to have access to tailwind CSS classes. text-left and text-center do exist.

I tried this solution and saw no change. #110

Restrict some settings to admin only

If natively possible in v3, restrict some settings. Probably by adding another global and not giving editors access by default.

Candidates:

• Trackers / cookie bar
• ...

DynamicToken issue

Describe the bug
The check of starts_with on https://github.com/studio1902/statamic-peak/blob/main/app/Http/Controllers/DynamicToken.php#L20 does not take non-www urls in account.

To Reproduce
Steps to reproduce the behavior:

Set app url to https://www.site.tld
Visit the form with https://site.tld
You will see the starts_with does not match.

Expected behavior

It should take www. and non www. urls in account.
Should only check on site.tld and not https, http and www.

Add basic contact form with e-mail template

Contact form with:

• Name
• E-mail
• Message
• Localization

E-mail template with basic HTML styling.

Display Tailwind screen size on development enviroment

Using example by @pryley: https://gist.github.com/pryley/426a57958223a76ddc49fa7f751a2751#file-debug-css

Add an unstyled multi-level responsive navigation

Basic navigation with drop down, aria labels, alpine interativity and fallback to overlay navigation on mobile with a toggle.

Disable Search Button When Input is Empty

I know this is probably outside the scope of what you want to be providing with Peak, but since you are including a search field... :)

The issue is that due to the specific pattern invoked users can also interpret the search icon as a button for closing the input field, which is modal. It is also placed directly under the cursor when opened, so accidental input and absorbing clicks is also a risk.

The solution is for empty search submissions to be disabled... not allowed, until users enter text. Then if they click a second time the input would be closed instead of submitting an empty search.

bug: S3 config endpoint vs url

I spent hours trying to figure out why my S3 assets were working. I finally figured out its because I was using endpoint instead of url in the confits.

Peak has the wrong variables set in the filesystems.php config file:

statamic-peak/config/filesystems.php

Line 64 in 7cb1741

'endpoint' => env('AWS_URL'),

It should be:
'url' => env('AWS_URL'),

Here is what L8 has:
https://github.com/laravel/laravel/blob/866589128430c55385cb13ddae0061c628245be2/config/filesystems.php#L51

Combine global blueprints into a single tabbed "Settings" blueprint

Hope you don't mind me putting this here instead of making a pull request, still pushing through this deadline.

sections:
  general:
    display: General
    fields:
      -
        handle: address
        field:
          type: textarea
          localizable: false
          listable: hidden
          display: Address
      -
        handle: business_hours
        field:
          input_type: text
          type: text
          localizable: false
          listable: hidden
          display: 'Business Hours'
      -
        handle: contact_sections
        field:
          sets:
            section:
              display: 'Contact Section'
              fields:
                -
                  import: contact_section
          type: replicator
          localizable: false
          listable: hidden
          display: 'Contact Sections'
  social_media:
    display: 'Social Media'
    fields:
      -
        handle: social_media
        field:
          sets:
            facebook:
              display: Facebook
              fields:
                -
                  import: social_media
            instagram:
              display: Instagram
              fields:
                -
                  import: social_media
            linkedin:
              display: LinkedIn
              fields:
                -
                  import: social_media
            twitter:
              display: Twitter
              fields:
                -
                  import: social_media
            vimeo:
              display: Vimeo
              fields:
                -
                  import: social_media
            youtube:
              display: YouTube
              fields:
                -
                  import: social_media
          type: replicator
          localizable: false
          listable: hidden
          display: 'Social Media'
  error_messages:
    display: 'Error Messages'
    fields:
      -
        handle: error_messages
        field:
          sets:
            error_301:
              display: 'Error 301'
              fields:
                -
                  import: error_message
            error_404:
              display: 'Error 404'
              fields:
                -
                  import: error_message
          type: replicator
          localizable: false
          listable: hidden
          display: 'Error Messages'

Exception: Fieldset seo not found

Describe the bug
When installing Peak via the CLI and picking the Peak starter kit from the list of options, the SEO fieldset was not found. I confirmed that by navigating to the resources/fieldsets directory and saw that there was indeed no seo.yaml file when there should have been.

To Reproduce
Steps to reproduce the behavior:

1. Install Peak using CLI
2. Navigate to website
3. See error

Then I installed Peak using the manual method by cloning the repo, everything worked as expected.

I've attached a screenshot of the Ignition error page from the CLI install.

Screenshots

Thanks
Eric

Basic redirects

A basic redirect feature for clients.

env() should only be used inside config files

See: https://laravel.com/docs/master/helpers#method-env

Tailwind CSS Jit Compiler

Would you like me to submit a PR that adds the new Tailwind CSS Jit compiler to Peak?

https://blog.tailwindcss.com/just-in-time-the-next-generation-of-tailwind-css

I already have a working version.

Split form fields from main form template

Is your feature request related to a problem? Please describe.
Currently there's a lot of functionality placed in form.antlers.html that needs to be replicated when a certain from needs deviating styling.

Describe the solution you'd like

I propose moving the fields, submit button and success message into a sub-partial called form_fields.antlers.html and referencing this in form.antlers.html (excerpt):

        <div class="w-full">
            {{# Honeypot spam protection. #}}
            <div class="hidden">
                <label class="font-bold" for="{{ honeypot }}">{{ trans:strings.form_honeypot }} <sup class="text-yellow-400">*</sup></label>
                <input class="w-full form-input" id="{{ honeypot }}" type="text" name="{{ honeypot }}" tabindex="-1" autocomplete="off"/>
            </div>

            {{# render default-styled fields #}}
            {{ partial src="partials/form_fields" }}

        </div>

form_fields.antlers.html then contains the following:

{{ fields }}
    <div class="flex flex-col space-y-4">
        <label class="font-bold" for="{{ handle }}">{{ trans key="{display}" }} {{ if validate | contains:required }}<sup class="text-yellow-400">*</sup>{{ /if }}</label>
        {{# Load notification when there is a validation error with the name field. #}}
        <template x-if="errors.{{ handle }}">
            {{ partial src="partials/notification" type="error" attribute="x-text='errors.{handle}'" }}
        </template>
        {{ field }}
    </div>
{{ /fields }}

{{# Pulse button and disable upon sending. #}}
<div class="flex justify-end md:col-span-12">
    {{ partial src="partials/button" as="button" label="{ trans:strings.form_send }" attribute='x-bind:disabled="sending" x-bind:class="&#123;&#39;opacity-25 cursor-default&#39;: sending&#125;"' }}
</div>
<template x-if="success">
    {{ partial src="partials/notification" type="success" class="md:col-span-12" content="{trans:strings.form_success}" }}
</template>

This allows to create different styled partials for certain forms while keeping the main work load in a central place.

Describe alternatives you've considered
–

Additional context
I've got a form that needs special visual treatment, but should use the same AJAX logic which I didn't want to duplicate, so I moved stuff into partials and loaded the correct fields partial depending on the form handle:

How can I make border-color work?

When I insert a colored border, it always shows black.
E.g:

<div class="border-2 border-red-500">test</div>

The red border here is still black.

Using multisite command creates Error

Describe the bug
Doing the multisite setup from CLI will run into an error

To Reproduce
Steps to reproduce the behavior:

1. checkout peak
2. cp .env.example .env
3. php artisan key:generate
4. php please multisite

Expected behavior
No error occurs

Screenshots

The current site handle is [default], content will be moved into folders with this name. Is this okay? (yes/no) [no]:
 > yes

 Handle of the second site [two]:
 > 

Clearing Stache...
[✓] Stache cleared.

Converting...
[✓] Collection [pages] updated.
[✓] Global [configuration] updated.

   Error 

  Call to a member function in() on null

  at app/Listeners/GenerateFavicons.php:31
     27▕      * @return void
     28▕      */
     29▕     public function handle(GlobalSetSaved $event)
     30▕     {
  ➜  31▕         if ($event->globals->handle() !== 'favicons' || !GlobalSet::findByHandle('favicons')->in('default')->get('use')) {
     32▕             return;
     33▕         }
     34▕ 
     35▕         $svg = GlobalSet::findByHandle('favicons')->in('default')->get('svg');

      +43 vendor frames 
  44  please:37
      Illuminate\Foundation\Console\Kernel::handle()

Additional context
Run in an Ubuntu 20.10, PHP 7.4

Documentation suggestions

To gain a better understanding of Peak's features I just manually added all its features into an existing Statamic site and stumbled over two things in Configuration Changes:

• the command to warm the caches is mentioned to be added to routes/console.php yet it's to be found in app/Console/Commands/WarmCommand.php
• It would have helped me if the assets container favicons was documented here (only other way to find this through documentation is implicitly within the favicon section, which mentions you need to delete said container if you don't want to use the feature at all)

Form's ID attribute should be unique

Describe the bug
Having multiple forms on a single page produces invalid HTML, as each of them receives id="form" (set in forms.antlers.html

To Reproduce
Steps to reproduce the behavior:

1. Create a first form
2. Create a second form
3. Place both in one page (e.g. using page builder)
4. Check rendered markup

Expected behavior
The id attribute of each form should be unique, e.g. by appending the forms name (though one could still place the same form multiple times on the same page I don't see any case where this would make sense).

Fluid font-size

Hey guys,

I love your super handy theme. Small question about the fluid typography configuration:

Shouldn't these values be the same?

https://github.com/studio1902/statamic-peak/blob/main/tailwind.config.js#L278
https://github.com/studio1902/statamic-peak/blob/main/tailwind.config.js#L295

Thanks!
Willem

SEO Snippet preview

A Vue field that shows a search engine snippet preview with title and meta description. Together with @philipboomy.

Cookie banner

Full blown cookie banner with automatic default styling coming from the brand Tailwind config.
Don't load all tracking crap without the users consent.

Add a partial for responsive background images with WebP and fallback

Set timezone and date formatting back to Laravel defaults

Add more common (unstyled) content blocks

• Link blocks: title, text, image, button
• Call to action: title, text, button

Error Saving Favicon

When I try to add an SVG, I get the following error:

ImagickException(code: 420): no decode delegate for this image format

Let me know if you need the entire stracktrace.

GitHub will not let me upload an SVG, but this is the code for the SVG:

<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path d="M12 14l9-5-9-5-9 5 9 5z" />
  <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
</svg>

I have tried several different SVGs, all with the same result.

I am using Laravel Homestead, which has ImageMagick 6.9.7-4 installed.

Add a basic (empty) view model example