I am building an static markdown blog website using Vue3,and I am using require.context() to load markdown files.
This is the project structure,and I load files from static/posts.
├── dist
│ ├── assets
│ │ └── static
│ │ └── posts
│ │ ├── dev-first-vue3-todolist.md
│ │ ├── dev-fix-missing-xcrun.md
├── package.json
├── src
│ ├── App.vue
│ ├── main.js
├── static
│ └── posts
│ ├── dev-first-vue3-todolist.md
│ ├── dev-fix-missing-xcrun.md
└── vue.config.js
Here's how I load these markdown files.
let context = require.context("../static/posts", true, /\.md$/, "sync");
let keys = context.keys();
// the markdown file list
const postRawList = [];
keys.forEach((key) => {
const raw = context(key).default;
postRawList.push(raw);
});
It worked well. I can read postRawList from static/posts and render them by markdown parser.
The point is, I want my blog website static, so when I build this Vue app I use copy-webpack-plugin to copy these markdown files from static/posts to dist/assets/static/posts and it worked well.
config.plugins.push(
new CopyWebpackPlugin({
patterns: [
{
from: path.resolve(__dirname, "static/posts"),
to: path.resolve(__dirname, "dist/assets/static/posts"),
},
],
})
);
I want to manage my markdown posts only by adding or deleting markdown files in dist/assets/static/posts.
But after I changing the markdown files in dist/assets/static/posts(like delete dev-first-vue3-todolist.md) ,the markdown object list(postRawList) doesn't be updated.
The markdown list is the same as the markdown list in static/posts , and no matter how I change files in this 2 posts folder,it does't be updated.
I guess it is caused by "require cache", and I had tried to delete cache after changing the files, but it did't work.
delete require.cache[context.id];
So I want to know why the file objects not be updated after I built the app and change the files in markdown directory(loaded by require.context()).
This is my first time asking questions on stackoverflow,and I feel sorry if I didn't make it clear.
Is it possible to show different sidebars depending on what section of the site you're in? So if I had two sections (Books and Countries) then I could show the corresponding sidebar menu object:
module.exports = {
books: {
"Children's Book": [
"books/childrens-books/winnie-the-pooh",
"books/childrens-books/harry-potter",
],
"Non-Fiction": [
"books/non-fiction/hitchikers-guide",
"books/non-fiction/a-history-of-england",
]
},
countries: {
"Europe": [
"countries/europe/england",
"countries/europe/france",
"countries/europe/spain",
],
"Asia": [
"countries/asia/china",
"countries/asia/india",
"countries/asia/laos",
],
},
}
The docs do reference that something like this could be done, but there aren't any examples to go along with it:
You can have multiple sidebars for different Markdown files by adding more top-level keys to the exported object.
The only other place I can find sidebars referenced is in docusaurus.config.js, but I'm not sure what this section is for:
presets: [
[
'#docusaurus/preset-classic',
{
docs: {
sidebarPath: require.resolve('./sidebars.js'),
},
...
Any pointers appreciated!
So the issue was that my content structure didn't match what I had in sidebar.js. This is my content structure now:
docs
├── README.md
├── books
│ ├── childrens-books
│ │ ├── harry-potter.md
│ │ └── winnie-the-pooh.md
│ └── non-fiction
│ ├── a-history-of-england.md
│ └── hitchikers-guide.md
└── countries
├── asia
│ ├── china.md
│ ├── india.md
│ └── laos.md
└── europe
├── england.md
├── france.md
└── spain.md
├── docs
├── docusaurus.config.js
├── sidebars.js
└── src
I think the issue lay in the fact that Docusaurus couldn't find the articles I was referencing, so it just didn't parse.
With this set up URLs like localhost:3000/docs/books/childrens-books/harry-potter will work fine, but localhost:3000/docs/books/childrens-books/ will return a blank page since there's no corresponding article for that URL.
I have a bucket (logs) in Amazon S3 (us-east-1) with, unsurprisingly, logs, partitioned by application and date:
logs
├── peacekeepers
│ └── year=2018
│ ├── month=11
│ │ ├── day=01
│ │ ├── day=…
│ │ └── day=30
│ └── month=12
│ ├── day=01
│ ├── day=…
│ └── day=19
│ ├── 00:00 — 01:00.log
│ ├── …
│ └── 23:00 — 00:00.log
├── rep-hunters
├── retro-fans
└── rubber-duckies
I want to list all the objects (logs) for a particular date, month, year…
How do I do that with AWS SDK for Java 2.x?
New SDK makes it easy to work with paginated results:
S3Client client = S3Client.builder().region(Region.US_EAST_1).build();
ListObjectsV2Request request =
ListObjectsV2Request
.builder()
.bucket("logs")
.prefix("peacekeepers/year=2018/month=12")
// .prefix("peacekeepers/year=2018/month=12/day=19")
.build();
ListObjectsV2Iterable response = client.listObjectsV2Paginator(request);
for (ListObjectsV2Response page : response) {
for (S3Object object : page.contents()) {
// Consume the object
System.out.println(object.key());
}
}
Buck sounds like a great tool for both iOS and Android projects but I have not been abel to find any information on how to use it for react-native projects.
Update
Looks like there is some work being done on this but it may not be recommended yet.
https://github.com/facebook/nuclide/issues/31#issuecomment-164897170
https://github.com/facebook/buck/tree/master/test/com/facebook/buck/js
Update 2
Product Pains link https://productpains.com/post/react-native/add-buck-as-a-build-option
Update 8/6/2017:
I tried following my steps below for integrating React Native into an iOS app with Buck but I ran into issues when using React Native 0.47. Instead I have a new simpler approach for getting React Native working with Buck on iOS by linking to prebuilt libraries. I forked the Buck sample project repo and have it working with React Native in this repo. I also updated the README in that repo with instructions for running the demo Buck React Native iOS app and how to integrate yourself.
Note there are a couple issues with this approach documented in the README that may or may not be a problem for using this in a production app.
That repo also doesn't bundle the JS for production yet.
Older answer:
I got Buck working with an iOS project. It is very much a work in progress, but works. A few notes:
I manually copied files from node_modules/react-native/React and
node_modules/react-native/Libraries (see folder structure below).
I had to add the -w and Wno-error flags to each library because the main project had treat warnings as errors and I didn't want to see all of these React Native warnings in Xcode.
You may have to add more libraries following the pattern. It also helps to look at the React Native podspec.
There is probably opportunity to clean things up like there is no need for reactnative.xcodeproj in the vendor/reactnative folder (see below).
There is probably some work needed to correctly bundle the JS for production. Currently it will only work if the JS is fetched from a server (e.g. Node.js).
Here is my vendor/reactnative/BUCK file:
apple_library(
name = 'ReactNative',
srcs = glob([
'React/**/*.m',
'React/**/*.mm',
'React/**/*.c',
'React/**/*.S',
]),
exported_headers = glob([
'React/**/*.h',
]),
system_frameworks = [
'JavaScriptCore'
],
exported_linker_flags = [
'-lc++',
],
compiler_flags = [
'-Wno-error',
'-w'
],
visibility = ['PUBLIC'],
)
apple_library(
name = 'RCTWebSocket',
srcs = glob([
'Libraries/WebSocket/*.m',
]),
headers = glob([
'React/**/*.h',
]),
exported_headers = glob([
'Libraries/WebSocket/*.h',
]),
compiler_flags = [
'-Wno-error',
'-w'
],
visibility = ['PUBLIC'],
deps = [
':ReactNative',
]
)
apple_library(
name = 'RCTNetwork',
srcs = glob([
'Libraries/Network/*.m',
]),
headers = glob([
'React/**/*.h',
]),
exported_headers = glob([
'Libraries/Network/*.h',
]),
compiler_flags = [
'-Wno-error',
'-w'
],
visibility = ['PUBLIC'],
deps = [
':ReactNative',
]
)
apple_library(
name = 'RCTText',
srcs = glob([
'Libraries/Text/*.m',
]),
headers = glob([
'React/**/*.h',
]),
exported_headers = glob([
'Libraries/Text/*.h',
]),
compiler_flags = [
'-Wno-error',
'-w'
],
visibility = ['PUBLIC'],
deps = [
':ReactNative',
]
)
apple_library(
name = 'RCTImage',
srcs = glob([
'Libraries/Image/*.m',
]),
headers = glob([
'React/**/*.h',
'Libraries/Network/*.h'
]),
exported_headers = glob([
'Libraries/Image/*.h',
]),
compiler_flags = [
'-Wno-error',
'-w'
],
visibility = ['PUBLIC'],
deps = [
':ReactNative',
':RCTNetwork'
]
)
Here is the folder structure inside a vendor folder in my project:
vendor/reactnative
├── BUCK
├── Libraries
│ ├── ART
│ ├── ActionSheetIOS
│ ├── AdSupport
│ ├── Animated
│ ├── AppRegistry
│ ├── AppState
│ ├── BatchedBridge
│ ├── BugReporting
│ ├── CameraRoll
│ ├── Components
│ ├── CustomComponents
│ ├── DebugComponentHierarchy
│ ├── Devtools
│ ├── EventEmitter
│ ├── Experimental
│ ├── Fetch
│ ├── Geolocation
│ ├── Image
│ ├── Inspector
│ ├── Interaction
│ ├── JavaScriptAppEngine
│ ├── LayoutAnimation
│ ├── Linking
│ ├── LinkingIOS
│ ├── Modal
│ ├── NativeAnimation
│ ├── NavigationExperimental
│ ├── Network
│ ├── Promise.js
│ ├── PushNotificationIOS
│ ├── QuickPerformanceLogger
│ ├── RCTTest
│ ├── RKBackendNode
│ ├── ReactIOS
│ ├── ReactNative
│ ├── Sample
│ ├── Settings
│ ├── Storage
│ ├── StyleSheet
│ ├── Text
│ ├── Utilities
│ ├── Vibration
│ ├── WebSocket
│ ├── promiseRejectionIsError.js
│ ├── react-native
│ └── vendor
├── React
│ ├── Base
│ ├── Executors
│ ├── Layout
│ ├── Modules
│ ├── Profiler
│ └── Views
└── reactnative.xcodeproj
├── project.pbxproj
└── xcuserdata
Then in the deps of my main BUCK file I add:
'//vendor/reactnative:ReactNative',
'//vendor/reactnative:RCTWebSocket',
'//vendor/reactnative:RCTText',
'//vendor/reactnative:RCTNetwork',
'//vendor/reactnative:RCTImage'
There's no official documentation / template for building RN apps with Buck yet but it shouldn't be that hard. You'd need to add a BUCK file that does the equivalent of what your build.gradle file does.
It's mostly just:
Declares an Android app with a dependency on React Native from JCenter (Buck has the android_binary rule to do that)
In release mode it also bundles the JS into your app's assets
folder. You could skip this for a start (in dev mode the app fetches the JS from localhost at runtime) but I believe Buck has built-in support for bundling JS too.
I would like to extend my controller within simple widget.
I've created two files:
app/widgets/mywidget/controllers/base.js
app/widgets/mywidget/controllers/index.js
I start mycontroller.js file with line: exports.baseController = 'base'; and on Android it crashes with Exception:
/V8Exception(19693): Exception occurred at ti:/module.js:280: Uncaught Error: Requested module not found: alloy/controllers//glass/parent
Project tree looks like this:
app
├── README
├── alloy.js
├── assets
├── config.json
├── controllers
│ ├── base.js
│ ├── index.js
│ └── view.js
├── lib
│ └── user.js
├── models
├── styles
│ ├── app.tss
│ └── index.tss
├── views
│ ├── index.xml
│ └── view.xml
└── widgets
└── mywidget
├── controllers
│ ├── base.js
│ ├── index.js
│ └── view.js
├── styles
├── views
└── widget.json
index.js & view.js inside app/controller use base.js as baseController.
index.js & view.js inside app/widgets/mywidget/controllers use base.js inside same directory as their baseController. I don't try to extend baseController from app inside widget.