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

Wiki updates #15

Merged
merged 31 commits into from
Nov 7, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
fc5c72f
updates levels, keywords-cloud, modal
PierreDillard Aug 5, 2024
537e2ab
add content-tagging-system.md
PierreDillard Aug 5, 2024
4a033ce
update content-tagging-system.md with spacing between code blocks
PierreDillard Aug 5, 2024
d855f73
tagging howtos section
PierreDillard Aug 5, 2024
c7cc8c3
improve toggle button style
PierreDillard Aug 5, 2024
591b1b9
add tooltips for switch level and search function/move the switch con…
PierreDillard Aug 6, 2024
894ee9f
tagg Howtos section
PierreDillard Aug 6, 2024
df8d1ee
add margin on md-typeset mark
PierreDillard Aug 7, 2024
0ee60b4
fix md in filters_general
PierreDillard Sep 3, 2024
21ca778
fix format error .md(code blocks) on Howtos
PierreDillard Sep 4, 2024
4272cb4
fix format error .md(code blocks) on MP4BOX
PierreDillard Sep 4, 2024
618edb9
fix format error .md(code blocks) on GPAC section
PierreDillard Sep 4, 2024
d0d29c3
Fix Format error .MD and collapse in Build,XML,Player sections
PierreDillard Sep 5, 2024
cfe2868
add Glossary/sink, Glossary/source
PierreDillard Sep 5, 2024
d236b64
add custom 404
PierreDillard Sep 6, 2024
910e5b6
fix 404 template
PierreDillard Sep 6, 2024
9315dea
add codec, bitrate & transcode in /glossary
PierreDillard Sep 6, 2024
1b55eb4
improve md format in encode.md, sink.md
PierreDillard Sep 6, 2024
8600e73
improve bitrate, codec, sink && source
PierreDillard Sep 9, 2024
9b4f834
Move TOC to the right, add settings icon and dropdown menu
PierreDillard Sep 23, 2024
d9687ef
fix nav-items display
PierreDillard Sep 24, 2024
38a1643
Fix sidebar collapse icons for navigation
PierreDillard Sep 24, 2024
722d92b
Updated modal to open on hover instead of click
PierreDillard Sep 25, 2024
a7650d5
update modal position
PierreDillard Sep 26, 2024
93a2acd
Adjust modal position for centered alignment
PierreDillard Sep 27, 2024
1f95023
Add error handling to event listeners and modal functions
PierreDillard Sep 30, 2024
db8d373
fix modal width
PierreDillard Oct 1, 2024
b299e66
Delete changements_diff_origin.txt
PierreDillard Oct 11, 2024
7993638
Improve modal behavior and dynamic filter display
PierreDillard Oct 11, 2024
393e68b
Merge branch 'wiki-updates' of github-pro:PierreDillard/wiki into wik…
PierreDillard Oct 11, 2024
f4146ed
Merge branch 'master' into wiki-updates
jeanlf Nov 7, 2024
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
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
.ignore/
site/
.venv/
venv/
__pycache__/
site.*
.DS_Store
node_modules/
137 changes: 137 additions & 0 deletions content-tagging-system.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@


# GPAC Wiki Content Tagging and Level Switch System

## Overview

The GPAC wiki implements a content tagging and level switch system to provide a customized reading experience for users with different levels of expertise. This system allows users to toggle between "Beginner" and "Expert" modes, affecting the visibility of content sections and keywords displayed.

## Purpose

The main goals of this system are:
1. To help users new to GPAC access simpler, more approachable content.
2. To provide more in-depth, technical content for experienced users.
3. To create a dynamic reading experience that adapts to the user's knowledge level.

## Implementation

### Content Tagging


Content tagging is implemented in Markdown files using the `attr_list` extension. Tags are applied to H1 headers (single `#` in Markdown) using the following syntax:

```markdown
# Section Title {: data-level="beginner" }
```

Available levels:
- `beginner`: Content suitable for newcomers to GPAC.
- If not specified: More advanced content (considered as expert level).

### Level Switch

The level switch is a toggle located in the "Settings" menu in the header of the user interface. It allows users to switch between "Beginner" and "Expert" modes.

Default setting: The default level is set to "Expert", displaying all documentation.

User preference storage: The selected level is stored in the browser's local storage, persisting between sessions.


## Functionality

### Content Visibility

When switching between levels:

. Expert mode:
- All sections are visible (in Howtos).
- The full Table of Contents (TOC) is displayed, including all sections and subsections.
- For filter options: all options are dispalyed.

2. Beginner mode:
- Only sections tagged as "beginner" are visible (in Howtos).
- Sections not explicitly tagged as "beginner" disappear(in Howtos).
- For filter options: options with the attribute `id="vsize" data-level="basic"` will be visible in beginner mode.


Example:

