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

Website security #1742

Merged
merged 8 commits into from
Dec 3, 2020
Merged

Website security #1742

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2990eb8
website security
JohannesDoberer Nov 27, 2020
1cbb3aa
Update blog.html
JohannesDoberer Nov 29, 2020
c6c427b
reformatting link attributes
JohannesDoberer Nov 29, 2020
5e0c9ab
Merge branch 'master' into website-security
JohannesDoberer Nov 29, 2020
056a26c
Merge branch 'master' into website-security
UlianaMunich Nov 30, 2020
313a33b
suggestions
JohannesDoberer Nov 30, 2020
631e335
Merge branch 'master' into website-security
UlianaMunich Dec 1, 2020
7423b5a
Merge branch 'master' into website-security
JohannesDoberer Dec 3, 2020
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
139 changes: 75 additions & 64 deletions website/landingpage/dev/src/layouts/blog.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,82 +1,93 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>{{ title }} - Luigi Blog</title>
<meta name="description" content="{{ seoMetaDescription }}" />
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link
rel="icon"
type="image/png"
sizes="32x32"
href="/assets/img/favicon.png"
/>
<link rel="stylesheet" href="/assets/css/app.css" />
<title>{{ title }} - Luigi Blog</title>
<meta name="description" content="{{ seoMetaDescription }}" />

<link rel="alternate" title="Luigi Blog" type="application/json" href="/blog/feeds/feed.json" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="/blog/feeds/rss.xml" />
<atom:link href="/blog/feeds/atom.xml" rel="self" type="application/rss+xml" />
</head>
<body>
{{> header}}
<link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicon.png" />
<link rel="stylesheet" href="/assets/css/app.css" />

