studio1902 / statamic-peak Goto Github PK
View Code? Open in Web Editor NEWStatamic Peak is an opinionated starter kit for all your Statamic sites.
License: GNU General Public License v3.0
Statamic Peak is an opinionated starter kit for all your Statamic sites.
License: GNU General Public License v3.0
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
Additional context
It could be there for a reason and I just don't know why because I'm new to the typo plugin...
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.
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.
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).
Describe the bug
tailwindcss class "text-right" not in site.css
To Reproduce
Steps to reproduce the behavior:
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
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?
A Vue field that shows a search engine snippet preview with title and meta description. Together with @philipboomy.
Enhancement request: Basic SEO / Website Information
Probably best as a global config option.
I suggest the following things be included:
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
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:
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):
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.
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:
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
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.
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:
routes/console.php
yet it's to be found in app/Console/Commands/WarmCommand.php
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)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="{'opacity-25 cursor-default': sending}"' }}
</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:
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?
Describe the bug
Doing the multisite setup from CLI will run into an error
To Reproduce
Steps to reproduce the behavior:
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
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?
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.
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.
Auto generate favicons. Together with @austriker27.
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
It should be:
'url' => env('AWS_URL'),
Here is what L8 has:
https://github.com/laravel/laravel/blob/866589128430c55385cb13ddae0061c628245be2/config/filesystems.php#L51
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
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?
If natively possible in v3, restrict some settings. Probably by adding another global and not giving editors access by default.
Candidates:
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.
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:
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).
A basic redirect feature for clients.
Not getting the classes on the HTML tag.
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'
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
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.
Show how to use those globals together with some icons.
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.
Full blown cookie banner with automatic default styling coming from the brand Tailwind config.
Don't load all tracking crap without the users consent.
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?
Contact form with:
E-mail template with basic HTML styling.
Basic navigation with drop down, aria labels, alpine interativity and fallback to overlay navigation on mobile with a toggle.
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.
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.
Add a basic implementation of Statamic search. Off by default. Easy to include.
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
Add a partial to easily add pagination to a page.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.