Skip to content

Commit

Permalink
WD-11512 Refresh /download/risc-v page (#725)
Browse files Browse the repository at this point in the history 
WD-11512 refresh /risc-v

* Formating and added button for the dowload link

* Added alt labels and removed brackets

* Added dropdown for mobile version

* Fixed linting

* added static js

* Added config for djlint (.djlintrc)

* Added workflow to check for Jinja lint

* added djlint to requirements.txt

* fix for bottom highlight bar

* fixed scss linting

* added paragraph to a section

Co-authored-by: Carlos Wu <[email protected]>

* Fixed the link to ubuntu image

Co-authored-by: Carlos Wu <[email protected]>

---------

Co-authored-by: Carlos Wu <[email protected]>
  • Loading branch information
@immortalcodes @carkod
immortalcodes and carkod authored Jun 13, 2024
1 parent 252b151 commit dbec4ea
Show file tree
Hide file tree
Showing 11 changed files with 445 additions and 296 deletions.
1 change: 1 addition & 0 deletions .webpack/entry.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,5 @@ module.exports = {
['global-nav']: './static/js/src/global-nav.js',
['latest-news']: './static/js/src/latest-news.js',
['tabbed-content.js']: './static/js/src/tabbed-content.js',
['tabbedContent.js']: './static/js/src/tabbedContent.js',
};
23 changes: 23 additions & 0 deletions static/js/src/tabbedContent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,3 +83,26 @@
});
})();
})();

(function () {
// Toggles show board based on selection on small screens

const boards = document.querySelectorAll(`[role=tabpanel]`);
const dropdownSelect = document.getElementById('boardSelect');

if (dropdownSelect) {
dropdownSelect.addEventListener('change', () => {
selectBoard();
});
}
function selectBoard() {
boards.forEach(board => {
if (board.id === dropdownSelect.value) {
board.removeAttribute('hidden');
board.focus();
} else {
board.setAttribute('hidden', true);
}
});
}
})();
54 changes: 25 additions & 29 deletions static/sass/_pattern_tabs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
z-index: 5;
}
}

