Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

rearrange the intro some #3383

Merged
merged 5 commits into from
Nov 19, 2024
Merged
Show file tree
Hide file tree
Changes from 3 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
14 changes: 14 additions & 0 deletions astro/src/content/quickstarts/_landing-preamble.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
---
---
Learn how you would use FusionAuth to add authentication and authorization to an application in the framework or language of your choice in 15 minutes or less.

Each quickstart includes a complete runnable application and a shell application you can build out by following the step-by-step integration instructions. Application examples include: [traditional web applications](#web-application), [single-page applications](#spa), [mobile applications](#mobile-app), and [APIs protected with access tokens](#api).

These quickstarts help you rapidly evaluate FusionAuth and see how an integration works, rather than serve as a blueprint for integrating FusionAuth into your current system. For that, see the [Getting Started](/docs/get-started/) documentation.

You'll need the following to work through any quickstarts.

- Git, for cloning the example repository
- Docker, to run FusionAuth and its dependencies
- An editor, to update files
- The language, platform or framework; for example, XCode to run the iOS quickstart or Java for the Spring example
39 changes: 8 additions & 31 deletions astro/src/pages/docs/quickstarts/index.astro
Original file line number Diff line number Diff line change
@@ -1,40 +1,17 @@
---
import Layout from "../../../layouts/Quickstart.astro";
import Section from "../../../components/quickstarts/QuickstartSection.astro"
import Preamble from "../../../content/quickstarts/_landing-preamble.md";
import { quickstartSections } from './quickstart-sections';
---

<Layout frontmatter={{disableTOC: true}} title="Quickstarts" description="Explore step-by-step quickstart guides from FusionAuth to seamlessly integrate authentication into your application." >
<div class="block group rounded-lg">
<div class="flex object-fill justify-between">
<section>
<p class="font-normal text-s">
Learn how you'd use FusionAuth to add authentication and authorization to an application in the framework or language of your choice in 15 minutes or less.
</p>
<p class="font-normal text-s">
Each quickstart includes a complete runnable application and a shell application you can build out by following the step-by-step integration instructions. Application examples include: <a href='#web-application'>traditional web applications</a>, <a href='#spa'>single-page applications</a>, <a href='#mobile-app'>mobile applications</a>, and <a href='#api'>APIs protected with access tokens</a>.
</p>
<p class="font-normal text-s">
These quickstarts help you rapidly evaluate FusionAuth and see how an integration works, rather than serve as a blueprint for integrating FusionAuth into your current system. For that, see the <a href='/docs/get-started/'>Getting Started</a> documentation.
</p>
</section>
<img class="ml-50 my-0 h-28 lg:h-52 self-end" src="/img/icons/quickstart.svg" alt="quickstart">
</div>
<div class="flex object-fill justify-between">
<section>
<p class="font-normal text-s">
You'll need the following to work through any quickstarts.
</p>
<ul>
<li>Git, for cloning the example repository</li>
<li>Docker, to run FusionAuth and its dependencies</li>
<li>An editor, to update files</li>
<li>The language, platform or framework; for example, XCode to run the iOS quickstart or Java for the Spring example</li>
</ul>
</section>
</div>
const image = "/img/icons/quickstart.svg";

const title = 'Quickstarts';
const section = ''; // Change this to "Quickstarts" if you want to give the index page a different title;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here is where we can change what title and "section" are in the top of the page

---

</div>
<Layout frontmatter={{disableTOC: true}} {section} icon={image} darkIcon={image} {title} description="Explore step-by-step quickstart guides from FusionAuth to seamlessly integrate authentication into your application." >
<Preamble/>
{ quickstartSections && quickstartSections.map(section =>
<div class="mb-7">
<Section title={section.title} icon={section.icon} desc={section.desc} anchorTag={section.anchorTag} quickstarts={section.articles}/>
Expand Down