mirror of
https://github.com/PretendoNetwork/website.git
synced 2026-07-01 00:50:42 -05:00
feat: install platform selection w/ icons, subpage router support
This commit is contained in:
Ash Monty
parent
74c5a69405
commit
3f56ae3f9b
5
docs/en-US/install/citra.md
Normal file
5
docs/en-US/install/citra.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
# Citra
|
||||
|
||||
At the moment Citra does not support true online play, so it doesn't work with Pretendo. Moreover, it shows no sign of supporting true play in the future.
|
||||
|
||||
Mikage, a 3DS emulator for mobile devices, may provide support in the future, though this is far from certain.
|
||||
|
|
@ -181,6 +181,39 @@ a.logo-link {
|
|||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
.platform-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 24px;
|
||||
margin-top: 36px;
|
||||
}
|
||||
|
||||
.platform-grid a {
|
||||
text-decoration: none;
|
||||
background: var(--bg-shade-3);
|
||||
border-radius: 12px;
|
||||
color: var(--text-shade-4);
|
||||
display: grid;
|
||||
grid-template-rows: auto fit-content(100%);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 36px;
|
||||
padding-bottom: 24px;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.platform-grid a img {
|
||||
width: 100%;
|
||||
max-width: 216px;
|
||||
height: auto;
|
||||
max-height: 184px;
|
||||
}
|
||||
.platform-grid a span {
|
||||
margin-top: auto;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
/*
|
||||
@media screen and (max-width: 1080px) {
|
||||
.docs-wrapper .sidebar .section {
|
||||
|
|
|
|||
1
public/assets/images/3ds.svg
Normal file
1
public/assets/images/3ds.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 605.91 691.61"><defs><style>.d{stroke-width:2px;}.d,.e,.f,.g,.h,.i,.j,.k,.l{stroke:#673db6;}.d,.e,.f,.g,.h,.i,.j,.k,.l,.m{stroke-miterlimit:10;}.d,.g,.l{fill:none;}.n{fill:#e4d8fd;}.e{stroke-width:5.5px;}.e,.h,.i,.j{fill:#cab1fb;}.f{stroke-width:9px;}.f,.k,.o{fill:#9d6ff3;}.p{fill:#673db6;}.g{stroke-width:4px;}.h{stroke-width:5px;}.i{stroke-width:3px;}.j{stroke-width:6px;}.k{stroke-width:8px;}.l{stroke-width:2.5px;}.m{fill:#fff;stroke:#fff;stroke-width:44px;}</style></defs><g id="a"/><g id="b"><g id="c"><g><path class="m" d="M90.25,345.61c-37.7,0-68.25,30.56-68.25,68.25v187.49c0,37.7,30.56,68.25,68.25,68.25h425.41c37.7,0,68.25-30.56,68.25-68.25v-187.49c0-37.7-30.56-68.25-68.25-68.25v.39c37.7,0,68.25-30.56,68.25-68.25V90.25c0-37.7-30.56-68.25-68.25-68.25H90.25c-37.7,0-68.25,30.56-68.25,68.25v187.49c0,37.7,30.56,68.25,68.25,68.25"/><g><rect class="p" x="22" y="21.7" width="561.91" height="324" rx="68.25" ry="68.25"/><rect class="n" x="31.45" y="30.94" width="543.02" height="285.52" rx="59.11" ry="59.11"/><rect class="k" x="116" y="45.35" width="373.91" height="256.7" rx="4.75" ry="4.75"/><rect class="p" x="22" y="345.31" width="561.91" height="324" rx="68.25" ry="68.25" transform="translate(605.91 1014.62) rotate(180)"/><rect class="n" x="31.45" y="355.39" width="543.02" height="303.85" rx="60.97" ry="60.97" transform="translate(605.91 1014.62) rotate(180)"/><rect class="f" x="140.9" y="378.96" width="324.11" height="256.7" rx="4.43" ry="4.43" transform="translate(605.91 1014.62) rotate(180)"/><rect class="o" x="140.9" y="326.04" width="324.11" height="19.76" rx="9.88" ry="9.88" transform="translate(605.91 671.85) rotate(180)"/><circle class="h" cx="522.38" cy="432.83" r="14.56"/><circle class="h" cx="491.19" cy="463.88" r="14.56"/><circle class="h" cx="522.38" cy="494.94" r="14.56"/><circle class="h" cx="552.87" cy="463.88" r="14.56"/><circle class="i" cx="493.35" cy="572.91" r="10.87"/><circle class="i" cx="493.35" cy="610.14" r="10.87"/><circle class="i" cx="491.19" cy="399.83" r="10.87"/><circle class="h" cx="104.03" cy="610.14" r="13.33"/><g><path class="e" d="M94.83,532.58v16.82c0,3.32-2.69,6.01-6.01,6.01h-10.51c-3.32,0-6.01-2.69-6.01-6.01v-16.82h-16.52c-3.32,0-6.01-2.69-6.01-6.01v-10.51c0-3.32,2.69-6.01,6.01-6.01h16.52v-16.82c0-3.32,2.69-6.01,6.01-6.01h10.51c3.32,0,6.01,2.69,6.01,6.01v16.82h16.52c3.32,0,6.01,2.69,6.01,6.01v10.51c0,3.32-2.69,6.01-6.01,6.01h-16.52Z"/><line class="l" x1="83.57" y1="510.05" x2="83.57" y2="495.11"/><line class="l" x1="94.83" y1="521.31" x2="109.77" y2="521.31"/><line class="l" x1="83.57" y1="532.58" x2="83.57" y2="547.51"/><line class="l" x1="72.3" y1="521.31" x2="57.36" y2="521.31"/></g><g><circle class="j" cx="83.57" cy="419.77" r="24.09"/><circle class="d" cx="83.57" cy="419.77" r="37.04"/></g><circle class="g" cx="302.96" cy="335.92" r="5.64"/><circle class="p" cx="343.97" cy="335.92" r="2.39"/></g></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
1
public/assets/images/cemu.svg
Normal file
1
public/assets/images/cemu.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 478.83 478.83"><defs><style>.d{fill:#fff;}.e{fill:#9d6ff3;}</style></defs><g id="a"/><g id="b"><g id="c"><g><rect class="d" width="478.83" height="478.83" rx="123.95" ry="123.95"/><rect class="e" x="20.37" y="20.37" width="438.1" height="438.1" rx="111.02" ry="111.02"/><path class="d" d="M342.8,293l44.76,11.3c-9.38,36.76-26.26,64.79-50.64,84.09-24.38,19.3-54.18,28.95-89.4,28.95s-66.1-7.42-88.94-22.26c-22.84-14.84-40.22-36.34-52.14-64.48-11.92-28.15-17.88-58.37-17.88-90.67,0-35.22,6.73-65.94,20.19-92.17,13.46-26.22,32.61-46.14,57.45-59.75,24.84-13.61,52.18-20.42,82.02-20.42,33.83,0,62.29,8.62,85.36,25.84,23.07,17.23,39.14,41.45,48.22,72.67l-44.07,10.38c-7.84-24.61-19.23-42.53-34.14-53.75-14.92-11.23-33.68-16.84-56.29-16.84-25.99,0-47.72,6.23-65.17,18.69-17.46,12.46-29.73,29.18-36.8,50.18-7.08,21-10.61,42.65-10.61,64.94,0,28.76,4.19,53.87,12.57,75.33,8.38,21.46,21.42,37.49,39.1,48.1,17.69,10.61,36.83,15.92,57.45,15.92,25.07,0,46.29-7.23,63.68-21.69,17.38-14.46,29.14-35.91,35.3-64.37Z"/></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
1
public/assets/images/citra.svg
Normal file
1
public/assets/images/citra.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.1 KiB |
1
public/assets/images/wiiu-gamepad.svg
Normal file
1
public/assets/images/wiiu-gamepad.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 587.02 330.39"><defs><style>.d{stroke-width:2px;}.d,.e,.f,.g,.h,.i,.j,.k,.l,.m,.n{stroke:#673db6;}.d,.e,.f,.g,.h,.i,.j,.k,.l,.m,.n,.o{stroke-miterlimit:10;}.d,.g,.l{fill:none;}.e{stroke-width:5.5px;}.e,.i,.j,.k,.m{fill:#cab1fb;}.f,.h{fill:#9d6ff3;}.f,.n{stroke-width:9px;}.g,.m{stroke-width:4px;}.h,.j{stroke-width:3px;}.i{stroke-width:5px;}.k{stroke-width:6px;}.l{stroke-width:2.5px;}.n{fill:#e4d8fd;}.o{fill:#fff;stroke:#fff;stroke-width:44px;}</style></defs><g id="a"/><g id="b"><g id="c"><g><path class="o" d="M31.65,67.79c-6.16,11.69-9.65,25.01-9.65,39.15v117.38c0,46.43,37.64,84.07,84.07,84.07H480.95c46.43,0,84.07-37.64,84.07-84.07V106.94c0-14-3.42-27.2-9.47-38.81,0,0-.94-22.55-17.86-35.94-18.95-14.99-43.19-8.24-43.19-8.24-4.41-.71-8.93-1.08-13.54-1.08H106.07c-4.59,0-9.09,.37-13.47,1.07h0c-1.92-.6-24.32-7.17-43.26,7.82-16.92,13.39-17.63,33.33-17.68,36.03h0Z"/><rect class="n" x="22.31" y="22.96" width="543.02" height="285.52" rx="84.07" ry="84.07"/><rect class="f" x="145.22" y="81.43" width="296.58" height="168.57" rx="3.43" ry="3.43"/><circle class="k" cx="509.39" cy="99.01" r="26.21"/><circle class="d" cx="509.39" cy="99.01" r="19.14"/><rect class="k" x="215.56" y="42.47" width="155.89" height="19.44" rx="9.72" ry="9.72"/><path class="e" d="M107.41,175.5v12.93c0,2.55-2.07,4.62-4.62,4.62h-8.09c-2.55,0-4.62-2.07-4.62-4.62v-12.93h-12.71c-2.55,0-4.62-2.07-4.62-4.62v-8.09c0-2.55,2.07-4.62,4.62-4.62h12.71v-12.93c0-2.55,2.07-4.62,4.62-4.62h8.09c2.55,0,4.62,2.07,4.62,4.62v12.93h12.71c2.55,0,4.62,2.07,4.62,4.62v8.09c0,2.55-2.07,4.62-4.62,4.62h-12.71Z"/><line class="l" x1="98.74" y1="158.17" x2="98.74" y2="146.69"/><line class="l" x1="107.41" y1="166.84" x2="118.89" y2="166.84"/><line class="l" x1="98.74" y1="175.5" x2="98.74" y2="186.99"/><line class="l" x1="90.08" y1="166.84" x2="78.59" y2="166.84"/><circle class="k" cx="77.94" cy="99.01" r="26.21"/><circle class="d" cx="77.94" cy="99.01" r="19.14"/><circle class="k" cx="293.51" cy="279.24" r="10"/><circle class="g" cx="293.82" cy="52.2" r="5.64"/><circle class="i" cx="493.74" cy="150.72" r="9.55"/><circle class="i" cx="472.63" cy="171.74" r="9.55"/><circle class="i" cx="493.74" cy="192.76" r="9.55"/><circle class="i" cx="514.38" cy="171.74" r="9.55"/><circle class="m" cx="429.25" cy="279.24" r="8.35"/><rect class="m" x="395.94" y="271.34" width="15.81" height="15.81" rx="1.52" ry="1.52"/><line class="g" x1="468.19" y1="279.24" x2="477.74" y2="279.24"/><circle class="j" cx="464.21" cy="215.04" r="7.12"/><circle class="j" cx="464.21" cy="237.48" r="7.12"/><line class="g" x1="119.45" y1="279.24" x2="109.9" y2="279.24"/><rect class="d" x="85.47" y="216.24" width="29.48" height="18.59" rx="4.23" ry="4.23"/><path class="h" d="M31.97,67.88c3.43-6.58,10.34-17.7,22.89-27.42,15.11-11.7,30.44-15.21,38.04-16.42-1.92-.6-24.32-7.17-43.26,7.81-16.92,13.39-17.63,33.33-17.68,36.03Z"/><path class="h" d="M555.67,68.32c-3.43-6.58-10.34-17.7-22.89-27.42-15.11-11.7-30.44-15.21-38.04-16.42,1.92-.6,24.32-7.17,43.26,7.81,16.92,13.39,17.63,33.33,17.68,36.03Z"/></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
|
|
@ -26,40 +26,59 @@ router.get('/install', async (request, response) => {
|
|||
response.render('docs/install', renderData);
|
||||
});
|
||||
|
||||
router.get('/:slug', async (request, response, next) => {
|
||||
const renderData = {
|
||||
currentPage: request.params.slug
|
||||
};
|
||||
function getRawDocs(locale, subpath, pageName) {
|
||||
|
||||
// Get the name of the page from the URL
|
||||
const pageName = request.params.slug;
|
||||
const localePath = path.join(__dirname, '../../docs', locale, subpath, `${pageName}.md`);
|
||||
const defaultPath = path.join(__dirname, '../../docs', 'en-US', subpath, `${pageName}.md`);
|
||||
|
||||
let markdownLocale = response.locals.localeString;
|
||||
let missingInLocale = false;
|
||||
// Check if the MD file exists in the user's locale, if not try en-US and show notice, or finally log error and show 404.
|
||||
if (fs.existsSync(path.join('docs', markdownLocale, `${pageName}.md`))) {
|
||||
null;
|
||||
} else if (fs.existsSync(path.join('docs', 'en-US', `${pageName}.md`))) {
|
||||
markdownLocale = 'en-US';
|
||||
missingInLocale = true;
|
||||
if (fs.existsSync(localePath)) {
|
||||
return {
|
||||
content: parseDocs(fs.readFileSync(localePath, 'utf8')),
|
||||
MDLocale: locale,
|
||||
};
|
||||
} else if (fs.existsSync(defaultPath)) {
|
||||
return {
|
||||
content: parseDocs(fs.readFileSync(defaultPath, 'utf8')),
|
||||
MDLocale: 'en-US'
|
||||
};
|
||||
} else {
|
||||
next();
|
||||
return;
|
||||
return {
|
||||
content: null,
|
||||
MDLocale: null
|
||||
};
|
||||
}
|
||||
renderData.missingInLocale = missingInLocale;
|
||||
}
|
||||
|
||||
let content;
|
||||
// Get the markdown file corresponding to the page.
|
||||
content = fs.readFileSync(path.join('docs', markdownLocale, `${pageName}.md`), 'utf-8');
|
||||
function parseDocs(rawDocs) {
|
||||
if (rawDocs) {
|
||||
let markedContent = marked(rawDocs);
|
||||
markedContent = markedContent.replaceAll(/\[yt-iframe\]\(.{11}\)/g, (match) => {
|
||||
const videoIDRegex = /(?<=\[yt-iframe\]\().*(?=\))/g;
|
||||
const videoID = match.match(videoIDRegex)[0];
|
||||
return `<div class="aspectratio-fallback"><iframe src="https://www.youtube-nocookie.com/embed/${videoID}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>`;
|
||||
});
|
||||
|
||||
// Replace [yt-iframe](videoID) with the full <iframe />
|
||||
content = content
|
||||
.replace(/(?<!`)\[yt-iframe]\(/g, '<div class="aspectratio-fallback"><iframe src="https://www.youtube-nocookie.com/embed/')
|
||||
.replace(/(?<=<iframe src="https:\/\/www\.youtube-nocookie\.com\/embed\/.{11})\)/g, '" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>');
|
||||
const htmlContent = marked.parse(markedContent);
|
||||
return htmlContent;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
// Convert the content into HTML
|
||||
content = marked.parse(content);
|
||||
renderData.content = content;
|
||||
router.get('/:page', async (request, response, next) => {
|
||||
const renderData = {};
|
||||
|
||||
const locale = response.locals.localeString;
|
||||
const pageName = request.params.page;
|
||||
renderData.currentPage = pageName;
|
||||
|
||||
const { content, MDLocale } = getRawDocs(locale, '', pageName);
|
||||
if (content) {
|
||||
renderData.content = content;
|
||||
} else {
|
||||
return next();
|
||||
}
|
||||
renderData.missingInLocale = locale !== MDLocale;
|
||||
|
||||
// A boolean to show the quick links grid or not.
|
||||
if (pageName === 'welcome') {
|
||||
|
|
@ -68,5 +87,23 @@ router.get('/:slug', async (request, response, next) => {
|
|||
|
||||
response.render('docs/docs', renderData);
|
||||
});
|
||||
router.get('/:subpath/:page', async (request, response, next) => {
|
||||
const renderData = {};
|
||||
|
||||
const locale = response.locals.localeString;
|
||||
const pageName = request.params.page;
|
||||
renderData.currentPage = pageName;
|
||||
const subpath = request.params.subpath;
|
||||
|
||||
const { content, MDLocale } = getRawDocs(locale, subpath, pageName);
|
||||
if (content) {
|
||||
renderData.content = content;
|
||||
} else {
|
||||
return next();
|
||||
}
|
||||
renderData.missingInLocale = locale !== MDLocale;
|
||||
|
||||
response.render('docs/docs', renderData);
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
|
|
|
|||
65
views/docs/install.handlebars
Normal file
65
views/docs/install.handlebars
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
<link rel="stylesheet" href="/assets/css/documentation.css" />
|
||||
|
||||
<div class="docs-wrapper">
|
||||
|
||||
<a href="/" class="logo-link">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="39.876">
|
||||
<g id="logo_type" data-name="logo type" transform="translate(-553 -467)">
|
||||
<g id="logo" transform="translate(553 467)">
|
||||
<rect id="XMLID_158_" width="39.876" height="39.876" fill="#9d6ff3" opacity="0" />
|
||||
<g id="XMLID_6_" transform="translate(8.222 1.418)">
|
||||
<path id="XMLID_15_"
|
||||
d="M69.149,28.312c-1.051.553-.129,2.139.922,1.585a12.365,12.365,0,0,1,8.794-.571,10.829,10.829,0,0,1,6.342,4.166c.645,1,2.231.074,1.585-.922C83.308,27.169,74.7,25.436,69.149,28.312Z"
|
||||
transform="translate(-64.246 -23.389)" fill="#9d6ff3" />
|
||||
<path id="XMLID_14_"
|
||||
d="M82.64,14.608A15.565,15.565,0,0,0,73.5,8.45a17.535,17.535,0,0,0-12.647.9c-1.051.553-.129,2.139.922,1.585,3.411-1.788,7.6-1.714,11.209-.719,3.1.848,6.268,2.544,8.038,5.309C81.681,16.543,83.267,15.622,82.64,14.608Z"
|
||||
transform="translate(-57.476 -7.693)" fill="#9d6ff3" />
|
||||
<path id="XMLID_9_"
|
||||
d="M55.68,47.8a10.719,10.719,0,0,0-6.71,2.3H45.983A1.336,1.336,0,0,0,44.6,51.376V75.84a1.431,1.431,0,0,0,1.383,1.383h3.023a1.367,1.367,0,0,0,1.309-1.383V68.392A10.993,10.993,0,1,0,55.68,47.8Zm0,17.182a6.213,6.213,0,1,1,6.213-6.213A6.216,6.216,0,0,1,55.68,64.982Z"
|
||||
transform="translate(-44.6 -40.406)" fill="#9d6ff3" />
|
||||
</g>
|
||||
</g>
|
||||
<text id="Pretendo" transform="translate(593 492)" fill="#fff" font-size="17"
|
||||
font-family="Poppins-Bold, Poppins" font-weight="700">
|
||||
<tspan x="0" y="0">Pretendo</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
{{> header}}
|
||||
|
||||
{{> docs-sidebar}}
|
||||
|
||||
<div class="content">
|
||||
<div class="content-inner">
|
||||
<h1>Installation</h1>
|
||||
<p>
|
||||
Please choose your platform below.
|
||||
</p>
|
||||
<div class="platform-grid">
|
||||
<a href="/docs/install/wiiu">
|
||||
<img src="/assets/images/wiiu-gamepad.svg" alt="Illustration of a Wii U Gamepad" />
|
||||
<span>Wii U</span>
|
||||
</a>
|
||||
<a href="/docs/install/3ds">
|
||||
<img src="/assets/images/3ds.svg" alt="Illustration of a 3DS" />
|
||||
<span>3DS Family</span>
|
||||
</a>
|
||||
<a href="/docs/install/cemu">
|
||||
<img src="/assets/images/cemu.svg" alt="Cemu logo" />
|
||||
<span>Cemu</span>
|
||||
</a>
|
||||
<a href="/docs/install/citra">
|
||||
<img src="/assets/images/citra.svg" alt="Citra logo" />
|
||||
<span>Citra</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
|
||||
<link rel="stylesheet" href="/assets/css/highlightjs.css">
|
||||
<script>hljs.highlightAll();</script>
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="section">
|
||||
<h5>Getting started</h5>
|
||||
<a href="/docs/welcome">Welcome</a>
|
||||
<a href="/docs/installing-juxt" >Installing Juxt</a>
|
||||
<a href="/docs/install">Install Pretendo</a>
|
||||
<a href="/docs/search">Search</a>
|
||||
</div>
|
||||
|
||||
|
|
@ -46,5 +46,4 @@
|
|||
}
|
||||
|
||||
selectSidebarElement(document.querySelector("div.sidebar a[href='/docs/{{currentPage}}']"));
|
||||
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user