From 1b3474ca2e675a0e1e0bc8766c9c5cead41e8ec5 Mon Sep 17 00:00:00 2001 From: hamalt Date: Tue, 2 Aug 2022 14:48:35 +0900 Subject: [PATCH] #44 Added document OGP --- docusaurus/docs/README.md | 6 +- docusaurus/docs/events.md | 2 +- docusaurus/docs/getting-started.md | 3 +- docusaurus/docs/methods.md | 2 +- docusaurus/docs/options.md | 3 +- docusaurus/docusaurus.config.js | 22 ++ .../HomepageFeatures/styles.module.css | 4 +- docusaurus/src/css/custom.css | 293 ++++++++++++++++-- docusaurus/src/css/custom.css.map | 1 + docusaurus/src/css/custom.scss | 40 ++- docusaurus/src/pages/index.js | 36 +-- docusaurus/static/img/favicon.ico | Bin 3626 -> 102134 bytes docusaurus/static/img/icons8-easy.svg | 4 +- docusaurus/static/img/icons8-javascript.svg | 4 +- docusaurus/static/img/icons8-what.svg | 2 +- docusaurus/static/img/logo.svg | 2 +- docusaurus/static/img/scsaver_github_ogp.png | Bin 0 -> 35869 bytes 17 files changed, 351 insertions(+), 73 deletions(-) create mode 100644 docusaurus/src/css/custom.css.map create mode 100644 docusaurus/static/img/scsaver_github_ogp.png diff --git a/docusaurus/docs/README.md b/docusaurus/docs/README.md index 1ae2696..d7203d3 100644 --- a/docusaurus/docs/README.md +++ b/docusaurus/docs/README.md @@ -2,7 +2,7 @@ sidebar_label: Scsaver.js sidebar_position: 1 title: Readme | Scsaver.js Documents -# description: +description: An overview of Scsaver.js. Envisioned use cases, etc. # image: keywords: [Scsaver.js, Readme] --- @@ -21,8 +21,8 @@ It is a JavaScript library to realize the function of the screen saver on the we This program was used in an interactive video for booth installation. (I created it because I had to display a different video or image than the interactive video if there was no action.) -## Assumed use case +## Envisioned use cases - Screensaver for interactive video. - Screensaver for tablet ordering system. -- Screensaver for web-based content. \ No newline at end of file +- Screensaver for web-based content. diff --git a/docusaurus/docs/events.md b/docusaurus/docs/events.md index d78a9ac..96a8e91 100644 --- a/docusaurus/docs/events.md +++ b/docusaurus/docs/events.md @@ -2,7 +2,7 @@ sidebar_label: Events sidebar_position: 5 title: Events | Scsaver.js Documents -# description: +description: About events in Scsaver.js. # image: keywords: [Scsaver.js, Events] --- diff --git a/docusaurus/docs/getting-started.md b/docusaurus/docs/getting-started.md index c3528bb..6f97e9d 100644 --- a/docusaurus/docs/getting-started.md +++ b/docusaurus/docs/getting-started.md @@ -2,8 +2,7 @@ sidebar_label: Getting Started sidebar_position: 2 title: Getting Started | Scsaver.js Documents -# description: -# image: +description: How to getting started with Scsaver.js. keywords: [Scsaver.js, Getting Started] --- diff --git a/docusaurus/docs/methods.md b/docusaurus/docs/methods.md index affd384..c939e3b 100644 --- a/docusaurus/docs/methods.md +++ b/docusaurus/docs/methods.md @@ -2,7 +2,7 @@ sidebar_label: Methods sidebar_position: 4 title: Methods | Scsaver.js Documents -# description: +description: About methods of Scsaver.js. # image: keywords: [scsaver.js, Methods] --- diff --git a/docusaurus/docs/options.md b/docusaurus/docs/options.md index 7f804d6..4bb7020 100644 --- a/docusaurus/docs/options.md +++ b/docusaurus/docs/options.md @@ -2,8 +2,7 @@ sidebar_label: Options sidebar_position: 3 title: Options | Scsaver.js Documents -# description: -# image: +description: About Scsaver.js options. keywords: [Scsaver.js, Options] --- diff --git a/docusaurus/docusaurus.config.js b/docusaurus/docusaurus.config.js index 6c6df87..e276532 100644 --- a/docusaurus/docusaurus.config.js +++ b/docusaurus/docusaurus.config.js @@ -26,6 +26,22 @@ const config = { locales: ['en', 'jp'], }, + stylesheets: [ + { + rel: 'preconnect', + href: 'https://fonts.googleapis.com', + }, + { + rel: 'preconnect', + href: 'https://fonts.gstatic.com', + crossorigin: true, + }, + { + rel: 'stylesheet', + href: 'https://fonts.googleapis.com/css2?family=Montserrat:wght@100;700;900&display=swap' + }, + ], + scripts: [ { src: 'https://cdn.jsdelivr.net/npm/scsaver@latest/dist/scsaver.min.js', @@ -62,6 +78,12 @@ const config = { themeConfig: /** @type {import('@docusaurus/preset-classic').ThemeConfig} */ ({ + metadata: [ + { + property: 'og:image', + content: '/scsaver/img/scsaver_github_ogp.png', + } + ], colorMode: { defaultMode: 'dark', disableSwitch: true, diff --git a/docusaurus/src/components/HomepageFeatures/styles.module.css b/docusaurus/src/components/HomepageFeatures/styles.module.css index 206cfd6..fa18adf 100644 --- a/docusaurus/src/components/HomepageFeatures/styles.module.css +++ b/docusaurus/src/components/HomepageFeatures/styles.module.css @@ -3,9 +3,9 @@ align-items: center; padding: 2rem 0; width: 100%; - background-color: #232393; + background-color: var(--ifm-color-primary-lightest); /* background-color: #1f1f4e; */ - color: var(--ifm-color-primary-light); + color: var(--ifm-color-primary-darkest); } .featureSvg { diff --git a/docusaurus/src/css/custom.css b/docusaurus/src/css/custom.css index b826e95..6d43162 100644 --- a/docusaurus/src/css/custom.css +++ b/docusaurus/src/css/custom.css @@ -4,7 +4,6 @@ * work well for content-centric websites. * @see https://docusaurus.io/docs/styling-layout */ - /* You can override the default Infima variables here. */ :root { --ifm-color-primary: #2e8555; @@ -16,38 +15,296 @@ --ifm-color-primary-lightest: #3cad6e; --ifm-code-font-size: 95%; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); - /* navbar */ --ifm-navbar-background-color: transparent; + --ifm-footer-background-color: #000419; } /* For readability concerns, you should choose a lighter palette in dark mode. */ -[data-theme='dark'] { - --ifm-color-primary: #25c2a0; - --ifm-color-primary-dark: #21af90; - --ifm-color-primary-darker: #1fa588; - --ifm-color-primary-darkest: #1a8870; - --ifm-color-primary-light: #29d5b0; - --ifm-color-primary-lighter: #32d8b4; - --ifm-color-primary-lightest: #4fddbf; - --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); +html[data-theme=dark] { + --ifm-color-primary: #989de2; + --ifm-color-primary-dark: #7b81da; + --ifm-color-primary-darker: #6c73d6; + --ifm-color-primary-darkest: #666dd4; + --ifm-color-primary-light: #b5b9ea; + --ifm-color-primary-lighter: #c4c7ee; + --ifm-color-primary-lightest: #f0f1fb; + --ifm-background-color: #000419; +} + +html:not(.docs-doc-page) .navbar--fixed-top { + position: fixed; + width: 100%; } .cover { /* top: 0; left: 0; z-index: 999; */ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; align-items: center; background-position: 50%; background-repeat: no-repeat; background-size: cover; - height: 100vh; - width: 100vw; - background-color: #060917; - color: #bfcfef; + min-height: 100vh; + width: 100%; + background-color: #000419; + color: var(--ifm-color-primary-light); + padding: 5rem 0; +} +.cover-inner { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; +} +.cover .scsaver { + position: absolute; +} +.cover a { + color: inherit; + text-decoration: none; +} +.cover a:hover { + text-decoration: none; +} +.cover p { + line-height: 1.5rem; + margin: 1em 0; +} +.cover .action-link { + margin: 1.5rem 0 0; +} +.cover .action-link a { + border-radius: 2rem; + border: 1px solid var(--ifm-color-primary-light); + box-sizing: border-box; + color: var(--ifm-color-primary-light); + display: inline-block; + font-size: 1.05rem; + letter-spacing: 0.1rem; + margin: 0.5rem 1rem 0; + padding: 0.75em 2rem; + text-decoration: none; + transition: all 0.15s ease; + opacity: 1; +} +.cover .action-link a:hover { + color: inherit; + opacity: 0.75; +} +.cover .action-link a:last-child { + background-color: var(--ifm-color-primary-light); + color: #000419; +} +.cover h1 { + color: inherit; + font-size: 2.5rem; + font-weight: 300; + margin: 0.625rem 0 0; + position: relative; + text-align: center; + font-family: "Montserrat", sans-serif; + font-weight: 900; +} +.cover h1 a { + display: block; +} +.cover h1 small { + bottom: -0.4375rem; + font-size: 1rem; + position: absolute; +} +.cover-logo { + width: 8rem; + height: 8rem; +} +.cover-tagline { + margin: 1.5rem 0 2.5rem; + font-size: 1.5rem; + text-align: center; + font-weight: normal; +} +.cover-tagline > p > a { + border-bottom: 2px solid var(--theme-color, #42b983); + transition: color 0.3s; +} +.cover-tagline > p > a:hover { + color: var(--theme-color, #42b983); +} +.cover ul { + line-height: 1.8; + list-style-type: none; + margin: 1em auto; + max-width: 500px; + padding: 0; } -.navbar--fixed-top { - position: fixed; +.demo { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 1.5rem; + border-radius: 0.5rem; + border: 0.0625rem solid #585858; + max-width: 100%; + margin-top: 1.5rem; +} +.demo-headline { + margin: 0; + text-align: center; + margin-top: -1.5rem; + transform: translateY(-50%); + background: #000419; + text-align: center; + width: auto; + padding: 0 1.5rem; + font-weight: normal; +} +.demo-control-field { + text-align: center; +} +.demo-control-field:not(:last-child) { + margin-bottom: 0.5rem; +} +.demo-control-field input[type=checkbox] { + display: none; +} +.demo-control-enabled label, +.demo-control-enabled button { + display: flex; + align-items: center; + justify-content: center; + padding: 0.75rem 2rem; + border-radius: 2rem; + cursor: pointer; + font-family: Source Sans Pro, Helvetica Neue, Arial, sans-serif; + border: none; width: 100%; -} \ No newline at end of file + transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); + border: solid 0.125rem transparent; +} +.demo-control-enabled label:hover, +.demo-control-enabled button:hover { + box-shadow: none; + border-color: #fff; +} +.demo-control-enabled button * { + pointer-events: none; +} +.demo-control-enabled-text { + position: relative; + display: block; + padding: 0 0 0 1.5rem; + color: #fff; + mix-blend-mode: exclusion; + font-size: 1.25rem; +} +.demo-control-enabled-text i { + font-style: normal; + webkit-tap-highlight-color: transparent; +} +.demo-control-enabled-text i::-moz-selection { + background-color: transparent; +} +.demo-control-enabled-text i::selection { + background-color: transparent; +} +.demo-control-enabled-text::-moz-selection { + background-color: transparent; +} +.demo-control-enabled-text::selection { + background-color: transparent; +} +.demo-control-enabled-text::before, .demo-control-enabled-text::after { + display: block; + content: ""; + position: absolute; + top: 50%; +} +.demo-control-enabled-text::before { + border: 0.125rem solid #fff; + width: 1rem; + height: 1rem; + left: 0; + transform: translate(0, -50%); + transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); +} +.demo-control-enabled-text::after { + opacity: 0; + width: 0.68rem; + height: 1em; + transform: translate(0, -50%) rotate(0); + left: 0.125rem; + margin-top: -0.2rem; + border: none; + background-color: transparent; + border-right: 0.125rem solid #fff; + border-bottom: 0.125rem solid #fff; + transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); +} +button[data-scsaver-enabled=true] .demo-control-enabled-text::before { + opacity: 0; +} +button[data-scsaver-enabled=true] .demo-control-enabled-text::after { + transform: translate(0, -50%) rotate(45deg); + opacity: 1; +} +input:checked + label .demo-control-enabled-text::before { + opacity: 0; +} +input:checked + label .demo-control-enabled-text::after { + transform: translate(0, -50%) rotate(45deg); + opacity: 1; +} +.demo-control-params { + opacity: 0.75; +} +.demo-control-params p { + margin: 0; +} +.demo-control-params p:not(:last-child) { + margin-bottom: 0.375rem; +} +.demo-control-params-label { + opacity: 0.5; +} + +.rainbow { + color: #fff; + background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3); + background-size: 1800% 1800%; + -webkit-animation: rainbow 32s ease infinite; + animation: rainbow 32s ease infinite; +} + +@-webkit-keyframes rainbow { + 0% { + background-position: 0% 82%; + } + 50% { + background-position: 100% 19%; + } + 100% { + background-position: 0% 82%; + } +} + +@keyframes rainbow { + 0% { + background-position: 0% 82%; + } + 50% { + background-position: 100% 19%; + } + 100% { + background-position: 0% 82%; + } +}/*# sourceMappingURL=custom.css.map */ \ No newline at end of file diff --git a/docusaurus/src/css/custom.css.map b/docusaurus/src/css/custom.css.map new file mode 100644 index 0000000..201bb03 --- /dev/null +++ b/docusaurus/src/css/custom.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["custom.scss","custom.css"],"names":[],"mappings":"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","file":"custom.css"} \ No newline at end of file diff --git a/docusaurus/src/css/custom.scss b/docusaurus/src/css/custom.scss index ef026e4..c9a6af0 100644 --- a/docusaurus/src/css/custom.scss +++ b/docusaurus/src/css/custom.scss @@ -25,17 +25,19 @@ } /* For readability concerns, you should choose a lighter palette in dark mode. */ -[data-theme='dark'] { - --ifm-color-primary: #91a3ee; - --ifm-color-primary-dark: #7087e9; - --ifm-color-primary-darker: #5f79e6; - --ifm-color-primary-darkest: #2d50df; - --ifm-color-primary-light: #b2bff3; - --ifm-color-primary-lighter: #c3cdf6; - --ifm-color-primary-lightest: #f5f6fd; +html[data-theme='dark'] { + --ifm-color-primary: #989de2; + --ifm-color-primary-dark: #7b81da; + --ifm-color-primary-darker: #6c73d6; + --ifm-color-primary-darkest: #666dd4; + --ifm-color-primary-light: #b5b9ea; + --ifm-color-primary-lighter: #c4c7ee; + --ifm-color-primary-lightest: #f0f1fb; + --ifm-background-color: #000419; + // html tag - --ifm-background-color: #000419 !important; + // --ifm-background-color: #000419 !important; } //Docusaurus custom @@ -61,15 +63,20 @@ html:not(.docs-doc-page) { /* top: 0; left: 0; z-index: 999; */ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; position: relative; align-items: center; background-position: 50%; background-repeat: no-repeat; background-size: cover; - height: 100vh; + min-height: 100vh; width: 100%; background-color: #000419; color: var(--ifm-color-primary-light); + padding: 5rem 0; &-inner { display: flex; @@ -80,6 +87,10 @@ html:not(.docs-doc-page) { width: 100%; } + .scsaver { + position: absolute; + } + a { color: inherit; text-decoration: none; @@ -129,7 +140,9 @@ html:not(.docs-doc-page) { font-weight: 300; margin: .625rem 0 0; position: relative; - text-align: center + text-align: center; + font-family: 'Montserrat', sans-serif; + font-weight: 900; a { display: block; @@ -142,6 +155,11 @@ html:not(.docs-doc-page) { } } + &-logo { + width: 8rem; + height: 8rem; + } + &-tagline { margin: 1.5rem 0 2.5rem; font-size: 1.5rem; diff --git a/docusaurus/src/pages/index.js b/docusaurus/src/pages/index.js index 96ded79..e8840df 100644 --- a/docusaurus/src/pages/index.js +++ b/docusaurus/src/pages/index.js @@ -6,6 +6,8 @@ import Layout from '@theme/Layout'; import HomepageFeatures from '@site/src/components/HomepageFeatures'; import Head from '@docusaurus/Head'; import useBaseUrl from '@docusaurus/useBaseUrl'; +import Logo from '@site/static/img/logo.svg'; + // import styles from './index.module.css'; @@ -33,6 +35,7 @@ function HomepageCover() { return (
+

{siteConfig.title}0.1.5

{siteConfig.tagline}

@@ -66,13 +69,6 @@ function HomepageCover() { Get Started
-