![Beginner](docs/images/ex_beginner.png)

Beginner mode: Only sections tagged as "beginner" are visible.

![Expert](docs/images/ex_expert.png)

Expert mode: All sections are visible.

### Keywords Cloud

The keywords cloud is dynamic and changes based on the selected level:

- In Expert mode: All keywords are displayed.
- In Beginner mode: Only keywords tagged as "beginner" or "all" are shown.

Keywords are defined in the `data/keywords.json` file with the following structure:

```json
{
"KEYWORD": {
"description": "Keyword description",
"level": "beginner"
}
}
```

When a user clicks on a keyword, a modal appears with the keyword's definition.

## Implementation Details

### Key Files

- `javascripts/levels.js`: Main logic for level switching and content filtering.
- `javascripts/domManipulation.js`: Handles DOM manipulation for showing/hiding content.

### Howtos Section

The level switching functionality is currently implemented only in the "Howtos" section of the documentation.


## Developer Guidelines

1. Tagging new content:
- Always tag H1 headers in Markdown files.
- Use the format: `# Title {: data-level="level" }` where `level` is "beginner".

- Untagged sections are considered "expert" by default.

2. Adding new keywords:
- Add new keywords to the `data/keywords.json` file.
- Include a description and appropriate level tag.

3. Testing:
- Test new content in both Beginner and Expert modes to ensure proper visibility.
- Verify that the TOC updates correctly when switching levels.
- Check that the keywords cloud updates appropriately.

## Best Practices for Content Formatting

When adding or editing content in the GPAC wiki, it's crucial to follow certain formatting practices to ensure readability and proper rendering of the documentation. One key aspect to pay attention to is the spacing between code blocks and other elements.

### Spacing Between Code Blocks

Always add a blank line between code blocks and surrounding text. This practice prevents rendering issues and improves readability.

#### Good Practice:

Example:

![Code block formatting issue](docs/images/good_format.png)

#### Bad Practice:

Avoid this:
Example:

![Code block formatting issue](docs/images/bad_format.png)


18 changes: 18 additions & 0 deletions docs/Build/Basic-Player-Application-using-GPAC.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,21 @@
---
tags:
- scene
- source
- input
- media
- data
- stream
- raw
- output
- frame
- compositor
- sink
- dump
---



## Objective

This example shows a basic GPAC player application. It takes an URL as input and outputs it in a terminal.
Expand Down
7 changes: 7 additions & 0 deletions docs/Build/Build-Introduction.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
---
tags:
- option
---



This section describes how to build GPAC from scratch and how to develop with it.

