Code Monkey home page Code Monkey logo

themeclean-flex's Introduction

Maven Project generated from Maven Archetype

Introduction

This project was created by the Sling Project Maven Archetype which created two modules:

  1. core: OSGi Bundle deployed to Sling which includes your Servlets, Filters, Sling Models and much more. This module is not intended to contain Sling Content.
  2. ui.apps: JCR Content Module which is used to install a JCR Package into Sling by using Composum. For that it must be installed and the Composum Package Manager must be whitelisted.

There are also two modules which provide some examples; these have the same name as above but with an extension .example. These modules should not be deployed, they are examples for you to use in creating your own core or ui.apps modules.

The structure of both modules are the same and so copying them over just be quite simple.

Attention:

Due to the way Apache Maven Archetypes work both example modules are added to the parent POM's module list. Please remove them after you created your own to avoid the installation of these modules into Sling. At the end of the parent POM you will find the lines below. Remove the lines with core.example and ui.apps.example.

<modules>
    <module>core</module>
    <module>core.example</module>
    <module>ui.apps</module>
    <module>ui.apps.example</module>
</modules>

Why a JCR Package instead of a Content Bundle

There are several reasons to use a JCR Package instead of a Content Bundle but the most important reason is that a JCR Package allows the Sling Tooling to update a single file rather than an entire Bundle and also to import a Node from Sling into the project.

Build and Installation

The project is built quite simple:

mvn clean install

To install the OSGi bundle use the project autoInstallBundle:

mvn clean install -P autoInstallBundle

To install the Content together with the core bundle use the project autoInstallPackage:

mvn clean install -P autoInstallPackage
ATTENTION

It is probably best to not deploy the OSGi Bundle alone as this may lead to conflicts with the package deployment.

In case of a mishap the package and bundles need to deinstalled manually:

  1. Remove /apps/${appsFolderName}/install folder
  2. Uninstall the package using the package manager
  3. Remove the package from /etc/packages including the snapshots if they are still there
  4. Remove the Bundle using the OSGi Console (/system/console/bundles)

License

Apache-2.0

themeclean-flex's People

Contributors

bkheadwire avatar dependabot[bot] avatar dna113p avatar flx-sta avatar gastongonzalez avatar golinski avatar polished85 avatar qial avatar reggie7 avatar renestalder avatar reusr1 avatar rubenreusser avatar schaefa avatar smcgrath0 avatar tml avatar

Stargazers

avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Forkers

achouhans tsaurabh74 swapnilmmane dna113p hotwax solutas rogerblanton meta-proc mckeehanheadwire schaefa nothingag renestalder smcgrath0 qial tml kestrel-1 cmrockwell khrizenriquez gaohangdy golinski orx0815

themeclean-flex's Issues

Tracking authoring feature requests

  • background with overlay gradient
  • gradient direction
  • color pickers should support theme colors
  • transition effects
  • scroll position based effects
  • author currently has no control over mobile styling

Tabs: New tabs aren't showing up

Steps to reproduce:

  1. Add the tabs component to the page
  2. Add a new tab
  3. Fill out the tab title and test

Expected result:
Should see the new tab

Actual result:
Only 3 original tabs appear
01-notab4

Unify color dialogs

Currently the color choice dialogs are inconsistent.

For example,

Menu buttons and links allow you to choose from a limited list of colors, while icons use a specific color.
Buttons can be set individually while icon color is set as a group.
How should we handle hover colors for icons/links/buttons

move sample images to subfolder

all sample images should be in a subfolder (/content/assets/themecleanflex/samples) for easy removal and not to clobber the root of assets for a site.

Accordion: Image continues to display when media type is changed to video

Steps to reproduce:

  1. Add accordion component to page
  2. Enable "Show Media"
  3. Select "Image" for media type
  4. Choose an image asset for the image source
    01-image
  5. Change the media type to "Video"
    02-video

Expected result:
The image should not display with the "video" media type chosen

Actual result:
The image continues to appear even though a video with no source is selected

Tabs: Tabs wrap awkwardly at mobile width

Steps to reproduce:

  1. Add the tabs component to the page
  2. Switch to mobile view

Expected result:
Tabs should all be on the same row

Actual result:
Third tab wraps onto a new line
02-tabsmobile

Accordion: Icons display name instead of icon

Steps to reproduce:

  1. Add the accordion component
  2. Enable "show media"
  3. Choose "icon" as the media type
  4. Select an icon
    03-iconmissing

Expected result:
The icon should appear on the page

Actual result:
The icon's name is displayed as text instead

Incorrect service worker defined when site uses the themeclean-flex template

Overview

While running a Chrome audit on https://blog.gastongonzalez.com/content/sites/gastongonzalez/2019/6/26/deploying-a-bare-metal-kubernetes-cluster-with-vagrant-and-virtualbox.html, I noticed that the service worker is misconfigured.

