Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: 🎸 support carousel in md #1065

Merged
merged 1 commit into from
Sep 13, 2024
Merged

feat: 🎸 support carousel in md #1065

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 15 additions & 13 deletions 1000-hours/.vitepress/config.mts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import sup from "markdown-it-sup";
import sub from "markdown-it-sub";
import mark from "markdown-it-mark";
import ins from "markdown-it-ins";
import carousel from "./lib/markdown-it-carousel";

// import markdownit from 'markdown-it'

Expand Down Expand Up @@ -94,7 +95,8 @@ export default withMermaid(
link: "/sounds-of-american-english/0-intro",
collapsed: true,
items: [
{ text: "1. 基础",
{
text: "1. 基础",
link: "/sounds-of-american-english/1-basics",
items: [
{
Expand All @@ -104,11 +106,11 @@ export default withMermaid(
{
text: "1.2. 英文字母",
link: "/sounds-of-american-english/1.2-alphabets",
},
]
},
],
},
{
text: "2. 发声器官",
text: "2. 发声器官",
link: "/sounds-of-american-english/2-articulators",
},
{
Expand Down Expand Up @@ -149,7 +151,7 @@ export default withMermaid(
text: "3.1.7. aɪ... oʊ",
link: "/sounds-of-american-english/3.1.7-aɪ",
},
]
],
},
{
text: "3.2. 辅音",
Expand Down Expand Up @@ -207,7 +209,7 @@ export default withMermaid(
{
text: "3.2.13. w, j",
link: "/sounds-of-american-english/3.2.13-wj",
},
},
{
text: "3.2.14. h",
link: "/sounds-of-american-english/3.2.14-h",
Expand Down Expand Up @@ -272,7 +274,7 @@ export default withMermaid(
text: "6.4. 常见词根词缀",
link: "/sounds-of-american-english/6.4-parts-of-words",
},
]
],
},
{
text: "7. 从此之后",
Expand Down Expand Up @@ -423,8 +425,8 @@ export default withMermaid(
},
],
},
]
}
],
},
],

"/enjoy-app/": [
Expand Down Expand Up @@ -482,7 +484,6 @@ export default withMermaid(
link: "/intro",
},
],

},

socialLinks: [
Expand All @@ -494,7 +495,7 @@ export default withMermaid(
},

sitemap: {
hostname: 'https://1000h.org'
hostname: "https://1000h.org",
},

lastUpdated: true,
Expand All @@ -509,10 +510,11 @@ export default withMermaid(
md.use(sup);
md.use(mark);
md.use(ins);
md.use(carousel);
},
toc: {
level: [1, 2, 3]
}
level: [1, 2, 3],
},
},
})
);
46 changes: 46 additions & 0 deletions 1000-hours/.vitepress/lib/markdown-it-carousel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import type MarkdownIt from "markdown-it/lib/index.mjs";
import * as cheerio from "cheerio";

