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.

Sign up for GitHub

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

Develop page redesign. #81

Merged
merged 6 commits into from
May 5, 2024
Merged

Develop page redesign. #81

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9065b71
Develop page redesign.
IMB11 Apr 4, 2024
ffaa969
Merge branch 'main' into develop-redesign
IMB11 Apr 11, 2024
4da2728
Update develop.md
IMB11 Apr 25, 2024
9c08792
Merge branch 'main' into develop-redesign
IMB11 Apr 25, 2024
0edf4a3
Merge branch 'main' into develop-redesign
IMB11 May 3, 2024
eb98211
Cleanup
IMB11 May 3, 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
41 changes: 40 additions & 1 deletion _sass/fabric.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,19 @@ button, .button {
font-size: 20px;
font-weight: 700;
}
&.warning {
border: 2px solid $warning-color;

&:hover, &:focus {
background-color: darken($warning-color, 10%);
border-color: darken($warning-color, 10%);
}

&:active {
background-color: lighten($warning-color, 5%);
border-color: lighten($warning-color, 5%);
}
}

border-radius: 5px;
color: white !important;
Expand Down Expand Up @@ -143,7 +156,33 @@ p {

section {
padding-bottom: 12px;
margin-bottom: auto;
}

.button-group {
display: flex;
flex-direction: column;
gap: 8px;
}

.javadoc-selector {
margin-bottom: 8px;

select {
max-width: 100%; width: 100%;

border: 2px solid $button-color;
color: $text-color !important;
padding: 8px 8px;
text-align: center;
display: inline-block;
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
font-size: 16px;
background-color: transparent;

option {
background-color: $grey-color-very-dark;
}
}
}
}

Expand Down
1 change: 1 addition & 0 deletions assets/dark.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ $grey-color-dark: #6e7681;
$grey-color-very-dark: #30363d;

$button-color: #1f6feb;
$warning-color: #eb811f;

$content-width: 1024px;

Expand Down
1 change: 1 addition & 0 deletions assets/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
---

$button-color: #2D46B9;
$warning-color: #b96e2d;
$grey-color-very-dark: #30363d;

$content-width: 1024px;
Expand Down
65 changes: 44 additions & 21 deletions develop.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,57 @@
---
layout: page
layout: default
title: Develop
permalink: /develop/
topnav: true
---

This page contains a range of resources to help you create a new mod or maintain an existing mod.

### Getting started

