You've already forked AstralRinth
forked from didirus/AstralRinth
Add navrow + markdown parsing
This commit is contained in:
Jai A
@@ -7,7 +7,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { fileIsValid } from '@/components/utils'
|
||||
import { fileIsValid } from '@/helpers/utils.js'
|
||||
import { defineComponent } from 'vue'
|
||||
export default defineComponent({
|
||||
props: {
|
||||
|
||||
@@ -56,7 +56,7 @@
|
||||
</template>
|
||||
<script setup>
|
||||
import { Modal, Chips, XIcon, CheckIcon, DropdownSelect } from '@/components'
|
||||
import { renderString } from '@/components/parse.js'
|
||||
import { renderString } from '@/helpers/parse.js'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const modal = ref('modal')
|
||||
|
||||
@@ -76,7 +76,7 @@ import {
|
||||
Categories,
|
||||
EnvironmentIndicator,
|
||||
} from '@/components'
|
||||
import { formatNumber } from '@/components/utils'
|
||||
import { formatNumber } from '@/helpers/utils.js'
|
||||
import dayjs from 'dayjs'
|
||||
import relativeTime from 'dayjs/plugin/relativeTime'
|
||||
dayjs.extend(relativeTime)
|
||||
|
||||
@@ -1,51 +1,166 @@
|
||||
<script setup>
|
||||
defineProps({})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="omorphia__navrow">
|
||||
<slot />
|
||||
<div class="right-slot">
|
||||
<slot name="right" />
|
||||
</div>
|
||||
</div>
|
||||
<nav class="navigation">
|
||||
<router-link
|
||||
v-for="(link, index) in filteredLinks"
|
||||
v-show="link.shown === undefined ? true : link.shown"
|
||||
:key="index"
|
||||
ref="linkElements"
|
||||
:to="query ? (link.href ? `?${query}=${link.href}` : '?') : link.href"
|
||||
class="nav-link button-animation"
|
||||
>
|
||||
<span>{{ link.label }}</span>
|
||||
</router-link>
|
||||
<div
|
||||
class="nav-indicator"
|
||||
:style="{
|
||||
left: positionToMoveX,
|
||||
top: positionToMoveY,
|
||||
width: sliderWidth,
|
||||
opacity: activeIndex === -1 ? 0 : 1,
|
||||
}"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
links: {
|
||||
default: () => [],
|
||||
type: Array,
|
||||
},
|
||||
query: {
|
||||
default: null,
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sliderPositionX: 0,
|
||||
sliderPositionY: 18,
|
||||
selectedElementWidth: 0,
|
||||
activeIndex: -1,
|
||||
oldIndex: -1,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
filteredLinks() {
|
||||
return this.links.filter((x) => (x.shown === undefined ? true : x.shown))
|
||||
},
|
||||
positionToMoveX() {
|
||||
return `${this.sliderPositionX}px`
|
||||
},
|
||||
positionToMoveY() {
|
||||
return `${this.sliderPositionY}px`
|
||||
},
|
||||
sliderWidth() {
|
||||
return `${this.selectedElementWidth}px`
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
'$route.path': {
|
||||
handler() {
|
||||
this.pickLink()
|
||||
},
|
||||
},
|
||||
'$route.query': {
|
||||
handler() {
|
||||
if (this.query) this.pickLink()
|
||||
},
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', this.pickLink)
|
||||
this.pickLink()
|
||||
},
|
||||
unmounted() {
|
||||
window.removeEventListener('resize', this.pickLink)
|
||||
},
|
||||
methods: {
|
||||
pickLink() {
|
||||
this.activeIndex = this.query
|
||||
? this.filteredLinks.findIndex(
|
||||
(x) => (x.href === '' ? undefined : x.href) === this.$route.path[this.query]
|
||||
)
|
||||
: this.filteredLinks.findIndex((x) => x.href === decodeURIComponent(this.$route.path))
|
||||
|
||||
if (this.activeIndex !== -1) {
|
||||
this.startAnimation()
|
||||
} else {
|
||||
this.oldIndex = -1
|
||||
this.sliderPositionX = 0
|
||||
this.selectedElementWidth = 0
|
||||
}
|
||||
},
|
||||
startAnimation() {
|
||||
const el = this.$refs.linkElements[this.activeIndex].$el
|
||||
|
||||
this.sliderPositionX = el.offsetLeft
|
||||
this.sliderPositionY = el.offsetTop + el.offsetHeight
|
||||
this.selectedElementWidth = el.offsetWidth
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.omorphia__navrow {
|
||||
.navigation {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
grid-gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
|
||||
.right-slot {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
:deep(.btn) {
|
||||
.nav-link {
|
||||
text-transform: capitalize;
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--color-text);
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: calc(100% - var(--gap-lg) * 2);
|
||||
height: 4px;
|
||||
bottom: 4px;
|
||||
border-radius: var(--radius-max);
|
||||
background-color: var(--color-brand);
|
||||
opacity: 0;
|
||||
&:hover {
|
||||
color: var(--color-text);
|
||||
|
||||
&::after {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
opacity: 50%;
|
||||
&:active::after {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
color: var(--color-contrast);
|
||||
font-weight: bold;
|
||||
&.router-link-exact-active {
|
||||
color: var(--color-text);
|
||||
|
||||
&::after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.use-animation {
|
||||
.nav-link {
|
||||
&.is-active::after {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-indicator {
|
||||
position: absolute;
|
||||
height: 0.25rem;
|
||||
bottom: -5px;
|
||||
left: 0;
|
||||
width: 3rem;
|
||||
transition: all ease-in-out 0.2s;
|
||||
border-radius: var(--size-rounded-max);
|
||||
background-color: var(--color-brand);
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,136 +0,0 @@
|
||||
import MarkdownIt from 'markdown-it'
|
||||
import xss from 'xss'
|
||||
|
||||
export const configuredXss = new xss.FilterXSS({
|
||||
whiteList: {
|
||||
...xss.whiteList,
|
||||
summary: [],
|
||||
h1: ['id'],
|
||||
h2: ['id'],
|
||||
h3: ['id'],
|
||||
h4: ['id'],
|
||||
h5: ['id'],
|
||||
h6: ['id'],
|
||||
kbd: ['id'],
|
||||
input: ['checked', 'disabled', 'type'],
|
||||
iframe: ['width', 'height', 'allowfullscreen', 'frameborder', 'start', 'end'],
|
||||
img: [...xss.whiteList.img, 'style'],
|
||||
a: [...xss.whiteList.a, 'rel'],
|
||||
},
|
||||
css: {
|
||||
whiteList: {
|
||||
'image-rendering': /^pixelated$/,
|
||||
},
|
||||
},
|
||||
onIgnoreTagAttr: (tag, name, value) => {
|
||||
// Allow iframes from acceptable sources
|
||||
if (tag === 'iframe' && name === 'src') {
|
||||
const allowedSources = [
|
||||
{
|
||||
regex:
|
||||
/^https?:\/\/(www\.)?youtube(-nocookie)?\.com\/embed\/[a-zA-Z0-9_-]{11}(\?&autoplay=[0-1]{1})?$/,
|
||||
remove: ['&autoplay=1'], // Prevents autoplay
|
||||
},
|
||||
]
|
||||
|
||||
for (const source of allowedSources) {
|
||||
if (source.regex.test(value)) {
|
||||
for (const remove of source.remove) {
|
||||
value = value.replace(remove, '')
|
||||
}
|
||||
return name + '="' + xss.escapeAttrValue(value) + '"'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// For Highlight.JS
|
||||
if (
|
||||
name === 'class' &&
|
||||
['pre', 'code', 'span'].includes(tag) &&
|
||||
(value.startsWith('hljs-') || value.startsWith('language-'))
|
||||
) {
|
||||
return name + '="' + xss.escapeAttrValue(value) + '"'
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
export const md = (options = {}) => {
|
||||
const md = new MarkdownIt('default', {
|
||||
html: true,
|
||||
linkify: true,
|
||||
breaks: false,
|
||||
...options,
|
||||
})
|
||||
|
||||
const defaultLinkOpenRenderer =
|
||||
md.renderer.rules.link_open ||
|
||||
function (tokens, idx, options, _env, self) {
|
||||
return self.renderToken(tokens, idx, options)
|
||||
}
|
||||
|
||||
md.renderer.rules.link_open = function (tokens, idx, options, env, self) {
|
||||
const token = tokens[idx]
|
||||
const index = token.attrIndex('href')
|
||||
|
||||
if (index !== -1) {
|
||||
const href = token.attrs[index][1]
|
||||
|
||||
try {
|
||||
const url = new URL(href)
|
||||
const allowedHostnames = ['modrinth.com']
|
||||
|
||||
if (allowedHostnames.includes(url.hostname)) {
|
||||
return defaultLinkOpenRenderer(tokens, idx, options, env, self)
|
||||
}
|
||||
} catch (err) {
|
||||
// Ignore
|
||||
}
|
||||
}
|
||||
|
||||
tokens[idx].attrSet('rel', 'noopener nofollow ugc')
|
||||
|
||||
return defaultLinkOpenRenderer(tokens, idx, options, env, self)
|
||||
}
|
||||
|
||||
const defaultImageRenderer =
|
||||
md.renderer.rules.image ||
|
||||
function (tokens, idx, options, _env, self) {
|
||||
return self.renderToken(tokens, idx, options)
|
||||
}
|
||||
|
||||
md.renderer.rules.image = function (tokens, idx, options, env, self) {
|
||||
const token = tokens[idx]
|
||||
const index = token.attrIndex('src')
|
||||
|
||||
if (index !== -1) {
|
||||
const src = token.attrs[index][1]
|
||||
|
||||
try {
|
||||
const url = new URL(src)
|
||||
|
||||
const allowedHostnames = [
|
||||
'i.imgur.com',
|
||||
'cdn-raw.modrinth.com',
|
||||
'cdn.modrinth.com',
|
||||
'staging-cdn-raw.modrinth.com',
|
||||
'staging-cdn.modrinth.com',
|
||||
'raw.githubusercontent.com',
|
||||
'img.shields.io',
|
||||
]
|
||||
|
||||
if (allowedHostnames.includes(url.hostname)) {
|
||||
return defaultImageRenderer(tokens, idx, options, env, self)
|
||||
}
|
||||
} catch (err) {
|
||||
/* empty */
|
||||
}
|
||||
token.attrs[index][1] = `//wsrv.nl/?url=${encodeURIComponent(src)}`
|
||||
}
|
||||
|
||||
return defaultImageRenderer(tokens, idx, options, env, self)
|
||||
}
|
||||
|
||||
return md
|
||||
}
|
||||
|
||||
export const renderString = (string) => configuredXss.process(md().render(string))
|
||||
@@ -9,7 +9,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { formatCategory } from '@/components/utils'
|
||||
import { formatCategory } from '@/helpers/utils.js'
|
||||
</script>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
@@ -1,222 +0,0 @@
|
||||
export const formatNumber = (number) => {
|
||||
const x = +number
|
||||
if (x >= 1000000) {
|
||||
return (x / 1000000).toFixed(2).toString() + 'M'
|
||||
} else if (x >= 10000) {
|
||||
return (x / 1000).toFixed(1).toString() + 'K'
|
||||
} else {
|
||||
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
|
||||
}
|
||||
}
|
||||
|
||||
export function formatMoney(number) {
|
||||
const x = +number
|
||||
if (x >= 1000000) {
|
||||
return '$' + (x / 1000000).toFixed(2).toString() + 'M'
|
||||
} else if (x >= 10000) {
|
||||
return '$' + (x / 1000).toFixed(1).toString() + 'K'
|
||||
} else {
|
||||
return (
|
||||
'$' +
|
||||
x
|
||||
.toFixed(2)
|
||||
.toString()
|
||||
.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export const formatBytes = (bytes, decimals = 2) => {
|
||||
if (bytes === 0) return '0 Bytes'
|
||||
|
||||
const k = 1024
|
||||
const dm = decimals < 0 ? 0 : decimals
|
||||
const sizes = ['Bytes', 'KiB', 'MiB', 'GiB']
|
||||
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
|
||||
}
|
||||
|
||||
export const capitalizeString = (name) => {
|
||||
return name ? name.charAt(0).toUpperCase() + name.slice(1) : name
|
||||
}
|
||||
|
||||
export const formatWallet = (name) => {
|
||||
if (name === 'paypal') {
|
||||
return 'PayPal'
|
||||
}
|
||||
return capitalizeString(name)
|
||||
}
|
||||
|
||||
export const formatProjectType = (name) => {
|
||||
if (name === 'resourcepack') {
|
||||
return 'Resource Pack'
|
||||
} else if (name === 'datapack') {
|
||||
return 'Data Pack'
|
||||
}
|
||||
|
||||
return capitalizeString(name)
|
||||
}
|
||||
|
||||
export const formatCategory = (name) => {
|
||||
if (name === 'modloader') {
|
||||
return "Risugami's ModLoader"
|
||||
} else if (name === 'bungeecord') {
|
||||
return 'BungeeCord'
|
||||
} else if (name === 'liteloader') {
|
||||
return 'LiteLoader'
|
||||
} else if (name === 'game-mechanics') {
|
||||
return 'Game Mechanics'
|
||||
} else if (name === 'worldgen') {
|
||||
return 'World Generation'
|
||||
} else if (name === 'core-shaders') {
|
||||
return 'Core Shaders'
|
||||
} else if (name === 'gui') {
|
||||
return 'GUI'
|
||||
} else if (name === '8x-') {
|
||||
return '8x or lower'
|
||||
} else if (name === '512x+') {
|
||||
return '512x or higher'
|
||||
} else if (name === 'kitchen-sink') {
|
||||
return 'Kitchen Sink'
|
||||
} else if (name === 'path-tracing') {
|
||||
return 'Path Tracing'
|
||||
} else if (name === 'pbr') {
|
||||
return 'PBR'
|
||||
} else if (name === 'datapack') {
|
||||
return 'Data Pack'
|
||||
} else if (name === 'colored-lighting') {
|
||||
return 'Colored Lighting'
|
||||
} else if (name === 'optifine') {
|
||||
return 'OptiFine'
|
||||
}
|
||||
|
||||
return capitalizeString(name)
|
||||
}
|
||||
|
||||
export const formatCategoryHeader = (name) => {
|
||||
return capitalizeString(name)
|
||||
}
|
||||
|
||||
export const formatProjectStatus = (name) => {
|
||||
if (name === 'approved') {
|
||||
return 'Listed'
|
||||
} else if (name === 'processing') {
|
||||
return 'Under review'
|
||||
}
|
||||
|
||||
return capitalizeString(name)
|
||||
}
|
||||
|
||||
export const formatVersions = (versionArray, store) => {
|
||||
const allVersions = store.state.tag.gameVersions.slice().reverse()
|
||||
const allReleases = allVersions.filter((x) => x.version_type === 'release')
|
||||
|
||||
const intervals = []
|
||||
let currentInterval = 0
|
||||
|
||||
for (let i = 0; i < versionArray.length; i++) {
|
||||
const index = allVersions.findIndex((x) => x.version === versionArray[i])
|
||||
const releaseIndex = allReleases.findIndex((x) => x.version === versionArray[i])
|
||||
|
||||
if (i === 0) {
|
||||
intervals.push([[versionArray[i], index, releaseIndex]])
|
||||
} else {
|
||||
const intervalBase = intervals[currentInterval]
|
||||
|
||||
if (
|
||||
(index - intervalBase[intervalBase.length - 1][1] === 1 ||
|
||||
releaseIndex - intervalBase[intervalBase.length - 1][2] === 1) &&
|
||||
(allVersions[intervalBase[0][1]].version_type === 'release' ||
|
||||
allVersions[index].version_type !== 'release')
|
||||
) {
|
||||
intervalBase[1] = [versionArray[i], index, releaseIndex]
|
||||
} else {
|
||||
currentInterval += 1
|
||||
intervals[currentInterval] = [[versionArray[i], index, releaseIndex]]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const newIntervals = []
|
||||
for (let i = 0; i < intervals.length; i++) {
|
||||
const interval = intervals[i]
|
||||
|
||||
if (interval.length === 2 && interval[0][2] !== -1 && interval[1][2] === -1) {
|
||||
let lastSnapshot = null
|
||||
for (let j = interval[1][1]; j > interval[0][1]; j--) {
|
||||
if (allVersions[j].version_type === 'release') {
|
||||
newIntervals.push([
|
||||
interval[0],
|
||||
[
|
||||
allVersions[j].version,
|
||||
j,
|
||||
allReleases.findIndex((x) => x.version === allVersions[j].version),
|
||||
],
|
||||
])
|
||||
|
||||
if (lastSnapshot !== null && lastSnapshot !== j + 1) {
|
||||
newIntervals.push([[allVersions[lastSnapshot].version, lastSnapshot, -1], interval[1]])
|
||||
} else {
|
||||
newIntervals.push([interval[1]])
|
||||
}
|
||||
|
||||
break
|
||||
} else {
|
||||
lastSnapshot = j
|
||||
}
|
||||
}
|
||||
} else {
|
||||
newIntervals.push(interval)
|
||||
}
|
||||
}
|
||||
|
||||
const output = []
|
||||
|
||||
for (const interval of newIntervals) {
|
||||
if (interval.length === 2) {
|
||||
output.push(`${interval[0][0]}—${interval[1][0]}`)
|
||||
} else {
|
||||
output.push(interval[0][0])
|
||||
}
|
||||
}
|
||||
|
||||
return output.join(', ')
|
||||
}
|
||||
|
||||
export function cycleValue(value, values) {
|
||||
const index = values.indexOf(value) + 1
|
||||
return values[index % values.length]
|
||||
}
|
||||
|
||||
export const fileIsValid = (file, validationOptions) => {
|
||||
const { maxSize, alertOnInvalid } = validationOptions
|
||||
if (maxSize !== null && maxSize !== undefined && file.size > maxSize) {
|
||||
if (alertOnInvalid) {
|
||||
alert(`File ${file.name} is too big! Must be less than ${formatBytes(maxSize)}`)
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
export const acceptFileFromProjectType = (projectType) => {
|
||||
switch (projectType) {
|
||||
case 'mod':
|
||||
return '.jar,.zip,.litemod,application/java-archive,application/x-java-archive,application/zip'
|
||||
case 'plugin':
|
||||
return '.jar,.zip,application/java-archive,application/x-java-archive,application/zip'
|
||||
case 'resourcepack':
|
||||
return '.zip,application/zip'
|
||||
case 'shader':
|
||||
return '.zip,application/zip'
|
||||
case 'datapack':
|
||||
return '.zip,application/zip'
|
||||
case 'modpack':
|
||||
return '.mrpack,application/x-modrinth-modpack+zip,application/zip'
|
||||
default:
|
||||
return '*'
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user