1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-22 06:19:38 +02:00
This commit is contained in:
Sean Morley 2024-07-08 17:10:50 -04:00
parent 3f92580849
commit adcf8a7da4
22 changed files with 52 additions and 359 deletions

View file

@ -0,0 +1,8 @@
{
"label": "Installation 🖥️",
"position": 2,
"link": {
"type": "generated-index",
"description": "How to get AdventureLog installed and setup."
}
}

View file

@ -1,8 +1,8 @@
--- ---
sidebar_position: 6 sidebar_position: 3
--- ---
# Congratulations! # Congratulations! 🎉
You have just learned the **basics of Docusaurus** and made some changes to the **initial template**. You have just learned the **basics of Docusaurus** and made some changes to the **initial template**.

View file

@ -0,0 +1,5 @@
---
sidebar_position: 1
---
# Docker 🐋

View file

@ -0,0 +1,5 @@
---
sidebar_position: 2
---
# Local 🖥️

View file

@ -0,0 +1,8 @@
{
"label": "Usage ✈️",
"position": 3,
"link": {
"type": "generated-index",
"description": "How to use AdventureLog."
}
}

View file

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 25 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 27 KiB

Before After
Before After

View file

@ -2,9 +2,9 @@
sidebar_position: 1 sidebar_position: 1
--- ---
# Tutorial Intro # Intro 1
Let's discover **Docusaurus in less than 5 minutes**. This tutorial will guide you how to get AdventureLog up and running on your local machine quickly and easily.
## Getting Started ## Getting Started

View file

@ -1,8 +0,0 @@
{
"label": "Tutorial - Basics",
"position": 2,
"link": {
"type": "generated-index",
"description": "5 minutes to learn the most important Docusaurus concepts."
}
}

View file

