Hello CodeWorks developer!
Welcome to the official MetaScale frontend framework, built by CodeWorks on top of Nuxt 3.
From this page you can discover and test the main components of the framework.
Keep in mind that this boilerplate already supports multiple types of pre-configured products. Set the projectType variable in nuxt.config.json to get the appropriate setup for the project you want to build. Note that setting the variable alone is not enough. Once you’ve done that, you need to manually move the files from the *_template folders.
For example, to set up a project of type WEBSITE, you need to move everything from pages_template, server_template, etc., directly into the corresponding pages and server directories, preserving the same folder structure.
If you come across folders named something like website+website_prisma, it means that, in addition to that folder, you also need to move the files from the website folder.
Global animations
This framework supports global animations. This means you can apply animations to elements simply by adding the attributes data-animate="true" and data-animation="ANIMATION_NAME". Various types of animations are supported, including slide-in, scale-up, fade-in, and others. The full list is available in the assets/css/animations.css file.
To display an element without an initial animation, set the attribute data-animated="true"; in this case, the element will animate only the second time it enters the viewport.
Global properties
To speed up development, several global properties are already available. For example, by setting the attribute data-clickable="true", a click effect is automatically applied to the element. Similarly, applying "disabled" makes an element behave as disabled by reducing its opacity and disabling click interactions.
Refer to assets/css/main.css for the full list of available properties.
Automatic image compression and resizing
To speed up image loading, this framework automatically resizes and compresses in webp images uploaded to the public folder. Simply upload an image, and a resized version in the format *_min.webp will be generated.
If you want to prevent resizing, just include the word _min in the image’s filename from the beginning.
Maximum image size and compression quality can be customized in the .env file.
Automatic translations
To manage multilingual projects, it’s possible to automatically translate the i18n translation files for languages other than the default one. Missing translations are filled in automatically without modifying existing ones.
To proceed, simply configure the OPENAI_API_KEY parameter in the environment file, then navigate to the /i18n path. From there, by specifying the target language, you can apply translations to the others.
Built-in markdown parsing
The H and P components support automatic Markdown parsing when the text is passed via the :text property.
Note: in order to properly pass newlines in i18n, the newline character must be duple escaped: \\n.
This is an example of a paragraph with bold text and italic text.
And a newline
Built-in SEO
On any page, you can call the useSeo(PAGE_NAME) component to automatically set all the necessary metadata for SEO (meta title, meta description) and for social media sharing, such as og:image, which will be generated dynamically based on the page’s name and description.
For each PAGE_NAME passed, the corresponding translations for PAGE_NAME.meta.title and PAGE_NAME.meta.description must be defined within the i18n files.
Finally, the sitemap and the corresponding robots file will be automatically generated for the entire site.
Style guidelines
- Always use Tailwind CSS classes inline for styling elements, and at the same time, add a data-name attribute to each element to make it easily identifiable.
- Always use wrapper components for HTML tags when available. For example, use the
Hcomponent for headers,Pfor paragraphs, and so on. - Always use MetaScale components for common elements such as buttons, inputs, checkboxes, etc.
Strapi integration
MetaScale includes native integration with the Strapi CMS, allowing you to embed its content with just a single line of code. Visit the /strapi section of the website pages to see how the code is implemented.
Note: for dynamic content, such as text containing images and similar elements, you must always use Strapi’s BlocksContents type and parse it with the StrapiBlocks component. Never crate any new custom parser.
Components playground
The following section of the page contains a list of the main components available in the framework.
Img
Icon
TextInput
This is a text input
Outlined TextInput
Underlined TextInput
Date TextInput
DATE IS:
TextInput with error
This field is required!
TextInput with options
TextArea
Outlined TextArea
Underlined TextArea
TextArea with error
This field is required!
Button
Important: for SEO reasons, only use the isFormButton: true property if the button is inside form tags.
Checkbox
SwitchOn Checkbox
Select
RangePicker
DATE IS: From - to -
Accordion
This is the accordion title
Navigation Tabs
Modal
Dialog
Show error dialog Show warning dialogPinia
Value from pinia store: 0ListCard
Work in progress notice
I am a different text!
No results notice
Pagination
ImageInput
DropZone file input
Drop file here
Drag and drop your file here