Integrations (#1461)

* Added integrations module to sidenav * Added Vue integration * Added React integration * Added Angular integration * Added Next.js integration * Added Nuxt integration * Added Laravel integration * Addex Express.js integration * Express integration: added step 4 in section 1 * Added Svelte integration * Angular integration: fixes after CR * Express integration: fixes after CR * Laravel integration: fixes after CR * Next integration: fixes after CR * Nuxt integration: fixes after CR * React integration: fixes after CR * React integration: added info ARV waiting list * Svelte integration: fixes after CR * Vue integration: fixes after CR * Integrations: added info about components init * Vue integration: added init JS section * Svelte integration: added init JS section * Vue & Svelte integration: fixed wrong naming * React integration: added init JS section * Laravel integrations: removed info about JS init * Angular integration: added init JS section * Nuxt integration: added init JS section * ARV integrations: fixed link waiting list * Express integration: added additional steps * Express integration: final fixes * Added Django integration
mdbootstrap · Mar 23, 2023 · aa0336c · aa0336c
1 parent 07c6da2
commit aa0336c
Show file tree

Hide file tree

Showing 19 changed files with 2,694 additions and 0 deletions.
diff --git a/site/content/docs/standard/integrations/angular/index-ss.html b/site/content/docs/standard/integrations/angular/index-ss.html
@@ -0,0 +1,17 @@
+---
+---
+
+<li class="mb-1 pl-[9px] text-[0.85rem]" data-te-spy-active>
+  <a href="#section-prerequisites">Prerequisites</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#section-angular-app">Creating a new Angular application</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#section-tailwind"
+    >Installing and configuring Tailwind CSS and Tailwind Elements</a
+  >
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#section-initializing-js">Initializing via JS</a>
+</li>
diff --git a/site/content/docs/standard/integrations/angular/index.html b/site/content/docs/standard/integrations/angular/index.html
@@ -0,0 +1,292 @@
+---
+title: "Angular integration"
+date: 2021-04-29T16:00:58+02:00
+draft: false
+main_title: "Tailwind Elements Angular integration"
+subheading: ""
+seo_title: "Tailwind Elements integration with Angular - Free Examples & Tutorial"
+description: "This article shows you how to integrate Angular application with Tailwind Elements. Free download, AGPL license."
+image: "img/components-big.jpg"
+url: "docs/standard/integrations/angular-integration/"
+menu:
+  integrations:
+    name: "Angular"
+---
+
+<!-- Section: Basic example -->
+
+<section id="section-prerequisites">
+  <!-- Title -->
+  <h2
+    class="mt-0 mb-5 text-3xl font-semibold leading-normal"
+    id="prerequisites"
+    data-te-spy-item>
+    Prerequisites
+  </h2>
+
+  <!-- Description -->
+  <p class="mb-5">
+    Before starting the project make sure to install the following utilities:
+  </p>
+
+  <ul class="ml-4 list-disc">
+    <li>
+      <a
+        class="text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600"
+        href="https://nodejs.org/en/"
+        target="_blank"
+        >Node LTS</a
+      >
+      (14.x.x or higher recommended)
+    </li>
+    <li>
+      <a
+        class="text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600"
+        href="https://nodejs.org/en/"
+        target="_blank"
+        >Angular</a
+      >
+      (14.x.x or higher recommended)
+    </li>
+    <li>
+      Code editor. We recommend
+      <a
+        class="text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600"
+        href="https://code.visualstudio.com/"
+        target="_blank"
+        >VSCode</a
+      >
+    </li>
+  </ul>
+
+  <div
+    class="my-6 rounded-lg bg-primary-100 p-6 text-base text-info-800"
+    role="alert">
+    <p>
+      <strong>Angular Tailwind Elements:</strong>
+      <br />
+      Currently we are working on a standalone Angular version of Tailwind
+      Elements. If you want to know when it is going to be released, sign in in
+      our
+      <a
+        class="text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600"
+        href="/angular"
+        target="_blank"
+        >waiting list availabable here</a
+      >.
+    </p>
+  </div>
+</section>
+
+<hr class="my-5 dark:border-neutral-600" />
+
+<!-- Section: Creating Angular app-->
+<section id="section-angular-app">
+  <!-- Section title-->
+  <h2
+    class="mt-0 mb-5 text-3xl font-semibold leading-normal"
+    id="angular-application"
+    data-te-spy-item>
+    Creating a new Angular application
+  </h2>
+
+  <!-- Description -->
+  <p>
+    Let's create a fresh Angular application so that we can go through all the
+    steps together.
+  </p>
+
+  <h2 class="mt-5 text-lg font-bold">Step 1</h2>
+  <p class="mb-5">Install Angular CLI</p>
+
+  <div class="pb-4">
+    {{< twsnippet/wrapper "terminal" "" "mobile" >}}
+    {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+    npm install -g @angular/cli
+    {{< /twsnippet/code >}}
+    {{< /twsnippet/wrapper >}}
+  </div>
+
+  <h2 class="text-lg font-bold">Step 2</h2>
+  <p class="mb-5">Create new project</p>
+
+  <div class="pb-4">
+    <!--prettier-ignore-->
+    {{< twsnippet/wrapper "terminal" "" "mobile" >}}
+        {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+        ng new my-project
+        cd my-project
+        {{< /twsnippet/code >}}
+        {{< /twsnippet/wrapper >}}
+  </div>
+</section>
+
+<hr class="mb-5 dark:border-neutral-600" />
+
+<!-- Creating and configuring Tailwind & Tailwind Elements-->
+<section id="section-tailwind">
+  <!-- Section title-->
+  <h2
+    class="mt-0 mb-5 text-3xl font-semibold leading-normal"
+    id="tailwind"
+    data-te-spy-item>
+    Installing and configuring Tailwind CSS and Tailwind Elements
+  </h2>
+
+  <!-- Description -->
+  <h2 class="mt-5 text-lg font-bold">Step 1</h2>
+  <p class="mb-5">Install Tailwind CSS</p>
+
+  <div class="pb-4">
+    <!--prettier-ignore-->
+    {{< twsnippet/wrapper "terminal" "" "mobile" >}}
+        {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+        npm install -D tailwindcss postcss autoprefixer
+        npx tailwindcss init
+        {{< /twsnippet/code >}}
+        {{< /twsnippet/wrapper >}}
+  </div>
+
+  <h2 class="text-lg font-bold">Step 2</h2>
+  <p class="mb-5">
+    Add the paths to all of your template files in your
+    <code>tailwind.config.cjs</code> file.
+  </p>
+
+  <div class="pb-4">
+    <!--prettier-ignore-->
+    {{< twsnippet/wrapper "tailwind.config.cjs" "" "mobile" >}}
+        {{< twsnippet/code active=true lang="JavaScript" >}}
+        /** @type {import('tailwindcss').Config} */
+        module.exports = {
+        content: [
+            "./src/**/*.{html,ts}",
+            "./node_modules/tw-elements/dist/js/**/*.js"
+        ],
+        theme: {
+            extend: {},
+        },
+        plugins: [require("tw-elements/dist/plugin")]
+        }
+        {{< /twsnippet/code >}}
+        {{< /twsnippet/wrapper >}}
+  </div>
+
+  <h2 class="text-lg font-bold">Step 3</h2>
+  <p class="mb-5">
+    Add the <code>@tailwind</code> directives for each of Tailwind’s layers to
+    your <code>./src/styles.css</code> file.
+  </p>
+
+  <div class="pb-4">
+    <!--prettier-ignore-->
+    {{< twsnippet/wrapper "styles.css" "" "mobile" >}}
+        {{< twsnippet/code active=true lang="CSS" >}}
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+        {{< /twsnippet/code >}}
+        {{< /twsnippet/wrapper >}}
+  </div>
+
+  <h2 class="text-lg font-bold">Step 4</h2>
+  <p>Install Tailwind Elements.</p>
+
+  <div class="py-4">
+    <!--prettier-ignore-->
+    {{< twsnippet/wrapper "terminal" "" "mobile" >}}
+        {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+        npm install tw-elements
+        {{< /twsnippet/code >}}
+      {{< /twsnippet/wrapper >}}
+  </div>
+  <!-- Section: Code-->
+
+  <h2 class="text-lg font-bold">Step 5</h2>
+  <p class="mb-5">
+    In root directory add <code>typings.d.ts</code> file and put in there
+    Tailwind Elements module's declarataion.
+  </p>
+
+  <div class="pb-4">
+    <!--prettier-ignore-->
+    {{< twsnippet/wrapper "typings.d.ts" "" "mobile" >}}
+        {{< twsnippet/code active=true lang="JavaScript" >}}
+        declare module 'tw-elements';
+        {{< /twsnippet/code >}}
+        {{< /twsnippet/wrapper >}}
+  </div>
+
+  <h2 class="text-lg font-bold">Step 6</h2>
+  <p class="mb-5">
+    In <code>app.component.ts</code> file (located in
+    <code>src/app/</code> directory) put lifecycle method where are you going to
+    dynamically importing library.
+  </p>
+
+  <div class="pb-4">
+    <!--prettier-ignore-->
+    {{< twsnippet/wrapper "app.component.ts" "" "mobile" >}}
+        {{< twsnippet/code active=true lang="JavaScript" >}}
+        ngOnInit() {
+            const importTE = async () => {
+              await import('tw-elements');
+            };
+            importTE();
+          }
+        {{< /twsnippet/code >}}
+        {{< /twsnippet/wrapper >}}
+  </div>
+</section>
+<!--/Creating and configuring Tailwind & Tailwind Elements-->
+
+<!-- Initializing via JS-->
+<section id="section-initializing-js">
+  <!-- Title -->
+  <h2
+    class="mt-0 mb-5 text-3xl font-semibold leading-normal"
+    id="initializing-js"
+    data-te-spy-item>
+    Initializing via JS
+  </h2>
+
+  <!-- Description -->
+  <p class="mb-5">
+    By default all components have autoinit which means they are initialized by
+    data attributes. But if you want to make init by JavaScript - there is also
+    possibility to do that.
+  </p>
+
+  <h2 class="text-lg font-bold">Step 1</h2>
+  <p class="mb-5">Import library.</p>
+
+  <div class="pb-4">
+    <!--prettier-ignore-->
+    {{< twsnippet/wrapper "app.component.ts" "" "mobile" >}}
+      {{< twsnippet/code active=true lang="JavaScript" >}}
+        import * as te from "tw-elements";
+      {{< /twsnippet/code >}}
+    {{< /twsnippet/wrapper >}}
+  </div>
+
+  <h2 class="text-lg font-bold">Step 2</h2>
+  <p class="mb-5">Initialize component in lifecycle hook.</p>
+
+  <div class="pb-4">
+    <!--prettier-ignore-->
+    {{< twsnippet/wrapper "app.component.ts" "" "mobile" >}}
+      {{< twsnippet/code active=true lang="JavaScript" >}}
+        ngOnInit() {
+          const options = {
+            format: "dd-mm-yyyy",
+          };
+          const myDatepicker = new te.Datepicker(
+            document.getElementById("myDatepicker"),
+            options
+          );
+        };
+      {{< /twsnippet/code >}}
+    {{< /twsnippet/wrapper >}}
+  </div>
+</section>
+<!-- /Initializing via JS-->
diff --git a/site/content/docs/standard/integrations/django/index-ss.html b/site/content/docs/standard/integrations/django/index-ss.html
@@ -0,0 +1,14 @@
+---
+---
+
+<li class="mb-1 pl-[9px] text-[0.85rem]" data-te-spy-active>
+  <a href="#section-prerequisites">Prerequisites</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#section-django-app">Creating a new Django application</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#section-tailwind"
+    >Installing and configuring Tailwind CSS and Tailwind Elements</a
+  >
+</li>