Skip to content

Dev #15

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

Merged
merged 2 commits into from
May 5, 2023
Merged

Dev #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a23f5fb
Fixed trailing comma
webdevnerdstuff May 5, 2023
386ab72
Updating sass to use @use instead of @import
webdevnerdstuff May 5, 2023
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
46 changes: 26 additions & 20 deletions src/components/Sections/ThemesSection.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,10 @@
(<code>neon-bunny</code>,
<code>neon-bunny-carrot</code>) built into the component that are based
off of my own VSCode
<a :href="links.neonBunnyTheme" target="_blank">Neon Bunny Theme</a>.
<a
:href="links.neonBunnyTheme"
target="_blank"
>Neon Bunny Theme</a>.
</p>

<CodeBlock
Expand All @@ -32,28 +35,24 @@
<p>
Another other is to use the main
<a
:href="
selectedLibrary.id === 'prism'
? prismLinks.homepage
: highlightJsLinks.homepage
"
:href="selectedLibrary.id === 'prism'
? prismLinks.homepage
: highlightJsLinks.homepage
"
target="_blank"
>{{ selectedLibrary.label }}</a
>
>{{ selectedLibrary.label }}</a>
themes. If you use the component to load the theme, you just need to set
the
<a href="#props-theme-option">theme</a> prop to the desired theme. When
you load it this way, the component will use a <code>fetch</code> call
to load them themes from the
<a
:href="
selectedLibrary.id === 'prism'
? prismLinks.cdn
: highlightJsLinks.cdn
"
:href="selectedLibrary.id === 'prism'
? prismLinks.cdn
: highlightJsLinks.cdn
"
target="_blank"
>jsDelivr CDN</a
>. Fetching the {{ selectedLibrary.label }} themes from a CDN was the
>jsDelivr CDN</a>. Fetching the {{ selectedLibrary.label }} themes from a CDN was the
best method I could figure out at this time to dynamically load the
themes, while making it easier for you to use them. You can also link to
another CDN of your choice.
Expand Down Expand Up @@ -92,7 +91,10 @@

<p v-if="selectedLibrary.id === 'prism'">
Themes from their
<a :href="prismLinks.themes" target="_blank">Prism themes</a>
<a
:href="prismLinks.themes"
target="_blank"
>Prism themes</a>
repository can be used this way as well.
<span v-html="tabIconCopy"></span>
</p>
Expand All @@ -115,11 +117,15 @@
<CodeBlock
:code="examples[selectedLibrary.id].importCss"
:highlightjs="selectedLibrary.id === 'highlightjs'"
label="Using import (css/sass/scss)"
label="Using <code>@use</code> (css/sass/scss)"
lang="html"
:prismjs="selectedLibrary.id === 'prism'"
:theme="selectedTheme"
/>
>
<template #label>
Using <code>@use</code> (css/sass/scss)
</template>
</CodeBlock>
</div>
</div>
</template>
Expand Down Expand Up @@ -153,7 +159,7 @@ const examples = {
theme="neon-bunny-carrot"
/>`,
importCss: `<style>
@import 'prismjs/themes/prism-coy.css';
@use 'prismjs/themes/prism-coy.css';
<\/style>`,
importJs: `<script setup>
import 'prismjs/themes/prism-coy.css';
Expand Down Expand Up @@ -190,7 +196,7 @@ const examples = {
theme="neon-bunny-carrot"
/>`,
importCss: `<style>
@import 'highlight.js/styles/base16/onedark.css';
@use 'highlight.js/styles/base16/onedark.css';
<\/style>`,
importJs: `<script setup>
import 'highlight.js/styles/base16/onedark.css';
Expand Down
19 changes: 14 additions & 5 deletions src/plugin/CodeBlock.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,27 @@
<template>
<div class="v-code-block v-code-block--mb-5" :class="codeBlockClasses">
<div
class="v-code-block v-code-block--mb-5"
:class="codeBlockClasses"
>
<div
v-if="label || tabs || slots.label || slots.tabs"
class="v-code-block--header"
:style="headerStyles"
>
<div class="v-code-block--label v-code-block--pb-1" :class="labelClasses">
<div
class="v-code-block--label v-code-block--pb-1"
:class="labelClasses"
>
<template v-if="slots.label">
<slot name="label" />
</template>
<template v-else>{{ props.label }}</template>
</div>

<div class="v-code-block--tabs" :style="tabGroupStyle">
<div
class="v-code-block--tabs"
:style="tabGroupStyle"
>
<template v-if="slots.tabs">
<slot name="tabs" />
</template>
Expand Down Expand Up @@ -658,7 +667,7 @@ function runCode(): void {
</script>

<style lang="scss">
@import './styles/utilities';
@use './styles/utilities';

.v-code-block {
&- {
Expand All @@ -676,5 +685,5 @@ function runCode(): void {
</style>

<style lang="scss" scoped>
@import './styles/main';
@use './styles/main';
</style>
2 changes: 1 addition & 1 deletion src/plugin/StatusIcons.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,5 +51,5 @@ defineProps({
</script>

<style lang="scss">
@import './styles/themeStyles';
@use './styles/themeStyles';
</style>
2 changes: 1 addition & 1 deletion tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
],
"include": [
"src/**/*.ts",
"src/**/*.vue",
"src/**/*.vue"
],
"references": [
{
Expand Down