<div class="main-content">
<section>
<div class="row" id="stickyAnchor" data-something>
<div class="column small-12 medium-9">
{{#unlesspage 'overview'}}
<a href="/blog/overview" class="back-to-blog">Back to Blog</a>
{{/unlesspage}}
<link rel="alternate" title="Luigi Blog" type="application/json" href="/blog/feeds/feed.json" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="/blog/feeds/rss.xml" />
<atom:link href="/blog/feeds/atom.xml" rel="self" type="application/rss+xml" />
</head>

{{> body}}
</div>
<body>
{{> header}}

<div class="columns small-12 medium-3 right show-for-xlarge" data-sticky-container>
<div class="sticky" data-sticky data-margin-top="6" data-anchor="stickyAnchor">
{{#ifpage 'overview'}}
<a href="/blog/feeds/rss.xml" class="link-rss-feed" title="Show RSS Feed" target="_blank"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="rss" class="svg-inline--fa fa-rss fa-w-14 " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M128.081 415.959c0 35.369-28.672 64.041-64.041 64.041S0 451.328 0 415.959s28.672-64.041 64.041-64.041 64.04 28.673 64.04 64.041zm175.66 47.25c-8.354-154.6-132.185-278.587-286.95-286.95C7.656 175.765 0 183.105 0 192.253v48.069c0 8.415 6.49 15.472 14.887 16.018 111.832 7.284 201.473 96.702 208.772 208.772.547 8.397 7.604 14.887 16.018 14.887h48.069c9.149.001 16.489-7.655 15.995-16.79zm144.249.288C439.596 229.677 251.465 40.445 16.503 32.01 7.473 31.686 0 38.981 0 48.016v48.068c0 8.625 6.835 15.645 15.453 15.999 191.179 7.839 344.627 161.316 352.465 352.465.353 8.618 7.373 15.453 15.999 15.453h48.068c9.034-.001 16.329-7.474 16.005-16.504z"></path></svg></a>
{{/ifpage}}
<div class="main-content">
<section>
<div class="row" id="stickyAnchor" data-something>
<div class="column small-12 medium-9">
{{#unlesspage 'overview'}}
<a href="/blog/overview" class="back-to-blog">Back to Blog</a>
{{/unlesspage}}

<ul class="list-type-1 sticky-navigation">
<li><a href="https://docs.luigi-project.io">Read Documentation</a></li>
<li><a href="https://slack.luigi-project.io" target="_blank">Community</a></li>
<li><a href="https://docs.luigi-project.io/docs/getting-started">How to get started</a></li>
<li><a href="https://www.youtube.com/channel/UC5WsYsHapDlg2K3iXS4n4AQ" target="_blank">Our Youtube Channel</a></li>
<li><a href="https://twitter.com/luigiprojectio" target="_blank">Our Twitter Channel</a></li>
</ul>
</div>
</div>
{{> body}}
</div>
</section>

<div class="columns small-12 medium-3 right show-for-xlarge" data-sticky-container>
<div class="sticky" data-sticky data-margin-top="6" data-anchor="stickyAnchor">
{{#ifpage 'overview'}}
<a href="/blog/feeds/rss.xml" target="_blank" rel="noopener noreferrer" class="link-rss-feed"
title="Show RSS Feed">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="rss"
class="svg-inline--fa fa-rss fa-w-14 " role="img" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512">
<path fill="currentColor"
d="M128.081 415.959c0 35.369-28.672 64.041-64.041 64.041S0 451.328 0 415.959s28.672-64.041 64.041-64.041 64.04 28.673 64.04 64.041zm175.66 47.25c-8.354-154.6-132.185-278.587-286.95-286.95C7.656 175.765 0 183.105 0 192.253v48.069c0 8.415 6.49 15.472 14.887 16.018 111.832 7.284 201.473 96.702 208.772 208.772.547 8.397 7.604 14.887 16.018 14.887h48.069c9.149.001 16.489-7.655 15.995-16.79zm144.249.288C439.596 229.677 251.465 40.445 16.503 32.01 7.473 31.686 0 38.981 0 48.016v48.068c0 8.625 6.835 15.645 15.453 15.999 191.179 7.839 344.627 161.316 352.465 352.465.353 8.618 7.373 15.453 15.999 15.453h48.068c9.034-.001 16.329-7.474 16.005-16.504z">
</path>
</svg></a>
{{/ifpage}}

<section class="s-gradient">
<div class="row">
<div class="column small-12 large-6 content">
<div class="sub-title">
<span class="text">Our Youtube Channel</span>
</div>
<h3 class="title-3">Get the latest from Luigi</h3>
<p class="description">
Always stay up to date with our growing collection of news, innvovations and video tutorials.
</p>
<p>
<a class="btn-primary" href="https://www.youtube.com/channel/UC5WsYsHapDlg2K3iXS4n4AQ" target="_blank">Browse Channel</a>
</p>
<ul class="list-type-1 sticky-navigation">
<li><a href="https://docs.luigi-project.io">Read Documentation</a></li>
<li><a href="https://slack.luigi-project.io" target="_blank" rel="noopener noreferrer">Community</a></li>
<li><a href="https://docs.luigi-project.io/docs/getting-started">How to get started</a></li>
<li>
<a rel="noopener noreferrer" target="_blank"
href="https://www.youtube.com/channel/UC5WsYsHapDlg2K3iXS4n4AQ">Our Youtube Channel</a>
</li>
<li><a href="https://twitter.com/luigiprojectio" target="_blank" rel="noopener noreferrer">Our Twitter
Channel</a></li>
</ul>
</div>
<div class="column small-12 large-6 image">
<img src="/assets/img/youtube.svg" alt="Luigi - Our Youtube Channel - Youtube" />
</div>
</div>
</section>


<section class="s-gradient">
<div class="row">
<div class="column small-12 large-6 content">
<div class="sub-title">
<span class="text">Our Youtube Channel</span>
</div>
<h3 class="title-3">Get the latest from Luigi</h3>
<p class="description">
Always stay up to date with our growing collection of news, innvovations and video tutorials.
</p>
<p>
<a class="btn-primary" target="_blank" rel="noopener noreferrer"
href="https://www.youtube.com/channel/UC5WsYsHapDlg2K3iXS4n4AQ">Browse Channel</a>
</p>
</div>
<div class="column small-12 large-6 image">
<img src="/assets/img/youtube.svg" alt="Luigi - Our Youtube Channel - Youtube" />
</div>
</section>
</div>
</section>

</div>

</div>
{{> footer}}

{{> footer}}
<script src="/assets/js/app.js"></script>
</body>

<script src="/assets/js/app.js"></script>
</body>
</html>
</html>
5 changes: 3 additions & 2 deletions website/landingpage/dev/src/pages/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,10 @@
<div class="sticky" data-sticky data-margin-top="6" data-anchor="stickyAnchor">
<ul class="list-type-1 sticky-navigation">
<li><a href="https://docs.luigi-project.io">Read Documentation</a></li>
<li><a href="https://slack.luigi-project.io" target="_blank">Community</a></li>
<li><a href="https://slack.luigi-project.io" target="_blank" rel="noopener noreferrer">Community</a></li>
<li><a href="https://docs.luigi-project.io/docs/getting-started">How to get started</a></li>
<li><a href="https://www.youtube.com/channel/UC5WsYsHapDlg2K3iXS4n4AQ" target="_blank">Our Youtube Channel</a></li>
<li><a target="_blank" rel="noopener noreferrer"
href="https://www.youtube.com/channel/UC5WsYsHapDlg2K3iXS4n4AQ">Our Youtube Channel</a></li>
</ul>
</div>
</div>
Expand Down
5 changes: 3 additions & 2 deletions website/landingpage/dev/src/pages/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,8 +126,9 @@ <h3 class="title-3">Get the latest from Luigi</h3>
Always stay up to date with our growing collection of news, innvovations and video tutorials.
</p>
<p>
<a class="btn-primary" href="https://www.youtube.com/channel/UC5WsYsHapDlg2K3iXS4n4AQ" target="_blank">Browse Channel</a>
</p>
<a target="_blank" rel="noopener noreferrer" class="btn-primary"
href="https://www.youtube.com/channel/UC5WsYsHapDlg2K3iXS4n4AQ">Browse Channel</a>
</p>
</div>
<div class="column small-12 large-6 image">
<img src="/assets/img/youtube.svg" alt="Luigi - Our Youtube Channel - Youtube" />
Expand Down
84 changes: 48 additions & 36 deletions website/landingpage/dev/src/partials/features.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div class="row is-centered align-center">
<div class="column small-12 large-8 xlarge-6">
<div class="sub-title has-number">
<span class="text">Out of the Box Features</span>
<span class="text">Out of the Box Features</span>
</div>
<h2 class="title-2 has-big-margin">Make your app as consistent and easy to develop as possible</h2>
</div>
Expand All @@ -13,10 +13,13 @@ <h2 class="title-2 has-big-margin">Make your app as consistent and easy to devel
<div class="column small-12 large-offset-1 large-7 content">
<h3 class="title-3">Pre-set UI</h3>
<p class="description">
Do you want a standardized UI for your app which is easy to use and configure? Luigi comes with
an out-of-the-box L-shaped shell bar with a variety of different menus, dropdowns and switchers.
The navigation built with <a href="https://sap.github.io/fundamental-styles/" target="_blank">Fundamental Styles</a> allows all your micro frontends to be embedded in a
consistent UI. Learn more about Luigi navigation <a href="https://docs.luigi-project.io/docs/navigation-configuration">here</a>.
Do you want a standardized UI for your app which is easy to use and configure? Luigi comes with
an out-of-the-box L-shaped shell bar with a variety of different menus, dropdowns and switchers.
The navigation built with <a target="_blank" rel="noopener noreferrer"
href="https://sap.github.io/fundamental-styles/">Fundamental Styles</a> allows all your micro frontends to
be embedded in a
consistent UI. Learn more about Luigi navigation <a
href="https://docs.luigi-project.io/docs/navigation-configuration">here</a>.
</p>
</div>
<div class="column small-12 large-3 image">
Expand All @@ -30,10 +33,10 @@ <h3 class="title-3">Pre-set UI</h3>
<div class="column small-12 large-7 content">
<h3 class="title-3">Responsive design</h3>
<p class="description">
Luigi can help you quickly adapt your application to render well on a variety
of devices and automatically scale the content and elements to match the screen size
on which it is viewed. You can create a responsive app in two simple steps.
Find out more <a href="https://docs.luigi-project.io/docs/luigi-ux-features">here</a>.
Luigi can help you quickly adapt your application to render well on a variety
of devices and automatically scale the content and elements to match the screen size
on which it is viewed. You can create a responsive app in two simple steps.
Find out more <a href="https://docs.luigi-project.io/docs/luigi-ux-features">here</a>.
</p>
</div>
<div class="column small-12 large-offset-1 large-3 image">
Expand All @@ -47,11 +50,15 @@ <h3 class="title-3">Responsive design</h3>
<div class="column small-12 large-offset-1 large-7 content">
<h3 class="title-3">Security/ID provider abstraction​</h3>
<p class="description">
Security is an important feature, so Luigi has simplified the process
of authenticating users with a unique login password. Luigi Core provides
ready-to-use <a href="https://docs.luigi-project.io/docs/authorization-configuration">plugins</a> for OpenID Connect and OAuth2. We also describe how to use
<a href="https://docs.luigi-project.io/docs/advanced-scenarios">Google Cloud Identity</a> with Luigi or set up your own
<a href="https://docs.luigi-project.io/docs/authorization-configuration/?section=custom-authorization-provider">custom authorization provider</a>.
Security is an important feature, so Luigi has simplified the process
of authenticating users with a unique login password. Luigi Core provides
ready-to-use <a href="https://docs.luigi-project.io/docs/authorization-configuration">plugins</a> for OpenID
Connect and OAuth2. We also describe how to use
<a href="https://docs.luigi-project.io/docs/advanced-scenarios">Google Cloud Identity</a> with Luigi or set up
your own
<a
href="https://docs.luigi-project.io/docs/authorization-configuration/?section=custom-authorization-provider">custom
authorization provider</a>.
</p>
</div>
<div class="column small-12 large-3 image">
Expand All @@ -65,15 +72,17 @@ <h3 class="title-3">Security/ID provider abstraction​</h3>
<div class="column small-12 large-7 content">
<h3 class="title-3">Role-based visibility restrictions</h3>
<p class="description">
Another way to use Luigi's <a href="https://docs.luigi-project.io/docs/authorization-configuration">authorization</a>
and Core/Client API features is to make
certain parts of your application only visible to some users. You can show a different
view to admins and regular users, for example. This allows for more flexibility and
security in your app.
Another way to use Luigi's <a
href="https://docs.luigi-project.io/docs/authorization-configuration">authorization</a>
and Core/Client API features is to make
certain parts of your application only visible to some users. You can show a different
view to admins and regular users, for example. This allows for more flexibility and
security in your app.
</p>
</div>
<div class="column small-12 large-offset-1 large-3 image">
<img src="/assets/img/role-based.svg" alt="Luigi - Micro Frontend Framework - Role-based visibility restrictions" />
<img src="/assets/img/role-based.svg"
alt="Luigi - Micro Frontend Framework - Role-based visibility restrictions" />
</div>
</div>
</li>
Expand All @@ -83,13 +92,14 @@ <h3 class="title-3">Role-based visibility restrictions</h3>
<div class="column large-offset-1 small-12 large-7 content">
<h3 class="title-3">Notification management​</h3>
<p class="description">
Luigi allows you to set up notifications and alerts for your application.
The alerts are displayed in the main app, which means that you save time and effort by
developing them globally, and they all have a consistent user-friendly look. Find out
more about alerts <a href="https://docs.luigi-project.io/docs/luigi-client-api/?section=showalert">here</a>.
Notifications can also be displayed by using the
<a href="https://docs.luigi-project.io/docs/navigation-parameters-reference/?section=badgecounter">badge counter</a>
for top navigation items.
Luigi allows you to set up notifications and alerts for your application.
The alerts are displayed in the main app, which means that you save time and effort by
developing them globally, and they all have a consistent user-friendly look. Find out
more about alerts <a href="https://docs.luigi-project.io/docs/luigi-client-api/?section=showalert">here</a>.
Notifications can also be displayed by using the
<a href="https://docs.luigi-project.io/docs/navigation-parameters-reference/?section=badgecounter">badge
counter</a>
for top navigation items.
</p>
</div>
<div class="column small-12 large-3 image">
Expand All @@ -103,11 +113,13 @@ <h3 class="title-3">Notification management​</h3>
<div class="column small-12 large-7 content">
<h3 class="title-3">Form- and modal management​​</h3>
<p class="description">
Besides alerts, you can also add input forms, messages, and modals via your Luigi configuration.
Modals are designed to look like a part of the Luigi Core app, but receive data from the micro frontend.
Thus, your app looks consistent and not like a patchwork of different micro frontends. For more information
check out the <a href="https://docs.luigi-project.io/docs/luigi-core-api/?section=showconfirmationmodal">Luigi Core</a>
and <a href="https://docs.luigi-project.io/docs/luigi-client-api/?section=showconfirmationmodal">Luigi Client</a> API documentation.
Besides alerts, you can also add input forms, messages, and modals via your Luigi configuration.
Modals are designed to look like a part of the Luigi Core app, but receive data from the micro frontend.
Thus, your app looks consistent and not like a patchwork of different micro frontends. For more information
check out the <a href="https://docs.luigi-project.io/docs/luigi-core-api/?section=showconfirmationmodal">Luigi
Core</a>
and <a href="https://docs.luigi-project.io/docs/luigi-client-api/?section=showconfirmationmodal">Luigi
Client</a> API documentation.
</p>
</div>
<div class="column small-12 large-offset-1 large-3 image">
Expand All @@ -121,10 +133,10 @@ <h3 class="title-3">Form- and modal management​​</h3>
<div class="column small-12 large-offset-1 large-7 content">
<h3 class="title-3">Multi language ​support​</h3>
<p class="description">
Offering your app in different languages allows you to reach more people.
Luigi is the only micro frontend framework which also offers localization and
translation features. For more information, refer to our localization example
<a href="https://docs.luigi-project.io/docs/i18n/?section=internationalization-i18n">here</a>.
Offering your app in different languages allows you to reach more people.
Luigi is the only micro frontend framework which also offers localization and
translation features. For more information, refer to our localization example
<a href="https://docs.luigi-project.io/docs/i18n/?section=internationalization-i18n">here</a>.
</p>
</div>
<div class="column small-12 large-3 image">
Expand Down
Loading