add prismjs

imhul · Feb 1, 2024 · bbdff14 · bbdff14
1 parent 3967b51
commit bbdff14
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 44 deletions.
diff --git a/package.json b/package.json
@@ -42,6 +42,7 @@
     "dependencies": {
         "@fontsource/roboto": "^5.0.8",
         "@sveltejs/adapter-static": "^3.0.1",
+        "@types/prismjs": "^1.26.3",
         "prismjs": "^1.29.0",
         "schema-dts": "^1.1.2"
     }

diff --git a/src/lib/components/Config/code.svelte b/src/lib/components/Config/code.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
     import { cssData, angle } from '$lib/store';
+    import Prism from 'prismjs';
+    import 'prismjs/themes/prism.min.css';
 
     type State = 'css' | 'scss' | 'less';
     const state: Record<State, boolean> = {
@@ -133,7 +135,15 @@
         </svg>
     </div>
 
-    <pre><code>{@html code}</code></pre>
+    <pre>
+        <code>
+            {@html Prism.highlight(
+                code,
+                Prism.languages['css'],
+                'css'
+            )}
+        </code>
+    </pre>
 </div>
 
 <style lang="scss">

diff --git a/src/lib/components/SEO/index.svelte b/src/lib/components/SEO/index.svelte
@@ -1,9 +1,9 @@
- <script lang="ts">
+<script lang="ts">
     import { data, defaultImage } from '$lib/utils/config';
     import { schema } from '$lib/utils/schema';
-  </script> 
-  
-   <svelte:head>
+</script>
+
+<svelte:head>
     <title>{data.description}</title>
 
     <!-- links -->
@@ -16,40 +16,44 @@
 
     <!-- meta -->
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+        name="viewport"
+        content="width=device-width, initial-scale=1"
+    />
     <meta name="description" content={data.description} />
     <meta name="msapplication-TileColor" content={data.theme} />
     <meta name="theme-color" content={data.theme} />
-    <meta name="robots" content='all' />
-    <meta name="googlebot" content='all' />
+    <meta name="robots" content="all" />
+    <meta name="googlebot" content="all" />
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-title" content={data.siteName} />
-    <meta name="apple-mobile-web-app-status-bar-style" content={data.theme} />
+    <meta
+        name="apple-mobile-web-app-status-bar-style"
+        content={data.theme}
+    />
     <meta name="referrer" content="always" />
     <meta name="subject" content={data.description} />
     <meta name="rating" content="safe for kids" />
     <meta name="format-detection" content="telephone=no" />
     <meta name="google-site-verification" content={data.googleId} />
-  
-     <!-- Open Graph / Facebook -->
+
+    <!-- Open Graph / Facebook -->
     <meta property="op:markup_version" content="v1.0" />
-    <meta property="og:type" content='website' />
+    <meta property="og:type" content="website" />
     <meta property="og:url" content={data.siteUrl} />
     <meta property="og:title" content={data.description} />
     <meta property="og:description" content={data.description} />
     <meta property="og:image" content={defaultImage} />
     <meta property="og:image:width" content="512" />
     <meta property="og:image:height" content="512" />
     <meta property="og:image:alt" content={data.description} />
-    <meta property="business:contact_data:country_name" content="Ukraine" />
+    <meta
+        property="business:contact_data:country_name"
+        content="Ukraine"
+    />
     <meta property="og:locale" content="en_US" />
-    <meta property="og:site_name" content={data.siteName} /> 
-
-     <!-- {#if !browser}  -->
-       <!-- {#each schemas as schema} -->
-        {@html `<script type="application/ld+json">${JSON.stringify(schema)}</script>`}
-      <!-- {/each} -->
-      <!-- {/if}  -->
-   </svelte:head> 
-
+    <meta property="og:site_name" content={data.siteName} />
+
+    {@html `<script type="application/ld+json">${JSON.stringify(schema)}</script>`}
+</svelte:head>
diff --git a/src/lib/utils/config.ts b/src/lib/utils/config.ts
@@ -18,13 +18,16 @@ export const data = {
     linkedin: 'https://www.linkedin.com/in/tkachuk-zakhar-04733892/',
     email: '[email protected]',
     theme: '#FFFFFF',
-    description: 'Neumorphine.css - Open Source Concept CSS UI Library',
-    webmention: "https://webmention.io/imhul.github.io_neumorphine.css_/webmention",
-    pingback: "https://webmention.io/imhul.github.io_neumorphine.css_/xmlrpc",
+    description:
+        'Neumorphine.css - Open Source Concept CSS UI Library',
+    webmention:
+        'https://webmention.io/imhul.github.io_neumorphine.css_/webmention',
+    pingback:
+        'https://webmention.io/imhul.github.io_neumorphine.css_/xmlrpc',
     datePublished: '2024-02-01T20:27:01.288Z',
     homePage: 'https://weblogic.netlify.app/',
     gitHub: 'https://github.com/imhul',
     googleId: 'GDG6jgEQmYmiM4K97vTzvksOLC97pq7b7f_8G0RIq8Y'
-  };
+};
 
-  export const defaultImage = data.siteUrl + '/preview.png';
+export const defaultImage = data.siteUrl + '/preview.png';
diff --git a/src/lib/utils/schema.ts b/src/lib/utils/schema.ts
@@ -8,15 +8,20 @@ export const schema: Graph = {
     '@graph': [
         {
             '@type': 'WebSite',
-            "@id": data.siteUrl + '/#website',
+            '@id': data.siteUrl + '/#website',
             url: data.siteUrl,
             name: data.siteName,
             description: data.description,
             author: data.author,
-            sameAs: [data.siteUrl, data.linkedin, data.homePage, data.gitHub],
-            inLanguage: "en-US",
+            sameAs: [
+                data.siteUrl,
+                data.linkedin,
+                data.homePage,
+                data.gitHub
+            ],
+            inLanguage: 'en-US',
             publisher: {
-                "@id": data.siteUrl + '/#organization',
+                '@id': data.siteUrl + '/#organization'
             }
         },
         {
@@ -32,14 +37,19 @@ export const schema: Graph = {
                 email: data.email,
                 contactType: 'customer service'
             },
-            sameAs: [data.siteUrl, data.linkedin, data.homePage, data.gitHub],
+            sameAs: [
+                data.siteUrl,
+                data.linkedin,
+                data.homePage,
+                data.gitHub
+            ],
             logo: {
                 '@type': 'ImageObject',
-                "@id": data.siteUrl + '/#/logo/image',
+                '@id': data.siteUrl + '/#/logo/image',
                 name: `${data.siteName} Logo`,
                 url: defaultImage,
                 contentUrl: defaultImage,
-                inLanguage: "en-US",
+                inLanguage: 'en-US',
                 width: '512',
                 height: '512',
                 caption: data.siteName
@@ -60,9 +70,9 @@ export const schema: Graph = {
             description: data.description,
             mainEntity: {
                 '@id': data.siteUrl + '/#website'
-            },
-          },
-          {
+            }
+        },
+        {
             '@type': 'WebPage',
             '@id': data.siteUrl + '/#page',
             url: data.siteUrl,
@@ -71,21 +81,26 @@ export const schema: Graph = {
             datePublished: data.datePublished,
             dateModified: date,
             isPartOf: {
-              '@id': data.siteUrl + '/#about'
+                '@id': data.siteUrl + '/#about'
             },
-            sameAs: [data.siteUrl, data.linkedin, data.homePage, data.gitHub],
+            sameAs: [
+                data.siteUrl,
+                data.linkedin,
+                data.homePage,
+                data.gitHub
+            ],
             potentialAction: [
                 {
-                    "@type": "ReadAction",
-                    "target": [data.siteUrl]
+                    '@type': 'ReadAction',
+                    target: [data.siteUrl]
                 }
             ],
             about: {
-                "@id": data.siteUrl + '/#organization'
+                '@id': data.siteUrl + '/#organization'
             },
             mainEntity: {
                 '@id': data.siteUrl + '/#website'
-            },
-          },
+            }
+        }
     ]
 };
diff --git a/yarn.lock b/yarn.lock
@@ -306,6 +306,11 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
   integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==
 
+"@types/prismjs@^1.26.3":
+  version "1.26.3"
+  resolved "https://registry.yarnpkg.com/@types/prismjs/-/prismjs-1.26.3.tgz#47fe8e784c2dee24fe636cab82e090d3da9b7dec"
+  integrity sha512-A0D0aTXvjlqJ5ZILMz3rNfDBOx9hHxLZYv2by47Sm/pqW35zzjusrZTryatjN/Rf8Us2gZrJD+KeHbUSTux1Cw==
+
 "@types/pug@^2.0.6":
   version "2.0.10"
   resolved "https://registry.yarnpkg.com/@types/pug/-/pug-2.0.10.tgz#52f8dbd6113517aef901db20b4f3fca543b88c1f"