488 lines
13 KiB
HTML
488 lines
13 KiB
HTML
<div id="flow-diagram">
|
|
<div class="diagram-grid" v-bind:style="gridStyle">
|
|
<!-- BEHIND THE GRID CONTENT -->
|
|
<!-- line for each platform -->
|
|
<div class="grid-line" style="grid-row-start: 3"></div>
|
|
<div class="grid-line" style="grid-row-start: 4"></div>
|
|
<div class="grid-line" style="grid-row-start: 5"></div>
|
|
<!-- the docker container outline -->
|
|
<div class="grid-outline docker">
|
|
<div class="outline">
|
|
Manylinux container
|
|
</div>
|
|
</div>
|
|
<!-- the venv outlines -->
|
|
<div class="grid-outline testVenv" style="grid-row-start: 3">
|
|
<div class="outline">Test virtualenv</div>
|
|
</div>
|
|
<div class="grid-outline testVenv" style="grid-row-start: 4"><div class="outline"></div></div>
|
|
<div class="grid-outline testVenv" style="grid-row-start: 5"><div class="outline"></div></div>
|
|
<!-- THE GRID CONTENT -->
|
|
<!-- the row labels -->
|
|
<div class="grid-row-label" style="grid-row-start: 3">Linux</div>
|
|
<div class="grid-row-label" style="grid-row-start: 4">macOS</div>
|
|
<div class="grid-row-label" style="grid-row-start: 5">Windows</div>
|
|
<!-- the column labels -->
|
|
<div class="grid-column-label"
|
|
style="grid-row: 1 / span 1; grid-column: 5 / -3">
|
|
<div class="label">For each version of Python</div>
|
|
</div>
|
|
<div class="grid-column-label"
|
|
style="grid-row: 2 / span 1;
|
|
grid-column: 9 / -3;
|
|
margin-bottom: 0.5em;">
|
|
<div class="label">If tests are configured</div>
|
|
</div>
|
|
<!-- the steps -->
|
|
<div class="step" v-for="(step, sIndex) in diagram.steps">
|
|
<component v-for="action in step"
|
|
class="action"
|
|
v-bind:is="action.href ? 'a' : 'div'"
|
|
v-bind:href="action.href">
|
|
<div class="dots" v-if="action.style == 'dot'">
|
|
<div class="dot"
|
|
v-info="action"
|
|
v-for="(platform, pIndex) in platforms"
|
|
v-if="action.platforms.includes(platform)"
|
|
v-bind:style="{gridRowStart: `${pIndex+3}`,
|
|
gridColumnStart: `${sIndex+2}`}">
|
|
<div class="dot-graphic"></div>
|
|
</div>
|
|
</div>
|
|
<div class="block-container" v-if="action.style == 'block'">
|
|
<div class="block"
|
|
v-info="action"
|
|
v-bind:style="{...blockStyle(action),
|
|
gridColumnStart: `${sIndex+2}`}">
|
|
{{action.label}}
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<noscript>
|
|
<img src="data/how-it-works.png" alt="Diagram showing the steps for each platform">
|
|
<p><strong>Enable JavaScript for an interactive version of this diagram.</strong></p>
|
|
</noscript>
|
|
|
|
<script type="module" async>
|
|
import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.esm.browser.js'
|
|
import 'https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js'
|
|
import 'https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js'
|
|
|
|
const diagram = {
|
|
steps: [
|
|
[
|
|
{
|
|
label: 'copy project into container',
|
|
platforms: ['linux'],
|
|
style: 'block',
|
|
width: 2,
|
|
},
|
|
],
|
|
[], // empty column so that the manylinux outline intersects the previous column in the middle.
|
|
[
|
|
{
|
|
href: 'options/#before-all',
|
|
platforms: ['linux', 'macos', 'windows'],
|
|
style: 'dot',
|
|
tooltip: {
|
|
title: 'CIBW_BEFORE_ALL',
|
|
tag: 'Optional step',
|
|
description: 'Execute a shell command on the build system before any wheels are built.'
|
|
},
|
|
},
|
|
],
|
|
[
|
|
{
|
|
label: 'Install Python',
|
|
platforms: ['macos', 'windows'],
|
|
style: 'block',
|
|
tooltip: {
|
|
description: 'Install the version of Python required to build this wheel.'
|
|
},
|
|
},
|
|
],
|
|
[
|
|
{
|
|
href: 'options/#before-build',
|
|
platforms: ['linux', 'macos', 'windows'],
|
|
style: 'dot',
|
|
tooltip: {
|
|
title: 'CIBW_BEFORE_BUILD',
|
|
tag: 'Optional step',
|
|
description: "Execute a shell command preparing each wheel's build.",
|
|
},
|
|
},
|
|
],
|
|
[
|
|
{
|
|
label: 'Build wheel',
|
|
href: 'options/#build-frontend',
|
|
platforms: ['linux', 'macos', 'windows'],
|
|
style: 'block',
|
|
tooltip: {
|
|
title: 'CIBW_BUILD_FRONTEND',
|
|
tag: 'Customisable step',
|
|
description: 'Build the wheel according to your package configuration, using the frontend of your choice - pip or build.'
|
|
},
|
|
},
|
|
],
|
|
[
|
|
{
|
|
label: 'Repair using auditwheel',
|
|
href: 'options/#repair-wheel-command',
|
|
platforms: ['linux'],
|
|
style: 'block',
|
|
tooltip: {
|
|
title: 'CIBW_REPAIR_WHEEL_COMMAND',
|
|
tag: 'Customisable step',
|
|
description: 'Bundle shared libraries and ensure manylinux compliance by running auditwheel on each built wheel.'
|
|
},
|
|
},
|
|
{
|
|
label: 'Repair using delocate',
|
|
href: 'options/#repair-wheel-command',
|
|
platforms: ['macos'],
|
|
style: 'block',
|
|
tooltip: {
|
|
title: 'CIBW_REPAIR_WHEEL_COMMAND',
|
|
tag: 'Customisable step',
|
|
description: 'Bundle shared libraries by running delocate on each built wheel.'
|
|
},
|
|
},
|
|
{
|
|
env: "CIBW_REPAIR_WHEEL_COMMAND",
|
|
href: 'options/#repair-wheel-command',
|
|
label: 'repair wheel',
|
|
platforms: ['windows'],
|
|
style: 'dot',
|
|
optional: true,
|
|
tooltip: {
|
|
title: 'CIBW_REPAIR_WHEEL_COMMAND',
|
|
tag: 'Optional step',
|
|
description: 'Execute a shell command to repair each built wheel'
|
|
},
|
|
},
|
|
],
|
|
[
|
|
{
|
|
href: 'options/#before-test',
|
|
platforms: ['linux', 'macos', 'windows'],
|
|
style: 'dot',
|
|
tooltip: {
|
|
title: 'CIBW_BEFORE_TEST',
|
|
tag: 'Optional step',
|
|
description: 'Execute a shell command before testing each wheel'
|
|
},
|
|
},
|
|
],
|
|
[
|
|
{
|
|
label: 'Install wheel',
|
|
platforms: ['linux', 'macos', 'windows'],
|
|
style: 'block',
|
|
tooltip: {
|
|
description: 'Install the wheel we just built into the test virtualenv.'
|
|
},
|
|
},
|
|
],
|
|
[
|
|
{
|
|
label: 'Test wheel',
|
|
href: 'options/#test-command',
|
|
platforms: ['linux', 'macos', 'windows'],
|
|
style: 'block',
|
|
tooltip: {
|
|
title: 'CIBW_TEST_COMMAND',
|
|
tag: 'Optional step',
|
|
description: 'Execute a shell command to test each built wheel'
|
|
},
|
|
},
|
|
],
|
|
[
|
|
{
|
|
label: 'Copy wheels out of container',
|
|
platforms: ['linux'],
|
|
style: 'block',
|
|
width: 2,
|
|
},
|
|
],
|
|
[],
|
|
]
|
|
}
|
|
|
|
const diagramComponent = new Vue({
|
|
el: '#flow-diagram',
|
|
data() {
|
|
return {
|
|
diagram,
|
|
platforms: ['linux', 'macos', 'windows'],
|
|
}
|
|
},
|
|
methods: {
|
|
blockStyle(action) {
|
|
let start, end
|
|
if (action.platforms.includes('linux')) {
|
|
start = 3
|
|
} else if (action.platforms.includes('macos')) {
|
|
start = 4
|
|
} else if (action.platforms.includes('windows')) {
|
|
start = 5
|
|
}
|
|
|
|
if (action.platforms.includes('windows')) {
|
|
end = 6
|
|
} else if (action.platforms.includes('macos')) {
|
|
end = 5
|
|
} else if (action.platforms.includes('linux')) {
|
|
end = 4
|
|
}
|
|
|
|
return {
|
|
gridRowStart: start.toString(),
|
|
gridRowEnd: end.toString(),
|
|
gridColumnEnd: `span ${action.width || 1}`,
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
gridStyle() {
|
|
return {
|
|
gridTemplateRows: `auto auto repeat(${this.platforms.length}, 1fr)`,
|
|
gridTemplateColumns: `repeat(${this.diagram.steps.length+1}, auto)`,
|
|
}
|
|
},
|
|
},
|
|
directives: {
|
|
info: {
|
|
inserted(el, binding) {
|
|
const action = binding.value
|
|
const {env, label, optional=false, description='', href=''} = action
|
|
const tooltip = action.tooltip
|
|
|
|
if (tooltip) {
|
|
const tippyInstance = tippy(el, {
|
|
content: `
|
|
<a class="tooltip-contents" href="${href || ''}">
|
|
<div class="tooltip-title">
|
|
${tooltip.title || ''}
|
|
</div>
|
|
<div class="tooltip-tag">
|
|
${tooltip.tag || ''}
|
|
</div>
|
|
<div class="tooltip-description">
|
|
${tooltip.description}
|
|
</div>
|
|
</a>
|
|
`,
|
|
placement: 'right-start',
|
|
allowHTML: true,
|
|
maxWidth: 'none',
|
|
appendTo: document.getElementById('flow-diagram'),
|
|
offset: [0, 10],
|
|
onShow(instance) {
|
|
const stepEl = el.closest('.action')
|
|
stepEl.classList.add('tooltip-open')
|
|
instance.setProps({
|
|
interactive: tippy.currentInput.isTouch
|
|
})
|
|
},
|
|
onHide() {
|
|
const stepEl = el.closest('.action')
|
|
stepEl.classList.remove('tooltip-open')
|
|
}
|
|
})
|
|
|
|
el.addEventListener('click', e => {
|
|
// click event should just open the tooltip on touch devices
|
|
if (tippy.currentInput.isTouch) {
|
|
e.preventDefault()
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
#flow-diagram {
|
|
background: #fcfcfc;
|
|
/* font-family: Inter; */
|
|
/* font-size: 10px; */
|
|
font-size: 0.7em;
|
|
padding-bottom: 2em;
|
|
}
|
|
.no-js #flow-diagram {
|
|
display: none
|
|
}
|
|
.diagram-grid {
|
|
display: grid;
|
|
overflow-x: auto;
|
|
}
|
|
.platform, .step, .dots, .block-container, .action {
|
|
display: contents;
|
|
}
|
|
.block, .dot {
|
|
position: relative;
|
|
margin: 2em 0.5em;
|
|
}
|
|
.block {
|
|
background-color: #eee;
|
|
/* margin: 0.5em auto; */
|
|
padding: 0.5em;
|
|
max-width: 6em;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
.dot {
|
|
/* margin: 0.5em; */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.dot-graphic {
|
|
width: 1.3em;
|
|
height: 1.3em;
|
|
border-radius: 50%;
|
|
background: #DADADA;
|
|
}
|
|
a.action {
|
|
color: inherit;
|
|
}
|
|
.action.tooltip-open .dot-graphic {
|
|
background-color: #416EDA;
|
|
}
|
|
.action.tooltip-open .block {
|
|
background-color: #416EDA;
|
|
color: white;
|
|
}
|
|
.grid-column-label {
|
|
height: 2em;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 0.5em;
|
|
}
|
|
.grid-column-label::before {
|
|
content: "";
|
|
height: 1px;
|
|
background-color: currentColor;
|
|
position: absolute;
|
|
top: calc(50% - 0.5px);
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
.grid-column-label .label {
|
|
background: #fcfcfc;
|
|
padding: 0 1em;
|
|
position: relative;
|
|
}
|
|
.grid-row-label {
|
|
grid-column: 1 / span 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
text-align: right;
|
|
background: #fcfcfc;
|
|
position: relative;
|
|
padding-right: 1em;
|
|
font-size: 1.1em;
|
|
}
|
|
.grid-line {
|
|
grid-column: 1 / -1;
|
|
grid-row-end: span 1;
|
|
position: relative;
|
|
}
|
|
.grid-line::after {
|
|
content: "";
|
|
height: 1px;
|
|
background-color: #979797;
|
|
position: absolute;
|
|
top: calc(50% - 1px);
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
.grid-outline {
|
|
grid-row-end: span 1;
|
|
position: relative;
|
|
color: #8f8f8f;
|
|
}
|
|
.grid-outline.docker {
|
|
grid-row: 3 / span 1;
|
|
grid-column: 3 / -2;
|
|
}
|
|
.grid-outline.testVenv {
|
|
grid-column: 9 / span 3;
|
|
}
|
|
.grid-outline .outline {
|
|
position: absolute;
|
|
border: 1px solid #e5e5e5;
|
|
padding: 1px 3px;
|
|
}
|
|
.grid-outline.docker .outline {
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
}
|
|
.grid-outline.testVenv .outline {
|
|
left: 0;
|
|
right: 0;
|
|
top: 0.5em;
|
|
bottom: 0.5em;
|
|
}
|
|
|
|
/* style the tooltip */
|
|
.tippy-box {
|
|
background: white;
|
|
box-shadow: 0 2px 6px -1px rgba(0,0,0,0.12);
|
|
border-radius: 0;
|
|
text-align: left;
|
|
font-size: 1em;
|
|
color: #1F1F1F;
|
|
border: 1px solid rgba(0, 0, 0, 0.02);
|
|
width: 14em;
|
|
min-width: min-content;
|
|
}
|
|
.tippy-box[data-placement^='top'] > .tippy-arrow::before {
|
|
border-top-color: white;
|
|
}
|
|
.tippy-box[data-placement^='bottom'] > .tippy-arrow::before {
|
|
border-bottom-color: white;
|
|
}
|
|
.tippy-box[data-placement^='left'] > .tippy-arrow::before {
|
|
border-left-color: white;
|
|
}
|
|
.tippy-box[data-placement^='right'] > .tippy-arrow::before {
|
|
border-right-color: white;
|
|
}
|
|
a.tooltip-contents {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
display: block;
|
|
}
|
|
.tooltip-title {
|
|
font-weight: 600;
|
|
font-size: 1.1em;
|
|
color: #416EDA;
|
|
}
|
|
.tooltip-tag {
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
font-size: 0.9em;
|
|
color: #C9C9C9;
|
|
}
|
|
.tooltip-description {
|
|
margin-top: 1px;
|
|
margin-bottom: 2px;
|
|
}
|
|
</style>
|