Does not register a service worker that controls page and start_url
This page is controlled by a service worker, however the start_url ("https://blog.gastongonzalez.com/content/sites/themecleanflex/index.html") is not in the service worker's scope ("https://blog.gastongonzalez.com/content/sites/gastongonzalez/").

This demo site (https://blog.gastongonzalez.com) was created using the themeclean-flex template.

Steps to Reproduce

  1. Create a site and use the themeclean-flex template.
  2. Launch Chrome Web Developer Tools > Audit. Run an audit with the defaults.
  3. Once the audit is complete, scroll down to the Progressive Web App section.

Actual Behavior
start_url points to themeclean-flex site.

Expected Behavior
start_url should point to the actual site / tenant.

FYI: @reusr1 and @dna113p

Teaser Button Alignment

Buttons in the teaser are padded and they do not line up well with the edge of the container and text when left or right aligned

Teaser Horizontal - Button Alignment action elicits no results

In Teaser Horizontal only, toggling Button Alignment elicits no results. And Content Align only aligns the text either left or right, but doesn't relocate the buttons to either side of the text.

Steps to Reproduce:

  1. Create page
  2. Drag Teaser Horizontal component over to container
  3. Under Align Content, select "Right"
  4. Note that content realigns to the right, but buttons remain unmoved
  5. Move down and select "Right" under Button Side
  6. Buttons don't move

Expectations:

  1. If text/content is realigned to the right, buttons should swap to left
  2. If buttons are aligned using the radial select, then they should change alignment

Improve Samples for component library

The component library could use improved samples so that you can quickly see what the different variations of each component can look like like.

  • Social Icons

Accordion: Text is cut off in mobile view

Steps to reproduce:

  1. Add accordion component to page
  2. Change view to mobile

Expected result:
Accordion should stretch vertically to allow all text to display

Actual result:
Text is cut off within the accordion segments
01-mobilecutoff

add tag component

we should have a component that can display the current set of tags assigned to a page with a possible tag landing page.

fields:
label
location of the landing page

each tag should render it's name and if a landing page is configured a link to the landing page followed by /tagpath

Code Block Component - Feature Request

Hi All,

I maintain a technical blog and I'm in the process of migrating it off a hosted solution to Peregrine. A large portion of the content consists of code listings, sample files and command line instructions. Is there interest in the Peregrine community for a code block component with the following features?

  • Syntax highlighting
  • Line numbering
  • Copy to clipboard

Up until this point, I have just been using a simple <code> element with basic CSS.

I discovered Prism as a potential client library for a robust code block component. Obviously, the solution that is used to implement this feature should aim for performance and be as lightweight as possible.

Any feedback is welcome.

Accordion: Asset browsers for media do not filter by type

Steps to reproduce:

  1. Add the accordion component
  2. Enable "show media"
  3. Choose an asset with the asset browser

Expected result:
Selectable assets should be limited to match the type chosen for media type, e.g. only images for the image media type.

Actual result:
Any kind of asset can be chosen.

Block component background position

Currently the background image covers the whole block and is centered, sometimes it is necessary to display a background image off center.

Cards: Cards per row lets you exceed max value

Steps to reproduce:

  1. Add cards component
  2. Set the cards per row value to 7

Expected result:
Editor should stop you from choosing an out-of-range value

Actual result:
Out-of-range value is allowed and component turns into one big stretched card

Cards: "Cards per Row" behaves unexpectedly for tablet/mobile widths

This may not be a bug so much as an issue of expectations. Maybe there should be a way to set different values for certain fields for each breakpoint?

Steps to reproduce:

  1. Add the cards component to the page
  2. Change to tablet view/mobile view

Expected result:
Number of cards matches cards per row value

Actual result:
Mobile view: only one card per row no matter what
Tablet view: 2 cards shown when CPR=3, 3 cards shown when CPR=4, etc.

Notes Component

Overview

In order to support the creation of technical articles within Peregrine, a component for dealing with notes, warnings, tips, etc. should be created.

The component shall support the following rendering views as a drop down selection:

  • Note
  • Tip
  • Important
  • Caution
  • Warning

The Docbook publishing world uses the following rules to govern their use:

  • Note: Information the user should be aware of, but is peripheral to the actual task being described.
  • Tip: When you're giving a hint to make things easier or more productive for the reader.
  • Important: When there is no danger of data loss, but you wish to make clear to the reader a consequence that isn't immediately obvious (e.g. when changing the font for one instance of a program also changes the default setting, and this isn't clear from the GUI.)
  • Caution: A note of caution. Use this for example when the reader may lose easily recovered or replaceable information (e.g. user settings), or when they could cause data loss if they don't correctly follow the procedure being outlined.
  • Warning: Use warning when data loss could occur if you follow the procedure being described.

Example UI Styles

The following are a few examples of potential UI treatments. (I have no opinion on what these look like).

FYI: @ehdatheadwire

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.