Installation

Installation process.

The following process will be used to install plurk landing using package manager

1. Install Node.js : Please install latest version of Node.js from https://nodejs.org

2. Extract main landing : Extract the landing site to your suitable directory or folder.

3. Access Command Prompt : Open node.js command prompt.

Note:- The process mentioned below can also be excuted with system command prompt.

4. In CMD, Navigate to the location where main folder is extracted.

5. Navigate to the root folder of project where package.json file exist.

6. Download node_modules folder : Run npm install command to install node_modules folder with dependencies.

7. To run npm run dev.

Note:- Start the Tailwind CLI build process when you make change in site.

Note:- The CLI tool scan your template files for classes and build your CSS.

8. Run command npm run build to minify your CSS.

9. Install Git : If you are a Git user. Please install latest version of Git from https://git-scm.com/

Note:- All the commands mentioned above can be executed using Git.

In case if you have any problems or query then please contact us

File Sturcture

The arrangement below describes our file structure.

  • Plurk
    • assets
      • css
        • all the base css files including build css.
      • images
        • all the image files
      • js
        • all the js files
    • index.html and all other app pages
    • package.json
    • tailwind.config.js

Code Structure

This section will give you a brief description of our code.

1. Header Section : This is the default navbar section. It contains :

a. Logo

b. Menu

c. Search Bar

d. RTL toggle button

e. Theme toggle button

f. Menu toggle button

Note:- These categories are defined by us and you can modify as per your needs :)

  <!--  BEGIN NAVBAR  -->
  <header class="relative z-10 border-b-2 border-white/5 bg-primary">
    <div class="container">
      <div class="relative flex items-center justify-between py-5 lg:py-8">
        <a href="/index.html"><img src="assets/images/logo.png" alt="logo" class="h-10" /></a>
        <div class="flex items-center">
          <div class="menus absolute top-full z-20 hidden w-full gap-9 ltr:left-0 rtl:right-0 lg:static lg:block lg:w-auto">
            ..............................
          </div>
          <ul class="flex items-center gap-5 ltr:pr-5 rtl:pl-5 ltr:lg:pl-5 ltr:lg:pr-0 rtl:lg:pr-5 rtl:lg:pl-0"> 
            ..............................
          </ul> 
        </div>
      </div>
    </div>
  </header>
  <!--  END NAVBAR  -->

2. Main Container Section : The main container section includes header, footer and main content section.

a. Header Section

b. Main Content Section

c. Footer Section

  <!--  BEGIN MAIN CONTAINER  -->
  <div class="bg-white font-mulish text-base text-gray antialiased dark:bg-[#101926]">
    ...........
  </div>
  <!-- END MAIN CONTAINER -->

5. Main Content : This is the Main Content code section.

This is the root structure where you can create widgets, charts, tables etc.

  <!--  BEGIN CONTENT PART  -->
  <div class="bg-[url(../images/background.png)] bg-cover bg-center bg-no-repeat dark:bg-none">
    ===========================
    ===========================
  </div>

  <!--  END CONTENT PART  -->

6. Footer : This is the Footer code. It is placed outside the Main Container Section.

a. Footer Section 1 :- This section contains all the footer details that you can modify as per your needs.

b. Footer Section 2 :- Usually this section does not contain anything inside it, but it can be customized according to your needs. This means that you can add your own CSS style.

  <!--  BEGIN FOOTER  -->
  <div>
    <footer class="bg-white py-14 dark:bg-transparent dark:bg-gradient-to-b dark:from-white/[0.03] dark:to-transparent lg:py-[100px]">
      ......
    </footer>
    <div class="py-5 dark:border-t-2 dark:border-white/5">
      ......
    </div>
  </div>
  <!--  END FOOTER  -->
The Combined Code

Now, after a brief description of our admin template. Below is the combined code of the snippets we have discuss above.

  <!--  BEGIN MAIN CONTAINER  -->
  <div class="bg-white font-mulish text-base text-gray antialiased dark:bg-[#101926]">
    <!-- BEGIN LOADER -->
    <div class="screen_loader fixed inset-0 z-[60] grid place-content-center bg-[#fafafa] dark:bg-[#060818]"> </div>
    <!-- END LOADER -->

    <div>
      <!--  BEGIN NAVBAR  -->
      <header></header>
      <!--  END NAVBAR  -->

      <div class="bg-[url(/assets/images/background.png)] bg-cover bg-center bg-no-repeat dark:bg-none">
        <!--  BEGIN CONTENT AREA  -->
        <div></div>
        <!--  END CONTENT AREA  -->

        <!-- BEGIN FOOTER -->
        <footer> </footer>
        <!-- END FOOTER -->
      </div>
    </div>
  </div>
  <!--  END MAIN CONTAINER  -->

Javascipt

Code Structure

This section will give you a brief description of our landing structure JS code.

1. custom.js : This is primary js file. It is necessary for the layout to work. It contains the code as follows :-

a. Theme change funtionality

b. Direction change funtionality 

                               
// Light - Dark Mode
const toggleTheme = (isFirstTime = false) => {
    let theme = window.localStorage.getItem("theme") || 'light';

    if (!isFirstTime) {
        theme = theme === "light" ? "dark" : "light";
    }
    window.localStorage.setItem("theme", theme);

    if (theme === "dark") {
        document.querySelector("body").classList.add("dark");
    } else {
        document.querySelector("body").classList.remove("dark");
    }
}

toggleTheme(true);

// RTL
const toggleDirection = (isFirstTime = false) => {
    let direction = window.localStorage.getItem("direction") || "ltr";

    if (!isFirstTime) {
        direction = direction === "ltr" ? "rtl" : "ltr";
    }
    window.localStorage.setItem("direction", direction);

    if (direction === "rtl") {
        document.querySelector("html").setAttribute("dir", "rtl");
    }
    else {
        document.querySelector("html").setAttribute("dir", "ltr");
    }
    if(!isFirstTime) {
        window.location.reload();
    }
}
toggleDirection(true);