Legacy docs - local installation guide (#1789)

* Legacy docs - local installation guide * Add info about hugo installation * Add local installation page to search --------- Co-authored-by: Bartosz Cylwik <bartosz.cylwik94@gmail.com>
mdbootstrap · Jul 18, 2023 · 2036aa8 · 2036aa8
1 parent adcdfca
commit 2036aa8
Show file tree

Hide file tree

Showing 3 changed files with 283 additions and 0 deletions.
diff --git a/site/content/docs/standard/getting-started/local-installation/index-ss.html b/site/content/docs/standard/getting-started/local-installation/index-ss.html
@@ -0,0 +1,9 @@
+---
+---
+
+<li class="mb-1 pl-[9px] text-[0.85rem]" data-te-spy-active>
+  <a href="#intruduction">Introduction</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]"><a href="#step1">Step 1</a></li>
+<li class="mb-1 pl-[9px] text-[0.85rem]"><a href="#step2">Step 2</a></li>
+<li class="mb-1 pl-[9px] text-[0.85rem]"><a href="#step3">Step 3</a></li>
diff --git a/site/content/docs/standard/getting-started/local-installation/index.html b/site/content/docs/standard/getting-started/local-installation/index.html
@@ -0,0 +1,268 @@
+---
+title: "Quick Start"
+date: 2023-03-07T16:00:58+02:00
+draft: false
+main_title: "Local installation"
+subheading: ""
+seo_title: "Complete Local Installation Guide for Tailwind Elements: Step-by-Step Setup Instructions"
+description: "Complete local installation guide for Tailwind Elements: Step-by-step setup instructions."
+image: "https://tecdn.b-cdn.net/img/components-big.jpg"
+video: "https://www.youtube.com/watch?v=-GmnyjgI4Jc&ab_channel=Keepcoding"
+url: "docs/standard/getting-started/local-installation/"
+menu:
+  gettingstarted:
+    name: "Local installation"
+    weight: 2
+---
+
+<div class="flex flex-row">
+  <!-- <div class="basis-7/12"> -->
+  <div class="w-full">
+    <h2
+      class="mb-5 mt-0 text-2xl font-semibold leading-normal"
+      id="introduction"
+      data-te-spy-item>
+      Introduction
+    </h2>
+    <p class="mb-2">
+      Tailwind Elements is a comprehensive library of pre-designed components
+      and UI elements built on top of the Tailwind CSS framework. This local
+      installation guide will walk you through the steps required to set up and
+      use Tailwind Elements in your development environment. By following these
+      instructions, you'll be able to leverage the power of Tailwind Elements to
+      enhance your web development projects.
+    </p>
+
+    <div
+      class="mt-5 rounded-md border-l-[6px] border-solid border-gray-400 bg-gray-100 p-4 dark:border-gray-300 dark:bg-gray-300/30 ">
+      <strong>Note:</strong> If you need more comprehensive support, we
+      recommend you our tutorials, which will introduce you step by step to our
+      library, its entire environment and Tailwind CSS itself.
+
+      <div class="mt-3">
+        <a
+          href="/learn/te-foundations/basics/introduction/"
+          class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]">
+          Start learning
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+
+<hr class="my-10" />
+
+<div class="w-full">
+  <h2
+    class="mb-5 mt-0 text-2xl font-semibold leading-normal"
+    id="step1"
+    data-te-spy-item>
+    Step 1: Clone the repository
+  </h2>
+  <div
+    class="my-5 rounded-md border-l-[6px] border-solid border-primary-400 bg-primary-100 p-4 dark:border-primary-300 dark:bg-primary-300/30 ">
+    <strong>Note:</strong> Make sure that that you have
+    <a
+      href="https://git-scm.com/"
+      target="_blank"
+      class="text-primary-700 dark:text-primary-400"
+      >Git</a
+    >
+    installed on your machine, as it is required to clone repositories.
+  </div>
+  <p class="mb-2">
+    To clone the Tailwind Elements repository from GitHub, follow these steps:
+  </p>
+  <p class="mb-2">
+    1. Go to the
+    <a
+      href="https://github.com/mdbootstrap/Tailwind-Elements"
+      target="_blank"
+      class="text-primary-700 dark:text-primary-400"
+      >Tailwind Elements repository</a
+    >
+    on GitHub.
+  </p>
+  <p class="mb-2">
+    2. Click on the "Code" button, located above the file list on the
+    repository's main page.
+  </p>
+  <p class="mb-2">
+    3. In the dropdown that appears, click on the clipboard icon to copy the
+    repository's clone URL.
+  </p>
+  <p class="mb-2">
+    4. Open your preferred command line interface (CLI) or terminal.
+  </p>
+  <p class="mb-2">
+    5. Navigate to the directory where you want to clone the repository using
+    the <code>cd</code> command:
+  </p>
+  <div class="pt-2">
+    {{< twsnippet/wrapper "terminal" "" "mobile" >}}
+    {{< twsnippet/code active=true lang="Plaintext" type="terminal" >}}
+    cd /path/to/directory
+    {{< /twsnippet/code >}}
+    {{< /twsnippet/wrapper >}}
+  </div>
+  <p class="mb-2">
+    6. In the terminal, paste the previously copied clone URL and run the
+    following command to clone the repository:
+  </p>
+  <div class="pt-2">
+    {{< twsnippet/wrapper "terminal" "" "mobile" >}}
+    {{< twsnippet/code active=true lang="Plaintext" type="terminal" >}}
+    git clone https://github.com/mdbootstrap/Tailwind-Elements.git
+    {{< /twsnippet/code >}}
+    {{< /twsnippet/wrapper >}}
+  </div>
+  <p class="mb-2">
+    7. Once the cloning process is complete, navigate into the cloned
+    repository's directory.
+  </p>
+  <p class="mb-2">
+    8. If you are searching for specific versions of Tailwind Elements, you can
+    use the following command to list all available tags:
+  </p>
+  <div class="pt-2">
+    {{< twsnippet/wrapper "terminal" "" "mobile" >}}
+    {{< twsnippet/code active=true lang="Plaintext" type="terminal" >}}
+    git tag -l
+    {{< /twsnippet/code >}}
+    {{< /twsnippet/wrapper >}}
+  </div>
+  <p class="mb-2">
+    9. Then you can checkout the desired version (e.g.
+    <code>v1.0.0-beta1</code>) using the following command:
+  </p>
+  <div class="pt-2">
+    {{< twsnippet/wrapper "terminal" "" "mobile" >}}
+    {{< twsnippet/code active=true lang="Plaintext" type="terminal" >}}
+    git checkout v1.0.0-beta1
+    {{< /twsnippet/code >}}
+    {{< /twsnippet/wrapper >}}
+  </div>
+</div>
+
+<div class="w-full">
+  <h2
+    class="mb-5 mt-0 text-2xl font-semibold leading-normal"
+    id="step2"
+    data-te-spy-item>
+    Step 2: Install dependencies
+  </h2>
+  <div
+    class="my-5 rounded-md border-l-[6px] border-solid border-primary-400 bg-primary-100 p-4 dark:border-primary-300 dark:bg-primary-300/30 ">
+    <strong>Note:</strong> Make sure that that you have
+    <a
+      href="https://nodejs.org/en"
+      target="_blank"
+      class="text-primary-700 dark:text-primary-400"
+      >Node.js (LTS)</a
+    >
+    installed on your machine.
+  </div>
+  <p class="mb-2">To install all necessary dependencies, follow these steps:</p>
+  <p class="mb-2">
+    1. Open your preferred command line interface (CLI) or terminal.
+  </p>
+  <p class="mb-2">
+    2. Navigate to the root directory of your project using the
+    <code>cd</code> command:
+  </p>
+  <div class="pt-2">
+    {{< twsnippet/wrapper "terminal" "" "mobile" >}}
+    {{< twsnippet/code active=true lang="Plaintext" type="terminal" >}}
+    cd /path/to/project
+    {{< /twsnippet/code >}}
+    {{< /twsnippet/wrapper >}}
+  </div>
+  <p class="mb-2">3. Run the following command to install all dependencies:</p>
+  <div class="pt-2">
+    {{< twsnippet/wrapper "terminal" "" "mobile" >}}
+    {{< twsnippet/code active=true lang="Plaintext" type="terminal" >}}
+    npm install
+    {{< /twsnippet/code >}}
+    {{< /twsnippet/wrapper >}}
+  </div>
+  <p class="mb-2">
+    This command will read the <code>package.json</code> file and download all
+    the necessary dependencies into a <code>node_modules</code> folder.
+  </p>
+  <p class="mb-2">
+    4. In addition to installing the project dependencies, you may also need to
+    install the dependencies required for the documentation. To ensure it run
+    the following command:
+  </p>
+  <div class="pt-2">
+    {{< twsnippet/wrapper "terminal" "" "mobile" >}}
+    {{< twsnippet/code active=true lang="Plaintext" type="terminal" >}}
+    npm run docs:install
+    {{< /twsnippet/code >}}
+    {{< /twsnippet/wrapper >}}
+  </div>
+  <div
+    class="my-5 rounded-md border-l-[6px] border-solid border-primary-400 bg-primary-100 p-4 dark:border-primary-300 dark:bg-primary-300/30 ">
+    <strong>Note:</strong> Ensure that
+    <a
+      href="https://gohugo.io/installation/"
+      target="_blank"
+      class="text-primary-700 dark:text-primary-400"
+      >Hugo</a
+    >
+    is installed on your device as it is a prerequisite for accessing our
+    documentation.
+  </div>
+</div>
+
+<div class="w-full">
+  <h2
+    class="mb-5 mt-0 text-2xl font-semibold leading-normal"
+    id="step3"
+    data-te-spy-item>
+    Step 3: Running the Demo App and Documentation
+  </h2>
+  <p class="">
+    Once you have successfully installed the dependencies for your project, you
+    can proceed with utilizing them in your development workflow.
+  </p>
+  <div
+    class="my-5 rounded-md border-l-[6px] border-solid border-primary-400 bg-primary-100 p-4 dark:border-primary-300 dark:bg-primary-300/30 ">
+    <strong>Note:</strong> Before attempting to start a specific version of
+    Tailwind Elements, it is crucial to ensure that you have followed all the
+    instructions outlined in
+    <a
+      href="#step1"
+      target="_blank"
+      class="text-primary-700 dark:text-primary-400"
+      >Step 1</a
+    >.
+  </div>
+  <p class="mb-2">
+    1. To start the demo application, run the following command in your
+    terminal:
+  </p>
+  <div class="pt-2">
+    {{< twsnippet/wrapper "terminal" "" "mobile" >}}
+    {{< twsnippet/code active=true lang="Plaintext" type="terminal" >}}
+    npm start
+    {{< /twsnippet/code >}}
+    {{< /twsnippet/wrapper >}}
+  </div>
+  <p class="mb-2">
+    2. Launch the documentation by executing the following command:
+  </p>
+  <div class="pt-2">
+    {{< twsnippet/wrapper "terminal" "" "mobile" >}}
+    {{< twsnippet/code active=true lang="Plaintext" type="terminal" >}}
+    npm run docs:start
+    {{< /twsnippet/code >}}
+    {{< /twsnippet/wrapper >}}
+  </div>
+  <div
+    class="my-5 rounded-md border-l-[6px] border-solid border-primary-400 bg-primary-100 p-4 dark:border-primary-300 dark:bg-primary-300/30 ">
+    <strong>Note:</strong> Prior to running the documentation, it is important
+    to execute the command <code>npm run build</code> to compile the Tailwind
+    plugin and update the files located in the <code>/site</code> directory.
+  </div>
+</div>
diff --git a/site/static/search.json b/site/static/search.json
@@ -17,6 +17,12 @@
     "keywords": ["start", "tutorial"],
     "category": "Getting started"
   },
+  {
+    "href": "/docs/standard/getting-started/local-installation/",
+    "name": "Local installation",
+    "keywords": ["local", "installation", "documentation", "hugo"],
+    "category": "Getting started"
+  },
   {
     "href": "/docs/standard/getting-started/theming/",
     "name": "Theming",