waveterm/wails
0
0
Fork 0
mirror of https://github.com/wavetermdev/wails.git synced 2026-08-05 13:53:43 -07:00
Code Issues Packages Projects Releases Wiki Activity

Feature/docs update (#1218)

Browse Source 
* Doc updates

* Add carousel

* Add more images to carousel

* Add search

* Fix CSS

* Cheeky fix for 1px bug
This commit is contained in:
Lea Anthony
2022-03-06 22:29:26 +11:00
committed by GitHub
parent a48ea8768f
commit 51dd1361e3
9 changed files with 396 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/ISSUE_TEMPLATE/bug_report.md
+15
View File
@@ -8,6 +8,17 @@ assignees: ''
---
<!---
*** Please note: No new bug reports are being accepted for Wails v1 ***
Before submitting this issue, please do the following:
- Do a web search for your error. This usually leads to a much better understanding of the issue.
- Prove that the error is indeed a Wails bug and not an application bug, with a specific set of steps to reproduce.
- Search both the issue tracker (even closed issues) and discussion forums.
- Try to fix it yourself. Keep a list of things you have done to fix the problem.
If after doing all the above, the problem remains, please continue with this ticket providing *all* the information requested.
Bug reports that do not follow these steps will likely be closed, so please help us to help you.
--->
**Description**
@@ -15,6 +26,7 @@ A clear and concise description of what the bug is.
**To Reproduce**
Steps to reproduce the behaviour:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
@@ -26,6 +38,9 @@ A clear and concise description of what you expected to happen.
**Screenshots**
If applicable, add screenshots to help explain your problem.
**Attempted Fixes**
A list of things you have tried to fix the problem, including search engine links.
**System Details**
Please add the output of `wails doctor`.
website/docs/guides/troubleshooting.mdx
+13 -1
View File
@@ -12,4 +12,16 @@ something similar to the following code:
//go:embed frontend/dist
var assets embed.FS
```
Check that `frontend/dist` contains your application assets.
Check that `frontend/dist` contains your application assets.
## Mac application not valid
If your built application looks like this in finder:
<p className="text--center">
<img src="/img/troubleshooting/invalid_mac_app.png"></img>
</p>
it's likely that your application's `info.plist` is invalid. Update the file in `build/<yourapp>.app/Contents/info.plist`
and check if the data is valid, EG check the binary name is correct. To persist the changes, copy the file back to
the `build/darwin` directory.
website/docusaurus.config.js
+24 -1
View File
@@ -53,7 +53,7 @@ const darkCodeTheme = require("prism-react-renderer/themes/palenight");
"https://github.com/wailsapp/wails/edit/master/website/blog/",
},
theme: {
customCss: require.resolve("./src/css/custom.css"),
customCss: [require.resolve("./src/css/custom.css"), require.resolve("./src/css/carousel.min.css")],
},
}),
],
@@ -167,6 +167,29 @@ const darkCodeTheme = require("prism-react-renderer/themes/palenight");
theme: lightCodeTheme,
darkTheme: darkCodeTheme,
},
algolia: {
// The application ID provided by Algolia
appId: 'AWTCNFZ4FF',
// Public API key: it is safe to commit it
apiKey: 'd6495e0dda237daa037967b3809e4089',
indexName: 'wails',
// Optional: see doc section below
contextualSearch: true,
// Optional: Specify domains where the navigation should occur through window.location instead on history.push. Useful when our Algolia config crawls multiple documentation sites and we want to navigate with window.location.href to them.
// externalUrlRegex: 'external\\.com|domain\\.com',
// Optional: Algolia search parameters
searchParameters: {},
// Optional: path for search page that enabled by default (`false` to disable it)
searchPagePath: 'false',
//... other Algolia params
},
}),
}
);
website/package.json
+1
View File
@@ -28,6 +28,7 @@
"react": "^17.0.1",
"react-contributors": "^1.1.2",
"react-dom": "^17.0.1",
"react-responsive-carousel": "^3.2.22",
"styled-components": "^5.3.1",
"url-loader": "^4.1.1"
},
website/src/css/carousel.min.css
Vendored
+309
View File
@@ -0,0 +1,309 @@
.carousel .control-arrow, .carousel.carousel-slider .control-arrow {
-webkit-transition: all .25s ease-in;
-moz-transition: all .25s ease-in;
-ms-transition: all .25s ease-in;
-o-transition: all .25s ease-in;
transition: all .25s ease-in;
opacity: .4;
filter: alpha(opacity=40);
position: absolute;
z-index: 2;
top: 20px;
background: none;
border: 0;
font-size: 32px;
cursor: pointer
}
.carousel .control-arrow:focus, .carousel .control-arrow:hover {
opacity: 1;
filter: alpha(opacity=100)
}
.carousel .control-arrow:before, .carousel.carousel-slider .control-arrow:before {
margin: 0 5px;
display: inline-block;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
content: ''
}
.carousel .control-disabled.control-arrow {
opacity: 0;
filter: alpha(opacity=0);
cursor: inherit;
display: none
}
.carousel .control-prev.control-arrow {
left: 0
}
.carousel .control-prev.control-arrow:before {
border-right: 8px solid #fff
}
.carousel .control-next.control-arrow {
right: 0
}
.carousel .control-next.control-arrow:before {
border-left: 8px solid #fff
}
.carousel-root {
outline: none;
margin-left: 33%;
}
.carousel {
position: relative;
width: 100%
}
.carousel * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.carousel img {
width: 100%;
display: inline-block;
pointer-events: none
}
.carousel .carousel {
position: relative
}
.carousel .control-arrow {
outline: 0;
border: 0;
background: none;
top: 50%;
margin-top: -13px;
font-size: 18px
}
.carousel .thumbs-wrapper {
margin: 20px;
overflow: hidden
}
.carousel .thumbs {
-webkit-transition: all .15s ease-in;
-moz-transition: all .15s ease-in;
-ms-transition: all .15s ease-in;
-o-transition: all .15s ease-in;
transition: all .15s ease-in;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
position: relative;
list-style: none;
white-space: nowrap
}
.carousel .thumb {
-webkit-transition: border .15s ease-in;
-moz-transition: border .15s ease-in;
-ms-transition: border .15s ease-in;
-o-transition: border .15s ease-in;
transition: border .15s ease-in;
display: inline-block;
margin-right: 6px;
white-space: nowrap;
overflow: hidden;
border: 3px solid #fff;
padding: 2px
}
.carousel .thumb:focus {
border: 3px solid #ccc;
outline: none
}
.carousel .thumb.selected, .carousel .thumb:hover {
border: 3px solid #333
}
.carousel .thumb img {
vertical-align: top
}
.carousel.carousel-slider {
position: relative;
margin: 0;
overflow: hidden
}
.carousel.carousel-slider .control-arrow {
top: 0;
color: #fff;
font-size: 26px;
bottom: 0;
margin-top: 0;
padding: 5px
}
.carousel.carousel-slider .control-arrow:hover {
background: rgba(0, 0, 0, 0.2)
}
.carousel .slider-wrapper {
overflow: hidden;
margin: auto;
width: 101%;
-webkit-transition: height .15s ease-in;
-moz-transition: height .15s ease-in;
-ms-transition: height .15s ease-in;
-o-transition: height .15s ease-in;
transition: height .15s ease-in
}
.carousel .slider-wrapper.axis-horizontal .slider {
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex
}
.carousel .slider-wrapper.axis-horizontal .slider .slide {
flex-direction: column;
flex-flow: column
}
.carousel .slider-wrapper.axis-vertical {
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex
}
.carousel .slider-wrapper.axis-vertical .slider {
-webkit-flex-direction: column;
flex-direction: column
}
.carousel .slider {
margin: 0;
padding: 0;
position: relative;
list-style: none;
width: 100%
}
.carousel .slider.animated {
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
-ms-transition: all .35s ease-in-out;
-o-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.carousel .slide {
min-width: 100%;
margin: 0;
position: relative;
text-align: center
}
.carousel .slide img {
width: 100%;
vertical-align: top;
border: 0
}
.carousel .slide iframe {
display: inline-block;
width: calc(100% - 80px);
margin: 0 40px 40px;
border: 0
}
.carousel .slide .legend {
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
position: absolute;
bottom: 40px;
left: 50%;
margin-left: -45%;
width: 90%;
border-radius: 10px;
background: #000;
color: #fff;
padding: 10px;
font-size: 12px;
text-align: center;
opacity: 0.25;
-webkit-transition: opacity .35s ease-in-out;
-moz-transition: opacity .35s ease-in-out;
-ms-transition: opacity .35s ease-in-out;
-o-transition: opacity .35s ease-in-out;
transition: opacity .35s ease-in-out
}
.carousel .control-dots {
position: absolute;
bottom: 0;
margin: 10px 0;
padding: 0;
text-align: center;
width: 100%;
z-index: 1
}
@media (min-width: 960px) {
.carousel .control-dots {
bottom: 0
}
}
.carousel .control-dots .dot {
-webkit-transition: opacity .25s ease-in;
-moz-transition: opacity .25s ease-in;
-ms-transition: opacity .25s ease-in;
-o-transition: opacity .25s ease-in;
transition: opacity .25s ease-in;
opacity: .3;
filter: alpha(opacity=30);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
background: #fff;
border-radius: 50%;
width: 8px;
height: 8px;
cursor: pointer;
display: inline-block;
margin: 0 8px
}
.carousel .control-dots .dot.selected, .carousel .control-dots .dot:hover {
opacity: 1;
filter: alpha(opacity=100)
}
.carousel .carousel-status {
position: absolute;
top: 0;
right: 0;
padding: 5px;
font-size: 10px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9);
color: #fff
}
.carousel:hover .slide .legend {
opacity: 1
}
website/src/pages/index.js
+34 -11
View File
@@ -5,24 +5,47 @@ import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import styles from './index.module.css';
import HomepageFeatures from '../components/HomepageFeatures';
import ThemedImage from '@theme/ThemedImage';
import useBaseUrl from "@docusaurus/core/lib/client/exports/useBaseUrl";
import {translate} from '@docusaurus/Translate'; // i18n component
var Carousel = require('react-responsive-carousel').Carousel;
function HomepageHeader() {
const {siteConfig} = useDocusaurusContext();
return (
<header className={clsx('hero', styles.heroBanner)}>
<div className="container">
<ThemedImage
alt="Wails Logo"
width="30%"
sources={{
light: useBaseUrl('/img/logo-light.svg'),
dark: useBaseUrl('/img/logo-dark.svg'),
}}
/>
<Carousel showArrows={false} width={"50%"}
showThumbs={false} stopOnHover={false}
showStatus={false} autoPlay={true}
showIndicators={false}
infiniteLoop={true} interval={3000} transitionTime={1000}>
<div>
<img src="/img/wails-app-mac.png"/>
</div>
<div>
<img src="/img/showcase/ytd.png"/>
</div>
<div>
<img src="/img/showcase/wombat.png"/>
</div>
<div>
<img src="/img/showcase/wally.png"/>
</div>
<div>
<img src="/img/october.png"/>
</div>
<div>
<img src="/img/showcase/mollywallet.png"/>
</div>
</Carousel>
{/*<ThemedImage*/}
{/* alt="Wails Logo"*/}
{/* width="30%"*/}
{/* sources={{*/}
{/* light: useBaseUrl('/img/logo-light.svg'),*/}
{/* dark: useBaseUrl('/img/logo-dark.svg'),*/}
{/* }}*/}
{/*/>*/}
<p className="hero__subtitle">{translate({id: "homepage.Tagline"})}</p>
<div className={styles.buttons}>
<Link
website/static/img/october.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 137 KiB

website/static/img/troubleshooting/invalid_mac_app.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

website/static/img/wails-app-mac.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 898 KiB