Skip to content

Commit

Permalink
[TASK] Prepare Release
Browse files Browse the repository at this point in the history
  • Loading branch information
@SamBrishes
SamBrishes committed Aug 21, 2022
1 parent c86022a commit 56d293c
Show file tree
Hide file tree
Showing 4 changed files with 177 additions and 21 deletions.
192 changes: 173 additions & 19 deletions DOCUMENTATION.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,56 @@
NewsHub - Documentation
=======================

Important Notes
---------------

- The `{% framework extras %}` tag is currently unsupported (we're working on a solution).
- We're currently working on a solution to configure the available Sidebars using an interface.


Features
--------

### Menu Positions
The **NewsHub** OctoberCMS template currently supports 4 menu positions:

- `main-menu`, supports up to 3-levels
- `footer-menu-1`, uses the assigned `Name` as header
- `footer-menu-2`, uses the assigned `Name` as header
- `social-menu`, supports icons using the `Code` attribute

### Custom Meta
The **NewsHub** OctoberCMS template currently supports 4 custom meta values:

- `Simple Title` - Custom title, shown on the Hero Slider
- `Simple Subtitle` - Custom subtitle, shown together with the title on the Hero Slider
- `Post Layout` - Allows to change the used Post Layout
- `Featured Images View` - Allows to change how the featured images are shown on the post

### Theme Settings

- **Site Name** - The website name as it should appear on the front-end.
- **Site Logo** - Use your logo instead of the the site name (height should not exceed 40 pixels).
- **Inverted Site Logo** - A color-inverted version of your site logo, used for the dark color scheme.
- **Use Demonstration Content** - Use the demonstration content for empty template sections.
- **Use Dark Color Scheme** - Use the dark color scheme as default one.
- **Show Dark Header** - Show a dark header and hero section, regardless of the used color scheme.
- **Show Dark Footer** - Show a dark footer section, regardless of the used color scheme.
- **Color Palette** - Allows to configure the whole Bootstrap color palette.
- **Use Sticky Header** - Shows the header always on top of the viewport, when the user scrolls down.
- **Show Color Switch** - Shows an additional color switch button to change the applied color scheme.
- **Show Languages Menu** - Shows an additional button to switch to a different website language.
- **Show Hero Slider** - Shows a Hero Slider on the homepage.
- **Show View Counter** - Shows a small View Counter Badge above the Post thumbnail.
- **Date/Time Format** - Allows to override the shown Date/Time strings.
- **Short Date/Time Format** - Allows to override the shown Date/Time strings.
- **Show Color Switch** - Shows an additional color switch button to change the applied color scheme.
- **Show Languages Menu** - Shows an additional button to switch to a different website language.
- **Show Scroll-To-Top Button** - Shows an scroll-to-top button after the user scrolled for a specific amount.
- **Left Copyright Text** - Change the text of the left-aligned Copyright Footer. (Supports Markdown)
- **Right Copyright Text** - Change the text of the right-aligned Copyright Footer. (Supports Markdown)


CMS Layouts
-----------

Expand All @@ -10,28 +60,26 @@ CMS files itself and two, which are designed / configured for the RainLab.Pages
### default.htm
The default layout is used on all CMS pages. It initializes a few components to create the required
template variables and values all over the website itself. Next to the components, you will also
find the basic OctoberCMS templates, such as `{% styles %}`, `{% scripts %}` and `{% framework %}`.
find the basic OctoberCMS markups, such as `{% styles %}`, `{% scripts %}` and `{% framework %}`.

All `<head>` related tags has been exported to the `page/meta` partial (see below), to reduce the
ammount of duplicated code (DRY) and to easily maintain the respective content. The `<body>` tag
receives a few available details with which you can apply custom stylings for a specific page id,
layout or color scheme. You can also provide the additional this argument `bodyClasses` to add
additional class names to the `<body>` tag.
receives additional classnames, such as the page id, layout and currently applied color scheme. You
can also provide own class names using the `bodyClasses` this argument on the respective CMS page.

The first JavaScript, inside the body, replaces the `no-js` class name from the `<html>` tag, this
The first JavaScript, inside the body, removes the `no-js` class name from the `<html>` tag, this
is really useful when you need to know if the current client has an enabled JS environment or not.

**Attention**: It is currently NOT possible to include the `{% framework extras %}` stuff, due to
the bootstrap JavaScript components. We're currently working on a solution for this issue.

the Bootstrap JavaScript components. We're currently working on a solution for this issue.

### page-default.htm
The default page layout is one of two available layouts for the [RainLab.Pages](https://octobercms.com/plugin/rainlab-pages)
plugin. It does the same as the `default.html` layout, but adapts the main content area to fit the
RainLab.Pages extension. However, this way an additional breadcrumb (see below) will be added next
to an own sidebar (also below under 'Partials'). The page sidebar currently only supports a
table-of-contents container (requires at least one header in the content area). More informations
about the TOC can be found below under "Features".
about the TOC can be found below.

### page-fullwidth.htm
The default page layout is the second of two available layouts for the [RainLab.Pages](https://octobercms.com/plugin/rainlab-pages)
Expand Down Expand Up @@ -132,42 +180,154 @@ CMS Partials

### double-click.htm

The Double-Click Partial allows to easily embed external content on CMS pages using a GDPR friendly
overlay and a small JavaScript snippets which replaces the external content on click. This element
accepted 4 arguments: A title, description, button text and the external content itself, you can
use this partial as follows:

```
{% set media %}
<!-- Your Iframe or other external content -->
{% endset %}
{% partial "double-click"
external_content=media
privacy_title="Custom Title"
privacy_description="Custom Description"
privacy_button_label="Custom Button"
%}
```

The Double-Click partial is currently only supported on own CMS Pages itself, we're working on a
solution to bring this element to the RainLab.Pages and RainLab.Blog extensions as well.

### example.htm

The Example Partial is used on the documentation CMS pages and simple implements a small card
element, with a preview and code section (as known from the bootstrap documentation). The example
partial supports 2 arguments: 'content' - which contains the respective content you wanna use and
'preview' - which allows you to override the rendered preview. When 'preview' isn't passed, the
'content' argument will be used instead.

```
{% set content %}
<p class="h1 mb-3">h1. Heading</p>
<p class="h2 mb-3">h2. Heading</p>
<p class="h3 mb-3">h3. Heading</p>
<p class="h4 mb-3">h4. Heading</p>
<p class="h5 mb-3">h5. Heading</p>
<p class="h6 mb-3">h6. Heading</p>
{% endset %}
{% partial 'example' content=content %}
```

### blog/post-single.htm
The blog / Single Post partial is one of three post layouts. It includes the main and sidebar
area, which itself contains the assigned blog categories, popular tags and next / prev buttons.
The bottom of the main container lists related or random posts.

### blog/post-single-fullwidth.htm
The blog / Fullwidth Post partial is the second of three post layouts. It works similar as the
default one, but shows the sidebar below the article content, before the related or random posts
widget is shown.

### blog/post-single-heroimage.htm
The blog / Hero Image partial embeds the first featured image as full-page hero image, followed by
the content in the same layout as blog / Single Post.

### blog/components/button.htm
The blog / components / Button partial embeds the previous and / or next blog post of the same
category in a condensed way. This partial is used on the post sidebar.

### blog/components/carousel.htm
The blog / components / Carousel partial embeds the featured images (except the first one) in an
Bootstrap Carousel on bottom of the post content. This partial can be selected on each post, under
"Appearance" > "Featured Images View". Alternatively, you can also use the Gallery Partial.

### blog/components/gallery.htm
The blog / components / Gallery partial embeds the featured images (except the first one) in an
Gallery-styled way using a Bootstrap Lightbox on bottom of the post content. This partial can be
selected on each post, under "Appearance" > "Featured Images View". Alternatively, you can also
select the Carousel Partial there.

### blog/components/pagination.htm
The blog / components / Pagination partial embeds a pagination element on each archive CMS page.
This partial allows to override the target page (used for the pagination links) by passing the
additional `target` argument, otherwise the current page is used.

### blog/sections/post-columns.htm
The blog / sections / Post Columns partial embeds the passed posts in a row-based way, showing
the thumbnail, title, meta and excerpt in this order. The **NewsHub** template reduces the amount
of posts to three, but of course you can pass as many posts as you would like.

### blog/sections/post-condensed.htm
The blog / sections / Post Condensed partial embeds the passed posts in a small column-based way
using a really small thumbnail and the post title only. It is used on the homepage under "Popular
Articles", a similar styling is also used on the single post page (see blog/components/button.htm).

### blog/sections/post-list.htm
The blog / sections / Post List partial embeds the default column-based posts list, as shown on all
archive pages and on the homepage itself.

### colorpicker/default.htm
The Colorpicker partial provides the color-picker button on the header and / or footer. You can
configure the shown position on the Theme Settings page..

### demo/footer-menu-1-content.htm
### demo/footer-menu-2-content.htm
### demo/hero-slider-content.htm
### demo/main-nav-content.htm
### demo/social-nav-content.htm
### demo/*
The demo folder contains the demonstration content, used for empty template sections. You can
delete this folder without breaking anything or disable the use of this files in the theme settings.

### icons/bootstrap/*
The icons / Bootstrap folder contains all Bootstrap Icons as `.htm` files. This allows you to embed
the respective files using the following syntax:

```
{% partial 'icons/bootstrap/<iconname>' %}
```

Embedding the Vector partials directly allows you to easily design the icons, especially it's size
and color, using CSS.

### icons/socials/*
The icons / Social folder contains nothing, but allows you to add additional social icons, used by
both social menus (header and footer), when the Bootstrap Icon set does not provide a respective
social icon.

### localepicker/default.htm
The LocalePicker partial overrides the default RainLab.Translate component view on the header and /
or footer. You can configure the shown position on the Theme Settings page.

### page/footer.htm
The page / Footer partial contains the whole footer section on the bottom of the website. This
includes the site name / site logo, all three menus and the Copyright text.

### page/header.htm
The page / Header partial contains the whole header section on the top of the website. This
includes the site name / site logo, the main and social menu.

### page/hero-slider.htm
The page / Hero Slider partial contains the Hero Section on the Homepage itself.

### page/meta.htm
The page / Meta partial contains all tags used with the `<head>` tags.

### sidebars/home.htm
The sidebars / Home partial contains the sidebar widgets as shown on the homepage. The current
template shows the Popular Articles, Category List and Popular Tags List in this order.

### sidebars/page.htm
The sidebars / Page partial contains the sidebar widgets of the single page layout. This currently
contains just a Table of Contents widget, future releases of the NewsHub Template may emebds more.

### sidebars/post.htm
The sidebars / Post partial contains all sidebar widgets as shown on the post pages. This currently
includes the assigned category list, the popoular tags list and the next / previous posts buttons
of the same post category.

### staticbreadcrumbs/default.htm
The Staticbreadcrumb partial overrides the Breadcrumbs component view of the RainLab.Pages plugin.
The current version of **NewsHub** embeds the Breadcrumbs only on pages created with RainLab.Pages.


CMS Resources
Expand All @@ -191,9 +351,3 @@ We separated the JavaScript and Stylesheet bundling for performance reasons, it
waiting 2 - 4 seconds until Rollup bundled both CSS and JS (yes 4 seconds are pain). I know it
is somehow possible to optimize the bundling process, but instead of wasting 4 hours to make
everything perfect I decided to just start 2 processes (in less then a minute).


Features
--------

### Table of Contents
2 changes: 2 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ OctoberCMS v2 / v3 using the latest Bootstrap 5.2 CSS and JS framework.

Features
--------
**Every buyer is welcome to contact us with additional feature or general improvement requests. If
these are feasible within the template or one of our extensions, we will be happy to implement them.**

- Bootstrap 5.2 with Bootstrap Icons (usable as partials)
- Fully Responsive (Mobile-First)
Expand Down
2 changes: 1 addition & 1 deletion lang/de/lang.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@

"option.sections.hero_area" => "Hero-Bereichseinstellungen",
"option.hero_slider.label" => "Hero-Slider anzeigen",
"option.hero_slider.comment" => "Zeigt einen Hero-Slider im Kopfbereich an",
"option.hero_slider.comment" => "Zeigt einen Hero-Slider im Kopfbereich an.",
"option.hero_slider_category.label" => "Hero-Slider Kategorie",
"option.hero_slider_category.comment" => "Wähle die Kateogrie dessen Beiträge im Hero-Slider angezeigt werden sollen.",

Expand Down
2 changes: 1 addition & 1 deletion lang/en/lang.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@

"option.sections.hero_area" => "Hero Area Settings",
"option.hero_slider.label" => "Show Hero Slider",
"option.hero_slider.comment" => "Shows a Hero Slider",
"option.hero_slider.comment" => "Shows a Hero Slider on the homepage.",
"option.hero_slider_category.label" => "Hero Slider Category",
"option.hero_slider_category.comment" => "Select the desired Hero Slider Category, from which the posts should be listed.",

Expand Down

0 comments on commit 56d293c

Please sign in to comment.