* If you would like to create a new mod please see the [wiki](https://fabricmc.net/wiki/start/).

* Use the online [template mod generator](./template/).

* An up-to date template mod can be found on [github](https://github.com/FabricMC/fabric-example-mod).

* Install the [Fabric command line tools](./cli/).

* If you need some extra help we have a number of mod development channels on our [Discord](https://discord.gg/v6v4pMv).

### Latest Versions
# Develop

This page provides a curated selection of resources to support both new mod creation and the maintenance of existing projects.

If you require additional help, [the Fabric Discord server](https://discord.gg/v6v4pMv) offers dedicated mod development channels with resources and advice from the community.

<div class="home post-content">
<hr>
<section>
<div class="row-3">
<article class="column">
<h3>Getting Started</h3>
<section class="with-button-group">
<p class="component-body">If you want to learn how to create mods, you should refer to the wiki or the official documentation site.</p>
</section>
<div class="button-group">
<a class="button secondary" href="https://fabricmc.net/wiki/start">Fabric Wiki</a>
<a class="button secondary" href="https://docs.fabricmc.net/">Fabric Documentation</a>
</div>
</article>
<article class="column">
<h3>Project Templates</h3>
<section class="with-button-group">
<p>Project templates offer a standardized foundation for Fabric mods - allowing you to quickly create new projects.</p>
</section>
<div class="button-group">
<a class="button secondary" href="https://github.com/FabricMC/fabric-example-mod">Example Mod Repository</a>
<a class="button secondary" href="./cli/">Fabric Command Line Tools</a>
<a class="button secondary" href="./template/">Online Template Mod Generator</a>
</div>
</article>
<article class="column">
<h3>Javadoc</h3>
<section class="with-button-group">
<p>Easily access Javadoc for toolchain projects and the game, either online or directly within your IDE.</p>
</section>
<noscript style="color:red">You need Javascript to show the documentation links</noscript>
<div class="fabric-component" data-component="Documentation"></div>
</article>
</div>
</section>
<hr>
</div>

<noscript style="color:red">You need Javascript to show the latest Versions</noscript>
<div class="fabric-component" data-component="Versions"></div>

### Online documentation

<noscript style="color:red">You need Javascript to show the documentation links</noscript>
<div class="fabric-component" data-component="Documentation"></div>

{% assign cacheBust = site.time | date:'?v=%s' %}
<script type="text/javascript" src="{{ "/scripts/main.js" | relative_url | append: cacheBust }}"></script>
<link href="{{ "/scripts/style.css" | relative_url | append: cacheBust }}" rel="stylesheet">
46 changes: 20 additions & 26 deletions scripts/src/lib/Documentation.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,14 @@
getLoaderVersions,
} from "./Api";

function handleSelectChange(event: any, project: any) {
const selectedVersion = event.target.value;

if (selectedVersion.includes("Select")) return;

window.open(`https://maven.fabricmc.net/docs/${project.prefix}${selectedVersion}/`, '_blank');
}

function filterAndSortVersions(
versions: string[],
prefix: string,
Expand All @@ -31,22 +39,22 @@

return [
{
name: "Minecraft (yarn mappings)",
name: "Minecraft (Yarn)",
desc: "Javadoc documentation for Minecraft generated from the comments in the yarn mappings.",
prefix: "yarn-",
versions: filterAndSortVersions(
jdList,
"yarn-",
yarnVersions.map((v) => v.version)
),
selected: yarnVersions[0].version,
selected: "Select Version",
},
{
name: "Fabric API",
desc: "Javadoc documentation for Fabric API",
prefix: "fabric-api-",
versions: apiVersions,
selected: apiVersions[0],
selected: "Select Version",
},
{
name: "Fabric Loader",
Expand All @@ -57,7 +65,7 @@
"fabric-loader-",
loaderVersions.map((v) => v.version)
),
selected: loaderVersions[0].version,
selected: "Select Version",
},
// Disabled for now as the mixin JD css seems broken
// {
Expand All @@ -76,29 +84,15 @@
{#await data}
<p>Loading versions..</p>
{:then data}
<p>Online Javadoc is available for each project and the game itself using the links below, but also through your IDE directly.</p>
{#each data as project}
<!-- <h5>{project.name}</h5> -->
<!-- <p>{project.desc}</p> -->

<p>
{project.name}:
<select bind:value={project.selected} style="min-width: 200px">
{#each project.versions as version}
<option value={version}>{version}</option>
{/each}
</select>

<a
class="jdbutton"
href={"https://maven.fabricmc.net/docs/" +
project.prefix +
project.selected +
"/"}
>
Go to JavaDoc
</a>
</p>
<div class="javadoc-selector">
<select value="Select {project.name} Version" on:change={(event) => handleSelectChange(event, project)}>
<option>Select {project.name} Version</option>
{#each project.versions as version}
<option value={version}>{version}</option>
{/each}
</select>
</div>
{/each}
{:catch error}
<p style="color: red">Error: {error.message}</p>
Expand Down
28 changes: 19 additions & 9 deletions scripts/src/lib/Versions.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,10 @@
</script>

{#await gameVersions}
<p>Loading versions..</p>
<p>Loading versions...</p>
{:then gameVersions}
<h2>Latest Versions</h2>
<p>Select a Minecraft version to get the recommended versions of Fabric Loader, Yarn, and Fabric API for your <code>gradle.properties</code> file.</p>
<p>
Minecraft Version:
<select bind:value={minecraftVersion} style="min-width: 200px">
Expand All @@ -48,19 +50,25 @@ minecraft_version={minecraftVersion}
yarn_mappings={yarnVersion}
loader_version={loaderVersion}

#Fabric api
# Fabric API
fabric_version={apiVersion}
</code></pre>

<p><strong>Important Note:</strong> In some cases, such as snapshots or special releases, the <code>fabric-api</code> version might not align perfectly with your Minecraft version.</p>
<p>If you encounter issues, double-check the latest release of Fabric API on <a href="https://modrinth.com/mod/fabric-api">Modrinth</a> or <a href="https://minecraft.curseforge.com/projects/fabric/files">CurseForge</a>.</p>
</div>

<hr />

<h2>Automatically Update Mappings</h2>
<p>Keep your project up-to-date with the correct Yarn mappings using this automatic update command:</p>

<h4>Automatically update mappings</h4>
<p>Mappings can be auto updated by using the following command. See the <a href="https://fabricmc.net/wiki/tutorial:migratemappings">wiki page</a> for more help.</p>
<code class="copy-code">
gradlew migrateMappings --mappings "{yarnVersion}"
</code>

<code class="copy-code">
gradlew migrateMappings --mappings "{yarnVersion}"
</code>
<p>For more information on this command, you should refer to the <a href="https://fabricmc.net/wiki/tutorial:migratemappings">Updating Yarn Mappings</a> wiki page.</p>

<p>Note: The fabric-api version may not be the correct version for the given Minecraft version in some situations. Check the <a href="https://minecraft.curseforge.com/projects/fabric/files">CurseForge</a> page if you run into issues.</p>
{:catch error}
<p style="color: red">Error: {error.message}</p>
<p>
Expand All @@ -70,7 +78,9 @@ fabric_version={apiVersion}
</p>
{/await}

<h4>Loom</h4>
<hr />

<h2>Loom</h2>

<p>The recommended loom version is <strong>1.6-SNAPSHOT</strong>. This is usually defined near the top of your build.gradle file.</p>

Expand Down
Loading