@media (min-width: $breakpoint-x-large) {
&::after {
bottom: -46px;
Expand All @@ -40,48 +41,43 @@
}

.p-tabs--vertical {
grid-gap: 0;
list-style: none;

.p-tabs__list {
display: block;
.p-tabs__item {
@extend %side-navigation__text;

&::after {
display: none;
}
}
border: 0;
display: initial;
text-align: left;
width: 100%;

.p-tabs__item {
&:last-child {
margin-right: 0;
&[aria-selected='true'] {
@include vf-highlight-bar($color-brand, left);
}
}

.p-tabs__link {
padding-bottom: 0.25rem;
padding-top: 0.25rem;
&.is-black {
margin-left: 0;
padding-left: 0;

&::before {
display: none;
.p-tabs__item {
&[aria-selected='true'] {
@include vf-highlight-bar($color-dark, left);
}
}
}

&[aria-selected='true'] {
background-color: $color-light;
&.on-paper {
.p-tabs__item {
background-color: #f7f7f7;

&::before {
display: block;
height: 100%;
left: 0;
right: auto;
width: 0.1875rem;
&[aria-selected='true'] {
@include vf-highlight-bar($color-brand, left);

background-color: white;
}
}
}

.p-tabs__content {
background-color: $color-light;
min-height: 100%;
padding: 1.5rem;
}
}

// Override the highlighted tab colour for pages that need to use the brand
Expand Down
179 changes: 117 additions & 62 deletions templates/download/risc-v/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,73 +2,128 @@

{% block title %}下载用于RISC-V平台的Ubuntu{% endblock %}

{% block meta_description %}在RISC-V平台上使用Ubuntu以获得相似的开发者体验，RISC-V开发板，RISC-V Ubuntu，RISC-V OS，RISC-V操作系统。{% endblock meta_description %}
{% block meta_description %}
在RISC-V平台上使用Ubuntu以获得相似的开发者体验，RISC-V开发板，RISC-V Ubuntu，RISC-V OS，RISC-V操作系统。
{% endblock meta_description %}

{% block meta_copydoc%}https://docs.google.com/document/d/1kkJeq9HdH3iWV35HwihcJd3CxZw9Jy21W66lJl8VbWs/edit#{% endblock meta_copydoc %}
{% block meta_copydoc %}
https://docs.google.com/document/d/1SPeefGBJBh99XWEx0newZHPxp56mZuaElq1YtUzfY4M/edit#
{% endblock meta_copydoc %}

{% block content %}

{% include "download/secondary-nav.html" %}

<section class="p-strip--suru-topped">
<div class="row u-vertically-center">
<div class="col-6">
<h1>下载适用于RISC-V平台的Ubuntu</h1>
<h2 class="p-heading--3">Ubuntu—现已支持多个RISC-V平台</h2>
<p>在您喜爱的RISC-V开发板上运行Ubuntu。Ubuntu近期在Ubuntu 22.04.2中已支持SiFive Unmatched，赛昉（StarFive） VisionFive和全志（Allwinner）哪吒开发板，在下方可下载对应开发板的镜像。</p>
<p>选择与您的硬件相匹配的操作系统镜像，将系统镜像刷入到 SD/microSD 卡上，再将其加载到您的板上即可开始体验Ubuntu。</p>
<p>
<a href="/contact" class="p-button">联系我们</a>
</p>
</div>
<div class="col-6 u-hide--medium u-hide--small u-align--center">
{% include "download/secondary-nav.html" %}
<section class="p-strip--suru-topped">
<div class="row u-vertically-center">
<div class="col-6">
<h1>下载适用于RISC-V平台的Ubuntu</h1>
<h2 class="p-heading--3">Ubuntu——现已支持多个RISC-V平台</h2>
<p>在您喜爱的RISC-V开发板上运行Ubuntu。</p>
<p>
选择与您的硬件相匹配的操作系统镜像，将系统镜像刷入到 SD/microSD 卡上，再将其加载到您的板上即可开始体验Ubuntu。
<p>所有镜像都是基于64位Ubuntu服务器版而为开发者预览所打造。</p>
</p>
<p>
<a href="/contact" class="p-button">联系我们</a>
</p>
</div>
<div class="col-6 u-hide--medium u-hide--small u-align--center">
{{
image (
url="https://assets.ubuntu.com/v1/4d5b8d51-riscv-color.svg",
alt="",
width="300",
height="48",
hi_def=True,
loading="auto"
) | safe
}}
image (
url="https://assets.ubuntu.com/v1/4d5b8d51-riscv-color.svg",
alt="",
width="300",
height="48",
hi_def=True,
loading="auto"
) | safe
}}
</div>
</div>
</div>
</section>

<section class="p-strip is-shallow">
<div class="u-fixed-width">
<div class="p-tabs">
<div class="p-tabs__list js-tabbed-content" role="tablist" aria-label="Install RISC-V">
<div class="p-tabs__item">
<button class="p-tabs__link" role="tab" aria-selected="true" aria-controls="quemu-sifive-image-tab" id="quemu-sifive-image" tabindex="-1">SiFive Unmatched, QEMU</button>
</div>
<div class="p-tabs__item">
<button class="p-tabs__link" role="tab" aria-selected="false" aria-controls="starfive-visionfive-board-tab" id="starfive-visionfive-board">赛昉VisionFive</button>
</div>
<div class="p-tabs__item">
<button class="p-tabs__link" role="tab" aria-selected="false" aria-controls="allwinner-nezha-tab" id="allwinner-nezha">全志哪吒</button>
</div>
<div class="p-tabs__item">
<button class="p-tabs__link" role="tab" aria-selected="false" aria-controls="sipeed-licheerv-dock-tab" id="sipeed-licheerv-dock-tab">Sipeed LicheeRV Dock</button>
</div>
<div class="p-tabs__item">
<button class="p-tabs__link" role="tab" aria-selected="false" aria-controls="microchip-polarfire-soc-fpga-icicle-kit-tab" id="microchip-polarfire-soc-fpga-icicle-kit-tab">Polarfire SoC FPGA Icicle</button>
</div>
<div class="p-tabs__item">
<button class="p-tabs__link" role="tab" aria-selected="false" aria-controls="qemu-tab" id="qemu-tab">QEMU</button>
</section>
<section class="p-strip is-deep u-no-padding--top">
<hr class="is-fixed-width u-no-margin--bottom" />
<div class="row">
<div class="col-4 col-medium-2">
<div class="p-strip is-shallow u-no-padding--top">
<h2 class="p-text--small-caps">Choose a board</h2>
</div>
<ul class="js-tabbed-content p-tabs--vertical is-black u-hide--small"
role="tablist"
aria-label="Robotics features">
<li>
<button class="p-tabs__item"
id="allwinner-nezha"
role="tab"
aria-selected="true"
aria-controls="allwinner-nezha-tab">全志哪吒</button>
</li>
<li>
<button class="p-tabs__item"
id="microchip-polarfire-soc-fpga-icicle-kit"
role="tab"
aria-selected="false"
aria-controls="microchip-polarfire-soc-fpga-icicle-kit-tab">
Microchip Polarfire SoC FPGA Icicle
</button>
</li>
<li>
<button class="p-tabs__item"
id="milk-v-mars"
role="tab"
aria-selected="false"
aria-controls="milk-v-mars-tab">Milk-V Mars</button>
</li>
<li>
<button class="p-tabs__item"
id="qemu"
role="tab"
aria-selected="false"
aria-controls="qemu-tab">QEMU</button>
</li>
<li>
<button class="p-tabs__item"
id="quemu-sifive-image"
role="tab"
aria-selected="false"
aria-controls="quemu-sifive-image-tab">SiFive Unmatched</button>
</li>
<li>
<button class="p-tabs__item"
id="sipeed-licheerv-dock"
role="tab"
aria-selected="false"
aria-controls="sipeed-licheerv-dock-tab">Sipeed LicheeRV Dock</button>
</li>
<li>
<button class="p-tabs__item"
id="starfive-visionfive-2"
role="tab"
aria-selected="false"
aria-controls="visionfive-2-board-tab">赛昉VisionFive 2</button>
</li>
</ul>
</div>
<form class="u-hide--large u-hide--medium">
<select name="boardSelect" id="boardSelect">
<option value="allwinner-nezha-tab" selected="">全志哪吒</option>
<option value="microchip-polarfire-soc-fpga-icicle-kit-tab">Microchip Polarfire SoC FPGA Icicle</option>
<option value="milk-v-mars-tab">Milk-V Mars</option>
<option value="qemu-tab">QEMU</option>
<option value="quemu-sifive-image-tab">SiFive Unmatched</option>
<option value="sipeed-licheerv-dock-tab">Sipeed LicheeRV Dock</option>
<option value="visionfive-2-board-tab">赛昉VisionFive 2</option>
</select>
</form>
<div class="col-8 col-medium-4">
{% include "download/risc-v/tab-1.html" %}
{% include "download/risc-v/tab-2.html" %}
{% include "download/risc-v/tab-3.html" %}
{% include "download/risc-v/tab-4.html" %}
{% include "download/risc-v/tab-5.html" %}
{% include "download/risc-v/tab-6.html" %}
{% include "download/risc-v/tab-7.html" %}
</div>
{% include "download/risc-v/tab-1.html" %}
{% include "download/risc-v/tab-2.html" %}
{% include "download/risc-v/tab-3.html" %}
{% include "download/risc-v/tab-4.html" %}
{% include "download/risc-v/tab-5.html" %}
{% include "download/risc-v/tab-6.html" %}
</div>
</div>
</section>

<script src="/static/js/src/tabbedContent.js"></script>

{% endblock content %}
</section>
<script src="{{ versioned_static('js/dist/tabbedContent.js.min.js') }}"></script>
{% endblock content %}
71 changes: 32 additions & 39 deletions templates/download/risc-v/tab-1.html
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,32 @@
<div tabindex="0" role="tabpanel" id="quemu-sifive-image-tab" aria-labelledby="quemu-sifive-image">
<div class="row u-vertically-center u-no-padding">
<div class="col-6">
<h2>SiFive Unmatched</h2>
<h3 class="p-heading--4">Ubuntu Server预安装镜像</h3>
<div class="p-notification--information is-inline">
<div class="p-notification__content">
<h4 class="p-notification__title">注意：</h4>
<p class="p-notification__message">如果您拥有一块NVMe驱动器，我们建议您使用 Ubuntu Server 在线安装器。</p>
</div>
</div>
<p>
<a class="p-button--positive" href="https://cdimage.ubuntu.com/releases/{{ releases.latest.full_version }}/release/ubuntu-{{ releases.latest.full_version }}-preinstalled-server-riscv64+unmatched.img.xz">下载 {{ releases.latest.full_version }}</a>
<a class="p-button" href="https://cdimage.ubuntu.com/releases/{{ releases.lts.full_version }}/release/ubuntu-{{ releases.lts.full_version }}-preinstalled-server-riscv64+unmatched.img.xz">下载 {{ releases.lts.full_version }}</a>
</p>
<p>适用于：</p>
<ul class="p-list">
<li class="p-list__item is-ticked">Unmatched开发板</li>
<li class="p-list__item is-ticked">QEMU</li>
</ul>
</div>
<div class="col-2 u-hide--medium u-hide--small">&nbsp;</div>
<div class="col-4 u-hide--medium u-hide--small u-align--center">
{{ image (
url="https://assets.ubuntu.com/v1/37c094a9-SiFive+Unmatched+Board.jpg",
alt="",
width="720",
height="480",
hi_def=True,
loading="auto"
) | safe
}}
</div>
</div>
<div class="u-fixed-width">
<h4>第一次在QEMU/Unmatched上安装Ubuntu？</h4>
<p>请阅读<a href="https://wiki.ubuntu.com/RISC-V/SiFive%20HiFive%20Unmatched">如何在SiFive HiFive Unmatched上安装Ubuntu</a>以获得更多信息</p>
</div>
</div>
<div tabindex="0"
role="tabpanel"
id="allwinner-nezha-tab"
aria-labelledby="allwinner-nezha"
aria-hidden="true">
<div class="row u-vertically-center u-no-padding">
<div class="col-4">
<h2>AllWinner Nezha</h2>
<h3 class="p-heading--4">Ubuntu Server预安装镜像</h3>
<p>
<a class="p-button--positive"
href="https://cdimage.ubuntu.com/releases/{{ releases.lts.full_version }}/release/ubuntu-{{ releases.lts.full_version }}-preinstalled-server-riscv64+nezha.img.xz">下载 {{ releases.lts.full_version }}</a>
</p>
</div>
<div class="col-4 u-hide--medium u-hide--small u-align--center">
{{ image (
url="https://assets.ubuntu.com/v1/0cc9bac3-Allwinner+Nezha+Board.png",
alt="AllWinner Nezha",
width="500",
height="300",
hi_def=True,
loading="auto"
) | safe
}}
</div>
</div>
<div class="u-fixed-width">
<p>
<a href="https://wiki.ubuntu.com/RISC-V/Nezha%20D1">如何在哪吒开发板上安装 Ubuntu</a>
</p>
</div>
</div>
Loading

0 comments on commit dbec4ea

Please sign in to comment.