Spookie/assets/js/components/projects/ProjectDetails.vue

<template>
	<div
		v-if="isLoading"
		class="circle"
	>
		<i class="fa fa-spinner fa-spin fa-3x fa-fw"/>
		<span class="sr-only">Loading …</span>
	</div>
	<div
		v-else
		class="row"
	>
		<div class="col-sm-12">
			<!--            {% if is_granted('ROLE_ADMIN') %}
            <div class="d-flex justify-content-end">
                <a :to="id"><i class="fa fa-3x fa-fw fa-edit"></i></a>
                <a :to="project.id"><i class="fa fa-3x fa-fw fa-trash"></i></a>
            </div>
            {% endif %}-->

			<div class="show-article-container p-3 mt-4">
				<div class="show-article-title-container d-inline-block pl-3 align-middle">
					<h2>{{ project.name }}</h2>
				</div>
				<div>
					Source:
					<a
						:href="project.url"
						target="_blank"
					>
						{{ project.url }}
					</a>
					&nbsp;
					<i
						class="fa fa-external-link"
						aria-hidden="true"
					/>
				</div>
				<div class="row mt-5">
					<div class="col-sm-12">
						<!-- eslint-disable vue/no-v-html -->
						<div
							class="article-text"
							v-html="readmeToHtml"
						/>
						<!-- eslint-enable -->
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>

import axios from 'axios'
import { marked } from 'marked'
import Author from '@/components/users/UserCard'

export default {
	Name: 'ProjectDetails',
	components: {
		Author,
		marked
	},
	data: () => ({
		project: null,
		readme: null,
		isLoading: true
	}),
	computed: {
		readmeToHtml() {
			if (!this.isLoading) {
				return marked(this.readme)
			}
			return ''
		}
	},
	mounted() {
		const { id } = this.$route.params
		console.log(id)
		axios
			.get(`/api/projects/${id}`)
			.then((projectResponse) => {
				this.project = projectResponse.data
				console.log(this.project)
				axios
					.get(`${this.project.url}/raw/branch/master/README.md`)
					.then((response) => {
						this.readme = response.data
						this.isLoading = false
						console.log(response)
					})
					.catch((error) => {
						console.log(error)
					})
			})
			.catch((error) => {
				console.log(error)
			})
	},
	methods: {
		getProjects() {
		}
	}
}
</script>