a54e16488c
The project's slagon has been updated back to "Privacy is sexy" from "Now you have the choice" for enhanced brand clarity and memorability. This change also reflects the community's preference and aligns with the project's established identity. This commit also refactors naming and structure of project information (metadata) struct to enhance clarity and maintainability in relation to changing the slogan. Key changes include: - Update UI components to display the revised slogan. - Remove period from project slogan in code area for consistency with a explanatory comment for future maintainability. - Refactor header container and class names for clarity. - Standardize project metadata usage in `TheCodeArea.vue` to ensure consistency. - Improve code clarity by renaming `IProjectInformation` to `ProjectDetails` and `ProjectInformation` to `GitHubProjectDetails`. - Organize `ProjectDetails` under a dedicated `Project` directory within the domain layer for better structure. These changes are expected to improve the project's appeal and streamline future maintenance and development efforts.
86 lines
2.4 KiB
Vue
86 lines
2.4 KiB
Vue
<template>
|
|
<div class="instructions">
|
|
<p>
|
|
You have two alternatives to apply your selection.
|
|
</p>
|
|
<hr />
|
|
<p>
|
|
<strong>1. The easy alternative</strong>. Run your script without any manual steps by
|
|
<a :href="downloadUrl">downloading desktop version</a> of {{ appName }} on the
|
|
{{ osName }} system you wish to configure, and then click on the Run button. This is
|
|
recommended for most users.
|
|
</p>
|
|
<hr />
|
|
<p>
|
|
<strong>2. The hard (manual) alternative</strong>. This requires you to do additional manual
|
|
steps. If you are unsure how to follow the instructions, tap or hover on information
|
|
<InfoTooltip>Engage with icons like this for extra wisdom!</InfoTooltip>
|
|
icons near the steps, or follow the easy alternative described above.
|
|
</p>
|
|
<p>
|
|
<PlatformInstructionSteps :filename="filename" />
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, computed } from 'vue';
|
|
import { injectKey } from '@/presentation/injectionSymbols';
|
|
import { OperatingSystem } from '@/domain/OperatingSystem';
|
|
import InfoTooltip from './InfoTooltip.vue';
|
|
import PlatformInstructionSteps from './Steps/PlatformInstructionSteps.vue';
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
InfoTooltip,
|
|
PlatformInstructionSteps,
|
|
},
|
|
props: {
|
|
filename: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
},
|
|
setup() {
|
|
const { currentState } = injectKey((keys) => keys.useCollectionState);
|
|
|
|
const { projectDetails } = injectKey((keys) => keys.useApplication);
|
|
|
|
const operatingSystem = computed<OperatingSystem>(() => currentState.value.os);
|
|
|
|
const appName = computed<string>(() => projectDetails.name);
|
|
|
|
const downloadUrl = computed<string>(
|
|
() => projectDetails.getDownloadUrl(operatingSystem.value),
|
|
);
|
|
|
|
const osName = computed<string>(
|
|
() => renderOsName(operatingSystem.value),
|
|
);
|
|
|
|
return {
|
|
appName,
|
|
downloadUrl,
|
|
osName,
|
|
};
|
|
},
|
|
});
|
|
|
|
function renderOsName(os: OperatingSystem): string {
|
|
switch (os) {
|
|
case OperatingSystem.Windows: return 'Windows';
|
|
case OperatingSystem.macOS: return 'macOS';
|
|
case OperatingSystem.Linux: return 'Linux';
|
|
default: throw new RangeError(`Cannot render os name: ${OperatingSystem[os]}`);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use "@/presentation/assets/styles/main" as *;
|
|
|
|
.step {
|
|
margin: 10px 0;
|
|
}
|
|
</style>
|