You can get pre-compiled binaries on [the GPAC website](https://gpac.io/downloads/gpac-nightly-builds/).
Expand Down
14 changes: 11 additions & 3 deletions docs/Build/GPAC-build-MP4Box-only-all-platforms.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,21 @@
---
tags:
- option
- data
---

## Build MP4Box with Visual Studio



# Build MP4Box with Visual Studio {: data-level="all"}

We published a minimal solution to build MP4Box.exe only, with zero dependency. No DLL to distribute.

You need Visual Studio 2010 or more recent (a pop-up will ask you to upgrade your projects, just accept). Open [build/msvc10/gpac\_mp4box\_mini.sln](https://github.com/gpac/gpac/blob/master/build/msvc10/gpac_mp4box_mini.sln) and build (Debug or Release).

That's all!

## Build MP4Box with Make
# Build MP4Box with Make

On your system, you need the following tools installed on your system:

Expand Down Expand Up @@ -103,7 +111,7 @@ make -j4

You can find more examples in [our TravisCI script](https://github.com/gpac/gpac/blob/master/.travis.yml).

## Next Step
# Next Step

We have started [a multimedia component-level build system called Zenbuild](https://github.com/gpac/zenbuild). Zenbuild builds FFmpeg/libav, VLC or GPAC with most of their features enabled (librtmp, jack, openHEVC, etc.). You can start using Zenbuild, it is fully operational!

23 changes: 23 additions & 0 deletions docs/Build/MP4-dmx-examples.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,26 @@
---
tags:
- mp4
- source
- sample
- block
- input
- media
- isomedia
- segment
- isobmff
- data
- stream
- frame
- buffer
- box
- rebuffer
- dash
- chunk
---



We have added to GPAC some sample applications demonstrating how to use GPAC to demux MP4 files.

They are not full applications, just examples taking some MP4 files as input and displaying some information about the media samples contained in the file.
Expand Down
11 changes: 10 additions & 1 deletion docs/Build/Upgrading.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,13 @@
# In source tree building
---
tags:
- input
- data
- source
---



# In source tree building {: data-level="all" }
If you build GPAC directly in the source tree (i.e., running `./configure && make` in the same directory as the configure script), the following steps must be done when upgrading your code base to a new version of GPAC, or when switching branches:

- uninstall any previous version of GPAC (optional, the build system as of 1.0 is independent from the presence of any other version of libgpac headers on the system)
Expand Down
22 changes: 17 additions & 5 deletions docs/Build/build/GPAC-Build-Guide-for-Android.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,24 @@
The Android build is a bit complicated. The method described here is the one used for the official Android builds. It is fairly rigid, with some hard-coded paths and versions. It should not be too hard to adapt it to one's own set up, but there is no guarantee that it will work as is on (for example) more recent versions of the ndk/sdk.
---
tags:
- input
- data
- source
- link
---

It was tested on Ubuntu 14 to 18.

The process has three main steps: set up the build environment, cross-compile the dependencies, build the GPAC apk.

In the following, we'll call the main working directory `<GPAC_ROOT_DIR>`.
!!! note
The Android build is a bit complicated. The method described here is the one used for the official Android builds. It is fairly rigid, with some hard-coded paths and versions. It should not be too hard to adapt it to one's own setup, but there is no guarantee that it will work as is on (for example) more recent versions of the ndk/sdk.

# Set up the build toolchain
It was tested on Ubuntu 14 to 18.

The process has three main steps: set up the build environment, cross-compile the dependencies, build the GPAC apk.

In the following, we'll call the main working directory `<GPAC_ROOT_DIR>`.


# Set up the build toolchain {: data-level="all"}

## JVM and tools

Expand Down
16 changes: 14 additions & 2 deletions docs/Build/build/GPAC-Build-Guide-for-Linux.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,23 @@
_Preliminary notes: the following instructions will be based on Ubuntu and Debian. It should be easily applicable to other distributions, the only changes should be name of the packages to be installed, and the package manager used._
---
tags:
- option
- data
- binary
---



!!! note
Preliminary notes: the following instructions will be based on Ubuntu and Debian. It should be easily applicable to other distributions, the only changes should be the name of the packages to be installed, and the package manager used.


GPAC is a modular piece of software which depends on third-party libraries. During the build process it will try to detect and leverage the installed third-party libraries on your system. Here are the instructions to:

* build GPAC easily (recommended for most users) from what's available on your system,
* build a minimal 'MP4Box' and 'gpac' (only contains GPAC core features like muxing and streaming),
* build a complete GPAC by rebuilding all the dependencies manually.

# General case for all builds
# General case for all builds {: data-level="all" }

## Development tools

Expand Down Expand Up @@ -185,6 +196,7 @@ If you already have a gpac version installed, or if you have already built gpac
<GPAC_ROOT_DIR>/gpac_public$ make uninstall
<GPAC_ROOT_DIR>/gpac_public$ make distclean
```

**before** running `./configure`.

### Install for developers
Expand Down
13 changes: 11 additions & 2 deletions docs/Build/build/GPAC-Build-Guide-for-MSYS-MinGW.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,15 @@
The following is the guide to build GPAC on Windows using MSYS2 and the MinGW gcc toolchain. It is a bit clunky and will probably only work on x64 and without cross-compilation.
---
tags:
- input
- data
- source
---

# Setting up


_The following is the guide to build GPAC on Windows using MSYS2 and the MinGW gcc toolchain. It is a bit clunky and will probably only work on x64 and without cross-compilation._

# Setting up {: data-level="all"}

## MSYS

Expand Down
13 changes: 11 additions & 2 deletions docs/Build/build/GPAC-Build-Guide-for-OSX.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,16 @@
Since the OSX build is essentially the same as the Linux build, this doc will be succinct. Please refer to the [Linux build guide](GPAC-Build-Guide-for-Linux) for further details.
---
tags:
- data
- encode
- encoder
---


# MP4Box only

_Since the OSX build is essentially the same as the Linux build, this doc will be succinct. Please refer to the [Linux build guide](GPAC-Build-Guide-for-Linux) for further details._


# MP4Box only {: data-level="all"}

Same as Linux:

Expand Down
19 changes: 16 additions & 3 deletions docs/Build/build/GPAC-Build-Guide-for-WASM.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,23 @@
---
tags:
- option
- source
- heif
- data
- frame
---



[**HOME**](Home) » [**Build**](Build-Introduction) » WASM

This page describes how to build GPAC for WASM/Emscripten.
_This page describes how to build GPAC for WASM/Emscripten._

!!! note
You can check a live demo at [https://wasm.gpac.io](https://wasm.gpac.io).

A live demo can be seen at [https://wasm.gpac.io](https://wasm.gpac.io)

# (Recommended) Use Docker
# (Recommended) Use Docker {: data-level="all"}

The easiest way to build GPAC for WASM is to use the provided Dockerfile at `build/docker/wasm.Dockerfile` in the GPAC repository.

Expand Down
Loading