I'm developing a theme locally and using Gulp to run tasks. My theme directory structure looks like this:
|- theme folder/
|- app/
|- css/
|- fonts/
|- images/
|- index.html
|- js/
|- scss/
|- dist/
|- optimized files from app/
|- all other standard WP theme files and subdirs
|- gulpfile.js
|- node_modules/
|- package.json
When WordPress loads the theme, I see a blank screen, which is to be expected. WP looks for the theme files in the top-level directory of the theme folder. Is it possible to point directly to the dist folder? If it helps, I'm using Flywheel for my local dev setup.
index.php, style.css (the main stylesheet where you declare theme's metadata), header.php and footer.php need to be placed in the root of your theme's folder. Every other files (assets, includes, et cetera) can live in their own subdirectory.
For more details, please read: Organizing Theme Files | Theme Developer Handbook.
Related
I would like to set my vite.config.js to build assets split into subfolders for js, CSS, and images.
Basically, I would like to have a build like this:
dist/
- index.html
- assets/
- images/
- css/
- js/
How should I change the config?
I have been given a folder called PackageName with the following structure.
PackageName/
|- SubPackage.jl/
|- src/
|- MyModule.jl
|- test/
|- runtests.jl
|- Project.toml
|- Manifest.toml
|- Project.toml
|- Manifest.toml
|- .gitignore
|- .gitattributes
|- README.md
Inside PackageName there are various .git files like .gitignore, .gitattributes and README.md. There are also a Project.toml and a Manifest.toml which are required in a Julia package. Finally, there are various folders with the structure of SubPackage. Essentially they also contain a Project.toml and a Manifest.toml. They also contain a src/ directory with a Module named MyModule.jl and a test/ directory with some unit testing. The MyModule.jl has a function called myfunction(), which is exported.
I would like to use all the SubPackage-style packages but I am encountering some issues. PackageName doesn't seem to be a proper Julia package because
it doesn't have a src/ directory.
it's Project.toml has an author, a version and [deps] fields but lacks a name and uuid.
What is the best way to go about using the packages in this folder properly within a Julia environment? Essentially I would like to be able to do using PackageName and being able to use myfunction().
As I need an /about route in NextJS, I've created the following folder structure:
...
|
pages/
|
├── about/
|
├── index.js
|
├── AboutContent.jsx
Where AboutContent.jsx is just a component to help index.js with part of the logic. The problem is that the AboutContent.jsx has become a route:/about/AboutContent. How do I prevent non-index.js components to become routes?
Move it out of the pages folder.
pages folder must have only page components, rest of the components you can put in your src folder.
|
pages/
|
├── about/
|
├── index.js
src/
|
├── AboutContent.jsx
just import AboutContent from the src folder
You can colocate test files or other files used by components in the pages directory. Inside next.config.js, add the pageExtensions config:
module.exports = {
pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js'],
}
https://nextjs.org/docs/api-reference/next.config.js/custom-page-extensions
In BETA Next.js#13.0.x, you can move your pages and components to /app directory while it is still okay to keep the page components under /pages directory. But routes across /app and /pages directories should not resolve to the same URL path. It may cause a build-time exception. I recommend to upgrade your Next.js to the latest and put all pages in /app directory.
|
app/
|
├── about/
|
|-- AbountContent.js
├── layout.js
|-- page.js
|
ui/
|
|-- BaseComponent.js
When I'm developing locally the images are found when I place the /public folder in /src/:
# locally
./src/public/images/
Then when I do a deploy the images are not found. But when I place the public folder outside of src the images are found:
# deploy
./public/images/
./src/
And I use the images as:
<img src="/images/my-image.jpg" alt="" />
Is there a configuration setting I have to use?
Edit:
Full structure:
|- .now/
| |- project.json
| └── README.txt
|- next.config.js
|- now.json
|- src/
| |- .next/
| | |- build-manifest.json
| | |- react-loadable-manifest.json
| | |- cache/
| | |- server/
| | └── static/
| |- pages/
| └── next-env.d.ts
The public folder has to be in the root. There’s no way to configure otherwise.
Files inside public can then be referenced by your code starting from the base URL (/).
/public/path/image.jpg is served as /path/image.jpg
https://nextjs.org/docs/basic-features/static-file-serving
Next.js can serve static files, like images, under a folder called public in the root directory.
You can check the document here
import Image from 'next/image'
function Avatar() {
return <Image src="/me.png" alt="me" width="64" height="64" />
}
export default Avatar
Have fun.
You might have problem with letter case like .png and .PNG. You have to use the same case in code as in the image extension case.
Is it possible to change the path of the injected file before injection occurs?
I am using Grunt/Bower/Connect/Wiredep, and my directory structure is:
www
|- dev-dist/
|- node_modules/
|- src/
|- vendor/
|- bower.json
|- Gruntfile.js
|- package.json
(Note: in my .bowerrc file I've added directory: vendor)
When I run the custom task grunt serve:dev it will create the directory dev-dist, I will then copy my index.html (only) to the folder, after which I run the task wiredep.
After running wiredep, the src paths to my dependencies are all prefixed with '../vendor/'. The problem is that when I run connect I have the option base: ['vendor', 'dev-dist', 'src']. When everything is served, the relative path to vendor doesn't make any sense because the vendor dir is already served at the root.
Is there a way I can modify the path to the injected files before wiredep injects them? (So I can remove the '../vendor')
What I would like to have happen is from the same workspace be able to run grunt serve:* and specify dev/stage/prod environments. This is why I did not want to serve the whole www directory.
Is there a way to exclude folders from being served in connect? (So instead of specifying base:[...], I can just exclude the stage-dist / prod-dist folders)
Thanks,
JD
You can use the option ignorePath with a regular expression
ignorePath: /\.\.\//,
from the wiredep to remove the ../ from the path that is getting injected. The configuration details are available over here https://github.com/taptapship/wiredep#configuration
I haven't used connect yet, so I am not sure of your second part of the question.