Skip to content
This repository was archived by the owner on Feb 6, 2024. It is now read-only.
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,14 @@ export class AppComponentsDemo {
<p>Display your apps or websites inside an Android or iOS frame.</p>
<p>
It is largely inspired and based on the awesome{' '}
<a href="https://github.com/ionic-team/ionic-docs/tree/c5a624ac35d5285b871e7d8513d3849bdea63271/src/components/demo">work</a> of the{' '}
<a href="https://ionicframework.com/">Ionic</a> team.
<a href="https://github.com/ionic-team/ionic-docs/tree/c5a624ac35d5285b871e7d8513d3849bdea63271/src/components/demo" rel="noopener noreferrer">
work
</a>{' '}
of the{' '}
<a href="https://ionicframework.com/" rel="noopener noreferrer">
Ionic
</a>{' '}
team.
</p>
<h2 id="app-components-demo-table-of-contents">Table of contents</h2>
<ul>
Expand Down Expand Up @@ -74,8 +80,12 @@ export class AppComponentsDemo {
<p>This component could be added to your web application using the following methods.</p>
<h3 id="app-components-demo-using-from-a-cdn">Using from a CDN</h3>
<p>
It&#39;s recommended to use <a href="https://unpkg.com/">unpkg</a> to use the <a href="https://deckdeckgo.com">DeckDeckGo</a> lazy image component
from a CDN. To do so, add the following include script in the main HTML file of your project:
It&#39;s recommended to use{' '}
<a href="https://unpkg.com/" rel="noopener noreferrer">
unpkg
</a>{' '}
to use the <a href="https://deckdeckgo.com">DeckDeckGo</a> lazy image component from a CDN. To do so, add the following include script in the main
HTML file of your project:
</p>
<deckgo-highlight-code language="javascript">
<code slot="code">
Expand All @@ -87,16 +97,38 @@ export class AppComponentsDemo {
</deckgo-highlight-code>
<h3 id="app-components-demo-install-from-npm">Install from NPM</h3>
<p>
Install it in your project from <a href="https://www.npmjs.com/package/@deckdeckgo/demo">npm</a> using the following command:
Install it in your project from{' '}
<a href="https://www.npmjs.com/package/@deckdeckgo/demo" rel="noopener noreferrer">
npm
</a>{' '}
using the following command:
</p>
<deckgo-highlight-code language="bash">
<code slot="code">npm install @deckdeckgo&#47;demo</code>
</deckgo-highlight-code>
<h3 id="app-components-demo-framework-integration">Framework integration</h3>
<p>
The <a href="https://stenciljs.com/docs/overview">Stencil documentation</a> provide examples of framework integration for{' '}
<a href="https://stenciljs.com/docs/angular">Angular</a>, <a href="https://stenciljs.com/docs/react">React</a>,{' '}
<a href="https://stenciljs.com/docs/vue">Vue</a> and <a href="https://stenciljs.com/docs/ember">Ember</a>.
The{' '}
<a href="https://stenciljs.com/docs/overview" rel="noopener noreferrer">
Stencil documentation
</a>{' '}
provide examples of framework integration for{' '}
<a href="https://stenciljs.com/docs/angular" rel="noopener noreferrer">
Angular
</a>
,{' '}
<a href="https://stenciljs.com/docs/react" rel="noopener noreferrer">
React
</a>
,{' '}
<a href="https://stenciljs.com/docs/vue" rel="noopener noreferrer">
Vue
</a>{' '}
and{' '}
<a href="https://stenciljs.com/docs/ember" rel="noopener noreferrer">
Ember
</a>
.
</p>
<p>
That being said, commonly, you might either <code>import</code> or <code>load</code> it:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -87,16 +87,38 @@ export class AppComponentsDrr {
</deckgo-highlight-code>
<h3 id="app-components-drr-install-from-npm">Install from NPM</h3>
<p>
Install it in your project from <a href="https://www.npmjs.com/package/@deckdeckgo/qrcode">npm</a> using the following command:
Install it in your project from{' '}
<a href="https://www.npmjs.com/package/@deckdeckgo/qrcode" rel="noopener noreferrer">
npm
</a>{' '}
using the following command:
</p>
<deckgo-highlight-code language="bash">
<code slot="code">npm install @deckdeckgo&#47;drag-resize-rotate</code>
</deckgo-highlight-code>
<h3 id="app-components-drr-framework-integration">Framework integration</h3>
<p>
The <a href="https://stenciljs.com/docs/overview">Stencil documentation</a> provide examples of framework integration for{' '}
<a href="https://stenciljs.com/docs/angular">Angular</a>, <a href="https://stenciljs.com/docs/react">React</a>,{' '}
<a href="https://stenciljs.com/docs/vue">Vue</a> and <a href="https://stenciljs.com/docs/ember">Ember</a>.
The{' '}
<a href="https://stenciljs.com/docs/overview" rel="noopener noreferrer">
Stencil documentation
</a>{' '}
provide examples of framework integration for{' '}
<a href="https://stenciljs.com/docs/angular" rel="noopener noreferrer">
Angular
</a>
,{' '}
<a href="https://stenciljs.com/docs/react" rel="noopener noreferrer">
React
</a>
,{' '}
<a href="https://stenciljs.com/docs/vue" rel="noopener noreferrer">
Vue
</a>{' '}
and{' '}
<a href="https://stenciljs.com/docs/ember" rel="noopener noreferrer">
Ember
</a>
.
</p>
<p>
That being said, commonly, you might either <code>import</code> or <code>load</code> it:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,11 @@ export class AppComponentsGif {
<main>
<h1 id="app-components-gif-gif">GIF</h1>
<p>
The &quot;GIF&quot; component allows you to easily add a GIF, like those provided by <a href="https://giphy.com">Giphy</a>, in almost any slide of
your presentation.
The &quot;GIF&quot; component allows you to easily add a GIF, like those provided by{' '}
<a href="https://giphy.com" rel="noopener noreferrer">
Giphy
</a>
, in almost any slide of your presentation.
</p>
<h2 id="app-components-gif-table-of-contents">Table of contents</h2>
<ul>
Expand Down
38 changes: 32 additions & 6 deletions docs/src/app/pages/docs/deck/app-deck-pager/app-deck-pager.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,12 @@ export class AppDeckPager {
<p>This component could be added to your web application using the following methods.</p>
<h3 id="app-deck-pager-using-from-a-cdn">Using from a CDN</h3>
<p>
It&#39;s recommended to use <a href="https://unpkg.com/">unpkg</a> to use the <a href="https://deckdeckgo.com">DeckDeckGo</a> pager from a CDN. To
do so, add the following include script in the main HTML file of your project:
It&#39;s recommended to use{' '}
<a href="https://unpkg.com/" rel="noopener noreferrer">
unpkg
</a>{' '}
to use the <a href="https://deckdeckgo.com">DeckDeckGo</a> pager from a CDN. To do so, add the following include script in the main HTML file of
your project:
</p>
<deckgo-highlight-code language="javascript">
<code slot="code">
Expand All @@ -69,16 +73,38 @@ export class AppDeckPager {
</deckgo-highlight-code>
<h3 id="app-deck-pager-install-from-npm">Install from NPM</h3>
<p>
Install it in your project from <a href="https://www.npmjs.com/package/@deckdeckgo/pager">npm</a> using the following command:
Install it in your project from{' '}
<a href="https://www.npmjs.com/package/@deckdeckgo/pager" rel="noopener noreferrer">
npm
</a>{' '}
using the following command:
</p>
<deckgo-highlight-code language="bash">
<code slot="code">npm install @deckdeckgo&#47;pager</code>
</deckgo-highlight-code>
<h3 id="app-deck-pager-framework-integration">Framework integration</h3>
<p>
The <a href="https://stenciljs.com/docs/overview">Stencil documentation</a> provide examples of framework integration for{' '}
<a href="https://stenciljs.com/docs/angular">Angular</a>, <a href="https://stenciljs.com/docs/react">React</a>,{' '}
<a href="https://stenciljs.com/docs/vue">Vue</a> and <a href="https://stenciljs.com/docs/ember">Ember</a>.
The{' '}
<a href="https://stenciljs.com/docs/overview" rel="noopener noreferrer">
Stencil documentation
</a>{' '}
provide examples of framework integration for{' '}
<a href="https://stenciljs.com/docs/angular" rel="noopener noreferrer">
Angular
</a>
,{' '}
<a href="https://stenciljs.com/docs/react" rel="noopener noreferrer">
React
</a>
,{' '}
<a href="https://stenciljs.com/docs/vue" rel="noopener noreferrer">
Vue
</a>{' '}
and{' '}
<a href="https://stenciljs.com/docs/ember" rel="noopener noreferrer">
Ember
</a>
.
</p>
<p>
That being said, commonly, you might either <code>import</code> or <code>load</code> it:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,11 @@ export class AppEditFonts {
<h1 id="app-edit-fonts-fonts">Fonts</h1>
<p>
As any web application, the fonts of your presentation could be easily styled, but <a href="https://deckdeckgo.com">DeckDeckGo</a> goes one step
further by downloading and installing <strong>automatically</strong> any <a href="https://fonts.google.com">Google Fonts</a> you would like to use
during the setup process (if you are using the starter kit).
further by downloading and installing <strong>automatically</strong> any{' '}
<a href="https://fonts.google.com" rel="noopener noreferrer">
Google Fonts
</a>{' '}
you would like to use during the setup process (if you are using the starter kit).
</p>
<h2 id="app-edit-fonts-using-automatically-any-google-fonts">Using automatically any Google Fonts</h2>
<p>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,10 @@ export class AppEditMarkdown {
</ul>
<h2 id="app-edit-markdown-introduction">Introduction</h2>
<p>
When you edit your deck with Markdown, the <a href="https://github.com/deckgo/deckdeckgo/tree/master/webpack">DeckDeckGo Webpack Markdown Plugin</a>{' '}
When you edit your deck with Markdown, the{' '}
<a href="https://github.com/deckgo/deckdeckgo/tree/master/webpack" rel="noopener noreferrer">
DeckDeckGo Webpack Markdown Plugin
</a>{' '}
will convert, at bundle time, your code to HTML and will inject the results in the <code>index.html</code> file. Doing so, your{' '}
<a href="https://deckdeckgo.com">DeckDeckGo</a> presentation will remain SEO friendly even without server side rendering.
</p>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,10 @@ export class AppEditTheming {
<h2 id="app-edit-theming-theme">Theme</h2>
<p>
To create the theme for your deck when you are using the <a href="https://deckdeckgo.com">DeckDeckGo</a> starter kit, use the{' '}
<a href="https://ionicframework.com/docs/theming/color-generator">Ionic Color Generator</a> to pick the colors of your choice.
<a href="https://ionicframework.com/docs/theming/color-generator" rel="noopener noreferrer">
Ionic Color Generator
</a>{' '}
to pick the colors of your choice.
</p>
<p>
Once done, <code>copy</code> the generated CSS variables and <code>paste</code> them into the <code>src/css/variables.css</code> file of your
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -88,8 +88,11 @@ export class AppSlideAspectRatio {
</blockquote>
<h3 id="app-slide-aspect-ratio-from-a-cdn">From a CDN</h3>
<p>
It&#39;s recommended to use <a href="https://unpkg.com/">unpkg</a> if you want to use this template from a CDN. To do so, add the following include
script in the main HTML file of your project:
It&#39;s recommended to use{' '}
<a href="https://unpkg.com/" rel="noopener noreferrer">
unpkg
</a>{' '}
if you want to use this template from a CDN. To do so, add the following include script in the main HTML file of your project:
</p>
<deckgo-highlight-code language="javascript">
<code slot="code">
Expand All @@ -101,17 +104,38 @@ export class AppSlideAspectRatio {
</deckgo-highlight-code>
<h3 id="app-slide-aspect-ratio-from-npm">From NPM</h3>
<p>
To install this template in your project from <a href="https://www.npmjs.com/package/@deckdeckgo/slide-aspect-ratio">npm</a> run the following
command:
To install this template in your project from{' '}
<a href="https://www.npmjs.com/package/@deckdeckgo/slide-aspect-ratio" rel="noopener noreferrer">
npm
</a>{' '}
run the following command:
</p>
<deckgo-highlight-code language="bash">
<code slot="code">npm install @deckdeckgo&#47;slide-aspect-ratio</code>
</deckgo-highlight-code>
<h3 id="app-slide-aspect-ratio-framework-integration">Framework integration</h3>
<p>
The <a href="https://stenciljs.com/docs/overview">Stencil documentation</a> provide examples of framework integration for{' '}
<a href="https://stenciljs.com/docs/angular">Angular</a>, <a href="https://stenciljs.com/docs/react">React</a>,{' '}
<a href="https://stenciljs.com/docs/vue">Vue</a> and <a href="https://stenciljs.com/docs/ember">Ember</a>.
The{' '}
<a href="https://stenciljs.com/docs/overview" rel="noopener noreferrer">
Stencil documentation
</a>{' '}
provide examples of framework integration for{' '}
<a href="https://stenciljs.com/docs/angular" rel="noopener noreferrer">
Angular
</a>
,{' '}
<a href="https://stenciljs.com/docs/react" rel="noopener noreferrer">
React
</a>
,{' '}
<a href="https://stenciljs.com/docs/vue" rel="noopener noreferrer">
Vue
</a>{' '}
and{' '}
<a href="https://stenciljs.com/docs/ember" rel="noopener noreferrer">
Ember
</a>
.
</p>
<p>
That being said, commonly, you might either <code>import</code> or <code>load</code> it:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -103,8 +103,11 @@ export class AppSlideAuthor {
</blockquote>
<h3 id="app-slide-author-from-a-cdn">From a CDN</h3>
<p>
It&#39;s recommended to use <a href="https://unpkg.com/">unpkg</a> if you want to use this template from a CDN. To do so, add the following include
script in the main HTML file of your project:
It&#39;s recommended to use{' '}
<a href="https://unpkg.com/" rel="noopener noreferrer">
unpkg
</a>{' '}
if you want to use this template from a CDN. To do so, add the following include script in the main HTML file of your project:
</p>
<deckgo-highlight-code language="javascript">
<code slot="code">
Expand All @@ -116,16 +119,38 @@ export class AppSlideAuthor {
</deckgo-highlight-code>
<h3 id="app-slide-author-from-npm">From NPM</h3>
<p>
To install this template in your project from <a href="https://www.npmjs.com/package/@deckdeckgo/slide-author">npm</a> run the following command:
To install this template in your project from{' '}
<a href="https://www.npmjs.com/package/@deckdeckgo/slide-author" rel="noopener noreferrer">
npm
</a>{' '}
run the following command:
</p>
<deckgo-highlight-code language="bash">
<code slot="code">npm install @deckdeckgo&#47;slide-author</code>
</deckgo-highlight-code>
<h3 id="app-slide-author-framework-integration">Framework integration</h3>
<p>
The <a href="https://stenciljs.com/docs/overview">Stencil documentation</a> provide examples of framework integration for{' '}
<a href="https://stenciljs.com/docs/angular">Angular</a>, <a href="https://stenciljs.com/docs/react">React</a>,{' '}
<a href="https://stenciljs.com/docs/vue">Vue</a> and <a href="https://stenciljs.com/docs/ember">Ember</a>.
The{' '}
<a href="https://stenciljs.com/docs/overview" rel="noopener noreferrer">
Stencil documentation
</a>{' '}
provide examples of framework integration for{' '}
<a href="https://stenciljs.com/docs/angular" rel="noopener noreferrer">
Angular
</a>
,{' '}
<a href="https://stenciljs.com/docs/react" rel="noopener noreferrer">
React
</a>
,{' '}
<a href="https://stenciljs.com/docs/vue" rel="noopener noreferrer">
Vue
</a>{' '}
and{' '}
<a href="https://stenciljs.com/docs/ember" rel="noopener noreferrer">
Ember
</a>
.
</p>
<p>
That being said, commonly, you might either <code>import</code> or <code>load</code> it:
Expand Down Expand Up @@ -182,7 +207,10 @@ export class AppSlideAuthor {
<h3 id="app-slide-author-social-components">Social components</h3>
<p>
The details of the component <code>&lt;deckgo-social/&gt;</code> is described in the components{' '}
<a href="https://github.com/deckgo/deckdeckgo/blob/master/doc/components/components.md">documentation</a>.
<a href="https://github.com/deckgo/deckdeckgo/blob/master/doc/components/components.md" rel="noopener noreferrer">
documentation
</a>
.
</p>
<h2 id="app-slide-author-attributes">Attributes</h2>
<p>This component offers the following options which could be set using attributes:</p>
Expand Down
Loading