first commit
This commit is contained in:
@@ -0,0 +1,316 @@
|
||||
|
||||
|
||||
|
||||
import HeaderThree from "../../../components/header/HeaderThree";
|
||||
import Image from "next/image";
|
||||
import DocSidebar from "@/components/docs/DocSidebar";
|
||||
import DocScrollNav from "@/components/docs/DocScrollNav";
|
||||
export const metadata = {
|
||||
title: 'Doc Full Width || Deski-Saas & Software Nextjs Template',
|
||||
description: `Unleash the full potential of your software projects with our SaaS-focused Next.js template. Create engaging blogs, showcase your talented team, set up an online shop, provide helpful FAQs, and offer exceptional services with our feature-rich solution. Elevate your SaaS and software development with ease and drive growth. Try it now and take your projects to new heights.`,
|
||||
}
|
||||
const DocFullWidth = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
{/* End Page SEO Content */}
|
||||
|
||||
<HeaderThree />
|
||||
{/* End Header */}
|
||||
|
||||
{/* =============================================
|
||||
Documentation
|
||||
============================================== */}
|
||||
<div className="doc-container full-width top-border">
|
||||
<div className="clearfix">
|
||||
<div className="row flex-xl-nowrap no-gutters">
|
||||
{/* ****************************** DOC SIDEBAR ********************************* */}
|
||||
|
||||
<DocSidebar/>
|
||||
|
||||
{/* /.doc-sidebar */}
|
||||
|
||||
{/* ****************************** DOC MAIN BODY ********************************* */}
|
||||
<main className="col-md-9 col-xl-8 doc-main-body">
|
||||
<h2>Installation</h2>
|
||||
<div id="installing">
|
||||
<h3>Installing deski</h3>
|
||||
<p>
|
||||
Deski was designed from the ground up to be easily installed
|
||||
and used to get your website up and running quickly.
|
||||
</p>
|
||||
<div className="mark-blue">
|
||||
<pre>
|
||||
<span className="s1">npm</span> i deski-cli-g
|
||||
</pre>
|
||||
</div>
|
||||
{/* /.mark-blue */}
|
||||
</div>
|
||||
<div id="verifying">
|
||||
<h3>Verifying Installation</h3>
|
||||
<p>
|
||||
If you want to write the documentation in the{" "}
|
||||
<code>./docs</code> subdirectory, you can use the{" "}
|
||||
<code>init</code> command.
|
||||
</p>
|
||||
<div className="mark-red">
|
||||
<pre>deski init./docs</pre>
|
||||
</div>
|
||||
{/* /.mark-red */}
|
||||
<p>
|
||||
Create a project, if none exists, and change your directory to
|
||||
this project's root.
|
||||
</p>
|
||||
<p>
|
||||
You will be creating the docs in this directory. The root
|
||||
directory may contain other files. The Docusaurus installation
|
||||
script will create two new directories: <code>docs</code> and{" "}
|
||||
<code>website.</code>
|
||||
</p>
|
||||
<div className="mark-red">
|
||||
<pre>some text missing</pre>
|
||||
</div>
|
||||
{/* /.mark-red */}
|
||||
<div className="mark-red">
|
||||
<pre>
|
||||
if you don't have Node 1.8.2+ or if you prefer to install
|
||||
deski globally, run{" "}
|
||||
<span className="s1">yarn global add deski-init</span> or{" "}
|
||||
<span className="s1">npm install --global deski-init</span>.
|
||||
After that, run docusaurus-init.
|
||||
</pre>
|
||||
</div>
|
||||
{/* /.mark-blue */}
|
||||
</div>
|
||||
<div id="manual-installation">
|
||||
<h3>Manual Installation </h3>
|
||||
<p>
|
||||
If you don't like <code>npm</code> or have trouble installing
|
||||
the tool, you can manually create <code>index.html</code>:
|
||||
</p>
|
||||
<pre className="bg-black">
|
||||
<code>
|
||||
<span className="s1"><!-- index.html --></span>
|
||||
{"\n"}
|
||||
<span className="s1"><!DOCTYPE html></span>
|
||||
{"\n"}
|
||||
<span className="s2"><html></span>
|
||||
{"\n"}
|
||||
<span className="s2"><head></span>
|
||||
{"\n"}
|
||||
<span className="s2">
|
||||
{"\n"}
|
||||
<meta http-equiv="
|
||||
<span className="s3">X-UA-Compatible</span>"
|
||||
<span className="s1">content</span>="
|
||||
<span className="s3">IE=edge,chrome=1</span>">{"\n"}
|
||||
</span>
|
||||
<span className="s2">
|
||||
<meta name="<span className="s3">viewport</span>"{" "}
|
||||
<span className="s1">content</span>="
|
||||
<span className="s3">
|
||||
width=device-width,initial-scale=1
|
||||
</span>
|
||||
">{"\n"}
|
||||
</span>
|
||||
<span className="s2">
|
||||
<meta charset="<span className="s3">UTF-8</span>">
|
||||
{"\n"}
|
||||
</span>
|
||||
<span className="s2">
|
||||
<link rel="stylesheet"{" "}
|
||||
<span className="s1">href</span>
|
||||
="
|
||||
<span className="s3">
|
||||
//cdn.jsdelivr.net/npm/docsify@4/themes/vue.css
|
||||
</span>
|
||||
">{"\n"}
|
||||
</span>
|
||||
<span className="s2"></head></span>
|
||||
{"\n"}
|
||||
<span className="s2"><body></span>
|
||||
{"\n"}
|
||||
{" "}
|
||||
<span className="s2">
|
||||
div id="<span className="s3">app</span>">{"\n"}
|
||||
</span>
|
||||
<span className="s2"></div></span>
|
||||
{"\n"}
|
||||
|
||||
<span className="s2"><script></span>
|
||||
{"\n"}
|
||||
<span className="s2">
|
||||
window.$docsify = {"{"}
|
||||
</span>{" "}
|
||||
{"\n"}
|
||||
<span className="s2">
|
||||
//....
|
||||
</span>
|
||||
<span className="s2">
|
||||
{"\n"}
|
||||
{"}"}
|
||||
</span>{" "}
|
||||
{"\n"}
|
||||
<span className="s2"></script></span>
|
||||
{"\n"}
|
||||
|
||||
<span className="s2">
|
||||
<script src="
|
||||
<span className="s3">
|
||||
//cdn.jsdelivr.net/npm/docsify@4
|
||||
</span>
|
||||
">
|
||||
</span>
|
||||
<span className="s2"></script></span>
|
||||
{"\n"}
|
||||
<span className="s2"></body></span>
|
||||
{"\n"}
|
||||
<span className="s2"></html></span>
|
||||
</code>
|
||||
</pre>
|
||||
<div className="mark-blue">
|
||||
<pre>
|
||||
Note that in both of the examples below, docsify URLs will
|
||||
need to be manually updated when a new version of deski is
|
||||
released (e.g. some text missing ). Check the docsify
|
||||
website periodically to see if a new major version has been
|
||||
released.
|
||||
</pre>
|
||||
</div>
|
||||
{/*/.mark-blue */}
|
||||
</div>
|
||||
<div id="running-example">
|
||||
<h3>Running Example Website</h3>
|
||||
<p>
|
||||
After running the Deski initialization script, docusaurus-init
|
||||
as described in the Installation section, you will have a
|
||||
runnable, example website to use as your site's base. To run:
|
||||
</p>
|
||||
<ul className="list-item-one">
|
||||
<li>
|
||||
It can have an identifier which is either a number or a
|
||||
string.
|
||||
</li>
|
||||
<li>
|
||||
Loads navbar from the Markdown file <code>_navbar.md</code>{" "}
|
||||
if true, else loads it from the path specified.
|
||||
</li>
|
||||
<li>
|
||||
Load the example site at <code>http://localhost:3000</code>{" "}
|
||||
if it did not already open automatically. If port{" "}
|
||||
<code>3000</code> has already been taken, another port will
|
||||
be used. Look at the console messages to see which
|
||||
</li>
|
||||
</ul>
|
||||
<Image width={1007} height={602} style={{height:'fit-content'}}
|
||||
src="/images/doc/img_01.png"
|
||||
alt="doc"
|
||||
className="img-meta"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="launching-server">
|
||||
<h3>Launching the server </h3>
|
||||
<p>
|
||||
If you are behind a corporate proxy, you need to disable it
|
||||
for the development server requests. It can be using the{" "}
|
||||
<code>NO_PROXY</code> environment variable.
|
||||
</p>
|
||||
<div className="mark-red">
|
||||
<pre>
|
||||
window.$deski = {"{"}
|
||||
<code>
|
||||
{" "}
|
||||
<br /> name:{" "}
|
||||
<span className="s1">
|
||||
<code>'<span>deski</span>'</code>
|
||||
</span>
|
||||
, <br />
|
||||
</code>
|
||||
{"}"}
|
||||
</pre>
|
||||
</div>
|
||||
{/* /.mark-red */}
|
||||
</div>
|
||||
|
||||
<div id="loading-dialog">
|
||||
<h3>Loading dialog</h3>
|
||||
<div className="mark-red">
|
||||
<pre>
|
||||
<!-- index.html --> <br />
|
||||
<br />
|
||||
<div id="<span className="s1">app</span>">Please
|
||||
wait...</div>
|
||||
</pre>
|
||||
</div>{" "}
|
||||
{/* /.mark-red */}
|
||||
<p>
|
||||
You should set the <code>data-app</code> attribute if you
|
||||
changed <code>el</code> :
|
||||
</p>
|
||||
<div className="mark-blue">
|
||||
<pre>
|
||||
<!-- index.html --> <br />
|
||||
<br />
|
||||
<div data-app id="<span className="s1">main</span>
|
||||
">Please wait...</div> <br />
|
||||
<span className="s2"><script></span>
|
||||
<br />
|
||||
{" "}
|
||||
<span className="s2">
|
||||
window.$docsify = {"{"} <br />
|
||||
</span>
|
||||
{" "}
|
||||
<span className="s2">
|
||||
el: '<span className="s1">#main</span>'
|
||||
</span>
|
||||
<span className="s2">
|
||||
{" "}
|
||||
<br /> {"}"}
|
||||
</span>{" "}
|
||||
<br />
|
||||
<span className="s2"></script></span>
|
||||
</pre>
|
||||
</div>
|
||||
{/* /.mark-blue */}
|
||||
<p>You can update to the latest version of Docusaurus by:</p>
|
||||
<pre className="bg-black">
|
||||
<code>
|
||||
<span>
|
||||
yarn <span className="s3">upgrade</span> deski --latest
|
||||
</span>
|
||||
</code>
|
||||
</pre>
|
||||
{/* /.bg-black */}
|
||||
</div>
|
||||
|
||||
<div className="doc-pagination pt-40">
|
||||
<ul className="d-flex align-items-center justify-content-between">
|
||||
<li className="d-flex align-items-center">
|
||||
<a href="#">
|
||||
<i className="fa fa-angle-left" aria-hidden="true"></i>
|
||||
</a>
|
||||
|
||||
<span>Quick Start</span>
|
||||
</li>
|
||||
<li className="d-flex align-items-center">
|
||||
<span>Site Preparation</span>
|
||||
<a href="#">
|
||||
<i className="fa fa-angle-right" aria-hidden="true"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<DocScrollNav/>
|
||||
{/* End Right Sidebar Menu */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DocFullWidth;
|
||||
Reference in New Issue
Block a user