export default function carouselPlugin(md: MarkdownIt) {
const html_block = md.renderer.rules.html_block!;

md.renderer.rules.html_block = (...args) => {
const [tokens, idx] = args;
const token = tokens[idx];

try {
if (token.content.match(/class=["']carousel["']/)) {
const $ = cheerio.load(token.content, null, false);
const carousel = $(".carousel");

if (carousel) {
const imgs = Array.from($(".carousel img"))
.map((item) => {
const src = $(item).attr("src");
return `<swiper-slide><img src="${src}" /></swiper-slide>`;
})
.join("");

const template = `
<div class="carousel">
<swiper-container class="carousel-inner" thumbs-swiper=".swiper-thumb" space-between="10" navigation="true" pagination="true">
${imgs}
</swiper-container>
<swiper-container class="swiper-thumb" slides-per-view="4" free-mode="true" space-between="10">
${imgs}
</swiper-container>
</div>
`;

carousel.replaceWith(template);

return $.html();
}
}
} catch (error) {
console.log("convert carousel element error");
}

return html_block(...args);
};
}
52 changes: 32 additions & 20 deletions 1000-hours/.vitepress/theme/components/SpeakWord.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,39 @@
<template>
<div class="speak-word">
<div class="word" >
<div class="word">
{{ props.word }}
</div>
<div v-if="pos" class="pos">
{{ props.pos }}
</div>
<div class="spacer"></div>
<div class="ctrl">
<div class="ctrl-part" :class="item.label" v-for="item, ix in audios" :key="`audio-${ix}`">
<div
class="ctrl-part"
:class="item.label"
v-for="(item, ix) in audios"
:key="`audio-${ix}`"
>
<div v-if="ix !== 0" class="divider"></div>
<button class="play-button" :class="item.label" @click="playAudio(item.label)">
<button
class="play-button"
:class="item.label"
@click="playAudio(item.label)"
>
<span class="accent-label">{{ item.label }}</span>
<img :src="svgUrl(item.label)" class="icon" alt="sound" />
</button>
<audio class="audio" :class="item.label" :src="item.audio" controls="false" ></audio>
<audio
class="audio"
:class="item.label"
:src="item.audio"
controls="false"
></audio>
</div>
</div>
</div>
</template>


<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { getAudioPath } from "../data";
Expand All @@ -44,56 +57,55 @@ const props = defineProps({
});

const svgUrl = (accent) => {
if (accent === 'uk') {
return '/images/speaker-brown.svg';
} else if (accent === 'us') {
return '/images/speaker-blue.svg';
if (accent === "uk") {
return "/images/speaker-brown.svg";
} else if (accent === "us") {
return "/images/speaker-blue.svg";
}
return '/images/speaker-black.svg';
}
return "/images/speaker-black.svg";
};

const audioPathUS = computed(() => {
if (props.audioUs) {
return props.audioUs;
}
return getAudioPath(props.word, "us")
return getAudioPath(props.word, "us");
});

const audioPathUK = computed(() => {
if (props.audioUk) {
return props.audioUk;
}
return getAudioPath(props.word, "uk")
return getAudioPath(props.word, "uk");
});

const audioPathOther = computed(() => {
if (props.audioUk) {
return props.audioUk;
}
return getAudioPath(props.word, "other")
return getAudioPath(props.word, "other");
});

const audios = computed(() => {
const ret:any = [];
const ret: any = [];
if (audioPathUS.value) {
ret.push({ label: 'us', audio: audioPathUS.value});
ret.push({ label: "us", audio: audioPathUS.value });
}
if (audioPathUK.value) {
ret.push({ label: 'uk', audio: audioPathUK.value});
ret.push({ label: "uk", audio: audioPathUK.value });
}
if (audioPathOther.value) {
ret.push({ label: 'other', audio: audioPathOther.value});
ret.push({ label: "other", audio: audioPathOther.value });
}
return ret;
});

function playAudio(accent) {
const audioEl:any = document.querySelector(`audio.${accent}`);
const audioEl: any = document.querySelector(`audio.${accent}`);
audioEl.play();
}
</script>


<style lang="scss" scoped>
@import url(./SpeakWord.scss);
</style>
18 changes: 9 additions & 9 deletions 1000-hours/.vitepress/theme/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
// https://vitepress.dev/guide/custom-theme
import { h } from 'vue'
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import SpeakWord from './components/SpeakWord.vue'
import MyLayout from './layouts/index.vue'
import './style.scss'
import { h } from "vue";
import type { Theme } from "vitepress";
import DefaultTheme from "vitepress/theme";
import SpeakWord from "./components/SpeakWord.vue";
import MyLayout from "./layouts/index.vue";
import "./style.scss";

export default {
extends: DefaultTheme,
Expand All @@ -16,6 +16,6 @@ export default {
// },
enhanceApp({ app, router, siteData }) {
// ...
app.component('SpeakWord', SpeakWord)
}
} satisfies Theme
app.component("SpeakWord", SpeakWord);
},
} satisfies Theme;
15 changes: 8 additions & 7 deletions 1000-hours/.vitepress/theme/layouts/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
<script setup>
import DefaultTheme from 'vitepress/theme'
import SpeakWordInlineConverter from '../components/SpeakWordInlineConverter.vue'
import ThemedImageSwitch from '../components/ThemedImageSwitch.vue'
import DefaultTheme from "vitepress/theme";
import SpeakWordInlineConverter from "../components/SpeakWordInlineConverter.vue";
import ThemedImageSwitch from "../components/ThemedImageSwitch.vue";
import { register } from "swiper/element/bundle";

const { Layout } = DefaultTheme
const { Layout } = DefaultTheme;

register();
</script>

<template>
Expand All @@ -18,12 +20,11 @@ const { Layout } = DefaultTheme
</Layout>
</template>

<style lang="scss" >
<style lang="scss">
@import url(../components/SpeakWord.scss);
.speak-word-wrapper {
display: inline-block;
margin: 0px;
vertical-align: middle;
}

</style>
</style>
Loading
Loading