@ -1,34 +0,0 @@
---
sidebar_position: 3
---
# Create a Blog Post
Docusaurus creates a **page for each blog post**, but also a **blog index page**, a **tag system**, an **RSS** feed...
## Create your first Post
Create a file at `blog/2021-02-28-greetings.md`:
```md title="blog/2021-02-28-greetings.md"
---
slug: greetings
title: Greetings!
authors:
- name: Joel Marcey
title: Co-creator of Docusaurus 1
url: https://github.com/JoelMarcey
image_url: https://github.com/JoelMarcey.png
- name: Sébastien Lorber
title: Docusaurus maintainer
url: https://sebastienlorber.com
image_url: https://github.com/slorber.png
tags: [greetings]
---
Congratulations, you have made your first post!
Feel free to play around and edit this post as much as you like.
```
A new blog post is now available at [http://localhost:3000/blog/greetings](http://localhost:3000/blog/greetings).

View file

@ -1,57 +0,0 @@
---
sidebar_position: 2
---
# Create a Document
Documents are **groups of pages** connected through:
- a **sidebar**
- **previous/next navigation**
- **versioning**
## Create your first Doc
Create a Markdown file at `docs/hello.md`:
```md title="docs/hello.md"
# Hello
This is my **first Docusaurus document**!
```
A new document is now available at [http://localhost:3000/docs/hello](http://localhost:3000/docs/hello).
## Configure the Sidebar
Docusaurus automatically **creates a sidebar** from the `docs` folder.
Add metadata to customize the sidebar label and position:
```md title="docs/hello.md" {1-4}
---
sidebar_label: 'Hi!'
sidebar_position: 3
---
# Hello
This is my **first Docusaurus document**!
```
It is also possible to create your sidebar explicitly in `sidebars.js`:
```js title="sidebars.js"
export default {
tutorialSidebar: [
'intro',
// highlight-next-line
'hello',
{
type: 'category',
label: 'Tutorial',
items: ['tutorial-basics/create-a-document'],
},
],
};
```

View file

@ -1,43 +0,0 @@
---
sidebar_position: 1
---
# Create a Page
Add **Markdown or React** files to `src/pages` to create a **standalone page**:
- `src/pages/index.js``localhost:3000/`
- `src/pages/foo.md``localhost:3000/foo`
- `src/pages/foo/bar.js``localhost:3000/foo/bar`
## Create your first React Page
Create a file at `src/pages/my-react-page.js`:
```jsx title="src/pages/my-react-page.js"
import React from 'react';
import Layout from '@theme/Layout';
export default function MyReactPage() {
return (
<Layout>
<h1>My React page</h1>
<p>This is a React page</p>
</Layout>
);
}
```
A new page is now available at [http://localhost:3000/my-react-page](http://localhost:3000/my-react-page).
## Create your first Markdown Page
Create a file at `src/pages/my-markdown-page.md`:
```mdx title="src/pages/my-markdown-page.md"
# My Markdown page
This is a Markdown page
```
A new page is now available at [http://localhost:3000/my-markdown-page](http://localhost:3000/my-markdown-page).

View file

@ -1,31 +0,0 @@
---
sidebar_position: 5
---
# Deploy your site
Docusaurus is a **static-site-generator** (also called **[Jamstack](https://jamstack.org/)**).
It builds your site as simple **static HTML, JavaScript and CSS files**.
## Build your site
Build your site **for production**:
```bash
npm run build
```
The static files are generated in the `build` folder.
## Deploy your site
Test your production build locally:
```bash
npm run serve
```
The `build` folder is now served at [http://localhost:3000/](http://localhost:3000/).
You can now deploy the `build` folder **almost anywhere** easily, **for free** or very small cost (read the **[Deployment Guide](https://docusaurus.io/docs/deployment)**).

View file

@ -1,152 +0,0 @@
---
sidebar_position: 4
---
# Markdown Features
Docusaurus supports **[Markdown](https://daringfireball.net/projects/markdown/syntax)** and a few **additional features**.
## Front Matter
Markdown documents have metadata at the top called [Front Matter](https://jekyllrb.com/docs/front-matter/):
```text title="my-doc.md"
// highlight-start
---
id: my-doc-id
title: My document title
description: My document description
slug: /my-custom-url
---
// highlight-end
## Markdown heading
Markdown text with [links](./hello.md)
```
## Links
Regular Markdown links are supported, using url paths or relative file paths.
```md
Let's see how to [Create a page](/create-a-page).
```
```md
Let's see how to [Create a page](./create-a-page.md).
```
**Result:** Let's see how to [Create a page](./create-a-page.md).
## Images
Regular Markdown images are supported.
You can use absolute paths to reference images in the static directory (`static/img/docusaurus.png`):
```md
![Docusaurus logo](/img/docusaurus.png)
```
![Docusaurus logo](/img/docusaurus.png)
You can reference images relative to the current file as well. This is particularly useful to colocate images close to the Markdown files using them:
```md
![Docusaurus logo](./img/docusaurus.png)
```
## Code Blocks
Markdown code blocks are supported with Syntax highlighting.
````md
```jsx title="src/components/HelloDocusaurus.js"
function HelloDocusaurus() {
return <h1>Hello, Docusaurus!</h1>;
}
```
````
```jsx title="src/components/HelloDocusaurus.js"
function HelloDocusaurus() {
return <h1>Hello, Docusaurus!</h1>;
}
```
## Admonitions
Docusaurus has a special syntax to create admonitions and callouts:
```md
:::tip My tip
Use this awesome feature option
:::
:::danger Take care
This action is dangerous
:::
```
:::tip My tip
Use this awesome feature option
:::
:::danger Take care
This action is dangerous
:::
## MDX and React Components
[MDX](https://mdxjs.com/) can make your documentation more **interactive** and allows using any **React components inside Markdown**:
```jsx
export const Highlight = ({children, color}) => (
<span
style={{
backgroundColor: color,
borderRadius: '20px',
color: '#fff',
padding: '10px',
cursor: 'pointer',
}}
onClick={() => {
alert(`You clicked the color ${color} with label ${children}`)
}}>
{children}
</span>
);
This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !
This is <Highlight color="#1877F2">Facebook blue</Highlight> !
```
export const Highlight = ({children, color}) => (
<span
style={{
backgroundColor: color,
borderRadius: '20px',
color: '#fff',
padding: '10px',
cursor: 'pointer',
}}
onClick={() => {
alert(`You clicked the color ${color} with label ${children}`);
}}>
{children}
</span>
);
This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !
This is <Highlight color="#1877F2">Facebook blue</Highlight> !

View file

@ -1,7 +0,0 @@
{
"label": "Tutorial - Extras",
"position": 3,
"link": {
"type": "generated-index"
}
}

View file

@ -92,7 +92,7 @@ const config: Config = {
title: "Docs", title: "Docs",
items: [ items: [
{ {
label: "Tutorial", label: "Intro",
to: "/docs/intro", to: "/docs/intro",
}, },
], ],

View file

@ -1,49 +1,45 @@
import clsx from 'clsx'; import clsx from "clsx";
import Heading from '@theme/Heading'; import Heading from "@theme/Heading";
import styles from './styles.module.css'; import styles from "./styles.module.css";
type FeatureItem = { type FeatureItem = {
title: string; title: string;
Svg: React.ComponentType<React.ComponentProps<'svg'>>; Svg: React.ComponentType<React.ComponentProps<"svg">>;
description: JSX.Element; description: JSX.Element;
}; };
const FeatureList: FeatureItem[] = [ const FeatureList: FeatureItem[] = [
{ {
title: 'Easy to Use', title: "Log Your Travels",
Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default, Svg: require("@site/static/img/undraw_explore.svg").default,
description: ( description: (
<> <>
Docusaurus was designed from the ground up to be easily installed and AdventureLog is a simple way to log your travels and share them with the
used to get your website up and running quickly. world. You can add photos, notes, and more to your logs.
</> </>
), ),
}, },
{ {
title: 'Focus on What Matters', title: "Track Your World Travel",
Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default, Svg: require("@site/static/img/undraw_adventure.svg").default,
description: ( description: (
<> <>
Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go Keep track of the countries you've visited, the regions you've explored,
ahead and move your docs into the <code>docs</code> directory. and the places you've been. You can also see your travel stats and
milestones (coming soon).
</> </>
), ),
}, },
{ {
title: 'Powered by React', title: "View a Map of Your Travels",
Svg: require('@site/static/img/undraw_docusaurus_react.svg').default, Svg: require("@site/static/img/undraw_map_dark.svg").default,
description: ( description: <>See a map of all the places you've been.</>,
<>
Extend or customize your website layout by reusing React. Docusaurus can
be extended while reusing the same header and footer.
</>
),
}, },
]; ];
function Feature({title, Svg, description}: FeatureItem) { function Feature({ title, Svg, description }: FeatureItem) {
return ( return (
<div className={clsx('col col--4')}> <div className={clsx("col col--4")}>
<div className="text--center"> <div className="text--center">
<Svg className={styles.featureSvg} role="img" /> <Svg className={styles.featureSvg} role="img" />
</div> </div>

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 18 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 40 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.6 KiB