Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make breakpoint preview work #8

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Make breakpoint preview work #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d75aebd
adds postcss plugin for breakpoint preview
ValJed Nov 19, 2024
8bfe410
adds postcss config with plugin
ValJed Nov 19, 2024
a9df91d
updates readme
ValJed Nov 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,11 @@ Astro.

Please see the [`@apostrophecms/apostrophe-astro`](https://github.com/apostrophecms/apostrophe-astro) documentation
for complete information about how to get started with this project.

## Postcss plugin

As you can see, there is a postcss config adding one plugin.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
As you can see, there is a postcss config adding one plugin.
As you can see, there is a postcss config adding one plugin.

The ApostropheCMS breakpoint preview feature allows you to preview how your site appears on different devices by generating temporary CSS for media queries. This functionality relies on a PostCSS plugin. While you can customize the postcss.config.js file for your project, ensure this plugin remains included to maintain proper functionality of the feature.

This is a needed plugin to make the apostrophe breakpoint preview working.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"This plugin is needed to make the apostrophe breakpoint preview feature work with Astro."

This is the feature that shows you how your site looks like on different device sizes,
if you don't need this feature you can remove the plugin.

10 changes: 10 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,8 @@
"astro": "^4.0.0",
"dayjs": "^1.11.10",
"vite": "^5.0.7"
},
"devDependencies": {
"postcss-viewport-to-container-toggle": "^1.0.0"
}
}
13 changes: 13 additions & 0 deletions postcss.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import postcssViewportToContainerToggle from 'postcss-viewport-to-container-toggle';

export default {
// Is the site still editable in production like a normal Apos Site,
// if yes we need the plugin for all builds
plugins: [
postcssViewportToContainerToggle({
modifierAttr: 'data-breakpoint-preview-mode',
debug: false,
transform: null
})
]
}