Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
The javascript portion of the Projects component for Net Your Problem.
import axios from 'axios';
import VueMarkdown from 'vue-markdown';
import Card from './material-components/Card';
import ScrollDownToSection from './ScrollDownToSection';
import Timeline from './Timeline';
import SimpleModal from './dialogs/SimpleModal';
const contentRepositoryApiBaseUrl = process.env.CONTENT_REPOSITORY_API_BASE_URL;
export default {
name: 'projects',
components: {
card: Card,
'scroll-down-to-section': ScrollDownToSection,
timeline: Timeline,
'vue-markdown': VueMarkdown,
modal: SimpleModal
props: ['nextSectionHref'],
methods: {
scrollToElement(target) {
this.$emit('scrollToElement', target);
getProjectContentUrl(page) {
return `${contentRepositoryApiBaseUrl}/projects/${page}.json`;
async showProjectDetails(project) {
const projectUrl = this.getProjectContentUrl(project);
const response = await axios.get(projectUrl);
this.projectTitle =;
this.markdownSource =;
this.showModal = true;
async created() {
const response = await axios.get(`${contentRepositoryApiBaseUrl}/lists/projects.json`);
const projects =;
projects.forEach((project) => {
text: project.cardTitle,
cover: project.cardImage,
detailedInformationFileName: project.detailedInformationFileName
data() {
return {
showModal: false,
projects: [],
projectTitle: '',
markdownSource: ''
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment